# Introduction

> Bitrix24 UI is a comprehensive UI library for Vue and Nuxt applications, offering a collection of fully styled and accessible components.

## What is Bitrix24 UI?

A UI library for Bitrix24 based on [Nuxt UI](https://ui.nuxt.com){rel="nofollow"}. This modern UI library, based on [Reka UI](https://reka-ui.com/){rel="nofollow"}, [Tailwind CSS](https://tailwindcss.com/){rel="nofollow"}, and [Tailwind Variants](https://www.tailwind-variants.org/){rel="nofollow"}, allows you to create beautiful and accessible applications with over 100 ready-to-use components.

> Developer Experience First
> Intuitive APIs, excellent TypeScript support, auto-completion, and comprehensive docs.> Beautiful by Default
> A modern, clean design out of the box with a theme you can adapt in minutes.> Accessible by Default
> WAI-ARIA compliant with keyboard navigation, focus management, and screen reader support.> Production Ready
> 100+ battle-tested components used by thousands of applications in production.

## What's new in v2?

We support almost all components of Nuxt UI v4.

Read more in the [migration guide](https://bitrix24.github.io/b24ui/raw/docs/getting-started/migration/v2.md).

## Core technologies

### Reka UI

Bitrix24 UI is built on top of [Reka UI](https://reka-ui.com/){rel="nofollow"} as a foundation for the components:

- **WAI-ARIA Compliance**: Follows [WAI-ARIA authoring practices](https://reka-ui.com/docs/overview/accessibility){rel="nofollow"} with proper semantics and roles
- **Keyboard Navigation**: Built-in keyboard support for complex components like tabs and dialogs
- **Focus Management**: Intelligent focus handling that moves focus based on user interactions
- **Accessible Labels**: Abstractions to simplify labeling controls for screen readers

### Tailwind CSS

Bitrix24 UI integrates the latest [Tailwind CSS](https://tailwindcss.com/){rel="nofollow"} v4, bringing significant improvements:

- **5x Faster Builds**: Full builds up to 5x faster, incremental builds over 100x faster
- **Unified Toolchain**: Built-in import handling, vendor prefixing, and syntax transforms
- **CSS-first Configuration**: Customize and extend directly in CSS instead of JavaScript
- **Modern Web Features**: Container queries, cascade layers, wide-gamut colors, and more

### Tailwind Variants

Bitrix24 UI takes advantage of [Tailwind Variants](https://www.tailwind-variants.org/){rel="nofollow"} to provide a powerful theming system:

- **Dynamic Styling**: Flexible component variants with a powerful API
- **Type Safety**: Full TypeScript support with auto-completion
- **Conflict Resolution**: Efficient merging of conflicting styles

## Key features

### Ecosystem integration

Bitrix24 UI integrates with the Nuxt ecosystem to provide a seamless development experience:

- [**@bitrix24/b24icons**](https://bitrix24.github.io/b24icons/){rel="nofollow"}: Bitrix24 Icons for Web Applications
- [**Color Mode**](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/color-mode.md): Dark and Light mode with auto-detection
- [**i18n**](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/i18n.md): Internationalize your components with 50+ languages
- [**Content**](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/content.md): Beautiful typography out of the box

### Vue Compatibility

Bitrix24 UI works with any Vue project. Simply add the Vite and Vue plugins to your configuration:

- **Auto-imports**: Components and composables are automatically imported and available globally
- **Theming System**: Full theming support with customizable colors, sizes, variants, and more
- **Developer Experience**: Complete TypeScript support with IntelliSense and auto-completion

> [Vue installation guide](https://bitrix24.github.io/b24ui/raw/docs/getting-started/installation/vue.md)
> Learn how to install and configure Bitrix24 UI in a Vue project in the **Vue installation guide**.

### TypeScript Support

Bitrix24 UI provides comprehensive TypeScript integration for a superior developer experience:

- **Auto-completion**: For all component props, slots, and events
- **Generic Components**: Using [Vue Generics](https://vuejs.org/api/sfc-script-setup.html#generics){rel="nofollow"}
- **Type-safe Theming**: In `app.config.ts`
- **IntelliSense**: Throughout your entire codebase

## FAQ

**What are the differences between Bitrix24 UI and Nuxt UI?**
Basically, none. Bitrix24 UI is based on Nuxt UI. However, it's styled to match the overall look of Bitrix24.

**Is Bitrix24 UI free to use?**
Yes! Bitrix24 UI is completely free and open source under the MIT license. All 100+ components are available to everyone.

**Can I use Bitrix24 UI with Vue without Nuxt?**
Yes! While optimized for Nuxt, Bitrix24 UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the 

[installation guide](https://bitrix24.github.io/b24ui/raw/docs/getting-started/installation/vue.md) to get started.**Will Bitrix24 UI work with other CSS frameworks like UnoCSS?**
No. Bitrix24 UI is designed exclusively for Tailwind CSS. UnoCSS support would require significant architecture changes due to different class naming conventions.

**How does Bitrix24 UI handle accessibility?**
Through 

[Reka UI](https://reka-ui.com/docs/overview/accessibility){rel="nofollow"} integration, Bitrix24 UI provides automatic ARIA attributes, keyboard navigation, focus management, and screen reader support. While offering a strong foundation, testing in your specific use case remains important.**How is Bitrix24 UI tested?**
Bitrix24 UI ensures reliability with 1000+ Vitest tests covering core functionality and accessibility.

**Is Bitrix24 UI production-ready?**
Yes! Bitrix24 UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.

---

# Installation

> Learn how to install and configure Bitrix24 UI in your Nuxt application.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/installation/vue.md)
> Looking for the **Vue** version?

## Setup

### Use our Nuxt Starter

Start your project using the [bitrix24/starter-b24ui](https://github.com/bitrix24/starter-b24ui){rel="nofollow"} template with Bitrix24 UI pre-configured.

Create a new project locally by running the following command:

```bash \[Terminal]
git clone https://github.com/bitrix24/starter-b24ui.git <project-name>
cd <project-name>
pnpm install
pnpm run dev
```

> !NOTE
> The `<project-name>` argument is the name of the directory where the project will be created, replace it with your project name.

### Add to a Nuxt project

::steps{level="4"}
#### Install the Bitrix24 UI package

```bash \[pnpm]
pnpm add @bitrix24/b24ui-nuxt
``````bash \[yarn]
yarn add @bitrix24/b24ui-nuxt
``````bash \[npm]
npm install @bitrix24/b24ui-nuxt
``````bash \[bun]
bun add @bitrix24/b24ui-nuxt
```

> !WARNING
> If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist){rel="nofollow"} in your `.npmrc` file or install `tailwindcss` in your project's root directory.

#### Add the Bitrix24 UI module in your `nuxt.config.ts`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt']
})
```

#### Import Tailwind CSS and Bitrix24 UI in your CSS

```css \[app/assets/css/main.css]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";
``````ts \[nuxt.config.ts] {3}
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css']
})
```

> !NOTE
> It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss){rel="nofollow"} extension for VSCode and add the following settings:
>
> ```json [.vscode/settings.json]
> {
>   "files.associations": {
>     "*.css": "tailwindcss"
>   },
>   "editor.quickSuggestions": {
>     "strings": "on"
>   },
>   "tailwindCSS.classAttributes": ["class", "b24ui"],
>   "tailwindCSS.experimental.classRegex": [
>     ["b24ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
>   ]
> }
> ```

#### Wrap your app with App component

```vue [app.vue]
<template>
  <B24App>
    <NuxtPage />
  </B24App>
</template>
```

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/components/app.md)
> The `App` component provides global configurations and is required for **Toast**, **Tooltip** components to work as well as **Programmatic Overlays**.
::

## Options

You can customize Bitrix24 UI by providing options in your `nuxt.config.ts`.

### `colorMode`

Use the `colorMode` option to enable or disable the color mode integration from `@vueuse/core`.

- Default: `true`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```ts [nuxt.config.ts] {4-6}
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css'],
  b24ui: {
    colorMode: false
  }
})
```

### `theme.prefix`

Use the `theme.prefix` option to configure the same prefix you set on your Tailwind CSS import. This ensures Bitrix24 UI components use the correct prefixed utility classes and CSS variables.

```ts \[nuxt.config.ts] {4-8}
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css'],
  b24ui: {
    theme: {
      prefix: 'tw'
    }
  }
})
``````css \[app/assets/css/main.css] {1}
@import "tailwindcss" prefix(tw);
@import "@bitrix24/b24ui-nuxt";
```

This will automatically prefix all Tailwind utility classes and CSS variables in Bitrix24 UI component themes:

```html
<!-- Without prefix -->
<button class="px-2 py-1 text-xs hover:bg-red-500/75">Button</button>

<!-- With prefix: tw -->
<button class="tw:px-2 tw:py-1 tw:text-xs tw:hover:bg-red-500/75">Button</button>
```

> [!NOTE](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-prefix-option)
> Learn more about using a prefix in the Tailwind CSS documentation.

### `mdc`

Use the `mdc` option to force the import of Bitrix24 UI `<Prose>` components even if `@nuxtjs/mdc` or `@nuxt/content` is not installed.

- Default: `true`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```ts [nuxt.config.ts] {4-6}
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css'],
  b24ui: {
    mdc: false
  }
})
```

### `content`

Use the `content` option to force the import of Bitrix24 UI `<Prose>` and `<B24Content>` components even if `@nuxt/content` is not installed (`@nuxtjs/mdc` is installed by `@nuxt/content`).

- Default: `false`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```ts [nuxt.config.ts] {4-6}
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css'],
  b24ui: {
    content: true
  }
})
```

### `experimental.componentDetection`

Use the `experimental.componentDetection` option to enable automatic component detection for tree-shaking. This feature scans your source code to detect which components are actually used and only generates the necessary CSS for those components (including their dependencies).

- Default: `false`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- Type: `boolean | string[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

**Enable automatic detection:**

```ts [nuxt.config.ts] {4-8}
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css'],
  b24ui: {
    experimental: {
      componentDetection: true
    }
  }
})
```

**Include additional components for dynamic usage:**

```ts [nuxt.config.ts] {4-8}
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css'],
  b24ui: {
    experimental: {
      componentDetection: ['Modal', 'Dropdown', 'Popover']
    }
  }
})
```

> !NOTE
> When providing an array of component names, automatic detection is enabled and these components (along with their dependencies) are guaranteed to be included. This is useful for dynamic components like `<component :is="..." />` that can't be statically analyzed.

---

# Installation

> Learn how to install and configure Bitrix24 UI in your Vue application, compatible with both plain Vite and Inertia.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/installation/nuxt.md)
> Looking for the **Nuxt** version?

## Setup

### Use our Vue starter

Start your project using the [bitrix24/starter-b24ui-vue](https://github.com/bitrix24/starter-b24ui-vue){rel="nofollow"} template with Bitrix24 UI pre-configured.

Create a new project locally by running the following command:

```bash \[Terminal]
git clone https://github.com/bitrix24/starter-b24ui-vue.git <project-name>
cd <project-name>
pnpm install
pnpm run dev
```

> !NOTE
> The `<project-name>` argument is the name of the directory where the project will be created, replace it with your project name.

### Add to a Vue project

::steps{level="4"}
#### Install the Bitrix24 UI package

```bash \[pnpm]
pnpm add @bitrix24/b24ui-nuxt
``````bash \[yarn]
yarn add @bitrix24/b24ui-nuxt
``````bash \[npm]
npm install @bitrix24/b24ui-nuxt
``````bash \[bun]
bun add @bitrix24/b24ui-nuxt
```

> !WARNING
> If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist){rel="nofollow"} in your `.npmrc` file or install `tailwindcss`, `vue-router` and `@unhead/vue` in your project's root directory.

#### Add the Bitrix24 UI Vite plugin in your `vite.config.ts`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```ts \[vite.config.ts (Vite)] {3,8}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite()
  ]
})
``````ts \[vite.config.ts (Laravel Inertia)] {3,20-22}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
import laravel from 'laravel-vite-plugin'

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.ts'],
      refresh: true
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false
        }
      }
    }),
    bitrix24UIPluginVite({
      inertia: true
    })
  ]
})
``````ts \[vite.config.ts (AdonisJS Inertia)] {3,15-17}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
import adonisjs from '@adonisjs/vite/client'
import inertia from '@adonisjs/inertia/client'

export default defineConfig({
  plugins: [
    adonisjs({
      entrypoints: ['inertia/app/app.ts'],
      reload: ['resources/views/**/*.edge']
    }),
    inertia(),
    vue(),
    bitrix24UIPluginVite({
      inertia: true
    })
  ]
})
```

> !TIP
> Bitrix24 UI registers `unplugin-auto-import` and `unplugin-vue-components`, which will generate `auto-imports.d.ts` and `components.d.ts` type declaration files. You will likely want to gitignore these, and add them to your `tsconfig`.
>
> ```json [tsconfig.app.json]
> {
>   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
> }
> ```
>
> ```bash [.gitignore]
> # Auto-generated type declarations
> auto-imports.d.ts
> components.d.ts
> ```

> !TIP
> Internally, Bitrix24 UI relies on custom alias to resolve the theme types. If you're using TypeScript, you should add an alias to your `tsconfig` to enable auto-completion in your `vite.config.ts`.
>
> ```json [tsconfig.node.json]
> {
>   "compilerOptions": {
>     "paths": {
>       "#build/b24ui": [
>         "./node_modules/.b24ui-nuxt/b24ui"
>       ]
>     }
>   }
> }
> ```

#### Use the Bitrix24 UI Vue plugin

```ts \[src/main.ts (Vite)] {3,14}
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(b24UiPlugin)

app.mount('#app')
``````ts \[resources/js/app.ts (Laravel Inertia)] {3,19}
import type { DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { createApp, h } from 'vue'

const appName = import.meta.env.VITE_APP_NAME || 'Laravel x Bitrix24 UI'

createInertiaApp({
  title: title => (title ? `${title} - ${appName}` : appName),
  resolve: name =>
    resolvePageComponent(
      `./pages/${name}.vue`,
      import.meta.glob<DefineComponent>('./pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(b24UiPlugin)
      .mount(el)
  }
})
``````ts \[inertia/app/app.ts (AdonisJS Inertia)] {3,19}
import type { DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'
import { createApp, h } from 'vue'

const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS x Bitrix24 UI'

createInertiaApp({
  title: title => (title ? `${title} - ${appName}` : appName),
  resolve: name =>
    resolvePageComponent(
      `../pages/${name}.vue`,
      import.meta.glob<DefineComponent>('../pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(b24UiPlugin)
      .mount(el)
  }
})
```

#### Import Tailwind CSS and Bitrix24 UI in your CSS

```css \[assets/main.css (Vite)]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";
``````css \[resources/css/app.css (Laravel Inertia)]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";
``````css \[inertia/css/app.css (AdonisJS Inertia)]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";
```

> !TIP
> Import the CSS file in your entrypoint.
>
> ```ts \[src/main.ts] {1}
> import './assets/main.css'
>
> import { createApp } from 'vue'
> import { createRouter, createWebHistory } from 'vue-router'
> import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
> import App from './App.vue'
>
> const app = createApp(App)
>
> const router = createRouter({
>   routes: [],
>   history: createWebHistory()
> })
>
> app.use(router)
> app.use(b24UiPlugin)
>
> app.mount('#app')
> ``````ts \[resources/js/app.ts (Laravel Inertia)] {1}
> import '../css/app.css'
> import type { DefineComponent } from 'vue'
> import { createInertiaApp } from '@inertiajs/vue3'
> import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
> import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
> import { createApp, h } from 'vue'
>
> const appName = import.meta.env.VITE_APP_NAME || 'Laravel x Bitrix24 UI'
>
> createInertiaApp({
>   title: title => (title ? `${title} - ${appName}` : appName),
>   resolve: name =>
>     resolvePageComponent(
>       `./pages/${name}.vue`,
>       import.meta.glob<DefineComponent>('./pages/**/*.vue')
>     ),
>   setup({ el, App, props, plugin }) {
>     createApp({ render: () => h(App, props) })
>       .use(plugin)
>       .use(b24UiPlugin)
>       .mount(el)
>   }
> })
> ``````ts \[inertia/app/app.ts (AdonisJS Inertia)] {1}
> import '../css/app.css'
> import type { DefineComponent } from 'vue'
> import { createInertiaApp } from '@inertiajs/vue3'
> import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
> import { resolvePageComponent } from '@adonisjs/inertia/helpers'
> import { createApp, h } from 'vue'
>
> const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS x Bitrix24 UI'
>
> createInertiaApp({
>   title: title => (title ? `${title} - ${appName}` : appName),
>   resolve: name =>
>     resolvePageComponent(
>       `../pages/${name}.vue`,
>       import.meta.glob<DefineComponent>('../pages/**/*.vue')
>     ),
>   setup({ el, App, props, plugin }) {
>     createApp({ render: () => h(App, props) })
>       .use(plugin)
>       .use(b24UiPlugin)
>       .mount(el)
>   }
> })
> ```

> !NOTE
> It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss){rel="nofollow"} extension for VSCode and add the following settings:
>
> ```json [.vscode/settings.json]
> {
>   "files.associations": {
>     "*.css": "tailwindcss"
>   },
>   "editor.quickSuggestions": {
>     "strings": "on"
>   },
>   "tailwindCSS.classAttributes": ["class", "b24ui"],
>   "tailwindCSS.experimental.classRegex": [
>     ["b24ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
>   ]
> }
> ```

#### Wrap your app with App component

```vue \[src/App.vue (Vite)]
<template>
  <B24App>
    <RouterView />
  </B24App>
</template>
``````vue \[resources/js/pages/index.vue (Laravel Inertia)]
<template>
  <B24App>
    <!-- Your content goes here -->
  </B24App>
</template>
``````vue \[inertia/pages/index.vue (AdonisJS Inertia)]
<template>
  <B24App>
    <!-- Your content goes here -->
  </B24App>
</template>
```

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/components/app.md)
> The `App` component sets up global config and is required for **Toast**, **Tooltip** and **programmatic overlays**.

#### Add the `isolate` class to your root container

```html \[index.html (Vite)] {9}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bitrix24 UI</title>
  </head>
  <body>
    <div id="app" class="isolate"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
``````blade \[resources/views/app.blade.php (Laravel Inertia)] {10}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @inertiaHead
    @vite('resources/js/app.ts')
  </head>
  <body>
    <div class="isolate">
        @inertia
    </div>
  </body>
</html>
``````edge \[resources/views/inertia\_layout.edge (AdonisJS Inertia)] {10}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @inertiaHead()
    @vite(['inertia/app/app.ts', `inertia/pages/${page.component}.vue`])
  </head>
  <body>
    @inertia({ class: 'isolate' })
  </body>
</html>
```

> !NOTE
> This ensures styles are scoped to your app and prevents issues with overlays and stacking contexts.
::

## Options

You can customize Bitrix24 UI by providing options in your `vite.config.ts`.

### `colorMode`

Use the `colorMode` option to enable or disable the color mode integration from `@vueuse/core`.

- Default: `true`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```ts [vite.config.ts] {9}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      colorMode: false
    })
  ]
})
```

### `theme.prefix`

Use the `theme.prefix` option to configure the same prefix you set on your Tailwind CSS import. This ensures Bitrix24 UI components use the correct prefixed utility classes and CSS variables.

```ts \[vite.config.ts] {9-11}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      theme: {
        prefix: 'tw'
      }
    })
  ]
})
``````css \[assets/main.css] {1}
@import "tailwindcss" prefix(tw);
@import "@bitrix24/b24ui-nuxt";
```

This will automatically prefix all Tailwind utility classes and CSS variables in Bitrix24 UI component themes:

```html
<!-- Without prefix -->
<button class="px-2 py-1 text-xs hover:bg-red-500/75">Button</button>

<!-- With prefix: tw -->
<button class="tw:px-2 tw:py-1 tw:text-xs tw:hover:bg-red-500/75">Button</button>
```

> [!NOTE](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-prefix-option)
> Learn more about using a prefix in the Tailwind CSS documentation.

### `inertia`

Use the `inertia` option to enable compatibility with [Inertia.js](https://inertiajs.com/){rel="nofollow"}.

```ts [vite.config.ts] {9}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      inertia: true
    })
  ]
})
```

> !NOTE
> When using this option, `vue-router` is not required as Inertia.js provides its own routing system. The components that would normally use `RouterLink` will automatically use Inertia's `InertiaLink` component instead.

---

# Migration to v2

> A comprehensive guide to migrate your application from Bitrix24 UI v1 to Bitrix24 UI v2.

> !NOTE
> Bitrix24 UI v2 requires **Nuxt 4** due to some dependencies. Make sure to upgrade to Nuxt 4 before migrating to Bitrix24 UI v2.

This guide provides step-by-step instructions to migrate your application to Bitrix24 UI v2.

## Changes

After upgrading to Bitrix24 UI v2, please note the following important changes:

### Renamed ButtonGroup

The `ButtonGroup` component has been renamed to [`FieldGroup`](https://bitrix24.github.io/b24ui/raw/docs/components/field-group.md):

```diff
<template>
- <B24ButtonGroup>
+ <B24FieldGroup>
    <B24Button label="Button" />
    <B24Button use-dropdown />
+ </B24FieldGroup>
- </B24ButtonGroup>
</template>
```

### Renamed model modifiers

The `modelModifiers` shape used by [`Input`](https://bitrix24.github.io/b24ui/raw/docs/components/input.md), [`InputNumber`](https://bitrix24.github.io/b24ui/raw/docs/components/input-number.md) and [`Textarea`](https://bitrix24.github.io/b24ui/raw/docs/components/textarea.md) has changed in v2:

1. The `nullify` modifier was renamed to `nullable` (it converts empty/blank values to `null`).
2. A new `optional` modifier was added (it converts empty/blank values to `undefined`).

```diff
- <B24Input v-model.nullify="value" />
+ <B24Input v-model.nullable="value" />
```

```diff
- <B24Textarea v-model="value" :model-modifiers="{ nullify: true }" />
+ <B24Textarea v-model="value" :model-modifiers="{ nullable: true }" />
```

Use `nullable` when you want empty values as `null`, and `optional` when you prefer `undefined` for absent values.

### Changes to Form component

The `Form` component has been improved in v2 with better state management and nested form handling. Here are the key changes you need to be aware of:

1. Schema **transformations will only*&#x2A; be applied to the **`@submit` data** and will no longer mutate the form's state. This provides better predictability and prevents unexpected state mutations.
2. **Nested forms must be enabled explicitly** using the `nested` prop. This makes the component behavior more explicit and prevents accidental nested form creation.
3. **Nested forms should now provide a `name`** prop (similar to `B24FormField`) and will automatically inherit their state from their parent form.

```diff
<template>
  <B24Form :state="state" :schema="schema" @submit="onSubmit">
    <B24FormField label="Customer" name="customer">
      <B24Input v-model="state.customer" placeholder="Wonka Industries" />
    </B24FormField>

    <div v-for="(item, index) in state.items" :key="index">
      <B24Form
-       :state="item"
+       :name="`items.${index}`"
        :schema="itemSchema"
+       nested
      >
        <B24FormField :label="!index ? 'Description' : undefined" name="description">
          <B24Input v-model="item.description" />
        </B24FormField>
        <B24FormField :label="!index ? 'Price' : undefined" name="price">
          <B24Input v-model="item.price" type="number" />
        </B24FormField>
      </B24Form>
    </div>
  </B24Form>
</template>
```

### useSidebarLayout removed

Composable `useSidebarLayout` is no longer supported.

Support for the loading state of the [SidebarLayout](https://bitrix24.github.io/b24ui/raw/docs/components/sidebar-layout.md) component via [DashboardGroup](https://bitrix24.github.io/b24ui/raw/docs/components/dashboard-group.md) will be added in an upcoming release.

### @bitrix24/b24style removed

The [Bitrix24 UI](https://github.com/bitrix24/b24ui/tree/main/src/runtime/air-design-tokens){rel="nofollow"} styles are now responsible for styling.

We've tried to maintain compatibility, but if any issues arise, please [let us know](https://github.com/bitrix24/b24ui/issues){rel="nofollow"}.

---

# Contribution

> A detailed guide on how to contribute to Bitrix24 UI, including insights on project structure, development workflow, and best practices.

The goal of this project is to provide components identical to Bitrix24 to enhance the user experience and simplify the development of applications for Bitrix24.

We have chosen [Nuxt UI](https://ui.nuxt.com/){rel="nofollow"} as the foundation. We welcome your contributions in the form of bug reports, pull requests, and feedback to make this library even better.

> !CAUTION
> Before reporting a bug or requesting a feature, make sure that you have read through our [documentation](https://bitrix24.github.io/b24ui/){rel="nofollow"} and existing [issues](https://github.com/bitrix24/b24ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3){rel="nofollow"}.

## Project structure

Here's an overview of the key directories and files in the Bitrix24 UI project structure:

### Documentation

The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` to generate pages from Markdown files. See the [Nuxt Content documentation](https://content.nuxt.com/docs/getting-started){rel="nofollow"} for details on how it works. Here's a breakdown of its structure:

```bash
├── app/
│   ├── assets/
│   ├── components/
│   │   └── content/
│   │       └── examples   # Components used in documentation as examples
│   ├── composables/
│   └── ...
├── content/
│   ├── 1.getting-started
│   ├── 2.composables
│   └── 3.components       # Components documentation
```

### Module

The module code resides in the `src` folder. Here's a breakdown of its structure:

```bash
├── plugins/
├── runtime/
│   ├── components/     # Where all the components are located
│   │   ├── Accordion.vue
│   │   ├── Alert.vue
│   │   └── ...
│   ├── composables/
│   ├── locale/
│   ├── plugins/
│   ├── types/
│   ├── utils/
│   └── vue/
│       ├── components/
│       └── plugins/
├── theme/              # This where the theme for each component is located
│   ├── accordion.ts    # Theme for Accordion component
│   ├── alert.ts
│   └── ...
└── module.ts
```

## Submit a Pull Request (PR)

Before you start, check if there's an existing issue describing the problem or feature request you're working on. If there is, please leave a comment on the issue to let us know you're working on it.

If there isn't, open a new issue to discuss the problem or feature.

### Local development

To begin local development, follow these steps:

::steps{level="4"}
#### Clone the `@bitrix24/b24ui-nuxt` repository to your local machine

```sh
git clone https://github.com/bitrix24/b24ui.git
```

#### Enable [Corepack](https://github.com/nodejs/corepack){rel="nofollow"}

```sh
corepack enable
```

#### Install dependencies

```sh
pnpm install
```

#### Generate type stubs

```sh
pnpm run dev:prepare
```

#### Start development

- To work on the **documentation** located in the `docs` folder, run:

```sh
pnpm run docs
```

- To test the Nuxt components using the **playground**, run:

```sh
pnpm run dev
```

- To test the Vue components using the **playground**, run:

```sh
pnpm run dev:vue
```
::

### IDE Setup

We recommend using VSCode alongside the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint){rel="nofollow"}. You can enable auto-fix and formatting when saving your code. Here's how:

```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  }
}
```

> !WARNING
> Since ESLint is already configured to format the code, there's no need for duplicating functionality with **Prettier**. If you have it installed in your editor, we recommend disabling it to avoid conflicts.

### Linting

You can use the `lint` command to check for linting errors:

```sh
pnpm run lint # check for linting errors
pnpm run lint:fix # fix linting errors
```

### Type checking

We use TypeScript for type checking. You can use the `typecheck` command to check for type errors:

```sh
pnpm run typecheck
```

### Testing

Before submitting a PR, ensure that you run the tests for both `nuxt` and `vue`:

```sh
pnpm run test # for Nuxt
pnpm run test:vue # for Vue
```

> !TIP
> If you have to update the snapshots, press `u` after the tests have finished running.

### Commit conventions

We use [Conventional Commits](https://www.conventionalcommits.org/){rel="nofollow"} for commit messages, which allows a changelog to be auto-generated based on the commits. Please read the [guide](https://www.conventionalcommits.org/en/v1.0.0/#summary){rel="nofollow"} through if you aren't familiar with it already.

- Use `fix` and `feat` for code changes that affect functionality or logic
- Use `docs` for documentation changes and `chore` for maintenance tasks

### Making a Pull Request

- Follow along the [instructions](https://github.com/bitrix24/b24ui/blob/main/.github/PULL_REQUEST_TEMPLATE.md?plain=1){rel="nofollow"} provided when creating a PR
- Ensure your PR's title adheres to the [Conventional Commits](https://www.conventionalcommits.org/){rel="nofollow"} since it will be used once the code is merged.
- Multiple commits are fine; no need to rebase or force push. We'll use `Squash and Merge` when merging.
- Ensure `lint`, `typecheck` and `tests` work before submitting the PR. Avoid making unrelated changes.

Thanks!

---

# Design System

> Bitrix24 UI's design system uses Tailwind CSS for simple theming and easy customization.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Tailwind CSS

Tailwind CSS uses a CSS-first configuration, letting you define your design tokens with the [`@theme`](https://tailwindcss.com/docs/functions-and-directives#theme-directive){rel="nofollow"} directive directly in your CSS. This makes your theme portable, maintainable and easy to customize.

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme {
  /* Your custom design tokens go here */
}
```

> [!NOTE](https://tailwindcss.com/docs/theme/)
> Check the Tailwind CSS documentation for all available theme variable customization options.

### Breakpoints

Use the `--breakpoint-*` theme variables to [customize your breakpoints](https://tailwindcss.com/docs/responsive-design#customizing-your-theme){rel="nofollow"}.

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme {
  --breakpoint-3xl: 1920px;
  --breakpoint-4xl: 2560px;
  --breakpoint-5xl: 3840px;
}
```

---

# CSS Variables

> Bitrix24 UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.

## Colors

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Text

Bitrix24 UI provides Tailwind CSS utility classes for text colors, allowing you to use class names like `text-legend` or `text-description`:

::code-preview
[Dimmed]{.text-dimmed.text-sm.px-4.inline-block.rounded-md class="py-1.5"}[Muted]{.text-muted.text-sm.px-4.inline-block.rounded-md class="py-1.5"}[Description]{.text-description.text-sm.px-4.inline-block.rounded-md class="py-1.5"}[Legend]{.text-legend.text-sm.px-4.inline-block.rounded-md class="py-1.5"}[Label]{.text-label.text-sm.px-4.inline-block.rounded-md class="py-1.5"}

#code
```vue
<template>
  <span class="text-dimmed">Dimmed</span>
  <span class="text-muted">Muted</span>
  <span class="text-description">Description</span>
  <span class="text-legend">Legend</span>
  <span class="text-label">Label</span>
</template>
```
::

## Background

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Border

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Radius

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Container

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Header

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Body

Bitrix24 UI applies default classes on the `<body>`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="html"} element of your app for consistent theming across light, edge-light, edge-dark and dark modes:

```css
body {
  scrollbar-gutter: stable;
  background: var(--air-theme-background);
  @apply antialiased font-(family-name:--ui-font-family-system) text-(--b24ui-typography-legend-color) scheme-light dark:scheme-dark edge-light:scheme-light edge-dark:scheme-light
}
```

---

# Customize components

> Learn how to customize Bitrix24 UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.

## Tailwind Variants

Bitrix24 UI components are styled using the [Tailwind Variants](https://www.tailwind-variants.org/){rel="nofollow"} API, which provides a powerful way to create variants and manage component styles.

### Slots

Components can have multiple `slots`, each representing a distinct HTML element or section within the component. These slots allow for flexible content insertion and styling.

Let's take the [Card](https://bitrix24.github.io/b24ui/raw/docs/components/card.md) component as an example which has multiple slots:

```ts \[src/theme/card.ts]
export default {
  slots: {
    root: 'bg-(--ui-color-design-filled-bg) border border-(--ui-color-design-filled-stroke) border-(length:--ui-design-filled-stroke-weight) text-(--ui-color-design-filled-content)',
    header: 'p-[24px] sm:px-[22px] sm:py-[15px]',
    body: 'p-[24px] sm:px-[22px] sm:py-[15px]',
    footer: 'p-[24px] sm:px-[22px] sm:py-[15px]'
  }
}
``````vue \[src/runtime/components/Card.vue]
<template>
  <div :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div :class="b24ui.header({ class: props.b24ui?.header })">
      <slot name="header" />
    </div>

    <div :class="b24ui.body({ class: props.b24ui?.body })">
      <slot />
    </div>

    <div :class="b24ui.footer({ class: props.b24ui?.footer })">
      <slot name="footer" />
    </div>
  </div>
</template>
```

Some components don't have slots, they are just composed of a single root element. In this case, the theme only defines the `base` slot like the [Container](https://bitrix24.github.io/b24ui/raw/docs/components/container.md) component for example:

```ts \[src/theme/container.ts]
export default {
  base: 'w-full max-w-[1280px] mx-auto px-[22px]'
}
``````vue \[src/runtime/components/Container.vue]
<template>
  <div :class="container({ class: props.class })">
    <slot />
  </div>
</template>
```

> !WARNING
> Components without slots don't have a [`b24ui` prop](https://bitrix24.github.io/b24ui/#ui-prop), only the [`class` prop](https://bitrix24.github.io/b24ui/#class-prop) is available to override styles.

### Variants

Components support `variants`, which allow you to dynamically adjust the styles of different `slots` based on component props.

For example, the [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) component uses a `size` variant to control its appearance:

```ts [src/theme/avatar.ts] {6-18}
export default {
  slots: {
    root: 'air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7)',
    image: 'h-full w-full rounded-[inherit] object-cover'
  },
  variants: {
    size: {
      sm: {
        root: 'size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)'
      },
      md: {
        root: 'size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)'
      },
      lg: {
        root: 'size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)'
      }
    }
  },
  defaultVariants: {
    size: 'md'
  }
}
```

This way, the `size` prop will apply the corresponding styles to the `root` slot:

::component-code
---
ignore:
  - src
props:
  src: https://github.com/bitrix24.png
  size: lg
slug: avatar
---
::

### Default Variants

The `defaultVariants` property sets the default value for each variant when no prop is passed.

For example, the [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) component has its default size set to `md`:

```ts [src/theme/avatar.ts] {19-21}
export default {
  slots: {
    root: 'air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7)',
    image: 'h-full w-full rounded-[inherit] object-cover'
  },
  variants: {
    size: {
      sm: {
        root: 'size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)'
      },
      md: {
        root: 'size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)'
      },
      lg: {
        root: 'size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)'
      }
    }
  },
  defaultVariants: {
    size: 'md'
  }
}
```

### Compound Variants

Some components use the `compoundVariants` property to apply classes when multiple variant conditions are met at the same time.

For example, the [Alert](https://bitrix24.github.io/b24ui/raw/docs/components/alert.md) component uses the `compoundVariants` property to apply classes for a specific `color` and `inverted` combination:

```ts [src/theme/button.ts] {27-31}
export default {
  slots: {
    root: [
      'relative overflow-hidden w-full flex',
      'text-(--b24ui-color)',
      'bg-(--b24ui-background)',
      'border-(--b24ui-border-color) border-(length:--b24ui-border-width)',
      'rounded-(--ui-border-radius-md)'
    ].join(' ')
  },
  variants: {
    color: {
      'air-primary': { root: 'style-filled' },
      'air-primary-success': { root: 'style-filled-success' }
    },
    inverted: {
      true: '',
      false: ''
    }
  },
  compoundVariants: [
    {
      inverted: true,
      color: 'air-primary',
      class: {
        root: 'style-filled-inverted'
      }
    },
    {
      inverted: true,
      color: 'air-primary-success',
      class: {
        root: 'style-filled-success-inverted'
      }
    }
  ],
  defaultVariants: {
    color: 'primary',
    variant: 'solid'
  }
}
```

## Customize theme

You have multiple ways to customize the appearance of Bitrix24 UI components, you can do it for all components at once or on a per-component basis.

> !NOTE
> Tailwind Variants uses [`tailwind-merge`](https://github.com/dcastil/tailwind-merge){rel="nofollow"} under the hood to merge classes so you don't have to worry about conflicting classes.

> !TIP
> You can explore the theme for each component in two ways:
>
> - Check the `Theme` section in the documentation of each individual component.
> - Browse the source code directly in the GitHub repository at [`src/theme`](https://github.com/bitrix24/b24ui/tree/main/src/theme){rel="nofollow"}.

### `b24ui` prop

You can override a component's **slots** using the `b24ui` prop. This takes priority over both global config and resolved `variants`.

::component-code
---
ignore:
  - b24ui.trailingIcon
  - color
  - variant
  - size
  - icon
prettier: true
props:
  useDropdown: true
  size: md
  color: air-primary
  b24ui:
    trailingIcon: rotate-90 size-10
slots:
  default: |
    
    Button
slug: button
---
::

> !NOTE
> In this example, the `trailingIcon` slot is overwritten with `size-10` even though the `md` size variant would apply a `size-(--ui-btn-icon-size)` class to it.

### `class` prop

The `class` prop allows you to override the classes of the `root` or `base` slot. This takes priority over both global config and resolved `variants`.

::component-code
---
props:
  class: font-bold rounded-full
slots:
  default: Button
slug: button
---
::

> !NOTE
> In this example, the `font-bold` class will override the default `font-medium` class on this button.

---

# Icons

> Bitrix24 UI integrates with @bitrix24/b24icons to access over 1,400+ icons.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/icons/vue.md)
> Looking for the **Vue** version?

## Usage

Bitrix24 UI automatically registers the `@bitrix24/b24icons` module for you, so there's no additional setup required.

### Icon component

They are very easy to use:

```vue [IconExample.vue]
<script setup>
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
</script>

<template>
  <Bitrix24Icon class="size-15" />
</template>
```

> !NOTE
> You can use any from the <https://bitrix24.github.io/b24icons/icons/>{rel="nofollow"} collection.

### Component props

Some components also have an `icon` prop to display an icon, like the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) for example:

::component-code
---
cast:
  icon: RocketIcon
ignore:
  - icon
props:
  icon: RocketIcon
slots:
  default: Button
slug: button
---
::

## Set of icons

The interface uses the following set of icons

::code-collapse
```ts [src/runtime/dictionary/icons.ts]
import ArrowToTheLeftIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheLeftIcon'
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'
import CheckIcon from '@bitrix24/b24icons-vue/outline/CheckLIcon'
import ChevronTopLIcon from '@bitrix24/b24icons-vue/outline/ChevronTopLIcon'
import ChevronToTheLeftIcon from '@bitrix24/b24icons-vue/outline/ChevronLeftLIcon'
import ChevronToTheRightIcon from '@bitrix24/b24icons-vue/outline/ChevronRightLIcon'
import DoubleShevronsRightIcon from '@bitrix24/b24icons-vue/actions/DoubleShevronsRightIcon'
import DoubleShevronsLeftIcon from '@bitrix24/b24icons-vue/actions/DoubleShevronsLeftIcon'
import CrossMIcon from '@bitrix24/b24icons-vue/outline/CrossMIcon'
import DotsIcon from '@bitrix24/b24icons-vue/button/DotsIcon'
import OpenIn50Icon from '@bitrix24/b24icons-vue/actions/OpenIn50Icon'
import Refresh6Icon from '@bitrix24/b24icons-vue/actions/Refresh6Icon'
import Minus30Icon from '@bitrix24/b24icons-vue/actions/Minus30Icon'
import Plus30Icon from '@bitrix24/b24icons-vue/actions/Plus30Icon'
import Search2Icon from '@bitrix24/b24icons-vue/main/Search2Icon'
import LoaderWaitIcon from '@bitrix24/b24icons-vue/animated/LoaderWaitIcon'
import ChevronDownLIcon from '@bitrix24/b24icons-vue/outline/ChevronDownLIcon'
import ScreenIcon from '@bitrix24/b24icons-vue/outline/ScreenIcon'
import SunIconAir from '@bitrix24/b24icons-vue/outline/SunIcon'
import MoonIconAir from '@bitrix24/b24icons-vue/outline/MoonIcon'
import TagIcon from '@bitrix24/b24icons-vue/outline/TagIcon'
import InfoCircleIcon from '@bitrix24/b24icons-vue/outline/InfoCircleIcon'
import IdeaLampIcon from '@bitrix24/b24icons-vue/outline/IdeaLampIcon'
import WarningIcon from '@bitrix24/b24icons-vue/main/WarningIcon'
import AlertIcon from '@bitrix24/b24icons-vue/outline/AlertIcon'
import CopyIcon from '@bitrix24/b24icons-vue/outline/CopyIcon'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'
import FileIcon from '@bitrix24/b24icons-vue/outline/FileIcon'
import UploadFileIcon from '@bitrix24/b24icons-vue/outline/UploadFileIcon'
import ArrowDownLIcon from '@bitrix24/b24icons-vue/outline/ArrowDownLIcon'
import ArrowTopLIcon from '@bitrix24/b24icons-vue/outline/ArrowTopLIcon'
import StopLIcon from '@bitrix24/b24icons-vue/outline/StopLIcon'
import RefreshIcon from '@bitrix24/b24icons-vue/outline/RefreshIcon'
import SendIcon from '@bitrix24/b24icons-vue/main/SendIcon'

export default {
  arrowLeft: ArrowToTheLeftIcon,
  arrowRight: ArrowToTheRightIcon,
  check: CheckIcon,
  chevronDoubleLeft: DoubleShevronsLeftIcon,
  chevronDoubleRight: DoubleShevronsRightIcon,
  chevronDown: ChevronDownLIcon,
  chevronLeft: ChevronToTheLeftIcon,
  chevronRight: ChevronToTheRightIcon,
  chevronUp: ChevronTopLIcon,
  close: CrossMIcon,
  ellipsis: DotsIcon,
  external: OpenIn50Icon,
  file: FileIcon,
  loading: LoaderWaitIcon,
  refresh: Refresh6Icon,
  minus: Minus30Icon,
  plus: Plus30Icon,
  search: Search2Icon,
  upload: UploadFileIcon,
  system: ScreenIcon,
  light: SunIconAir,
  dark: MoonIconAir,
  hash: TagIcon,
  warning: WarningIcon,
  tip: IdeaLampIcon,
  info: InfoCircleIcon,
  caution: AlertIcon,
  copyCheck: CircleCheckIcon,
  copy: CopyIcon,
  imSend: SendIcon,
  arrowDown: ArrowDownLIcon,
  arrowUp: ArrowTopLIcon,
  stop: StopLIcon,
  reload: RefreshIcon
}
```
::

---

# Icons

> Bitrix24 UI integrates with @bitrix24/b24icons to access over 1,400+ icons.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/icons/nuxt.md)
> Looking for the **Nuxt** version?

## Usage

### Icon component

They are very easy to use:

```vue [IconExample.vue]
<script setup>
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
</script>

<template>
  <Bitrix24Icon class="size-15" />
</template>
```

> !NOTE
> You can use any from the <https://bitrix24.github.io/b24icons/icons/>{rel="nofollow"} collection.

### Component props

Some components also have an `icon` prop to display an icon, like the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) for example:

::component-code
---
cast:
  icon: RocketIcon
ignore:
  - icon
props:
  icon: RocketIcon
slots:
  default: Button
slug: button
---
::

## Set of icons

The interface uses the following set of icons

::code-collapse
```ts [src/runtime/dictionary/icons.ts]
import ArrowToTheLeftIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheLeftIcon'
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'
import CheckIcon from '@bitrix24/b24icons-vue/outline/CheckLIcon'
import ChevronTopLIcon from '@bitrix24/b24icons-vue/outline/ChevronTopLIcon'
import ChevronToTheLeftIcon from '@bitrix24/b24icons-vue/outline/ChevronLeftLIcon'
import ChevronToTheRightIcon from '@bitrix24/b24icons-vue/outline/ChevronRightLIcon'
import DoubleShevronsRightIcon from '@bitrix24/b24icons-vue/actions/DoubleShevronsRightIcon'
import DoubleShevronsLeftIcon from '@bitrix24/b24icons-vue/actions/DoubleShevronsLeftIcon'
import CrossMIcon from '@bitrix24/b24icons-vue/outline/CrossMIcon'
import DotsIcon from '@bitrix24/b24icons-vue/button/DotsIcon'
import OpenIn50Icon from '@bitrix24/b24icons-vue/actions/OpenIn50Icon'
import Refresh6Icon from '@bitrix24/b24icons-vue/actions/Refresh6Icon'
import Minus30Icon from '@bitrix24/b24icons-vue/actions/Minus30Icon'
import Plus30Icon from '@bitrix24/b24icons-vue/actions/Plus30Icon'
import Search2Icon from '@bitrix24/b24icons-vue/main/Search2Icon'
import LoaderWaitIcon from '@bitrix24/b24icons-vue/animated/LoaderWaitIcon'
import ChevronDownLIcon from '@bitrix24/b24icons-vue/outline/ChevronDownLIcon'
import ScreenIcon from '@bitrix24/b24icons-vue/outline/ScreenIcon'
import SunIconAir from '@bitrix24/b24icons-vue/outline/SunIcon'
import MoonIconAir from '@bitrix24/b24icons-vue/outline/MoonIcon'
import TagIcon from '@bitrix24/b24icons-vue/outline/TagIcon'
import InfoCircleIcon from '@bitrix24/b24icons-vue/outline/InfoCircleIcon'
import IdeaLampIcon from '@bitrix24/b24icons-vue/outline/IdeaLampIcon'
import WarningIcon from '@bitrix24/b24icons-vue/main/WarningIcon'
import AlertIcon from '@bitrix24/b24icons-vue/outline/AlertIcon'
import CopyIcon from '@bitrix24/b24icons-vue/outline/CopyIcon'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'
import FileIcon from '@bitrix24/b24icons-vue/outline/FileIcon'
import UploadFileIcon from '@bitrix24/b24icons-vue/outline/UploadFileIcon'
import ArrowDownLIcon from '@bitrix24/b24icons-vue/outline/ArrowDownLIcon'
import ArrowTopLIcon from '@bitrix24/b24icons-vue/outline/ArrowTopLIcon'
import StopLIcon from '@bitrix24/b24icons-vue/outline/StopLIcon'
import RefreshIcon from '@bitrix24/b24icons-vue/outline/RefreshIcon'
import SendIcon from '@bitrix24/b24icons-vue/main/SendIcon'

export default {
  arrowLeft: ArrowToTheLeftIcon,
  arrowRight: ArrowToTheRightIcon,
  check: CheckIcon,
  chevronDoubleLeft: DoubleShevronsLeftIcon,
  chevronDoubleRight: DoubleShevronsRightIcon,
  chevronDown: ChevronDownLIcon,
  chevronLeft: ChevronToTheLeftIcon,
  chevronRight: ChevronToTheRightIcon,
  chevronUp: ChevronTopLIcon,
  close: CrossMIcon,
  ellipsis: DotsIcon,
  external: OpenIn50Icon,
  file: FileIcon,
  loading: LoaderWaitIcon,
  refresh: Refresh6Icon,
  minus: Minus30Icon,
  plus: Plus30Icon,
  search: Search2Icon,
  upload: UploadFileIcon,
  system: ScreenIcon,
  light: SunIconAir,
  dark: MoonIconAir,
  hash: TagIcon,
  warning: WarningIcon,
  tip: IdeaLampIcon,
  info: InfoCircleIcon,
  caution: AlertIcon,
  copyCheck: CircleCheckIcon,
  copy: CopyIcon,
  imSend: SendIcon,
  arrowDown: ArrowDownLIcon,
  arrowUp: ArrowTopLIcon,
  stop: StopLIcon,
  reload: RefreshIcon
}
```
::

---

# Color Mode

> Bitrix24 UI integrates with VueUse to allow for easy switching between light and dark themes.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/color-mode/vue.md)
> Looking for the **Vue** version?

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage

Bitrix24 UI automatically registers the [useDark](https://vueuse.org/core/useDark){rel="nofollow"} composable as a Vue plugin, so there's no additional setup required.

### Components

You can use the built-in [ColorModeAvatar](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-avatar.md) or [ColorModeImage](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-image.md) components to display different images for light and dark mode and the [ColorModeButton](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-button.md), [ColorModeSwitch](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-switch.md) or [ColorModeSelect](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-select.md) components to switch between light and dark modes.

You can also use the [useColorMode](https://vueuse.org/core/useColorMode/){rel="nofollow"} composable to build your own custom component:

```vue [ColorModeButton.vue]
<script setup lang="ts">
import { useColorMode } from '#imports'
import SunIconAir from '@bitrix24/b24icons-vue/outline/SunIcon'
import MoonIconAir from '@bitrix24/b24icons-vue/outline/MoonIcon'

const colorMode = useColorMode()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set(_isDark: boolean) {
    colorMode.preference = _isDark ? 'dark' : 'light'
  }
})
</script>

<template>
  <B24Button
    :icon="isDark ? MoonIconAir : SunIconAir"
    :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
    @click="isDark = !isDark"
  />
</template>
```

### Configuration

You can disable this plugin with the `b24ui.colorMode` option in your `nuxt.config.ts`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css'],
  b24ui: {
    colorMode: false
  }
})
```

---

# Color Mode

> Bitrix24 UI integrates with VueUse to allow for easy switching between light and dark themes.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/color-mode/nuxt.md)
> Looking for the **Nuxt** version?

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage

Bitrix24 UI automatically registers the [useDark](https://vueuse.org/core/useDark){rel="nofollow"} composable as a Vue plugin, so there's no additional setup required.

### Components

You can use the built-in [ColorModeAvatar](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-avatar.md) or [ColorModeImage](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-image.md) components to display different images for light and dark mode and the [ColorModeButton](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-button.md), [ColorModeSwitch](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-switch.md) or [ColorModeSelect](https://bitrix24.github.io/b24ui/raw/docs/components/color-mode-select.md) components to switch between light and dark modes.

You can also use the [useColorMode](https://vueuse.org/core/useColorMode/){rel="nofollow"} composable to build your own custom component:

```vue [ColorModeButton.vue]
<script setup lang="ts">
import { useColorMode } from '#imports'
import SunIconAir from '@bitrix24/b24icons-vue/outline/SunIcon'
import MoonIconAir from '@bitrix24/b24icons-vue/outline/MoonIcon'

const colorMode = useColorMode()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set(_isDark: boolean) {
    colorMode.preference = _isDark ? 'dark' : 'light'
  }
})
</script>

<template>
  <B24Button
    :icon="isDark ? MoonIconAir : SunIconAir"
    :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
    @click="isDark = !isDark"
  />
</template>
```

### Configuration

You can disable this plugin with the `colorMode` option in your `vite.config.ts`:

```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      colorMode: false
    })
  ]
})
```

---

# Internationalization (i18n)

> Bitrix24 UI supports 19 locales and multi-directional (LTR/RTL) internationalization.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/i18n/vue.md)
> Looking for the **Vue** version?

## Usage

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/components/app.md)
> Bitrix24 UI provides an **App** component that wraps your app to provide global configurations.

### Locale

Use the `locale` prop with the locale you want to use from `@bitrix24/b24ui-nuxt/locale`:

```vue [app.vue]
<script setup lang="ts">
import { fr } from '@bitrix24/b24ui-nuxt/locale'
</script>

<template>
  <B24App :locale="fr">
    <NuxtPage />
  </B24App>
</template>
```

### Extend locale

You can customize an existing locale by overriding its `messages` using the `extendLocale` composable:

```vue [app.vue]
<script setup lang="ts">
import { en } from '@bitrix24/b24ui-nuxt/locale'

const locale = extendLocale(en, {
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
})
</script>

<template>
  <B24App :locale="locale">
    <NuxtPage />
  </B24App>
</template>
```

### Dynamic locale

To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/){rel="nofollow"} module.

::steps{level="4"}
#### Install the Nuxt I18n package

```bash \[pnpm]
pnpm add @nuxtjs/i18n
``````bash \[yarn]
yarn add @nuxtjs/i18n
``````bash \[npm]
npm install @nuxtjs/i18n
``````bash \[bun]
bun add @nuxtjs/i18n
```

#### Add the Nuxt I18n module in your `nuxt.config.ts`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: [
    '@bitrix24/b24ui-nuxt',
    '@nuxtjs/i18n'
  ],
  css: ['~/assets/css/main.css'],
  i18n: {
    locales: [
      {
        code: 'de',
        name: 'Deutsch'
      },
      {
        code: 'en',
        name: 'English'
      },
      {
        code: 'fr',
        name: 'Français'
      }
    ]
  }
})
```

#### Set the `locale` prop using `useI18n`

```vue [app.vue]
<script setup lang="ts">
import * as locales from '@bitrix24/b24ui-nuxt/locale'

const { locale } = useI18n()
</script>

<template>
  <B24App :locale="locales[locale]">
    <NuxtPage />
  </B24App>
</template>
```
::

### Dynamic direction

Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components.

In a multilingual application, you might want to set the `lang` and `dir` attributes on the `<html>` element dynamically based on the user's locale, which you can do with the [useHead](https://nuxt.com/docs/api/composables/use-head){rel="nofollow"} composable:

```vue [app.vue]
<script setup lang="ts">
import * as locales from '@bitrix24/b24ui-nuxt/locale'

const { locale } = useI18n()

const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)

useHead({
  htmlAttrs: {
    lang,
    dir
  }
})
</script>

<template>
  <B24App :locale="locales[locale]">
    <NuxtPage />
  </B24App>
</template>
```

## Supported languages

::supported-languages
::

---

# Internationalization (i18n)

> Bitrix24 UI supports 19 locales and multi-directional (LTR/RTL) internationalization.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/i18n/nuxt.md)
> Looking for the **Nuxt** version?

## Usage

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/components/app.md)
> Bitrix24 UI provides an **App** component that wraps your app to provide global configurations.

### Locale

Use the `locale` prop with the locale you want to use from `@bitrix24/b24ui-nuxt/locale`:

```vue [App.vue]
<script setup lang="ts">
import { fr } from '@bitrix24/b24ui-nuxt/locale'
</script>

<template>
  <B24App :locale="fr">
    <RouterView />
  </B24App>
</template>
```

### Extend locale

You can customize an existing locale by overriding its `messages` using the `extendLocale` composable:

```vue [App.vue]
<script setup lang="ts">
import { en } from '@bitrix24/b24ui-nuxt/locale'
import { extendLocale } from '@bitrix24/b24ui-nuxt/composables/defineLocale.js'

const locale = extendLocale(en, {
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
})
</script>

<template>
  <B24App :locale="locale">
    <RouterView />
  </B24App>
</template>
```

### Dynamic locale

To dynamically switch between languages, you can use the [Vue I18n](https://vue-i18n.intlify.dev/){rel="nofollow"} plugin.

::steps{level="4"}
#### Install the Vue I18n package

```bash \[pnpm]
pnpm add vue-i18n@11
``````bash \[yarn]
yarn add vue-i18n@11
``````bash \[npm]
npm install vue-i18n@11
``````bash \[bun]
bun add vue-i18n@11
```

#### Use the Vue I18n plugin in your `main.ts`

```ts [main.ts] {3,14-26,29}
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from 'vue-i18n'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  availableLocales: ['en', 'de'],
  messages: {
    en: {
      // ...
    },
    de: {
      // ...
    }
  }
})

app.use(router)
app.use(i18n)
app.use(b24UiPlugin)

app.mount('#app')
```

#### Set the `locale` prop using `useI18n`

```vue [App.vue]
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@bitrix24/b24ui-nuxt/locale'

const { locale } = useI18n()
</script>

<template>
  <B24App :locale="locales[locale]">
    <RouterView />
  </B24App>
</template>
```
::

### Dynamic direction

Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components.

In a multilingual application, you might want to set the `lang` and `dir` attributes on the `<html>` element dynamically based on the user's locale, which you can do with the [useHead](https://unhead.unjs.io/usage/composables/use-head){rel="nofollow"} composable:

```vue [App.vue]
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
import * as locales from '@bitrix24/b24ui-nuxt/locale'

const { locale } = useI18n()

const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)

useHead({
  htmlAttrs: {
    lang,
    dir
  }
})
</script>

<template>
  <B24App :locale="locales[locale]">
    <RouterView />
  </B24App>
</template>
```

## Supported languages

::supported-languages
::

---

# Content

> Bitrix24 UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.

## Installation

To get started, you can follow the official [guide](https://content.nuxt.com/docs/getting-started/installation){rel="nofollow"} or in summary:

```bash \[pnpm]
pnpm add @nuxt/content
``````bash \[yarn]
yarn add @nuxt/content
``````bash \[npm]
npm install @nuxt/content
``````bash \[bun]
bun add @nuxt/content
```

Then, add the `@nuxt/content` module in your `nuxt.config.ts`:

```ts [nuxt.config.ts] {4}
export default defineNuxtConfig({
  modules: [
    '@bitrix24/b24ui-nuxt',
    '@nuxt/content'
  ],
  css: ['~/assets/css/main.css']
})
```

> !CAUTION
> You need to register `@nuxt/content` after `@bitrix24/b24ui-nuxt` in the `modules` array, otherwise the prose components will not be available.

## Configuration

When using Tailwind CSS classes in your markdown content files, you need to ensure Tailwind can detect and generate the necessary utility classes. By default, Tailwind's automatic content detection might not pick up classes written in markdown files.

To fix this, use the [`@source` directive](https://tailwindcss.com/docs/functions-and-directives#source-directive){rel="nofollow"} in your CSS file to explicitly include your content directory:

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@source "../../../content/**/*";
```

This ensures that:

- Tailwind scans all markdown files in your content directory
- Any utility classes used in your markdown are included in the final CSS
- Dynamic classes in MDC components or custom Vue components within your content work properly

> !TIP
> You can also use glob patterns to be more specific about which files to scan:
>
> - `@source "../../../content/docs/**/*.md"` - Only scan markdown in the docs folder
> - `@source "../../../content/**/*.{md,yml}"` - Include both markdown and YAML files

> [!NOTE](https://tailwindcss.com/docs/detecting-classes-in-source-files)
> Learn more about Tailwind's automatic content detection and best practices for optimizing build performance.

## Components

You might be using `@nuxt/content` to build a documentation. To help you with that, we've built some components that you can use in your pages:

- a built-in full-text search command palette with [ContentSearch](https://bitrix24.github.io/b24ui/raw/docs/components/content-search.md), replacing the need for Algolia DocSearch
- a sticky Table of Contents with the [ContentToc](https://bitrix24.github.io/b24ui/raw/docs/components/content-toc.md) component
- a prev / next navigation with the [ContentSurround](https://bitrix24.github.io/b24ui/raw/docs/components/content-surround.md) component

## Typography

Bitrix24 UI provides its own custom implementations of all prose components for seamless integration with `@nuxt/content`. This approach ensures consistent styling, complete control over typography, and perfect alignment with the Bitrix24 UI design system so your content always looks and feels cohesive out of the box.

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/typography.md)
> Discover the full **Typography** system and explore all available prose components for rich, consistent content presentation.

## Utils

### `mapContentNavigation`

This util will map the navigation from `queryCollectionNavigation` and transform it recursively into an array of objects that can be used by various components.

`mapContentNavigation(navigation, options?)`

- `navigation`: The navigation tree (array of ContentNavigationItem).
- `options` (optional):

  - `labelAttribute`: (string) Which field to use as label (`title` by default)
  - `deep`: (number or undefined) Controls how many levels of navigation are included (`undefined` by default : includes all levels)

**Example:** As shown in the breadcrumb example below, it's commonly used to transform the navigation data into the correct format.

```vue [app.vue]
<script setup lang="ts">
import { mapContentNavigation } from '@bitrix24/b24ui-nuxt/utils/content'
import { findPageBreadcrumb } from '@nuxt/content/utils'

const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))

const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link), { deep: 0 })
</script>

<template>
  <B24Page>
    <B24PageHeader v-bind="page">
      <template #headline>
        <B24Breadcrumb :items="breadcrumb" />
      </template>
    </B24PageHeader>
  </B24Page>
</template>
```

---

# MCP Server

> Use Bitrix24 UI components in your AI assistants with Model Context Protocol support.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

---

# LLMs.txt

> How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Bitrix24 UI components, theming, and best practices.

## What is LLMs.txt?

LLMs.txt is a structured documentation format specifically designed for large language models (LLMs). Bitrix24 UI provides LLMs.txt files that contain comprehensive information about our component library, making it easy for AI tools to understand and assist with Bitrix24 UI development.

These files are optimized for AI consumption and contain structured information about components, APIs, usage patterns, and best practices.

## Available Routes

We provide LLMs.txt routes to help AI tools access our documentation:

- **`/llms.txt`** - Contains a structured overview of all components and their documentation links (\~5K tokens)
- **`/llms-full.txt`** - Provides comprehensive documentation including implementation details, examples, theming, composables, and migration guidance (\~1M+ tokens)

## Choosing the Right File

> !NOTE
> strong,\[object Object],Most users should start with ,code,\[object Object],/llms.txt - it contains all essential information and works with standard LLM context windows.
>
> Use `/llms-full.txt` only if you need comprehensive implementation examples and your AI tool supports large contexts (200K+ tokens).

## Important Usage Notes

> !WARNING
> strong,\[object Object],@-symbol must be typed manually - When using tools like Cursor or Windsurf, the `@` symbol must be typed by hand in the chat interface. Copy-pasting breaks the tool's ability to recognize it as a context reference.

## Usage with AI Tools

### Cursor

Bitrix24 UI provides specialized LLMs.txt files that you can reference in Cursor for better AI assistance with component development.

#### How to use:

1. **Direct reference**: Mention the LLMs.txt URLs when asking questions
2. Add these specific URLs to your project context using `@docs`

[Read more about Cursor Web and Docs Search](https://docs.cursor.com/en/context/@-symbols/@-docs){rel="nofollow"}

### Windsurf

Windsurf can directly access the Bitrix24 UI LLMs.txt files to understand component usage and best practices.

#### Using LLMs.txt with Windsurf:

- Use `@docs` to reference specific LLMs.txt URLs
- Create persistent rules referencing these URLs in your workspace

[Read more about Windsurf Web and Docs Search](https://docs.windsurf.com/windsurf/cascade/web-search){rel="nofollow"}

### Other AI Tools

Any AI tool that supports LLMs.txt can use these routes to better understand Bitrix24 UI.

#### Examples for ChatGPT, Claude, or other LLMs:

- "Using Bitrix24 UI documentation from <https://bitrix24.github.io/b24ui/llms.txt>{rel="nofollow"}"
- "Follow complete Bitrix24 UI guidelines from <https://bitrix24.github.io/b24ui/llms-full.txt>{rel="nofollow"}"

---

# Accordion

> This is a stacked set of collapsible panels

## Usage

Use the Accordion component to display a list of collapsible items.

```vue

<script setup lang="ts">
const items = ref([
  {
    label: 'Getting started with Bitrix24',
    content: 'Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion :items="items" />
</template>

```

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `trailingIcon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `content?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `value?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: 'Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion :items="items" />
</template>

```

### Multiple

Set the `type` prop to `multiple` to allow multiple items to be active at the same time. Defaults to `single`.

```vue

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: 'Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion type="multiple" :items="items" />
</template>

```

### Collapsible

When `type` is `single`, you can set the `collapsible` prop to `false` to prevent the active item from collapsing.

```vue

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: 'Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion :collapsible="false" :items="items" />
</template>

```

### Unmount

Use the `unmount-on-hide` prop to prevent the content from being unmounted when the accordion is collapsed. Defaults to `true`.

```vue

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: 'Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion :unmount-on-hide="false" :items="items" />
</template>

```

> !NOTE
> You can inspect the DOM to see each item's content being rendered.

### Disabled

Use the `disabled` property to disable the Accordion.

You can also disable a specific item by using the `disabled` property in the item object.

```vue

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: 'Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion disabled :items="items" />
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} of each item.

> !TIP
> You can also set an icon for a specific item by using the `trailingIcon` property in the item object.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Icons',
    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
  },
  {
    label: 'Colors',
    content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
  },
  {
    label: 'Components',
    content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
  }
])
</script>

<template>
  <B24Accordion :trailing-icon="RocketIcon" :items="items" />
</template>

```

## Examples

### Control active item(s)

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index **as a string**.

```vue [AccordionModelValueExample.vue]
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items: AccordionItem[] = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon,
    content: 'Bitrix24 is an online service that offers useful tools for your company.'
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon,
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon,
    content: 'Bitrix24 is an online service for business management and work automation.'
  }
]

const active = ref('0')

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = String((Number(active.value) + 1) % items.length)
  }, 2000)
})
</script>

<template>
  <B24Accordion v-model="active" :items="items" />
</template>
```

> !CAUTION
> When `type="multiple"`, ensure to pass an array to the `default-value` prop or the `v-model` directive.

### With drag and drop

Use the [`useSortable`](https://vueuse.org/integrations/useSortable/){rel="nofollow"} composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html){rel="nofollow"} to enable drag and drop functionality on the Accordion. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/){rel="nofollow"} to provide a seamless drag and drop experience.

```vue [AccordionDragAndDropExample.vue]
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import { useSortable } from '@vueuse/integrations/useSortable'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items = shallowRef<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon,
    content: 'Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon,
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon,
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])

const accordion = useTemplateRef<HTMLElement>('accordion')

useSortable(accordion, items, {
  animation: 150
})
</script>

<template>
  <B24Accordion ref="accordion" :items="items" />
</template>
```

### With body slot

Use the `#body` slot to customize the body of each item.

```vue [AccordionBodySlotExample.vue]
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items: AccordionItem[] = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon
  }
]
</script>

<template>
  <B24Accordion :items="items">
    <template #body="{ item }">
      This is the <b>{{ item.label }}</b> panel.
    </template>
  </B24Accordion>
</template>
```

> !TIP
> The `#body` slot includes some pre-defined styles, use the [`#content` slot](https://bitrix24.github.io/b24ui/#with-content-slot) if you want to start from scratch.

### With content slot

Use the `#content` slot to customize the content of each item.

```vue [AccordionContentSlotExample.vue]
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items: AccordionItem[] = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon
  }
]
</script>

<template>
  <B24Accordion :items="items">
    <template #content="{ item }">
      <p class="pb-3.5 text-(length:--ui-font-size-sm) text-(--b24ui-typography-description-color)">
        This is the <b>{{ item.label }}</b> panel.
      </p>
    </template>
  </B24Accordion>
</template>
```

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-body`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [AccordionCustomSlotExample.vue]
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon,
    content: 'Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon,
    slot: 'features' as const,
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon,
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
] satisfies AccordionItem[]
</script>

<template>
  <B24Accordion :items="items">
    <template #features="{ item }">
      <p class="text-(length:--ui-font-size-sm) pb-3.5 text-(--ui-color-accent-main-primary)">
        {{ item.content }}
      </p>
    </template>
  </B24Accordion>
</template>
```

### With markdown content

You can use the [MDC](https://github.com/nuxt-modules/mdc?tab=readme-ov-file#mdc){rel="nofollow"} component from `@nuxtjs/mdc` to render markdown in the accordion items.

```vue [AccordionMarkdownExample.vue]
<script setup lang="ts">
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon,
    content: 'Bitrix24 is an **online service** that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.'
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon,
    content: '[Bitrix24](https://www.bitrix24.com/) is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon,
    content: 'Bitrix24 is an `online service` for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
]
</script>

<template>
  <B24Accordion
    type="multiple"
    :items="items"
    :unmount-on-hide="false"
    :default-value="['3']"
    :ui="{
      trigger: 'text-base',
      body: 'text-base text-(--b24ui-typography-description-color)'
    }"
  >
    <template #body="{ item }">
      <MDC :value="item.content" unwrap="p" />
    </template>
  </B24Accordion>
</template>
```

## API

### Props

```ts
/**
 * Props for the Accordion component
 */
interface AccordionProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  items?: AccordionItem[] | undefined;
  /**
   * The icon displayed on the right side of the trigger.
   */
  trailingIcon?: IconComponent | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: string | undefined;
  b24ui?: { root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; } | undefined;
  /**
   * When type is "single", allows closing content when clicking trigger for an open item.
   * When type is "multiple", this prop has no effect.
   * @default "true"
   */
  collapsible?: boolean | undefined;
  /**
   * The default active value of the item(s).
   * 
   * Use when you do not need to control the state of the item(s).
   */
  defaultValue?: string | string[] | undefined;
  /**
   * The controlled value of the active item(s).
   * 
   * Use this when you need to control the state of the items. Can be binded with `v-model`
   */
  modelValue?: string | string[] | undefined;
  /**
   * Determines whether a "single" or "multiple" items can be selected at a time.
   * 
   * This prop will overwrite the inferred type from `modelValue` and `defaultValue`.
   * @default "\"single\""
   */
  type?: SingleOrMultipleType | undefined;
  /**
   * When `true`, prevents the user from interacting with the accordion and all its items
   */
  disabled?: boolean | undefined;
  /**
   * When `true`, the element will be unmounted on closed state.
   * @default "true"
   */
  unmountOnHide?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Accordion component
 */
interface AccordionSlots {
  leading(): any;
  default(): any;
  trailing(): any;
  content(): any;
  body(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Accordion component
 */
interface AccordionEmits {
  update:modelValue: (payload: [value: string | string[] | undefined]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    accordion: {
      slots: {
        root: 'w-full',
        item: 'text-(--b24ui-typography-label-color) border-b border-(--ui-color-divider-vibrant-accent-more) last:border-b-0',
        header: 'flex',
        trigger: 'min-w-0 group flex-1 flex items-center gap-1.5 py-[12px] font-(--ui-font-weight-medium) text-(length:--ui-font-size-sm) leading-[20px] focus-visible:outline-(--ui-color-accent-soft-element-blue) cursor-pointer',
        content: 'motion-safe:data-[state=open]:animate-[accordion-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
        body: 'text-(length:--ui-font-size-sm) pb-[12px]',
        leadingIcon: 'shrink-0 size-[20px]',
        trailingIcon: 'shrink-0 size-[20px] ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
        label: 'text-start break-words'
      },
      variants: {
        disabled: {
          true: {
            trigger: 'cursor-not-allowed opacity-75'
          }
        }
      }
    }
  }
})
```

---

# Advice

> A couple of lines of text and an avatar

## Usage

### Description

Use the `description` prop to set the description of the Advice.

```vue

<template>
  <B24Advice description="Let's signal the manager that the deal is not moving, the manager does not call the client back and does not respond to his messages. Let's assign a task to the manager on behalf of the manager" />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Advice :icon="RocketIcon" description="Let's signal the manager that the deal is not moving, the manager does not call the client back and does not respond to his messages. Let's assign a task to the manager on behalf of the manager" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md).

```vue

<template>
  <B24Advice :avatar="{src:'/b24ui/avatar/employee.png'}" description="Let's signal the manager that the deal is not moving, the manager does not call the client back and does not respond to his messages. Let's assign a task to the manager on behalf of the manager" />
</template>

```

### Angle

Use the `angle` prop to change the color the position of the corner.

```vue

<template>
  <B24Advice angle="top" :avatar="{src:'/b24ui/avatar/employee.png'}" description="Let's signal the manager that the deal is not moving, the manager does not call the client back and does not respond to his messages. Let's assign a task to the manager on behalf of the manager" />
</template>

```

### With custom slot

Use the slot property to customize a description.

```vue [AdviceExample.vue]
<script setup lang="ts">
import DotsIcon from '@bitrix24/b24icons-vue/button/DotsIcon'
</script>

<template>
  <div class="mb-4 flex flex-wrap items-center justify-start gap-4">
    <B24Advice :avatar="{ src: '/b24ui/avatar/assistant.png' }">
      <span>Typically, instructions on how to add a SAML application and add the ACS URL and SP Entity ID can be found in the Microsoft Azure technical documentation. </span>
      <B24Link to="https://github.com/bitrix24/b24ui/" target="_blank" is-action>
        Read more
      </B24Link>
    </B24Advice>
    <B24Advice angle="top" :avatar="{ src: '/b24ui/avatar/employee.png' }">
      <div class="flex flex-col items-start justify-between gap-1.5">
        <div class="font-(--ui-font-weight-bold)">
          Reference information
        </div>
        <div>Typically, instructions on how to add a SAML application and add the ACS URL and SP Entity ID can be found in the Microsoft Azure technical documentation.</div>
        <div class="mt-2 flex flex-row flex-wrap items-start justify-between gap-2">
          <B24Button size="xs" color="air-primary" label="Some Action 1" />
          <B24Button size="xs" color="air-secondary-accent-2" label="Some Action 2" />
          <B24Button size="xs" color="air-tertiary" :icon="DotsIcon" />
        </div>
      </div>
    </B24Advice>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the Advice component
 */
interface AdviceProps {
  /**
   * The element or component this component should render as.
   * @default "\"div\""
   */
  as?: any;
  description?: string | undefined;
  /**
   * @default "\"bottom\""
   */
  angle?: "bottom" | "top" | undefined;
  b24ui?: { root?: ClassNameValue; descriptionWrapper?: ClassNameValue; descriptionBorder?: ClassNameValue; descriptionBg?: ClassNameValue; descriptionAngle?: ClassNameValue; description?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarIcon?: ClassNameValue; leadingAvatarSize?: ClassNameValue; } | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Advice component
 */
interface AdviceSlots {
  leading(): any;
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    advice: {
      slots: {
        root: 'light style-outline-accent-1 flex items-end',
        descriptionWrapper: 'relative',
        descriptionBorder: 'fill-(--b24ui-border-color)',
        descriptionBg: 'fill-(--b24ui-background) dark:fill-(--ui-color-base-6)',
        descriptionAngle: 'absolute w-[14px] h-[12px]',
        description: 'grow w-11/12 py-3 px-md2 ms-2 rounded-[23px] font-[family-name:var(--ui-font-family-secondary)] text-(length:--ui-font-size-md)/(--ui-font-line-height-md) font-(--ui-font-weight-normal) border-1 border-(--b24ui-border-color) bg-(--b24ui-background) text-(--b24ui-color) dark:bg-(--ui-color-base-6)',
        leading: 'me-1.5 ms-2 font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary)',
        leadingIcon: 'shrink-0 size-[42px]',
        leadingAvatar: 'shrink-0',
        leadingAvatarIcon: 'text-(--b24ui-typography-label-color) bg-(--ui-color-base-8)',
        leadingAvatarSize: 'lg'
      },
      variants: {
        angle: {
          top: {
            root: 'items-start',
            leading: 'mt-0.5',
            descriptionAngle: 'start-[0.8px] top-[9px] scale-x-100 -scale-y-100 rtl:-scale-x-100'
          },
          bottom: {
            root: 'items-end',
            descriptionAngle: 'start-[0.8px] bottom-[9px] rtl:-scale-x-100'
          }
        }
      },
      defaultVariants: {
        angle: 'bottom'
      }
    }
  }
})
```

---

# Alert

> An alert designed to capture the user's attention.

## Usage

### Title

Use the `title` prop to set the title of the Alert.

```vue

<template>
  <B24Alert title="Heads up!" />
</template>

```

### Description

Use the `description` prop to set the description of the Alert.

```vue

<template>
  <B24Alert title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Alert :icon="RocketIcon" title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md).

```vue

<template>
  <B24Alert :avatar="{src:'/b24ui/avatar/employee.png',size:'xs'}" title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." />
</template>

```

### Color

Use the `color` prop to change the color of the Alert.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Alert color="air-primary" title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." :icon="RocketIcon" close />
</template>

```

### Inverted

Use the `inverted` prop to invert the color of the Alert.

> !WARNING
> Only available for `air-primary*` colors

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Alert inverted color="air-primary" title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." :icon="RocketIcon" close />
</template>

```

### Size

Use the `size` prop to change the size of the Alert.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Alert size="md" title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." :icon="RocketIcon" />
</template>

```

### Close

Use the `close` prop to display a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) to dismiss the Alert.

> !TIP
> An `update:open` event will be emitted when the close button is clicked.

```vue

<template>
  <B24Alert close title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." />
</template>

```

You can pass any property from the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component to customize it.

```vue

<template>
  <B24Alert title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." :close="{color:'air-secondary-accent-2',class:'rounded-full'}" />
</template>

```

### Actions

Use the `actions` prop to add some [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) actions to the Alert.

```vue

<template>
  <B24Alert title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." :actions="{'0':{label:'Action 1'},'1':{label:'Action 2',color:'air-primary'}}" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the Alert.

```vue

<template>
  <B24Alert title="Heads up!" description="We will immediately notify the manager that the deal is not progressing." orientation="horizontal" :actions="{'0':{label:'Action 1'},'1':{label:'Action 2',color:'air-primary'}}" />
</template>

```

## API

### Props

```ts
/**
 * Props for the Alert component
 */
interface AlertProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  title?: string | undefined;
  description?: string | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  avatar?: AvatarProps | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary";
  /**
   * If set to `true` the color is inverted.
   * Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
   * @default "false"
   */
  inverted?: boolean | undefined;
  /**
   * The orientation between the content and the actions.
   * @default "\"vertical\""
   */
  orientation?: "vertical" | "horizontal" | undefined;
  size?: "md" | "sm" | undefined;
  /**
   * Display a list of actions:
   * - under the title and description when orientation is `vertical`
   * - next to the close button when orientation is `horizontal`
   * `{ size: 'sm' }`{lang="ts"}
   */
  actions?: ButtonProps[] | undefined;
  /**
   * Display a close button to dismiss the alert.
   * `{ size: 'md', color: 'air-tertiary-no-accent' }`{lang="ts"}
   */
  close?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the close button.
   */
  closeIcon?: IconComponent | undefined;
  b24ui?: { root?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; actions?: ClassNameValue; close?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Alert component
 */
interface AlertSlots {
  leading(): any;
  title(): any;
  description(): any;
  actions(): any;
  close(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Alert component
 */
interface AlertEmits {
  update:open: (payload: [value: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    alert: {
      slots: {
        root: 'relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md)',
        wrapper: 'min-w-0 flex-1 flex flex-col font-[family-name:var(--ui-font-family-primary)]',
        title: 'font-(--ui-font-weight-bold)',
        description: '',
        icon: 'shrink-0 size-6',
        avatar: 'shrink-0',
        avatarSize: '',
        actions: 'flex flex-wrap gap-1.5 shrink-0',
        close: 'p-0 [--ui-btn-color:var(--b24ui-color)] hover:bg-(--ui-color-base-white-fixed)/10 focus-visible:bg-(--ui-color-base-white-fixed)/10 -me-1.5 lg:me-0'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          'air-secondary': {
            root: 'style-tinted'
          },
          'air-secondary-alert': {
            root: 'style-tinted-alert'
          },
          'air-secondary-accent': {
            root: 'style-outline'
          },
          'air-secondary-accent-1': {
            root: 'style-outline-accent-1'
          },
          'air-secondary-accent-2': {
            root: 'style-outline-accent-2'
          },
          'air-tertiary': {
            root: 'style-outline-no-accent'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        size: {
          sm: {
            root: 'py-xs ps-sm pe-xs gap-2',
            title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
            description: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
            avatarSize: 'md'
          },
          md: {
            root: 'py-md ps-md pe-xs gap-2.5',
            title: 'text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)',
            description: 'text-(length:--ui-font-size-md)/(--ui-font-line-height-3xs)',
            avatarSize: 'xl'
          }
        },
        orientation: {
          horizontal: {
            root: 'items-center',
            actions: 'items-center'
          },
          vertical: {
            root: 'items-start',
            actions: 'items-start mt-2'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        },
        inverted: {
          true: '',
          false: ''
        }
      },
      compoundVariants: [
        {
          inverted: true,
          color: 'air-primary',
          class: {
            root: 'style-filled-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-success',
          class: {
            root: 'style-filled-success-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-alert',
          class: {
            root: 'style-filled-alert-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-copilot',
          class: {
            root: 'style-filled-copilot-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-warning',
          class: {
            root: 'style-filled-warning-inverted'
          }
        }
      ],
      defaultVariants: {
        color: 'air-secondary-accent',
        size: 'md',
        inverted: false
      }
    }
  }
})
```

---

# App

> Encases your app to deliver global settings and additional features.

## Usage

This component implements Reka UI [ConfigProvider](https://reka-ui.com/docs/utilities/config-provider){rel="nofollow"} to provide global configuration to all components:

- Enables all primitives to inherit global reading direction.
- Enables changing the behavior of scroll body when setting body lock.
- Much more controls to prevent layout shifts.

It's also using [ToastProvider](https://reka-ui.com/docs/components/toast#provider){rel="nofollow"} and [TooltipProvider](https://reka-ui.com/docs/components/tooltip#provider){rel="nofollow"} to provide global toasts and tooltips.

Use it as at the root of your app:

```vue [app.vue]
<template>
  <B24App>
    <NuxtPage />
  </B24App>
</template>
```

::framework-only
#nuxt
> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/i18n/nuxt.md#locale)
> Learn how to use the `locale` prop to change the locale of your app.

#vue
> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/i18n/vue.md#locale)
> Learn how to use the `locale` prop to change the locale of your app.
::

## API

### Props

```ts
/**
 * Props for the App component
 */
interface AppProps {
  tooltip?: TooltipProviderProps | undefined;
  toaster?: ToasterProps | null | undefined;
  locale?: Locale<Messages> | undefined;
  /**
   * @default "\"body\""
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * The global reading direction of your application. This will be inherited by all primitives.
   */
  dir?: Direction | undefined;
  /**
   * The global scroll body behavior of your application. This will be inherited by the related primitives.
   */
  scrollBody?: boolean | ScrollBodyOption | undefined;
  /**
   * The global `nonce` value of your application. This will be inherited by the related primitives.
   */
  nonce?: string | undefined;
}
```

### Slots

```ts
/**
 * Slots for the App component
 */
interface AppSlots {
  default(): any;
}
```

---

# Avatar

> An img element that includes fallback and supports Nuxt Image.

## Usage

The Avatar uses the `<NuxtImg>` component when [`@nuxt/image`](https://github.com/nuxt/image){rel="nofollow"} is installed, falling back to `img` otherwise.

```vue

<template>
  <B24Avatar src="/b24ui/avatar/employee.png" alt="employee" />
</template>

```

> !NOTE
> You can pass any property from the HTML `<img>` element such as `alt`, `loading`, etc.

### Src

Use the `src` prop to set the image URL.

```vue

<template>
  <B24Avatar src="https://github.com/bitrix24.png" />
</template>

```

### Size

Use the `size` prop to set the size of the Avatar.

```vue

<template>
  <B24Avatar size="2xl" src="/b24ui/avatar/assistant.png" />
</template>

```

> !NOTE
> The `<img>` element's `width` and `height` are automatically set based on the `size` prop.

### Icon

Use the `icon` prop to display a fallback [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Avatar :icon="RocketIcon" size="md" />
</template>

```

### Text

Use the `text` prop to display a fallback text.

```vue

<template>
  <B24Avatar text="+24" size="xl" />
</template>

```

### Alt

When no icon or text is provided, the **initials** of the `alt` prop is used as fallback.

```vue

<template>
  <B24Avatar alt="Employee Name" size="xl" />
</template>

```

> !NOTE
> The `alt` prop is passed to the `img` element as the `alt` attribute.

### Chip

Use the `chip` prop to display a chip around the Avatar.

```vue

<template>
  <B24Avatar src="/b24ui/avatar/assistant.png" :chip="{text:'+1',inset:true,hideZero:true}" />
</template>

```

## Examples

### With tooltip

You can use a [Tooltip](https://bitrix24.github.io/b24ui/raw/docs/components/tooltip.md) component to display a tooltip when hovering the Avatar.

```vue [AvatarTooltipExample.vue]
<template>
  <B24Tooltip text="Employee Name">
    <B24Avatar
      src="/b24ui/avatar/employee.png"
      alt="Employee Name"
    />
  </B24Tooltip>
</template>
```

### With mask

You can use a CSS mask to display an Avatar with a custom shape instead of a simple circle.

```vue [AvatarMaskExample.vue]
<template>
  <B24Avatar class="rounded-none squircle" src="/b24ui/avatar/employee.png" alt="Employee Name" size="3xl" />
</template>

<style>
.squircle {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.65 20H6q-.825 0-1.412-.587T4 18v-2.65L2.075 13.4q-.275-.3-.425-.662T1.5 12t.15-.737t.425-.663L4 8.65V6q0-.825.588-1.412T6 4h2.65l1.95-1.925q.3-.275.663-.425T12 1.5t.738.15t.662.425L15.35 4H18q.825 0 1.413.588T20 6v2.65l1.925 1.95q.275.3.425.663t.15.737t-.15.738t-.425.662L20 15.35V18q0 .825-.587 1.413T18 20h-2.65l-1.95 1.925q-.3.275-.662.425T12 22.5t-.737-.15t-.663-.425z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
</style>
```

## API

### Props

```ts
/**
 * Props for the Avatar component
 */
interface AvatarProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  src?: string | undefined;
  alt?: string | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  text?: string | undefined;
  size?: "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined;
  chip?: boolean | ChipProps | undefined;
  b24ui?: { root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; } | undefined;
  crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
  decoding?: "async" | "auto" | "sync" | undefined;
  height?: Numberish | undefined;
  loading?: "lazy" | "eager" | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  sizes?: string | undefined;
  srcset?: string | undefined;
  usemap?: string | undefined;
  width?: Numberish | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes)
> This component also supports all native `<img>` HTML attributes.

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    avatar: {
      slots: {
        root: 'air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7)',
        image: 'h-full w-full rounded-[inherit] object-cover',
        fallback: 'font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate',
        icon: 'text-(--ui-color-design-plain-content-icon-secondary) shrink-0'
      },
      variants: {
        size: {
          '3xs': {
            root: 'size-[10px] text-4xs font-(--ui-font-weight-regular)',
            icon: 'size-[10px]'
          },
          '2xs': {
            root: 'size-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)',
            icon: 'size-[18px]'
          },
          xs: {
            root: 'size-[24px] text-(length:--ui-font-size-3xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)',
            icon: 'size-[22px]'
          },
          sm: {
            root: 'size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)',
            icon: 'size-[26px]'
          },
          md: {
            root: 'size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
            icon: 'size-[28px]'
          },
          lg: {
            root: 'size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)',
            icon: 'size-[38px]'
          },
          xl: {
            root: 'ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)',
            icon: 'size-[44px]'
          },
          '2xl': {
            root: 'ring-2 size-[60px] text-(length:--ui-font-size-5xl)/(--ui-font-line-height-reset)',
            icon: 'size-[56px]'
          },
          '3xl': {
            root: 'ring-2 size-[94px] text-[34px]/(--ui-font-line-height-reset)',
            icon: 'size-[90px]'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
```

---

# AvatarGroup

> Pile multiple avatars into a single group.

## Usage

Wrap multiple [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) within an AvatarGroup to stack them.

```vue

<template>
  <B24AvatarGroup>
<B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
<B24Avatar src="https://github.com/bitrix24.png" alt="Bitrix24" />
<B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
</B24AvatarGroup>
</template>

```

### Size

Use the `size` prop to change the size of all the avatars.

```vue

<template>
  <B24AvatarGroup size="xl">
<B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
<B24Avatar src="https://github.com/bitrix24.png" alt="Bitrix24" />
<B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
</B24AvatarGroup>
</template>

```

### Max

Use the `max` prop to limit the number of avatars displayed. The rest is displayed as an `+X` avatar.

```vue

<template>
  <B24AvatarGroup :max="2">
<B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
<B24Avatar src="https://github.com/bitrix24.png" alt="Bitrix24" />
<B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
</B24AvatarGroup>
</template>

```

## Examples

### With tooltip

Wrap each avatar with a [Tooltip](https://bitrix24.github.io/b24ui/raw/docs/components/tooltip.md) to display a tooltip on hover.

```vue [AvatarGroupTooltipExample.vue]
<template>
  <B24AvatarGroup size="xl">
    <B24Tooltip text="Assistant Name">
      <B24Avatar
        src="/b24ui/avatar/assistant.png"
        alt="Assistant Name"
      />
    </B24Tooltip>

    <B24Tooltip text="Bitrix24">
      <B24Avatar
        src="https://github.com/bitrix24.png"
        alt="Bitrix24"
      />
    </B24Tooltip>

    <B24Tooltip text="Employee Name">
      <B24Avatar
        src="/b24ui/avatar/employee.png"
        alt="Employee Name"
      />
    </B24Tooltip>
  </B24AvatarGroup>
</template>
```

### With chip

Wrap each avatar with a [Chip](https://bitrix24.github.io/b24ui/raw/docs/components/chip.md) to display a chip around the avatar.

```vue [AvatarGroupChipExample.vue]
<template>
  <B24AvatarGroup size="xl">
    <B24Avatar
      src="/b24ui/avatar/assistant.png"
      alt="Assistant Name"
      :chip="{ inset: true, color: 'air-primary-success', position: 'top-left' }"
    />

    <B24Avatar
      src="https://github.com/bitrix24.png"
      alt="Bitrix24"
      :chip="{ inset: true, color: 'air-primary-warning', position: 'top-left' }"
    />

    <B24Avatar
      src="/b24ui/avatar/employee.png"
      alt="Employee Name"
      :chip="{ inset: true, color: 'air-primary-alert' }"
    />
  </B24AvatarGroup>
</template>
```

### With link

Wrap each avatar with a [Link](https://bitrix24.github.io/b24ui/raw/docs/components/link.md) to make them clickable.

```vue [AvatarGroupLinkExample.vue]
<template>
  <B24AvatarGroup size="xl">
    <B24Link
      to="https://github.com/bitrix24/b24ui"
      target="_blank"
      class="hover:ring-3 hover:ring-blue-500 transition"
      raw
    >
      <B24Avatar
        src="/b24ui/avatar/assistant.png"
        alt="Assistant Name"
      />
    </B24Link>

    <B24Link
      to="https://apidocs.bitrix24.com/"
      target="_blank"
      class="hover:ring-3 hover:ring-ai-500 transition"
      raw
    >
      <B24Avatar
        src="https://github.com/bitrix24.png"
        alt="Bitrix24"
      />
    </B24Link>

    <B24Link
      to="https://github.com/bitrix24/b24ui"
      target="_blank"
      class="hover:ring-3 hover:ring-collab-500 transition"
      raw
    >
      <B24Avatar
        src="/b24ui/avatar/employee.png"
        alt="Employee Name"
      />
    </B24Link>
  </B24AvatarGroup>
</template>
```

### With mask

Wrap an avatar with a CSS mask to display it with a custom shape.

```vue [AvatarGroupMaskExample.vue]
<template>
  <B24AvatarGroup
    size="xl"
    :b24ui="{
      base: 'bg-(--ui-color-green-35) ring-(--ui-color-green-55)'
    }"
  >
    <B24Avatar
      src="/b24ui/avatar/assistant.png"
      alt="Benjamin Canac"
      class="rounded-none squircle"
    />

    <B24Avatar
      src="https://github.com/bitrix24.png"
      alt="Bitrix24"
    />

    <B24Avatar
      src="/b24ui/avatar/employee.png"
      alt="Employee Name"
      class="rounded-none squircle"
    />
  </B24AvatarGroup>
</template>

<style>
.squircle {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.65 20H6q-.825 0-1.412-.587T4 18v-2.65L2.075 13.4q-.275-.3-.425-.662T1.5 12t.15-.737t.425-.663L4 8.65V6q0-.825.588-1.412T6 4h2.65l1.95-1.925q.3-.275.663-.425T12 1.5t.738.15t.662.425L15.35 4H18q.825 0 1.413.588T20 6v2.65l1.925 1.95q.275.3.425.663t.15.737t-.15.738t-.425.662L20 15.35V18q0 .825-.587 1.413T18 20h-2.65l-1.95 1.925q-.3.275-.662.425T12 22.5t-.737-.15t-.663-.425z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
</style>
```

> !WARNING
> The `chip` prop does not work correctly when using a mask. Chips may be cut depending on the mask shape.

## API

### Props

```ts
/**
 * Props for the AvatarGroup component
 */
interface AvatarGroupProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  size?: "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined;
  /**
   * The maximum number of avatars to display.
   */
  max?: string | number | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the AvatarGroup component
 */
interface AvatarGroupSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    avatarGroup: {
      slots: {
        root: 'inline-flex justify-end',
        base: 'relative rounded-full last:me-0'
      },
      variants: {
        size: {
          '3xs': {
            base: '-me-0.5'
          },
          '2xs': {
            base: '-me-0.5'
          },
          xs: {
            base: '-me-0.5'
          },
          sm: {
            base: '-me-1.5'
          },
          md: {
            base: '-me-1.5'
          },
          lg: {
            base: '-me-1.5'
          },
          xl: {
            base: '-me-2'
          },
          '2xl': {
            base: '-me-2'
          },
          '3xl': {
            base: '-me-2'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
```

---

# Badge

> A short descriptor for a status or category.

## Usage

### Label

Use the default slot to set the label of the Badge.

```vue

<template>
  <B24Badge>Badge</B24Badge>
</template>

```

You can achieve the same result by using the `label` prop.

Use the `use-link` prop to show underline.

```vue

<template>
  <B24Badge label="Badge" use-link />
</template>

```

### Color

Use the `color` prop to change the color of the Badge.

```vue

<template>
  <B24Badge color="air-primary">Badge</B24Badge>
</template>

```

### Inverted

Use the `inverted` prop to invert the color of the Badge.

> !WARNING
> Only available for `air-primary*` colors

```vue

<template>
  <B24Badge inverted color="air-primary">Badge</B24Badge>
</template>

```

### Size

Use the `size` prop to change the size of the Badge.

```vue

<template>
  <B24Badge size="xl">Badge</B24Badge>
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the Badge.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Badge :icon="RocketIcon" size="md" color="air-primary">Badge</B24Badge>
</template>

```

Use the `use-close` prop to show close icon.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Badge use-close :icon="RocketIcon" size="md" color="air-primary">Badge</B24Badge>
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the Badge.

```vue

<template>
  <B24Badge :avatar="{src:'/b24ui/avatar/employee.png'}" size="xl" color="air-primary">
Badge
</B24Badge>
</template>

```

## API

### Props

```ts
/**
 * Props for the Badge component
 */
interface BadgeProps {
  /**
   * The element or component this component should render as.
   * @default "\"span\""
   */
  as?: any;
  label?: string | number | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * If set to `true` the color is inverted.
   * Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
   * @default "false"
   */
  inverted?: boolean | undefined;
  size?: "xss" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  /**
   * Render the badge with equal padding on all sides.
   */
  square?: boolean | undefined;
  /**
   * Shows 'underline' on hover
   */
  useLink?: boolean | undefined;
  /**
   * Shows icons.close on the right side
   */
  useClose?: boolean | undefined;
  onCloseClick?: ((event: MouseEvent) => void | Promise<void>) | ((event: MouseEvent) => void | Promise<void>)[] | undefined;
  b24ui?: { base?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; } | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * Display an icon on the right side.
   */
  trailingIcon?: IconComponent | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Badge component
 */
interface BadgeSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    badge: {
      slots: {
        base: 'ui-label__scope --air select-none font-[family-name:var(--ui-font-family-secondary)] font-(--ui-label-font-weight) text-(length:--ui-label-font-size)/normal inline-flex items-center transition-all duration-200 ease-linear px-(--ui-label-inline-space) text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width)',
        wrapper: 'h-(--ui-label-height) inline-flex items-center',
        label: 'max-w-full whitespace-nowrap text-ellipsis decoration-from-font',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailingIcon: 'shrink-0 cursor-pointer hover:rounded-(--ui-border-radius-circle) hover:bg-current/20'
      },
      variants: {
        fieldGroup: {
          horizontal: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 group-[.is-field-group]/items:not-only:first:rounded-e-none group-[.is-field-group]/items:not-only:last:rounded-s-none group-[.is-field-group]/items:not-last:not-first:rounded-none group-[.is-field-group]/items:not-only:first:border-e-0 group-[.is-field-group]/items:not-only:not-first:border-s-0 focus-visible:z-[1]',
          vertical: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
        },
        noSplit: {
          false: "group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30"
        },
        useLink: {
          true: {
            base: 'cursor-pointer',
            wrapper: 'group',
            label: 'group-hover:underline group-hover:decoration-dashed'
          }
        },
        useClose: {
          true: 'pe-2xs',
          false: ''
        },
        leading: {
          true: 'ps-1',
          false: ''
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          'air-secondary': {
            base: 'style-tinted'
          },
          'air-secondary-alert': {
            base: 'style-tinted-alert'
          },
          'air-secondary-accent': {
            base: 'style-outline'
          },
          'air-secondary-accent-1': {
            base: 'style-outline-accent-1'
          },
          'air-secondary-accent-2': {
            base: 'style-outline-accent-2'
          },
          'air-tertiary': {
            base: 'style-outline-no-accent'
          },
          'air-selection': {
            base: 'style-selection'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        size: {
          xss: {
            base: 'ui-label-xss gap-0.5',
            wrapper: 'gap-0.5',
            label: 'underline-offset-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]'
          },
          xs: {
            base: 'ui-label-xs gap-0.5',
            wrapper: 'gap-0.5',
            label: 'underline-offset-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]'
          },
          sm: {
            base: 'ui-label-sm gap-1',
            wrapper: 'gap-1',
            label: 'underline-offset-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]'
          },
          md: {
            base: 'ui-label-md gap-1',
            wrapper: 'gap-1',
            label: 'underline-offset-1',
            leadingIcon: 'size-[15px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[15px]'
          },
          lg: {
            base: 'ui-label-lg gap-1',
            wrapper: 'gap-1',
            label: '',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          },
          xl: {
            base: 'ui-label-xl gap-1',
            wrapper: 'gap-1',
            label: '',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          }
        },
        square: {
          true: {
            base: 'rounded-[calc(var(--ui-label-height)_/_4)] ',
            wrapper: 'w-(--ui-label-height)',
            label: 'overflow-hidden'
          },
          false: {
            base: 'rounded-[calc(var(--ui-label-height)_/_2)]'
          }
        },
        inverted: {
          true: {
            base: 'border-(--b24ui-color)'
          },
          false: ''
        }
      },
      compoundVariants: [
        {
          inverted: true,
          color: 'air-primary',
          class: {
            base: 'style-filled-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-success',
          class: {
            base: 'style-filled-success-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-alert',
          class: {
            base: 'style-filled-alert-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-copilot',
          class: {
            base: 'style-filled-copilot-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-warning',
          class: {
            base: 'style-filled-warning-inverted'
          }
        },
        {
          size: 'xss',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'px-[2px] gap-0',
            leadingIcon: 'size-[6px]'
          }
        },
        {
          size: 'xs',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'px-[2px] gap-0',
            leadingIcon: 'size-[10px]'
          }
        },
        {
          size: 'sm',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'p-[1px] gap-0',
            leadingIcon: 'size-[16px]'
          }
        },
        {
          size: 'md',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'p-[1px] gap-0',
            leadingIcon: 'size-[18px]'
          }
        },
        {
          size: 'lg',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'p-[1px] gap-0',
            leadingIcon: 'size-[23px]'
          }
        },
        {
          size: 'xl',
          square: true,
          class: {
            base: 'p-0 ps-0 pe-0',
            wrapper: 'p-[1px] gap-0',
            leadingIcon: 'size-[28px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md',
        square: false,
        inverted: false
      }
    }
  }
})
```

---

# Banner

> Top banner for important user messages.

## Usage

### Title

Use the `title` prop to display a title on the Banner.

```vue

<template>
  <B24Banner title="The subscription trial has ended. Subscribe to continue using all apps." />
</template>

```

### Icon

Use the `icon` prop to display an icon on the Banner.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Banner :icon="RocketIcon" title="The subscription trial has ended. Subscribe to continue using all apps." />
</template>

```

### Color

Use the `color` prop to change the color of the Banner.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Banner color="air-secondary-alert" :icon="RocketIcon" title="The subscription trial has ended. Subscribe to continue using all apps." />
</template>

```

### Close

Use the `close` prop to display a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) to dismiss the Banner. Defaults to `false`.

> !TIP
> A `close` event will be emitted when the close button is clicked.

```vue [BannerExample.vue]
<script setup lang="ts">
import type { BannerProps } from '@bitrix24/b24ui-nuxt'
import CircleCrossIcon from '@bitrix24/b24icons-vue/outline/CircleCrossIcon'

const { id = 'example' } = defineProps<{
  id?: string
  title?: string
  color?: BannerProps['color']
  closeIcon?: string
}>()

function onClose() {
  localStorage.removeItem(`banner-${id}`)

  setTimeout(() => {
    document.querySelector('html')?.classList.remove('hide-banner')
  }, 1000)
}

onBeforeMount(() => {
  localStorage.removeItem(`banner-${id}`)
})
</script>

<template>
  <B24Banner
    :id="id"
    :title="title || 'This is a closable banner'"
    :color="color"
    class="light"
    :close-icon="closeIcon ? CircleCrossIcon : undefined"
    close
    @close="onClose"
  />
</template>
```

> !NOTE
> When closed, `banner-${id}` will be stored in the local storage to prevent it from being displayed again. :br For the example above, `banner-example` will be stored in the local storage.

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}. Defaults to `CrossMIcon`.

```vue [BannerWithTitleExample.vue]
<script setup lang="ts">
import type { BannerProps } from '@bitrix24/b24ui-nuxt'
import CircleCrossIcon from '@bitrix24/b24icons-vue/outline/CircleCrossIcon'

const { id = 'example' } = defineProps<{
  id?: string
  title?: string
  color?: BannerProps['color']
  closeIcon?: string
}>()

function onClose() {
  localStorage.removeItem(`banner-${id}`)

  setTimeout(() => {
    document.querySelector('html')?.classList.remove('hide-banner')
  }, 1000)
}

onBeforeMount(() => {
  localStorage.removeItem(`banner-${id}`)
})
</script>

<template>
  <B24Banner
    :id="id"
    :title="title || 'The subscription trial has ended. Subscribe to continue using all apps.'"
    :color="color"
    class="edge-light"
    :close-icon="CircleCrossIcon"
    close
    @close="onClose"
  />
</template>
```

### Actions

Use the `actions` prop to add some [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) actions to the Banner.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const actions = ref([
  {
    label: 'Buy a subscription',
    color: 'air-primary',
    icon: RocketIcon
  },
  {
    label: 'Open scanner',
    color: 'air-secondary-accent-2'
  }
])
</script>

<template>
  <B24Banner title="The subscription trial has ended. Subscribe to continue using all apps." :actions="actions" />
</template>

```

> !NOTE
> The action buttons default to `color="air-secondary-no-accen"` and `size="xs"`. You can customize these values by passing them directly to each action button.

### Link

You can pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} component such as `to`, `target`, `rel`, etc.

```vue

<template>
  <B24Banner to="https://apidocs.bitrix24.com/" target="_blank" title="Explore the Bitrix24 REST API" color="air-primary" />
</template>

```

> !NOTE
> The `NuxtLink` component will inherit all other attributes you pass to the `Banner` component.

## Examples

### Within `app.vue`

Use the Banner component in your `app.vue` or in a layout:

```vue [app.vue] {3-7}
<template>
  <B24App>
    <B24Banner
      :icon="Bitrix24Icon"
      title="Explore the Bitrix24 REST API"
      to="https://apidocs.bitrix24.com/"
    />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </B24App>
</template>
```

## API

### Props

```ts
/**
 * Props for the Banner component
 */
interface BannerProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * A unique id saved to local storage to remember if the banner has been dismissed.
   * Change this value to show the banner again.
   */
  id?: string | undefined;
  /**
   * The icon displayed next to the title.
   */
  icon?: IconComponent | undefined;
  title?: string | undefined;
  /**
   * Display a list of actions next to the title.
   * `{ color: 'air-secondary-no-accent', size: 'xs' }`{lang="ts-type"}
   */
  actions?: ButtonProps[] | undefined;
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  target?: "_blank" | "_parent" | "_self" | "_top" | (string & {}) | null | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary";
  /**
   * Display a close button to dismiss the banner.
   * `{ size: 'md', color: 'air-tertiary-no-accent' }`{lang="ts-type"}
   */
  close?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the close button.
   */
  closeIcon?: IconComponent | undefined;
  b24ui?: { root?: ClassNameValue; container?: ClassNameValue; left?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; actions?: ClassNameValue; close?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Banner component
 */
interface BannerSlots {
  leading(): any;
  title(): any;
  actions(): any;
  close(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Banner component
 */
interface BannerEmits {
  close: (payload: []) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    banner: {
      slots: {
        root: 'relative z-50 w-full bg-(--b24ui-background) transition-colors',
        container: 'flex items-center justify-between gap-3 h-12',
        left: 'hidden lg:flex-1 lg:flex lg:items-center',
        center: 'flex items-center gap-1.5 min-w-0',
        right: 'lg:flex-1 flex items-center justify-end',
        icon: 'size-5 shrink-0 text-(--b24ui-color) pointer-events-none',
        title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) text-(--b24ui-color) font-(--ui-font-weight-medium) truncate',
        actions: 'flex gap-1.5 shrink-0 isolate',
        close: '[--ui-btn-color:var(--b24ui-color)] hover:bg-(--ui-color-base-white-fixed)/10 focus-visible:bg-(--ui-color-base-white-fixed)/10 -me-1.5 lg:me-0'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          'air-secondary': {
            root: 'style-tinted'
          },
          'air-secondary-alert': {
            root: 'style-tinted-alert'
          },
          'air-secondary-accent': {
            root: 'style-outline'
          },
          'air-secondary-accent-1': {
            root: 'style-outline-accent-1'
          },
          'air-secondary-accent-2': {
            root: 'style-outline-accent-2'
          },
          'air-tertiary': {
            root: 'style-outline-no-accent'
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: [
        {
          to: true,
          class: {
            root: 'hover:bg-(--b24ui-background)/90'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary-alert'
      }
    }
  }
})
```

---

# Breadcrumb

> A breadcrumb navigation component.

## Usage

Use the Breadcrumb component to show the current page's location in your site's hierarchy.

```vue

<script setup lang="ts">
const items = ref([
  {
    label: 'Docs',
    to: '/docs'
  },
  {
    label: 'Components',
    to: '/docs/components'
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb'
  }
])
</script>

<template>
  <B24Breadcrumb :items="items" />
</template>

```

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLabel?: ClassNameValue, separator?: ClassNameValue, separatorIcon?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

You can pass any property from the [Link](https://bitrix24.github.io/b24ui/raw/docs/components/link.md#props) component such as `to`, `target`, etc.

```vue

<script setup lang="ts">
import type { BreadcrumbItem } from '@bitrix24/b24ui-nuxt'

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Docs',
    to: '/docs'
  },
  {
    label: 'Components',
    to: '/docs/components'
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb'
  }
])
</script>

<template>
  <B24Breadcrumb :items="items" />
</template>

```

> !NOTE
> A `span` is rendered instead of a link when the `to` property is not defined.

### Separator Icon

Use the `separator-icon` prop to customize the [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} between each item.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import type { BreadcrumbItem } from '@bitrix24/b24ui-nuxt'

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Docs',
    to: '/docs'
  },
  {
    label: 'Components',
    to: '/docs/components'
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb'
  }
])
</script>

<template>
  <B24Breadcrumb :separator-icon="RocketIcon" :items="items" />
</template>

```

## Examples

### With separator slot

Use the `#separator` slot to customize the separator between each item.

```vue [BreadcrumbSeparatorSlotExample.vue]
<script setup lang="ts">
import type { BreadcrumbItem } from '@bitrix24/b24ui-nuxt'

const items: BreadcrumbItem[] = [
  {
    label: 'Docs',
    to: '/docs'
  },
  {
    label: 'Components',
    to: '/docs/components'
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb'
  }
]
</script>

<template>
  <B24Breadcrumb :items="items">
    <template #separator>
      <span class="mx-2 text-(--b24ui-typography-legend-color)">/</span>
    </template>
  </B24Breadcrumb>
</template>
```

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-leading`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-label`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-trailing`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [BreadcrumbCustomSlotExample.vue]
<script setup lang="ts">
import type { BreadcrumbItem } from '@bitrix24/b24ui-nuxt'
import MoreLIcon from '@bitrix24/b24icons-vue/outline/MoreLIcon'
import HomeIcon from '@bitrix24/b24icons-vue/outline/HomeIcon'
import ProductIcon from '@bitrix24/b24icons-vue/outline/ProductIcon'
import LinkIcon from '@bitrix24/b24icons-vue/outline/LinkIcon'

const items = [
  {
    label: 'Home',
    to: '/',
    icon: HomeIcon
  },
  {
    slot: 'dropdown' as const,
    icon: MoreLIcon,
    children: [
      {
        label: 'Documentation',
        to: '/docs'
      },
      {
        label: 'Themes'
      },
      {
        label: 'GitHub'
      }
    ]
  },
  {
    label: 'Components',
    to: '/docs/components',
    icon: ProductIcon
  },
  {
    label: 'Breadcrumb',
    to: '/docs/components/breadcrumb',
    icon: LinkIcon
  }
] satisfies BreadcrumbItem[]
</script>

<template>
  <B24Breadcrumb :items="items">
    <template #dropdown="{ item }">
      <B24DropdownMenu :items="item.children">
        <B24Button :icon="item.icon" color="air-tertiary-no-accent" class="p-0.5" />
      </B24DropdownMenu>
    </template>
  </B24Breadcrumb>
</template>
```

> [!TIP](https://bitrix24.github.io/b24ui/#slots)
> You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.

## API

### Props

```ts
/**
 * Props for the Breadcrumb component
 */
interface BreadcrumbProps {
  /**
   * The element or component this component should render as.
   * @default "\"nav\""
   */
  as?: any;
  items?: BreadcrumbItem[] | undefined;
  /**
   * The icon to use as a separator.
   */
  separatorIcon?: IconComponent | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<BreadcrumbItem> | undefined;
  b24ui?: { root?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLeadingAvatar?: ClassNameValue; linkLeadingAvatarSize?: ClassNameValue; linkLabel?: ClassNameValue; separator?: ClassNameValue; separatorIcon?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Breadcrumb component
 */
interface BreadcrumbSlots {
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-trailing(): any;
  separator(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    breadcrumb: {
      slots: {
        root: 'relative min-w-0',
        list: 'flex items-center gap-[6px]',
        item: 'flex min-w-0',
        link: 'group relative flex items-center gap-[6px] text-(length:--ui-font-size-sm) min-w-0 -mt-px focus-visible:outline-(--ui-color-accent-main-primary)',
        linkLeadingIcon: 'shrink-0 size-[20px]',
        linkLeadingAvatar: 'shrink-0',
        linkLeadingAvatarSize: '2xs',
        linkLabel: 'truncate',
        separator: 'flex',
        separatorIcon: 'shrink-0 size-[20px] text-(--ui-color-base-6)'
      },
      variants: {
        active: {
          true: {
            link: 'text-(--ui-color-design-selection-content) hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline font-(--ui-font-weight-semi-bold)'
          },
          false: {
            link: 'text-(--b24ui-typography-legend-color) font-(--ui-font-weight-medium)'
          }
        },
        disabled: {
          true: {
            link: 'cursor-not-allowed opacity-30'
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: [
        {
          disabled: false,
          active: false,
          to: true,
          class: {
            link: 'hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline transition-colors'
          }
        }
      ]
    }
  }
})
```

---

# Button

> A button capable of linking or performing an action.

## Usage

Use the default slot to set the label of the Button.

```vue

<template>
  <B24Button>Button</B24Button>
</template>

```

### Label

Use the `label` prop to set the label of the Button.

```vue

<template>
  <B24Button label="Button" />
</template>

```

### Color

Use the `color` prop to change the color of the Button.

```vue

<template>
  <B24Button color="air-secondary-no-accent">Button</B24Button>
</template>

```

### Size

Use the `size` prop to change the size of the Button.

```vue

<template>
  <B24Button size="xl">Button</B24Button>
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the Button.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Button :icon="RocketIcon" size="md" color="air-primary">Button</B24Button>
</template>

```

Use the `use-dropdown` prop to show trailing-icon.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Button use-dropdown :icon="RocketIcon" size="md" color="air-primary">Button</B24Button>
</template>

```

The `label` as prop or slot is optional so you can use the Button as an icon-only button.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Button :icon="RocketIcon" size="md" color="air-primary" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the Button.

```vue

<template>
  <B24Button :avatar="{src:'/b24ui/avatar/employee.png'}" size="md" color="air-primary">
Button
</B24Button>
</template>

```

The `label` as prop or slot is optional so you can use the Button as an avatar-only button.

```vue

<template>
  <B24Button :avatar="{src:'/b24ui/avatar/employee.png'}" size="md" color="air-primary" />
</template>

```

### Link

You can pass any property from the [Link](https://bitrix24.github.io/b24ui/raw/docs/components/link.md#props) component such as `to`, `target`, etc.

```vue

<template>
  <B24Button to="https://apidocs.bitrix24.com" target="_blank">Button</B24Button>
</template>

```

When the Button is a link or when using the `active` prop, you can use the `active-color` props to customize the active state.

```vue

<template>
  <B24Button active color="air-secondary-no-accent" active-color="air-primary">
Button
</B24Button>
</template>

```

You can also use the `active-class` and `inactive-class` props to customize the active state.

```vue

<template>
  <B24Button active active-class="italic" inactive-class="tracking-widest">Button</B24Button>
</template>

```

### Loading

Use the `loading` prop to show a loading icon and disable the Button.

```vue

<template>
  <B24Button loading color="air-primary">Button</B24Button>
</template>

```

Use the `loading-auto` prop to show the loading icon automatically while the `@click` promise is pending.

```vue [ButtonLoadingAutoExample.vue]
<script setup lang="ts">
async function onClick() {
  return new Promise<void>(res => setTimeout(res, 1000))
}
</script>

<template>
  <B24Button loading-auto color="air-primary" @click="onClick">
    Button
  </B24Button>
</template>
```

This also works with the [Form](https://bitrix24.github.io/b24ui/raw/docs/components/form.md) component.

```vue [ButtonLoadingAutoFormExample.vue]
<script setup lang="ts">
const state = reactive({ fullName: '' })

async function onSubmit() {
  return new Promise<void>(res => setTimeout(res, 1000))
}

async function validate(data: Partial<typeof state>) {
  if (!data.fullName?.length) return [{ name: 'fullName', message: 'Required' }]
  return []
}
</script>

<template>
  <B24Form :state="state" :validate="validate" @submit="onSubmit">
    <B24FormField name="fullName" label="Full name">
      <B24Input v-model="state.fullName" />
    </B24FormField>
    <B24Button type="submit" class="mt-2" color="air-primary-success" loading-auto>
      Submit
    </B24Button>
  </B24Form>
</template>
```

### Loading Icon

Use `use-clock` or `use-wait` props to show different loading icons.

```vue

<template>
  <B24Button loading use-wait color="air-primary">Button</B24Button>
</template>

```

### Disabled

Use the `disabled` prop to disable the Button.

```vue

<template>
  <B24Button disabled color="air-primary">Button</B24Button>
</template>

```

### Rounded

Use the `rounded` prop to round the Button.

```vue

<template>
  <B24Button rounded color="air-primary">Button</B24Button>
</template>

```

### Block

Use the `block` property to set `w-full` for the Button.

```vue

<template>
  <B24Button block color="air-primary">Button</B24Button>
</template>

```

### NormalCase

Use the `normalCase` property to set `uppercase` for the Button.

```vue

<template>
  <B24Button :normal-case="false" color="air-primary">Button</B24Button>
</template>

```

## API

### Props

```ts
/**
 * Props for the Button component
 */
interface ButtonProps {
  label?: string | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link";
  activeColor?: "default" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "link" | undefined;
  size?: "xs" | "md" | "xss" | "sm" | "lg" | "xl" | undefined;
  /**
   * Rounds the corners of the button
   */
  rounded?: boolean | undefined;
  /**
   * Render the button full width
   */
  block?: boolean | undefined;
  /**
   * Set loading state automatically based on the `@click` promise state
   */
  loadingAuto?: boolean | undefined;
  /**
   * Disable uppercase label
   * @default "true"
   */
  normalCase?: boolean | undefined;
  /**
   * Shows LoaderWaitIcon in loading mode
   */
  useWait?: boolean | undefined;
  /**
   * Shows LoaderClockIcon icon in loading mode
   */
  useClock?: boolean | undefined;
  /**
   * Shows icons.ChevronDownSIcon on the right side
   */
  useDropdown?: boolean | undefined;
  onClick?: ((event: MouseEvent) => void | Promise<void>) | ((event: MouseEvent) => void | Promise<void>)[] | undefined;
  /**
   * The class to apply when the link is active
   */
  activeClass?: string | undefined;
  /**
   * The class to apply when the link is inactive
   */
  inactiveClass?: string | undefined;
  b24ui?: { base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; } | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * Route Location the link should navigate to when clicked on.
   */
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  /**
   * Class to apply when the link is exact active
   */
  exactActiveClass?: string | undefined;
  /**
   * Value passed to the attribute `aria-current` when the link is exact active.
   */
  ariaCurrentValue?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
  /**
   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
   */
  viewTransition?: boolean | undefined;
  /**
   * Calls `router.replace` instead of `router.push`.
   */
  replace?: boolean | undefined;
  autofocus?: Booleanish | undefined;
  disabled?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  name?: string | undefined;
  /**
   * The type of the button when not a link.
   * @default "\"button\""
   */
  type?: "reset" | "submit" | "button" | undefined;
  download?: any;
  /**
   * An alias for `to`. If used with `to`, `href` will be ignored
   */
  href?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  hreflang?: string | undefined;
  media?: string | undefined;
  ping?: string | undefined;
  /**
   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
   */
  rel?: "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | (string & {}) | null | undefined;
  /**
   * Where to display the linked URL, as the name for a browsing context.
   */
  target?: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  /**
   * The element or component this component should render as when not a link.
   */
  as?: any;
  /**
   * Force the link to be active independent of the current route.
   */
  active?: boolean | undefined;
  /**
   * Will only be active if the current route is an exact match.
   */
  exact?: boolean | undefined;
  /**
   * Allows controlling how the current route query sets the link as active.
   */
  exactQuery?: boolean | "partial" | undefined;
  /**
   * Will only be active if the current route hash is an exact match.
   */
  exactHash?: boolean | undefined;
  /**
   * When `true`, uses special underlined styling.
   */
  isAction?: boolean | undefined;
  /**
   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
   */
  external?: boolean | undefined;
  /**
   * If set to true, no rel attribute will be added to the link
   */
  noRel?: boolean | undefined;
  /**
   * A class to apply to links that have been prefetched.
   */
  prefetchedClass?: string | undefined;
  /**
   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
   */
  prefetch?: boolean | undefined;
  /**
   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
   */
  prefetchOn?: "visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }> | undefined;
  /**
   * Escape hatch to disable `prefetch` attribute.
   */
  noPrefetch?: boolean | undefined;
  /**
   * An option to either add or remove trailing slashes in the `href` for this specific link.
   * Overrides the global `trailingSlash` option if provided.
   */
  trailingSlash?: "append" | "remove" | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

> [!NOTE](https://github.com/bitrix24/b24ui/blob/main/src/runtime/components/Link.vue#L13)
> The `Button` component extends the `Link` component. Check out the source code on GitHub.

### Slots

```ts
/**
 * Slots for the Button component
 */
interface ButtonSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    button: {
      slots: {
        base: 'ui-btn font-[family-name:var(--ui-font-family-primary)] select-none cursor-pointer inline-flex items-center relative outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-30 aria-disabled:opacity-30 transition duration-0 ease-linear border-(length:--ui-btn-border-width) text-(--ui-btn-color) bg-(--ui-btn-background) border-(--ui-btn-border-color) hover:text-(--ui-btn-color-hover) hover:bg-(--ui-btn-background-hover) hover:border-(--ui-btn-border-color-hover) focus:text-(--ui-btn-color-hover) focus:bg-(--ui-btn-background-hover) focus:border-(--ui-btn-border-color-hover) active:text-(--ui-btn-color-active) active:bg-(--ui-btn-background-active) active:border-(--ui-btn-border-color-active) disabled:bg-(--ui-btn-background) disabled:border-(--ui-btn-border-color) aria-disabled:bg-(--ui-btn-background) aria-disabled:border-(--ui-btn-border-color) focus-visible:outline-(--ui-btn-background) ring-(--ui-btn-background-hover) focus:outline-none focus-visible:ring-(--ui-btn-background-hover) h-(--ui-btn-height) text-(length:--ui-btn-font-size) leading-(--ui-btn-height) font-(--ui-btn-font-weight)',
        baseLoading: 'h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center',
        baseLoadingWaitIcon: 'text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]',
        baseLoadingClockIcon: 'text-(--ui-btn-color) size-[calc(var(--ui-btn-wait-icon-size)_+_7px)]',
        baseLoadingSpinnerIcon: 'text-(--ui-btn-color) size-(--ui-btn-wait-icon-size) animate-spin stroke-2',
        baseLine: 'w-full inline-flex items-center justify-center gap-(--ui-btn-icon-space) ps-(--ui-btn-padding-left) pe-(--ui-btn-padding-right) h-(--ui-btn-height)',
        label: 'h-(--ui-btn-height) max-w-full inline-flex flex-row items-center tracking-(--ui-btn-letter-spacing) overflow-visible text-clip',
        labelInner: 'truncate inline-block max-w-full mt-(--ui-btn-title-compensation)',
        leadingIcon: 'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)',
        leadingAvatar: 'shrink-0 me-[4px]',
        leadingAvatarSize: '',
        trailingIcon: 'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size) mt-(--ui-btn-title-compensation)',
        safeList: 'invisible'
      },
      variants: {
        fieldGroup: {
          horizontal: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 group-[.is-field-group]/items:not-only:first:rounded-e-none group-[.is-field-group]/items:not-only:last:rounded-s-none group-[.is-field-group]/items:not-last:not-first:rounded-none group-[.is-field-group]/items:not-only:first:border-e-0 group-[.is-field-group]/items:not-only:not-first:border-s-0 focus-visible:z-[1]',
          vertical: 'focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
        },
        noSplit: {
          false: "group-[.is-field-group]/items:not-only:not-first:after:content-[''] group-[.is-field-group]/items:not-only:not-first:after:absolute group-[.is-field-group]/items:not-only:not-first:after:top-[7px] group-[.is-field-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-field-group]/items:not-only:not-first:after:left-0 group-[.is-field-group]/items:not-only:not-first:after:w-px group-[.is-field-group]/items:not-only:not-first:after:bg-current/30"
        },
        color: {
          'air-primary': '--style-filled',
          'air-primary-success': '--style-filled-success',
          'air-primary-alert': '--style-filled-alert',
          'air-primary-copilot': '--style-filled-copilot',
          'air-secondary': '--style-tinted',
          'air-secondary-alert': '--style-tinted-alert',
          'air-secondary-accent': '--style-outline',
          'air-secondary-accent-1': '--style-outline-accent-1',
          'air-secondary-accent-2': '--style-outline-accent-2',
          'air-secondary-no-accent': '--style-outline-no-accent',
          'air-tertiary': '--style-plain',
          'air-tertiary-accent': '--style-plain-accent',
          'air-tertiary-no-accent': '--style-plain-no-accent',
          'air-selection': '--style-selection',
          'air-boost': {
            base: '--style-filled-boost bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent disabled:bg-transparent aria-disabled:bg-transparent from-0% via-58.65% to-100% bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3) hover:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] hover:from-(--hover-color-1) via-(--hover-color-2) hover:via-58.65% hover:to-(--hover-color-3) focus:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] focus:from-(--hover-color-1) via-(--hover-color-2) focus:via-58.65% to-(--hover-color-3) active:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] active:from-(--active-color-1) via-(--active-color-2) active:via-58.65% to-(--active-color-3) disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) via-(--ui-color-design-filled-boost-bg-gradient-2) to-(--ui-color-design-filled-boost-bg-gradient-3) aria-disabled:bg-radial-[110.42%_110.42%_at_-10.42%_31.25%] aria-disabled:from-(--ui-color-design-filled-boost-bg-gradient-1) aria-disabled:via-(--ui-color-design-filled-boost-bg-gradient-2) aria-disabled:to-(--ui-color-design-filled-boost-bg-gradient-3)'
          },
          default: '',
          danger: '',
          success: '',
          warning: '',
          primary: '',
          secondary: '',
          collab: '',
          ai: '',
          link: ''
        },
        depth: {
          light: '',
          normal: '',
          dark: ''
        },
        size: {
          xss: {
            base: 'ui-btn-xss',
            leadingAvatarSize: '2xs'
          },
          xs: {
            base: 'ui-btn-xs',
            leadingAvatarSize: '2xs'
          },
          sm: {
            base: 'ui-btn-sm',
            leadingAvatarSize: 'xs'
          },
          md: {
            base: 'ui-btn-md',
            leadingAvatarSize: 'xs'
          },
          lg: {
            base: 'ui-btn-lg',
            leadingAvatarSize: 'md'
          },
          xl: {
            base: 'ui-btn-xl',
            leadingAvatarSize: 'md'
          }
        },
        block: {
          true: {
            base: 'w-full'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-lg)',
          false: 'rounded-(--ui-btn-radius)'
        },
        leading: {
          true: ''
        },
        active: {
          true: {
            base: ''
          },
          false: {
            base: ''
          }
        },
        useLabel: {
          true: '',
          false: {
            baseLine: 'ps-[4px] pe-[4px]',
            leadingAvatar: 'me-0'
          }
        },
        useDropdown: {
          true: ''
        },
        useWait: {
          true: ''
        },
        useClock: {
          true: ''
        },
        loading: {
          true: ''
        },
        normalCase: {
          true: 'normal-case',
          false: 'uppercase'
        },
        isAir: {
          true: '--air',
          false: ''
        }
      },
      compoundVariants: [
        {
          color: 'default',
          depth: 'light',
          class: '--style-default-light'
        },
        {
          color: 'default',
          depth: 'normal',
          class: '--style-default'
        },
        {
          color: 'default',
          depth: 'dark',
          class: '--style-default-dark'
        },
        {
          color: 'danger',
          depth: 'light',
          class: '--style-danger-light'
        },
        {
          color: 'danger',
          depth: 'normal',
          class: '--style-danger'
        },
        {
          color: 'danger',
          depth: 'dark',
          class: '--style-danger-dark'
        },
        {
          color: 'success',
          depth: 'light',
          class: '--style-success-light'
        },
        {
          color: 'success',
          depth: 'normal',
          class: '--style-success'
        },
        {
          color: 'success',
          depth: 'dark',
          class: '--style-success-dark'
        },
        {
          color: 'warning',
          depth: 'light',
          class: '--style-warning-light'
        },
        {
          color: 'warning',
          depth: 'normal',
          class: '--style-warning'
        },
        {
          color: 'warning',
          depth: 'dark',
          class: '--style-warning-dark'
        },
        {
          color: 'primary',
          depth: 'light',
          class: '--style-primary-light'
        },
        {
          color: 'primary',
          depth: 'normal',
          class: '--style-primary'
        },
        {
          color: 'primary',
          depth: 'dark',
          class: '--style-primary-dark'
        },
        {
          color: 'secondary',
          depth: 'light',
          class: '--style-secondary-light'
        },
        {
          color: 'secondary',
          depth: 'normal',
          class: '--style-secondary'
        },
        {
          color: 'secondary',
          depth: 'dark',
          class: '--style-secondary-dark'
        },
        {
          color: 'collab',
          depth: 'light',
          class: '--style-collab-light'
        },
        {
          color: 'collab',
          depth: 'normal',
          class: '--style-collab'
        },
        {
          color: 'collab',
          depth: 'dark',
          class: '--style-collab-dark'
        },
        {
          color: 'ai',
          depth: 'light',
          class: '--style-ai-light'
        },
        {
          color: 'ai',
          depth: 'normal',
          class: '--style-ai'
        },
        {
          color: 'ai',
          depth: 'dark',
          class: '--style-ai-dark'
        },
        {
          color: 'link',
          depth: 'light',
          class: '--style-link-light'
        },
        {
          color: 'link',
          depth: 'normal',
          class: '--style-link'
        },
        {
          color: 'link',
          depth: 'dark',
          class: '--style-link-dark'
        },
        {
          leading: true,
          useLabel: true,
          useDropdown: false,
          class: {
            baseLine: 'ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))]'
          }
        },
        {
          leading: false,
          useLabel: true,
          useDropdown: true,
          class: {
            baseLine: 'pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]'
          }
        },
        {
          leading: true,
          useLabel: true,
          useDropdown: true,
          class: {
            baseLine: 'ps-[calc(var(--ui-btn-padding-left)_-_var(--ui-btn-icon-compensation))] pe-[calc(var(--ui-btn-padding-right)_-_var(--ui-btn-icon-compensation))]'
          }
        },
        {
          leading: true,
          useLabel: false,
          useDropdown: false,
          class: {
            base: 'w-(--ui-btn-height)'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'air-secondary-no-accent',
        depth: 'normal',
        normalCase: true,
        isAir: true
      }
    }
  }
})
```

---

# Calendar

> A calendar tool for choosing individual dates, multiple dates, or date spans.

## Usage

Use the `v-model` directive to control the selected date.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(undefined, undefined, undefined))
</script>

<template>
  <B24Calendar v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const defaultValue = shallowRef(new CalendarDate(undefined, undefined, undefined))
</script>

<template>
  <B24Calendar :default-value="defaultValue" />
</template>

```

> !NOTE
> This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.

### Multiple

Use the `multiple` prop to allow multiple selections.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef([new CalendarDate(undefined, undefined, undefined), new CalendarDate(undefined, undefined, undefined), new CalendarDate(undefined, undefined, undefined)])
</script>

<template>
  <B24Calendar multiple v-model="value" />
</template>

```

### Locale

Use the `locale` prop to change the locale of the calendar.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(undefined, undefined, undefined))
</script>

<template>
  <B24Calendar v-model="value" locale="zh-CN" />
</template>

```

### Range

Use the `range` prop to select a range of dates.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef({ start: new CalendarDate(undefined, undefined, undefined), end: new CalendarDate(undefined, undefined, undefined) })
</script>

<template>
  <B24Calendar range v-model="value" />
</template>

```

### Color

Use the `color` prop to change the color of the calendar.

```vue

<template>
  <B24Calendar color="air-primary-alert" />
</template>

```

### Size

Use the `size` prop to change the size of the calendar.

```vue

<template>
  <B24Calendar size="lg" />
</template>

```

### Disabled

Use the `disabled` prop to disable the calendar.

```vue

<template>
  <B24Calendar disabled />
</template>

```

### Number Of Months

Use the `numberOfMonths` prop to change the number of months in the calendar.

```vue

<template>
  <B24Calendar :number-of-months="3" />
</template>

```

### Month Controls

Use the `month-controls` prop to show the month controls. Defaults to `true`.

```vue

<template>
  <B24Calendar :month-controls="false" />
</template>

```

### Year Controls

Use the `year-controls` prop to show the year controls. Defaults to `false`.

```vue

<template>
  <B24Calendar year-controls />
</template>

```

### Fixed Weeks

Use the `fixed-weeks` prop to display the calendar with fixed weeks.

```vue

<template>
  <B24Calendar :fixed-weeks="false" />
</template>

```

## Examples

### With chip events

Use the [Chip](https://bitrix24.github.io/b24ui/raw/docs/components/chip.md) component to add events to specific days.

```vue [CalendarEventsExample.vue]
<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef(new CalendarDate(2012, 4, 12))

function getColorByDate(date: Date) {
  const isWeekend = date.getDay() % 6 == 0
  const isDayMeeting = date.getDay() % 3 == 0

  if (isWeekend) {
    return undefined
  }

  if (isDayMeeting) {
    return 'air-primary-alert'
  }

  return 'air-primary-success'
}
</script>

<template>
  <B24Calendar v-model="modelValue" size="lg">
    <template #day="{ day }">
      <B24Chip
        :show="!!getColorByDate(day.toDate('UTC'))"
        :color="getColorByDate(day.toDate('UTC'))"
        size="sm"
      >
        {{ day.day }}
      </B24Chip>
    </template>
  </B24Calendar>
</template>
```

### With disabled dates

Use the `is-date-disabled` prop with a function to mark specific dates as disabled.

```vue [CalendarDisabledDatesExample.vue]
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef({
  start: new CalendarDate(2012, 4, 12),
  end: new CalendarDate(2012, 4, 14)
})

const isDateDisabled = (date: DateValue) => {
  return date.day >= 15 && date.day <= 17
}
</script>

<template>
  <B24Calendar v-model="modelValue" :is-date-disabled="isDateDisabled" range />
</template>
```

### With unavailable dates

Use the `is-date-unavailable` prop with a function to mark specific dates as unavailable.

```vue [CalendarUnavailableDatesExample.vue]
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef({
  start: new CalendarDate(2012, 4, 12),
  end: new CalendarDate(2012, 4, 14)
})

const isDateUnavailable = (date: DateValue) => {
  return date.day >= 15 && date.day <= 17
}
</script>

<template>
  <B24Calendar v-model="modelValue" :is-date-unavailable="isDateUnavailable" range />
</template>
```

### With min/max dates

Use the `min-value` and `max-value` props to limit the dates.

```vue [CalendarMinMaxDatesExample.vue]
<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef(new CalendarDate(2012, 4, 12))
const minDate = new CalendarDate(2012, 4, 3)
const maxDate = new CalendarDate(2012, 4, 27)
</script>

<template>
  <B24Calendar v-model="modelValue" :min-value="minDate" :max-value="maxDate" />
</template>
```

### With other calendar systems

You can use other calenders from `@internationalized/date` to implement a different calendar system.

```vue [CalendarOtherSystemExample.vue]
<script lang="ts" setup>
import { shallowRef } from 'vue'
import { CalendarDate, HebrewCalendar } from '@internationalized/date'

const hebrewDate = shallowRef(new CalendarDate(new HebrewCalendar(), 5781, 1, 1))
</script>

<template>
  <B24Calendar v-model="hebrewDate" />
</template>
```

> [!NOTE](https://react-spectrum.adobe.com/internationalized/date/Calendar.html#implementations)
> You can check all the available calendars on `@internationalized/date` docs.

### With external controls

You can control the calendar with external controls by manipulating the date passed in the `v-model`.

```vue [CalendarExternalControlsExample.vue]
<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const date = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <div class="flex flex-col gap-4">
    <B24Calendar v-model="date" :month-controls="false" :year-controls="false" />

    <div class="flex justify-between gap-4">
      <B24Button @click="date = date.subtract({ months: 1 })">
        Prev
      </B24Button>

      <B24Button @click="date = date.add({ months: 1 })">
        Next
      </B24Button>
    </div>
  </div>
</template>
```

### As a DatePicker

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) and a [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md) component to create a date picker.

```vue [CalendarDatePickerExample.vue]
<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'

const df = new DateFormatter('en-US', {
  dateStyle: 'medium'
})

const modelValue = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Popover>
    <B24Button :icon="Calendar1Icon">
      {{ modelValue ? df.format(modelValue.toDate(getLocalTimeZone())) : 'Select a date' }}
    </B24Button>

    <template #content>
      <B24Calendar v-model="modelValue" class="p-2" />
    </template>
  </B24Popover>
</template>
```

### As a DateRangePicker

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) and a [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md) component to create a date range picker.

```vue [CalendarDateRangePickerExample.vue]
<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'

const df = new DateFormatter('en-US', {
  dateStyle: 'medium'
})

const modelValue = shallowRef({
  start: new CalendarDate(2012, 4, 12),
  end: new CalendarDate(2012, 5, 12)
})
</script>

<template>
  <B24Popover>
    <B24Button :icon="Calendar1Icon">
      <template v-if="modelValue.start">
        <template v-if="modelValue.end">
          {{ df.format(modelValue.start.toDate(getLocalTimeZone())) }} - {{ df.format(modelValue.end.toDate(getLocalTimeZone())) }}
        </template>

        <template v-else>
          {{ df.format(modelValue.start.toDate(getLocalTimeZone())) }}
        </template>
      </template>
      <template v-else>
        Pick a date
      </template>
    </B24Button>

    <template #content>
      <B24Calendar v-model="modelValue" class="p-2" :number-of-months="2" range />
    </template>
  </B24Popover>
</template>
```

## API

### Props

```ts
/**
 * Props for the Calendar component
 */
interface CalendarProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The icon to use for the next year control.
   */
  nextYearIcon?: IconComponent | undefined;
  /**
   * Configure the next year button.
   * `{ color: 'air-tertiary' }`{lang="ts"}
   */
  nextYear?: ButtonProps | undefined;
  /**
   * The icon to use for the next month control.
   */
  nextMonthIcon?: IconComponent | undefined;
  /**
   * Configure the next month button.
   * `{ color: 'air-tertiary' }`{lang="ts"}
   */
  nextMonth?: ButtonProps | undefined;
  /**
   * The icon to use for the previous year control.
   */
  prevYearIcon?: IconComponent | undefined;
  /**
   * Configure the prev year button.
   * `{ color: 'air-tertiary' }`{lang="ts"}
   */
  prevYear?: ButtonProps | undefined;
  /**
   * The icon to use for the previous month control.
   */
  prevMonthIcon?: IconComponent | undefined;
  /**
   * Configure the prev month button.
   * `{ color: 'air-tertiary' }`{lang="ts"}
   */
  prevMonth?: ButtonProps | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "md" | "xs" | "sm" | "lg" | undefined;
  /**
   * Whether a range of dates can be selected
   */
  range?: boolean | undefined;
  /**
   * Whether multiple dates can be selected
   */
  multiple?: boolean | undefined;
  /**
   * Show month controls
   * @default "true"
   */
  monthControls?: boolean | undefined;
  /**
   * Show year controls
   * @default "false"
   */
  yearControls?: boolean | undefined;
  defaultValue?: DateValue | DateRange | DateValue[] | undefined;
  modelValue?: DateValue | DateRange | DateValue[] | null | undefined;
  b24ui?: { root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; heading?: ClassNameValue; grid?: ClassNameValue; gridRow?: ClassNameValue; gridWeekDaysRow?: ClassNameValue; gridBody?: ClassNameValue; headCell?: ClassNameValue; cell?: ClassNameValue; cellTrigger?: ClassNameValue; } | undefined;
  /**
   * The default placeholder date
   */
  defaultPlaceholder?: DateValue | undefined;
  /**
   * The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
   */
  placeholder?: DateValue | undefined;
  /**
   * When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
   */
  allowNonContiguousRanges?: boolean | undefined;
  /**
   * This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month
   */
  pagedNavigation?: boolean | undefined;
  /**
   * Whether or not to prevent the user from deselecting a date without selecting another date first
   */
  preventDeselect?: boolean | undefined;
  /**
   * The maximum number of days that can be selected in a range
   */
  maximumDays?: number | undefined;
  /**
   * The day of the week to start the calendar on
   */
  weekStartsOn?: 0 | 1 | 2 | 4 | 3 | 5 | 6 | undefined;
  /**
   * The format to use for the weekday strings provided via the weekdays slot prop
   */
  weekdayFormat?: WeekDayFormat | undefined;
  /**
   * Whether or not to always display 6 weeks in the calendar
   * @default "true"
   */
  fixedWeeks?: boolean | undefined;
  /**
   * The maximum date that can be selected
   */
  maxValue?: DateValue | undefined;
  /**
   * The minimum date that can be selected
   */
  minValue?: DateValue | undefined;
  /**
   * The locale to use for formatting dates
   */
  locale?: string | undefined;
  /**
   * The number of months to display at once
   */
  numberOfMonths?: number | undefined;
  /**
   * Whether or not the calendar is disabled
   */
  disabled?: boolean | undefined;
  /**
   * Whether or not the calendar is readonly
   */
  readonly?: boolean | undefined;
  /**
   * If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted
   */
  initialFocus?: boolean | undefined;
  /**
   * A function that returns whether or not a date is disabled
   */
  isDateDisabled?: Matcher | undefined;
  /**
   * A function that returns whether or not a date is unavailable
   */
  isDateUnavailable?: Matcher | undefined;
  /**
   * A function that returns whether or not a date is hightable
   */
  isDateHighlightable?: Matcher | undefined;
  /**
   * A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.
   */
  nextPage?: ((placeholder: DateValue) => DateValue) | undefined;
  /**
   * A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.
   */
  prevPage?: ((placeholder: DateValue) => DateValue) | undefined;
  /**
   * Whether or not to disable days outside the current view.
   */
  disableDaysOutsideCurrentView?: boolean | undefined;
  /**
   * Which part of the range should be fixed
   */
  fixedDate?: "start" | "end" | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Calendar component
 */
interface CalendarSlots {
  heading(): any;
  day(): any;
  week-day(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Calendar component
 */
interface CalendarEmits {
  update:modelValue: (payload: [date: DateValue | DateRange | DateValue[] | null | undefined]) => void;
  update:placeholder: (payload: [date: DateValue] & [date: DateValue]) => void;
  update:validModelValue: (payload: [date: DateRange]) => void;
  update:startValue: (payload: [date: DateValue | undefined]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    calendar: {
      slots: {
        root: 'font-[family-name:var(--ui-font-family-primary)]',
        header: 'flex items-center justify-between',
        body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
        heading: 'mx-auto text-center font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color) truncate',
        grid: 'w-full border-collapse select-none space-y-1 focus:outline-none',
        gridRow: 'grid grid-cols-7 place-items-center',
        gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
        gridBody: 'grid',
        headCell: 'font-(--ui-font-weight-normal) text-(--ui-color-design-plain-na-content)',
        cell: 'relative text-center cursor-pointer aria-disabled:cursor-not-allowed',
        cellTrigger: 'm-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none text-(--b24ui-typography-label-color) data-disabled:text-(--ui-color-design-plain-na-content-secondary) data-unavailable:text-(--ui-color-design-plain-na-content-secondary) data-outside-view:text-(--ui-color-design-plain-na-content-secondary) data-[selected]:text-(--b24ui-color) focus-visible:ring-(--b24ui-background-hover) data-[selected]:bg-(--b24ui-background) data-today:not-data-[selected]:text-(--b24ui-background) data-[highlighted]:bg-(--b24ui-background) data-[highlighted]:text-(--b24ui-color) hover:not-data-[disabled]:not-data-[selected]:bg-(--b24ui-background) hover:not-data-[disabled]:not-data-[selected]:text-(--b24ui-color) data-unavailable:line-through data-unavailable:pointer-events-none data-today:font-(--ui-font-weight-semi-bold) transition'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        size: {
          xs: {
            heading: 'text-(length:--ui-font-size-md)',
            cell: 'text-(length:--ui-font-size-sm)',
            headCell: 'text-[10px]',
            cellTrigger: 'size-[28px]',
            body: 'space-y-2 pt-2'
          },
          sm: {
            heading: 'text-(length:--ui-font-size-md)',
            headCell: 'text-(length:--ui-font-size-sm)',
            cell: 'text-(length:--ui-font-size-sm)',
            cellTrigger: 'size-[28px]'
          },
          md: {
            heading: 'text-(length:--ui-font-size-lg)',
            headCell: 'text-(length:--ui-font-size-md)',
            cell: 'text-(length:--ui-font-size-md)',
            cellTrigger: 'size-[32px]'
          },
          lg: {
            heading: 'text-(length:--ui-font-size-2xl)',
            headCell: 'text-(length:--ui-font-size-lg)',
            cell: 'text-(length:--ui-font-size-lg)',
            cellTrigger: 'size-[36px] text-(length:--ui-font-size-lg)'
          }
        }
      },
      defaultVariants: {
        size: 'md',
        color: 'air-primary'
      }
    }
  }
})
```

---

# Card

> Render the content within a card component comprising a header, body, and footer section.

## Usage

Use the `header`, `default` and `footer` slots to add content to the Card.

```vue [CardExample.vue]
<template>
  <B24Card>
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </B24Card>
</template>
```

### Variant

Use the `variant` prop to change the variant of the Card.

```vue

<template>
  <B24Card variant="outline">
  <template #header>
    
<Placeholder class="h-8" />

  </template>

<Placeholder class="h-32" />

  <template #footer>
    
<Placeholder class="h-8" />

  </template>

</B24Card>
</template>

```

## API

### Props

```ts
/**
 * Props for the Card component
 */
interface CardProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  variant?: "outline" | "filled" | "filled-success" | "filled-alert" | "filled-warning" | "filled-copilot" | "filled-no-accent" | "filled-black" | "tinted" | "tinted-alt" | "tinted-accent-1" | "tinted-success" | "tinted-alert" | "tinted-warning" | "tinted-no-accent" | "outline-alt" | "outline-accent" | "outline-accent-2" | "outline-success" | "outline-alert" | "outline-warning" | "outline-copilot" | "outline-no-accent" | "plain" | "plain-accent" | "plain-no-accent" | "selection" | undefined;
  b24ui?: { root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Card component
 */
interface CardSlots {
  header(): any;
  default(): any;
  footer(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    card: {
      slots: {
        root: 'overflow-hidden rounded-(--ui-border-radius-md)',
        header: 'p-[24px] sm:px-[22px] sm:py-[15px]',
        body: 'p-[24px] sm:px-[22px] sm:py-[15px]',
        footer: 'p-[24px] sm:px-[22px] sm:py-[15px]'
      },
      variants: {
        variant: {
          filled: {
            root: 'bg-(--ui-color-design-filled-bg) border border-(--ui-color-design-filled-stroke) border-(length:--ui-design-filled-stroke-weight) text-(--ui-color-design-filled-content)',
            header: 'border-b border-(--ui-color-design-filled-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-filled-content-divider) border-t-1'
          },
          'filled-success': {
            root: 'bg-(--ui-color-design-filled-success-bg) border border-(--ui-color-design-filled-success-stroke) border-(length:--ui-design-filled-success-stroke-weight) text-(--ui-color-design-filled-success-content)',
            header: 'border-b border-(--ui-color-design-filled-success-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-filled-success-content-divider) border-t-1'
          },
          'filled-alert': {
            root: 'bg-(--ui-color-design-filled-alert-bg) border border-(--ui-color-design-filled-alert-stroke) border-(length:--ui-design-filled-alert-stroke-weight) text-(--ui-color-design-filled-alert-content)',
            header: 'border-b border-(--ui-color-design-filled-alert-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-filled-alert-content-divider) border-t-1'
          },
          'filled-warning': {
            root: 'bg-(--ui-color-design-filled-warning-bg) border border-(--ui-color-design-filled-warning-stroke) border-(length:--ui-design-filled-warning-stroke-weight) text-(--ui-color-design-filled-warning-content)',
            header: 'border-b border-(--ui-color-design-filled-warning-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-filled-warning-content-divider) border-t-1'
          },
          'filled-copilot': {
            root: 'bg-(--ui-color-design-filled-copilot-bg) border border-(--ui-color-design-filled-copilot-stroke) border-(length:--ui-design-filled-copilot-stroke-weight) text-(--ui-color-design-filled-copilot-content)',
            header: 'border-b border-(--ui-color-design-filled-copilot-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-filled-copilot-content-divider) border-t-1'
          },
          'filled-no-accent': {
            root: 'bg-(--ui-color-design-filled-na-bg) border border-(--ui-color-design-filled-na-stroke) border-(length:--ui-design-filled-na-stroke-weight) text-(--ui-color-design-filled-na-content)',
            header: 'border-b border-(--ui-color-design-filled-na-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-filled-na-content-divider) border-t-1'
          },
          'filled-black': {
            root: 'bg-(--ui-color-design-filled-black-bg) border border-(--ui-color-design-filled-black-stroke) border-(length:--ui-design-filled-black-stroke-weight) text-(--ui-color-design-filled-black-content)',
            header: 'border-b border-(--ui-color-design-filled-black-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-filled-black-content-divider) border-t-1'
          },
          tinted: {
            root: 'bg-(--ui-color-design-tinted-bg) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
            header: 'border-b border-(--ui-color-design-tinted-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-tinted-content-divider) border-t-1'
          },
          'tinted-alt': {
            root: 'bg-(--ui-color-design-tinted-bg-alt) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
            header: 'border-b border-(--ui-color-design-tinted-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-tinted-content-divider) border-t-1'
          },
          'tinted-accent-1': {
            root: 'bg-(--ui-color-design-tinted-a1-bg) border border-(--ui-color-design-tinted-a1-stroke) border-(length:--ui-design-tinted-a1-stroke-weight) text-(--ui-color-design-tinted-a1-content)',
            header: 'border-b border-(--ui-color-design-tinted-a1-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-tinted-a1-content-divider) border-t-1'
          },
          'tinted-success': {
            root: 'bg-(--ui-color-design-tinted-success-bg) border border-(--ui-color-design-tinted-success-stroke) border-(length:--ui-design-tinted-success-stroke-weight) text-(--ui-color-design-tinted-success-content)',
            header: 'border-b border-(--ui-color-design-tinted-success-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-tinted-success-content-divider) border-t-1'
          },
          'tinted-alert': {
            root: 'bg-(--ui-color-design-tinted-alert-bg) border border-(--ui-color-design-tinted-alert-stroke) border-(length:--ui-design-tinted-alert-stroke-weight) text-(--ui-color-design-tinted-alert-content)',
            header: 'border-b border-(--ui-color-design-tinted-alert-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-tinted-alert-content-divider) border-t-1'
          },
          'tinted-warning': {
            root: 'bg-(--ui-color-design-tinted-warning-bg) border border-(--ui-color-design-tinted-warning-stroke) border-(length:--ui-design-tinted-warning-stroke-weight) text-(--ui-color-design-tinted-warning-content)',
            header: 'border-b border-(--ui-color-design-tinted-warning-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-tinted-warning-content-divider) border-t-1'
          },
          'tinted-no-accent': {
            root: 'bg-(--ui-color-design-tinted-na-bg) border border-(--ui-color-design-tinted-na-stroke) border-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)',
            header: 'border-b border-(--ui-color-design-tinted-na-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-tinted-na-content-divider) border-t-1'
          },
          outline: {
            root: 'bg-(--ui-color-design-outline-bg) border border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)',
            header: 'border-b border-(--ui-color-design-outline-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-content-divider) border-t-1'
          },
          'outline-alt': {
            root: 'bg-(--ui-color-design-outline-bg-alt) border border-(--ui-color-design-outline-content-divider) border-(length:--ui-design-outline-stroke-weight-alt) text-(--ui-color-design-outline-content)',
            header: 'border-b border-(--ui-color-design-outline-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-content-divider) border-t-1'
          },
          'outline-accent': {
            root: 'bg-(--ui-color-design-outline-a1-bg) border border-(--ui-color-design-outline-a1-stroke) border-(length:--ui-design-outline-a1-stroke-weight) text-(--ui-color-design-outline-a1-content)',
            header: 'border-b border-(--ui-color-design-outline-a1-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-a1-content-divider) border-t-1'
          },
          'outline-accent-2': {
            root: 'bg-(--ui-color-design-outline-a2-bg) border border-(--ui-color-design-outline-a2-stroke) border-(length:--ui-design-outline-a2-stroke-weight) text-(--ui-color-design-outline-a2-content)',
            header: 'border-b border-(--ui-color-design-outline-a2-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-a2-content-divider) border-t-1'
          },
          'outline-success': {
            root: 'bg-(--ui-color-design-outline-success-bg) border border-(--ui-color-design-outline-success-stroke) border-(length:--ui-design-outline-success-stroke-weight) text-(--ui-color-design-outline-success-content)',
            header: 'border-b border-(--ui-color-design-outline-success-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-success-content-divider) border-t-1'
          },
          'outline-alert': {
            root: 'bg-(--ui-color-design-outline-alert-bg) border border-(--ui-color-design-outline-alert-stroke) border-(length:--ui-design-outline-alert-stroke-weight) text-(--ui-color-design-outline-alert-content)',
            header: 'border-b border-(--ui-color-design-outline-alert-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-alert-content-divider) border-t-1'
          },
          'outline-warning': {
            root: 'bg-(--ui-color-design-outline-warning-bg) border border-(--ui-color-design-outline-warning-stroke) border-(length:--ui-design-outline-warning-stroke-weight) text-(--ui-color-design-outline-warning-content)',
            header: 'border-b border-(--ui-color-design-outline-warning-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-warning-content-divider) border-t-1'
          },
          'outline-copilot': {
            root: 'bg-(--ui-color-design-outline-copilot-bg) border border-(--ui-color-design-outline-copilot-stroke) border-(length:--ui-design-outline-copilot-stroke-weight) text-(--ui-color-design-outline-copilot-content)',
            header: 'border-b border-(--ui-color-design-outline-copilot-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-copilot-content-divider) border-t-1'
          },
          'outline-no-accent': {
            root: 'bg-(--ui-color-design-outline-na-bg) border border-(--ui-color-design-outline-na-stroke) border-(length:--ui-design-outline-na-stroke-weight) text-(--ui-color-design-outline-na-content)',
            header: 'border-b border-(--ui-color-design-outline-na-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-outline-na-content-divider) border-t-1'
          },
          plain: {
            root: 'bg-(--ui-color-design-plain-bg) border border-(--ui-color-design-plain-stroke) border-(length:--ui-design-plain-stroke-weight) text-(--ui-color-design-plain-content)',
            header: 'border-b border-(--ui-color-design-plain-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-plain-content-divider) border-t-1'
          },
          'plain-accent': {
            root: 'bg-(--ui-color-design-plain-a-bg) border border-(--ui-color-design-plain-a-stroke) border-(length:--ui-design-plain-a-stroke-weight) text-(--ui-color-design-plain-a-content)',
            header: 'border-b border-(--ui-color-design-plain-a-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-plain-a-content-divider) border-t-1'
          },
          'plain-no-accent': {
            root: 'bg-(--ui-color-design-plain-na-bg) border border-(--ui-color-design-plain-na-stroke) border-(length:--ui-design-plain-na-stroke-weight) text-(--ui-color-design-plain-na-content)',
            header: 'border-b border-(--ui-color-design-plain-na-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-plain-na-content-divider) border-t-1'
          },
          selection: {
            root: 'bg-(--ui-color-design-selection-bg) border border-(--ui-color-design-selection-stroke) border-(length:--ui-design-selection-stroke-weight) text-(--ui-color-design-selection-content)',
            header: 'border-b border-(--ui-color-design-selection-content-divider) border-b-1',
            footer: 'border-t border-(--ui-color-design-selection-content-divider) border-t-1'
          }
        }
      },
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})
```

---

# ChatMessage

> A chat message component with icon, avatar, and action buttons.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage :badge{label="2.2+"}

The ChatMessage component renders an `<article>` element for a `user` or `assistant` chat message.

::code-preview
  :::b24-chat-message
  ---
  avatar:
    src: https://github.com/bitrix24.png
  parts:
    - type: text
      id: "1"
      text: Hello! Tell me more about building AI chatbots with Bitrix24 UI.
  id: "1"
  role: user
  side: right
  variant: message
  ---
  :::
::

> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/components/chat-messages.md)
> Use the [`ChatMessages`](https://bitrix24.github.io/b24ui/raw/docs/components/chat-messages.md) component to display a list of chat messages.

### Parts

Use the `parts` prop to display the message content using the AI SDK v5 format.

```vue

<template>
  <B24ChatMessage :parts="{'0':{type:'text',id:'1',text:'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'}}" role="user" id="1" />
</template>

```

> !NOTE
> The `parts` prop is the recommended format for AI SDK v5. Each part has a `type` (e.g., 'text') and corresponding content.

### Side

Use the `side` prop to display the message on the left or right.

```vue

<template>
  <B24ChatMessage side="right" :parts="{'0':{type:'text',id:'1',text:'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'}}" role="user" id="1" />
</template>

```

> !NOTE
> When using the [`ChatMessages`](https://bitrix24.github.io/b24ui/raw/docs/components/chat-messages.md) component, the `side` prop is set to `left` for `assistant` messages and `right` for `user` messages.

### Variant

Use the `variant` prop to change style of the message.

```vue

<template>
  <B24ChatMessage variant="message" :parts="{'0':{type:'text',id:'1',text:'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'}}" role="user" id="1" />
</template>

```

> !NOTE
> When using the [`ChatMessages`](https://bitrix24.github.io/b24ui/raw/docs/components/chat-messages.md) component, the `variant` prop is set to `message` for `assistant` messages and `message` for `user` messages.

### Icon

Use the `icon` prop to display an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} component next to the message.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24ChatMessage :icon="RocketIcon" variant="message" side="right" :parts="{'0':{type:'text',id:'1',text:'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'}}" role="user" id="1" />
</template>

```

### Avatar

Use the `avatar` prop to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) component next to the message.

```vue

<template>
  <B24ChatMessage :avatar="{src:'https://github.com/bitrix24.png'}" variant="message" side="right" :parts="{'0':{type:'text',id:'1',text:'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'}}" role="user" id="1" />
</template>

```

You can also use the `avatar.icon` prop to display an icon as the avatar.

```vue [ChatMessageAvatarIconExample.vue]
<script setup lang="ts">
import RobotIcon from '@bitrix24/b24icons-vue/outline/RobotIcon'
</script>

<template>
  <B24ChatMessage
    id="1"
    :avatar="{
      icon: RobotIcon
    }"
    :parts="[
      {
        type: 'text',
        text: 'Bitrix24 UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
      }
    ]"
    role="assistant"
  />
</template>
```

### Actions

Use the `actions` prop to display actions below the message that will be displayed when hovering over the message.

```vue

<script setup lang="ts">
const actions = ref([
  {
    label: 'Copy to clipboard'
  }
])
</script>

<template>
  <B24ChatMessage :actions="actions" :parts="{'0':{type:'text',id:'1',text:'Bitrix24 UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'}}" role="user" id="1" />
</template>

```

## API

### Props

```ts
/**
 * Props for the ChatMessage component
 */
interface ChatMessageProps {
  /**
   * A unique identifier for the message.
   */
  id: string;
  /**
   * The role of the message.
   */
  role: "system" | "user" | "assistant";
  /**
   * The parts of the message. Use this for rendering the message in the UI.
   * 
   * System messages should be avoided (set the system prompt on the server instead).
   * They can have text parts.
   * 
   * User messages can have text parts and file parts.
   * 
   * Assistant messages can have text, reasoning, tool invocation, and file parts.
   */
  parts: UIMessagePart<UIDataTypes, UITools>[];
  /**
   * The element or component this component should render as.
   * @default "\"article\""
   */
  as?: any;
  icon?: IconComponent | undefined;
  avatar?: (AvatarProps & { [key: string]: any; }) | undefined;
  variant?: "message" | "event" | "system" | undefined;
  side?: "left" | "right" | undefined;
  /**
   * Display a list of actions under the message.
   * The `label` will be used in a tooltip.
   * `{ size: 'sm', color: 'air-secondary-no-accent' }`{lang="ts-type"}
   */
  actions?: (Omit<ButtonProps, "onClick"> & { onClick?: ((e: MouseEvent, message: UIMessage<unknown, UIDataTypes, UITools>) => void) | undefined; })[] | undefined;
  /**
   * Render the message in a compact style.
   * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
   */
  compact?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; container?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; content?: ClassNameValue; actions?: ClassNameValue; } | undefined;
  /**
   * The metadata of the message.
   */
  metadata?: unknown;
}
```

### Slots

```ts
/**
 * Slots for the ChatMessage component
 */
interface ChatMessageSlots {
  leading(): any;
  content(): any;
  actions(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    chatMessage: {
      slots: {
        root: 'group/message relative w-full',
        container: 'relative flex items-start',
        leading: 'inline-flex items-center justify-center min-h-6',
        leadingIcon: 'shrink-0 text-(--ui-color-design-plain-content-icon-secondary)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        content: 'relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0',
        actions: 'opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center transition-opacity'
      },
      variants: {
        variant: {
          message: {
            content: 'bg-inverted text-inverted'
          },
          event: {
            content: 'bg-default ring ring-default'
          },
          system: {
            content: 'bg-elevated/50'
          }
        },
        side: {
          left: {
            container: 'rtl:justify-end'
          },
          right: {
            container: 'ltr:justify-end ms-auto max-w-[75%]'
          }
        },
        leading: {
          true: ''
        },
        actions: {
          true: ''
        },
        compact: {
          true: {
            root: 'scroll-mt-3',
            container: 'gap-1.5 pb-3',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs'
          },
          false: {
            root: 'scroll-mt-4 sm:scroll-mt-6',
            container: 'gap-3 pb-8',
            leadingIcon: 'size-8',
            leadingAvatarSize: 'md'
          }
        }
      },
      compoundVariants: [
        {
          compact: true,
          actions: true,
          class: {
            container: 'pb-8'
          }
        },
        {
          leading: true,
          compact: false,
          side: 'left',
          class: {
            actions: 'left-11'
          }
        },
        {
          leading: true,
          compact: true,
          side: 'left',
          class: {
            actions: 'left-6.5'
          }
        },
        {
          variant: [
            'message',
            'event',
            'system'
          ],
          compact: false,
          class: {
            content: 'px-4 py-3 rounded-lg min-h-12',
            leading: 'mt-2'
          }
        },
        {
          variant: [
            'message',
            'event',
            'system'
          ],
          compact: true,
          class: {
            content: 'px-2 py-1 rounded-lg min-h-8',
            leading: 'mt-1'
          }
        },
        {
          variant: 'message',
          side: 'left',
          class: {
            content: 'w-full'
          }
        }
      ],
      defaultVariants: {
        variant: 'message'
      }
    }
  }
})
```

---

# ChatMessages

> A chat messages list component designed for seamless integration with the Vercel AI SDK.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage :badge{label="2.2+"}

The ChatMessages component displays a list of [ChatMessage](https://bitrix24.github.io/b24ui/raw/docs/components/chat-message.md) components using either the default slot or the `messages` prop.

```vue {2,8}
<template>
  <B24ChatMessages>
    <B24ChatMessage
      v-for="(message, index) in messages"
      :key="index"
      v-bind="message"
    />
  </B24ChatMessages>
</template>
```

> !NOTE
> This component is purpose-built for AI chatbots with features like:
>
> - Initial scroll to the bottom upon loading ([`shouldScrollToBottom`](https://bitrix24.github.io/b24ui/#should-scroll-to-bottom)).
> - Continuous scrolling down as new messages arrive ([`shouldAutoScroll`](https://bitrix24.github.io/b24ui/#should-auto-scroll)).
> - An "Auto scroll" button appears when scrolled up, allowing users to jump back to the latest messages ([`autoScroll`](https://bitrix24.github.io/b24ui/#auto-scroll)).
> - A loading indicator displays while the assistant is processing ([`status`](https://bitrix24.github.io/b24ui/#status)).
> - Submitted messages are scrolled to the top of the viewport and the height of the last user message is dynamically adjusted.

### Messages

Use the `messages` prop to display a list of chat messages.

```vue

<script setup lang="ts">
const messages = ref([
  {
    id: '6045235a-a435-46b8-989d-2df38ca2eb47',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'Hello, how are you?'
      }
    ]
  },
  {
    id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: 'I am doing well, thank you for asking! How can I assist you today?'
      }
    ]
  },
  {
    id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'What is the current weather in Tokyo?'
      }
    ]
  },
  {
    id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
      }
    ]
  }
])
</script>

<template>
  <B24ChatMessages :messages="messages" />
</template>

```

### Status

Use the `status` prop to display a visual indicator when the assistant is processing.

```vue

<script setup lang="ts">
const messages = ref([
  {
    id: '6045235a-a435-46b8-989d-2df38ca2eb47',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'Hello, how are you?'
      }
    ]
  }
])
</script>

<template>
  <B24ChatMessages status="submitted" :messages="messages" />
</template>

```

> !NOTE
> Here's the detail of the different statuses from the AI SDK v5 Chat class:
>
> - `submitted`: The message has been sent to the API and we're awaiting the start of the response stream.
> - `streaming`: The response is actively streaming in from the API, receiving chunks of data.
> - `ready`: The full response has been received and processed; a new user message can be submitted.
> - `error`: An error occurred during the API request, preventing successful completion.

### User

Use the `user` prop to change the [ChatMessage](https://bitrix24.github.io/b24ui/raw/docs/components/chat-message.md) props for `user` messages. Defaults to:

- `side: 'right'`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `variant: 'message'`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
const messages = ref([
  {
    id: '6045235a-a435-46b8-989d-2df38ca2eb47',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'Hello, how are you?'
      }
    ]
  },
  {
    id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: 'I am doing well, thank you for asking! How can I assist you today?'
      }
    ]
  },
  {
    id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'What is the current weather in Tokyo?'
      }
    ]
  },
  {
    id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
      }
    ]
  }
])
</script>

<template>
  <B24ChatMessages :user="{side:'left',variant:'message',avatar:{src:'https://github.com/bitrix24.png'}}" :messages="messages" />
</template>

```

### Assistant

Use the `assistant` prop to change the [ChatMessage](https://bitrix24.github.io/b24ui/raw/docs/components/chat-message.md) props for `assistant` messages. Defaults to:

- `side: 'left'`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `variant: 'message'`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
const messages = ref([
  {
    id: '6045235a-a435-46b8-989d-2df38ca2eb47',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'Hello, how are you?'
      }
    ]
  },
  {
    id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: 'I am doing well, thank you for asking! How can I assist you today?'
      }
    ]
  },
  {
    id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'What is the current weather in Tokyo?'
      }
    ]
  },
  {
    id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
      }
    ]
  }
])
</script>

<template>
  <B24ChatMessages :assistant="{side:'left',variant:'message',avatar:{src:'/b24ui/avatar/employee.png'},actions:[{label:'Copy to clipboard'}]}" :messages="messages" />
</template>

```

### Auto Scroll

Use the `auto-scroll` prop to customize or hide the auto scroll button (with `false` value) displayed when scrolling to the top of the chat. Defaults to:

- `color: 'air-secondary-no-accent'`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

You can pass any property from the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component to customize it.

```vue

<script setup lang="ts">
const messages = ref([
  {
    id: '6045235a-a435-46b8-989d-2df38ca2eb47',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'Hello, how are you?'
      }
    ]
  },
  {
    id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: 'I am doing well, thank you for asking! How can I assist you today?'
      }
    ]
  },
  {
    id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'What is the current weather in Tokyo?'
      }
    ]
  },
  {
    id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies. The forecast for the rest of the week shows a slight chance of rain on Thursday, with temperatures gradually rising to 28°C by the weekend. Humidity levels are moderate at around 65%, and wind speeds are light at 8 km/h from the southeast. Air quality is good with an index of 42. The UV index is high at 7, so it's recommended to wear sunscreen if you're planning to spend time outdoors. Sunrise was at 5:24 AM and sunset will be at 6:48 PM, giving Tokyo approximately 13 hours and 24 minutes of daylight today. The moon is currently in its waxing gibbous phase."
      }
    ]
  },
  {
    id: 'c3e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'Can you recommend some popular tourist attractions in Kyoto?'
      }
    ]
  },
  {
    id: 'd4f5g8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: 'Kyoto is known for its beautiful temples, traditional tea houses, and gardens. Some popular attractions include Kinkaku-ji (Golden Pavilion) with its stunning gold leaf exterior reflecting in the mirror pond, Fushimi Inari Shrine with its thousands of vermilion torii gates winding up the mountainside, Arashiyama Bamboo Grove where towering stalks create an otherworldly atmosphere, Kiyomizu-dera Temple perched on a hillside offering panoramic views of the city, and the historic Gion district where you might spot geisha hurrying to evening appointments through narrow stone-paved streets lined with traditional wooden machiya houses.'
      }
    ]
  }
])
</script>

<template>
  <B24ChatMessages :auto-scroll="{color:'air-secondary-no-accent'}" :should-scroll-to-bottom="false" :messages="messages" />
</template>

```

### Auto Scroll Icon

Use the `auto-scroll-icon` prop to customize the auto scroll button [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
const messages = ref([
  {
    id: '6045235a-a435-46b8-989d-2df38ca2eb47',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'Hello, how are you?'
      }
    ]
  },
  {
    id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: 'I am doing well, thank you for asking! How can I assist you today?'
      }
    ]
  },
  {
    id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'What is the current weather in Tokyo?'
      }
    ]
  },
  {
    id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies. The forecast for the rest of the week shows a slight chance of rain on Thursday, with temperatures gradually rising to 28°C by the weekend. Humidity levels are moderate at around 65%, and wind speeds are light at 8 km/h from the southeast. Air quality is good with an index of 42. The UV index is high at 7, so it's recommended to wear sunscreen if you're planning to spend time outdoors. Sunrise was at 5:24 AM and sunset will be at 6:48 PM, giving Tokyo approximately 13 hours and 24 minutes of daylight today. The moon is currently in its waxing gibbous phase."
      }
    ]
  },
  {
    id: 'c3e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'user',
    parts: [
      {
        type: 'text',
        text: 'Can you recommend some popular tourist attractions in Kyoto?'
      }
    ]
  },
  {
    id: 'd4f5g8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'assistant',
    parts: [
      {
        type: 'text',
        text: 'Kyoto is known for its beautiful temples, traditional tea houses, and gardens. Some popular attractions include Kinkaku-ji (Golden Pavilion) with its stunning gold leaf exterior reflecting in the mirror pond, Fushimi Inari Shrine with its thousands of vermilion torii gates winding up the mountainside, Arashiyama Bamboo Grove where towering stalks create an otherworldly atmosphere, Kiyomizu-dera Temple perched on a hillside offering panoramic views of the city, and the historic Gion district where you might spot geisha hurrying to evening appointments through narrow stone-paved streets lined with traditional wooden machiya houses.'
      }
    ]
  }
])
</script>

<template>
  <B24ChatMessages auto-scroll-icon="RocketIcon" :should-scroll-to-bottom="false" :messages="messages" />
</template>

```

### Should Auto Scroll

Use the `should-auto-scroll` prop to enable/disable continuous auto scroll while messages are streaming. Defaults to `false`.

```vue
<template>
  <B24ChatMessages :messages="messages" should-auto-scroll />
</template>
```

### Should Scroll To Bottom

Use the `should-scroll-to-bottom` prop to enable/disable bottom auto scroll when the component is mounted. Defaults to `true`.

```vue
<template>
  <B24ChatMessages :messages="messages" :should-scroll-to-bottom="false" />
</template>
```

## Examples

> [!NOTE](https://ai-sdk.dev/docs/getting-started/nuxt)
> These chat components are designed to be used with the **AI SDK v5** from **Vercel AI SDK**.

### Within a page

Use the ChatMessages component with the `Chat` class from AI SDK v5 to display a list of chat messages within a page.

Pass the `messages` prop alongside the `status` prop that will be used for the auto scroll and the indicator display.

```vue [pages/[id\\].vue] {2,7-11,24,28}
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import { getTextFromMessage } from '@bitrix24/b24ui-nuxt/utils/ai'

const input = ref('')

const chat = new Chat({
  onError(error) {
    console.error(error)
  }
})

function onSubmit() {
  chat.sendMessage({ text: input.value })

  input.value = ''
}
</script>

<template>
  <B24Card>
    <B24Container>
      <B24ChatMessages :messages="chat.messages" :status="chat.status">
        <template #content="{ message }">
          <MDC :value="getTextFromMessage(message)" :cache-key="message.id" class="*:first:mt-0 *:last:mb-0" />
        </template>
      </B24ChatMessages>
    </B24Container>
    <template #footer>
      <B24Container class="pb-4 sm:pb-6">
        <B24ChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
          <B24ChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24Card>
</template>
```

> !NOTE
> In this example, we use the `MDC` component from [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc){rel="nofollow"} to render the content of the message. The `getTextFromMessage` utility extracts the text content from the AI SDK V5 message parts. As Bitrix24 UI provides pre-styled prose components, your content will be automatically styled.

### With indicator slot

You can customize the loading indicator that appears when the status is `submitted`.

```vue [ChatMessagesIndicatorSlotExample.vue]
<template>
  <B24ChatMessages
    :messages="[
      {
        id: '1',
        role: 'user',
        parts: [{ type: 'text', text: 'Hello! Can you help me with something?' }]
      }
    ]"
    status="submitted"
    :should-scroll-to-bottom="false"
    :user="{
      avatar: { src: '/b24ui/avatar/employee.png' },
      variant: 'message',
      side: 'right'
    }"
  >
    <template #indicator>
      <B24Button
        class="px-0"
        color="air-secondary-no-accent"
        loading
        label="Thinking..."
      />
    </template>
  </B24ChatMessages>
</template>
```

## API

### Props

```ts
/**
 * Props for the ChatMessages component
 */
interface ChatMessagesProps {
  messages?: UIMessage<unknown, UIDataTypes, UITools>[] | undefined;
  status?: ChatStatus | undefined;
  /**
   * Whether to automatically scroll to the bottom when a message is streaming.
   * @default "false"
   */
  shouldAutoScroll?: boolean | undefined;
  /**
   * Whether to scroll to the bottom on mounted.
   * @default "true"
   */
  shouldScrollToBottom?: boolean | undefined;
  /**
   * Display an auto scroll button.
   * `{ size: 'md', color: 'air-secondary-no-accent' }`{lang="ts-type"}
   * @default "true"
   */
  autoScroll?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the auto scroll button.
   */
  autoScrollIcon?: IconComponent | undefined;
  /**
   * The `user` messages props.
   * `{ side: 'right', variant: 'message' }`{lang="ts-type"}
   */
  user?: Pick<ChatMessageProps, "b24ui" | "icon" | "avatar" | "variant" | "side" | "actions"> | undefined;
  /**
   * The `assistant` messages props.
   * `{ side: 'left', variant: 'message' }`{lang="ts-type"}
   */
  assistant?: Pick<ChatMessageProps, "b24ui" | "icon" | "avatar" | "variant" | "side" | "actions"> | undefined;
  /**
   * Render the messages in a compact style.
   * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
   */
  compact?: boolean | undefined;
  /**
   * The spacing offset for the last message in px. Can be useful when the prompt is sticky for example.
   * @default "0"
   */
  spacingOffset?: number | undefined;
  b24ui?: { root?: ClassNameValue; indicator?: ClassNameValue; viewport?: ClassNameValue; autoScroll?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ChatMessages component
 */
interface ChatMessagesSlots {
  leading(): any;
  content(): any;
  actions(): any;
  default(): any;
  indicator(): any;
  viewport(): any;
}
```

> !TIP
> You can use all the slots of the [`ChatMessage`](https://bitrix24.github.io/b24ui/raw/docs/components/chat-message.md#slots) component inside ChatMessages, they are automatically forwarded allowing you to customize individual messages when using the `messages` prop.
>
> ```vue {7-9}
> <script setup lang="ts">
> import { getTextFromMessage } from '@bitrix24/b24ui-nuxt/utils/ai'
> </script>
>
> <template>
>   <B24ChatMessages :messages="messages" :status="status">
>     <template #content="{ message }">
>       <MDC :value="getTextFromMessage(message)" :cache-key="message.id" class="*:first:mt-0 *:last:mb-0" />
>     </template>
>   </B24ChatMessages>
> </template>
> ```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    chatMessages: {
      slots: {
        root: 'w-full flex flex-col gap-1 flex-1 px-2.5 [&>article]:last-of-type:min-h-(--last-message-height)',
        indicator: 'h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-base-7) [&>*:nth-child(1)]:animate-[bounce_1s_infinite] [&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]',
        viewport: 'absolute inset-x-0 top-[86%] data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
        autoScroll: 'rounded-full absolute right-1/2 translate-x-1/2 bottom-0'
      },
      variants: {
        compact: {
          true: '',
          false: ''
        }
      }
    }
  }
})
```

---

# ChatPalette

> A chat interface component designed to be displayed in a modal overlay.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage :badge{label="2.2+"}

The ChatPalette component is a structured layout wrapper that organizes [ChatMessages](https://bitrix24.github.io/b24ui/raw/docs/components/chat-messages.md) in a scrollable content area and [ChatPrompt](https://bitrix24.github.io/b24ui/raw/docs/components/chat-prompt.md) in a fixed bottom section, creating cohesive chatbot interfaces for modals, slideovers.

```vue {2,8}
<template>
  <B24ChatPalette>
    <B24ChatMessages />

    <template #prompt>
      <B24ChatPrompt />
    </template>
  </B24ChatPalette>
</template>
```

## Examples

> [!NOTE](https://ai-sdk.dev/docs/getting-started/nuxt)
> These chat components are designed to be used with the **AI SDK v5** from **Vercel AI SDK**.

### Within a Modal

You can use the ChatPalette component inside a [Modal](https://bitrix24.github.io/b24ui/raw/docs/components/modal.md)'s content.

```vue [ChatPaletteModalExample.vue]
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import type { UIMessage } from 'ai'
import { getTextFromMessage } from '@bitrix24/b24ui-nuxt/utils/ai'
import RobotIcon from '@bitrix24/b24icons-vue/outline/RobotIcon'
import SearchIcon from '@bitrix24/b24icons-vue/outline/SearchIcon'

const messages: UIMessage[] = []
const input = ref('')

const chat = new Chat({
  messages
})

function onSubmit() {
  chat.sendMessage({ text: input.value })

  input.value = ''
}
</script>

<template>
  <B24Modal open :b24ui="{ content: 'p-0 pt-0 sm:max-w-[786px] sm:h-[448px]' }">
    <template #content>
      <B24ChatPalette>
        <B24ChatMessages
          :messages="chat.messages"
          :status="chat.status"
          :user="{ side: 'left', variant: 'message', avatar: { src: '/b24ui/avatar/employee.png' } }"
          :assistant="{ icon: RobotIcon }"
        >
          <template #content="{ message }">
            <MDC
              :value="getTextFromMessage(message)"
              :cache-key="message.id"
              class="[&_.my-5]:my-2.5 *:first:!mt-0 *:last:!mb-0 [&_.leading-7]:!leading-6"
            />
          </template>
        </B24ChatMessages>

        <template #prompt>
          <B24ChatPrompt
            v-model="input"
            variant="plain"
            :icon="SearchIcon"
            :error="chat.error"
            @submit="onSubmit"
          >
            <B24ChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
          </B24ChatPrompt>
        </template>
      </B24ChatPalette>
    </template>
  </B24Modal>
</template>
```

### Within ContentSearch

You can use the ChatPalette component conditionally inside [ContentSearch](https://bitrix24.github.io/b24ui/raw/docs/components/content-search.md)'s content to display a chatbot interface when a user selects an item.

```vue [ChatPaletteContentSearchExample.vue]
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import type { UIMessage } from 'ai'
import { getTextFromMessage } from '@bitrix24/b24ui-nuxt/utils/ai'
import RobotIcon from '@bitrix24/b24icons-vue/outline/RobotIcon'
import SearchIcon from '@bitrix24/b24icons-vue/outline/SearchIcon'

const messages: UIMessage[] = []
const input = ref('')

const groups = computed(() => [{
  id: 'ai',
  ignoreFilter: true,
  items: [{
    label: searchTerm.value ? `Ask AI for “${searchTerm.value}”` : 'Ask AI',
    icon: RobotIcon,
    onSelect: (e: any) => {
      e.preventDefault()

      ai.value = true

      if (searchTerm.value) {
        messages.push({
          id: '1',
          role: 'user',
          parts: [{ type: 'text', text: searchTerm.value }]
        })

        chat.regenerate()
      }
    }
  }]
}])

const ai = ref(false)
const searchTerm = ref('')

const chat = new Chat({
  messages
})

function onSubmit() {
  chat.sendMessage({ text: input.value })

  input.value = ''
}

function onClose(e: Event) {
  e.preventDefault()

  ai.value = false
}
</script>

<template>
  <B24ContentSearch v-model:search-term="searchTerm" open :groups="groups">
    <template v-if="ai" #content>
      <B24ChatPalette>
        <B24ChatMessages
          :messages="chat.messages"
          :status="chat.status"
          :user="{ side: 'left', variant: 'message', avatar: { src: '/b24ui/avatar/employee.png' } }"
          :assistant="{ icon: RobotIcon }"
        >
          <template #content="{ message }">
            <MDC
              :value="getTextFromMessage(message)"
              :cache-key="message.id"
              class="[&_.my-5]:my-2.5 *:first:!mt-0 *:last:!mb-0 [&_.leading-7]:!leading-6"
            />
          </template>
        </B24ChatMessages>

        <template #prompt>
          <B24ChatPrompt
            v-model="input"
            variant="plain"
            :icon="SearchIcon"
            :error="chat.error"
            @submit="onSubmit"
            @close="onClose"
          >
            <B24ChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
          </B24ChatPrompt>
        </template>
      </B24ChatPalette>
    </template>
  </B24ContentSearch>
</template>
```

## API

### Props

```ts
/**
 * Props for the ChatPalette component
 */
interface ChatPaletteProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  b24ui?: { root?: ClassNameValue; prompt?: ClassNameValue; close?: ClassNameValue; content?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ChatPalette component
 */
interface ChatPaletteSlots {
  default(): any;
  prompt(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    chatPalette: {
      slots: {
        root: 'relative flex-1 flex flex-col min-h-0 min-w-0',
        prompt: 'px-0 rounded-t-none border-t border-(--ui-color-divider-default)',
        close: '',
        content: 'overflow-y-auto flex-1 flex flex-col py-3'
      }
    }
  }
})
```

---

# ChatPrompt

> An enhanced Textarea component optimized for prompt submission in AI chat interfaces.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage :badge{label="2.2+"}

The ChatPrompt component renders a `<form>` element and extends the [Textarea](https://bitrix24.github.io/b24ui/raw/docs/components/textarea.md) component so you can pass any property such as `icon`, `placeholder`, `autofocus`, etc.

::code-preview
  :::b24-chat-prompt
  ---
  variant: outline
  ---
    ::::b24-chat-prompt-submit{.rounded-full color="air-primary"}
    ::::
  
  #footer
    ::::b24-select
    ---
    items:
      - label: Gemini 2.5 Pro
        value: gemini-2.5-pro
      - label: GPT-4o
        value: gpt-4o
      - label: DeepSeek
        value: deepseek
      - label: Claude 3.5 Sonnet
        value: claude-3.5-sonnet
      - label: Llama 4
        value: llama-4
    modelValue: deepseek
    placeholder: Select a model
    size: sm
    ---
    ::::
  :::
::

> !NOTE
> The ChatPrompt handles the following events:
>
> - The form is submitted when the user presses `` or when the user clicks on the submit button.
> - The textarea is blurred when `` is pressed and emits a `close` event.

### Variant

Use the `variant` prop to change the style of the prompt. Defaults to `outline`.

```vue

<template>
  <B24ChatPrompt variant="filled" />
</template>

```

## Examples

> [!NOTE](https://ai-sdk.dev/docs/getting-started/nuxt)
> These chat components are designed to be used with the **AI SDK v5** from **Vercel AI SDK**.

### Within a page

Use the ChatPrompt component with the `Chat` class from AI SDK v5 to display a chat prompt within a page.

Pass the `input` prop alongside the `error` prop to disable the textarea when an error occurs.

```vue [pages/[id\\].vue] {2,5,13-17,32,34}
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import { getTextFromMessage } from '@bitrix24/b24ui-nux/utils/ai'

const input = ref('')

const chat = new Chat({
  onError(error) {
    console.error(error)
  }
})

function onSubmit() {
  chat.sendMessage({ text: input.value })

  input.value = ''
}
</script>

<template>
  <B24Card>
    <B24Container>
      <B24ChatMessages :messages="chat.messages" :status="chat.status">
        <template #content="{ message }">
          <MDC :value="getTextFromMessage(message)" :cache-key="message.id" class="*:first:mt-0 *:last:mb-0" />
        </template>
      </B24ChatMessages>
    </B24Container>

    <template #footer>
      <B24Container class="pb-4 sm:pb-6">
        <B24ChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
          <B24ChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24Card>
</template>
```

You can also use it as a starting point for a chat interface.

```vue [pages/index.vue] {2,4,8-15,23,25}
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'

const input = ref('')

const chat = new Chat()

async function onSubmit() {
  chat.sendMessage({ text: input.value })

  // Navigate to chat page after first message
  if (chat.messages.length === 1) {
    await navigateTo('/chat')
  }
}
</script>

<template>
  <B24Card>
    <B24Container>
      <h1>How can I help you today?</h1>

      <B24ChatPrompt v-model="input" @submit="onSubmit">
        <B24ChatPromptSubmit :status="chat.status" />
      </B24ChatPrompt>
    </B24Container>
  </B24Card>
</template>
```

## API

### Props

```ts
/**
 * Props for the ChatPrompt component
 */
interface ChatPromptProps {
  /**
   * The element or component this component should render as.
   * @default "\"form\""
   */
  as?: any;
  /**
   * The placeholder text for the textarea.
   */
  placeholder?: string | undefined;
  variant?: "outline" | "tinted" | "filled" | "plain" | undefined;
  error?: Error | undefined;
  b24ui?: ({ root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; base?: ClassNameValue; } & { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; }) | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * @default "true"
   */
  autofocus?: boolean | undefined;
  disabled?: boolean | undefined;
  /**
   * @default "1"
   */
  rows?: number | undefined;
  autofocusDelay?: number | undefined;
  /**
   * @default "true"
   */
  autoresize?: boolean | undefined;
  autoresizeDelay?: number | undefined;
  maxrows?: number | undefined;
  /**
   * @default "\"\""
   */
  modelValue?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)
> This component also supports all native `<textarea>` HTML attributes.

### Slots

```ts
/**
 * Slots for the ChatPrompt component
 */
interface ChatPromptSlots {
  header(): any;
  footer(): any;
  leading(): any;
  default(): any;
  trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the ChatPrompt component
 */
interface ChatPromptEmits {
  close: (payload: [event: Event]) => void;
  submit: (payload: [event: Event]) => void;
  update:modelValue: (payload: [value: string]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                          | Type                                                                                                                                                              |
| --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `textareaRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLTextAreaElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    chatPrompt: {
      slots: {
        root: 'relative flex flex-col items-stretch gap-[2px] ps-[12px] pe-[8px] py-[8px] w-full rounded-lg',
        header: 'flex items-center gap-[8px]',
        body: 'py-[4px] items-start',
        footer: 'flex items-center justify-end gap-[8px]',
        base: 'pt-[1px] pb-[0px] text-(length:--ui-font-size-lg)/(--ui-font-line-height-2xs)'
      },
      variants: {
        variant: {
          outline: {
            root: 'bg-(--ui-color-design-outline-bg) ring ring-(--ui-color-design-outline-stroke) ring-1 text-(--ui-color-design-outline-content)'
          },
          tinted: {
            root: 'bg-(--ui-color-design-tinted-na-bg) ring ring-(--ui-color-design-tinted-na-stroke) ring-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)'
          },
          filled: {
            root: 'bg-(--ui-color-design-filled-na-bg) ring ring-(--ui-color-design-filled-na-stroke) ring-(length:--ui-design-filled-na-stroke-weight) text-(--ui-color-design-filled-na-content)'
          },
          plain: {
            root: 'bg-(--ui-color-design-plain-bg) ring ring-(--ui-color-design-plain-stroke) ring-(length:--ui-design-plain-stroke-weight) text-(--ui-color-design-plain-content)'
          }
        }
      },
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})
```

---

# ChatPromptSubmit

> A chat prompt submission button with automatic status handling.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage :badge{label="2.2+"}

The ChatPromptSubmit component is used inside the [ChatPrompt](https://bitrix24.github.io/b24ui/raw/docs/components/chat-prompt.md) component to submit the prompt. It automatically handles the different `status` values to control the chat.

It extends the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component, so you can pass any property such as `color`, `size`, etc.

::code-preview
  :::b24-chat-prompt-submit
  :::

#code
```vue
<template>
  <B24ChatPrompt>
    <B24ChatPromptSubmit />
  </B24ChatPrompt>
</template>
```
::

> !NOTE
> You can also use it inside the `footer` slot of the [`ChatPrompt`](https://bitrix24.github.io/b24ui/raw/docs/components/chat-prompt.md) component.

### Ready

When its status is `ready`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}, use the `color` and `icon` props to customize the Button. Defaults to:

- `color="primary"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `icon="ArrowTopLIcon"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<template>
  <B24ChatPromptSubmit color="air-primary" />
</template>

```

### Submitted

When its status is `submitted`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}, use the `submitted-color` and `submitted-icon` props to customize the Button. Defaults to:

- `submittedColor="air-secondary-no-accent"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `submittedIcon="StopLIcon"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

> !NOTE
> The `stop` event is emitted when the user clicks on the Button.

```vue

<template>
  <B24ChatPromptSubmit submitted-color="air-secondary-no-accent" status="submitted" />
</template>

```

### Streaming

When its status is `streaming`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}, use the `streaming-color` and `streaming-icon` props to customize the Button. Defaults to:

- `streamingColor="air-secondary-accent-2"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `streamingIcon="StopLIcon"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

> !NOTE
> The `stop` event is emitted when the user clicks on the Button.

```vue

<template>
  <B24ChatPromptSubmit streaming-color="air-secondary-accent-2" status="streaming" />
</template>

```

### Error

When its status is `error`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}, use the `error-color` and `error-icon` props to customize the Button. Defaults to:

- `errorColor="air-primary-alert"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `errorIcon="RefreshIcon"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

> !NOTE
> The `reload` event is emitted when the user clicks on the Button.

```vue

<template>
  <B24ChatPromptSubmit error-color="air-primary-alert" status="error" />
</template>

```

## Examples

> [!NOTE](https://ai-sdk.dev/docs/getting-started/nuxt)
> These chat components are designed to be used with the **AI SDK v5** from **Vercel AI SDK**.

### Within a page

Use the ChatPromptSubmit component with the `Chat` class from AI SDK v5 to display a chat prompt within a page.

Pass the `status` prop and listen to the `stop` and `reload` events to control the chat.

```vue [pages/[id\\].vue] {2,7-11,33}
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import { getTextFromMessage } from '@bitrix24/b24ui-nux/utils/ai'

const input = ref('')

const chat = new Chat({
  onError(error) {
    console.error(error)
  }
})

function onSubmit() {
  chat.sendMessage({ text: input.value })

  input.value = ''
}
</script>

<template>
  <B24Card>
    <B24Container>
      <B24ChatMessages :messages="chat.messages" :status="chat.status">
        <template #content="{ message }">
          <MDC :value="getTextFromMessage(message)" :cache-key="message.id" class="*:first:mt-0 *:last:mb-0" />
        </template>
      </B24ChatMessages>
    </B24Container>

    <template #footer>
      <B24Container class="pb-4 sm:pb-6">
        <B24ChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
          <B24ChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24Card>
</template>
```

## API

### Props

```ts
/**
 * Props for the ChatPromptSubmit component
 */
interface ChatPromptSubmitProps {
  /**
   * @default "\"ready\""
   */
  status?: ChatStatus | undefined;
  /**
   * The icon displayed in the button when the status is `ready`.
   */
  icon?: IconComponent | undefined;
  /**
   * The color of the button when the status is `ready`.
   * @default "\"air-primary\""
   */
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link";
  /**
   * The icon displayed in the button when the status is `streaming`.
   */
  streamingIcon?: IconComponent | undefined;
  /**
   * The color of the button when the status is `streaming`.
   * @default "\"air-secondary-accent-2\""
   */
  streamingColor?: "default" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link" | undefined;
  /**
   * The icon displayed in the button when the status is `submitted`.
   */
  submittedIcon?: IconComponent | undefined;
  /**
   * The color of the button when the status is `submitted`.
   * @default "\"air-secondary-no-accent\""
   */
  submittedColor?: "default" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link" | undefined;
  /**
   * The icon displayed in the button when the status is `error`.
   */
  errorIcon?: IconComponent | undefined;
  /**
   * The color of the button when the status is `error`.
   * @default "\"air-primary-alert\""
   */
  errorColor?: "default" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link" | undefined;
  b24ui?: ({ base?: ClassNameValue; } & { base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; }) | undefined;
  /**
   * The type of the button when not a link.
   */
  type?: "reset" | "submit" | "button" | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * Route Location the link should navigate to when clicked on.
   */
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  /**
   * The class to apply when the link is active
   */
  activeClass?: string | undefined;
  /**
   * Class to apply when the link is exact active
   */
  exactActiveClass?: string | undefined;
  /**
   * Value passed to the attribute `aria-current` when the link is exact active.
   */
  ariaCurrentValue?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
  /**
   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
   */
  viewTransition?: boolean | undefined;
  /**
   * Calls `router.replace` instead of `router.push`.
   */
  replace?: boolean | undefined;
  autofocus?: Booleanish | undefined;
  disabled?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  name?: string | undefined;
  download?: any;
  /**
   * An alias for `to`. If used with `to`, `href` will be ignored
   */
  href?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  hreflang?: string | undefined;
  media?: string | undefined;
  ping?: string | undefined;
  /**
   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
   */
  rel?: "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | (string & {}) | null | undefined;
  /**
   * Where to display the linked URL, as the name for a browsing context.
   */
  target?: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  onClick?: ((event: MouseEvent) => void | Promise<void>) | ((event: MouseEvent) => void | Promise<void>)[] | undefined;
  /**
   * The element or component this component should render as when not a link.
   */
  as?: any;
  /**
   * Force the link to be active independent of the current route.
   */
  active?: boolean | undefined;
  /**
   * Will only be active if the current route is an exact match.
   */
  exact?: boolean | undefined;
  /**
   * Allows controlling how the current route query sets the link as active.
   */
  exactQuery?: boolean | "partial" | undefined;
  /**
   * Will only be active if the current route hash is an exact match.
   */
  exactHash?: boolean | undefined;
  /**
   * The class to apply when the link is inactive
   */
  inactiveClass?: string | undefined;
  /**
   * When `true`, uses special underlined styling.
   */
  isAction?: boolean | undefined;
  /**
   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
   */
  external?: boolean | undefined;
  /**
   * If set to true, no rel attribute will be added to the link
   */
  noRel?: boolean | undefined;
  /**
   * A class to apply to links that have been prefetched.
   */
  prefetchedClass?: string | undefined;
  /**
   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
   */
  prefetch?: boolean | undefined;
  /**
   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
   */
  prefetchOn?: "visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }> | undefined;
  /**
   * Escape hatch to disable `prefetch` attribute.
   */
  noPrefetch?: boolean | undefined;
  /**
   * An option to either add or remove trailing slashes in the `href` for this specific link.
   * Overrides the global `trailingSlash` option if provided.
   */
  trailingSlash?: "append" | "remove" | undefined;
  label?: string | undefined;
  activeColor?: "default" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link" | undefined;
  size?: "md" | "xs" | "sm" | "lg" | "xl" | "xss" | undefined;
  /**
   * Rounds the corners of the button
   */
  rounded?: boolean | undefined;
  /**
   * Render the button full width
   */
  block?: boolean | undefined;
  /**
   * Set loading state automatically based on the `@click` promise state
   */
  loadingAuto?: boolean | undefined;
  /**
   * Disable uppercase label
   */
  normalCase?: boolean | undefined;
  /**
   * Shows LoaderWaitIcon in loading mode
   */
  useWait?: boolean | undefined;
  /**
   * Shows LoaderClockIcon icon in loading mode
   */
  useClock?: boolean | undefined;
  /**
   * Shows icons.ChevronDownSIcon on the right side
   */
  useDropdown?: boolean | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

### Slots

```ts
/**
 * Slots for the ChatPromptSubmit component
 */
interface ChatPromptSubmitSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the ChatPromptSubmit component
 */
interface ChatPromptSubmitEmits {
  stop: (payload: [event: MouseEvent]) => void;
  reload: (payload: [event: MouseEvent]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    chatPromptSubmit: {
      slots: {
        base: 'rounded-full'
      }
    }
  }
})
```

---

# Checkbox

> A toggle input for marking as checked or unchecked.

## Usage

Use the `v-model` directive to control the checked state of the Checkbox.

```vue

<script setup lang="ts">
const value = ref(true)
</script>

<template>
  <B24Checkbox v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<template>
  <B24Checkbox default-value />
</template>

```

### Indeterminate

Use the `indeterminate` value in the `v-model` directive or `default-value` prop to set the Checkbox to an [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes){rel="nofollow"}.

```vue

<template>
  <B24Checkbox default-value="indeterminate" />
</template>

```

### Label

Use the `label` prop to set the label of the Checkbox.

```vue

<template>
  <B24Checkbox label="All employees can post to Feed" />
</template>

```

When using the `required` prop, an asterisk is added next to the label.

```vue

<template>
  <B24Checkbox required label="All employees can post to Feed" />
</template>

```

### Description

Use the `description` prop to set the description of the Checkbox.

```vue

<template>
  <B24Checkbox label="All employees can post to Feed" description="Broadcast posting is allowed in Feed. These posts will be visible to everyone." />
</template>

```

### Color

Use the `color` prop to change the color of the Checkbox.

```vue

<template>
  <B24Checkbox color="air-primary-copilot" default-value label="Enable rich link previews" />
</template>

```

### Variant

Use the `variant` prop to change the variant of the Checkbox.

```vue

<template>
  <B24Checkbox variant="card" color="air-primary-copilot" default-value label="All employees can post to Feed" description="Broadcast posting is allowed in Feed. These posts will be visible to everyone." />
</template>

```

### Size

Use the `size` prop to change the size of the Checkbox.

```vue

<template>
  <B24Checkbox size="lg" variant="list" default-value label="All employees can post to Feed" description="Broadcast posting is allowed in Feed. These posts will be visible to everyone." />
</template>

```

### Indicator

Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.

```vue

<template>
  <B24Checkbox indicator="end" variant="card" default-value label="All employees can post to Feed" />
</template>

```

### Disabled

Use the `disabled` prop to disable the Checkbox.

```vue

<template>
  <B24Checkbox disabled label="All employees can post to Feed" description="Broadcast posting is allowed in Feed. These posts will be visible to everyone." variant="list" />
</template>

```

## API

### Props

```ts
/**
 * Props for the Checkbox component
 */
interface CheckboxProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  label?: string | undefined;
  description?: string | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  variant?: "card" | "list" | undefined;
  size?: "md" | "xs" | "sm" | "lg" | undefined;
  /**
   * Position of the indicator.
   */
  indicator?: "start" | "end" | "hidden" | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; container?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; } | undefined;
  /**
   * When `true`, prevents the user from interacting with the checkbox
   */
  disabled?: boolean | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  /**
   * Id of the element
   */
  id?: string | undefined;
  /**
   * The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
   */
  defaultValue?: boolean | "indeterminate" | undefined;
  /**
   * The value given as data when submitted with a `name`.
   */
  value?: AcceptableValue | undefined;
  autofocus?: Booleanish | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  /**
   * @default "undefined"
   */
  modelValue?: boolean | "indeterminate" | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

### Slots

```ts
/**
 * Slots for the Checkbox component
 */
interface CheckboxSlots {
  label(): any;
  description(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Checkbox component
 */
interface CheckboxEmits {
  change: (payload: [event: Event]) => void;
  update:modelValue: (payload: [value: boolean | "indeterminate"]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    checkbox: {
      slots: {
        root: 'relative flex items-start',
        base: 'cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-(--b24ui-typography-label-color) ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2',
        indicator: 'rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)',
        container: 'flex items-center',
        icon: 'shrink-0 size-full',
        wrapper: 'w-full font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular)',
        label: 'cursor-pointer block text-(--b24ui-typography-label-color)',
        description: 'mt-[4px] text-(--b24ui-typography-description-color)'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        variant: {
          list: {
            root: ''
          },
          card: {
            root: 'border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg)'
          }
        },
        indicator: {
          start: {
            root: 'flex-row',
            wrapper: 'ms-2'
          },
          end: {
            root: 'flex-row-reverse',
            wrapper: 'me-2'
          },
          hidden: {
            base: 'sr-only',
            wrapper: 'text-center'
          }
        },
        size: {
          xs: {
            base: 'size-[12px]',
            container: 'h-[12px]',
            wrapper: 'text-(length:--ui-font-size-xs) leading-[11px]',
            label: ''
          },
          sm: {
            base: 'size-[14px]',
            container: 'h-[14px]',
            wrapper: 'text-(length:--ui-font-size-sm) leading-[14px]',
            label: ''
          },
          md: {
            base: 'size-[16px]',
            container: 'h-[16px]',
            wrapper: 'text-(length:--ui-font-size-lg) leading-[16px]',
            label: ''
          },
          lg: {
            base: 'size-[20px]',
            container: 'h-[20px]',
            wrapper: 'text-(length:--ui-font-size-xl) leading-[18px]',
            label: ''
          }
        },
        required: {
          true: {
            label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
          }
        },
        disabled: {
          true: {
            root: 'opacity-30',
            base: 'cursor-not-allowed',
            label: 'cursor-not-allowed',
            description: 'cursor-not-allowed'
          }
        },
        checked: {
          true: ''
        }
      },
      compoundVariants: [
        {
          size: 'xs',
          variant: 'card',
          class: {
            root: 'px-[13px] py-[7px] rounded-(--ui-border-radius-xs)'
          }
        },
        {
          size: 'sm',
          variant: 'card',
          class: {
            root: 'px-[13px] py-[9px] rounded-(--ui-border-radius-sm)'
          }
        },
        {
          size: 'md',
          variant: 'card',
          class: {
            root: 'px-[17px] py-[10px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          size: 'lg',
          variant: 'card',
          class: {
            root: 'px-[23px] py-[12px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          variant: 'card',
          checked: true,
          class: {
            root: 'border-(--b24ui-border-color) cursor-pointer'
          }
        },
        {
          variant: 'card',
          disabled: true,
          class: {
            root: 'cursor-not-allowed'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md',
        variant: 'list',
        indicator: 'start'
      }
    }
  }
})
```

---

# CheckboxGroup

> Multi-select checklist using button controls.

## Usage

Use the `v-model` directive to control the value of the CheckboxGroup or the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
const value = ref([
  'System'
])
</script>

<template>
  <B24CheckboxGroup v-model="value" :items="items" />
</template>

```

### Items

Use the `items` prop as an array of strings or numbers:

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
const value = ref([
  'System'
])
</script>

<template>
  <B24CheckboxGroup v-model="value" :items="items" />
</template>

```

You can also pass an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `description?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`value?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#value-key)
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
import type { CheckboxGroupItem } from '@bitrix24/b24ui-nuxt'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'This is the first option.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'This is the second option.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'This is the third option.',
    value: 'dark'
  }
])
const value = ref([
  'system'
])
</script>

<template>
  <B24CheckboxGroup v-model="value" :items="items" />
</template>

```

> !CAUTION
> When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.

### Value Key

You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.

```vue

<script setup lang="ts">
import type { CheckboxGroupItem } from '@bitrix24/b24ui-nuxt'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'This is the first option.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'This is the second option.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'This is the third option.',
    id: 'dark'
  }
])
const value = ref([
  'light'
])
</script>

<template>
  <B24CheckboxGroup v-model="value" value-key="id" :items="items" />
</template>

```

### Legend

Use the `legend` prop to set the legend of the CheckboxGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24CheckboxGroup legend="Theme" :default-value="{'0':'System'}" :items="items" />
</template>

```

### Color

Use the `color` prop to change the color of the CheckboxGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24CheckboxGroup color="air-primary-copilot" :default-value="{'0':'System'}" :items="items" />
</template>

```

### Variant

Use the `variant` prop to change the variant of the CheckboxGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24CheckboxGroup color="air-primary-copilot" variant="card" :default-value="{'0':'System'}" :items="items" />
</template>

```

### Size

Use the `size` prop to change the size of the CheckboxGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24CheckboxGroup size="lg" variant="list" :default-value="{'0':'System'}" :items="items" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the CheckboxGroup. Defaults to `vertical`.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24CheckboxGroup orientation="horizontal" variant="list" :default-value="{'0':'System'}" :items="items" />
</template>

```

### Indicator

Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24CheckboxGroup indicator="end" variant="card" :default-value="{'0':'System'}" :items="items" />
</template>

```

### Disabled

Use the `disabled` prop to disable the CheckboxGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24CheckboxGroup disabled variant="list" :default-value="{'0':'System'}" :items="items" />
</template>

```

## API

### Props

```ts
/**
 * Props for the CheckboxGroup component
 */
interface CheckboxGroupProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  legend?: string | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the value.
   * @default "\"value\" as never"
   */
  valueKey?: GetItemKeys<CheckboxGroupItem[]> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the label.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<CheckboxGroupItem[]> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the description.
   * @default "\"description\""
   */
  descriptionKey?: GetItemKeys<CheckboxGroupItem[]> | undefined;
  items?: CheckboxGroupItem[] | undefined;
  /**
   * The controlled value of the CheckboxGroup. Can be bind as `v-model`.
   */
  modelValue?: any[] | undefined;
  /**
   * The value of the CheckboxGroup when initially rendered. Use when you do not need to control the state of the CheckboxGroup.
   */
  defaultValue?: any[] | undefined;
  size?: "xs" | "sm" | "md" | "lg" | undefined;
  variant?: "card" | "list" | "table" | undefined;
  /**
   * The orientation the checkbox buttons are laid out.
   * @default "\"vertical\""
   */
  orientation?: Orientation$1 | undefined;
  b24ui?: ({ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; } & { root?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; container?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }) | undefined;
  /**
   * When `true`, prevents the user from interacting with the checkboxes
   */
  disabled?: boolean | undefined;
  /**
   * Whether keyboard navigation should loop around
   */
  loop?: boolean | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  /**
   * @default "\"air-primary\""
   */
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  /**
   * Position of the indicator.
   */
  indicator?: "start" | "end" | "hidden" | undefined;
}
```

### Slots

```ts
/**
 * Slots for the CheckboxGroup component
 */
interface CheckboxGroupSlots {
  legend(): any;
  label(): any;
  description(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the CheckboxGroup component
 */
interface CheckboxGroupEmits {
  update:modelValue: (payload: [value: CheckboxGroupItem[]]) => void;
  change: (payload: [event: Event]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    checkboxGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex gap-x-2',
        legend: 'mb-1.5 block text-(--b24ui-typography-label-color)',
        item: ''
      },
      variants: {
        orientation: {
          horizontal: {
            fieldset: 'flex-row'
          },
          vertical: {
            fieldset: 'flex-col'
          }
        },
        color: {
          'air-primary': {
            item: 'style-filled'
          },
          'air-primary-success': {
            item: 'style-filled-success'
          },
          'air-primary-alert': {
            item: 'style-filled-alert'
          },
          'air-primary-copilot': {
            item: 'style-filled-copilot'
          },
          'air-primary-warning': {
            item: 'style-filled-warning'
          },
          default: {
            item: 'style-old-default'
          },
          danger: {
            item: 'style-old-danger'
          },
          success: {
            item: 'style-old-success'
          },
          warning: {
            item: 'style-old-warning'
          },
          primary: {
            item: 'style-old-primary'
          },
          secondary: {
            item: 'style-old-secondary'
          },
          collab: {
            item: 'style-old-collab'
          },
          ai: {
            item: 'style-old-ai'
          }
        },
        variant: {
          list: {},
          card: {
            item: 'cursor-pointer items-start border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:border-(--b24ui-border-color)'
          },
          table: {
            item: 'cursor-pointer border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:bg-(--b24ui-background)/24 has-data-[state=checked]:border-(--b24ui-border-color) has-data-[state=checked]:text-(--b24ui-color) has-data-[state=checked]:z-[1]'
          }
        },
        size: {
          xs: {
            fieldset: 'gap-x-[12px] gap-y-[4px]',
            legend: 'text-(length:--ui-font-size-xs)'
          },
          sm: {
            fieldset: 'gap-x-[14px] gap-y-[6px]',
            legend: 'text-(length:--ui-font-size-xs)'
          },
          md: {
            fieldset: 'gap-x-[16px] gap-y-[8px]',
            legend: 'text-(length:--ui-font-size-sm)'
          },
          lg: {
            fieldset: 'gap-x-[16px] gap-y-[8px]',
            legend: 'text-(length:--ui-font-size-sm)'
          }
        },
        disabled: {
          true: {}
        },
        required: {
          true: {
            label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
          }
        }
      },
      compoundVariants: [
        {
          size: 'xs',
          variant: 'card',
          class: {
            item: 'px-[13px] py-[7px] rounded-(--ui-border-radius-xs)'
          }
        },
        {
          size: 'sm',
          variant: 'card',
          class: {
            item: 'px-[13px] py-[9px] rounded-(--ui-border-radius-sm)'
          }
        },
        {
          size: 'md',
          variant: 'card',
          class: {
            item: 'px-[17px] py-[10px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          size: 'lg',
          variant: 'card',
          class: {
            item: 'px-[23px] py-[12px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          class: {
            item: 'px-[13px] py-[7px]'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          class: {
            item: 'px-[13px] py-[9px]'
          }
        },
        {
          size: 'md',
          variant: 'table',
          class: {
            item: 'px-[17px] py-[10px]'
          }
        },
        {
          size: 'lg',
          variant: 'table',
          class: {
            item: 'px-[23px] py-[12px]'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-xs) last-of-type:rounded-e-(--ui-border-radius-xs)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-xs) last-of-type:rounded-b-(--ui-border-radius-xs)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-sm) last-of-type:rounded-e-(--ui-border-radius-sm)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-sm) last-of-type:rounded-b-(--ui-border-radius-sm)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          size: [
            'lg',
            'md'
          ],
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-md) last-of-type:rounded-e-(--ui-border-radius-md)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: [
            'lg',
            'md'
          ],
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-md) last-of-type:rounded-b-(--ui-border-radius-md)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          variant: 'table',
          disabled: true,
          class: {
            item: 'cursor-not-allowed'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        variant: 'list',
        color: 'air-primary'
      }
    }
  }
})
```

---

# Chip

> An indicator that shows either a number or a state.

## Usage

Wrap any component with a Chip to display an indicator.

```vue

<template>
  <B24Chip>
<B24Button color="air-secondary-no-accent" label="Button" />
</B24Chip>
</template>

```

### Color

Use the `color` prop to change the color of the Chip.

```vue

<template>
  <B24Chip color="air-primary-warning">
<B24Button color="air-secondary-no-accent" label="Button" />
</B24Chip>
</template>

```

### Inverted

Use the `inverted` prop to invert the color of the Chip.

> !WARNING
> Only available for `air-primary*` colors

```vue

<template>
  <B24Chip inverted color="air-primary">
<B24Button color="air-secondary-no-accent" label="Button" />
</B24Chip>
</template>

```

### Size

Use the `size` prop to change the size of the Chip.

```vue

<template>
  <B24Chip size="lg">
<B24Button color="air-secondary-no-accent" label="Button" />
</B24Chip>
</template>

```

### Text

Use the `text` prop to set the text of the Chip.

```vue

<template>
  <B24Chip text="+5" size="lg">
<B24Button color="air-secondary-no-accent" label="Button" />
</B24Chip>
</template>

```

### Hide zero

Use the `hideZero` prop to hide the text if it is equal `0`.

```vue

<template>
  <B24Chip hide-zero :text="1" size="lg">
<B24Button color="air-secondary-no-accent" label="Button" />
</B24Chip>
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Chip :trailing-icon="RocketIcon" text="+1" size="lg" hide-zero>
<B24Button color="air-secondary-no-accent" label="Button" />
</B24Chip>
</template>

```

### Position

Use the `position` prop to change the position of the Chip.

```vue

<template>
  <B24Chip position="bottom-left">
<B24Button color="air-secondary-no-accent" label="Button" />
</B24Chip>
</template>

```

### Inset

Use the `inset` prop to display the Chip inside the component. This is useful when dealing with rounded components.

```vue

<template>
  <B24Chip inset>
<B24Avatar src="/b24ui/avatar/employee.png" />
</B24Chip>
</template>

```

### Standalone

Use the `standalone` prop alongside the `inset` prop to display the Chip inline.

```vue

<template>
  <B24Chip standalone inset />
</template>

```

> !NOTE
> It's used this way in the [`InputMenu`](https://bitrix24.github.io/b24ui/raw/docs/components/input-menu.md), [`Select`](https://bitrix24.github.io/b24ui/raw/docs/components/select.md) or [`SelectMenu`](https://bitrix24.github.io/b24ui/raw/docs/components/select-menu.md) components for example.

## Examples

### Control visibility

You can control the visibility of the Chip using the `show` prop.

```vue [ChipShowExample.vue]
<script setup lang="ts">
const statuses = ['online', 'away', 'busy', 'offline']
const status = ref(statuses[0])

const color = computed(() => status.value ? { online: 'air-primary-success', away: 'air-primary-warning', busy: 'air-primary-alert', offline: 'air-tertiary' }[status.value] as any : 'online')

const show = computed(() => status.value !== 'offline')

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    if (status.value) {
      status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
    }
  }, 1000)
})
</script>

<template>
  <B24Chip :color="color" :show="show" inset>
    <B24Avatar src="/b24ui/avatar/employee.png" />
  </B24Chip>
</template>
```

> !NOTE
> In this example, the Chip has a color per status and is displayed when the status is not `offline`.

## API

### Props

```ts
/**
 * Props for the Chip component
 */
interface ChipProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * Display some text inside the chip.
   */
  text?: string | number | undefined;
  /**
   * The icon displayed on the right side of the chip.
   */
  trailingIcon?: IconComponent | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary";
  /**
   * If set to `true` the color is inverted.
   * Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
   * @default "false"
   */
  inverted?: boolean | undefined;
  size?: "sm" | "md" | "lg" | undefined;
  /**
   * The position of the chip.
   */
  position?: "top-right" | "bottom-right" | "top-left" | "bottom-left" | undefined;
  /**
   * When `true`, keep the chip inside the component for rounded elements
   * @default "false"
   */
  inset?: boolean | undefined;
  /**
   * When `true`, render the chip relatively to the parent.
   * @default "false"
   */
  standalone?: boolean | undefined;
  /**
   * When `true`, hide chip if value='0'
   * @default "false"
   */
  hideZero?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; trailingIcon?: ClassNameValue; } | undefined;
  /**
   * @default "true"
   */
  show?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Chip component
 */
interface ChipSlots {
  default(): any;
  content(): any;
  trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Chip component
 */
interface ChipEmits {
  update:show: (payload: [value: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    chip: {
      slots: {
        root: 'relative shrink-0 isolate inline-flex items-center justify-center',
        base: 'ui-counter__scope --air font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-medium) select-none relative min-w-(--ui-counter-size) h-(--ui-counter-size) py-0 px-(--ui-counter-inline-space) inline-flex items-center justify-center bg-(--b24ui-background) rounded-(--ui-counter-current-size) ring-(length:--b24ui-border-width) ring-(--b24ui-border-color) text-center align-middle text-(length:--ui-counter-font-size) text-(--b24ui-color) leading-(--ui-counter-current-size) overflow-hidden z-1 text-nowrap',
        trailingIcon: 'size-(--ui-counter-size) text-inherit text-(length:--ui-counter-symbol-font-size) opacity-96 tracking-(--ui-letter-spacing-xl) me-(--ui-counter-symbol-compensation) empty:me-[0]'
      },
      variants: {
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          'air-secondary': {
            base: 'style-tinted-no-accent-1'
          },
          'air-secondary-accent': {
            base: 'style-filled-no-accent'
          },
          'air-secondary-accent-1': {
            base: 'style-filled-no-accent-inverted edge-dark:text-(--ui-color-g-content-grey-2)'
          },
          'air-tertiary': {
            base: 'style-outline-no-accent'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        size: {
          sm: 'ui-counter-sm font-(--ui-font-weight-regular)',
          md: 'ui-counter-md',
          lg: 'ui-counter-lg'
        },
        position: {
          'top-right': 'top-0 right-0',
          'bottom-right': 'bottom-0 right-0',
          'top-left': 'top-0 left-0',
          'bottom-left': 'bottom-0 left-0'
        },
        inverted: {
          true: '',
          false: ''
        },
        inset: {
          false: ''
        },
        standalone: {
          true: '',
          false: 'absolute'
        },
        hideZero: {
          true: {
            base: 'data-[value=0]:hidden'
          }
        },
        oneDigit: {
          true: {
            base: 'px-0'
          }
        }
      },
      compoundVariants: [
        {
          position: 'top-right',
          inset: false,
          standalone: false,
          class: '-translate-y-1/2 translate-x-1/2 transform'
        },
        {
          position: 'bottom-right',
          inset: false,
          standalone: false,
          class: 'translate-y-1/2 translate-x-1/2 transform'
        },
        {
          position: 'top-left',
          inset: false,
          standalone: false,
          class: '-translate-y-1/2 -translate-x-1/2 transform'
        },
        {
          position: 'bottom-left',
          inset: false,
          standalone: false,
          class: 'translate-y-1/2 -translate-x-1/2 transform'
        },
        {
          position: 'top-right',
          size: [
            'sm',
            'md',
            'lg'
          ],
          inset: true,
          standalone: false,
          class: '-translate-y-1/3 translate-x-1/3 transform'
        },
        {
          position: 'bottom-right',
          size: [
            'sm',
            'md',
            'lg'
          ],
          inset: true,
          standalone: false,
          class: 'translate-y-1/3 translate-x-1/3 transform'
        },
        {
          position: 'top-left',
          size: [
            'sm',
            'md',
            'lg'
          ],
          inset: true,
          standalone: false,
          class: '-translate-y-1/3 -translate-x-1/3 transform'
        },
        {
          position: 'bottom-left',
          size: [
            'sm',
            'md',
            'lg'
          ],
          inset: true,
          standalone: false,
          class: 'translate-y-1/3 -translate-x-1/3 transform'
        },
        {
          inverted: true,
          color: 'air-primary',
          class: {
            base: 'style-filled-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-success',
          class: {
            base: 'style-filled-success-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-alert',
          class: {
            base: 'style-filled-alert-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-copilot',
          class: {
            base: 'style-filled-copilot-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-warning',
          class: {
            base: 'style-filled-warning-inverted'
          }
        }
      ],
      defaultVariants: {
        size: 'sm',
        color: 'air-primary-alert',
        position: 'top-right',
        inverted: false
      }
    }
  }
})
```

---

# Collapsible

> A collapsible component for showing or hiding its content.

## Usage

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) or any other component in the default slot of the Collapsible.

Then, use the `#content` slot to add the content displayed when the Collapsible is open.

```vue

<template>
  <B24Collapsible class="flex flex-col gap-2 w-[192px]">
<B24Button label="Open" block use-dropdown />

  <template #content>
    
<Placeholder class="h-48" />

  </template>

</B24Collapsible>
</template>

```

### Unmount

Use the `unmount-on-hide` prop to prevent the content from being unmounted when the Collapsible is collapsed. Defaults to `true`.

```vue

<template>
  <B24Collapsible :unmount-on-hide="false" class="flex flex-col gap-2 w-[192px]">
<B24Button label="Open" block use-dropdown />

  <template #content>
    
<Placeholder class="h-48" />

  </template>

</B24Collapsible>
</template>

```

> !NOTE
> You can inspect the DOM to see the content being rendered.

### Disabled

Use the `disabled` prop to disable the Collapsible.

```vue

<template>
  <B24Collapsible class="flex flex-col gap-2 w-[192px]" disabled>
<B24Button label="Open" block use-dropdown />

  <template #content>
    
<Placeholder class="h-48" />

  </template>

</B24Collapsible>
</template>

```

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [CollapsibleOpenExample.vue]
<script setup lang="ts">
const open = ref(true)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Collapsible v-model:open="open" class="flex flex-col gap-2 w-[192px]">
    <B24Button
      label="Open"
      block
      use-dropdown
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </B24Collapsible>
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the Collapsible by pressing ``.

> !TIP
> This allows you to move the trigger outside of the Collapsible or remove it entirely.

### With rotating icon

Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.

```vue [CollapsibleIconExample.vue]
<template>
  <B24Collapsible class="flex flex-col gap-2 w-[192px]">
    <B24Button
      class="group"
      label="Open"
      block
      use-dropdown
      :b24ui="{
        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      }"
    />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </B24Collapsible>
</template>
```

## API

### Props

```ts
/**
 * Props for the Collapsible component
 */
interface CollapsibleProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  b24ui?: { root?: ClassNameValue; content?: ClassNameValue; } | undefined;
  /**
   * When `true`, prevents the user from interacting with the collapsible.
   */
  disabled?: boolean | undefined;
  /**
   * The open state of the collapsible when it is initially rendered. <br> Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The controlled open state of the collapsible. Can be binded with `v-model`.
   */
  open?: boolean | undefined;
  /**
   * When `true`, the element will be unmounted on closed state.
   * @default "true"
   */
  unmountOnHide?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Collapsible component
 */
interface CollapsibleSlots {
  default(): any;
  content(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Collapsible component
 */
interface CollapsibleEmits {
  update:open: (payload: [value: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    collapsible: {
      slots: {
        root: '',
        content: 'motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
      }
    }
  }
})
```

---

# ColorModeAvatar

> An Avatar that automatically switches its image based on the current theme (light/dark).

## Usage

The ColorModeAvatar component extends the [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) component, so you can pass any property such as `size`, `icon`, etc.

Use the `light` and `dark` props to define the source for light and dark mode.

```vue

<template>
  <B24ColorModeAvatar light="https://github.com/vuejs.png" dark="https://github.com/nuxt.png" />
</template>

```

> !NOTE
> Switch between light and dark mode: :b24-color-mode-select{size="sm"} to see the different images

## API

### Props

```ts
/**
 * Props for the ColorModeAvatar component
 */
interface ColorModeAvatarProps {
  light: string;
  dark: string;
  /**
   * The element or component this component should render as.
   */
  as?: any;
  b24ui?: { root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; } | undefined;
  alt?: string | undefined;
  crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
  decoding?: "async" | "auto" | "sync" | undefined;
  height?: Numberish | undefined;
  loading?: "lazy" | "eager" | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  sizes?: string | undefined;
  srcset?: string | undefined;
  usemap?: string | undefined;
  width?: Numberish | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  text?: string | undefined;
  size?: "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined;
  chip?: boolean | ChipProps | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes)
> This component also supports all native `<img>` HTML attributes.

---

# ColorModeButton

> A button to toggle between light and dark themes.

## Usage

The ColorModeButton component extends the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component, so you can pass any property such as `color`, `size`, etc.

```vue

<template>
  <B24ColorModeButton />
</template>

```

> !NOTE
> The button defaults to `color="air-tertiary-no-accent"`.

## Examples

### With fallback slot

As the button is wrapped in a [ClientOnly](https://nuxt.com/docs/api/components/client-only){rel="nofollow"} component, you can pass a `fallback` slot to display a placeholder while the component is loading.

```vue

<template>
  <B24ColorModeButton>
  <template #fallback>
    
<B24Button loading />

  </template>
</B24ColorModeButton>
</template>

```

## API

### Props

```ts
/**
 * Props for the ColorModeButton component
 */
interface ColorModeButtonProps {
  /**
   * @default "\"air-tertiary-no-accent\""
   */
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
  /**
   * The element or component this component should render as when not a link.
   */
  as?: any;
  b24ui?: { base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; } | undefined;
  onClick?: ((event: MouseEvent) => void | Promise<void>) | ((event: MouseEvent) => void | Promise<void>)[] | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  size?: "md" | "xs" | "sm" | "lg" | "xl" | "xss" | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * Route Location the link should navigate to when clicked on.
   */
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  /**
   * The class to apply when the link is active
   */
  activeClass?: string | undefined;
  /**
   * Class to apply when the link is exact active
   */
  exactActiveClass?: string | undefined;
  /**
   * Value passed to the attribute `aria-current` when the link is exact active.
   */
  ariaCurrentValue?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
  /**
   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
   */
  viewTransition?: boolean | undefined;
  /**
   * Calls `router.replace` instead of `router.push`.
   */
  replace?: boolean | undefined;
  autofocus?: Booleanish | undefined;
  disabled?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  name?: string | undefined;
  /**
   * The type of the button when not a link.
   */
  type?: "reset" | "submit" | "button" | undefined;
  download?: any;
  /**
   * An alias for `to`. If used with `to`, `href` will be ignored
   */
  href?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  hreflang?: string | undefined;
  media?: string | undefined;
  ping?: string | undefined;
  /**
   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
   */
  rel?: "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | (string & {}) | null | undefined;
  /**
   * Where to display the linked URL, as the name for a browsing context.
   */
  target?: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null | undefined;
  /**
   * Force the link to be active independent of the current route.
   */
  active?: boolean | undefined;
  /**
   * Will only be active if the current route is an exact match.
   */
  exact?: boolean | undefined;
  /**
   * Allows controlling how the current route query sets the link as active.
   */
  exactQuery?: boolean | "partial" | undefined;
  /**
   * Will only be active if the current route hash is an exact match.
   */
  exactHash?: boolean | undefined;
  /**
   * The class to apply when the link is inactive
   */
  inactiveClass?: string | undefined;
  /**
   * When `true`, uses special underlined styling.
   */
  isAction?: boolean | undefined;
  /**
   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
   */
  external?: boolean | undefined;
  /**
   * If set to true, no rel attribute will be added to the link
   */
  noRel?: boolean | undefined;
  /**
   * A class to apply to links that have been prefetched.
   */
  prefetchedClass?: string | undefined;
  /**
   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
   */
  prefetch?: boolean | undefined;
  /**
   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
   */
  prefetchOn?: "visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }> | undefined;
  /**
   * Escape hatch to disable `prefetch` attribute.
   */
  noPrefetch?: boolean | undefined;
  /**
   * An option to either add or remove trailing slashes in the `href` for this specific link.
   * Overrides the global `trailingSlash` option if provided.
   */
  trailingSlash?: "append" | "remove" | undefined;
  label?: string | undefined;
  activeColor?: "default" | "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-tertiary-no-accent" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-selection" | "air-boost" | undefined;
  /**
   * Rounds the corners of the button
   */
  rounded?: boolean | undefined;
  /**
   * Render the button full width
   */
  block?: boolean | undefined;
  /**
   * Set loading state automatically based on the `@click` promise state
   */
  loadingAuto?: boolean | undefined;
  /**
   * Disable uppercase label
   */
  normalCase?: boolean | undefined;
  /**
   * Shows LoaderWaitIcon in loading mode
   */
  useWait?: boolean | undefined;
  /**
   * Shows LoaderClockIcon icon in loading mode
   */
  useClock?: boolean | undefined;
  /**
   * Shows icons.ChevronDownSIcon on the right side
   */
  useDropdown?: boolean | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

### Slots

```ts
/**
 * Slots for the ColorModeButton component
 */
interface ColorModeButtonSlots {
}
```

---

# ColorModeImage

> An image element with a different source for light and dark mode.

## Usage

The ColorModeImage component uses the `<NuxtImg>` component when [`@nuxt/image`](https://github.com/nuxt/image){rel="nofollow"} is installed, falling back to `img` otherwise.

```vue

<template>
  <B24ColorModeImage light="https://github.com/bitrix24.png" dark="https://github.com/bitrix-tools.png" :width="200" :height="200" />
</template>

```

> !NOTE
> Switch between light and dark mode to see the different images: :b24-color-mode-select{size="sm"}

## API

### Props

```ts
/**
 * Props for the ColorModeImage component
 */
interface ColorModeImageProps {
  dark: string;
  light: string;
  alt?: string | undefined;
  crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
  decoding?: "async" | "auto" | "sync" | undefined;
  height?: Numberish | undefined;
  loading?: "lazy" | "eager" | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  sizes?: string | undefined;
  srcset?: string | undefined;
  usemap?: string | undefined;
  width?: Numberish | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes)
> This component also supports all native `<img>` HTML attributes.

---

# ColorModeSelect

> A Select to switch between system, dark & light mode.

## Usage

The ColorModeSelect component extends the [SelectMenu](https://bitrix24.github.io/b24ui/raw/docs/components/select-menu.md) component, so you can pass any property such as `color`, `size`, etc.

```vue

<template>
  <B24ColorModeSelect />
</template>

```

## API

### Props

```ts
/**
 * Props for the ColorModeSelect component
 */
interface ColorModeSelectProps {
  /**
   * The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The controlled open state of the Combobox. Can be binded with with `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * The icon displayed to open the menu.
   */
  trailingIcon?: IconComponent | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; arrow?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; } | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * The content of the menu.
   */
  content?: (Omit<ComboboxContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>) | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  size?: "md" | "xs" | "sm" | "lg" | "xl" | "xss" | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  autofocus?: boolean | undefined;
  /**
   * When `true`, prevents the user from interacting with listbox
   */
  disabled?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * Rounds the corners of the select
   */
  rounded?: boolean | undefined;
  /**
   * Whether to reset the searchTerm when the Combobox input blurred
   */
  resetSearchTermOnBlur?: boolean | undefined;
  /**
   * Whether to reset the searchTerm when the Combobox value is selected
   */
  resetSearchTermOnSelect?: boolean | undefined;
  /**
   * When `true`, hover over item will trigger highlight
   */
  highlightOnHover?: boolean | undefined;
  /**
   * The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
   */
  defaultValue?: SelectMenuItem | undefined;
  /**
   * Whether multiple options can be selected or not.
   */
  multiple?: false | undefined;
  required?: boolean | undefined;
  id?: string | undefined;
  /**
   * The placeholder text when the select is empty.
   */
  placeholder?: string | undefined;
  /**
   * Whether to display the search input or not.
   * Can be an object to pass additional props to the input.
   * `{ placeholder: 'Search...', type: 'text', size: 'md' }`{lang="ts"}
   * @default "false"
   */
  searchInput?: boolean | InputProps<AcceptableValue> | undefined;
  /**
   * Removes padding from input
   */
  noPadding?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * The icon displayed when an item is selected.
   */
  selectedIcon?: IconComponent | undefined;
  /**
   * Display an arrow alongside the menu.
   */
  arrow?: boolean | Omit<ComboboxArrowProps, "as" | "asChild"> | undefined;
  /**
   * Render the menu in a portal.
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * Enable virtualization for large lists.
   * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
   */
  virtualize?: boolean | { overscan?: number | undefined; estimateSize?: number | undefined; } | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
   */
  valueKey?: undefined;
  /**
   * When `items` is an array of objects, select the field to use as the label.
   */
  labelKey?: GetItemKeys<SelectMenuItem[]> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the description.
   */
  descriptionKey?: GetItemKeys<SelectMenuItem[]> | undefined;
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  /**
   * Determines if custom user input that does not exist in options can be added.
   */
  createItem?: boolean | "always" | { position?: "top" | "bottom" | undefined; when?: "empty" | "always" | undefined; } | undefined;
  /**
   * Fields to filter items by.
   */
  filterFields?: string[] | undefined;
  /**
   * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
   */
  ignoreFilter?: boolean | undefined;
  autofocusDelay?: number | undefined;
}
```

---

# ColorModeSwitch

> A switch to toggle between light and dark mode.

## Usage

The ColorModeSwitch component extends the [Switch](https://bitrix24.github.io/b24ui/raw/docs/components/switch.md) component, so you can pass any property such as `color`, `size`, etc.

```vue

<template>
  <B24ColorModeSwitch />
</template>

```

## API

### Props

```ts
/**
 * Props for the ColorModeSwitch component
 */
interface ColorModeSwitchProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; container?: ClassNameValue; thumb?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; } | undefined;
  /**
   * When `true`, the loading icon will be displayed
   */
  loading?: boolean | undefined;
  size?: "md" | "xs" | "sm" | "lg" | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  autofocus?: Booleanish | undefined;
  /**
   * When `true`, prevents the user from interacting with the switch.
   */
  disabled?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  label?: string | undefined;
  /**
   * The state of the switch when it is initially rendered. Use when you do not need to control its state.
   */
  defaultValue?: boolean | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  id?: string | undefined;
  /**
   * The value given as data when submitted with a `name`.
   */
  value?: string | undefined;
  description?: string | undefined;
  /**
   * The icon when the `loading` prop is `true`.
   */
  loadingIcon?: IconComponent | undefined;
}
```

---

# ColorPicker

> A color picker component.

## Usage

Use the `v-model` directive to control the value of the ColorPicker.

```vue

<script setup lang="ts">
const value = ref('#00C16A')
</script>

<template>
  <B24ColorPicker v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<template>
  <B24ColorPicker default-value="#00BCD4" />
</template>

```

### RGB Format

Use the `format` prop to set `rgb` value of the ColorPicker.

```vue

<script setup lang="ts">
const value = ref('rgb(0, 193, 106)')
</script>

<template>
  <B24ColorPicker format="rgb" v-model="value" />
</template>

```

### HSL Format

Use the `format` prop to set `hsl` value of the ColorPicker.

```vue

<script setup lang="ts">
const value = ref('hsl(153, 100%, 37.8%)')
</script>

<template>
  <B24ColorPicker format="hsl" v-model="value" />
</template>

```

### CMYK Format

Use the `format` prop to set `cmyk` value of the ColorPicker.

```vue

<script setup lang="ts">
const value = ref('cmyk(100%, 0%, 45.08%, 24.31%)')
</script>

<template>
  <B24ColorPicker format="cmyk" v-model="value" />
</template>

```

### CIELab Format

Use the `format` prop to set `lab` value of the ColorPicker.

```vue

<script setup lang="ts">
const value = ref('lab(68.88% -60.41% 32.55%)')
</script>

<template>
  <B24ColorPicker format="lab" v-model="value" />
</template>

```

### Throttle

Use the `throttle` prop to set the throttle value of the ColorPicker.

```vue

<script setup lang="ts">
const value = ref('#00C16A')
</script>

<template>
  <B24ColorPicker :throttle="100" v-model="value" />
</template>

```

### Size

Use the `size` prop to set the size of the ColorPicker.

```vue

<template>
  <B24ColorPicker size="lg" />
</template>

```

### Disabled

Use the `disabled` prop to disable the ColorPicker.

```vue

<template>
  <B24ColorPicker disabled />
</template>

```

## Examples

### As a Color chooser

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) and a [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md) component to create a color chooser.

```vue [ColorPickerChooserExample.vue]
<script setup lang="ts">
const color = ref('#00C16A')

const chip = computed(() => ({ backgroundColor: color.value }))
</script>

<template>
  <B24Popover>
    <B24Button label="Choose color">
      <template #leading>
        <span :style="chip" class="size-3 rounded-full" />
      </template>
    </B24Button>

    <template #content>
      <B24ColorPicker v-model="color" class="p-2" />
    </template>
  </B24Popover>
</template>
```

## API

### Props

```ts
/**
 * Props for the ColorPicker component
 */
interface ColorPickerProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * Throttle time in ms for the color picker
   * @default "50"
   */
  throttle?: number | undefined;
  /**
   * Disable the color picker
   */
  disabled?: boolean | undefined;
  /**
   * The default value of the color picker
   * @default "\"#FFFFFF\""
   */
  defaultValue?: string | undefined;
  /**
   * Format of the color
   * @default "\"hex\""
   */
  format?: "hex" | "rgb" | "hsl" | "cmyk" | "lab" | undefined;
  size?: "xs" | "sm" | "md" | "lg" | undefined;
  b24ui?: { root?: ClassNameValue; picker?: ClassNameValue; selector?: ClassNameValue; selectorBackground?: ClassNameValue; selectorThumb?: ClassNameValue; track?: ClassNameValue; trackThumb?: ClassNameValue; } | undefined;
  modelValue?: string | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the ColorPicker component
 */
interface ColorPickerEmits {
  update:modelValue: (payload: [value: string | undefined]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    colorPicker: {
      slots: {
        root: 'data-[disabled]:opacity-30',
        picker: 'flex gap-4',
        selector: 'rounded-(--ui-border-radius-md) touch-none',
        selectorBackground: 'w-full h-full relative rounded-(--ui-border-radius-md)',
        selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--ui-color-base-white-fixed) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
        track: 'w-[8px] relative rounded-(--ui-border-radius-md) touch-none',
        trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--ui-color-base-white-fixed) cursor-pointer data-[disabled]:cursor-not-allowed'
      },
      variants: {
        size: {
          xs: {
            selector: 'w-[152px] h-[152px]',
            track: 'h-[152px]'
          },
          sm: {
            selector: 'w-[160px] h-[160px]',
            track: 'h-[160px]'
          },
          md: {
            selector: 'w-[168px] h-[168px]',
            track: 'h-[168px]'
          },
          lg: {
            selector: 'w-[176px] h-[176px]',
            track: 'h-[176px]'
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
```

---

# CommandPalette

> A searchable command palette powered by Fuse.js for fast, fuzzy text search.

## Usage

Use the `v-model` directive to control the value of the CommandPalette or the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'users',
    label: 'Users',
    items: [
      {
        label: 'Assistant Name',
        suffix: 'assistant',
        avatar: {
          src: '/b24ui/avatar/assistant.png'
        }
      },
      {
        label: 'Bitrix24',
        suffix: 'bitrix24',
        avatar: {
          src: 'https://github.com/bitrix24.png'
        }
      },
      {
        label: 'Employee Name',
        suffix: 'employee',
        avatar: {
          src: '/b24ui/avatar/employee.png'
        }
      }
    ]
  }
])
const value = ref({})
</script>

<template>
  <B24CommandPalette v-model="value" :groups="groups" class="flex-1" />
</template>

```

> [!TIP](https://bitrix24.github.io/b24ui/#control-selected-items)
> You can also use the `@update:model-value` event to listen to the selected item(s).

### Groups

The CommandPalette component filters groups and ranks matching commands by relevance as users type. It provides dynamic, instant search results for efficient command discovery. Use the `groups` prop as an array of objects with the following properties:

- `id: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `items?: CommandPaletteItem[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`ignoreFilter?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-ignore-filter)
- [`postFilter?: (searchTerm: string, items: T[]) => T[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-post-filtered-items)
- `highlightedIcon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

> !CAUTION
> You must provide an `id` for each group otherwise the group will be ignored.

Each group contains an `items` array of objects that define the commands. Each item can have the following properties:

- `prefix?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `suffix?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `chip?: ChipProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `kbds?: string[] | KbdProps[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `active?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `loading?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `placeholder?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `children?: CommandPaletteItem[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `onSelect?: (e: Event) => void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

You can pass any property from the [Link](https://bitrix24.github.io/b24ui/raw/docs/components/link.md#props) component such as `to`, `target`, etc.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'users',
    label: 'Users',
    items: [
      {
        label: 'Assistant Name',
        suffix: 'assistant',
        avatar: {
          src: '/b24ui/avatar/assistant.png'
        }
      },
      {
        label: 'Bitrix24',
        suffix: 'bitrix24',
        avatar: {
          src: 'https://github.com/bitrix24.png'
        }
      },
      {
        label: 'Employee Name',
        suffix: 'employee',
        avatar: {
          src: '/b24ui/avatar/employee.png'
        }
      }
    ]
  }
])
const value = ref({})
</script>

<template>
  <B24CommandPalette v-model="value" :groups="groups" class="flex-1" />
</template>

```

> [!TIP](https://bitrix24.github.io/b24ui/#with-children-in-items)
> Each item can take a `children` array of objects with the following properties to create submenus:

### Multiple

Use the `multiple` prop to allow multiple selections.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'users',
    label: 'Users',
    items: [
      {
        label: 'Assistant Name',
        suffix: 'assistant',
        avatar: {
          src: '/b24ui/avatar/assistant.png'
        }
      },
      {
        label: 'Bitrix24',
        suffix: 'bitrix24',
        avatar: {
          src: 'https://github.com/bitrix24.png'
        }
      },
      {
        label: 'Employee Name',
        suffix: 'employee',
        avatar: {
          src: '/b24ui/avatar/employee.png'
        }
      }
    ]
  }
])
const value = ref([])
</script>

<template>
  <B24CommandPalette multiple v-model="value" :groups="groups" class="flex-1" />
</template>

```

> !CAUTION
> Ensure to pass an array to the `default-value` prop or the `v-model` directive.

### Placeholder

Use the `placeholder` prop to change the placeholder text.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'apps',
    items: [
      {
        label: 'Calendar'
      },
      {
        label: 'Music'
      },
      {
        label: 'Maps'
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette placeholder="Search an app..." :groups="groups" class="flex-1" />
</template>

```

### Icon

Use the `icon` prop to customize the input [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const groups = ref([
  {
    id: 'apps',
    items: [
      {
        label: 'Calendar'
      },
      {
        label: 'Music'
      },
      {
        label: 'Maps'
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette :icon="RocketIcon" :groups="groups" class="flex-1" />
</template>

```

### Selected Icon

Use the `selected-icon` prop to customize the selected item [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const groups = ref([
  {
    id: 'users',
    label: 'Users',
    items: [
      {
        label: 'Assistant Name',
        suffix: 'assistant',
        avatar: {
          src: '/b24ui/avatar/assistant.png'
        }
      },
      {
        label: 'Bitrix24',
        suffix: 'bitrix24',
        avatar: {
          src: 'https://github.com/bitrix24.png'
        }
      },
      {
        label: 'Employee Name',
        suffix: 'employee',
        avatar: {
          src: '/b24ui/avatar/employee.png'
        }
      }
    ]
  }
])
const value = ref([
  {
    label: 'Bitrix24',
    suffix: 'bitrix24',
    avatar: {
      src: 'https://github.com/bitrix24.png'
    }
  }
])
</script>

<template>
  <B24CommandPalette multiple v-model="value" :selected-icon="RocketIcon" :groups="groups" class="flex-1" />
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} when an item has children.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const groups = ref([
  {
    id: 'actions',
    items: [
      {
        label: 'Share',
        children: [
          {
            label: 'Email'
          },
          {
            label: 'Copy'
          },
          {
            label: 'Link'
          }
        ]
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette :trailing-icon="RocketIcon" :groups="groups" class="flex-1" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the CommandPalette.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'apps',
    items: [
      {
        label: 'Calendar'
      },
      {
        label: 'Music'
      },
      {
        label: 'Maps'
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette loading :groups="groups" class="flex-1" />
</template>

```

### Close

Use the `close` prop to display a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) to dismiss the CommandPalette.

> !TIP
> An `update:open` event will be emitted when the close button is clicked.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'apps',
    items: [
      {
        label: 'Calendar'
      },
      {
        label: 'Music'
      },
      {
        label: 'Maps'
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette close :groups="groups" class="flex-1" />
</template>

```

You can pass any property from the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component to customize it.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'apps',
    items: [
      {
        label: 'Calendar'
      },
      {
        label: 'Music'
      },
      {
        label: 'Maps'
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette :close="{color:'air-primary',rounded:true,size:'md'}" :groups="groups" class="flex-1" />
</template>

```

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const groups = ref([
  {
    id: 'apps',
    items: [
      {
        label: 'Calendar'
      },
      {
        label: 'Music'
      },
      {
        label: 'Maps'
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette close :close-icon="RocketIcon" :groups="groups" class="flex-1" />
</template>

```

### Back

Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.

You can pass any property from the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component to customize it.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'actions',
    items: [
      {
        label: 'Share',
        children: [
          {
            label: 'Email'
          },
          {
            label: 'Copy'
          },
          {
            label: 'Link'
          }
        ]
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette :back="{color:'air-primary'}" :groups="groups" class="flex-1" />
</template>

```

### Back Icon

Use the `back-icon` prop to customize the back button [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const groups = ref([
  {
    id: 'actions',
    items: [
      {
        label: 'Share',
        children: [
          {
            label: 'Email'
          },
          {
            label: 'Copy'
          },
          {
            label: 'Link'
          }
        ]
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette :back-icon="RocketIcon" :groups="groups" class="flex-1" />
</template>

```

### Disabled

Use the `disabled` prop to disable the CommandPalette.

```vue

<script setup lang="ts">
const groups = ref([
  {
    id: 'apps',
    items: [
      {
        label: 'Calendar'
      },
      {
        label: 'Music'
      },
      {
        label: 'Maps'
      }
    ]
  }
])
</script>

<template>
  <B24CommandPalette disabled :groups="groups" class="flex-1" />
</template>

```

## Examples

### Control selected item(s)

You can control the selected item(s) by using the `default-value` prop or the `v-model` directive, by using the `onSelect` field on each item or by using the `@update:model-value` event.

```vue [CommandPaletteSelectExample.vue]
<script setup lang="ts">
import FileUploadIcon from '@bitrix24/b24icons-vue/main/FileUploadIcon'
import FolderPlusIcon from '@bitrix24/b24icons-vue/outline/FolderPlusIcon'
import TagIcon from '@bitrix24/b24icons-vue/outline/TagIcon'
import StageIcon from '@bitrix24/b24icons-vue/outline/StageIcon'

const toast = useToast()

const groups = ref([
  {
    id: 'users',
    label: 'Users',
    items: [
      {
        label: 'Assistant Name',
        suffix: 'assistant',
        to: 'https://github.com/bitrix24',
        target: '_blank',
        avatar: {
          src: '/b24ui/avatar/assistant.png'
        }
      },
      {
        label: 'Bitrix24',
        suffix: 'bitrix24',
        to: 'https://github.com/bitrix24',
        target: '_blank',
        avatar: {
          src: 'https://github.com/bitrix24.png'
        }
      },
      {
        label: 'Employee Name',
        suffix: 'employee',
        to: 'https://github.com/bitrix24',
        avatarSrc: '/b24ui/avatar/employee.png',
        target: '_blank',
        avatar: {
          src: '/b24ui/avatar/employee.png'
        }
      }
    ]
  },
  {
    id: 'actions',
    items: [
      {
        label: 'Add new file',
        suffix: 'Create a new file in the current directory or workspace.',
        icon: FileUploadIcon,
        kbds: [
          'meta',
          'I'
        ],
        onSelect() {
          toast.add({ title: 'Add new file' })
        }
      },
      {
        label: 'Add new folder',
        suffix: 'Create a new folder in the current directory or workspace.',
        icon: FolderPlusIcon,
        kbds: [
          'meta',
          'F'
        ],
        onSelect() {
          toast.add({ title: 'Add new folder' })
        }
      },
      {
        label: 'Add hashtag',
        suffix: 'Add a hashtag to the current item.',
        icon: TagIcon,
        kbds: [
          'meta',
          'H'
        ],
        onSelect() {
          toast.add({ title: 'Add hashtag' })
        }
      },
      {
        label: 'Add label',
        suffix: 'Add a label to the current item.',
        icon: StageIcon,
        kbds: [
          'meta',
          'L'
        ],
        onSelect() {
          toast.add({ title: 'Add label' })
        }
      }
    ]
  }
])

function onSelect(item: any) {
  console.log(item)
}
</script>

<template>
  <B24CommandPalette
    :groups="groups"
    class="flex-1 h-[320px]"
    @update:model-value="onSelect"
  />
</template>
```

### Control search term

Use the `v-model:search-term` directive to control the search term.

```vue [CommandPaletteSearchTermExample.vue]
<script setup lang="ts">
const users = [
  {
    label: 'Assistant Name',
    suffix: 'assistant',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: '/b24ui/avatar/assistant.png'
    }
  },
  {
    label: 'Bitrix24',
    suffix: 'bitrix24',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix24.png'
    }
  },
  {
    label: 'Employee Name',
    suffix: 'employee',
    to: 'https://github.com/bitrix24',
    avatarSrc: '/b24ui/avatar/employee.png',
    target: '_blank',
    avatar: {
      src: '/b24ui/avatar/employee.png'
    }
  }
]

const searchTerm = ref('B')

function onSelect() {
  searchTerm.value = ''
}
</script>

<template>
  <B24CommandPalette
    v-model:search-term="searchTerm"
    :groups="[{ id: 'users', items: users }]"
    class="flex-1"
    @update:model-value="onSelect"
  />
</template>
```

> !NOTE
> This example uses the `@update:model-value` event to reset the search term when an item is selected.

### With children in items

You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.

```vue [CommandPaletteItemsChildrenExample.vue]
<script setup lang="ts">
import CirclePlusIcon from '@bitrix24/b24icons-vue/outline/CirclePlusIcon'
import FileUploadIcon from '@bitrix24/b24icons-vue/main/FileUploadIcon'
import FolderPlusIcon from '@bitrix24/b24icons-vue/outline/FolderPlusIcon'
import AddProductIcon from '@bitrix24/b24icons-vue/outline/AddProductIcon'
import ShareIcon from '@bitrix24/b24icons-vue/button/ShareIcon'
import LinkIcon from '@bitrix24/b24icons-vue/outline/LinkIcon'
import MailSendIcon from '@bitrix24/b24icons-vue/outline/MailSendIcon'
import Share2Icon from '@bitrix24/b24icons-vue/main/Share2Icon'
import TwitterIcon from '@bitrix24/b24icons-vue/common-service/TwitterIcon'
import TelegramIcon from '@bitrix24/b24icons-vue/social/TelegramIcon'
import SettingsLIcon from '@bitrix24/b24icons-vue/outline/SettingsLIcon'
import Filter1Icon from '@bitrix24/b24icons-vue/main/Filter1Icon'
import PaletteIcon from '@bitrix24/b24icons-vue/outline/PaletteIcon'
import ShieldIcon from '@bitrix24/b24icons-vue/outline/ShieldIcon'

const toast = useToast()

const groups = [{
  id: 'actions',
  label: 'Actions',
  items: [
    {
      label: 'Create new',
      icon: CirclePlusIcon,
      children: [
        {
          label: 'New file',
          icon: FileUploadIcon,
          suffix: 'Create a new file in the current directory',
          onSelect(e: Event) {
            e.preventDefault()
            toast.add({ title: 'New file created!' })
          },
          kbds: ['meta', 'I']
        },
        {
          label: 'New folder',
          icon: FolderPlusIcon,
          suffix: 'Create a new folder in the current directory',
          onSelect(e: Event) {
            e.preventDefault()
            toast.add({ title: 'New folder created!' })
          },
          kbds: ['meta', 'F']
        },
        {
          label: 'New project',
          icon: AddProductIcon,
          suffix: 'Create a new project from a template',
          onSelect(e: Event) {
            e.preventDefault()
            toast.add({ title: 'New project created!' })
          },
          kbds: ['meta', 'P']
        }
      ]
    },
    {
      label: 'Share',
      icon: ShareIcon,
      children: [
        {
          label: 'Copy link',
          icon: LinkIcon,
          suffix: 'Copy a link to the current item',
          onSelect(e: Event) {
            e.preventDefault()
            toast.add({ title: 'Link copied to clipboard!' })
          },
          kbds: ['meta', 'L']
        },
        {
          label: 'Share via email',
          icon: MailSendIcon,
          suffix: 'Share the current item via email',
          onSelect(e: Event) {
            e.preventDefault()
            toast.add({ title: 'Share via email dialog opened!' })
          }
        },
        {
          label: 'Share on social',
          icon: Share2Icon,
          suffix: 'Share the current item on social media',
          children: [
            {
              label: 'Twitter',
              icon: TwitterIcon,
              onSelect(e: Event) {
                e.preventDefault()
                toast.add({ title: 'Shared on Twitter!' })
              }
            },
            {
              label: 'Telegram',
              icon: TelegramIcon,
              onSelect(e: Event) {
                e.preventDefault()
                toast.add({ title: 'Shared on Telegram!' })
              }
            }
          ]
        }
      ]
    },
    {
      label: 'Settings',
      icon: SettingsLIcon,
      children: [
        {
          label: 'General',
          icon: Filter1Icon,
          suffix: 'Configure general settings',
          onSelect(e: Event) {
            e.preventDefault()
            toast.add({ title: 'General settings opened!' })
          }
        },
        {
          label: 'Appearance',
          icon: PaletteIcon,
          suffix: 'Customize the appearance',
          onSelect(e: Event) {
            e.preventDefault()
            toast.add({ title: 'Appearance settings opened!' })
          }
        },
        {
          label: 'Security',
          icon: ShieldIcon,
          suffix: 'Manage security settings',
          onSelect(e: Event) {
            e.preventDefault()
            toast.add({ title: 'Security settings opened!' })
          }
        }
      ]
    }
  ]
}]
</script>

<template>
  <B24CommandPalette :groups="groups" class="flex-1" />
</template>
```

> !NOTE
> When navigating into a submenu:
>
> - The search term is reset
> - A back button appears in the input
> - You can go back to the previous group by pressing the `` key

### With fetched items

You can fetch items from an API and use them in the CommandPalette.

```vue [CommandPaletteFetchExample.vue]
<script setup lang="ts">
const searchTerm = ref('')

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'command-palette-users',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})

const groups = computed(() => [{
  id: 'users',
  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
  items: users.value || []
}])
</script>

<template>
  <B24CommandPalette
    v-model:search-term="searchTerm"
    :loading="status === 'pending'"
    :groups="groups"
    class="flex-1 h-[320px]"
  />
</template>
```

### With ignore filter

You can set the `ignoreFilter` field to `true` on a group to disable the internal search and use your own search logic.

```vue [CommandPaletteIgnoreFilterExample.vue]
<script setup lang="ts">
import { refDebounced } from '@vueuse/core'

const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})

const groups = computed(() => [{
  id: 'users',
  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
  items: users.value || [],
  ignoreFilter: true
}])
</script>

<template>
  <B24CommandPalette
    v-model:search-term="searchTerm"
    :loading="status === 'pending'"
    :groups="groups"
    class="flex-1 h-[320px]"
  />
</template>
```

> !NOTE
> This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced){rel="nofollow"} to debounce the API calls.

### With post-filtered items

You can use the `postFilter` field on a group to filter items after the search happened.

```vue [CommandPalettePostFilterExample.vue]
<script setup lang="ts">
const items = [
  {
    id: '/',
    label: 'Introduction',
    level: 1
  },
  {
    id: '/docs/getting-started/#whats-new-in-v3',
    label: 'What\'s new in v3?',
    level: 2
  },
  {
    id: '/docs/getting-started/#reka-ui',
    label: 'Reka UI',
    level: 3
  },
  {
    id: '/docs/getting-started/#tailwind-css-v4',
    label: 'Tailwind CSS v4',
    level: 3
  },
  {
    id: '/docs/getting-started/#tailwind-variants',
    label: 'Tailwind Variants',
    level: 3
  },
  {
    id: '/docs/getting-started/installation/',
    label: 'Installation',
    level: 1
  }
]

function postFilter(searchTerm: string, items: any[]) {
  // Filter only first level items if no searchTerm
  if (!searchTerm) {
    return items?.filter(item => item.level === 1)
  }

  return items
}
</script>

<template>
  <B24CommandPalette :groups="[{ id: 'files', items, postFilter }]" class="flex-1" />
</template>
```

> !NOTE
> Start typing to see items with higher level appear.

### With custom fuse search

You can use the `fuse` prop to override the options of [useFuse](https://vueuse.org/integrations/useFuse){rel="nofollow"} which defaults to:

```ts
{
  fuseOptions: {
    ignoreLocation: true,
    threshold: 0.1,
    keys: ['label', 'suffix']
  },
  resultLimit: 12,
  matchAllWhenSearchEmpty: true
}
```

> !TIP
> The `fuseOptions` are the options of [Fuse.js](https://www.fusejs.io/api/options.html){rel="nofollow"}, the `resultLimit` is the maximum number of results to return and the `matchAllWhenSearchEmpty` is a boolean to match all items when the search term is empty.

You can for example set `{ fuseOptions: { includeMatches: true } }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} to highlight the search term in the items.

```vue [CommandPaletteFuseExample.vue]
<script setup lang="ts">
const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'command-palette-users',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24CommandPalette
    :groups="[{ id: 'users', items: users || [] }]"
    :fuse="{ fuseOptions: { includeMatches: true } }"
    class="flex-1 h-[320px]"
  />
</template>
```

### With virtualization

Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.

> [!WARNING](https://github.com/unovue/reka-ui/issues/1885)
> When enabled, all groups are flattened into a single list due to a limitation of Reka UI.

```vue [CommandPaletteVirtualizeExample.vue]
<script setup lang="ts">
import type { CommandPaletteItem } from '@bitrix24/b24ui-nuxt'

const items: CommandPaletteItem[] = Array(1000)
  .fill(0)
  .map((_, value) => ({
    label: `item-${value}`,
    value
  }))

const groups = [
  {
    id: 'items',
    items
  }
]
</script>

<template>
  <B24CommandPalette
    virtualize
    :fuse="{ resultLimit: 1000 }"
    :groups="groups"
    class="flex-1 h-[320px]"
  />
</template>
```

### Within a Popover

You can use the CommandPalette component inside a [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md)'s content.

```vue [PopoverCommandPaletteExample.vue]
<script setup lang="ts">
import TagIcon from '@bitrix24/b24icons-vue/outline/TagIcon'

const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
      color: 'air-primary-alert' as const
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'air-primary-success' as const
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'air-primary' as const
    }
  }
])
const label = ref([])
</script>

<template>
  <B24Popover :content="{ side: 'right', align: 'start' }">
    <B24Button
      :icon="TagIcon"
      label="Select labels"
    />

    <template #content>
      <B24CommandPalette
        v-model="label"
        :multiple="true"
        placeholder="Search labels..."
        :groups="[{ id: 'labels', items }]"
        :b24ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
      />
    </template>
  </B24Popover>
</template>
```

### Within a Modal

You can use the CommandPalette component inside a [Modal](https://bitrix24.github.io/b24ui/raw/docs/components/modal.md)'s content.

```vue [ModalCommandPaletteExample.vue]
<script setup lang="ts">
import PersonSearchIcon from '@bitrix24/b24icons-vue/outline/PersonSearchIcon'

const searchTerm = ref('')

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'command-palette-users',
  params: { q: searchTerm },
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})

const groups = computed(() => [{
  id: 'users',
  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
  items: users.value || [],
  ignoreFilter: true
}])
</script>

<template>
  <B24Modal :b24ui="{ content: 'p-0 pt-0 pb-[10px]' }">
    <B24Button
      label="Search users..."
      :icon="PersonSearchIcon"
    />

    <template #content>
      <B24CommandPalette
        v-model:search-term="searchTerm"
        :loading="status === 'pending'"
        :groups="groups"
        placeholder="Search users..."
        class="h-[320px]"
      />
    </template>
  </B24Modal>
</template>
```

### Listen open state

When using the `close` prop, you can listen to the `update:open` event when the button is clicked.

```vue [CommandPaletteOpenExample.vue]
<script setup lang="ts">
import SearchIcon from '@bitrix24/b24icons-vue/outline/SearchIcon'

const open = ref(false)

const users = [
  {
    label: 'Assistant Name',
    suffix: 'assistant',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: '/b24ui/avatar/assistant.png'
    }
  },
  {
    label: 'Bitrix24',
    suffix: 'bitrix24',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix24.png'
    }
  },
  {
    label: 'Employee Name',
    suffix: 'employee',
    to: 'https://github.com/bitrix24',
    avatarSrc: '/b24ui/avatar/employee.png',
    target: '_blank',
    avatar: {
      src: '/b24ui/avatar/employee.png'
    }
  }
]
</script>

<template>
  <B24Modal v-model:open="open" :b24ui="{ content: 'p-0 pt-0 pb-[10px]' }">
    <B24Button
      label="Search users..."
      :icon="SearchIcon"
    />

    <template #content>
      <B24CommandPalette close :groups="[{ id: 'users', items: users }]" @update:open="open = $event" />
    </template>
  </B24Modal>
</template>
```

> !NOTE
> This can be useful when using the CommandPalette inside a [`Modal`](https://bitrix24.github.io/b24ui/raw/docs/components/modal.md) for example.

### With footer slot

Use the `#footer` slot to add custom content at the bottom of the CommandPalette, such as keyboard shortcuts help or additional actions.

```vue [CommandPaletteFooterSlotExample.vue]
<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
import VueIcon from '@bitrix24/b24icons-vue/file-type/VueIcon'
import MarkdownIcon from '@bitrix24/b24icons-vue/file-type/MarkdownIcon'
import NodeIcon from '@bitrix24/b24icons-vue/file-type/NodeIcon'
import FileUploadIcon from '@bitrix24/b24icons-vue/main/FileUploadIcon'
import FolderPlusIcon from '@bitrix24/b24icons-vue/outline/FolderPlusIcon'
import CrmSearchIcon from '@bitrix24/b24icons-vue/crm/CrmSearchIcon'
import SettingsLIcon from '@bitrix24/b24icons-vue/outline/SettingsLIcon'

const groups = [
  {
    id: 'actions',
    items: [
      {
        label: 'Add new file',
        suffix: 'Create a new file in the current directory',
        icon: FileUploadIcon,
        kbds: ['meta', 'I']
      },
      {
        label: 'Add new folder',
        suffix: 'Create a new folder in the current directory',
        icon: FolderPlusIcon,
        kbds: ['meta', 'F']
      },
      {
        label: 'Search files',
        suffix: 'Search across all files in the project',
        icon: CrmSearchIcon,
        kbds: ['meta', 'P']
      },
      {
        label: 'Settings',
        suffix: 'Open application settings',
        icon: SettingsLIcon,
        kbds: ['meta', ',']
      }
    ]
  },
  {
    id: 'recent',
    label: 'Recent',
    items: [
      {
        label: 'project.vue',
        suffix: 'components/',
        icon: VueIcon
      },
      {
        label: 'readme.md',
        suffix: 'docs/',
        icon: MarkdownIcon
      },
      {
        label: 'package.json',
        suffix: 'root/',
        icon: NodeIcon
      }
    ]
  }
]
</script>

<template>
  <B24CommandPalette :groups="groups" class="flex-1 h-80">
    <template #footer>
      <div class="flex items-center justify-between gap-2">
        <Bitrix24Icon class="size-5 text-(--b24ui-typography-label-color) ml-1" />
        <div class="flex items-center gap-1">
          <B24Button label="Open Command" size="sm">
            <template #trailing>
              <B24Kbd value="enter" size="sm" />
            </template>
          </B24Button>
          <B24Separator orientation="vertical" class="h-4" />
          <B24Button label="Actions" size="sm">
            <template #trailing>
              <B24Kbd value="meta" size="sm" />
              <B24Kbd value="k" size="sm" />
            </template>
          </B24Button>
        </div>
      </div>
    </template>
  </B24CommandPalette>
</template>
```

### With custom slot

Use the `slot` property to customize a specific item or group.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-leading`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-label`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-trailing`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ group.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ group.slot }}-leading`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ group.slot }}-label`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ group.slot }}-trailing`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [CommandPaletteCustomSlotExample.vue]
<script setup lang="ts">
import UserMaskIcon from '@bitrix24/b24icons-vue/outline/UserMaskIcon'
import CreditDebitCardIcon from '@bitrix24/b24icons-vue/main/CreditDebitCardIcon'
import NotificationIcon from '@bitrix24/b24icons-vue/outline/NotificationIcon'
import LockLIcon from '@bitrix24/b24icons-vue/outline/LockLIcon'

const groups = [
  {
    id: 'settings',
    items: [
      {
        label: 'Profile',
        icon: UserMaskIcon,
        kbds: ['meta', 'P']
      },
      {
        label: 'Billing',
        icon: CreditDebitCardIcon,
        kbds: ['meta', 'B'],
        slot: 'billing' as const
      },
      {
        label: 'Notifications',
        icon: NotificationIcon
      },
      {
        label: 'Security',
        icon: LockLIcon
      }
    ]
  },
  {
    id: 'users',
    label: 'Users',
    slot: 'users' as const,
    items: [
      {
        label: 'Assistant Name',
        suffix: 'assistant',
        to: 'https://github.com/bitrix24',
        avatarSrc: '/b24ui/avatar/assistant.png',
        target: '_blank'
      },
      {
        label: 'Bitrix24',
        suffix: 'bitrix24',
        to: 'https://github.com/bitrix24',
        avatarSrc: 'https://github.com/bitrix24.png',
        target: '_blank'
      },
      {
        label: 'Employee Name',
        suffix: 'employee',
        to: 'https://github.com/bitrix24',
        avatarSrc: '/b24ui/avatar/employee.png',
        target: '_blank'
      }
    ]
  }
]
</script>

<template>
  <B24CommandPalette :groups="groups" class="flex-1 h-80">
    <template #users-leading="{ item }">
      <B24Avatar :src="item?.avatarSrc" size="2xs" />
    </template>

    <template #billing-label="{ item }">
      <span class="font-(--ui-font-weight-medium) text-(--ui-color-accent-main-primary)">{{ item.label }}</span>

      <B24Badge size="sm">
        50% off
      </B24Badge>
    </template>
  </B24CommandPalette>
</template>
```

> [!TIP](https://bitrix24.github.io/b24ui/#slots)
> You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.

## API

### Props

```ts
/**
 * Props for the CommandPalette component
 */
interface CommandPaletteProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The icon displayed in the input.
   */
  icon?: IconComponent | undefined;
  /**
   * The icon displayed on the right side of the input.
   */
  trailingIcon?: IconComponent | undefined;
  /**
   * The icon displayed when an item is selected.
   */
  selectedIcon?: IconComponent | undefined;
  /**
   * The icon displayed when an item has children.
   */
  childrenIcon?: IconComponent | undefined;
  /**
   * The placeholder text for the input.
   */
  placeholder?: string | undefined;
  /**
   * Automatically focus the input when component is mounted.
   * @default "true"
   */
  autofocus?: boolean | undefined;
  /**
   * Display a close button in the input (useful when inside a Modal for example).
   * `{ size: 'sm', color: 'air-tertiary-no-accent' }`{lang="ts-type"}
   */
  close?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the close button.
   */
  closeIcon?: IconComponent | undefined;
  /**
   * Display a button to navigate back in history.
   * `{ size: 'sm', color: 'air-selection' }`{lang="ts-type"}
   * @default "true"
   */
  back?: boolean | ButtonProps | undefined;
  /**
   * The icon displayed in the back button.
   */
  backIcon?: IconComponent | undefined;
  groups?: CommandPaletteGroup<CommandPaletteItem>[] | undefined;
  /**
   * Options for [useFuse](https://vueuse.org/integrations/useFuse).
   */
  fuse?: UseFuseOptions<CommandPaletteItem> | undefined;
  /**
   * Enable virtualization for large lists.
   * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
   * @default "false"
   */
  virtualize?: boolean | { overscan?: number | undefined; estimateSize?: number | undefined; } | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<CommandPaletteItem> | undefined;
  /**
   * The key used to get the description from the item.
   * @default "\"description\""
   */
  descriptionKey?: GetItemKeys<CommandPaletteItem> | undefined;
  /**
   * Whether to preserve the order of groups as defined in the `groups` prop when filtering.
   * When `false`, groups will appear based on item matches.
   * @default "false"
   */
  preserveGroupOrder?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; back?: ClassNameValue; content?: ClassNameValue; footer?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemTrailingHighlightedIcon?: ClassNameValue; itemTrailingKbds?: ClassNameValue; itemTrailingKbdsSize?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; itemLabelBase?: ClassNameValue; itemLabelPrefix?: ClassNameValue; itemLabelSuffix?: ClassNameValue; } | undefined;
  /**
   * Whether multiple options can be selected or not.
   */
  multiple?: boolean | undefined;
  /**
   * When `true`, prevents the user from interacting with listbox
   */
  disabled?: boolean | undefined;
  /**
   * The controlled value of the listbox. Can be binded with with `v-model`.
   * @default "\"\""
   */
  modelValue?: AcceptableValue | AcceptableValue[] | undefined;
  /**
   * The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox
   */
  defaultValue?: AcceptableValue | AcceptableValue[] | undefined;
  /**
   * When `true`, hover over item will trigger highlight
   * @default "true"
   */
  highlightOnHover?: boolean | undefined;
  /**
   * How multiple selection should behave in the collection.
   */
  selectionBehavior?: "replace" | "toggle" | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * @default "\"\""
   */
  searchTerm?: string | undefined;
}
```

### Slots

```ts
/**
 * Slots for the CommandPalette component
 */
interface CommandPaletteSlots {
  empty(): any;
  footer(): any;
  back(): any;
  close(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-description(): any;
  item-trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the CommandPalette component
 */
interface CommandPaletteEmits {
  update:modelValue: (payload: [value: CommandPaletteItem]) => void;
  highlight: (payload: [payload: { ref: HTMLElement; value: CommandPaletteItem; } | undefined]) => void;
  entryFocus: (payload: [event: CustomEvent<any>]) => void;
  leave: (payload: [event: Event]) => void;
  update:open: (payload: [value: boolean]) => void;
  update:searchTerm: (payload: [value: string]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    commandPalette: {
      slots: {
        root: 'flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-color-design-tinted-na-stroke)',
        input: 'ps-[40px] pe-[44px]',
        close: '',
        back: 'p-0',
        content: 'relative overflow-hidden flex flex-col',
        footer: 'p-1',
        viewport: 'relative scroll-py-1 overflow-y-auto scrollbar-thin flex-1 focus:outline-none',
        group: 'p-1 isolate',
        empty: 'py-6 text-center text-(length:--ui-font-size-sm) text-(--b24ui-typography-description-color)',
        label: 'p-[6px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-label-color)',
        item: 'group relative w-full flex items-center gap-[6px] p-[6px] text-(length:--ui-font-size-sm) select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-(--ui-border-radius-sm) data-disabled:cursor-not-allowed data-disabled:opacity-30',
        itemLeadingIcon: 'shrink-0 size-[20px]',
        itemLeadingAvatar: 'shrink-0',
        itemLeadingAvatarSize: '2xs',
        itemLeadingChip: 'shrink-0 size-[20px]',
        itemLeadingChipSize: 'md',
        itemTrailing: 'ms-auto inline-flex gap-[6px] items-center',
        itemTrailingIcon: 'shrink-0 size-[20px] text-(--ui-color-accent-main-primary)',
        itemTrailingHighlightedIcon: 'shrink-0 size-[20px] text-(--b24ui-typography-label-color) hidden group-data-highlighted:inline-flex',
        itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
        itemTrailingKbdsSize: 'md',
        itemWrapper: 'flex-1 flex flex-col text-start min-w-0 overflow-hidden',
        itemLabel: 'truncate space-x-1 text-(--b24ui-typography-label-color)',
        itemDescription: 'truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
        itemLabelBase: 'text-(--b24ui-typography-label-color) [&>mark]:text-(--ui-color-black-base) [&>mark]:bg-(--ui-color-collab-accent-less-1)',
        itemLabelPrefix: 'text-(--b24ui-typography-legend-color)',
        itemLabelSuffix: 'truncate text-(--b24ui-typography-description-color) [&>mark]:text-(--ui-color-black-base) [&>mark]:bg-(--ui-color-collab-accent-less-1)'
      },
      variants: {
        virtualize: {
          true: {
            viewport: 'p-1 isolate'
          },
          false: {
            viewport: ''
          }
        },
        active: {
          true: {
            item: 'text-(--b24ui-typography-label-color) before:bg-(--ui-color-base-8)',
            itemLeadingIcon: 'text-(--b24ui-typography-legend-color)'
          },
          false: {
            item: 'text-(--b24ui-typography-legend-color) data-highlighted:not-data-disabled:text-(--b24ui-typography-legend-color) data-highlighted:not-data-disabled:before:bg-(--ui-color-bg-content-secondary) transition-colors before:transition-colors',
            itemLeadingIcon: 'text-(--b24ui-typography-legend-color) group-data-highlighted:not-group-data-disabled:text-(--b24ui-typography-legend-color) transition-colors'
          }
        },
        loading: {
          true: {
            itemLeadingIcon: 'animate-spin'
          }
        }
      }
    }
  }
})
```

---

# Container

> A box for centering and setting a maximum width for your content.

## Usage

```vue [ContainerExample.vue]
<template>
  <B24Container>
    <Placeholder class="h-32" />
  </B24Container>
</template>
```

## API

### Props

```ts
/**
 * Props for the Container component
 */
interface ContainerProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
}
```

### Slots

```ts
/**
 * Slots for the Container component
 */
interface ContainerSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    container: {
      base: 'w-full max-w-[1280px] mx-auto px-[22px]'
    }
  }
})
```

---

# ContentSearch

> A ready-to-use Command Palette component for your documentation.

> [!WARNING](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/content.md)
> This component is only available when the `@nuxt/content` module is installed.

## Usage

The ContentSearch component extends the [CommandPalette](https://bitrix24.github.io/b24ui/raw/docs/components/command-palette.md) component, so you can pass any property such as `icon`, `placeholder`, etc.

Use the `files` and `navigation` props with the `files`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} and `navigation`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} values you fetched using the `queryCollectionSearchSections` and `queryCollectionNavigation` composables from `@nuxt/content`.

```vue [ContentSearchExample.vue]
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const { data: files } = useLazyAsyncData('demo-search', () => queryCollectionSearchSections('docs'), {
  server: false
})

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

const searchTerm = ref('')
</script>

<template>
  <ClientOnly>
    <LazyB24ContentSearch
      v-model:search-term="searchTerm"
      open
      :autofocus="false"
      :files="files"
      :navigation="navigation"
      :fuse="{ resultLimit: 42 }"
    />
  </ClientOnly>
</template>
```

> !TIP
> You can open the CommandPalette by pressing `` ``, by using the [ContentSearchButton](https://bitrix24.github.io/b24ui/raw/docs/components/content-search-button.md) component or by using the `useContentSearch` composable: `const { open } = useContentSearch()`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts"}.

### Shortcut

Use the `shortcut` prop to change the shortcut used in [defineShortcuts](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md) to open the ContentSearch component. Defaults to `meta_k` (`` ``).

```vue [app.vue] {6}
<template>
  <B24App>
    <ClientOnly>
      <LazyB24ContentSearch
        v-model:search-term="searchTerm"
        shortcut="meta_k"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </B24App>
</template>
```

### Color Mode

By default, a group of commands will be added to the command palette so you can switch between light and dark mode. This will only take effect if the `colorMode` is not forced in a specific page which can be achieved through `definePageMeta`:

```vue [pages/index.vue]
<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>
```

You can disable this behavior by setting the `color-mode` prop to `false`:

```vue [app.vue] {6}
<template>
  <B24App>
    <ClientOnly>
      <LazyB24ContentSearch
        v-model:search-term="searchTerm"
        :color-mode="false"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </B24App>
</template>
```

## Examples

### Within `app.vue`

Use the ContentSearch component in your `app.vue` or in a layout:

```vue [app.vue]
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
  server: false
})

const links = [{
  label: 'Docs',
  to: '/docs/getting-started'
}, {
  label: 'Components',
  to: '/docs/components'
}, {
  label: 'Showcase',
  to: '/showcase'
}]

const searchTerm = ref('')
</script>

<template>
  <B24App>
    <ClientOnly>
      <LazyB24ContentSearch
        v-model:search-term="searchTerm"
        :files="files"
        shortcut="meta_k"
        :navigation="navigation"
        :links="links"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </B24App>
</template>
```

> !TIP
> It is recommended to wrap the `ContentSearch` component in a [ClientOnly](https://nuxt.com/docs/api/components/client-only){rel="nofollow"} component so it's not rendered on the server.

## API

### Props

```ts
/**
 * Props for the ContentSearch component
 */
interface ContentSearchProps {
  /**
   * The icon displayed in the input.
   */
  icon?: IconComponent | undefined;
  /**
   * The placeholder text for the input.
   */
  placeholder?: string | undefined;
  /**
   * Automatically focus the input when component is mounted.
   */
  autofocus?: boolean | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * Display a close button in the input (useful when inside a Modal for example).
   * `{ size: 'sm', color: 'air-tertiary-no-accent' }`{lang="ts-type"}
   * @default "true"
   */
  close?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the close button.
   */
  closeIcon?: IconComponent | undefined;
  /**
   * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://bitrix24.github.io/b24ui/docs/composables/define-shortcuts/))
   * @default "\"meta_k\""
   */
  shortcut?: string | undefined;
  /**
   * Links group displayed as the first group in the command palette.
   */
  links?: ContentSearchLink[] | undefined;
  navigation?: ContentNavigationItem[] | undefined;
  /**
   * Custom groups displayed between navigation and color mode group.
   */
  groups?: CommandPaletteGroup<ContentSearchItem>[] | undefined;
  files?: ContentSearchFile[] | undefined;
  /**
   * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://bitrix24.github.io/b24ui/docs/components/command-palette/).
   */
  fuse?: UseFuseOptions<ContentSearchLink> | undefined;
  /**
   * When `true`, the theme command will be added to the groups.
   * @default "true"
   */
  colorMode?: boolean | undefined;
  b24ui?: ({ modal?: ClassNameValue; input?: ClassNameValue; } & { root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; back?: ClassNameValue; content?: ClassNameValue; footer?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemTrailingHighlightedIcon?: ClassNameValue; itemTrailingKbds?: ClassNameValue; itemTrailingKbdsSize?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; itemLabelBase?: ClassNameValue; itemLabelPrefix?: ClassNameValue; itemLabelSuffix?: ClassNameValue; }) | undefined;
  title?: string | undefined;
  description?: string | undefined;
  /**
   * Render an overlay behind the modal.
   */
  overlay?: boolean | undefined;
  /**
   * Animate the modal when opening or closing.
   */
  transition?: boolean | undefined;
  /**
   * The content of the modal.
   */
  content?: (Omit<DialogContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DialogContentImplEmits>>) | undefined;
  /**
   * When `false`, the modal will not close when clicking outside or pressing escape.
   */
  dismissible?: boolean | undefined;
  /**
   * When `true`, the modal will take up the full screen.
   * @default "false"
   */
  fullscreen?: boolean | undefined;
  /**
   * The modality of the dialog When set to `true`, <br>
   * interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
   */
  modal?: boolean | undefined;
  /**
   * Render the modal in a portal.
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * @default "\"\""
   */
  searchTerm?: string | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ContentSearch component
 */
interface ContentSearchSlots {
  empty(): any;
  footer(): any;
  back(): any;
  close(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-description(): any;
  item-trailing(): any;
  content(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the ContentSearch component
 */
interface ContentSearchEmits {
  update:searchTerm: (payload: [value: string]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                                | Type                                                                                                                                                                                 |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `commandPaletteRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<InstanceType<typeof B24CommandPalette> | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    contentSearch: {
      slots: {
        modal: 'p-0 pt-0 pb-[10px]',
        input: ''
      },
      variants: {
        fullscreen: {
          false: {
            modal: 'sm:max-w-[768px] sm:h-[436px]'
          }
        }
      }
    }
  }
})
```

---

# ContentSearchButton

> A pre-styled button that opens the content search modal.

> [!WARNING](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/content.md)
> This component is only available when the `@nuxt/content` module is installed.

## Usage

The ContentSearchButton component is used to open the [ContentSearch](https://bitrix24.github.io/b24ui/raw/docs/components/content-search.md) modal.

```vue

<template>
  <B24ContentSearchButton />
</template>

```

It extends the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component, so you can pass any property such as `color`, `size`, etc.

```vue

<template>
  <B24ContentSearchButton color="air-primary" />
</template>

```

> [!NOTE](https://bitrix24.github.io/b24ui/#collapsed)
> The button defaults to `color="air-secondary-no-accent"` when not collapsed, `variant="air-tertiary-no-accent"` when collapsed.

### Collapsed

Use the `collapsed` prop to show the button's label and [kbds](https://bitrix24.github.io/b24ui/#kbds). Defaults to `true`.

```vue

<template>
  <B24ContentSearchButton :collapsed="false" />
</template>

```

### Kbds

Use the `kbds` prop to display keyboard keys in the button. Defaults to `['meta', 'K']`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} to match the default shortcut of the [ContentSearch](https://bitrix24.github.io/b24ui/raw/docs/components/content-search.md#shortcut) component.

```vue

<template>
  <B24ContentSearchButton :collapsed="false" :kbds="{'0':'alt','1':'O'}" />
</template>

```

## API

### Props

```ts
/**
 * Props for the ContentSearchButton component
 */
interface ContentSearchButtonProps {
  /**
   * The icon displayed in the button.
   */
  icon?: IconComponent | undefined;
  /**
   * The label displayed in the button.
   */
  label?: string | undefined;
  /**
   * The color of the button.
   * @default "\"air-tertiary-no-accent\""
   */
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link";
  /**
   * Whether the button is collapsed.
   * @default "true"
   */
  collapsed?: boolean | undefined;
  /**
   * Display a tooltip on the button when is collapsed with the button label.
   * This has priority over the global `tooltip` prop.
   * @default "false"
   */
  tooltip?: boolean | TooltipProps | undefined;
  /**
   * The keyboard keys to display in the button.
   * `{ accent: 'default' }`{lang="ts-type"}
   * @default "[\"meta\", \"k\"]"
   */
  kbds?: (string | undefined)[] | KbdProps[] | undefined;
  b24ui?: ({ base?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; trailing?: ClassNameValue; } & { base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; }) | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * Route Location the link should navigate to when clicked on.
   */
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  /**
   * The class to apply when the link is active
   */
  activeClass?: string | undefined;
  /**
   * Class to apply when the link is exact active
   */
  exactActiveClass?: string | undefined;
  /**
   * Value passed to the attribute `aria-current` when the link is exact active.
   */
  ariaCurrentValue?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
  /**
   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
   */
  viewTransition?: boolean | undefined;
  /**
   * Calls `router.replace` instead of `router.push`.
   */
  replace?: boolean | undefined;
  autofocus?: Booleanish | undefined;
  disabled?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  name?: string | undefined;
  /**
   * The type of the button when not a link.
   */
  type?: "reset" | "submit" | "button" | undefined;
  download?: any;
  /**
   * An alias for `to`. If used with `to`, `href` will be ignored
   */
  href?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  hreflang?: string | undefined;
  media?: string | undefined;
  ping?: string | undefined;
  /**
   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
   */
  rel?: "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | (string & {}) | null | undefined;
  /**
   * Where to display the linked URL, as the name for a browsing context.
   */
  target?: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  onClick?: ((event: MouseEvent) => void | Promise<void>) | ((event: MouseEvent) => void | Promise<void>)[] | undefined;
  /**
   * The element or component this component should render as when not a link.
   */
  as?: any;
  /**
   * Force the link to be active independent of the current route.
   */
  active?: boolean | undefined;
  /**
   * Will only be active if the current route is an exact match.
   */
  exact?: boolean | undefined;
  /**
   * Allows controlling how the current route query sets the link as active.
   */
  exactQuery?: boolean | "partial" | undefined;
  /**
   * Will only be active if the current route hash is an exact match.
   */
  exactHash?: boolean | undefined;
  /**
   * The class to apply when the link is inactive
   */
  inactiveClass?: string | undefined;
  /**
   * When `true`, uses special underlined styling.
   */
  isAction?: boolean | undefined;
  /**
   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
   */
  external?: boolean | undefined;
  /**
   * If set to true, no rel attribute will be added to the link
   */
  noRel?: boolean | undefined;
  /**
   * A class to apply to links that have been prefetched.
   */
  prefetchedClass?: string | undefined;
  /**
   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
   */
  prefetch?: boolean | undefined;
  /**
   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
   */
  prefetchOn?: "visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }> | undefined;
  /**
   * Escape hatch to disable `prefetch` attribute.
   */
  noPrefetch?: boolean | undefined;
  /**
   * An option to either add or remove trailing slashes in the `href` for this specific link.
   * Overrides the global `trailingSlash` option if provided.
   */
  trailingSlash?: "append" | "remove" | undefined;
  activeColor?: "default" | "air-tertiary-no-accent" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-selection" | "air-boost" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "link" | undefined;
  size?: "xs" | "md" | "xss" | "sm" | "lg" | "xl" | undefined;
  /**
   * Rounds the corners of the button
   */
  rounded?: boolean | undefined;
  /**
   * Render the button full width
   */
  block?: boolean | undefined;
  /**
   * Set loading state automatically based on the `@click` promise state
   */
  loadingAuto?: boolean | undefined;
  /**
   * Disable uppercase label
   */
  normalCase?: boolean | undefined;
  /**
   * Shows LoaderWaitIcon in loading mode
   */
  useWait?: boolean | undefined;
  /**
   * Shows LoaderClockIcon icon in loading mode
   */
  useClock?: boolean | undefined;
  /**
   * Shows icons.ChevronDownSIcon on the right side
   */
  useDropdown?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ContentSearchButton component
 */
interface ContentSearchButtonSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    contentSearchButton: {
      slots: {
        base: '',
        baseLine: '',
        label: '',
        trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
      },
      variants: {
        collapsed: {
          true: {
            baseLine: 'ps-[5px] pe-[5px]',
            label: 'hidden',
            trailing: 'lg:hidden'
          }
        }
      }
    }
  }
})
```

---

# ContentSurround

> A pair of "Previous" and "Next" buttons for sequential page navigation.

> [!WARNING](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/content.md)
> This component is only available when the `@nuxt/content` module is installed.

## Usage

Use the `surround` prop with the `surround`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} value you get when fetching a page surround.

```vue [ContentSurroundExample.vue]
<script setup lang="ts">
import { withoutTrailingSlash, withTrailingSlash } from 'ufo'

const route = useRoute()

const { data: surround } = await useAsyncData(`${route.path}-surround`, async () => {
  const surround = await queryCollectionItemSurroundings('docs', withoutTrailingSlash(route.path), {
    fields: ['description']
  })
  if (surround[0]) {
    surround[0].path = withTrailingSlash(surround[0].path)
  }
  if (surround[1]) {
    surround[1].path = withTrailingSlash(surround[1].path)
  }

  return surround
})
</script>

<template>
  <B24ContentSurround :surround="(surround as any)" />
</template>
```

### Prev / Next

Use the `prev-icon` and `next-icon` props to customize the buttons [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const surround = ref([
  {
    title: 'ContentSearchButton',
    path: '/docs/components/content-search-button/',
    stem: '3.components/content-search-button',
    description: 'A pre-styled Button to open the ContentSearch modal.'
  },
  {
    title: 'ContentToc',
    path: '/docs/components/content-toc/',
    stem: '3.components/content-toc',
    description: 'A sticky Table of Contents with customizable slots.'
  }
])
</script>

<template>
  <B24ContentSurround :prev-icon="RocketIcon" :next-icon="RocketIcon" :surround="surround" />
</template>

```

## Examples

### Within a page

Use the ContentSurround component in a page to display the prev and next links:

```vue [pages/[...slug\\].vue] {23}
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

<template>
  <template v-if="page">
    <ProseH1>{{ page.title }}</ProseH1>

    <template v-if="page?.body?.toc?.links?.length">
      <B24ContentToc :links="page.body.toc.links" />
    </template>

    <div>
      <ContentRenderer v-if="page.body" :value="page" />

      <B24Separator v-if="surround?.filter(Boolean).length" class="my-4" />

      <B24ContentSurround :surround="(surround as any)" />
    </div>
  </template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ContentSurround component
 */
interface ContentSurroundProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The icon displayed in the prev link.
   */
  prevIcon?: IconComponent | undefined;
  /**
   * The icon displayed in the next link.
   */
  nextIcon?: IconComponent | undefined;
  surround?: ContentSurroundLink[] | undefined;
  b24ui?: { root?: ClassNameValue; link?: ClassNameValue; linkLeading?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkTitle?: ClassNameValue; linkDescription?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ContentSurround component
 */
interface ContentSurroundSlots {
  link(): any;
  link-leading(): any;
  link-title(): any;
  link-description(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    contentSurround: {
      slots: {
        root: 'grid grid-cols-1 sm:grid-cols-2 gap-[32px]',
        link: 'group block backdrop-blur-md rounded-(--ui-border-radius-md) px-[24px] py-[32px] bg-(--ui-color-design-outline-bg) border border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) transition-colors',
        linkLeading: 'inline-flex items-center rounded-full select-none mb-[16px] p-[6px] bg-(--ui-color-design-outline-bg) group-hover:bg-[color-mix(in_srgb,_var(--ui-color-design-selection-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))] ring-(--ui-color-design-outline-stroke) ring-(length:--ui-design-outline-stroke-weight) group-hover:ring-[color-mix(in_srgb,_var(--ui-color-design-selection-stroke)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))] transition',
        linkLeadingIcon: 'size-[20px] shrink-0 text-(--ui-color-design-outline-content-icon) group-hover:text-(--ui-color-design-outline-content-icon-alt) transition-[color,translate]',
        linkTitle: 'font-(--ui-font-weight-bold) text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) text-(--ui-color-design-outline-content) mb-[4px] truncate',
        linkDescription: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) text-(--ui-color-design-outline-content-secondary) text-pretty line-clamp-2'
      },
      variants: {
        direction: {
          left: {
            linkLeadingIcon: 'group-active:-translate-x-0.5'
          },
          right: {
            link: 'text-right',
            linkLeadingIcon: 'group-active:translate-x-0.5'
          }
        }
      }
    }
  }
})
```

---

# ContentToc

> A sticky table of contents component with dynamic active section highlighting.

> [!WARNING](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/content.md)
> This component is only available when the `@nuxt/content` module is installed.

## Usage

Use the `links` prop with the `page?.body?.toc?.links`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} you get when fetching a page.

```vue [ContentTocExample.vue]
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

<template>
  <B24ContentToc :links="page?.body?.toc?.links" />
</template>
```

### Title

Use the `title` prop to change the title of the Table of Contents.

```vue

<script setup lang="ts">
const links = ref([
  {
    id: 'usage',
    depth: 2,
    text: 'Usage',
    children: [
      {
        id: 'title',
        depth: 3,
        text: 'Title'
      }
    ]
  },
  {
    id: 'api',
    depth: 2,
    text: 'API',
    children: [
      {
        id: 'props',
        depth: 3,
        text: 'Props'
      },
      {
        id: 'slots',
        depth: 3,
        text: 'Slots'
      }
    ]
  },
  {
    id: 'theme',
    depth: 2,
    text: 'Theme'
  }
])
</script>

<template>
  <B24ContentToc title="On this page" :links="links" />
</template>

```

## Examples

### Within a page

Use the ContentToc component in a page to display the Table of Contents:

```vue [pages/[...slug\\].vue] {14-16}
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

<template>
  <template v-if="page">
    <ProseH1>{{ page.title }}</ProseH1>

    <template v-if="page?.body?.toc?.links?.length">
      <B24ContentToc :links="page.body.toc.links" />
    </template>

    <div>
      <ContentRenderer v-if="page.body" :value="page" />

      <B24Separator v-if="surround?.filter(Boolean).length" class="my-4" />

      <B24ContentSurround :surround="(surround as any)" />
    </div>
  </template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ContentToc component
 */
interface ContentTocProps {
  /**
   * The element or component this component should render as.
   * @default "\"nav\""
   */
  as?: any;
  /**
   * The icon displayed to collapse the content.
   */
  trailingIcon?: IconComponent | undefined;
  /**
   * The title of the table of contents.
   */
  title?: string | undefined;
  links?: ContentTocLink[] | undefined;
  b24ui?: { root?: ClassNameValue; container?: ClassNameValue; top?: ClassNameValue; bottom?: ClassNameValue; trigger?: ClassNameValue; title?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; content?: ClassNameValue; list?: ClassNameValue; listWithChildren?: ClassNameValue; item?: ClassNameValue; itemWithChildren?: ClassNameValue; link?: ClassNameValue; linkText?: ClassNameValue; } | undefined;
  /**
   * The open state of the collapsible when it is initially rendered. <br> Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The controlled open state of the collapsible. Can be binded with `v-model`.
   */
  open?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ContentToc component
 */
interface ContentTocSlots {
  leading(): any;
  default(): any;
  trailing(): any;
  content(): any;
  link(): any;
  top(): any;
  bottom(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the ContentToc component
 */
interface ContentTocEmits {
  update:open: (payload: [value: boolean]) => void;
  move: (payload: [id: string]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    contentToc: {
      slots: {
        root: '',
        container: 'border-dashed border-b-(length:--ui-border-width-thick) border-(--ui-color-divider-vibrant-default) lg:border-0 flex flex-col',
        top: '',
        bottom: 'hidden lg:flex lg:flex-col gap-[24px]',
        trigger: 'group pb-[12px] cursor-pointer lg:cursor-text focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-2 focus-visible:rounded-[4px] text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-lg)/(--ui-font-line-height-3xs) font-(--ui-font-weight-semi-bold) flex-1 flex items-center gap-[6px]',
        title: 'line-clamp-1 lg:line-clamp-2',
        trailing: 'ms-auto inline-flex gap-[6px] items-center',
        trailingIcon: 'size-[20px] transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden',
        content: 'motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none',
        list: 'min-w-0',
        listWithChildren: 'ms-[12px]',
        item: 'min-w-0',
        itemWithChildren: '',
        link: 'group relative text-(length:--ui-font-size-lg)/(--ui-font-line-height-3xs) flex items-center focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-(--b24ui-typography-description-color) underline-offset-2 hover:text-(--b24ui-typography-label-color) hover:underline pb-[12px]',
        linkText: 'line-clamp-2'
      },
      variants: {
        active: {
          false: {
            link: 'text-(--b24ui-typography-description-color) hover:text-(--b24ui-typography-label-color) transition-colors'
          }
        },
        body: {
          true: {
            bottom: 'mt-6'
          }
        }
      },
      compoundVariants: [
        {
          active: true,
          class: {
            link: 'text-(--b24ui-typography-label-color)',
            linkLeadingIcon: 'text-(--b24ui-typography-label-color)'
          }
        }
      ],
      defaultVariants: {}
    }
  }
})
```

---

# ContextMenu

> A pop-up menu that appears upon right-clicking an element to present relevant actions.

## Usage

Use anything you like in the default slot of the ContextMenu, and right-click on it to display the menu.

```vue

<script setup lang="ts">
const items = ref([
  [
    {
      label: 'Appearance',
      children: [
        {
          label: 'System'
        },
        {
          label: 'Light'
        },
        {
          label: 'Dark'
        }
      ]
    }
  ],
  [
    {
      label: 'Show Sidebar',
      kbds: [
        'meta',
        's'
      ]
    },
    {
      label: 'Show Toolbar',
      kbds: [
        'shift',
        'meta',
        'd'
      ]
    },
    {
      label: 'Collapse Pinned Tabs',
      disabled: true
    }
  ],
  [
    {
      label: 'Refresh the Page'
    },
    {
      label: 'Clear Cookies and Refresh'
    },
    {
      label: 'Clear Cache and Refresh'
    },
    {
      type: 'separator'
    },
    {
      label: 'Developer',
      children: [
        [
          {
            label: 'View Source',
            kbds: [
              'meta',
              'shift',
              'u'
            ]
          },
          {
            label: 'Developer Tools',
            kbds: [
              'option',
              'meta',
              'i'
            ]
          },
          {
            label: 'Inspect Elements',
            kbds: [
              'option',
              'meta',
              'c'
            ]
          }
        ],
        [
          {
            label: 'JavaScript Console',
            kbds: [
              'option',
              'meta',
              'j'
            ]
          }
        ]
      ]
    }
  ]
])
</script>

<template>
  <B24ContextMenu :items="items">
<div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-bg-content-primary) text-(length:--ui-font-size-sm) aspect-video w-72">
  Right click here
</div>
</B24ContextMenu>
</template>

```

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `kbds?: string[] | KbdProps[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`type?: "link" | "label" | "separator" | "checkbox"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-checkbox-items)
- [`color?: ContextMenu['color']"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-color-items)
- [`checked?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-checkbox-items)
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `onSelect?: (e: Event) => void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`onUpdateChecked?: (checked: boolean) => void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-checkbox-items)
- `children?: ContextMenuItem[] | ContextMenuItem[][]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

You can pass any property from the [Link](https://bitrix24.github.io/b24ui/raw/docs/components/link.md#props) component such as `to`, `target`, etc.

```vue

<script setup lang="ts">
import type { ContextMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<ContextMenuItem[][]>([
  [
    {
      label: 'Appearance',
      children: [
        {
          label: 'System'
        },
        {
          label: 'Light'
        },
        {
          label: 'Dark'
        }
      ]
    }
  ],
  [
    {
      label: 'Show Sidebar',
      kbds: [
        'meta',
        's'
      ]
    },
    {
      label: 'Show Toolbar',
      kbds: [
        'shift',
        'meta',
        'd'
      ]
    },
    {
      label: 'Collapse Pinned Tabs',
      disabled: true
    }
  ],
  [
    {
      label: 'Refresh the Page'
    },
    {
      label: 'Clear Cookies and Refresh'
    },
    {
      label: 'Clear Cache and Refresh'
    },
    {
      type: 'separator'
    },
    {
      label: 'Developer',
      children: [
        [
          {
            label: 'View Source',
            kbds: [
              'meta',
              'shift',
              'u'
            ]
          },
          {
            label: 'Developer Tools',
            kbds: [
              'option',
              'meta',
              'i'
            ]
          },
          {
            label: 'Inspect Elements',
            kbds: [
              'option',
              'meta',
              'c'
            ]
          }
        ],
        [
          {
            label: 'JavaScript Console',
            kbds: [
              'option',
              'meta',
              'j'
            ]
          }
        ]
      ]
    }
  ]
])
</script>

<template>
  <B24ContextMenu :items="items">
<div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-design-outline-na-stroke) text-(length:--ui-font-size-sm) bg-(--ui-color-bg-content-primary) aspect-video w-72">
  Right click here
</div>
</B24ContextMenu>
</template>

```

> !NOTE
> You can also pass an array of arrays to the `items` prop to create separated groups of items.

> !TIP
> Each item can take a `children` array of objects with the same properties as the `items` prop to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.

### Modal

Use the `modal` prop to control whether the ContextMenu blocks interaction with outside content. Defaults to `true`.

```vue

<script setup lang="ts">
import type { ContextMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<ContextMenuItem[]>([
  {
    label: 'System'
  },
  {
    label: 'Light'
  },
  {
    label: 'Dark'
  }
])
</script>

<template>
  <B24ContextMenu :modal="false" :items="items" :b24ui="{content:'w-48'}">
<div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-design-outline-na-stroke) text-(length:--ui-font-size-sm) bg-(--ui-color-bg-content-primary) aspect-video w-72">
  Right click here
</div>
</B24ContextMenu>
</template>

```

### Disabled

Use the `disabled` prop to disable the ContextMenu.

```vue

<script setup lang="ts">
import type { ContextMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<ContextMenuItem[]>([
  {
    label: 'System'
  },
  {
    label: 'Light'
  },
  {
    label: 'Dark'
  }
])
</script>

<template>
  <B24ContextMenu disabled :items="items">
<div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-design-outline-na-stroke) text-(length:--ui-font-size-sm) bg-(--ui-color-bg-content-primary) aspect-video w-72">
  Right click here
</div>
</B24ContextMenu>
</template>

```

## Examples

### With checkbox items

You can use the `type` property with `checkbox` and use the `checked` / `onUpdateChecked` properties to control the checked state of the item.

```vue [ContextMenuCheckboxItemsExample.vue]
<script setup lang="ts">
import type { ContextMenuItem } from '@bitrix24/b24ui-nuxt'

const showSidebar = ref(true)
const showToolbar = ref(false)

const items = computed<ContextMenuItem[]>(() => [
  {
    label: 'View',
    type: 'label' as const
  },
  {
    label: 'Show Sidebar',
    type: 'checkbox' as const,
    checked: showSidebar.value,
    onUpdateChecked(checked: boolean) {
      showSidebar.value = checked
    },
    onSelect(e: Event) {
      e.preventDefault()
    }
  },
  {
    label: 'Show Toolbar',
    type: 'checkbox' as const,
    checked: showToolbar.value,
    onUpdateChecked(checked: boolean) {
      showToolbar.value = checked
    }
  },
  {
    type: 'separator' as const
  },
  {
    label: 'Collapse Pinned Tabs',
    type: 'checkbox' as const,
    disabled: true
  }
])
</script>

<template>
  <B24ContextMenu :items="items">
    <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-design-outline-na-stroke) text-(length:--ui-font-size-sm) bg-(--ui-color-bg-content-primary) aspect-video w-72">
      Right click here
    </div>
  </B24ContextMenu>
</template>
```

> !NOTE
> To ensure reactivity for the `checked` state of items, it's recommended to wrap your `items` array inside a `computed`.

### With color items

You can use the `color` property to highlight certain items with a color.

```vue [ContextMenuColorItemsExample.vue]
<script setup lang="ts">
import type { ContextMenuItem } from '@bitrix24/b24ui-nuxt'
import OpenedEyeIcon from '@bitrix24/b24icons-vue/main/OpenedEyeIcon'
import TrashBinIcon from '@bitrix24/b24icons-vue/main/TrashBinIcon'
import CopyPlatesIcon from '@bitrix24/b24icons-vue/actions/CopyPlatesIcon'
import PencilDrawIcon from '@bitrix24/b24icons-vue/actions/PencilDrawIcon'

const items: ContextMenuItem[][] = [
  [
    {
      label: 'View',
      icon: OpenedEyeIcon
    },
    {
      label: 'Copy',
      icon: CopyPlatesIcon
    },
    {
      label: 'Edit',
      icon: PencilDrawIcon
    }
  ],
  [
    {
      label: 'Delete',
      color: 'air-primary-alert' as const,
      icon: TrashBinIcon
    }
  ]
]
</script>

<template>
  <B24ContextMenu :items="items">
    <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-design-outline-na-stroke) text-(length:--ui-font-size-sm) bg-(--ui-color-bg-content-primary) aspect-video w-72">
      Right click here
    </div>
  </B24ContextMenu>
</template>
```

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-leading`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-label`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-trailing`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [ContextMenuCustomSlotExample.vue]
<script setup lang="ts">
import type { ContextMenuItem } from '@bitrix24/b24ui-nuxt'
import SpinnerIcon from '@bitrix24/b24icons-vue/specialized/SpinnerIcon'

const loading = ref(true)

const items = [
  {
    label: 'Refresh the Page',
    slot: 'refresh' as const
  },
  {
    label: 'Clear Cookies and Refresh'
  },
  {
    label: 'Clear Cache and Refresh'
  }
] satisfies ContextMenuItem[]
</script>

<template>
  <B24ContextMenu :items="items">
    <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-design-outline-na-stroke) text-(length:--ui-font-size-sm) bg-(--ui-color-bg-content-primary) aspect-video w-72">
      Right click here
    </div>

    <template #refresh-label>
      {{ loading ? 'Refreshing...' : 'Refresh the Page' }}
    </template>

    <template #refresh-trailing>
      <SpinnerIcon v-if="loading" class="shrink-0 size-5 text-(--ui-color-accent-main-primary) animate-spin" />
    </template>
  </B24ContextMenu>
</template>
```

> [!TIP](https://bitrix24.github.io/b24ui/#slots)
> You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.

### Extract shortcuts

When you have some items with `kbds` property (displaying some [Kbd](https://bitrix24.github.io/b24ui/raw/docs/components/kbd.md)), you can easily make them work with the [defineShortcuts](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md) composable.

Inside the `defineShortcuts` composable, there is an `extractShortcuts` utility that will extract the shortcuts recursively from the items and return an object that you can pass to `defineShortcuts`. It will automatically call the `select` function of the item when the shortcut is pressed.

```vue
<script setup lang="ts">
const items = [
  [{
    label: 'Show Sidebar',
    kbds: ['meta', 'S'],
    onSelect() {
      console.log('Show Sidebar clicked')
    }
  }, {
    label: 'Show Toolbar',
    kbds: ['shift', 'meta', 'D'],
    onSelect() {
      console.log('Show Toolbar clicked')
    }
  }, {
    label: 'Collapse Pinned Tabs',
    disabled: true
  }], [{
    label: 'Refresh the Page'
  }, {
    label: 'Clear Cookies and Refresh'
  }, {
    label: 'Clear Cache and Refresh'
  }, {
    type: 'separator' as const
  }, {
    label: 'Developer',
    children: [[{
      label: 'View Source',
      kbds: ['option', 'meta', 'U'],
      onSelect() {
        console.log('View Source clicked')
      }
    }, {
      label: 'Developer Tools',
      kbds: ['option', 'meta', 'I'],
      onSelect() {
        console.log('Developer Tools clicked')
      }
    }], [{
      label: 'Inspect Elements',
      kbds: ['option', 'meta', 'C'],
      onSelect() {
        console.log('Inspect Elements clicked')
      }
    }], [{
      label: 'JavaScript Console',
      kbds: ['option', 'meta', 'J'],
      onSelect() {
        console.log('JavaScript Console clicked')
      }
    }]]
  }]
]

defineShortcuts(extractShortcuts(items))
</script>
```

> !NOTE
> In this example, `` ``, `` `` ``, `` `` ``, `` `` ``, `` `` `` and `` `` `` would trigger the `select` function of the corresponding item.

## API

### Props

```ts
/**
 * Props for the ContextMenu component
 */
interface ContextMenuProps {
  items?: ArrayOrNested<ContextMenuItem> | undefined;
  /**
   * The icon displayed when an item is checked.
   */
  checkedIcon?: IconComponent | undefined;
  /**
   * The icon displayed when an item is loading.
   */
  loadingIcon?: IconComponent | undefined;
  /**
   * The icon displayed when the item is an external link.
   * Set to `false` to hide the external icon.
   * @default "true"
   */
  externalIcon?: boolean | IconComponent | undefined;
  /**
   * The content of the menu.
   */
  content?: (Omit<ContextMenuContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<MenuContentEmits>>) | undefined;
  /**
   * Render the menu in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<ArrayOrNested<ContextMenuItem>> | undefined;
  /**
   * The key used to get the description from the item.
   * @default "\"description\""
   */
  descriptionKey?: GetItemKeys<ArrayOrNested<ContextMenuItem>> | undefined;
  disabled?: boolean | undefined;
  b24ui?: { content?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemTrailingKbds?: ClassNameValue; itemWrapper?: ClassNameValue; itemTrailingKbdsSize?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; itemLabelExternalIcon?: ClassNameValue; } | undefined;
  /**
   * The modality of the dropdown menu.
   * 
   * When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
   * @default "true"
   */
  modal?: boolean | undefined;
  /**
   * The duration from when the trigger is pressed until the menu opens.
   */
  pressOpenDelay?: number | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ContextMenu component
 */
interface ContextMenuSlots {
  default(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-description(): any;
  item-trailing(): any;
  content-top(): any;
  content-bottom(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the ContextMenu component
 */
interface ContextMenuEmits {
  update:open: (payload: [payload: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    contextMenu: {
      slots: {
        content: 'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto',
        viewport: 'relative w-full max-h-[40vh] min-w-[120px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar-thin',
        group: 'grid',
        label: 'w-full h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)',
        separator: 'my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)',
        item: 'group w-full h-[36px] px-[18px] mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) data-highlighted:text-(--menu-popup-item-color-hover) data-[state=open]:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover) data-highlighted:bg-(--menu-popup-item-bg-color-hover) data-[state=open]:bg-(--menu-popup-item-bg-color-hover) transition-colors',
        itemLeadingIcon: 'shrink-0 size-[18px] text-(--ui-color-design-plain-content-icon-secondary) group-data-highlighted:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary) group-data-[state=checked]:text-(--ui-color-accent-main-primary) transition-colors',
        itemLeadingAvatar: 'shrink-0 size-[16px] me-[12px]',
        itemLeadingAvatarSize: '2xs',
        itemTrailing: 'ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center',
        itemTrailingIcon: 'shrink-0 size-[24px] text-(--ui-color-accent-main-primary)',
        itemTrailingKbds: 'shrink-0 hidden lg:inline-flex items-center gap-0.5',
        itemWrapper: 'flex-1 flex flex-col text-start min-w-0',
        itemTrailingKbdsSize: 'md',
        itemLabel: 'max-w-[240px] truncate -mt-px group-data-[state=checked]:text-(--ui-color-accent-main-primary)',
        itemDescription: 'max-w-[240px] truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
        itemLabelExternalIcon: 'inline-block size-[16px] text-(--ui-color-design-plain-content-icon-secondary)'
      },
      variants: {
        color: {
          'air-primary': {
            item: 'style-filled'
          },
          'air-primary-success': {
            item: 'style-filled-success'
          },
          'air-primary-alert': {
            item: 'style-filled-alert'
          },
          'air-primary-copilot': {
            item: 'style-filled-copilot'
          },
          'air-primary-warning': {
            item: 'style-filled-warning'
          }
        },
        active: {
          true: {
            item: 'text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary)',
            itemLeadingIcon: 'text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary)'
          },
          false: {}
        },
        loading: {
          true: {
            itemLeadingIcon: 'animate-spin'
          }
        }
      },
      compoundVariants: [
        {
          color: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)'
          }
        },
        {
          color: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        }
      ],
      defaultVariants: {}
    }
  }
})
```

---

# Countdown

> Countdown with options control.

## Usage

Use the `seconds` prop to set the number of seconds to Countdown.

```vue

<template>
  <B24Countdown :seconds="120" />
</template>

```

### Show minutes

Use the `show-minutes` property to show or hide the minutes in the Countdown. Default value: `true`.

```vue

<template>
  <B24Countdown :show-minutes="false" :seconds="120" />
</template>

```

### Size

Use the `size` prop to change the size of the Countdown.

```vue

<template>
  <B24Countdown size="xl" :seconds="120" />
</template>

```

### Use Circle

Use the `useCircle` property to display a `circle` around the Countdown.

```vue

<template>
  <B24Countdown use-circle :seconds="120" size="xl" />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Countdown :icon="RocketIcon" :seconds="120" size="xl" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md).

```vue

<template>
  <B24Countdown :avatar="{src:'/b24ui/avatar/employee.png'}" :seconds="120" size="xl" />
</template>

```

## Examples

### Information displayed

You can manage information using the default slot.

```vue [CountdownInformationDisplayedExample.vue]
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(2 * 24 * 60 * 60)
</script>

<template>
  <B24Countdown
    v-slot="{ days, hours, minutes, seconds }"
    :seconds="value"
  >
    Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds.
  </B24Countdown>
</template>
```

### With interval

You can control the countdown interval using the `interval` prop.

```vue [CountdownIntervalExample.vue]
<script setup lang="ts">
import { ref } from 'vue'

const now = new Date()
const newYear = new Date(now.getFullYear() + 1, 0, 1)

const secondsNY = ref((newYear.getTime() - now.getTime()) / 1000)
</script>

<template>
  <B24Countdown
    v-slot="{ days, hours, minutes, seconds, milliseconds }"
    :seconds="secondsNY"
    :interval="100"
  >
    <span>New Year Countdown：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }}.<small>{{ Math.floor(milliseconds / 100) }}</small> seconds.</span>
  </B24Countdown>
</template>
```

### Handling countdown emits

Use emit `start`, `end`, `abort`, `progress` to respond to countdown events.

```vue [CountdownEmitsExample.vue]
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(5)
const counting = ref(false)

const startCountdown = () => {
  counting.value = true
}

const onCountdownEnd = () => {
  counting.value = false
}
</script>

<template>
  <B24Button
    color="air-primary"
    size="xl"
    :disabled="counting"
    @click="startCountdown"
  >
    <B24Countdown
      v-if="counting"
      v-slot="{ totalSeconds }"
      :seconds="value"
      class="text-white dark:text-white text-xl leading-none"
      @end="onCountdownEnd"
    >
      Fetch again {{ totalSeconds }} sec. later
    </B24Countdown>
    <span v-else>
      Fetch Verification Code
    </span>
  </B24Button>
</template>
```

## API

### Props

```ts
/**
 * Props for the Countdown component
 */
interface CountdownProps {
  /**
   * The element or component this component should render as
   * @default "\"span\""
   */
  as?: any;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  /**
   * Emits the countdown events
   * @default "true"
   */
  emitEvents?: boolean | undefined;
  /**
   * Number of seconds to countdown
   * @default "0"
   */
  seconds?: string | number | undefined;
  /**
   * Should seconds be divided into minutes?
   * @default "true"
   */
  showMinutes?: boolean | undefined;
  /**
   * Shows a `Circle` around the countdown
   * @default "false"
   */
  useCircle?: boolean | undefined;
  /**
   * The interval time (in milliseconds) of the countdown progress
   * @default "1000"
   */
  interval?: number | undefined;
  /**
   * Starts the countdown automatically when initialized
   * @default "true"
   */
  needStartImmediately?: boolean | undefined;
  /**
   * Generate the current time of a specific time zone
   * @default "Date.now()"
   */
  now?: (() => number) | undefined;
  b24ui?: { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; circleBase?: ClassNameValue; circleGroup?: ClassNameValue; circleElement?: ClassNameValue; circlePath?: ClassNameValue; } | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Countdown component
 */
interface CountdownSlots {
  leading(): any;
  default(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Countdown component
 */
interface CountdownEmits {
  abort: (payload: []) => void;
  progress: (payload: [value: CountdownData]) => void;
  start: (payload: []) => void;
  end: (payload: []) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    countdown: {
      slots: {
        base: 'relative flex flex-row flex-nowrap items-center justify-between text-(--b24ui-typography-legend-color)',
        label: '',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        circleBase: '-scale-x-100 absolute inset-x-0 inset-y-0',
        circleGroup: 'fill-none stroke-none',
        circleElement: 'stroke-transparent stroke-1',
        circlePath: 'stroke-[7px] rotate-90 origin-center stroke-current transition-all duration-1000 ease-linear'
      },
      variants: {
        size: {
          xs: {
            base: 'gap-0.5 text-(length:--ui-font-size-5xs)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-sm',
            leadingAvatarSize: '3xs'
          },
          sm: {
            base: 'gap-1 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-sm2',
            leadingAvatarSize: '3xs'
          },
          md: {
            base: 'gap-1 text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-[16px]',
            leadingAvatarSize: '3xs'
          },
          lg: {
            base: 'gap-1 text-(length:--ui-font-size-lg)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs'
          },
          xl: {
            base: 'gap-1 text-(length:--ui-font-size-xl)/(--ui-font-line-height-reset)',
            leadingIcon: 'size-[26px]',
            leadingAvatarSize: 'xs'
          }
        },
        leading: {
          true: ''
        },
        useCircle: {
          true: {
            base: 'justify-center',
            circleBase: 'size-full'
          }
        }
      },
      compoundVariants: [
        {
          size: 'xs',
          useCircle: true,
          class: 'text-(length:--ui-font-size-7xs)/[normal] p-0.5'
        },
        {
          size: 'sm',
          useCircle: true,
          class: 'text-(length:--ui-font-size-6xs)/[normal] p-1.5'
        },
        {
          size: 'md',
          useCircle: true,
          class: 'text-(length:--ui-font-size-3xs)/[normal] p-1.5'
        },
        {
          size: 'lg',
          useCircle: true,
          class: 'text-(length:--ui-font-size-xs)/[normal] p-1.5 pb-2'
        },
        {
          size: 'xl',
          useCircle: true,
          class: 'text-(length:--ui-font-size-sm)/[normal] p-2 pb-2.5'
        }
      ],
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
```

---

# DashboardGroup

> A fixed-layout dashboard container with sidebar state management and persistent UI state.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage

The DashboardGroup component is the main layout that wraps the [SidebarLayout](https://bitrix24.github.io/b24ui/raw/docs/components/sidebar-layout.md) components to create a responsive dashboard interface.

Use it in a layout or in your `app.vue`:

```vue [layouts/dashboard.vue] {2,6}
<template>
  <B24DashboardGroup>
    <B24SidebarLayout>
      <slot />
    <B24SidebarLayout>
  </B24DashboardGroup>
</template>
```

## API

### Props

```ts
/**
 * Props for the DashboardGroup component
 */
interface DashboardGroupProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The id of the SidebarLayout.
   */
  id?: string | undefined;
  /**
   * The storage to use for the size.
   * @default "\"cookie\""
   */
  storage?: "cookie" | "local" | undefined;
  /**
   * Unique id used to auto-save size.
   * @default "\"dashboard\""
   */
  storageKey?: string | undefined;
}
```

### Slots

```ts
/**
 * Slots for the DashboardGroup component
 */
interface DashboardGroupSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    dashboardGroup: {
      base: ''
    }
  }
})
```

---

# DashboardSearch

> A ready-to-use Command Palette component for your dashboard.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage

The DashboardSearch component extends the [CommandPalette](https://bitrix24.github.io/b24ui/raw/docs/components/command-palette.md) component, so you can pass any property such as `icon`, `placeholder`, etc.

Use it inside the default slot of the [DashboardGroup](https://bitrix24.github.io/b24ui/raw/docs/components/dashboard-group.md) component:

```vue [layouts/dashboard.vue] {10}
<template>
  <B24DashboardGroup>
    <B24SidebarLayout>
      <template #navbar>
        <B24NavbarSection>
          <B24DashboardSearchButton />
        </B24NavbarSection>
      </template>
  
      <B24DashboardSearch />
  
      <slot />
    </B24SidebarLayout>
  </B24DashboardGroup>
</template>
```

> !TIP
> You can open the CommandPalette by pressing `` ``, by using the [DashboardSearchButton](https://bitrix24.github.io/b24ui/raw/docs/components/dashboard-search-button.md) component or by using a `v-model:open`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts"} directive.

### Shortcut

Use the `shortcut` prop to change the shortcut used in [defineShortcuts](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md) to open the ContentSearch component. Defaults to `meta_k` (`` ``).

```vue [app.vue] {4}
<template>
  <B24DashboardSearch
    v-model:search-term="searchTerm"
    shortcut="meta_k"
    :groups="groups"
    :fuse="{ resultLimit: 42 }"
  />
</template>
```

### Color Mode

By default, a group of commands will be added to the command palette so you can switch between light and dark mode. This will only take effect if the `colorMode` is not forced in a specific page which can be achieved through `definePageMeta`:

```vue [pages/index.vue]
<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>
```

You can disable this behavior by setting the `color-mode` prop to `false`:

```vue [app.vue] {4}
<template>
  <B24DashboardSearch
    v-model:search-term="searchTerm"
    :color-mode="false"
    :groups="groups"
    :fuse="{ resultLimit: 42 }"
  />
</template>
```

## API

### Props

```ts
/**
 * Props for the DashboardSearch component
 */
interface DashboardSearchProps {
  /**
   * The icon displayed in the input.
   */
  icon?: IconComponent | undefined;
  /**
   * The placeholder text for the input.
   */
  placeholder?: string | undefined;
  /**
   * Automatically focus the input when component is mounted.
   */
  autofocus?: boolean | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * Display a close button in the input (useful when inside a Modal for example).
   * `{ size: 'sm', color: 'air-tertiary-no-accent' }`{lang="ts-type"}
   * @default "true"
   */
  close?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the close button.
   */
  closeIcon?: IconComponent | undefined;
  /**
   * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://bitrix24.github.io/b24ui/docs/composables/define-shortcuts/))
   * @default "\"meta_k\""
   */
  shortcut?: string | undefined;
  groups?: CommandPaletteGroup<CommandPaletteItem>[] | undefined;
  /**
   * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://bitrix24.github.io/b24ui/docs/components/command-palette/).
   */
  fuse?: UseFuseOptions<CommandPaletteItem> | undefined;
  /**
   * When `true`, the theme command will be added to the groups.
   * @default "true"
   */
  colorMode?: boolean | undefined;
  b24ui?: ({ modal?: ClassNameValue; input?: ClassNameValue; } & { root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; back?: ClassNameValue; content?: ClassNameValue; footer?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemTrailingHighlightedIcon?: ClassNameValue; itemTrailingKbds?: ClassNameValue; itemTrailingKbdsSize?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; itemLabelBase?: ClassNameValue; itemLabelPrefix?: ClassNameValue; itemLabelSuffix?: ClassNameValue; }) | undefined;
  title?: string | undefined;
  description?: string | undefined;
  /**
   * Render an overlay behind the modal.
   */
  overlay?: boolean | undefined;
  /**
   * Animate the modal when opening or closing.
   */
  transition?: boolean | undefined;
  /**
   * The content of the modal.
   */
  content?: (Omit<DialogContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DialogContentImplEmits>>) | undefined;
  /**
   * When `false`, the modal will not close when clicking outside or pressing escape.
   */
  dismissible?: boolean | undefined;
  /**
   * When `true`, the modal will take up the full screen.
   * @default "false"
   */
  fullscreen?: boolean | undefined;
  /**
   * The modality of the dialog When set to `true`, <br>
   * interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
   */
  modal?: boolean | undefined;
  /**
   * Render the modal in a portal.
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * @default "false"
   */
  open?: boolean | undefined;
  /**
   * @default "\"\""
   */
  searchTerm?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

### Slots

```ts
/**
 * Slots for the DashboardSearch component
 */
interface DashboardSearchSlots {
  empty(): any;
  footer(): any;
  back(): any;
  close(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-description(): any;
  item-trailing(): any;
  content(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the DashboardSearch component
 */
interface DashboardSearchEmits {
  update:open: (payload: [value: boolean]) => void;
  update:searchTerm: (payload: [value: string]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                                | Type                                                                                                                                                                                 |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `commandPaletteRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<InstanceType<typeof B24CommandPalette> | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    dashboardSearch: {
      slots: {
        modal: 'p-0 pt-0 pb-[10px]',
        input: ''
      },
      variants: {
        fullscreen: {
          false: {
            modal: 'sm:max-w-[768px] sm:h-[436px]'
          }
        }
      }
    }
  }
})
```

---

# DashboardSearchButton

> A pre-styled button that opens the Dashboard Search modal.

> !WARNING
> We are still updating this page. Some data may be missing here — we will complete it shortly.

## Usage

The DashboardSearchButton component is used to open the [DashboardSearch](https://bitrix24.github.io/b24ui/raw/docs/components/dashboard-search.md) modal.

```vue

<template>
  <B24DashboardSearchButton />
</template>

```

It extends the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component, so you can pass any property such as `color`, `size`, etc.

```vue

<template>
  <B24DashboardSearchButton color="air-primary" collapsed />
</template>

```

> [!NOTE](https://bitrix24.github.io/b24ui/#collapsed)
> The button defaults to `color="air-secondary-no-accent"` when not collapsed, `variant="air-tertiary-no-accent"` when collapsed.

### Collapsed

Use the `collapsed` prop to hide the button's label and [kbds](https://bitrix24.github.io/b24ui/#kbds). Defaults to `false`.

```vue

<template>
  <B24DashboardSearchButton collapsed />
</template>

```

### Kbds

Use the `kbds` prop to display keyboard keys in the button. Defaults to `['meta', 'K']`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} to match the default shortcut of the [DashboardSearch](https://bitrix24.github.io/b24ui/raw/docs/components/dashboard-search.md#shortcut) component.

```vue

<template>
  <B24DashboardSearchButton :kbds="{'0':'alt','1':'O'}" />
</template>

```

## API

### Props

```ts
/**
 * Props for the DashboardSearchButton component
 */
interface DashboardSearchButtonProps {
  /**
   * The icon displayed in the button.
   */
  icon?: IconComponent | undefined;
  /**
   * The label displayed in the button.
   */
  label?: string | undefined;
  /**
   * The color of the button.
   * @default "\"air-tertiary-no-accent\""
   */
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link";
  /**
   * Whether the button is collapsed.
   * @default "false"
   */
  collapsed?: boolean | undefined;
  /**
   * Display a tooltip on the button when is collapsed with the button label.
   * This has priority over the global `tooltip` prop.
   * @default "false"
   */
  tooltip?: boolean | TooltipProps | undefined;
  /**
   * The keyboard keys to display in the button.
   * `{ accent: 'default' }`{lang="ts-type"}
   * @default "[\"meta\", \"k\"]"
   */
  kbds?: (string | undefined)[] | KbdProps[] | undefined;
  b24ui?: ({ base?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; trailing?: ClassNameValue; } & { base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; }) | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * Route Location the link should navigate to when clicked on.
   */
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  /**
   * The class to apply when the link is active
   */
  activeClass?: string | undefined;
  /**
   * Class to apply when the link is exact active
   */
  exactActiveClass?: string | undefined;
  /**
   * Value passed to the attribute `aria-current` when the link is exact active.
   */
  ariaCurrentValue?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
  /**
   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
   */
  viewTransition?: boolean | undefined;
  /**
   * Calls `router.replace` instead of `router.push`.
   */
  replace?: boolean | undefined;
  autofocus?: Booleanish | undefined;
  disabled?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  name?: string | undefined;
  /**
   * The type of the button when not a link.
   */
  type?: "reset" | "submit" | "button" | undefined;
  download?: any;
  /**
   * An alias for `to`. If used with `to`, `href` will be ignored
   */
  href?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  hreflang?: string | undefined;
  media?: string | undefined;
  ping?: string | undefined;
  /**
   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
   */
  rel?: "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | (string & {}) | null | undefined;
  /**
   * Where to display the linked URL, as the name for a browsing context.
   */
  target?: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  onClick?: ((event: MouseEvent) => void | Promise<void>) | ((event: MouseEvent) => void | Promise<void>)[] | undefined;
  /**
   * The element or component this component should render as when not a link.
   */
  as?: any;
  /**
   * Force the link to be active independent of the current route.
   */
  active?: boolean | undefined;
  /**
   * Will only be active if the current route is an exact match.
   */
  exact?: boolean | undefined;
  /**
   * Allows controlling how the current route query sets the link as active.
   */
  exactQuery?: boolean | "partial" | undefined;
  /**
   * Will only be active if the current route hash is an exact match.
   */
  exactHash?: boolean | undefined;
  /**
   * The class to apply when the link is inactive
   */
  inactiveClass?: string | undefined;
  /**
   * When `true`, uses special underlined styling.
   */
  isAction?: boolean | undefined;
  /**
   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
   */
  external?: boolean | undefined;
  /**
   * If set to true, no rel attribute will be added to the link
   */
  noRel?: boolean | undefined;
  /**
   * A class to apply to links that have been prefetched.
   */
  prefetchedClass?: string | undefined;
  /**
   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
   */
  prefetch?: boolean | undefined;
  /**
   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
   */
  prefetchOn?: "visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }> | undefined;
  /**
   * Escape hatch to disable `prefetch` attribute.
   */
  noPrefetch?: boolean | undefined;
  /**
   * An option to either add or remove trailing slashes in the `href` for this specific link.
   * Overrides the global `trailingSlash` option if provided.
   */
  trailingSlash?: "append" | "remove" | undefined;
  activeColor?: "default" | "air-tertiary-no-accent" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-selection" | "air-boost" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "link" | undefined;
  size?: "xs" | "md" | "xss" | "sm" | "lg" | "xl" | undefined;
  /**
   * Rounds the corners of the button
   */
  rounded?: boolean | undefined;
  /**
   * Render the button full width
   */
  block?: boolean | undefined;
  /**
   * Set loading state automatically based on the `@click` promise state
   */
  loadingAuto?: boolean | undefined;
  /**
   * Disable uppercase label
   */
  normalCase?: boolean | undefined;
  /**
   * Shows LoaderWaitIcon in loading mode
   */
  useWait?: boolean | undefined;
  /**
   * Shows LoaderClockIcon icon in loading mode
   */
  useClock?: boolean | undefined;
  /**
   * Shows icons.ChevronDownSIcon on the right side
   */
  useDropdown?: boolean | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

### Slots

```ts
/**
 * Slots for the DashboardSearchButton component
 */
interface DashboardSearchButtonSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    dashboardSearchButton: {
      slots: {
        base: '',
        baseLine: '',
        label: '',
        trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
      },
      variants: {
        collapsed: {
          true: {
            baseLine: 'ps-[5px] pe-[5px]',
            label: 'hidden',
            trailing: 'lg:hidden'
          }
        }
      }
    }
  }
})
```

---

# DescriptionList

> For instances requiring the conversion of a table row into its own table to enhance page completeness.

## Usage

Use the `items` prop as an array of objects to control the value of the DescriptionList:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `description?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-icons-in-items)
- [`avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-avatar-in-items)
- [`actions?: ButtonProps[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-actions-in-items)
- [`orientation?: "horizontal" | "vertical"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-actions-in-items)
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { labelWrapper?: ClassNameValue, icon?: ClassNameValue, avatar?: ClassNameValue, label?: ClassNameValue, descriptionWrapper?: ClassNameValue, description?: ClassNameValue, actions?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
const items = ref([
  {
    label: 'Full name',
    description: 'Michael Foster'
  },
  {
    label: 'Event',
    description: 'Payment is made through Atol online'
  }
])
</script>

<template>
  <B24DescriptionList :items="items" />
</template>

```

### Legend

Use the `legend` prop to set the legend of the DescriptionList.

```vue

<script setup lang="ts">
const items = ref([
  {
    label: 'Full name',
    description: 'Michael Foster'
  },
  {
    label: 'Event',
    description: 'Payment is made through Atol online'
  }
])
</script>

<template>
  <B24DescriptionList legend="Applicant Information" :items="items" />
</template>

```

### Text

Use the `text` prop to set the description of the DescriptionList.

```vue

<script setup lang="ts">
const items = ref([
  {
    label: 'Full name',
    description: 'Michael Foster'
  },
  {
    label: 'Event',
    description: 'Payment is made through Atol online'
  }
])
</script>

<template>
  <B24DescriptionList legend="Applicant Information" text="Personal details and application." :items="items" />
</template>

```

### Label Key

You can change the property that is used to set the label by using the `label-key` prop. Defaults to `label`.

```vue

<script setup lang="ts">
const items = ref([
  {
    title: 'Full name',
    description: 'Michael Foster'
  },
  {
    title: 'Event',
    description: 'Payment is made through Atol online'
  }
])
</script>

<template>
  <B24DescriptionList legend="Applicant Information" text="Personal details and application." label-key="title" :items="items" />
</template>

```

### Description Key

You can change the property that is used to set the description by using the `description-key` prop. Defaults to `description`.

```vue

<script setup lang="ts">
const items = ref([
  {
    title: 'Full name',
    info: 'Michael Foster'
  },
  {
    title: 'Event',
    info: 'Payment is made through Atol online'
  }
])
</script>

<template>
  <B24DescriptionList legend="Applicant Information" text="Personal details and application." label-key="title" description-key="info" :items="items" />
</template>

```

### Size

Use the `size` prop to change the size of the DescriptionList.

```vue

<script setup lang="ts">
const items = ref([
  {
    label: 'Full name',
    description: 'Michael Foster'
  },
  {
    label: 'Event',
    description: 'Payment is made through Atol online'
  }
])
</script>

<template>
  <B24DescriptionList size="sm" legend="Applicant Information" text="Personal details and application." :items="items" />
</template>

```

## Examples

### With icon in items

You can use the `icon` property to display an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the items.

```vue [DescriptionListIconExample.vue]
<script setup lang="ts">
import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'

const items = ref([
  {
    label: 'Line 1.1',
    description: 'Description 1.1',
    icon: SignIcon
  },
  {
    label: 'Line 1.2',
    description: 'Description 1.2',
    avatar: {
      icon: PersonIcon
    }
  },
  {
    description: 'Description 1.3',
    icon: SignIcon
  }
] satisfies DescriptionListItem[])
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="items"
  />
</template>
```

### With avatar in items

You can use the `avatar` property to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the items.

```vue [DescriptionListAvatarExample.vue]
<script setup lang="ts">
import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'Line 1.1',
    description: 'Description 1.1',
    avatar: {
      src: '/b24ui/avatar/employee.png'
    }
  },
  {
    label: 'Line 1.2',
    description: 'Description 1.2',
    avatar: {
      src: '/b24ui/avatar/assistant.png'
    }
  },
  {
    description: 'Description 1.3',
    avatar: {
      src: 'https://github.com/bitrix24.png'
    }
  }
] satisfies DescriptionListItem[])
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="items"
  />
</template>
```

### With actions in items

Use the `actions` property to add some [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) actions to the items of the DescriptionList.

Use the `orientation` property to change the orientation actions of the items.

```vue [DescriptionListActionsExample.vue]
<script setup lang="ts">
import type { DescriptionListItem, ButtonProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import DotsIcon from '@bitrix24/b24icons-vue/button/DotsIcon'

const action = (color: string): ButtonProps[] => [
  {
    icon: DotsIcon,
    color: color as any,
    onClick() {
      console.log('Action clicked')
    }
  }
]

const multipleActions = (color: string): ButtonProps[] => [
  {
    label: 'Action',
    color: color as any,
    onClick() {
      console.log('Action clicked')
    }
  },
  {
    label: 'Another action',
    color: color as any,
    onClick() {
      console.log('Another action clicked')
    }
  },
  {
    label: 'One more action',
    color: color as any,
    onClick() {
      console.log('One more action clicked')
    }
  },
  {
    label: 'And one more',
    color: color as any,
    icon: SignIcon,
    onClick() {
      console.log('And one more clicked')
    }
  },
  {
    label: 'Last one',
    color: color as any,
    icon: DotsIcon,
    onClick() {
      console.log('Last one clicked')
    }
  }
]

const items = ref([
  {
    label: 'Line 1.1',
    description: 'Description 1.1',
    actions: action('air-secondary-no-accent'),
    orientation: 'horizontal' as DescriptionListItem['orientation']
  },
  {
    label: 'Line 1.2',
    description: 'Description 1.2',
    actions: action('air-primary'),
    orientation: 'horizontal' as DescriptionListItem['orientation']
  },
  {
    label: 'Line 1.3',
    description: 'Description 1.3',
    actions: action('air-tertiary-no-accent'),
    orientation: 'horizontal' as DescriptionListItem['orientation']
  },
  {
    description: 'Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.',
    actions: multipleActions('default'),
    orientation: 'vertical' as DescriptionListItem['orientation']
  }
] satisfies DescriptionListItem[])
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="items"
  />
</template>
```

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [DescriptionListCustomSlotExample.vue]
<script setup lang="ts">
import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt'
import DownloadDoubleIcon from '@bitrix24/b24icons-vue/actions/DownloadDoubleIcon'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'
import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'
import CreditDebitCardIcon from '@bitrix24/b24icons-vue/main/CreditDebitCardIcon'

const items = ref([
  {
    id: 'amount',
    slot: 'amount',
    label: 'Amount',
    value: '$10,560.00',
    description: 'Paid',
    b24ui: {
      label: 'font-(--ui-font-weight-semi-bold) text-(length:--ui-font-size-md)/(--ui-font-line-height-md)',
      description: 'font-(--ui-font-weight-semi-bold) text-(length:--ui-font-size-lg) block w-full'
    }
  },
  {
    id: 'client',
    label: 'Client',
    avatar: {
      icon: PersonIcon
    },
    description: 'Employee Name',
    b24ui: {
      description: 'font-(--ui-font-weight-semi-bold)'
    }
  },
  {
    id: 'date',
    label: 'Due date',
    icon: Calendar1Icon,
    value: new Date('2023-01-31T03:24:00')
  },
  {
    id: 'payment',
    label: 'Payment method',
    icon: CreditDebitCardIcon,
    description: 'Paid with MasterCard'
  }
] satisfies (DescriptionListItem & { id: string, value?: Date | string })[])
</script>

<template>
  <B24Card variant="tinted-success" class="w-full">
    <B24DescriptionList
      legend="Applicant Information"
      text="Personal details and application."
      class="light"
      :items="items"
      :b24ui="{
        legend: 'sr-only',
        text: 'sr-only',
        labelWrapper: 'px-4',
        container: 'mt-0',
        descriptionWrapper: 'px-4',
        footer: 'mt-4 px-0 py-4 pb-0 flex flex-row flex-nowrap justify-end items-center'
      }"
    >
      <template #amount="{ index }">
        <dt class="col-start-1 flex flex-nowrap flex-row items-center justify-start gap-1.5 pt-2 sm:py-1 px-4">
          <ProseH4 class="mb-0">
            Amount
          </ProseH4>
        </dt>
        <dd class="pb-3 pt-1 sm:py-3 px-4">
          <div class="flex flex-wrap flex-row items-center justify-start gap-4">
            <div>
              {{ items[index]?.value }}
            </div>
            <B24Badge
              :label="items[index]?.description"
              class="font-(--ui-font-weight-semi-bold)"
              color="air-primary-success"
            />
          </div>
        </dd>
      </template>
      <template #description="{ item }">
        <template v-if="item.id === 'date'">
          <time :datetime="(item?.value as Date)?.toISOString()">{{ (item?.value as Date)?.toDateString() }}</time>
        </template>
        <template v-else>
          {{ item.description }}
        </template>
      </template>
      <template #footer>
        <B24Button
          color="air-primary"
          label="Download receipt"
          :icon="DownloadDoubleIcon"
          rounded
        />
      </template>
    </B24DescriptionList>
  </B24Card>
</template>
```

## API

### Props

```ts
/**
 * Props for the DescriptionList component
 */
interface DescriptionListProps {
  legend?: string | undefined;
  text?: string | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: string | undefined;
  /**
   * The key used to get the description from the item.
   * @default "\"description\""
   */
  descriptionKey?: string | undefined;
  items?: DescriptionListItem[] | undefined;
  size?: "md" | "sm" | undefined;
  b24ui?: { root?: ClassNameValue; legend?: ClassNameValue; text?: ClassNameValue; container?: ClassNameValue; labelWrapper?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; label?: ClassNameValue; descriptionWrapper?: ClassNameValue; description?: ClassNameValue; actions?: ClassNameValue; footer?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the DescriptionList component
 */
interface DescriptionListSlots {
  legend(): any;
  text(): any;
  leading(): any;
  label(): any;
  description(): any;
  actions(): any;
  content-top(): any;
  content(): any;
  content-bottom(): any;
  footer(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    descriptionList: {
      slots: {
        root: 'w-full shrink-0',
        legend: 'font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-label-color)',
        text: 'text-(--b24ui-typography-description-color)',
        container: 'grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto]',
        labelWrapper: 'col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-(--ui-color-divider-vibrant-default) sm:border-(--ui-color-divider-vibrant-default) text-(--b24ui-typography-description-color)',
        icon: 'shrink-0 size-6 text-(--b24ui-typography-description-color)',
        avatar: 'shrink-0',
        avatarSize: '',
        label: '',
        descriptionWrapper: 'sm:border-t sm:[&:nth-child(2)]:border-none sm:border-(--ui-color-divider-vibrant-default) text-(--b24ui-typography-label-color)',
        description: '',
        actions: 'flex flex-wrap gap-1.5 shrink-0',
        footer: 'border-t border-(--ui-color-divider-vibrant-default)'
      },
      variants: {
        size: {
          sm: {
            legend: 'text-md',
            text: 'mt-1 max-w-2/3 text-(length:--ui-font-size-sm)',
            container: 'mt-2.5 text-md',
            labelWrapper: 'pt-3 sm:py-3',
            avatarSize: 'xs',
            label: '',
            descriptionWrapper: 'pb-3 pt-1 sm:py-3',
            description: '',
            footer: 'mt-2 p-2'
          },
          md: {
            legend: 'text-xl',
            text: 'mt-2 max-w-2/3 text-(length:--ui-font-size-lg) leading-5',
            container: 'mt-3 text-(length:--ui-font-size-lg)',
            labelWrapper: 'pt-3 sm:py-3',
            avatarSize: 'xs',
            label: '',
            descriptionWrapper: 'pb-3 pt-1 sm:py-3',
            description: '',
            footer: 'mt-4 p-4'
          }
        },
        orientation: {
          horizontal: {
            descriptionWrapper: 'w-full flex flex-row items-center justify-between gap-4',
            actions: 'items-center'
          },
          vertical: {
            descriptionWrapper: '',
            actions: 'items-start mt-2.5'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
```

---

# DropdownMenu

> A contextual menu for actions triggered by clicking an element.

## Usage

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) or any other component in the default slot of the DropdownMenu.

```vue

<script setup lang="ts">
const items = ref([
  [
    {
      label: 'Bitrix24',
      avatar: {
        src: 'https://github.com/bitrix24.png'
      },
      type: 'label'
    }
  ],
  [
    {
      label: 'Profile'
    },
    {
      label: 'Billing'
    },
    {
      label: 'Settings',
      kbds: [
        ','
      ]
    },
    {
      label: 'Keyboard shortcuts'
    }
  ],
  [
    {
      label: 'Team'
    },
    {
      label: 'Invite users',
      children: [
        [
          {
            label: 'Email'
          },
          {
            label: 'Message'
          }
        ],
        [
          {
            label: 'More'
          }
        ]
      ]
    },
    {
      label: 'New team',
      kbds: [
        'meta',
        'n'
      ]
    }
  ],
  [
    {
      label: 'GitHub',
      to: 'https://github.com/bitrix24/b24ui',
      target: '_blank'
    },
    {
      label: 'Support',
      to: '/docs/components/dropdown-menu/'
    },
    {
      label: 'API',
      disabled: true
    }
  ],
  [
    {
      label: 'Logout',
      kbds: [
        'shift',
        'meta',
        'q'
      ]
    }
  ]
])
</script>

<template>
  <B24DropdownMenu :items="items">
<B24Button label="Open" />
</B24DropdownMenu>
</template>

```

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `kbds?: string[] | KbdProps[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`type?: "link" | "label" | "separator" | "checkbox"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-checkbox-items)
- [`color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-primary-warning"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-color-items)
- [`checked?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-checkbox-items)
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `onSelect?: (e: Event) => void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`onUpdateChecked?: (checked: boolean) => void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-checkbox-items)
- `children?: DropdownMenuItem[] | DropdownMenuItem[][]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

You can pass any property from the [Link](https://bitrix24.github.io/b24ui/raw/docs/components/link.md#props) component such as `to`, `target`, etc.

```vue

<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<DropdownMenuItem[][]>([
  [
    {
      label: 'Bitrix24',
      avatar: {
        src: 'https://github.com/bitrix24.png'
      },
      type: 'label'
    }
  ],
  [
    {
      label: 'Profile'
    },
    {
      label: 'Billing'
    },
    {
      label: 'Settings',
      kbds: [
        ','
      ]
    },
    {
      label: 'Keyboard shortcuts'
    }
  ],
  [
    {
      label: 'Team'
    },
    {
      label: 'Invite users',
      children: [
        [
          {
            label: 'Email'
          },
          {
            label: 'Message'
          }
        ],
        [
          {
            label: 'More'
          }
        ]
      ]
    },
    {
      label: 'New team',
      kbds: [
        'meta',
        'n'
      ]
    }
  ],
  [
    {
      label: 'GitHub',
      to: 'https://github.com/bitrix24/b24ui',
      target: '_blank'
    },
    {
      label: 'Support',
      to: '/docs/components/dropdown-menu/'
    },
    {
      label: 'API',
      disabled: true
    }
  ],
  [
    {
      label: 'Logout',
      kbds: [
        'shift',
        'meta',
        'q'
      ]
    }
  ]
])
</script>

<template>
  <B24DropdownMenu :items="items">
<B24Button label="Open" />
</B24DropdownMenu>
</template>

```

> !NOTE
> You can also pass an array of arrays to the `items` prop to create separated groups of items.

> !TIP
> Each item can take a `children` array of objects with the same properties as the `items` prop to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.

### Content

Use the `content` prop to control how the DropdownMenu content is rendered, like its `align` or `side` for example.

```vue

<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<DropdownMenuItem[]>([
  {
    label: 'Profile'
  },
  {
    label: 'Billing'
  },
  {
    label: 'Settings'
  }
])
</script>

<template>
  <B24DropdownMenu :items="items" :content="{align:'start',side:'bottom',sideOffset:8}">
<B24Button label="Open" />
</B24DropdownMenu>
</template>

```

### Arrow

Use the `arrow` prop to display an arrow on the DropdownMenu.

```vue

<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<DropdownMenuItem[]>([
  {
    label: 'Profile'
  },
  {
    label: 'Billing'
  },
  {
    label: 'Settings'
  }
])
</script>

<template>
  <B24DropdownMenu arrow :items="items">
<B24Button label="Open" />
</B24DropdownMenu>
</template>

```

### Modal

Use the `modal` prop to control whether the DropdownMenu blocks interaction with outside content. Defaults to `true`.

```vue

<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<DropdownMenuItem[]>([
  {
    label: 'Profile'
  },
  {
    label: 'Billing'
  },
  {
    label: 'Settings'
  }
])
</script>

<template>
  <B24DropdownMenu :modal="false" :items="items" :b24ui="{content:'w-48'}">
<B24Button label="Open" />
</B24DropdownMenu>
</template>

```

### Disabled

Use the `disabled` prop to disable the DropdownMenu.

```vue

<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<DropdownMenuItem[]>([
  {
    label: 'Profile'
  },
  {
    label: 'Billing'
  },
  {
    label: 'Settings'
  }
])
</script>

<template>
  <B24DropdownMenu disabled :items="items" :ui="{content:'w-48'}">
<B24Button label="Open" />
</B24DropdownMenu>
</template>

```

## Examples

### With checkbox items

You can use the `type` property with `checkbox` and use the `checked` / `onUpdateChecked` properties to control the checked state of the item.

```vue [DropdownMenuCheckboxItemsExample.vue]
<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import HamburgerMenuIcon from '@bitrix24/b24icons-vue/outline/HamburgerMenuIcon'
import CloudDownloadIcon from '@bitrix24/b24icons-vue/outline/CloudDownloadIcon'
import ClockWithArrowIcon from '@bitrix24/b24icons-vue/main/ClockWithArrowIcon'
import Bookmark2Icon from '@bitrix24/b24icons-vue/outline/Bookmark2Icon'
import WindowScreenIcon from '@bitrix24/b24icons-vue/social/WindowScreenIcon'

const showBookmarks = ref(true)
const showHistory = ref(false)
const showDownloads = ref(false)

const items = computed(() => [
  {
    label: 'Interface',
    icon: WindowScreenIcon,
    type: 'label' as const
  },
  {
    label: 'Show Bookmarks',
    icon: Bookmark2Icon,
    type: 'checkbox' as const,
    checked: showBookmarks.value,
    onUpdateChecked(checked: boolean) {
      showBookmarks.value = checked
    },
    onSelect(e: Event) {
      e.preventDefault()
    }
  },
  {
    label: 'Show History',
    icon: ClockWithArrowIcon,
    type: 'checkbox' as const,
    checked: showHistory.value,
    onUpdateChecked(checked: boolean) {
      showHistory.value = checked
    }
  },
  {
    type: 'separator' as const
  },
  {
    label: 'Show Downloads',
    icon: CloudDownloadIcon,
    type: 'checkbox' as const,
    checked: showDownloads.value,
    onUpdateChecked(checked: boolean) {
      showDownloads.value = checked
    }
  }
] satisfies DropdownMenuItem[])
</script>

<template>
  <B24DropdownMenu :items="items" :content="{ align: 'start' }" :ui="{ content: 'w-48' }">
    <B24Button label="Open" :icon="HamburgerMenuIcon" />
  </B24DropdownMenu>
</template>
```

> !NOTE
> To ensure reactivity for the `checked` state of items, it's recommended to wrap your `items` array inside a `computed`.

### With color items

You can use the `color` property to highlight certain items with a color.

```vue [DropdownMenuColorItemsExample.vue]
<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import HamburgerMenuIcon from '@bitrix24/b24icons-vue/outline/HamburgerMenuIcon'
import OpenedEyeIcon from '@bitrix24/b24icons-vue/main/OpenedEyeIcon'
import TrashBinIcon from '@bitrix24/b24icons-vue/main/TrashBinIcon'
import CopyPlatesIcon from '@bitrix24/b24icons-vue/actions/CopyPlatesIcon'
import PencilDrawIcon from '@bitrix24/b24icons-vue/actions/PencilDrawIcon'

const items: DropdownMenuItem[][] = [
  [
    {
      label: 'View',
      icon: OpenedEyeIcon
    },
    {
      label: 'Copy',
      icon: CopyPlatesIcon
    },
    {
      label: 'Edit',
      icon: PencilDrawIcon
    }
  ],
  [
    {
      label: 'Delete',
      color: 'air-primary-alert' as const,
      icon: TrashBinIcon
    }
  ]
]
</script>

<template>
  <B24DropdownMenu :items="items" :ui="{ content: 'w-48' }">
    <B24Button label="Open" :icon="HamburgerMenuIcon" />
  </B24DropdownMenu>
</template>
```

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [DropdownMenuOpenExample.vue]
<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import PaymentIcon from '@bitrix24/b24icons-vue/outline/PaymentIcon'
import Settings3Icon from '@bitrix24/b24icons-vue/actions/Settings3Icon'
import HamburgerMenuIcon from '@bitrix24/b24icons-vue/outline/HamburgerMenuIcon'

const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})

const items: DropdownMenuItem[] = [
  {
    label: 'Profile',
    icon: UserIcon,
    slot: 'profile' as const
  }, {
    label: 'Billing',
    icon: PaymentIcon
  }, {
    label: 'Settings',
    icon: Settings3Icon
  }
]
</script>

<template>
  <B24DropdownMenu v-model:open="open" :items="items" :b24ui="{ content: 'w-[200px]', viewport: 'w-[200px]' }">
    <B24Button label="Open" :icon="HamburgerMenuIcon" />
  </B24DropdownMenu>
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the DropdownMenu by pressing ``.

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-leading`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-label`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-trailing`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [DropdownMenuCustomSlotExample.vue]
<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import PaymentIcon from '@bitrix24/b24icons-vue/outline/PaymentIcon'
import Settings3Icon from '@bitrix24/b24icons-vue/actions/Settings3Icon'
import HamburgerMenuIcon from '@bitrix24/b24icons-vue/outline/HamburgerMenuIcon'
import CloudWithCheckIcon from '@bitrix24/b24icons-vue/outline/CloudWithCheckIcon'

const items = [
  {
    label: 'Profile',
    icon: UserIcon,
    slot: 'profile' as const
  }, {
    label: 'Billing',
    icon: PaymentIcon
  }, {
    label: 'Settings',
    icon: Settings3Icon
  }
] satisfies DropdownMenuItem[]
</script>

<template>
  <B24DropdownMenu :items="items" :ui="{ content: 'w-48' }">
    <B24Button label="Open" :icon="HamburgerMenuIcon" />

    <template #profile-trailing>
      <CloudWithCheckIcon class="shrink-0 size-5 text-(--ui-color-accent-main-primary)" />
    </template>
  </B24DropdownMenu>
</template>
```

> [!TIP](https://bitrix24.github.io/b24ui/#slots)
> You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.

### With trigger content width

You can expand the content to the full width of its button by adding the `w-(--reka-dropdown-menu-trigger-width)` class on the `b24ui.content` and `b24ui.viewport` slot.

```vue [DropdownMenuContentWidthExample.vue]
<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import HamburgerMenuIcon from '@bitrix24/b24icons-vue/outline/HamburgerMenuIcon'
import OpenedEyeIcon from '@bitrix24/b24icons-vue/main/OpenedEyeIcon'
import TrashBinIcon from '@bitrix24/b24icons-vue/main/TrashBinIcon'
import CopyPlatesIcon from '@bitrix24/b24icons-vue/actions/CopyPlatesIcon'
import PencilDrawIcon from '@bitrix24/b24icons-vue/actions/PencilDrawIcon'

const items: DropdownMenuItem[][] = [
  [
    {
      label: 'View',
      icon: OpenedEyeIcon
    },
    {
      label: 'Copy',
      icon: CopyPlatesIcon
    },
    {
      label: 'Edit',
      icon: PencilDrawIcon
    }
  ],
  [
    {
      label: 'Delete',
      color: 'air-primary-alert' as const,
      icon: TrashBinIcon
    }
  ]
]
</script>

<template>
  <B24DropdownMenu :items="items" :b24ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)', viewport: 'w-(--reka-dropdown-menu-trigger-width)' }">
    <B24Button
      label="Open"
      class="w-46"
      block
      :icon="HamburgerMenuIcon"
    />
  </B24DropdownMenu>
</template>
```

### Extract shortcuts

When you have some items with `kbds` property (displaying some [Kbd](https://bitrix24.github.io/b24ui/raw/docs/components/kbd.md)), you can easily make them work with the [defineShortcuts](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md) composable.

Inside the `defineShortcuts` composable, there is an `extractShortcuts` utility that will extract the shortcuts recursively from the items and return an object that you can pass to `defineShortcuts`. It will automatically call the `select` function of the item when the shortcut is pressed.

```vue
<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'

const items: DropdownMenuItem[] = [{
  label: 'Invite users',
  children: [{
    label: 'Invite by email',
    kbds: ['meta', 'e'],
    onSelect() {
      console.log('Invite by email clicked')
    }
  }, {
    label: 'Invite by link',
    kbds: ['meta', 'i'],
    onSelect() {
      console.log('Invite by link clicked')
    }
  }]
}, {
  label: 'New team',
  kbds: ['meta', 'n'],
  onSelect() {
    console.log('New team clicked')
  }
}]

defineShortcuts(extractShortcuts(items))
</script>
```

> !NOTE
> In this example, `` ``, `` `` and `` `` would trigger the `select` function of the corresponding item.

## API

### Props

```ts
/**
 * Props for the DropdownMenu component
 */
interface DropdownMenuProps {
  items?: ArrayOrNested<DropdownMenuItem> | undefined;
  /**
   * The icon displayed when an item is checked.
   */
  checkedIcon?: IconComponent | undefined;
  /**
   * The icon displayed when the item is an external link.
   * Set to `false` to hide the external icon.
   * @default "true"
   */
  externalIcon?: boolean | IconComponent | undefined;
  /**
   * The content of the menu.
   */
  content?: (Omit<DropdownMenuContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<MenuContentEmits>>) | undefined;
  /**
   * Display an arrow alongside the menu.
   */
  arrow?: boolean | Omit<DropdownMenuArrowProps, "as" | "asChild"> | undefined;
  /**
   * Render the menu in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<ArrayOrNested<DropdownMenuItem>> | undefined;
  /**
   * The key used to get the description from the item.
   * @default "\"description\""
   */
  descriptionKey?: GetItemKeys<ArrayOrNested<DropdownMenuItem>> | undefined;
  disabled?: boolean | undefined;
  b24ui?: { content?: ClassNameValue; viewport?: ClassNameValue; arrow?: ClassNameValue; group?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemTrailingKbds?: ClassNameValue; itemTrailingKbdsSize?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; itemLabelExternalIcon?: ClassNameValue; } | undefined;
  /**
   * The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The controlled open state of the menu. Can be used as `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * The modality of the dropdown menu.
   * 
   * When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
   * @default "true"
   */
  modal?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the DropdownMenu component
 */
interface DropdownMenuSlots {
  default(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-description(): any;
  item-trailing(): any;
  content-top(): any;
  content-bottom(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the DropdownMenu component
 */
interface DropdownMenuEmits {
  update:open: (payload: [payload: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    dropdownMenu: {
      slots: {
        content: 'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto',
        viewport: 'relative w-full max-h-[40vh] min-w-[120px] overflow-x-hidden overflow-y-auto scrollbar-thin',
        arrow: 'fill-(--popup-window-background-color)',
        group: 'grid',
        label: 'w-full h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)',
        separator: 'my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)',
        item: 'group w-full h-[36px] px-[18px] mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) data-highlighted:text-(--menu-popup-item-color-hover) data-[state=open]:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover) data-highlighted:bg-(--menu-popup-item-bg-color-hover) data-[state=open]:bg-(--menu-popup-item-bg-color-hover) transition-colors',
        itemLeadingIcon: 'shrink-0 size-[18px] text-(--ui-color-design-plain-content-icon-secondary) group-data-highlighted:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary) group-data-[state=checked]:text-(--ui-color-accent-main-primary) transition-colors',
        itemLeadingAvatar: 'shrink-0 size-[16px] me-[8px]',
        itemLeadingAvatarSize: '2xs',
        itemTrailing: 'ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center',
        itemTrailingIcon: 'shrink-0 size-[24px] text-(--ui-color-accent-main-primary)',
        itemTrailingKbds: 'shrink-0 hidden lg:inline-flex items-center gap-0.5',
        itemTrailingKbdsSize: 'md',
        itemWrapper: 'flex-1 flex flex-col text-start min-w-0',
        itemLabel: 'max-w-[240px] truncate -mt-px group-data-[state=checked]:text-(--ui-color-accent-main-primary)',
        itemDescription: 'max-w-[240px] truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
        itemLabelExternalIcon: 'inline-block size-[16px] text-(--ui-color-design-plain-content-icon-secondary)'
      },
      variants: {
        color: {
          'air-primary': {
            item: 'style-filled'
          },
          'air-primary-success': {
            item: 'style-filled-success'
          },
          'air-primary-alert': {
            item: 'style-filled-alert'
          },
          'air-primary-copilot': {
            item: 'style-filled-copilot'
          },
          'air-primary-warning': {
            item: 'style-filled-warning'
          },
          default: {
            item: 'style-old-default'
          },
          danger: {
            item: 'style-old-danger'
          },
          success: {
            item: 'style-old-success'
          },
          warning: {
            item: 'style-old-warning'
          },
          primary: {
            item: 'style-old-primary'
          },
          secondary: {
            item: 'style-old-secondary'
          },
          collab: {
            item: 'style-old-collab'
          },
          ai: {
            item: 'style-old-ai'
          }
        },
        active: {
          true: {
            item: 'text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary)',
            itemLeadingIcon: 'text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary)'
          },
          false: {}
        },
        loading: {
          true: {
            itemLeadingIcon: 'animate-spin'
          }
        }
      },
      compoundVariants: [
        {
          color: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)'
          }
        },
        {
          color: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          color: 'default',
          active: false,
          class: ''
        },
        {
          color: 'default',
          active: true,
          class: ''
        },
        {
          color: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background-active) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-icon) group-data-highlighted:text-(--b24ui-icon) group-data-[state=open]:text-(--b24ui-icon)'
          }
        },
        {
          color: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        }
      ],
      defaultVariants: {}
    }
  }
})
```

---

# Empty

> An empty state component.

## Usage

```vue [EmptyExample.vue]
<script setup lang="ts">
import ProductIcon from '@bitrix24/b24icons-vue/outline/ProductIcon'
import AddProductIcon from '@bitrix24/b24icons-vue/outline/AddProductIcon'
import RefreshIcon from '@bitrix24/b24icons-vue/outline/RefreshIcon'
</script>

<template>
  <B24Empty
    :icon="ProductIcon"
    title="No projects found"
    description="It looks like you haven't added any projects. Create one to get started."
    :actions="[
      {
        label: 'Create new',
        icon: AddProductIcon,
        color: 'air-primary'
      },
      {
        label: 'Refresh',
        icon: RefreshIcon
      }
    ]"
  />
</template>
```

### Title

Use the `title` prop to set the title of the empty state.

```vue

<template>
  <B24Empty title="No projects found" />
</template>

```

### Description

Use the `description` prop to set the description of the empty state.

```vue

<template>
  <B24Empty title="No projects found" description="It looks like you haven't added any projects. Create one to get started." />
</template>

```

### Icon

Use the `icon` prop to set the icon of the empty state.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Empty :icon="RocketIcon" title="No projects found" description="It looks like you haven't added any projects. Create one to get started." />
</template>

```

### Actions

Use the `actions` prop to add some [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) actions to the empty state.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Empty :icon="RocketIcon" title="No projects found" description="It looks like you haven't added any projects. Create one to get started." :actions="{'0':{label:'Create new',color:'air-primary'},'1':{label:'Refresh'}}" />
</template>

```

### Color

Use the `color` prop to change the color of the empty state.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Empty color="air-secondary-accent-2" :icon="RocketIcon" title="No notifications" description="You're all caught up. New notifications will appear here." :actions="{'0':{label:'Refresh'}}" />
</template>

```

### Inverted

Use the `inverted` prop to invert the color of the empty state.

> !WARNING
> Only available for `air-primary*` colors

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Empty inverted color="air-primary" :icon="RocketIcon" title="No notifications" description="You're all caught up. New notifications will appear here." :actions="{'0':{label:'Refresh'}}" />
</template>

```

### Size

Use the `size` prop to change the size of the empty state.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Empty size="xl" :icon="RocketIcon" title="No notifications" description="You're all caught up. New notifications will appear here." :actions="{'0':{label:'Refresh'}}" />
</template>

```

## Examples

### With slots

Use the available slots to create a more complex empty state.

```vue [EmptySlotsExample.vue]
<script setup lang="ts">
import type { UserProps } from '@bitrix24/b24ui-nuxt'
import AddProductIcon from '@bitrix24/b24icons-vue/outline/AddProductIcon'

const members: UserProps[] = [
  {
    name: 'Employee Name',
    description: 'Team employee',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: '/b24ui/avatar/employee.png',
      alt: 'Employee Name'
    }
  },
  {
    name: 'Employee Name',
    description: 'Team assistant',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: '/b24ui/avatar/assistant.png',
      alt: 'Assistant Name'
    }
  }
]
</script>

<template>
  <B24Empty
    title="No team members"
    description="Invite your team to collaborate on this project."
    :actions="[{
      label: 'Invite members',
      icon: AddProductIcon
    }]"
  >
    <template #leading>
      <B24AvatarGroup size="xl">
        <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
        <B24Avatar src="https://github.com/bitrix24.png" alt="bitrix24" />
      </B24AvatarGroup>
    </template>

    <template #footer>
      <B24Separator class="my-4" />

      <div class="grid grid-cols-2 gap-4">
        <B24Card
          v-for="(member, index) in members"
          :key="index"
          :b24ui="{ body: 'p-4 sm:p-4' }"
        >
          <B24User
            :avatar="member.avatar"
            :name="member.name"
            :description="member.description"
            :b24ui="{ name: 'truncate' }"
          />
          <div class="mt-2 w-full flex flex-row justify-end">
            <B24Link
              class="text-xs"
              is-action
              :to="member.to"
              :target="member.target"
            >
              Invite
            </B24Link>
          </div>
        </B24Card>
      </div>
    </template>
  </B24Empty>
</template>
```

## API

### Props

```ts
/**
 * Props for the Empty component
 */
interface EmptyProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The icon displayed above the title.
   */
  icon?: IconComponent | undefined;
  title?: string | undefined;
  description?: string | undefined;
  /**
   * Display a list of Button in the body.
   */
  actions?: ButtonProps[] | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary";
  /**
   * If set to `true` the color is inverted.
   * Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
   * @default "false"
   */
  inverted?: boolean | undefined;
  size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
  b24ui?: { root?: ClassNameValue; header?: ClassNameValue; indicator?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; actions?: ClassNameValue; footer?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Empty component
 */
interface EmptySlots {
  header(): any;
  leading(): any;
  title(): any;
  description(): any;
  body(): any;
  actions(): any;
  footer(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    empty: {
      slots: {
        root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-(--b24ui-background) ring ring-(--b24ui-border-color) ring-(length:--b24ui-border-width)',
        header: 'flex flex-col items-center gap-2 max-w-[384px] text-center',
        indicator: 'rounded-full text-(--b24ui-color) bg-(--b24ui-background-active) flex items-center justify-center mb-2',
        icon: 'shrink-0',
        title: 'text-(--b24ui-color) text-pretty font-(--ui-font-weight-medium)',
        description: 'text-balance text-center text-(--b24ui-color)',
        body: 'flex flex-col items-center gap-4 max-w-[384px]',
        actions: 'flex flex-wrap justify-center gap-2 shrink-0',
        footer: 'flex flex-col items-center gap-2 max-w-[384px]'
      },
      variants: {
        size: {
          xs: {
            icon: 'size-[26px]',
            title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          sm: {
            icon: 'size-[28px]',
            title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          md: {
            icon: 'size-[38px]',
            title: 'text-base',
            description: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)'
          },
          lg: {
            icon: 'size-[44px]',
            title: 'text-base',
            description: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)'
          },
          xl: {
            icon: 'size-[56px]',
            title: 'text-(length:--ui-font-size-xl)/(--ui-font-line-height-3xs)',
            description: 'text-(length:--ui-font-size-lg)/(--ui-font-line-height-3xs)'
          }
        },
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          'air-secondary': {
            root: 'style-tinted'
          },
          'air-secondary-alert': {
            root: 'style-tinted-alert'
          },
          'air-secondary-accent': {
            root: 'style-outline'
          },
          'air-secondary-accent-1': {
            root: 'style-outline-accent-1'
          },
          'air-secondary-accent-2': {
            root: 'style-outline-accent-2'
          },
          'air-tertiary': {
            root: 'style-outline-no-accent'
          }
        },
        inverted: {
          true: '',
          false: ''
        }
      },
      compoundVariants: [
        {
          inverted: true,
          color: 'air-primary',
          class: {
            root: 'style-filled-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-success',
          class: {
            root: 'style-filled-success-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-alert',
          class: {
            root: 'style-filled-alert-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-copilot',
          class: {
            root: 'style-filled-copilot-inverted'
          }
        },
        {
          inverted: true,
          color: 'air-primary-warning',
          class: {
            root: 'style-filled-warning-inverted'
          }
        }
      ],
      defaultVariants: {
        color: 'air-secondary-accent',
        size: 'md',
        inverted: false
      }
    }
  }
})
```

---

# Error

> A pre-built error component with NuxtError support.

## Usage

The Error component works together with the [SidebarLayout](https://bitrix24.github.io/b24ui/raw/docs/components/sidebar-layout.md) component to create a full-height layout that extends to the viewport's available height.

### Error

Use the `error` prop to display an error message.

> [!NOTE](https://nuxt.com/docs/guide/directory-structure/error)
> In most cases, you will receive the `error` prop in your `error.vue` file.

```vue

<template>
  <B24Error :error="{statusCode:404,statusMessage:'Page not found',message:'The page you are looking for does not exist.'}" />
</template>

```

### Clear

Use the `clear` prop to customize or hide the clear button (with `false` value).

You can pass any property from the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component to customize it.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Error :clear="{color:'air-primary-alert',size:'xl',icon:RocketIcon,class:'rounded-full'}" :error="{statusCode:404,statusMessage:'Page not found',message:'The page you are looking for does not exist.'}" />
</template>

```

### Redirect

Use the `redirect` prop to redirect the user to a different page when the clear button is clicked. Defaults to `/`.

```vue

<template>
  <B24Error redirect="/docs/getting-started/" :error="{statusCode:404,statusMessage:'Page not found',message:'The page you are looking for does not exist.'}" />
</template>

```

## Examples

### Within `error.vue`

Use the Error component in your `error.vue`:

```vue [error.vue] {13}
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{
  error: NuxtError
}>()
</script>

<template>
  <B24App>
    <B24SidebarLayout :use-light-content="false">

      <B24Error :error="error" />

    </B24SidebarLayout>
  </B24App>
</template>
```

> !TIP
> You might want to replicate the code of your `app.vue` inside your `error.vue` file to have the same layout and features, here is an example: <https://github.com/bitrix24/b24ui/blob/main/docs/app/error.vue>{rel="nofollow"}

> !NOTE
> You can read more about how to handle errors in the [Nuxt documentation](https://nuxt.com/docs/getting-started/error-handling#error-page){rel="nofollow"}, but when using `nuxt generate` it is recommended to add `fatal: true` inside your `createError` call to make sure the error page is displayed:
>
> ```vue [pages/[...slug\\].vue]
> <script setup lang="ts">
> const route = useRoute()
>
> const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
> if (!page.value) {
>   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
> }
> </script>
> ```

## API

### Props

```ts
/**
 * Props for the Error component
 */
interface ErrorProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  error?: Partial<NuxtError<unknown> & { message: string; }> | undefined;
  /**
   * The URL to redirect to when the error is cleared.
   * @default "\"/\""
   */
  redirect?: string | undefined;
  /**
   * Display a button to clear the error in the links slot.
   * `{ size: 'lg', color: 'air-primary', label: 'Back to home' }`{lang="ts-type"}
   * @default "true"
   */
  clear?: boolean | Partial<ButtonProps> | undefined;
  b24ui?: { root?: ClassNameValue; statusCode?: ClassNameValue; statusMessage?: ClassNameValue; message?: ClassNameValue; links?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Error component
 */
interface ErrorSlots {
  default(): any;
  statusCode(): any;
  statusMessage(): any;
  message(): any;
  links(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    error: {
      slots: {
        root: 'min-h-[calc(100vh-var(--topbar-height))] flex flex-col items-center justify-center text-center',
        statusCode: 'text-(length:--ui-font-size-sm) font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color)',
        statusMessage: 'mt-2 text-(length:--ui-font-size-4xl)/(--ui-font-line-height-md) sm:text-(length:--ui-font-size-5xl)/(--ui-font-line-height-md) font-(--ui-font-weight-bold) text-(--b24ui-typography-label-color) text-balance',
        message: 'mt-4 text-(length:--ui-font-size-2xl)/(--ui-font-line-height-md) text-(--b24ui-typography-description-color) text-balance',
        links: 'mt-8 flex items-center justify-center gap-6'
      }
    }
  }
})
```

---

# FieldGroup

> Organize several button-like elements into a group.

## Usage

Wrap multiple [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) within a FieldGroup to group them together.

```vue

<template>
  <B24FieldGroup>
<B24Button color="air-primary-copilot" label="Button" />
<B24Button color="air-primary-copilot" label="Button" />
</B24FieldGroup>
</template>

```

### No split

If you use elements with different colors, use the `no-split` property to disable the display of the separator.

```vue

<template>
  <B24FieldGroup no-split>
<B24Button color="air-primary-copilot" label="Button" />
<B24Button color="air-primary-success" label="Button" />
<B24Button color="air-primary-alert" label="Button" />
</B24FieldGroup>
</template>

```

### Size

Use the `size` prop to change the size of all the buttons.

```vue

<template>
  <B24FieldGroup size="xl">
<B24Button color="air-primary-copilot" label="Button" />
<B24Button color="air-primary-copilot" label="Button" />
</B24FieldGroup>
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the buttons. Defaults to `horizontal`.

```vue

<template>
  <B24FieldGroup orientation="vertical">
<B24Button color="air-primary-copilot" label="Button" />
<B24Button color="air-primary-copilot" label="Button" />
</B24FieldGroup>
</template>

```

## Examples

### With input

You can use components like [Input](https://bitrix24.github.io/b24ui/raw/docs/components/input.md), [InputMenu](https://bitrix24.github.io/b24ui/raw/docs/components/input-menu.md), [Select](https://bitrix24.github.io/b24ui/raw/docs/components/select.md) [SelectMenu](https://bitrix24.github.io/b24ui/raw/docs/components/select-menu.md), etc. within a field group.

```vue

<template>
  <B24FieldGroup>
<B24Input placeholder="Enter token" />

<B24Button label="Button" />
</B24FieldGroup>
</template>

```

### With tooltip

You can use a [Tooltip](https://bitrix24.github.io/b24ui/raw/docs/components/tooltip.md) within a field group.

```vue [FieldGroupTooltipExample.vue]
<script setup lang="ts">
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
</script>

<template>
  <B24FieldGroup>
    <B24Input placeholder="Enter token" />

    <B24Tooltip text="Copy to clipboard">
      <B24Button
        :icon="MoreMIcon"
      />
    </B24Tooltip>
  </B24FieldGroup>
</template>
```

### With dropdown

You can use a [DropdownMenu](https://bitrix24.github.io/b24ui/raw/docs/components/dropdown-menu.md) within a field group.

```vue [FieldGroupDropdownExample.vue]
<script setup lang="ts">
import type { DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'
import CreditDebitCardIcon from '@bitrix24/b24icons-vue/main/CreditDebitCardIcon'
import Settings2Icon from '@bitrix24/b24icons-vue/actions/Settings2Icon'
import CirclePlusIcon from '@bitrix24/b24icons-vue/main/CirclePlusIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'

const items: DropdownMenuItem[] = [
  {
    label: 'My account',
    avatar: { src: '/b24ui/avatar/employee.png' }
  },
  {
    label: 'Profile',
    icon: PersonIcon,
    children: [
      {
        label: 'Billing',
        icon: CreditDebitCardIcon
      },
      {
        label: 'Settings',
        icon: Settings2Icon
      }
    ]
  },
  {
    label: 'New team',
    icon: CirclePlusIcon
  }
]
</script>

<template>
  <B24FieldGroup>
    <B24Button label="Settings" />

    <B24DropdownMenu :items="items" :content="{ align: 'end' }">
      <B24Button
        :icon="MoreMIcon"
      />
    </B24DropdownMenu>
  </B24FieldGroup>
</template>
```

### With badge

You can use a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) within a field group.

```vue [FieldGroupBadgeExample.vue]
<template>
  <B24FieldGroup>
    <B24Badge size="lg" label="https://" color="air-tertiary" />

    <B24Input placeholder="www.example.com" />
  </B24FieldGroup>
</template>
```

## API

### Props

```ts
/**
 * Props for the FieldGroup component
 */
interface FieldGroupProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  size?: "md" | "xs" | "sm" | "lg" | "xl" | "xss" | undefined;
  /**
   * The orientation the buttons are laid out.
   * @default "\"horizontal\""
   */
  orientation?: "horizontal" | "vertical" | undefined;
  /**
   * Disable show split
   * @default "false"
   */
  noSplit?: boolean | undefined;
  b24ui?: {} | undefined;
}
```

### Slots

```ts
/**
 * Slots for the FieldGroup component
 */
interface FieldGroupSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    fieldGroup: {
      base: 'relative',
      variants: {
        size: {
          xss: '',
          xs: '',
          sm: '',
          md: '',
          lg: '',
          xl: ''
        },
        orientation: {
          horizontal: 'flex flex-row -space-x-px',
          vertical: 'flex flex-col -space-y-px'
        }
      }
    }
  }
})
```

---

# FileUpload

> A file upload input component.

## Usage

Use the `v-model` directive to control the value of the FileUpload.

```vue

<script setup lang="ts">
const value = ref(null)
</script>

<template>
  <B24FileUpload v-model="value" class="w-96 min-h-48" />
</template>

```

### Multiple

Use the `multiple` prop to allow multiple files to be selected.

```vue

<template>
  <B24FileUpload multiple class="w-96 min-h-48" />
</template>

```

### Dropzone

Use the `dropzone` prop to enable/disable the droppable area. Defaults to `true`.

```vue

<template>
  <B24FileUpload :dropzone="false" class="w-96 min-h-48" />
</template>

```

### Interactive

Use the `interactive` prop to enable/disable the clickable area. Defaults to `true`.

> [!TIP](https://bitrix24.github.io/b24ui/#with-files-bottom-slot)
> This can be useful when adding a [`Button`](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component in the `#actions` slot.

```vue

<template>
  <B24FileUpload :interactive="false" class="w-96 min-h-48" />
</template>

```

### Accept

Use the `accept` prop to specify the allowed file types for the input. Provide a comma-separated list of [MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/MIME_types){rel="nofollow"} or file extensions (e.g., `image/png,application/pdf,.jpg`). Defaults to `*` (all file types).

```vue

<template>
  <B24FileUpload accept="image/*" class="w-96 min-h-48" />
</template>

```

### Label

Use the `label` prop to set the label of the FileUpload.

```vue

<template>
  <B24FileUpload label="Drop your image here" class="w-96 min-h-48" />
</template>

```

### Description

Use the `description` prop to set the description of the FileUpload.

```vue

<template>
  <B24FileUpload label="Drop your image here" description="SVG, PNG, JPG or GIF (max. 2MB)" class="w-96 min-h-48" />
</template>

```

### Icon

Use the `icon` prop to set the [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} of the FileUpload.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24FileUpload :icon="RocketIcon" label="Drop your image here" description="SVG, PNG, JPG or GIF (max. 2MB)" class="w-96 min-h-48" />
</template>

```

### Color

Use the `color` prop to change the color of the FileUpload.

```vue

<template>
  <B24FileUpload color="air-primary-alert" highlight label="Drop your image here" description="SVG, PNG, JPG or GIF (max. 2MB)" class="w-96 min-h-48" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Variant

Use the `variant` prop to change the variant of the FileUpload.

```vue

<template>
  <B24FileUpload variant="button" />
</template>

```

### Size

Use the `size` prop to change the size of the FileUpload.

```vue

<template>
  <B24FileUpload size="lg" variant="area" label="Drop your image here" description="SVG, PNG, JPG or GIF (max. 2MB)" />
</template>

```

### Layout

Use the `layout` prop to change how the files are displayed in the FileUpload. Defaults to `grid`.

> !WARNING
> This prop only works when `variant` is `area`.

```vue

<template>
  <B24FileUpload layout="list" multiple label="Drop your images here" description="SVG, PNG, JPG or GIF (max. 2MB)" class="w-96" :b24ui="{base:'min-h-48'}" />
</template>

```

### Position

Use the `position` prop to change the position of the files in the FileUpload. Defaults to `outside`.

> !WARNING
> This prop only works when `variant` is `area` and when `layout` is `list`.

```vue

<template>
  <B24FileUpload position="inside" layout="list" multiple label="Drop your images here" description="SVG, PNG, JPG or GIF (max. 2MB)" class="w-96" :b24ui="{base:'min-h-48'}" />
</template>

```

## Examples

### With Form validation

You can use the FileUpload within a [Form](https://bitrix24.github.io/b24ui/raw/docs/components/form.md) and [FormField](https://bitrix24.github.io/b24ui/raw/docs/components/form-field.md) components to handle validation and error handling.

```vue [FileUploadFormValidationExample.vue]
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
const MIN_DIMENSIONS = { width: 200, height: 200 }
const MAX_DIMENSIONS = { width: 4096, height: 4096 }
const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']

const formatBytes = (bytes: number, decimals = 2) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const dm = decimals < 0 ? 0 : decimals
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}

const schema = z.object({
  image: z
    .instanceof(File, {
      message: 'Please select an image file.'
    })
    .refine(file => file.size <= MAX_FILE_SIZE, {
      message: `The image is too large. Please choose an image smaller than ${formatBytes(MAX_FILE_SIZE)}.`
    })
    .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
      message: 'Please upload a valid image file (JPEG, PNG, or WebP).'
    })
    .refine(
      file =>
        new Promise((resolve) => {
          const reader = new FileReader()
          reader.onload = (e) => {
            const img = new Image()
            img.onload = () => {
              const meetsDimensions
                = img.width >= MIN_DIMENSIONS.width
                  && img.height >= MIN_DIMENSIONS.height
                  && img.width <= MAX_DIMENSIONS.width
                  && img.height <= MAX_DIMENSIONS.height
              resolve(meetsDimensions)
            }
            img.src = e.target?.result as string
          }
          reader.readAsDataURL(file)
        }),
      {
        message: `The image dimensions are invalid. Please upload an image between ${MIN_DIMENSIONS.width}x${MIN_DIMENSIONS.height} and ${MAX_DIMENSIONS.width}x${MAX_DIMENSIONS.height} pixels.`
      }
    )
})

type schema = z.output<typeof schema>

const state = reactive<Partial<schema>>({
  image: undefined
})

async function onSubmit(event: FormSubmitEvent<schema>) {
  console.log(event.data)
}
</script>

<template>
  <B24Form :schema="schema" :state="state" class="space-y-4 w-96" @submit="onSubmit">
    <B24FormField name="image" label="Image" description="JPG, GIF or PNG. 2MB Max.">
      <B24FileUpload v-model="state.image" accept="image/*" class="min-h-48" />
    </B24FormField>

    <B24Button type="submit" label="Submit" />
  </B24Form>
</template>
```

### With default slot

You can use the default slot to make your own FileUpload component.

```vue [FileUploadDefaultSlotExample.vue]
<script setup lang="ts">
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'
import * as z from 'zod'
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'

const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
const MIN_DIMENSIONS = { width: 200, height: 200 }
const MAX_DIMENSIONS = { width: 4096, height: 4096 }
const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']

const formatBytes = (bytes: number, decimals = 2) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const dm = decimals < 0 ? 0 : decimals
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}

const schema = z.object({
  avatar: z
    .instanceof(File, {
      message: 'Please select an image file.'
    })
    .refine(file => file.size <= MAX_FILE_SIZE, {
      message: `The image is too large. Please choose an image smaller than ${formatBytes(MAX_FILE_SIZE)}.`
    })
    .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
      message: 'Please upload a valid image file (JPEG, PNG, or WebP).'
    })
    .refine(
      file =>
        new Promise((resolve) => {
          const reader = new FileReader()
          reader.onload = (e) => {
            const img = new Image()
            img.onload = () => {
              const meetsDimensions
                = img.width >= MIN_DIMENSIONS.width
                  && img.height >= MIN_DIMENSIONS.height
                  && img.width <= MAX_DIMENSIONS.width
                  && img.height <= MAX_DIMENSIONS.height
              resolve(meetsDimensions)
            }
            img.src = e.target?.result as string
          }
          reader.readAsDataURL(file)
        }),
      {
        message: `The image dimensions are invalid. Please upload an image between ${MIN_DIMENSIONS.width}x${MIN_DIMENSIONS.height} and ${MAX_DIMENSIONS.width}x${MAX_DIMENSIONS.height} pixels.`
      }
    )
})

type schema = z.output<typeof schema>

const state = reactive<Partial<schema>>({
  avatar: undefined
})

function createObjectUrl(file: File): string {
  return URL.createObjectURL(file)
}

async function onSubmit(event: FormSubmitEvent<schema>) {
  console.log(event.data)
}
</script>

<template>
  <B24Form :schema="schema" :state="state" class="space-y-4 w-64" @submit="onSubmit">
    <B24FormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max.">
      <B24FileUpload v-slot="{ open, removeFile }" v-model="state.avatar" accept="image/*">
        <div class="flex flex-wrap items-center gap-3">
          <B24Avatar size="lg" :src="state.avatar ? createObjectUrl(state.avatar) : undefined" :icon="ImageIcon" />

          <B24Button :label="state.avatar ? 'Change image' : 'Upload image'" color="air-selection" @click="open()" />
        </div>

        <p v-if="state.avatar" class="text-(length:--ui-font-size-xs) text-(--b24ui-typography-description-color) mt-1.5">
          {{ state.avatar.name }}

          <B24Button
            label="Remove"
            color="air-primary-alert"
            size="xs"
            class="p-0"
            @click="removeFile()"
          />
        </p>
      </B24FileUpload>
    </B24FormField>

    <B24Button type="submit" label="Submit" />
  </B24Form>
</template>
```

### With files-bottom slot

You can use the `files-bottom` slot to add a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) under the files list to remove all files for example.

```vue [FileUploadFilesBottomSlotExample.vue]
<script setup lang="ts">
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'
import UploadIcon from '@bitrix24/b24icons-vue/outline/UploadIcon'

const value = ref<File[]>([])
</script>

<template>
  <B24FileUpload
    v-model="value"
    :icon="ImageIcon"
    label="Drop your images here"
    description="SVG, PNG, JPG or GIF (max. 2MB)"
    layout="list"
    multiple
    :interactive="false"
    class="w-96 min-h-48"
  >
    <template #actions="{ open }">
      <B24Button
        label="Select images"
        :icon="UploadIcon"
        color="air-selection"
        @click="open()"
      />
    </template>

    <template #files-bottom="{ removeFile, files }">
      <B24Button
        v-if="files?.length"
        label="Remove all files"
        color="air-primary-alert"
        @click="removeFile()"
      />
    </template>
  </B24FileUpload>
</template>
```

> [!NOTE](https://bitrix24.github.io/b24ui/#interactive)
> The `interactive` prop is set to `false` in this example to prevent the default clickable area.

### With files-top slot

You can use the `files-top` slot to add a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) above the files list to add new files for example.

```vue [FileUploadFilesTopSlotExample.vue]
<script setup lang="ts">
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'
import UploadIcon from '@bitrix24/b24icons-vue/outline/UploadIcon'

const value = ref<File[]>([])
</script>

<template>
  <B24FileUpload
    v-model="value"
    :icon="ImageIcon"
    label="Drop your images here"
    description="SVG, PNG, JPG or GIF (max. 2MB)"
    layout="grid"
    multiple
    :interactive="false"
    class="w-96 min-h-48"
  >
    <template #actions="{ open }">
      <B24Button
        label="Select images"
        :icon="UploadIcon"
        color="air-selection"
        @click="open()"
      />
    </template>

    <template #files-top="{ open, files }">
      <div v-if="files?.length" class="mb-2 flex items-center justify-between">
        <p class="font-(--ui-font-weight-bold)">
          Files ({{ files?.length }})
        </p>

        <B24Button
          label="Add more"
          color="air-selection"
          class="-my-2"
          @click="open()"
        />
      </div>
    </template>
  </B24FileUpload>
</template>
```

## API

### Props

```ts
/**
 * Props for the FileUpload component
 */
interface FileUploadProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  id?: string | undefined;
  name?: string | undefined;
  /**
   * The icon to display.
   */
  icon?: IconComponent | undefined;
  label?: string | undefined;
  description?: string | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary";
  /**
   * The `button` variant is only available when `multiple` is `false`.
   */
  variant?: "button" | "area" | undefined;
  size?: "xs" | "sm" | "md" | "lg" | undefined;
  /**
   * The layout of how files are displayed.
   * Only works when `variant` is `area`.
   * @default "\"grid\""
   */
  layout?: "list" | "grid" | undefined;
  /**
   * The position of the files.
   * Only works when `variant` is `area` and when `layout` is `list`.
   * @default "\"outside\""
   */
  position?: "inside" | "outside" | undefined;
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  /**
   * Specifies the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g., "image/png,application/pdf,.jpg").
   * @default "\"*\""
   */
  accept?: string | undefined;
  /**
   * @default "false as never"
   */
  multiple?: boolean | undefined;
  /**
   * Reset the file input when the dialog is opened.
   * @default "false"
   */
  reset?: boolean | undefined;
  /**
   * Create a zone that allows the user to drop files onto it.
   * @default "true"
   */
  dropzone?: boolean | undefined;
  /**
   * Make the dropzone interactive when the user is clicking on it.
   * @default "true"
   */
  interactive?: boolean | undefined;
  required?: boolean | undefined;
  disabled?: boolean | undefined;
  /**
   * The icon to display for the file.
   */
  fileIcon?: IconComponent | undefined;
  /**
   * Configure the delete button for the file.
   * When `layout` is `grid`, the default is `{ color: 'air-secondary-no-accent', size: 'xs' }`{lang="ts-type"}
   * When `layout` is `list`, the default is `{ color: 'air-tertiary-no-accent' }`{lang="ts-type"}
   * @default "true"
   */
  fileDelete?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed to delete a file.
   */
  fileDeleteIcon?: IconComponent | undefined;
  /**
   * Show the file preview/list after upload.
   * @default "true"
   */
  preview?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; wrapper?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; actions?: ClassNameValue; files?: ClassNameValue; file?: ClassNameValue; fileLeadingAvatar?: ClassNameValue; fileWrapper?: ClassNameValue; fileName?: ClassNameValue; fileSize?: ClassNameValue; fileTrailingButton?: ClassNameValue; } | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  modelValue?: File | File[] | null | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
> This component also supports all native `<input>` HTML attributes.

### Slots

```ts
/**
 * Slots for the FileUpload component
 */
interface FileUploadSlots {
  default(): any;
  leading(): any;
  label(): any;
  description(): any;
  actions(): any;
  files(): any;
  files-top(): any;
  files-bottom(): any;
  file(): any;
  file-leading(): any;
  file-name(): any;
  file-size(): any;
  file-trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the FileUpload component
 */
interface FileUploadEmits {
  change: (payload: [event: Event]) => void;
  update:modelValue: (payload: [value: File | File[] | null | undefined]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                          | Type                                                                                                                                                           |
| --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inputRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}    | `Ref<HTMLInputElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |
| `dropzoneRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLDivElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}   |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    fileUpload: {
      slots: {
        root: 'relative flex flex-col',
        base: 'w-full flex-1 bg-(--b24ui-background)/90 border-(--b24ui-border-color) border-(length:--b24ui-border-width) text-(--b24ui-color) flex flex-col gap-2 items-stretch justify-center rounded-(--ui-border-radius-md) focus-visible:outline-2 transition-[background]',
        wrapper: 'flex flex-col items-center justify-center text-center',
        icon: 'shrink-0',
        avatar: 'shrink-0',
        label: 'mt-2 text-(--b24ui-color) font-(--ui-font-weight-medium)',
        description: 'mt-1 text-(--b24ui-typography-description-color)',
        actions: 'mt-4 flex flex-wrap gap-1.5 shrink-0',
        files: '',
        file: 'relative',
        fileLeadingAvatar: 'shrink-0',
        fileWrapper: 'flex flex-col min-w-0',
        fileName: 'text-(--b24ui-color) truncate',
        fileSize: 'text-(--b24ui-typography-description-color) truncate',
        fileTrailingButton: ''
      },
      variants: {
        color: {
          'air-primary': {
            root: 'light style-filled-inverted'
          },
          'air-primary-success': {
            root: 'light style-filled-success-inverted'
          },
          'air-primary-alert': {
            root: 'light style-filled-alert-inverted'
          },
          'air-primary-copilot': {
            root: 'light style-filled-copilot-inverted'
          },
          'air-primary-warning': {
            root: 'light style-filled-warning-inverted'
          },
          'air-secondary': {
            root: 'style-outline'
          },
          'air-secondary-alert': {
            root: 'light style-tinted-alert'
          },
          'air-secondary-accent': {
            root: 'light style-tinted'
          },
          'air-secondary-accent-1': {
            root: 'style-outline-accent-1'
          },
          'air-secondary-accent-2': {
            root: 'style-outline-accent-2'
          },
          'air-tertiary': {
            root: 'style-outline-no-accent'
          }
        },
        variant: {
          area: {
            wrapper: 'px-4 py-3',
            base: 'p-4'
          },
          button: {}
        },
        size: {
          xs: {
            base: 'text-(length:--ui-font-size-xs)',
            icon: 'size-4',
            file: 'text-(length:--ui-font-size-xs) px-2 py-1 gap-1',
            fileWrapper: 'flex-row gap-1'
          },
          sm: {
            base: 'text-(length:--ui-font-size-xs)',
            icon: 'size-4',
            file: 'text-(length:--ui-font-size-xs) px-2.5 py-1.5 gap-1.5',
            fileWrapper: 'flex-row gap-1'
          },
          md: {
            base: 'text-(length:--ui-font-size-sm)',
            icon: 'size-5',
            file: 'text-(length:--ui-font-size-xs) px-2.5 py-1.5 gap-1.5'
          },
          lg: {
            base: 'ext-(length:--ui-font-size-sm)',
            icon: 'size-5',
            file: 'ext-(length:--ui-font-size-sm) px-3 py-2 gap-2',
            fileSize: 'ext-(length:--ui-font-size-xs)'
          }
        },
        layout: {
          list: {
            root: 'gap-2 items-start',
            files: 'flex flex-col w-full gap-2',
            file: 'min-w-0 w-full rounded-(--ui-border-radius-md) flex items-center border border-(--b24ui-border-color)',
            fileTrailingButton: 'ms-auto'
          },
          grid: {
            fileWrapper: 'hidden',
            fileLeadingAvatar: 'size-full rounded-lg',
            fileTrailingButton: 'absolute -top-1.5 -end-1.5 rounded-(--ui-border-radius-pill) border edge-light:[--ui-btn-background:var(--ui-color-base-white-fixed)] edge-dark:[--ui-btn-background:var(--ui-color-base-white-fixed)] edge-dark:hover:bg-(--ui-color-base-white-fixed)/90 edge-dark:[--ui-btn-color:var(--ui-color-g-content-grey-1)] dark:[--ui-btn-background:var(--ui-color-g-content-grey-1)] dark:hover:bg-(--ui-color-g-content-grey-1)/90 dark:[--ui-btn-color:var(--ui-color-g-content-grey-4)]'
          }
        },
        position: {
          inside: '',
          outside: ''
        },
        dropzone: {
          true: 'border-dashed data-[dragging=true]:bg-(--ui-color-accent-soft-grey-1)/90'
        },
        interactive: {
          true: ''
        },
        highlight: {
          true: ''
        },
        multiple: {
          true: ''
        },
        disabled: {
          true: 'cursor-not-allowed opacity-75'
        }
      },
      compoundVariants: [
        {
          class: 'focus-visible:outline-inverted'
        },
        {
          highlight: true,
          class: 'border-inverted'
        },
        {
          size: 'xs',
          layout: 'list',
          class: {
            fileTrailingButton: '-me-1'
          }
        },
        {
          size: 'sm',
          layout: 'list',
          class: {
            fileTrailingButton: '-me-1.5'
          }
        },
        {
          size: 'md',
          layout: 'list',
          class: {
            fileTrailingButton: '-me-1.5'
          }
        },
        {
          size: 'lg',
          layout: 'list',
          class: {
            fileTrailingButton: '-me-2'
          }
        },
        {
          variant: 'button',
          size: 'xs',
          class: {
            base: 'p-1'
          }
        },
        {
          variant: 'button',
          size: 'sm',
          class: {
            base: 'p-1.5'
          }
        },
        {
          variant: 'button',
          size: 'md',
          class: {
            base: 'p-1.5'
          }
        },
        {
          variant: 'button',
          size: 'lg',
          class: {
            base: 'p-2'
          }
        },
        {
          layout: 'grid',
          multiple: true,
          class: {
            files: 'grid grid-cols-2 md:grid-cols-3 gap-4 w-full',
            file: 'p-0 aspect-square'
          }
        },
        {
          layout: 'grid',
          multiple: false,
          class: {
            file: 'absolute inset-0 p-0'
          }
        },
        {
          interactive: true,
          disabled: false,
          class: 'hover:bg-elevated/25'
        }
      ],
      defaultVariants: {
        color: 'air-tertiary',
        variant: 'area',
        size: 'md'
      }
    }
  }
})
```

---

# Form

> A form component designed for validation and handling submissions.

## Usage

Use the Form component to validate form data using any validation library supporting [Standard Schema](https://github.com/standard-schema/standard-schema){rel="nofollow"} such as [Valibot](https://github.com/fabian-hiller/valibot){rel="nofollow"}, [Zod](https://github.com/colinhacks/zod){rel="nofollow"}, [Regle](https://github.com/victorgarciaesgi/regle){rel="nofollow"}, [Yup](https://github.com/jquense/yup){rel="nofollow"}, [Joi](https://github.com/hapijs/joi){rel="nofollow"} or [Superstruct](https://github.com/ianstormtaylor/superstruct){rel="nofollow"} or your own validation logic.

It works with the [FormField](https://bitrix24.github.io/b24ui/raw/docs/components/form-field.md) component to display error messages around form elements automatically.

### Schema validation

It requires two props:

- `state` - a reactive object holding the form's state.
- `schema` - any [Standard Schema](https://github.com/standard-schema/standard-schema){rel="nofollow"} or [Superstruct](https://github.com/ianstormtaylor/superstruct){rel="nofollow"}.

> !WARNING
> strong,\[object Object],No validation library is included by default, ensure you **install the one you need**.

::tabs{.gap-0}
```vue [FormExampleValibot.vue]
<script setup lang="ts">
import * as v from 'valibot'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const schema = v.object({
  email: v.pipe(v.string(), v.email('Invalid email')),
  password: v.pipe(v.string(), v.minLength(8, 'Must be at least 8 characters'))
})

type Schema = v.InferOutput<typeof schema>

const state = reactive({
  email: '',
  password: ''
})

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'air-primary-success' })
  console.log(event.data)
}
</script>

<template>
  <B24Form :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <B24FormField label="Email" name="email">
      <B24Input v-model="state.email" />
    </B24FormField>

    <B24FormField label="Password" name="password">
      <B24Input v-model="state.password" type="password" />
    </B24FormField>

    <B24Button color="air-primary" type="submit">
      Submit
    </B24Button>
  </B24Form>
</template>
```

```vue [FormExampleZod.vue]
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const schema = z.object({
  email: z.email('Invalid email'),
  password: z.string('Password is required').min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

const state = reactive<Partial<Schema>>({
  email: undefined,
  password: undefined
})

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
  console.log(event.data)
}
</script>

<template>
  <B24Form :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <B24FormField label="Email" name="email">
      <B24Input v-model="state.email" />
    </B24FormField>

    <B24FormField label="Password" name="password">
      <B24Input v-model="state.password" type="password" />
    </B24FormField>

    <B24Button color="air-primary" type="submit">
      Submit
    </B24Button>
  </B24Form>
</template>
```

```vue [FormExampleRegle.vue]
<script setup lang="ts">
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'
import { useRegle, type InferInput } from '@regle/core'
import { required, email, minLength, withMessage } from '@regle/rules'

const { r$ } = useRegle({ email: '', password: '' }, {
  email: { required, email: withMessage(email, 'Invalid email') },
  password: { required, minLength: withMessage(minLength(8), 'Must be at least 8 characters') }
})

type Schema = InferInput<typeof r$>

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
  console.log(event.data)
}
</script>

<template>
  <B24Form :schema="r$" :state="r$.$value" class="space-y-4" @submit="onSubmit">
    <B24FormField label="Email" name="email">
      <B24Input v-model="r$.$value.email" />
    </B24FormField>

    <B24FormField label="Password" name="password">
      <B24Input v-model="r$.$value.password" type="password" />
    </B24FormField>

    <B24Button type="submit">
      Submit
    </B24Button>
  </B24Form>
</template>
```

```vue [FormExampleYup.vue]
<script setup lang="ts">
import { object, string } from 'yup'
import type { InferType } from 'yup'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const schema = object({
  email: string().email('Invalid email').required('Required'),
  password: string()
    .min(8, 'Must be at least 8 characters')
    .required('Required')
})

type Schema = InferType<typeof schema>

const state = reactive({
  email: undefined,
  password: undefined
})

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
  console.log(event.data)
}
</script>

<template>
  <B24Form :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <B24FormField label="Email" name="email">
      <B24Input v-model="state.email" />
    </B24FormField>

    <B24FormField label="Password" name="password">
      <B24Input v-model="state.password" type="password" />
    </B24FormField>

    <B24Button color="air-primary" type="submit">
      Submit
    </B24Button>
  </B24Form>
</template>
```

```vue [FormExampleJoi.vue]
<script setup lang="ts">
import Joi from 'joi'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const schema = Joi.object({
  email: Joi.string().required(),
  password: Joi.string()
    .min(8)
    .required()
})

const state = reactive({
  email: undefined,
  password: undefined
})

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<typeof state>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'air-primary-success' })
  console.log(event.data)
}
</script>

<template>
  <B24Form :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <B24FormField label="Email" name="email">
      <B24Input v-model="state.email" />
    </B24FormField>

    <B24FormField label="Password" name="password">
      <B24Input v-model="state.password" type="password" />
    </B24FormField>

    <B24Button color="air-primary" type="submit">
      Submit
    </B24Button>
  </B24Form>
</template>
```

```vue [FormExampleSuperstruct.vue]
<script setup lang="ts">
import { object, string, nonempty, refine } from 'superstruct'
import type { Infer } from 'superstruct'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const schema = object({
  email: nonempty(string()),
  password: refine(string(), 'Password', (value) => {
    if (value.length >= 8) return true
    return 'Must be at least 8 characters'
  })
})

const state = reactive({
  email: '',
  password: ''
})

type Schema = Infer<typeof schema>

async function onSubmit(event: FormSubmitEvent<Schema>) {
  console.log(event.data)
}
</script>

<template>
  <B24Form :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <B24FormField label="Email" name="email">
      <B24Input v-model="state.email" />
    </B24FormField>

    <B24FormField label="Password" name="password">
      <B24Input v-model="state.password" type="password" />
    </B24FormField>

    <B24Button color="air-primary" type="submit">
      Submit
    </B24Button>
  </B24Form>
</template>
```
::

Errors are reported directly to the [FormField](https://bitrix24.github.io/b24ui/raw/docs/components/form-field.md) component based on the `name` or `error-pattern` prop. This means the validation rules defined for the `email` attribute in your schema will be applied to `<FormField name="email">`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="vue"}.

Nested validation rules are handled using dot notation. For example, a rule like `{ user: z.object({ email: z.string() }) }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts"} will be applied to `<FormField name="user.email">`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="vue"}.

### Custom validation

Use the `validate` prop to apply your own validation logic.

The validation function must return a list of errors with the following attributes:

- `message` - the error message to display.
- `name` - the `name` of the `FormField` to send the error to.

> !TIP
> It can be used alongside the `schema` prop to handle complex use cases.

```vue [FormExampleBasic.vue]
<script setup lang="ts">
import type { FormError, FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const state = reactive({
  email: undefined,
  password: undefined
})

type Schema = typeof state

function validate(state: Partial<Schema>): FormError[] {
  const errors = []
  if (!state.email) errors.push({ name: 'email', message: 'Required' })
  if (!state.password) errors.push({ name: 'password', message: 'Required' })
  return errors
}

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'air-primary-success' })
  console.log(event.data)
}
</script>

<template>
  <B24Form :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
    <B24FormField label="Email" name="email">
      <B24Input v-model="state.email" />
    </B24FormField>

    <B24FormField label="Password" name="password">
      <B24Input v-model="state.password" type="password" />
    </B24FormField>

    <B24Button color="air-primary" type="submit">
      Submit
    </B24Button>
  </B24Form>
</template>
```

### Input events

The Form component automatically triggers validation when an input emits an `input`, `change`, or `blur` event.

- Validation on `input` occurs **as you type**.
- Validation on `change` occurs when you **commit to a value**.
- Validation on `blur` happens when an input **loses focus**.

You can control when validation happens this using the `validate-on` prop.

> !TIP
> The form always validates on submit.

```vue [FormExampleElements.vue]
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const schema = z.object({
  input: z.string().min(10),
  inputNumber: z.number().min(10),
  inputMenu: z.any().refine(option => option?.value === 'option-2', {
    message: 'Select Option 2'
  }),
  inputMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
    message: 'Include Option 2'
  }),
  textarea: z.string().min(10),
  select: z.string().refine(value => value === 'option-2', {
    message: 'Select Option 2'
  }),
  selectMultiple: z.array(z.string()).refine(values => values.includes('option-2'), {
    message: 'Include Option 2'
  }),
  selectMenu: z.any().refine(option => option?.value === 'option-2', {
    message: 'Select Option 2'
  }),
  selectMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
    message: 'Include Option 2'
  }),
  switch: z.boolean().refine(value => value === true, {
    message: 'Toggle me'
  }),
  checkbox: z.boolean().refine(value => value === true, {
    message: 'Check me'
  }),
  radioGroup: z.string().refine(value => value === 'option-2', {
    message: 'Select Option 2'
  }),
  checkboxGroup: z.any().refine(values => !!values?.find((option: any) => option === 'option-2'), {
    message: 'Include Option 2'
  }),
  range: z.number().max(20, { message: 'Must be less than 20' }),
  pin: z.string().regex(/^\d$/).array().length(5),
  file: z.file().min(1).max(1024 * 1024).mime('image/png')
})

type Schema = z.input<typeof schema>

const state = reactive<Partial<Schema>>({})

const form = useTemplateRef('form')

const items = [
  { label: 'Option 1', value: 'option-1' },
  { label: 'Option 2', value: 'option-2' },
  { label: 'Option 3', value: 'option-3' }
]

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'air-primary-success' })
  console.log(event.data)
}

function resetState() {
  state.input = undefined
  state.inputNumber = undefined
  state.inputMenu = undefined
  state.inputMenuMultiple = undefined
  state.textarea = undefined
  state.select = undefined
  state.selectMenu = undefined
  state.selectMultiple = undefined
  state.selectMenuMultiple = undefined
  state.switch = undefined
  state.checkbox = undefined
  state.radioGroup = undefined
  state.range = undefined
  state.file = undefined
}
</script>

<template>
  <B24Form ref="form" :state="state" :schema="schema" class="w-full" @submit="onSubmit">
    <div class="grid grid-cols-3 gap-4">
      <B24FormField label="Input" name="input">
        <B24Input v-model="state.input" placeholder="john@lennon.com" class="w-full" />
      </B24FormField>

      <div class="flex flex-col gap-4">
        <B24FormField name="switch">
          <B24Switch v-model="state.switch" label="Switch me" />
        </B24FormField>

        <B24FormField name="checkbox">
          <B24Checkbox v-model="state.checkbox" label="Check me" />
        </B24FormField>
      </div>

      <B24FormField name="slider" label="Slider">
        <B24Range v-model="state.range" />
      </B24FormField>

      <B24FormField name="select" label="Select">
        <B24Select v-model="state.select" :items="items" class="w-full" />
      </B24FormField>

      <B24FormField name="selectMultiple" label="Select (Multiple)">
        <B24Select v-model="state.selectMultiple" multiple :items="items" class="w-full" />
      </B24FormField>

      <B24FormField name="selectMenu" label="Select Menu">
        <B24SelectMenu v-model="state.selectMenu" :items="items" class="w-full" />
      </B24FormField>

      <B24FormField name="selectMenuMultiple" label="Select Menu (Multiple)">
        <B24SelectMenu v-model="state.selectMenuMultiple" multiple :items="items" class="w-full" />
      </B24FormField>

      <B24FormField name="inputMenu" label="Input Menu">
        <B24InputMenu v-model="state.inputMenu" :items="items" class="w-full" />
      </B24FormField>

      <B24FormField name="inputMenuMultiple" label="Input Menu (Multiple)">
        <B24InputMenu v-model="state.inputMenuMultiple" multiple :items="items" class="w-full" />
      </B24FormField>

      <B24FormField name="inputNumber" label="Input Number">
        <B24InputNumber v-model="state.inputNumber" class="w-full" />
      </B24FormField>

      <B24FormField label="Textarea" name="textarea">
        <B24Textarea v-model="state.textarea" class="w-full" />
      </B24FormField>
      <div class="flex gap-4">
        <B24FormField name="radioGroup">
          <B24RadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
        </B24FormField>
        <B24FormField name="checkboxGroup">
          <B24CheckboxGroup v-model="state.checkboxGroup" legend="Checkbox group" :items="items" />
        </B24FormField>
      </div>
      <B24FormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
        <B24PinInput v-model="state.pin" />
      </B24FormField>

      <B24FormField name="file" label="File Input">
        <B24FileUpload
          v-model="state.file"
          label="Drop your image here"
          description="PNG (max. 1MB)"
          class="w-full min-h-44"
        />
      </B24FormField>
    </div>

    <div class="flex gap-2 mt-8">
      <B24Button color="air-primary" type="submit">
        Submit
      </B24Button>

      <B24Button @click="form?.clear(); resetState()">
        Clear
      </B24Button>
    </div>
  </B24Form>
</template>
```

> !TIP
> You can use the [`useFormField`](https://bitrix24.github.io/b24ui/raw/docs/composables/use-form-field.md) composable to implement this inside your own components.

### Error event

You can listen to the `@error` event to handle errors. This event is triggered when the form is submitted and contains an array of `FormError` objects with the following fields:

- `id` - the input's `id`.
- `name` - the `name` of the `FormField`
- `message` - the error message to display.

Here's an example that focuses the first input element with an error after the form is submitted:

```vue [FormExampleOnError.vue]
<script setup lang="ts">
import type { FormError, FormErrorEvent, FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const state = reactive({
  email: undefined,
  password: undefined
})

type Schema = typeof state

function validate(state: Partial<Schema>): FormError[] {
  const errors = []
  if (!state.email) errors.push({ name: 'email', message: 'Required' })
  if (!state.password) errors.push({ name: 'password', message: 'Required' })
  return errors
}

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'air-primary-success' })
  console.log(event.data)
}

async function onError(event: FormErrorEvent) {
  if (event?.errors?.[0]?.id) {
    const element = document.getElementById(event.errors[0].id)
    element?.focus()
    element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }
}
</script>

<template>
  <B24Form :validate="validate" :state="state" class="space-y-4" @submit="onSubmit" @error="onError">
    <B24FormField label="Email" name="email">
      <B24Input v-model="state.email" />
    </B24FormField>

    <B24FormField label="Password" name="password">
      <B24Input v-model="state.password" type="password" />
    </B24FormField>

    <B24Button color="air-primary" type="submit">
      Submit
    </B24Button>
  </B24Form>
</template>
```

### Nesting forms

Use the `nested` prop to nest multiple Form components and link their validation functions. In this case, validating the parent form will automatically validate all the other forms inside it.

Nested forms directly inherit their parent's state, so you don't need to define a separate state for them. You can use the `name` prop to target a nested attribute within the parent's state.

It can be used to dynamically add fields based on user's input:

```vue [FormExampleNested.vue]
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const schema = z.object({
  name: z.string().min(2),
  news: z.boolean().default(false)
})

type Schema = z.output<typeof schema>

const nestedSchema = z.object({
  email: z.email()
})

type NestedSchema = z.output<typeof nestedSchema>

const state = reactive<Partial<Schema & NestedSchema>>({ })

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'air-primary-success' })
  console.log(event.data)
}
</script>

<template>
  <B24Form
    ref="form"
    :state="state"
    :schema="schema"
    class="gap-4 flex flex-col w-60"
    @submit="onSubmit"
  >
    <B24FormField label="Name" name="name">
      <B24Input v-model="state.name" placeholder="John Lennon" />
    </B24FormField>

    <div>
      <B24Checkbox v-model="state.news" name="news" label="Register to our newsletter" @update:model-value="state.email = undefined" />
    </div>

    <B24Form v-if="state.news" :schema="nestedSchema" nested>
      <B24FormField label="Email" name="email">
        <B24Input v-model="state.email" placeholder="john@lennon.com" />
      </B24FormField>
    </B24Form>

    <div>
      <B24Button color="air-primary" type="submit">
        Submit
      </B24Button>
    </div>
  </B24Form>
</template>
```

Or to validate list inputs:

```vue [FormExampleNestedList.vue]
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

const schema = z.object({
  customer: z.string().min(2)
})

type Schema = z.output<typeof schema>

const itemSchema = z.object({
  description: z.string().min(1),
  price: z.number().min(0)
})

type ItemSchema = z.output<typeof itemSchema>

const state = reactive<Partial<Schema & { items: Partial<ItemSchema>[] }>>({ })

function addItem() {
  if (!state.items) {
    state.items = []
  }
  state.items.push({})
}

function removeItem() {
  if (state.items) {
    state.items.pop()
  }
}

const toast = useToast()

async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'air-primary-success' })
  console.log(event.data)
}
</script>

<template>
  <B24Form
    :state="state"
    :schema="schema"
    class="gap-4 flex flex-col w-60"
    @submit="onSubmit"
  >
    <B24FormField label="Customer" name="customer">
      <B24Input v-model="state.customer" placeholder="Wonka Industries" />
    </B24FormField>

    <B24Form
      v-for="(item, count) in state.items"
      :key="count"
      :name="`items.${count}`"
      :schema="itemSchema"
      class="flex gap-2"
      nested
    >
      <B24FormField :label="!count ? 'Description' : undefined" name="description">
        <B24Input v-model="item.description" />
      </B24FormField>
      <B24FormField :label="!count ? 'Price' : undefined" name="price" class="w-20">
        <B24Input v-model="item.price" type="number" />
      </B24FormField>
    </B24Form>

    <div class="flex gap-2">
      <B24Button size="sm" @click="addItem()">
        Add Item
      </B24Button>

      <B24Button size="sm" @click="removeItem()">
        Remove Item
      </B24Button>
    </div>
    <div>
      <B24Button color="air-primary" type="submit">
        Submit
      </B24Button>
    </div>
  </B24Form>
</template>
```

## API

### Props

```ts
/**
 * Props for the Form component
 */
interface FormProps {
  id?: string | number | undefined;
  /**
   * Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs.
   */
  schema?: FormSchema | undefined;
  /**
   * An object representing the current state of the form.
   */
  state?: Partial<any> | undefined;
  /**
   * Custom validation function to validate the form state.
   */
  validate?: ((state: Partial<any>) => FormError<string>[] | Promise<FormError<string>[]>) | undefined;
  /**
   * The list of input events that trigger the form validation.
   */
  validateOn?: FormInputEvents[] | undefined;
  /**
   * Disable all inputs inside the form.
   */
  disabled?: boolean | undefined;
  /**
   * Path of the form's state within it's parent form.
   * Used for nesting forms. Only available if `nested` is true.
   */
  name?: string | undefined;
  /**
   * Delay in milliseconds before validating the form on input events.
   * @default "300"
   */
  validateOnInputDelay?: number | undefined;
  /**
   * If true, applies schema transformations on submit.
   * @default "true as T"
   */
  transform?: boolean | undefined;
  /**
   * If true, this form will attach to its parent Form and validate at the same time.
   */
  nested?: boolean | undefined;
  /**
   * When `true`, all form elements will be disabled on `@submit` event.
   * This will cause any focused input elements to lose their focus state.
   * @default "true"
   */
  loadingAuto?: boolean | undefined;
  acceptcharset?: string | undefined;
  action?: string | undefined;
  autocomplete?: string | undefined;
  enctype?: string | undefined;
  method?: string | undefined;
  novalidate?: Booleanish | undefined;
  target?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes)
> This component also supports all native `<form>` HTML attributes.

### Slots

```ts
/**
 * Slots for the Form component
 */
interface FormSlots {
  default(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Form component
 */
interface FormEmits {
  submit: (payload: [event: FormSubmitEvent<any>]) => void;
  error: (payload: [event: FormErrorEvent]) => void;
}
```

### Expose

You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="nofollow"}.

```vue
<script setup lang="ts">
const form = useTemplateRef('form')
</script>

<template>
  <B24Form ref="form" />
</template>
```

This will give you access to the following:

| Name                                                                                                                                                                                                                                        | Type                                                                                                                                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `submit()`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                                                  | `Promise<void>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} :br ::div{.text-toned,mt-1}
Triggers form submission.
::                                                                                         |
| `validate(opts: { name?: keyof T | (keyof T)[], silent?: boolean, nested?: boolean, transform?: boolean })`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Promise<T>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} :br ::div{.text-toned,mt-1}
Triggers form validation. Will raise any errors unless `opts.silent` is set to true.
::                                 |
| `clear(path?: keyof T | RegExp)`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                            | `void` :br ::div{.text-toned,mt-1}
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
::                                                                                                                                                        |
| `getErrors(path?: keyof T RegExp)`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                          | `FormError[]`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} :br ::div{.text-toned,mt-1}
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
::             |
| `setErrors(errors: FormError[], name?: keyof T RegExp)`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                     | `void` :br ::div{.text-toned,mt-1}
Sets form errors for a given path. If no path is provided, overrides all errors.
::                                                                                                                                                                           |
| `errors`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                                                    | `Ref<FormError[]>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} :br ::div{.text-toned,mt-1}
A reference to the array containing validation errors. Use this to access or manipulate the error information.
:: |
| `disabled`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                                                  | `Ref<boolean>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                                                                                                   |
| `dirty`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                                                     | `Ref<boolean>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} `true` if at least one form field has been updated by the user.                                                                                   |
| `dirtyFields`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                                               | `DeepReadonly<Set<keyof T>>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} Tracks fields that have been modified by the user.                                                                                  |
| `touchedFields`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                                             | `DeepReadonly<Set<keyof T>>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} Tracks fields that the user interacted with.                                                                                        |
| `blurredFields`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                                                             | `DeepReadonly<Set<keyof T>>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} Tracks fields blurred by the user.                                                                                                  |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    form: {
      base: ''
    }
  }
})
```

---

# FormField

> A container for form elements with built-in validation and error management.

## Usage

Wrap any form component with a FormField. Used in a [Form](https://bitrix24.github.io/b24ui/raw/docs/components/form.md), it provides validation and error handling.

### Label

Use the `label` prop to set the label for the form control.

```vue

<template>
  <B24FormField label="Email">
<B24Input placeholder="Enter your email" />
</B24FormField>
</template>

```

> !NOTE
> The label `for` attribute and the form control are associated with a unique `id` if not provided.

When using the `required` prop, an asterisk is added next to the label.

```vue

<template>
  <B24FormField label="Email" required>
<B24Input placeholder="Enter your email" />
</B24FormField>
</template>

```

### Description

Use the `description` prop to provide additional information below the label.

```vue

<template>
  <B24FormField label="Email" description="We'll never share your email with anyone else.">
<B24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>

```

### Hint

Use the `hint` prop to display a hint message next to the label.

```vue

<template>
  <B24FormField label="Email" hint="Optional">
<B24Input placeholder="Enter your email" />
</B24FormField>
</template>

```

### Help

Use the `help` prop to display a help message below the form control.

```vue

<template>
  <B24FormField label="Email" help="Please enter a valid email address.">
<B24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>

```

### Error

Use the `error` prop to display an error message below the form control. When used together with the `help` prop, the `error` prop takes precedence.

When used inside a [Form](https://bitrix24.github.io/b24ui/raw/docs/components/form.md), this is automatically set when a validation error occurs.

```vue

<template>
  <B24FormField label="Email" error="Please enter a valid email address.">
<b24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>

```

### Size

Use the `size` prop to change the size of the FormField, the `size` is proxied to the form control.

```vue

<template>
  <B24FormField label="Email" description="We'll never share your email with anyone else." hint="Optional" help="Please enter a valid email address." size="lg">
<B24Input placeholder="Enter your email" class="w-full" />
</B24FormField>
</template>

```

## API

### Props

```ts
/**
 * Props for the FormField component
 */
interface FormFieldProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The name of the FormField. Also used to match form errors.
   */
  name?: string | undefined;
  /**
   * A regular expression to match form error names.
   */
  errorPattern?: RegExp | undefined;
  label?: string | undefined;
  description?: string | undefined;
  help?: string | undefined;
  error?: string | boolean | undefined;
  hint?: string | undefined;
  size?: "md" | "xs" | "sm" | "lg" | undefined;
  required?: boolean | undefined;
  /**
   * If true, validation on input will be active immediately instead of waiting for a blur event.
   */
  eagerValidation?: boolean | undefined;
  /**
   * Delay in milliseconds before validating the form on input events.
   */
  validateOnInputDelay?: number | undefined;
  b24ui?: { root?: ClassNameValue; wrapper?: ClassNameValue; labelWrapper?: ClassNameValue; label?: ClassNameValue; hint?: ClassNameValue; container?: ClassNameValue; description?: ClassNameValue; error?: ClassNameValue; errorWrapper?: ClassNameValue; errorIcon?: ClassNameValue; help?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the FormField component
 */
interface FormFieldSlots {
  label(): any;
  hint(): any;
  description(): any;
  help(): any;
  error(): any;
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    formField: {
      slots: {
        root: 'font-[family-name:var(--ui-font-family-system)] font-(--ui-font-weight-regular)',
        wrapper: 'leading-(--ui-font-line-height-reset)',
        labelWrapper: 'flex content-center items-center justify-between',
        label: 'block text-(--b24ui-typography-label-color)',
        hint: 'text-(--b24ui-typography-description-color)',
        container: 'relative',
        description: 'mt-[2px] leading-(--ui-font-line-height-2xs) text-(--b24ui-typography-description-color)',
        error: 'mt-[4px] text-(--ui-color-accent-main-alert)',
        errorWrapper: 'flex flex-row flex-nowrap items-center gap-0.5',
        errorIcon: 'size-[18px] mt-[2px]',
        help: 'mt-[6px] leading-(--ui-font-line-height-2xs) italic text-(--b24ui-typography-description-color)'
      },
      variants: {
        useDescription: {
          true: {
            wrapper: 'mb-[6px]'
          },
          false: {
            wrapper: 'mb-[10px]'
          }
        },
        size: {
          xs: {
            root: 'text-(length:--ui-font-size-xs)',
            errorIcon: 'size-[16px]'
          },
          sm: {
            root: 'text-(length:--ui-font-size-xs)',
            errorIcon: 'size-[16px]'
          },
          md: {
            root: 'text-(length:--ui-font-size-sm)',
            errorIcon: 'size-[18px]'
          },
          lg: {
            root: 'text-(length:--ui-font-size-md)'
          }
        },
        required: {
          true: {
            label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
```

### Slots

```ts
/**
 * Slots for the FormField component
 */
interface FormFieldSlots {
  label(): any;
  hint(): any;
  description(): any;
  help(): any;
  error(): any;
  default(): any;
}
```

---

# Input

> An input box designed for text entry.

## Usage

Use the `v-model` directive to control the value of the Input.

```vue

<script setup lang="ts">
const value = ref('')
</script>

<template>
  <B24Input v-model="value" />
</template>

```

### Type

Use the `type` prop to change the input type. Defaults to `text`.

Some types have been implemented in their own components such as [Checkbox](https://bitrix24.github.io/b24ui/raw/docs/components/checkbox.md), [Radio](https://bitrix24.github.io/b24ui/raw/docs/components/radio-group.md), [InputNumber](https://bitrix24.github.io/b24ui/raw/docs/components/input-number.md) etc. and others have been styled like `file` for example.

```vue

<template>
  <B24Input type="file" />
</template>

```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)
> You can check all the available types on the MDN Web Docs.

### Placeholder

Use the `placeholder` prop to set a placeholder text.

```vue

<template>
  <B24Input placeholder="Search..." />
</template>

```

### Color

Use the `color` prop to change the ring color when the Input is focused.

```vue

<template>
  <B24Input color="air-primary-warning" highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the Input.

```vue

<template>
  <B24Input tag="note" color="air-primary-warning" highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

Use the `tagColor` property to set the color for Badge.

```vue

<template>
  <B24Input tag-color="air-secondary-alert" tag="note" color="air-primary-warning" highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Size

Use the `size` prop to change the size of the Input.

```vue

<template>
  <B24Input size="xl" placeholder="Search..." />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the Input.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Input :icon="RocketIcon" size="md" placeholder="Search..." />
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to set icon for trailing position.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Input :trailing-icon="RocketIcon" placeholder="Enter your email" size="md" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the Input.

```vue

<template>
  <B24Input :avatar="{src:'/b24ui/avatar/employee.png'}" size="md" placeholder="Search..." />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the Input.

```vue

<template>
  <B24Input loading placeholder="Search..." />
</template>

```

### Disabled

Use the `disabled` prop to disable the Input.

```vue

<template>
  <B24Input disabled placeholder="Search..." />
</template>

```

### No padding

Use the `noPadding` prop to removes padding from the Input.

```vue

<template>
  <B24Input no-padding highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### No border

Use the `noBorder` prop to removes all borders (rings) from the Input.

```vue

<template>
  <B24Input no-border highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the Input.

```vue

<template>
  <B24Input underline highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the Input.

```vue

<template>
  <B24Input rounded highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## Examples

### With clear button

You can put a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) inside the `#trailing` slot to clear the Input.

```vue [InputClearButtonExample.vue]
<script setup lang="ts">
import CircleCrossIcon from '@bitrix24/b24icons-vue/outline/CircleCrossIcon'

const value = ref('Click to clear')
</script>

<template>
  <B24Input
    v-model="value"
    placeholder="Type something..."
    :b24ui="{ trailing: 'pe-1' }"
  >
    <template v-if="value?.length" #trailing>
      <B24Button
        size="sm"
        color="air-tertiary-no-accent"
        :icon="CircleCrossIcon"
        aria-label="Clear input"
        @click="value = ''"
      />
    </template>
  </B24Input>
</template>
```

### With copy button

You can put a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) inside the `#trailing` slot to copy the value to the clipboard.

```vue [InputCopyButtonExample.vue]
<script setup lang="ts">
import CopyIcon from '@bitrix24/b24icons-vue/outline/CopyIcon'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'

import { useClipboard } from '@vueuse/core'

const value = ref('npx nuxt module add @bitrix24/b24ui-nuxt')

const { copy, copied } = useClipboard()
</script>

<template>
  <B24Input
    v-model="value"
    :b24ui="{ trailing: 'pr-0.5' }"
  >
    <template v-if="value?.length" #trailing>
      <B24Tooltip text="Copy to clipboard" :content="{ side: 'right' }">
        <B24Button
          :b24ui="{
            leadingIcon: [copied ? 'text-(--ui-color-accent-main-success)' : 'text-(--ui-btn-color)']
          }"
          size="sm"
          color="air-tertiary-no-accent"
          :icon="copied ? CircleCheckIcon : CopyIcon"
          aria-label="Copy to clipboard"
          @click="copy(value)"
        />
      </B24Tooltip>
    </template>
  </B24Input>
</template>
```

### With password toggle

You can put a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) inside the `#trailing` slot to toggle the password visibility.

```vue [InputPasswordToggleExample.vue]
<script setup lang="ts">
import ObserverIcon from '@bitrix24/b24icons-vue/outline/ObserverIcon'
import CrossedEyeIcon from '@bitrix24/b24icons-vue/outline/CrossedEyeIcon'

const show = ref(false)
const password = ref('')
</script>

<template>
  <B24Input
    v-model="password"
    placeholder="Password"
    :type="show ? 'text' : 'password'"
    :b24ui="{ trailing: 'pe-1' }"
  >
    <template #trailing>
      <B24Button
        size="sm"
        color="air-tertiary-no-accent"
        :icon="show ? CrossedEyeIcon : ObserverIcon"
        :aria-label="show ? 'Hide password' : 'Show password'"
        :aria-pressed="show"
        aria-controls="password"
        @click="show = !show"
      />
    </template>
  </B24Input>
</template>

<style>
/* Hide the password reveal button in Edge */
::-ms-reveal {
    display: none;
}
</style>
```

### With password strength indicator

You can use the [Progress](https://bitrix24.github.io/b24ui/raw/docs/components/progress.md) component to display the password strength indicator.

```vue [InputPasswordStrengthIndicatorExample.vue]
<script setup lang="ts">
import ObserverIcon from '@bitrix24/b24icons-vue/outline/ObserverIcon'
import CrossedEyeIcon from '@bitrix24/b24icons-vue/outline/CrossedEyeIcon'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'
import CircleCrossIcon from '@bitrix24/b24icons-vue/outline/CircleCrossIcon'

const show = ref(false)
const password = ref('')

function checkStrength(str: string) {
  const requirements = [
    { regex: /.{8,}/, text: 'At least 8 characters' },
    { regex: /\d/, text: 'At least 1 number' },
    { regex: /[a-z]/, text: 'At least 1 lowercase letter' },
    { regex: /[A-Z]/, text: 'At least 1 uppercase letter' }
  ]

  return requirements.map(req => ({ met: req.regex.test(str), text: req.text }))
}

const strength = computed(() => checkStrength(password.value))
const score = computed(() => strength.value.filter(req => req.met).length)

const color = computed(() => {
  if (score.value === 0) return 'air-primary'
  if (score.value <= 1) return 'air-primary-alert'
  if (score.value <= 2) return 'air-primary-warning'
  if (score.value === 3) return 'air-primary-warning'
  return 'success'
})

const text = computed(() => {
  if (score.value === 0) return 'Enter a password'
  if (score.value <= 2) return 'Weak password'
  if (score.value === 3) return 'Medium password'
  return 'Strong password'
})
</script>

<template>
  <div class="space-y-2">
    <B24FormField label="Password">
      <B24Input
        v-model="password"
        placeholder="Password"
        :color="color"
        :type="show ? 'text' : 'password'"
        :aria-invalid="score < 4"
        aria-describedby="password-strength"
        :b24ui="{ trailing: 'pe-1' }"
        class="w-full"
      >
        <template #trailing>
          <B24Button
            size="sm"
            color="air-tertiary-no-accent"
            :icon="show ? CrossedEyeIcon : ObserverIcon"
            :aria-label="show ? 'Hide password' : 'Show password'"
            :aria-pressed="show"
            aria-controls="password"
            @click="show = !show"
          />
        </template>
      </B24Input>
    </B24FormField>

    <B24Progress
      :color="color"
      :indicator="text"
      :model-value="score"
      :max="4"
      size="sm"
    />

    <p id="password-strength" class="text-(length:--ui-font-size-sm) font-(--ui-font-weight-medium)">
      {{ text }}. Must contain:
    </p>

    <ul class="space-y-1" aria-label="Password requirements">
      <li
        v-for="(req, index) in strength"
        :key="index"
        class="flex items-center gap-0.5"
        :class="req.met ? 'text-(--ui-color-accent-main-success)' : 'text-(--b24ui-typography-label-color)'"
      >
        <CircleCheckIcon v-if="req.met" class="size-4 shrink-0" />
        <CircleCrossIcon v-else class="size-4 shrink-0" />

        <span class="text-(length:--ui-font-size-xs) font-(--ui-font-weight-light)">
          {{ req.text }}
          <span class="sr-only">
            {{ req.met ? ' - Requirement met' : ' - Requirement not met' }}
          </span>
        </span>
      </li>
    </ul>
  </div>
</template>
```

### With character limit

You can use the `#trailing` slot to add a character limit to the Input.

```vue [InputCharacterLimitExample.vue]
<script setup lang="ts">
const value = ref('')
const maxLength = 15
</script>

<template>
  <B24Input
    v-model="value"
    :maxlength="maxLength"
    aria-describedby="character-count"
    :b24ui="{ trailing: 'pointer-events-none' }"
  >
    <template #trailing>
      <div
        id="character-count"
        class="text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset) text-(--b24ui-typography-description-color) tabular-nums"
        aria-live="polite"
        role="status"
      >
        {{ value?.length }}/{{ maxLength }}
      </div>
    </template>
  </B24Input>
</template>
```

### With keyboard shortcut

You can use the [Kbd](https://bitrix24.github.io/b24ui/raw/docs/components/kbd.md) component inside the `#trailing` slot to add a keyboard shortcut to the Input.

```vue [InputKbdExample.vue]
<script setup lang="ts">
import CrmSearchIcon from '@bitrix24/b24icons-vue/crm/CrmSearchIcon'

const input = useTemplateRef('input')

defineShortcuts({
  '/': () => {
    input.value?.inputRef?.focus()
  }
})
</script>

<template>
  <B24Input
    ref="input"
    :icon="CrmSearchIcon"
    placeholder="Search..."
  >
    <template #trailing>
      <B24Kbd value="/" />
    </template>
  </B24Input>
</template>
```

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md)
> This example uses the `defineShortcuts` composable to focus the Input when the `` key is pressed.

### With mask

There's no built-in support for masks, but you can use libraries like [maska](https://github.com/beholdr/maska){rel="nofollow"} to mask the Input.

```vue [InputMaskExample.vue]
<script setup lang="ts">
import { vMaska } from 'maska/vue'
import CreditDebitCardIcon from '@bitrix24/b24icons-vue/main/CreditDebitCardIcon'
import CalendarIcon from '@bitrix24/b24icons-vue/outline/CalendarIcon'
</script>

<template>
  <div class="flex flex-col gap-2">
    <B24Input v-maska="'#### #### #### ####'" placeholder="4242 4242 4242 4242" :icon="CreditDebitCardIcon" />

    <div class="flex items-center gap-2">
      <B24Input v-maska="'##/##'" placeholder="MM/YY" :icon="CalendarIcon" />
      <B24Input v-maska="'###'" placeholder="CVC" />
    </div>
  </div>
</template>
```

### With floating label

You can use the `#default` slot to add a floating label to the Input.

```vue [InputFloatingLabelExample.vue]
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <B24Input v-model="value" placeholder="" :b24ui="{ base: 'peer' }">
    <label class="pointer-events-none absolute left-0 -top-[10px] text-(--b24ui-typography-label-color) text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-medium) px-1.5 transition-all peer-focus:-top-[10px] peer-focus:text-(--b24ui-typography-label-color) peer-focus:text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset) peer-focus:font-(--ui-font-weight-medium) peer-placeholder-shown:text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) peer-placeholder-shown:text-(--b24ui-typography-legend-color) peer-placeholder-shown:top-[10px] peer-placeholder-shown:font-(--ui-font-weight-normal)">
      <span class="inline-flex bg-(--ui-color-base-white-fixed) px-1">Email address</span>
    </label>
  </B24Input>
</template>
```

### Within a FormField

You can use the Input within a [FormField](https://bitrix24.github.io/b24ui/raw/docs/components/form-field.md) component to display a label, help text, required indicator, etc.

```vue [InputFormFieldExample.vue]
<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'

const email = ref('')
</script>

<template>
  <B24FormField
    label="Email"
    help="We won't share your email."
    required
  >
    <B24Input
      v-model="email"
      placeholder="Enter your email"
      :icon="Bitrix24Icon"
    />
  </B24FormField>
</template>
```

> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/components/form.md)
> It also provides validation and error handling when used within a **Form** component.

### Within a FieldGroup

You can use the Input within a [FieldGroup](https://bitrix24.github.io/b24ui/raw/docs/components/field-group.md) component to group multiple elements together.

```vue [InputFieldGroupExample.vue]
<script setup lang="ts">
const value = ref('')
const domains = ['.com', '.dev', '.org']
const domain = ref(domains[0])
</script>

<template>
  <B24FieldGroup>
    <B24Input
      v-model="value"
      placeholder="bitrix24"
      :b24ui="{
        base: 'pl-[48px]',
        leading: 'pointer-events-none'
      }"
    >
      <template #leading>
        <p class="text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset) text-(--b24ui-typography-label-color)">
          https://
        </p>
      </template>
    </B24Input>

    <B24SelectMenu
      v-model="domain"
      :items="domains"
      class="w-[85px]"
      :content="{ align: 'end', side: 'bottom', sideOffset: 4 }"
    />
  </B24FieldGroup>
</template>
```

## API

### Props

```ts
/**
 * Props for the Input component
 */
interface InputProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  id?: string | undefined;
  name?: string | undefined;
  /**
   * @default "\"text\""
   */
  type?: InputTypeHTMLAttribute | undefined;
  /**
   * The placeholder text when the input is empty.
   */
  placeholder?: string | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "xss" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  /**
   * Removes padding from input
   */
  noPadding?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the input
   */
  rounded?: boolean | undefined;
  required?: boolean | undefined;
  /**
   * @default "\"off\""
   */
  autocomplete?: string | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  disabled?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  modelValue?: AcceptableValue | undefined;
  defaultValue?: AcceptableValue | undefined;
  modelModifiers?: ModelModifiers<AcceptableValue> | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; } | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * Display an icon on the right side.
   */
  trailingIcon?: IconComponent | undefined;
  enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  list?: string | undefined;
  max?: Numberish | undefined;
  maxlength?: Numberish | undefined;
  min?: Numberish | undefined;
  minlength?: Numberish | undefined;
  pattern?: string | undefined;
  readonly?: Booleanish | undefined;
  step?: Numberish | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
> This component also supports all native `<input>` HTML attributes.

### Slots

```ts
/**
 * Slots for the Input component
 */
interface InputSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Input component
 */
interface InputEmits {
  update:modelValue: (payload: [value: AcceptableValue]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  change: (payload: [event: Event]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                       | Type                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inputRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLInputElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    input: {
      slots: {
        root: 'isolate relative inline-flex items-center',
        base: 'px-3 w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]'
          },
          xs: {
            base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]'
          },
          sm: {
            base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal]',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]'
          },
          md: {
            base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]'
          },
          lg: {
            base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          },
          xl: {
            base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        }
      },
      compoundVariants: [
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# InputDate

> A date selection input field.

## Usage

Use the `v-model` directive to control the selected date.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(undefined, undefined, undefined))
</script>

<template>
  <B24InputDate v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const defaultValue = shallowRef(new CalendarDate(undefined, undefined, undefined))
</script>

<template>
  <B24InputDate :default-value="defaultValue" />
</template>

```

### Range

Use the `range` prop to select a range of dates.

```vue

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef({ start: new CalendarDate(undefined, undefined, undefined), end: new CalendarDate(undefined, undefined, undefined) })
</script>

<template>
  <B24InputDate range v-model="value" />
</template>

```

### Color

Use the `color` prop to change the color of the InputDate.

```vue

<template>
  <B24InputDate color="air-primary" highlight />
</template>

```

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the InputDate.

```vue

<template>
  <B24InputDate tag="note" color="air-primary" highlight />
</template>

```

Use the `tagColor` property to set the color for Badge.

```vue

<script setup lang="ts">
const value = ref(undefined)
</script>

<template>
  <B24InputDate tag="note" tag-color="air-secondary-alert" color="air-primary" highlight />
</template>

```

### Size

Use the `size` prop to change the size of the InputDate.

```vue

<template>
  <B24InputDate size="xl" />
</template>

```

### Separator Icon

Use the `separator-icon` prop to change the icon of the range separator.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24InputDate range :separator-icon="RocketIcon" />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the InputDate.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24InputDate :icon="RocketIcon" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the InputDate.

```vue

<template>
  <B24InputDate :avatar="{src:'/b24ui/avatar/employee.png'}" size="md" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the InputDate.

```vue

<template>
  <B24InputDate loading />
</template>

```

### Disabled

Use the `disabled` prop to disable the InputDate.

```vue

<template>
  <B24InputDate disabled />
</template>

```

### No padding

Use the `noPadding` prop to removes padding from the InputDate.

```vue

<template>
  <B24InputDate no-padding highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### No border

Use the `noBorder` prop to removes all borders (rings) from the InputDate.

```vue

<template>
  <B24InputDate no-border highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the InputDate.

```vue

<template>
  <B24InputDate underline highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the InputDate.

```vue

<template>
  <B24InputDate rounded highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## Examples

### With unavailable dates

Use the `is-date-unavailable` prop with a function to mark specific dates as unavailable.

```vue [InputDateUnavailableDatesExample.vue]
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef({
  start: new CalendarDate(2022, 1, 1),
  end: new CalendarDate(2022, 1, 9)
})

const isDateUnavailable = (date: DateValue) => {
  return date.day >= 10 && date.day <= 16
}
</script>

<template>
  <B24InputDate v-model="modelValue" :is-date-unavailable="isDateUnavailable" range />
</template>
```

### With min/max dates

Use the `min-value` and `max-value` props to limit the dates.

```vue [InputDateMinMaxDatesExample.vue]
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef(new CalendarDate(2023, 9, 10))
const minDate = new CalendarDate(2023, 9, 1)
const maxDate = new CalendarDate(2023, 9, 30)
</script>

<template>
  <B24InputDate v-model="modelValue" :min-value="minDate" :max-value="maxDate" />
</template>
```

### As a DatePicker

Use a [Calendar](https://bitrix24.github.io/b24ui/raw/docs/components/calendar.md) and a [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md) component to create a date picker.

```vue [InputDateDatePickerExample.vue]
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
import CalendarIcon from '@bitrix24/b24icons-vue/outline/CalendarIcon'

const inputDateRef = useTemplateRef('inputDateRef')

const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
</script>

<template>
  <B24InputDate ref="inputDateRef" v-model="modelValue">
    <template #trailing>
      <B24Popover :reference="inputDateRef?.inputsRef[3]?.$el">
        <B24Button
          color="air-tertiary-no-accent"
          size="sm"
          :icon="CalendarIcon"
          aria-label="Select a date"
          class="px-0"
        />

        <template #content>
          <B24Calendar v-model="modelValue" class="p-2" />
        </template>
      </B24Popover>
    </template>
  </B24InputDate>
</template>
```

### As a DateRangePicker

Use a [Calendar](https://bitrix24.github.io/b24ui/raw/docs/components/calendar.md) and a [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md) component to create a date range picker.

```vue [InputDateDateRangePickerExample.vue]
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'
import CalendarIcon from '@bitrix24/b24icons-vue/outline/CalendarIcon'

const inputDateRef = useTemplateRef('inputDateRef')

const modelValue = shallowRef({
  start: new CalendarDate(2022, 1, 10),
  end: new CalendarDate(2022, 1, 20)
})
</script>

<template>
  <B24InputDate ref="inputDateRef" v-model="modelValue" range>
    <template #trailing>
      <B24Popover :reference="inputDateRef?.inputsRef[0]?.$el">
        <B24Button
          color="air-tertiary-no-accent"
          size="sm"
          :icon="CalendarIcon"
          aria-label="Select a date range"
          class="px-0"
        />

        <template #content>
          <B24Calendar v-model="modelValue" class="p-2" :number-of-months="2" range />
        </template>
      </B24Popover>
    </template>
  </B24InputDate>
</template>
```

## API

### Props

```ts
/**
 * Props for the InputDate component
 */
interface InputDateProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "xss" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  /**
   * Removes padding from input
   */
  noPadding?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the input
   */
  rounded?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  /**
   * The icon to use as a range separator.
   */
  separatorIcon?: IconComponent | undefined;
  /**
   * Whether or not a range of dates can be selected
   */
  range?: boolean | undefined;
  defaultValue?: DateValue | DateRange | undefined;
  modelValue?: InputDateModelValue<boolean>;
  b24ui?: { base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; segment?: ClassNameValue; separatorIcon?: ClassNameValue; } | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * Display an icon on the right side.
   */
  trailingIcon?: IconComponent | undefined;
  /**
   * The default placeholder date
   */
  defaultPlaceholder?: DateValue | undefined;
  /**
   * The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
   */
  placeholder?: DateValue | undefined;
  /**
   * The hour cycle used for formatting times. Defaults to the local preference
   */
  hourCycle?: HourCycle;
  /**
   * The stepping interval for the time fields. Defaults to `1`.
   */
  step?: DateStep | undefined;
  /**
   * The granularity to use for formatting times. Defaults to day if a CalendarDate is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity
   */
  granularity?: Granularity | undefined;
  /**
   * Whether or not to hide the time zone segment of the field
   */
  hideTimeZone?: boolean | undefined;
  /**
   * The maximum date that can be selected
   */
  maxValue?: DateValue | undefined;
  /**
   * The minimum date that can be selected
   */
  minValue?: DateValue | undefined;
  /**
   * Whether or not the date field is disabled
   */
  disabled?: boolean | undefined;
  /**
   * Whether or not the date field is readonly
   */
  readonly?: boolean | undefined;
  /**
   * A function that returns whether or not a date is unavailable
   */
  isDateUnavailable?: Matcher | undefined;
  /**
   * Id of the element
   */
  id?: string | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the InputDate component
 */
interface InputDateSlots {
  leading(): any;
  default(): any;
  trailing(): any;
  separator(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the InputDate component
 */
interface InputDateEmits {
  update:modelValue: (payload: [date: InputDateModelValue<boolean>]) => void;
  update:placeholder: (payload: [date: DateValue] & [date: DateValue]) => void;
  change: (payload: [event: Event]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  focus: (payload: [event: FocusEvent]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    inputDate: {
      slots: {
        base: 'group relative inline-flex items-center select-none transition-colors style-blurred-bg-input',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center',
        segment: 'rounded text-center outline-hidden text-(--ui-color-base-1) data-placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle data-[segment=literal]:text-(--ui-color-base-6) data-invalid:text-(--ui-color-accent-main-alert) data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-disabled:select-none data-disabled:opacity-30 transition-colors focus:bg-(--ui-color-bg-content-secondary)',
        separatorIcon: 'shrink-0 size-4 text-(--ui-color-base-6)'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] gap-0.20 px-1',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]',
            segment: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
          },
          xs: {
            base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] gap-0.25 px-2',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]',
            segment: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
          },
          sm: {
            base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] gap-0.5 px-2',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]',
            segment: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
          },
          md: {
            base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] gap-0.5 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]',
            segment: 'data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11'
          },
          lg: {
            base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] gap-0.75 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            segment: 'data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11'
          },
          xl: {
            base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] gap-0.75 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            segment: 'data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        }
      },
      compoundVariants: [
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# InputMenu

> An input field with live autocomplete suggestions.

## Usage

Use the `v-model` directive to control the value of the InputMenu or the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

```

> !TIP
> Use this over an [`Input`](https://bitrix24.github.io/b24ui/raw/docs/components/input.md) to take advantage of Reka UI's [`Combobox`](https://reka-ui.com/docs/components/combobox){rel="nofollow"} component that offers autocomplete capabilities.

> !NOTE
> This component is similar to the [`SelectMenu`](https://bitrix24.github.io/b24ui/raw/docs/components/select-menu.md) but it's using an Input instead of a Select.

### Items

Use the `items` prop as an array of strings, numbers or booleans:

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

```

You can also pass an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`value?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#value-key)
- [`type?: "label" | "separator" | "item"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-items-type)
- [`icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-icons-in-items)
- [`avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-avatar-in-items)
- [`color?: InputMenu['color']`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-colors-items)
- [`chip?: ChipProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-chip-in-items)
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `onSelect?: (e: Event) => void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<InputMenuItem[]>([
  {
    label: 'Backlog'
  },
  {
    label: 'Todo'
  },
  {
    label: 'In Progress'
  },
  {
    label: 'Done'
  }
])
const value = ref({
  label: 'Todo'
})
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

```

You can also pass an array of arrays to the `items` prop.
Use the element type `separator` as a separator.

```vue

<script setup lang="ts">
const items = ref([
  [
    'Apple',
    'Banana',
    'Blueberry',
    'Grapes',
    'Pineapple'
  ],
  [
    {
      type: 'separator'
    },
    'Aubergine',
    'Broccoli',
    'Carrot',
    'Courgette',
    'Leek'
  ]
])
const value = ref('Apple')
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

```

### Value Key

You can choose to bind a single property of the object rather than the whole object by using the `value-key` prop. Defaults to `undefined`.

```vue

<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<InputMenuItem[]>([
  {
    label: 'Backlog',
    id: 'backlog'
  },
  {
    label: 'Todo',
    id: 'todo'
  },
  {
    label: 'In Progress',
    id: 'in_progress'
  },
  {
    label: 'Done',
    id: 'done'
  }
])
const value = ref('todo')
</script>

<template>
  <B24InputMenu v-model="value" value-key="id" :items="items" />
</template>

```

### Multiple

Use the `multiple` prop to allow multiple selections, the selected items will be displayed as tags.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref([
  'Backlog',
  'Todo'
])
</script>

<template>
  <B24InputMenu v-model="value" multiple :items="items" />
</template>

```

> !CAUTION
> Ensure to pass an array to the `default-value` prop or the `v-model` directive.

### Delete Icon

With `multiple`, use the `delete-icon` prop to customize the delete [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} in the tags.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref([
  'Backlog',
  'Todo'
])
</script>

<template>
  <B24InputMenu v-model="value" multiple :delete-icon="RocketIcon" :items="items" />
</template>

```

### Placeholder

Use the `placeholder` prop to set a placeholder text.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24InputMenu placeholder="Select status" :items="items" />
</template>

```

### Content

Use the `content` prop to control how the InputMenu content is rendered, like its `align` or `side` for example.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :content="{align:'center',side:'bottom',sideOffset:8}" :items="items" />
</template>

```

### Arrow

Use the `arrow` prop to display an arrow on the InputMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" arrow :items="items" />
</template>

```

### Color

Use the `color` prop to change the ring color when the InputMenu is focused.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" color="air-primary-copilot" highlight :items="items" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the Input.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" tag="note" color="air-primary-warning" highlight placeholder="Search..." :items="items" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

Use the `tagColor` property to set the color for Badge.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" tag="note" tag-color="air-secondary-alert" color="air-primary-warning" highlight placeholder="Search..." :items="items" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Size

Use the `size` prop to change the size of the InputMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" size="xl" :items="items" />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the InputMenu.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :icon="RocketIcon" size="md" :items="items" />
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :trailing-icon="RocketIcon" size="md" :items="items" />
</template>

```

### Selected Icon

Use the `selected-icon` prop to customize the [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} when an item is selected.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :selected-icon="RocketIcon" size="md" :items="items" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the InputMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :avatar="{src:'/b24ui/avatar/employee.png'}" :items="items" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the InputMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" loading :items="items" />
</template>

```

### Disabled

Use the `disabled` prop to disable the InputMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24InputMenu disabled placeholder="Select status" :items="items" />
</template>

```

### No border

Use the `noBorder` prop to removes all borders (rings) from the InputMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24InputMenu no-border highlight placeholder="Select status" :items="items" />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the InputMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24InputMenu underline highlight placeholder="Select status" :items="items" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the InputMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24InputMenu rounded highlight placeholder="Select status" :items="items" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## Examples

### With items type

You can use the `type` property with `separator` to display a separator between items or `label` to display a label.

```vue

<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<InputMenuItem[]>([
  {
    type: 'label',
    label: 'Fruits'
  },
  'Apple',
  'Banana',
  {
    type: 'separator'
  },
  'Blueberry',
  'Grapes',
  'Pineapple',
  {
    type: 'label',
    label: 'Vegetables'
  },
  'Aubergine',
  'Broccoli',
  'Carrot',
  'Courgette',
  'Leek'
])
const value = ref('Apple')
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

```

### With colors items

You can use the `color` property to change the color of items.

```vue [InputMenuItemsColorExample.vue]
<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    color: 'air-primary',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    color: 'air-primary-success',
    icon: MyPlanIcon
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    color: 'air-primary-alert',
    icon: Shield2DefendedIcon
  }
] satisfies InputMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24InputMenu v-model="value" :icon="value?.icon" :items="items" />
</template>
```

### With icon in items

You can use the `icon` property to display an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the items.

```vue [InputMenuItemsIconExample.vue]
<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    icon: MyPlanIcon
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    icon: Shield2DefendedIcon
  }
] satisfies InputMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24InputMenu v-model="value" :icon="value?.icon" :items="items" />
</template>
```

> !TIP
> You can also use the `#leading` slot to display the selected icon.

### With avatar in items

You can use the `avatar` property to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the items.

```vue [InputMenuItemsAvatarExample.vue]
<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'Assistant',
    value: 'assistant',
    avatar: {
      src: '/b24ui/avatar/assistant.png',
      alt: 'assistant'
    }
  },
  {
    label: 'Employee',
    value: 'employee',
    avatar: {
      src: '/b24ui/avatar/employee.png',
      alt: 'employee'
    }
  }
] satisfies InputMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24InputMenu v-model="value" :avatar="value?.avatar" :items="items" />
</template>
```

> !TIP
> You can also use the `#leading` slot to display the selected avatar.

### With chip in items

You can use the `chip` property to display a [Chip](https://bitrix24.github.io/b24ui/raw/docs/components/chip.md) inside the items.

```vue [InputMenuItemsChipExample.vue]
<script setup lang="ts">
import type { InputMenuItem, ChipProps } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
      color: 'air-primary-alert'
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'air-primary-success'
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'air-primary-copilot'
    }
  }
] satisfies InputMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24InputMenu v-model="value" :items="items">
    <template #leading="{ modelValue, b24ui }">
      <B24Chip
        v-if="modelValue"
        v-bind="modelValue.chip"
        inset
        standalone
        :size="(b24ui.itemLeadingChipSize() as ChipProps['size'])"
        :class="b24ui.itemLeadingChip()"
      />
    </template>
  </B24InputMenu>
</template>
```

> !NOTE
> In this example, the `#leading` slot is used to display the selected chip.

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [InputMenuOpenExample.vue]
<script setup lang="ts">
const open = ref(false)
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24InputMenu v-model="value" v-model:open="open" :items="items" />
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the InputMenu by pressing ``.

### Control open state on focus

You can use the `open-on-focus` or `open-on-click` props to open the menu when the input is focused or clicked.

```vue [InputMenuOpenFocusExample.vue]
<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const selected = ref('My company details')
</script>

<template>
  <B24InputMenu
    v-model="selected"
    :items="items"
    open-on-focus
  />
</template>
```

### Control search term

Use the `v-model:search-term` directive to control the search term.

```vue [InputMenuSearchTermExample.vue]
<script setup lang="ts">
const searchTerm = ref('o')
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')
</script>

<template>
  <B24InputMenu v-model="value" v-model:search-term="searchTerm" :items="items" />
</template>
```

### With rotating icon

Here is an example with a rotating icon that indicates the open state of the InputMenu.

```vue [InputMenuIconExample.vue]
<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')
</script>

<template>
  <B24InputMenu
    v-model="value"
    :items="items"
    :b24ui="{
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
    }"
  />
</template>
```

### With create item

Use the `create-item` prop to enable users to add custom values that aren't in the predefined options.

```vue [InputMenuCreateItemExample.vue]
<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')

function onCreate(item: string) {
  items.value.push(item)

  value.value = item
}
</script>

<template>
  <B24InputMenu
    v-model="value"
    create-item
    :items="items"
    class="w-[320px]"
    @create="onCreate"
  />
</template>
```

> !NOTE
> The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.

> [!TIP](https://bitrix24.github.io/b24ui/#emits)
> Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.

### With fetched items

You can fetch items from an API and use them in the InputMenu.

```vue [InputMenuFetchExample.vue]
<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users',
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24InputMenu
    :items="users"
    :loading="status === 'pending'"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24InputMenu>
</template>
```

### With ignore filter

Set the `ignore-filter` prop to `true` to disable the internal search and use your own search logic.

```vue [InputMenuIgnoreFilterExample.vue]
<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import { refDebounced } from '@vueuse/core'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24InputMenu
    v-model:search-term="searchTerm"
    :items="users"
    :loading="status === 'pending'"
    ignore-filter
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24InputMenu>
</template>
```

> !NOTE
> This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced){rel="nofollow"} to debounce the API calls.

### With filter fields

Use the `filter-fields` prop with an array of fields to filter on. Defaults to `[labelKey]`.

```vue [InputMenuFilterFieldsExample.vue]
<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24InputMenu
    :items="users"
    :loading="status === 'pending'"
    :filter-fields="['label', 'email']"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    class="w-[320px]"
    :b24ui="{ content: 'w-[320px]', viewport: 'w-[320px]' }"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>

    <template #item-label="{ item }">
      {{ item.label }}

      <span class="text-(--b24ui-typography-description-color)">
        {{ item.email }}
      </span>
    </template>
  </B24InputMenu>
</template>
```

### With virtualization

Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.

> [!WARNING](https://github.com/unovue/reka-ui/issues/1885)
> When enabled, all groups are flattened into a single list due to a limitation of Reka UI.

```vue [InputMenuVirtualizeExample.vue]
<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items: InputMenuItem[] = Array(1000).fill(0).map((_, i) => ({
  label: `item-${i}`,
  value: i
}))
</script>

<template>
  <B24InputMenu virtualize :items="items" class="w-[192px]" />
</template>
```

### With full content width

You can expand the content to the full width of its items by adding the `min-w-fit` class on the `b24ui.content`,`b24ui.item` and `b24ui.viewport` slots.

```vue [InputMenuContentWidthExample.vue]
<script setup lang="ts">
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24InputMenu
    :items="users"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    :b24ui="{ content: 'min-w-fit', viewport: 'min-w-fit', item: 'min-w-fit' }"
  >
    <template #item-label="{ item }">
      {{ item.label }}

      <span class="text-(--b24ui-typography-description-color)">
        {{ item.email }}
      </span>
    </template>
  </B24InputMenu>
</template>
```

### As a CountryPicker

This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.

```vue [InputMenuCountriesExample.vue]
<script setup lang="ts">
import CrmSearchIcon from '@bitrix24/b24icons-vue/crm/CrmSearchIcon'
import EarthIcon from '@bitrix24/b24icons-vue/main/EarthIcon'

const { data: countries, status, execute } = await useLazyFetch<{
  name: string
  code: string
  emoji: string
}[]>('/api/countries.json', {
  immediate: false
})

function onOpen() {
  if (!countries.value?.length) {
    execute()
  }
}
</script>

<template>
  <B24InputMenu
    :items="countries"
    :loading="status === 'pending'"
    label-key="name"
    :search-input="{ icon: CrmSearchIcon }"
    placeholder="Select country"
    @update:open="onOpen"
  >
    <template #leading="{ modelValue, b24ui }">
      <span v-if="modelValue" class="size-[26px] text-center">
        {{ modelValue?.emoji }}
      </span>
      <EarthIcon v-else :class="b24ui.leadingIcon()" />
    </template>
    <template #item-leading="{ item }">
      <span class="size-[26px] text-center">
        {{ item.emoji }}
      </span>
    </template>
  </B24InputMenu>
</template>
```

## API

### Props

```ts
/**
 * Props for the InputMenu component
 */
interface InputMenuProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  id?: string | undefined;
  /**
   * @default "\"text\""
   */
  type?: InputTypeHTMLAttribute | undefined;
  /**
   * The placeholder text when the input is empty.
   */
  placeholder?: string | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "sm" | "xss" | "xs" | "md" | "lg" | "xl" | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the input
   */
  rounded?: boolean | undefined;
  required?: boolean | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  /**
   * The icon displayed to open the menu.
   */
  trailingIcon?: IconComponent | undefined;
  /**
   * The icon displayed when an item is selected.
   */
  selectedIcon?: IconComponent | undefined;
  /**
   * The icon displayed to delete a tag.
   * Works only when `multiple` is `true`.
   */
  deleteIcon?: IconComponent | undefined;
  /**
   * The content of the menu.
   */
  content?: (Omit<ComboboxContentProps, "asChild" | "as" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>) | undefined;
  /**
   * Display an arrow alongside the menu.
   */
  arrow?: boolean | Omit<ComboboxArrowProps, "asChild" | "as"> | undefined;
  /**
   * Render the menu in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * Enable virtualization for large lists.
   * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
   * @default "false"
   */
  virtualize?: boolean | { overscan?: number | undefined; estimateSize?: number | undefined; } | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
   */
  valueKey?: GetItemKeys<ArrayOrNested<InputMenuItem>> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the label.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<ArrayOrNested<InputMenuItem>> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the description.
   * @default "\"description\""
   */
  descriptionKey?: GetItemKeys<ArrayOrNested<InputMenuItem>> | undefined;
  items?: ArrayOrNested<InputMenuItem> | undefined;
  /**
   * The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu.
   */
  defaultValue?: any;
  /**
   * The controlled value of the InputMenu. Can be binded-with with `v-model`.
   */
  modelValue?: any;
  /**
   * Whether multiple options can be selected or not.
   */
  multiple?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  /**
   * Determines if custom user input that does not exist in options can be added.
   */
  createItem?: boolean | "always" | { position?: "bottom" | "top" | undefined; when?: "empty" | "always" | undefined; } | undefined;
  /**
   * Fields to filter items by.
   */
  filterFields?: string[] | undefined;
  /**
   * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
   */
  ignoreFilter?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; arrow?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; tagsItem?: ClassNameValue; tagsItemText?: ClassNameValue; tagsItemDelete?: ClassNameValue; tagsItemDeleteIcon?: ClassNameValue; tagsInput?: ClassNameValue; } | undefined;
  /**
   * When `true`, prevents the user from interacting with listbox
   */
  disabled?: boolean | undefined;
  /**
   * The controlled open state of the Combobox. Can be binded with with `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * Whether to reset the searchTerm when the Combobox input blurred
   * @default "true"
   */
  resetSearchTermOnBlur?: boolean | undefined;
  /**
   * Whether to reset the searchTerm when the Combobox value is selected
   * @default "true"
   */
  resetSearchTermOnSelect?: boolean | undefined;
  /**
   * When `true`, hover over item will trigger highlight
   */
  highlightOnHover?: boolean | undefined;
  /**
   * Whether to open the combobox when the input is clicked
   */
  openOnClick?: boolean | undefined;
  /**
   * Whether to open the combobox when the input is focused
   */
  openOnFocus?: boolean | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  autocomplete?: string | undefined;
  enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  list?: string | undefined;
  readonly?: Booleanish | undefined;
  /**
   * @default "\"\""
   */
  searchTerm?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
> This component also supports all native `<input>` HTML attributes.

### Slots

```ts
/**
 * Slots for the InputMenu component
 */
interface InputMenuSlots {
  leading(): any;
  trailing(): any;
  empty(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-description(): any;
  item-trailing(): any;
  tags-item-text(): any;
  tags-item-delete(): any;
  content-top(): any;
  content-bottom(): any;
  create-item-label(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the InputMenu component
 */
interface InputMenuEmits {
  update:open: (payload: [value: boolean]) => void;
  change: (payload: [event: Event]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  focus: (payload: [event: FocusEvent]) => void;
  create: (payload: [item: string]) => void;
  highlight: (payload: [payload: { ref: HTMLElement; value: any; } | undefined]) => void;
  remove-tag: (payload: [item: any]) => void;
  update:modelValue: (payload: [value: any]) => void;
  update:searchTerm: (payload: [value: string]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                       | Type                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inputRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLInputElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    inputMenu: {
      slots: {
        root: 'isolate relative inline-flex items-center',
        base: 'w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear transition-colors text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-30',
        trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center',
        content: 'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto',
        viewport: 'relative scroll-py-1 w-[240px] max-h-[40vh] overflow-x-hidden overflow-y-auto scrollbar-thin',
        arrow: 'fill-(--popup-window-background-color)',
        group: 'grid',
        empty: 'h-(--popup-window-delimiter-section-height) py-[8px] select-none outline-none whitespace-nowrap text-center text-(length:--popup-window-delimiter-font-size)/(--ui-font-line-height-lg) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight)',
        label: 'w-full min-w-[195px] h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)',
        separator: 'my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)',
        item: 'group w-full min-w-[195px] h-[36px] px-[18px] mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 data-disabled:select-none text-start text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=open]:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover) data-highlighted:bg-(--menu-popup-item-bg-color-hover) data-[state=open]:bg-(--menu-popup-item-bg-color-hover) transition-colors',
        itemLeadingIcon: 'shrink-0 size-[18px] text-(--ui-color-design-plain-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary) group-data-[state=checked]:text-(--ui-color-accent-main-primary) transition-colors',
        itemLeadingAvatar: 'shrink-0 size-[16px]',
        itemLeadingAvatarSize: '2xs',
        itemLeadingChip: 'shrink-0 size-[16px]',
        itemLeadingChipSize: 'sm',
        itemTrailing: 'ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center',
        itemTrailingIcon: 'shrink-0 size-[24px] text-(--ui-color-design-plain-content-icon-secondary)',
        itemWrapper: 'flex-1 flex flex-col min-w-0',
        itemLabel: 'truncate ms-[2px] -mt-px group-data-[state=checked]:text-(--ui-color-accent-main-primary)',
        itemDescription: 'truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
        tagsItem: 'ps-[13px] pe-[6px] rounded-(--ui-border-radius-xs) h-(--main-ui-square-item-height) leading-(--main-ui-square-item-height) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) inline-flex items-center gap-1 data-disabled:cursor-not-allowed data-disabled:opacity-30 data-disabled:select-none text-(--ui-color-design-tinted-content) bg-(--ui-color-design-tinted-bg-alt)',
        tagsItemText: 'truncate max-w-[180px]',
        tagsItemDelete: 'cursor-pointer inline-flex items-center disabled:pointer-events-none text-(--b24ui-icon-color-secondary) hover:text-(--b24ui-icon-color-secondary-hover) transition-none',
        tagsItemDeleteIcon: '',
        tagsInput: ''
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: '[--main-ui-square-item-height:12px] h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]',
            itemLeadingAvatar: 'size-[12px]',
            itemLeadingAvatarSize: '3xs',
            tagsInput: 'text-(length:--ui-font-size-4xs)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            tagsItemDeleteIcon: 'size-[10px]'
          },
          xs: {
            base: '[--main-ui-square-item-height:16px] h-[24px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]',
            itemLeadingAvatar: 'size-[14px]',
            itemLeadingAvatarSize: '3xs',
            tagsInput: 'text-(length:--ui-font-size-xs)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            tagsItemDeleteIcon: 'size-[10px]'
          },
          sm: {
            base: '[--main-ui-square-item-height:20px] h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal]',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]',
            itemLeadingAvatar: 'size-[16px]',
            itemLeadingAvatarSize: '2xs',
            tagsInput: 'text-(length:--ui-font-size-sm)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            tagsItemDeleteIcon: 'size-[12px]'
          },
          md: {
            base: '[--main-ui-square-item-height:24px] h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]',
            itemLeadingAvatarSize: '2xs',
            tagsInput: 'text-(length:--ui-font-size-lg)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-sm)/(--main-ui-square-item-height) gap-[4px]',
            tagsItemDeleteIcon: 'size-[18px]'
          },
          lg: {
            base: '[--main-ui-square-item-height:28px] h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            itemLeadingAvatarSize: '2xs',
            tagsInput: 'text-(length:--ui-font-size-lg)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-md)/(--main-ui-square-item-height) gap-1',
            tagsItemDeleteIcon: 'size-[22px]'
          },
          xl: {
            base: '[--main-ui-square-item-height:32px] h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            itemLeadingAvatarSize: '2xs',
            tagsInput: 'text-(length:--ui-font-size-2xl)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-xl)/(--main-ui-square-item-height) gap-1',
            tagsItemDeleteIcon: 'size-[22px]'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        },
        virtualize: {
          true: {
            viewport: 'p-1 isolate'
          },
          false: {
            viewport: ''
          }
        },
        addNew: {
          true: {
            group: '',
            item: 'text-(--menu-popup-item-color) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover)',
            itemLabel: 'flex flex-row flex-nowrap items-center justify-start gap-2',
            itemLeadingIcon: 'size-[20px] rounded-full text-(--ui-color-base-white-fixed) bg-(--ui-color-design-selection-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-base-white-fixed) group-data-highlighted:not-data-disabled:bg-(--ui-color-design-selection-content-icon) group-data-[state=checked]:text-(--ui-color-base-white-fixed) group-data-[state=checked]:bg-(--ui-color-design-selection-content-icon)'
          }
        },
        multiple: {
          true: {
            root: 'flex-wrap',
            base: 'py-[6px] ps-[6px] pe-[39px]',
            tagsInput: 'flex-1 border-0 bg-transparent ps-[6px] pe-[0px] py-0 placeholder:text-(--ui-color-design-plain-na-content-secondary) focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 focus:ring-0 focus-visible:ring-0'
          },
          false: {
            base: 'px-3 placeholder:text-(--ui-color-design-plain-na-content-secondary) focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30'
          }
        },
        colorItem: {
          'air-primary': {
            item: 'style-filled'
          },
          'air-primary-success': {
            item: 'style-filled-success'
          },
          'air-primary-alert': {
            item: 'style-filled-alert'
          },
          'air-primary-copilot': {
            item: 'style-filled-copilot'
          },
          'air-primary-warning': {
            item: 'style-filled-warning'
          },
          default: {
            item: 'style-old-default'
          },
          danger: {
            item: 'style-old-danger'
          },
          success: {
            item: 'style-old-success'
          },
          warning: {
            item: 'style-old-warning'
          },
          primary: {
            item: 'style-old-primary'
          },
          secondary: {
            item: 'style-old-secondary'
          },
          collab: {
            item: 'style-old-collab'
          },
          ai: {
            item: 'style-old-ai'
          }
        }
      },
      compoundVariants: [
        {
          colorItem: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)'
          }
        },
        {
          colorItem: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          colorItem: 'default',
          active: false,
          class: ''
        },
        {
          colorItem: 'default',
          active: true,
          class: ''
        },
        {
          colorItem: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background-active) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-icon) group-data-highlighted:text-(--b24ui-icon) group-data-[state=open]:text-(--b24ui-icon)'
          }
        },
        {
          colorItem: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          size: 'xss',
          multiple: true,
          class: {
            base: 'min-h-[20px] h-auto py-[2px] ps-[4px]'
          }
        },
        {
          size: 'xs',
          multiple: true,
          class: {
            base: 'min-h-[24px] h-auto py-[2px] ps-[4px]'
          }
        },
        {
          size: 'sm',
          multiple: true,
          class: {
            base: 'min-h-[28px] h-auto py-[4px] ps-[4px]'
          }
        },
        {
          size: 'md',
          multiple: true,
          class: {
            base: 'min-h-[34px] h-auto py-[4px] ps-[4px]'
          }
        },
        {
          size: 'lg',
          multiple: true,
          class: {
            base: 'min-h-[38px] h-auto py-[4px] ps-[4px]'
          }
        },
        {
          size: 'xl',
          multiple: true,
          class: {
            base: 'min-h-[46px] h-auto'
          }
        },
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# InputNumber

> Provide numerical input with a flexible range setting.

## Usage

Use the `v-model` directive to control the value of the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<template>
  <B24InputNumber :default-value="5" />
</template>

```

> !NOTE
> This component relies on the [`@internationalized/number`](https://react-spectrum.adobe.com/internationalized/number/index.html){rel="nofollow"} package which provides utilities for formatting and parsing numbers across locales and numbering systems.

### Min / Max

Use the `min` and `max` props to set the minimum and maximum values of the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" :min="0" :max="10" />
</template>

```

### Step

Use the `step` prop to set the step value of the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" :step="2" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" orientation="vertical" />
</template>

```

### Placeholder

Use the `placeholder` prop to set a placeholder text.

```vue

<template>
  <B24InputNumber placeholder="Enter a number" />
</template>

```

### Color

Use the `color` prop to change the ring color when the InputNumber is focused.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" color="air-primary" highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" tag="note" color="air-primary" highlight />
</template>

```

Use the `tagColor` property to set the color for Badge.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" tag="note" tag-color="air-secondary-alert" color="air-primary" highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Size

Use the `size` prop to change the size of the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" size="xl" />
</template>

```

### Disabled

Use the `disabled` prop to disable the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" disabled />
</template>

```

### Increment / Decrement

Use the `increment` and `decrement` props to customize the increment and decrement buttons with any [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) props.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" :increment="{color:'air-primary',size:'xs'}" :decrement="{color:'air-primary-alert',size:'xs'}" />
</template>

```

### Increment / Decrement Icons

Use the `increment-icon` and `decrement-icon` props to customize the buttons [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value" :increment-icon="RocketIcon" :decrement-icon="RocketIcon" />
</template>

```

### No border

Use the `noBorder` prop to removes all borders (rings) from the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber no-border highlight v-model="value" />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the InputNumber.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber underline highlight v-model="value" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the InputMenu.

```vue

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber rounded highlight v-model="value" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## Examples

### With decimal format

Use the `format-options` prop to customize the format of the value.

```vue [InputNumberDecimalExample.vue]
<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber
    v-model="value"
    :format-options="{
      signDisplay: 'exceptZero',
      minimumFractionDigits: 1
    }"
  />
</template>
```

### With percentage format

Use the `format-options` prop with `style: 'percent'` to customize the format of the value.

```vue [InputNumberPercentageExample.vue]
<script setup lang="ts">
const value = ref(0.05)
</script>

<template>
  <B24InputNumber
    v-model="value"
    :step="0.01"
    :format-options="{
      style: 'percent'
    }"
  />
</template>
```

### With currency format

Use the `format-options` prop with `style: 'currency'` to customize the format of the value.

```vue [InputNumberCurrencyExample.vue]
<script setup lang="ts">
const value = ref(1500)
</script>

<template>
  <B24InputNumber
    v-model="value"
    :step="0.01"
    :format-options="{
      style: 'currency',
      currency: 'EUR',
      currencyDisplay: 'code',
      currencySign: 'accounting'
    }"
  />
</template>
```

### Without buttons

You can use the `increment` and `decrement` props to control visibility of the buttons.

```vue [InputNumberWithoutButtonsExample.vue]
<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <B24InputNumber
    v-model="value"
    :increment="false"
    :decrement="false"
  />
</template>
```

### Within a FormField

You can use the InputNumber within a [FormField](https://bitrix24.github.io/b24ui/raw/docs/components/form-field.md) component to display a label, help text, required indicator, etc.

```vue [InputNumberFormFieldExample.vue]
<script setup lang="ts">
const retries = ref(0)
</script>

<template>
  <B24FormField label="Retries" help="Specify number of attempts" required>
    <B24InputNumber v-model="retries" placeholder="Enter retries" />
  </B24FormField>
</template>
```

### With slots

Use the `#increment` and `#decrement` slots to customize the buttons.

```vue [InputNumberSlotsExample.vue]
<script setup lang="ts">
import { ref } from 'vue'
import ArrowToTheLeftIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheLeftIcon'
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'

const value = ref(5)
</script>

<template>
  <B24InputNumber v-model="value">
    <template #decrement>
      <B24Button size="md" rounded :icon="ArrowToTheLeftIcon" />
    </template>

    <template #increment>
      <B24Button size="md" rounded :icon="ArrowToTheRightIcon" />
    </template>
  </B24InputNumber>
</template>
```

## API

### Props

```ts
/**
 * Props for the InputNumber component
 */
interface InputNumberProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The placeholder text when the input is empty.
   */
  placeholder?: string | undefined;
  /**
   * @default "\"air-primary\""
   */
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "xss" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the input
   */
  rounded?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  /**
   * The orientation of the input menu.
   * @default "\"horizontal\""
   */
  orientation?: "horizontal" | "vertical" | undefined;
  /**
   * Configure the increment button. The `size` is inherited.
   * @default "true"
   */
  increment?: boolean | ButtonProps | undefined;
  /**
   * The icon displayed to increment the value.
   */
  incrementIcon?: IconComponent | undefined;
  /**
   * Disable the increment button.
   */
  incrementDisabled?: boolean | undefined;
  /**
   * Configure the decrement button. The `size` is inherited.
   * @default "true"
   */
  decrement?: boolean | ButtonProps | undefined;
  /**
   * The icon displayed to decrement the value.
   */
  decrementIcon?: IconComponent | undefined;
  /**
   * Disable the decrement button.
   */
  decrementDisabled?: boolean | undefined;
  autofocus?: boolean | undefined;
  autofocusDelay?: number | undefined;
  modelModifiers?: Pick<ModelModifiers<InputNumberValue>, "optional"> | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; increment?: ClassNameValue; decrement?: ClassNameValue; tag?: ClassNameValue; } | undefined;
  modelValue?: number | null | undefined;
  defaultValue?: number | undefined;
  /**
   * The smallest value allowed for the input.
   */
  min?: number | undefined;
  /**
   * The largest value allowed for the input.
   */
  max?: number | undefined;
  /**
   * The amount that the input value changes with each increment or decrement "tick".
   */
  step?: number | undefined;
  /**
   * When `false`, prevents the value from snapping to the nearest increment of the step value
   */
  stepSnapping?: boolean | undefined;
  /**
   * When `true`, prevents the user from interacting with the Number Field.
   */
  disabled?: boolean | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  /**
   * Id of the element
   */
  id?: string | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
   */
  formatOptions?: Intl.NumberFormatOptions | undefined;
  /**
   * When `true`, prevents the value from changing on wheel scroll.
   */
  disableWheelChange?: boolean | undefined;
  /**
   * When `true`, inverts the direction of the wheel change.
   */
  invertWheelChange?: boolean | undefined;
  /**
   * When `true`, the Number Field is read-only.
   */
  readonly?: boolean | undefined;
  autocomplete?: string | undefined;
  enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  list?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
> This component also supports all native `<input>` HTML attributes.

### Slots

```ts
/**
 * Slots for the InputNumber component
 */
interface InputNumberSlots {
  increment(): any;
  decrement(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the InputNumber component
 */
interface InputNumberEmits {
  update:modelValue: (payload: [value: InputNumberValue]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  change: (payload: [event: Event]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                       | Type                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inputRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLInputElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    inputNumber: {
      slots: {
        root: 'isolate relative inline-flex items-center',
        base: 'w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap',
        increment: 'absolute flex items-center',
        decrement: 'absolute flex items-center',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: 'px-2 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
          xs: 'px-2 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal]',
          sm: 'px-2.5 h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal]',
          md: 'px-2.5 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
          lg: 'px-3 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
          xl: 'px-3 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]'
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        disabled: {
          true: {
            increment: 'cursor-not-allowed',
            decrement: 'cursor-not-allowed'
          }
        },
        orientation: {
          horizontal: {
            base: 'text-center',
            increment: 'inset-y-0 end-0 py-0 pe-0 [&>button]:p-1',
            decrement: 'inset-y-0 start-0 py-0 ps-0 [&>button]:p-1'
          },
          vertical: {
            increment: 'top-1 end-0 pe-1 [&>button]:p-0',
            decrement: 'bottom-1 end-0 pe-1 [&>button]:p-0'
          }
        },
        highlight: {
          true: ''
        },
        increment: {
          false: ''
        },
        decrement: {
          false: ''
        }
      },
      compoundVariants: [
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          orientation: 'horizontal',
          rounded: true,
          class: {
            increment: '[&>button]:rounded-3xl',
            decrement: '[&>button]:rounded-3xl'
          }
        },
        {
          orientation: 'horizontal',
          decrement: false,
          class: {
            base: 'text-start'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xss',
          class: {
            increment: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70',
            decrement: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xs',
          class: {
            increment: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70',
            decrement: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            increment: '[&>button]:p-[2px] scale-70',
            decrement: '[&>button]:p-[2px] scale-70'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            increment: '[&>button]:p-[2px] scale-60',
            decrement: '[&>button]:p-[2px] scale-60'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            increment: '[&>button]:p-[2px] scale-60',
            decrement: '[&>button]:p-[2px] scale-60'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            increment: '[&>button]:p-[4px] scale-60',
            decrement: '[&>button]:p-[4px] scale-60'
          }
        },
        {
          orientation: 'vertical',
          size: 'xss',
          class: {
            increment: 'top-0 pe-0 [&>button]:h-[13px] scale-56',
            decrement: 'bottom-0 pe-0 [&>button]:h-[13px] scale-56'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            increment: 'top-0 pe-0 [&>button]:h-[13px] scale-80',
            decrement: 'bottom-0 pe-0 [&>button]:h-[13px] scale-80'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            increment: 'top-0 pe-0 [&>button]:h-[15px] scale-80',
            decrement: 'bottom-0 pe-0 [&>button]:h-[15px] scale-80'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            increment: 'top-0 pe-0 [&>button]:h-[18px] scale-80',
            decrement: 'bottom-0 pe-0 [&>button]:h-[18px] scale-80'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            increment: '[&>button]:h-[16px] scale-80',
            decrement: '[&>button]:h-[16px] scale-80'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            increment: '[&>button]:h-[20px] scale-80',
            decrement: '[&>button]:h-[20px] scale-80'
          }
        },
        {
          decrement: true,
          size: 'xss',
          class: {
            base: 'ps-[24px]'
          }
        },
        {
          decrement: true,
          size: 'xs',
          class: {
            base: 'ps-[24px]'
          }
        },
        {
          decrement: true,
          size: 'sm',
          class: {
            base: 'ps-[28px]'
          }
        },
        {
          decrement: true,
          size: 'md',
          class: {
            base: 'ps-[30px]'
          }
        },
        {
          decrement: true,
          size: 'lg',
          class: {
            base: 'ps-[30px]'
          }
        },
        {
          decrement: true,
          size: 'xl',
          class: {
            base: 'ps-[40px]'
          }
        },
        {
          increment: true,
          size: 'xss',
          class: {
            base: 'pe-[24px]'
          }
        },
        {
          increment: true,
          size: 'xs',
          class: {
            base: 'pe-[24px]'
          }
        },
        {
          increment: true,
          size: 'sm',
          class: {
            base: 'pe-[30px]',
            increment: 'top-0 pe-0 [&>button]:h-[15px] scale-80',
            decrement: 'bottom-0 pe-0 [&>button]:h-[15px] scale-80'
          }
        },
        {
          increment: true,
          size: 'md',
          class: {
            base: 'pe-[34px]'
          }
        },
        {
          increment: true,
          size: 'lg',
          class: {
            base: 'pe-[38px]'
          }
        },
        {
          increment: true,
          size: 'xl',
          class: {
            base: 'pe-[38px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# InputTags

> A tags input component with interactive tag elements.

## Usage

Use the `v-model` directive to control the value of the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<template>
  <B24InputTags :default-value="{'0':'Bitrix24'}" />
</template>

```

### Placeholder

Use the `placeholder` prop to set a placeholder text.

```vue

<template>
  <B24InputTags placeholder="Enter tags..." />
</template>

```

### Max Length

Use the `max-length` prop to set the maximum number of characters allowed in a tag.

```vue

<template>
  <B24InputTags :max-length="4" />
</template>

```

### Color

Use the `color` prop to change the ring color when the InputTags is focused.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" color="air-primary" highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" tag="note" color="air-primary" highlight />
</template>

```

Use the `tagColor` property to set the color for Badge.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" tag="note" tag-color="air-secondary-alert" color="air-primary" highlight />
</template>

```

### Sizes

Use the `size` prop to adjust the size of the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" size="xl" />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the InputTags.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" :icon="RocketIcon" size="md" />
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to set icon for trailing position.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" :trailing-icon="RocketIcon" size="md" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" :avatar="{src:'/b24ui/avatar/employee.png'}" size="md" />
</template>

```

### Delete Icon

Use the `delete-icon` prop to customize the delete [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} in the tags.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" :delete-icon="RocketIcon" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" loading />
</template>

```

### Disabled

Use the `disabled` prop to disable the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags v-model="value" disabled />
</template>

```

### No border

Use the `noBorder` prop to removes all borders (rings) from the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags no-border highlight v-model="value" />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags underline highlight v-model="value" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the InputTags.

```vue

<script setup lang="ts">
const value = ref([
  'Bitrix24'
])
</script>

<template>
  <B24InputTags rounded highlight v-model="value" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## Examples

### Within a FormField

You can use the InputTags within a [FormField](https://bitrix24.github.io/b24ui/raw/docs/components/form-field.md) component to display a label, help text, required indicator, etc.

```vue [InputTagsFormFieldExample.vue]
<script setup lang="ts">
const tags = ref(['Bitrix24'])
</script>

<template>
  <B24FormField label="Tags" required>
    <B24InputTags v-model="tags" placeholder="Enter tags..." />
  </B24FormField>
</template>
```

## API

### Props

```ts
/**
 * Props for the InputTags component
 */
interface InputTagsProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The placeholder text when the input is empty.
   */
  placeholder?: string | undefined;
  /**
   * The maximum number of character allowed.
   */
  maxLength?: number | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "xss" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the input
   */
  rounded?: boolean | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  /**
   * The icon displayed to delete a tag.
   */
  deleteIcon?: IconComponent | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; item?: ClassNameValue; itemText?: ClassNameValue; itemDelete?: ClassNameValue; itemDeleteIcon?: ClassNameValue; input?: ClassNameValue; } | undefined;
  /**
   * The controlled value of the tags input. Can be bind as `v-model`.
   */
  modelValue?: AcceptableInputValue[] | null | undefined;
  /**
   * The value of the tags that should be added. Use when you do not need to control the state of the tags input
   */
  defaultValue?: AcceptableInputValue[] | undefined;
  /**
   * When `true`, allow adding tags on paste. Work in conjunction with delimiter prop.
   */
  addOnPaste?: boolean | undefined;
  /**
   * When `true` allow adding tags on tab keydown
   */
  addOnTab?: boolean | undefined;
  /**
   * When `true` allow adding tags blur input
   */
  addOnBlur?: boolean | undefined;
  /**
   * When `true`, allow duplicated tags.
   */
  duplicate?: boolean | undefined;
  /**
   * When `true`, prevents the user from interacting with the tags input.
   */
  disabled?: boolean | undefined;
  /**
   * The character or regular expression to trigger the addition of a new tag. Also used to split tags for `@paste` event
   */
  delimiter?: string | RegExp | undefined;
  /**
   * Maximum number of tags.
   */
  max?: number | undefined;
  id?: string | undefined;
  /**
   * Convert the input value to the desired type. Mandatory when using objects as values and using `TagsInputInput`
   */
  convertValue?: ((value: string) => AcceptableInputValue) | undefined;
  /**
   * Display the value of the tag. Useful when you want to apply modifications to the value like adding a suffix or when using object as values
   */
  displayValue?: ((value: AcceptableInputValue) => string) | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * Display an icon on the right side.
   */
  trailingIcon?: IconComponent | undefined;
  autocomplete?: string | undefined;
  enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  list?: string | undefined;
  readonly?: Booleanish | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
> This component also supports all native `<input>` HTML attributes.

### Slots

```ts
/**
 * Slots for the InputTags component
 */
interface InputTagsSlots {
  leading(): any;
  default(): any;
  trailing(): any;
  item-text(): any;
  item-delete(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the InputTags component
 */
interface InputTagsEmits {
  change: (payload: [event: Event]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  focus: (payload: [event: FocusEvent]) => void;
  update:modelValue: (payload: [payload: AcceptableInputValue[]]) => void;
  invalid: (payload: [payload: AcceptableInputValue]) => void;
  addTag: (payload: [payload: AcceptableInputValue]) => void;
  removeTag: (payload: [payload: AcceptableInputValue]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                       | Type                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inputRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLInputElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    inputTags: {
      slots: {
        root: [
          'isolate relative inline-flex items-center',
          'flex-wrap'
        ],
        base: 'border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear transition-colors text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) placeholder:text-(--ui-color-design-plain-na-content-secondary) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle pe-[39px]',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center',
        item: 'ps-[13px] pe-[6px] rounded-(--ui-border-radius-xs) h-(--main-ui-square-item-height) leading-(--main-ui-square-item-height) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) inline-flex items-center gap-1 data-disabled:cursor-not-allowed data-disabled:opacity-30 data-disabled:pointer-events-none data-disabled:select-none text-(--ui-color-design-tinted-content) bg-(--ui-color-design-tinted-bg-alt)',
        itemText: 'truncate max-w-[180px]',
        itemDelete: 'cursor-pointer inline-flex items-center disabled:pointer-events-none disabled:select-none text-(--b24ui-icon-color-secondary) hover:text-(--b24ui-icon-color-secondary-hover) transition-none',
        itemDeleteIcon: 'shrink-0',
        input: 'flex-1 border-0 bg-transparent ps-[6px] pe-[0px] py-0 placeholder:text-(--ui-color-design-plain-na-content-secondary) focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 focus:ring-0 focus-visible:ring-0'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: '[--main-ui-square-item-height:12px] gap-1 text-(length:--ui-font-size-4xs)/[normal] min-h-[20px] h-auto py-[2px] ps-[4px]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]',
            input: 'text-(length:--ui-font-size-4xs)/[normal]',
            item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            itemDeleteIcon: 'size-[10px]'
          },
          xs: {
            base: '[--main-ui-square-item-height:16px] gap-1 text-(length:--ui-font-size-xs)/[normal] min-h-[24px] h-auto py-[2px] ps-[4px]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]',
            input: 'text-(length:--ui-font-size-xs)/[normal]',
            item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            itemDeleteIcon: 'size-[10px]'
          },
          sm: {
            base: '[--main-ui-square-item-height:20px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] min-h-[28px] h-auto py-[4px] ps-[4px]',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]',
            input: 'text-(length:--ui-font-size-sm)/[normal]',
            item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            itemDeleteIcon: 'size-[12px]'
          },
          md: {
            base: '[--main-ui-square-item-height:24px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] min-h-[34px] h-auto py-[4px] ps-[4px]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]',
            input: 'text-(length:--ui-font-size-lg)/[normal]',
            item: 'text-(length:--ui-font-size-sm)/(--main-ui-square-item-height) gap-[4px]',
            itemDeleteIcon: 'size-[18px]'
          },
          lg: {
            base: '[--main-ui-square-item-height:28px] gap-2 text-(length:--ui-font-size-lg)/[normal] min-h-[38px] h-auto py-[4px] ps-[4px]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            input: 'text-(length:--ui-font-size-lg)/[normal]',
            item: 'text-(length:--ui-font-size-md)/(--main-ui-square-item-height) gap-1',
            itemDeleteIcon: 'size-[22px]'
          },
          xl: {
            base: '[--main-ui-square-item-height:32px] gap-2 text-(length:--ui-font-size-2xl)/[normal] min-h-[46px] h-auto py-[6px] ps-[6px]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            input: 'text-(length:--ui-font-size-2xl)/[normal]',
            item: 'text-(length:--ui-font-size-xl)/(--main-ui-square-item-height) gap-1',
            itemDeleteIcon: 'size-[22px]'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        }
      },
      compoundVariants: [
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) has-focus-visible:ring-1 has-focus-visible:ring-inset has-focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) has-focus-visible:ring-1 has-focus-visible:ring-inset has-focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'has-focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# InputTime

> A time selection input field.

## Usage

Use the `v-model` directive to control the selected date.

```vue

<script setup lang="ts">
import { Time } from '@internationalized/date'

const value = shallowRef(new Time(undefined, undefined, undefined))
</script>

<template>
  <B24InputTime v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
import { Time } from '@internationalized/date'

const defaultValue = shallowRef(new Time(undefined, undefined, undefined))
</script>

<template>
  <B24InputTime :default-value="defaultValue" />
</template>

```

> !NOTE
> This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html){rel="nofollow"} package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.

### Hour Cycle

Use the `hour-cycle` prop to change the hour cycle of the InputTime. Defaults to `12`.

```vue

<script setup lang="ts">
import { Time } from '@internationalized/date'

const defaultValue = shallowRef(new Time(undefined, undefined, undefined))
</script>

<template>
  <B24InputTime :hour-cycle="24" :default-value="defaultValue" />
</template>

```

### Color

Use the `color` prop to change the color of the InputTime.

```vue

<template>
  <B24InputTime color="air-primary" highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the InputTime.

```vue

<template>
  <B24InputTime tag="note" color="air-primary" highlight />
</template>

```

Use the `tagColor` property to set the color for Badge.

```vue

<script setup lang="ts">
const value = ref(undefined)
</script>

<template>
  <B24InputTime tag="note" tag-color="air-secondary-alert" color="air-primary" highlight />
</template>

```

### Size

Use the `size` prop to change the size of the InputTime.

```vue

<template>
  <B24InputTime size="xl" />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the InputTime.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24InputTime :icon="RocketIcon" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the InputTime.

```vue

<template>
  <B24InputTime :avatar="{src:'/b24ui/avatar/employee.png'}" size="md" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the InputTime.

```vue

<template>
  <B24InputTime loading />
</template>

```

### Disabled

Use the `disabled` prop to disable the InputTime.

```vue

<template>
  <B24InputTime disabled />
</template>

```

### No padding

Use the `noPadding` prop to removes padding from the InputTime.

```vue

<template>
  <B24InputTime no-padding highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### No border

Use the `noBorder` prop to removes all borders (rings) from the InputTime.

```vue

<template>
  <B24InputTime no-border highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the InputTime.

```vue

<template>
  <B24InputTime underline highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the InputTime.

```vue

<template>
  <B24InputTime rounded highlight />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## Examples

### Within a FormField

You can use the InputTime within a [FormField](https://bitrix24.github.io/b24ui/raw/docs/components/form-field.md) component to display a label, help text, required indicator, etc.

```vue [InputTimeFormFieldExample.vue]
<script setup lang="ts">
import { Time } from '@internationalized/date'

const time = shallowRef(new Time(12, 30, 0))
</script>

<template>
  <B24FormField label="Time" help="Specify the time" required>
    <B24InputTime v-model="time" />
  </B24FormField>
</template>
```

## API

### Props

```ts
/**
 * Props for the InputTime component
 */
interface InputTimeProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "xss" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  /**
   * Removes padding from input
   */
  noPadding?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the input
   */
  rounded?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  b24ui?: { base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; segment?: ClassNameValue; } | undefined;
  /**
   * The default value for the calendar
   */
  defaultValue?: TimeValue | undefined;
  /**
   * The default placeholder date
   */
  defaultPlaceholder?: TimeValue | undefined;
  /**
   * The placeholder date, which is used to determine what time to display when no time is selected. This updates as the user navigates the field
   */
  placeholder?: TimeValue | undefined;
  /**
   * The controlled checked state of the field. Can be bound as `v-model`.
   */
  modelValue?: TimeValue | null | undefined;
  /**
   * The hour cycle used for formatting times. Defaults to the local preference
   */
  hourCycle?: HourCycle;
  /**
   * The stepping interval for the time fields. Defaults to `1`.
   */
  step?: DateStep | undefined;
  /**
   * The granularity to use for formatting times. Defaults to minute if a Time is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity
   */
  granularity?: "hour" | "minute" | "second" | undefined;
  /**
   * Whether or not to hide the time zone segment of the field
   */
  hideTimeZone?: boolean | undefined;
  /**
   * The maximum date that can be selected
   */
  maxValue?: TimeValue | undefined;
  /**
   * The minimum date that can be selected
   */
  minValue?: TimeValue | undefined;
  /**
   * Whether or not the time field is disabled
   */
  disabled?: boolean | undefined;
  /**
   * Whether or not the time field is readonly
   */
  readonly?: boolean | undefined;
  /**
   * Id of the element
   */
  id?: string | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * Display an icon on the right side.
   */
  trailingIcon?: IconComponent | undefined;
}
```

### Slots

```ts
/**
 * Slots for the InputTime component
 */
interface InputTimeSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the InputTime component
 */
interface InputTimeEmits {
  blur: (payload: [event: FocusEvent]) => void;
  change: (payload: [event: Event]) => void;
  focus: (payload: [event: FocusEvent]) => void;
  update:modelValue: (payload: [date: TimeValue | undefined]) => void;
  update:placeholder: (payload: [date: TimeValue]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    inputTime: {
      slots: {
        base: 'group relative inline-flex items-center select-none transition-colors style-blurred-bg-input',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center',
        segment: 'rounded text-center outline-hidden text-(--ui-color-base-1) data-placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle data-[segment=literal]:text-(--ui-color-base-6) data-invalid:text-(--ui-color-accent-main-alert) data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-disabled:select-none data-disabled:opacity-30 data-disabled:resize-none transition-colors focus:bg-(--ui-color-bg-content-secondary)'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] gap-0.20 px-1',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]',
            segment: 'not-data-[segment=literal]:w-6'
          },
          xs: {
            base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] gap-0.25 px-2',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]',
            segment: 'not-data-[segment=literal]:w-6'
          },
          sm: {
            base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] gap-0.5 px-2',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]',
            segment: 'not-data-[segment=literal]:w-6'
          },
          md: {
            base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] gap-0.5 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]',
            segment: 'not-data-[segment=literal]:w-7'
          },
          lg: {
            base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] gap-0.75 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            segment: 'not-data-[segment=literal]:w-7'
          },
          xl: {
            base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] gap-0.75 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            segment: 'not-data-[segment=literal]:w-8'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        }
      },
      compoundVariants: [
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# Kbd

> A kbd element for indicating a keyboard input.

## Usage

Use the default slot to set the value of the Kbd.

```vue

<template>
  <B24Kbd>K</B24Kbd>
</template>

```

### Value

Use the `value` prop to set the value of the Kbd.

```vue

<template>
  <B24Kbd value="K" />
</template>

```

You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/bitrix24/b24ui/blob/main/src/runtime/composables/useKbd.ts){rel="nofollow"} composable. For example, the `meta` key displays as `⌘` on macOS and `Ctrl` on other platforms.

```vue

<template>
  <B24Kbd value="meta" />
</template>

```

### Accent

Use the `accent` prop to change the variant of the Kbd.

```vue

<template>
  <B24Kbd accent="accent">K</B24Kbd>
</template>

```

### Size

Use the `size` prop to change the size of the Kbd.

```vue

<template>
  <B24Kbd size="lg">K</B24Kbd>
</template>

```

## Examples

### `class` prop

Use the `class` prop to override the base styles of the Badge.

```vue

<template>
  <B24Kbd class="text-(--ui-color-copilot-accent-primary) dark:text-(--ui-color-accent-main-warning) font-(--ui-font-weight-bold) rounded-full" accent="accent">K</B24Kbd>
</template>

```

## API

### Props

```ts
/**
 * Props for the Kbd component
 */
interface KbdProps {
  /**
   * The element or component this component should render as.
   * @default "\"kbd\""
   */
  as?: any;
  value?: string | undefined;
  /**
   * @default "\"default\""
   */
  accent?: "default" | "accent" | "less" | undefined;
  size?: "sm" | "md" | "lg" | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Kbd component
 */
interface KbdSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    kbd: {
      slots: {
        base: 'inline-flex items-center justify-center px-1 rounded-(--ui-border-radius-2xs) font-(--ui-font-weight-normal) font-[family-name:var(--ui-font-family-system-mono)] uppercase border border-(length:--b24ui-border-width) border-(--b24ui-border-color) text-(--b24ui-color) bg-(--b24ui-background)'
      },
      variants: {
        accent: {
          default: 'style-outline',
          accent: 'style-outline-accent-1',
          less: 'style-outline-no-accent'
        },
        size: {
          sm: 'h-[20px] min-w-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)',
          md: 'h-[24px] min-w-[24px] text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)',
          lg: 'h-[28px] min-w-[28px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)'
        }
      },
      defaultVariants: {
        accent: 'less',
        size: 'md'
      }
    }
  }
})
```

---

# Link

> A wrapper around \<NuxtLink> with extra props.

## Usage

The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} using the [`custom`](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-custom){rel="nofollow"} prop. It provides a few extra props:

- `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active.
- `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route.
- `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash.

  - use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query.

The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link){rel="nofollow"} guide.

> !NOTE
> It is used by the [`Breadcrumb`](https://bitrix24.github.io/b24ui/raw/docs/components/breadcrumb.md), [`Button`](https://bitrix24.github.io/b24ui/raw/docs/components/button.md), [`ContextMenu`](https://bitrix24.github.io/b24ui/raw/docs/components/context-menu.md), [`DropdownMenu`](https://bitrix24.github.io/b24ui/raw/docs/components/dropdown-menu.md) and [`NavigationMenu`](https://bitrix24.github.io/b24ui/raw/docs/components/navigation-menu.md) components.

### Tag

The `Link` components renders an `<a>` tag when a `to` prop is provided, otherwise it renders a `<button>` tag. You can use the `as` prop to change fallback tag.

```vue

<template>
  <B24Link as="button">Link</B24Link>
</template>

```

> !NOTE
> You can inspect the rendered HTML by changing the `to` prop.

### Style

By default, the link has default active and inactive styles, check out the [#theme](https://bitrix24.github.io/b24ui/#theme) section.

```vue

<template>
  <B24Link to="/docs/components/link/">Link</B24Link>
</template>

```

> !NOTE
> Try changing the `to` prop to see the active and inactive states.

You can override this behavior by using the `raw` prop and provide your own styles using `class`, `active-class` and `inactive-class`.

```vue

<template>
  <B24Link raw to="/docs/components/link/" active-class="font-(--ui-font-weight-bold) text-(--ui-color-copilot-accent-primary)" inactive-class="text-(--ui-color-accent-main-alert)">Link</B24Link>
</template>

```

You can use the `is-action` prop to indicate a pseudo-link.

```vue

<template>
  <B24Link is-action to="/docs/components/link/">Link</B24Link>
</template>

```

## IntelliSense

If you're using VSCode and wish to get autocompletion for the classes `active-class` and `inactive-class`, you can add the following settings to your `.vscode/settings.json`:

```json [.vscode/settings.json]
{
  "tailwindCSS.classAttributes": [
    "active-class",
    "inactive-class"
  ]
}
```

## API

### Props

```ts
/**
 * Props for the Link component
 */
interface LinkProps {
  /**
   * The element or component this component should render as when not a link.
   * @default "\"button\""
   */
  as?: any;
  /**
   * The type of the button when not a link.
   * @default "\"button\""
   */
  type?: "reset" | "submit" | "button" | undefined;
  disabled?: boolean | undefined;
  /**
   * Force the link to be active independent of the current route.
   * @default "undefined"
   */
  active?: boolean | undefined;
  /**
   * Will only be active if the current route is an exact match.
   */
  exact?: boolean | undefined;
  /**
   * Allows controlling how the current route query sets the link as active.
   */
  exactQuery?: boolean | "partial" | undefined;
  /**
   * Will only be active if the current route hash is an exact match.
   */
  exactHash?: boolean | undefined;
  /**
   * The class to apply when the link is inactive.
   */
  inactiveClass?: string | undefined;
  /**
   * Whether RouterLink should not wrap its content in an `a` tag. Useful when
   * using `v-slot` to create a custom RouterLink
   */
  custom?: boolean | undefined;
  /**
   * When `true`, uses special underlined styling.
   * @default "false"
   */
  isAction?: boolean | undefined;
  /**
   * When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied.
   */
  raw?: boolean | undefined;
  /**
   * Route Location the link should navigate to when clicked on.
   */
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  /**
   * An alias for `to`. If used with `to`, `href` will be ignored
   */
  href?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  /**
   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
   */
  external?: boolean | undefined;
  /**
   * Where to display the linked URL, as the name for a browsing context.
   */
  target?: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null | undefined;
  /**
   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
   */
  rel?: "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | (string & {}) | null | undefined;
  /**
   * If set to true, no rel attribute will be added to the link
   */
  noRel?: boolean | undefined;
  /**
   * A class to apply to links that have been prefetched.
   */
  prefetchedClass?: string | undefined;
  /**
   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
   */
  prefetch?: boolean | undefined;
  /**
   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
   */
  prefetchOn?: "visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }> | undefined;
  /**
   * Escape hatch to disable `prefetch` attribute.
   */
  noPrefetch?: boolean | undefined;
  /**
   * An option to either add or remove trailing slashes in the `href` for this specific link.
   * Overrides the global `trailingSlash` option if provided.
   */
  trailingSlash?: "append" | "remove" | undefined;
  /**
   * Class to apply when the link is active
   */
  activeClass?: string | undefined;
  /**
   * Class to apply when the link is exact active
   */
  exactActiveClass?: string | undefined;
  /**
   * Value passed to the attribute `aria-current` when the link is exact active.
   * @default "\"page\""
   */
  ariaCurrentValue?: "step" | "page" | "true" | "false" | "location" | "date" | "time" | undefined;
  /**
   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
   */
  viewTransition?: boolean | undefined;
  /**
   * Calls `router.replace` instead of `router.push`.
   */
  replace?: boolean | undefined;
  name?: string | undefined;
  autofocus?: Booleanish | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  download?: any;
  hreflang?: string | undefined;
  media?: string | undefined;
  ping?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes)
> This component also supports all native `<a>` HTML attributes.

### Slots

```ts
/**
 * Slots for the Link component
 */
interface LinkSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    link: {
      base: 'cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start',
      variants: {
        active: {
          true: 'text-(--ui-color-accent-main-primary) outline-(--ui-color-accent-main-primary) hover:not-disabled:not-aria-disabled:underline underline-offset-2',
          false: 'text-(--ui-color-design-selection-content) underline-offset-2'
        },
        disabled: {
          true: 'cursor-not-allowed opacity-75'
        },
        isAction: {
          true: 'text-nowrap text-(length:--ui-font-size-sm) h-auto py-0 font-(--ui-font-weight-normal) rounded-none border border-x-0 border-t-0 border-dashed text-(--ui-color-design-outline-a1-content) border-b-(--ui-color-design-outline-a1-content) hover:not-disabled:not-aria-disabled:no-underline hover:text(--ui-color-accent-soft-element-red) hover:not-disabled:not-aria-disabled:text-(--ui-color-accent-soft-element-red) hover:border-b-(--ui-color-accent-soft-element-red) focus-visible:outline-(--ui-color-accent-soft-element-red)'
        }
      },
      compoundVariants: [
        {
          active: false,
          disabled: false,
          class: 'hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline'
        }
      ]
    }
  }
})
```

---

# LocaleSelect

> A Select to switch between locales.

## Usage

The LocaleSelect component extends the [SelectMenu](https://bitrix24.github.io/b24ui/raw/docs/components/select-menu.md) component, so you can pass any property such as `color`, `size`, etc.

::framework-only
#nuxt
> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/i18n/nuxt.md)
> This component is meant to be used with the **i18n** system. Learn more about it in the guide.

#vue
> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/integrations/i18n/vue.md)
> This component is meant to be used with the **i18n** system. Learn more about it in the guide.
::

> !WARNING
> The flags are displayed using Unicode characters. This may result in a different display, e.g. Microsoft Edge under Windows displays the ISO 3166-1 alpha-2 code instead, as no flag icons are shipped with the OS fonts.

### Locales

Use the `locales` prop with an array of locales from `@bitrix24/b24ui-nuxt/locale`.

```vue [LocaleSelectExample.vue]
<script setup lang="ts">
import * as locales from '@bitrix24/b24ui-nuxt/locale'

const locale = ref('en')
</script>

<template>
  <B24LocaleSelect v-model="locale" :locales="Object.values(locales)" class="w-48" />
</template>
```

You can pass only the locales you need in your application:

```vue
<script setup lang="ts">
import { en, es, ru, tr, ar } from '@bitrix24/b24ui-nuxt/locale'

const locale = ref('en')
</script>

<template>
  <B24LocaleSelect v-model="locale" :locales="[en, es, ru, tr, ar]" />
</template>
```

### Dynamic locale

::framework-only
#nuxt
  :::div
  You can use it with Nuxt i18n:
  
  ```vue
  <script setup lang="ts">
  import * as locales from '@bitrix24/b24ui-nuxt/locale'
  
  const { locale, setLocale } = useI18n()
  </script>
  
  <template>
    <B24LocaleSelect
      :model-value="locale"
      :locales="Object.values(locales)"
      @update:model-value="setLocale($event)"
    />
  </template>
  ```
  :::

#vue
  :::div
  You can use it with Vue i18n:
  
  ```vue
  <script setup lang="ts">
  import { useI18n } from 'vue-i18n'
  import * as locales from '@bitrix24/b24ui-nuxt/locale'
  
  const { locale, setLocale } = useI18n()
  </script>
  
  <template>
    <B24LocaleSelect
      :model-value="locale"
      :locales="Object.values(locales)"
      @update:model-value="setLocale($event)"
    />
  </template>
  ```
  :::
::

## API

### Props

```ts
/**
 * Props for the LocaleSelect component
 */
interface LocaleSelectProps {
  modelValue: string;
  locales?: Locale<any>[] | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  size?: "md" | "xs" | "sm" | "lg" | "xl" | "xss" | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; arrow?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; } | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * The icon displayed to open the menu.
   */
  trailingIcon?: IconComponent | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  autofocus?: boolean | undefined;
  /**
   * When `true`, prevents the user from interacting with listbox
   */
  disabled?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  /**
   * The controlled open state of the Combobox. Can be binded with with `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * Whether to reset the searchTerm when the Combobox input blurred
   */
  resetSearchTermOnBlur?: boolean | undefined;
  /**
   * Whether to reset the searchTerm when the Combobox value is selected
   */
  resetSearchTermOnSelect?: boolean | undefined;
  /**
   * When `true`, hover over item will trigger highlight
   */
  highlightOnHover?: boolean | undefined;
  /**
   * The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
   */
  defaultValue?: string | undefined;
  /**
   * Whether multiple options can be selected or not.
   */
  multiple?: false | undefined;
  required?: boolean | undefined;
  id?: string | undefined;
  /**
   * The placeholder text when the select is empty.
   */
  placeholder?: string | undefined;
  /**
   * Whether to display the search input or not.
   * Can be an object to pass additional props to the input.
   * `{ placeholder: 'Search...', type: 'text', size: 'md' }`{lang="ts"}
   * @default "false"
   */
  searchInput?: boolean | InputProps<AcceptableValue> | undefined;
  /**
   * Removes padding from input
   */
  noPadding?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the select
   */
  rounded?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * The icon displayed when an item is selected.
   */
  selectedIcon?: IconComponent | undefined;
  /**
   * The content of the menu.
   */
  content?: (Omit<ComboboxContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>) | undefined;
  /**
   * Display an arrow alongside the menu.
   */
  arrow?: boolean | Omit<ComboboxArrowProps, "as" | "asChild"> | undefined;
  /**
   * Render the menu in a portal.
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * Enable virtualization for large lists.
   * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
   */
  virtualize?: boolean | { overscan?: number | undefined; estimateSize?: number | undefined; } | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
   * @default "\"code\""
   */
  valueKey?: "code" | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the label.
   * @default "\"name\""
   */
  labelKey?: GetItemKeys<Locale<any>[]> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the description.
   */
  descriptionKey?: GetItemKeys<Locale<any>[]> | undefined;
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  /**
   * Determines if custom user input that does not exist in options can be added.
   */
  createItem?: boolean | "always" | { position?: "top" | "bottom" | undefined; when?: "empty" | "always" | undefined; } | undefined;
  /**
   * Fields to filter items by.
   */
  filterFields?: string[] | undefined;
  /**
   * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
   */
  ignoreFilter?: boolean | undefined;
  autofocusDelay?: number | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
}
```

---

# Modal

> A popup window for showing messages or gathering user input.

## Usage

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) or any other component in the default slot of the Modal.

Then, use the `#content` slot to add the content displayed when the Modal is open.

```vue

<template>
  <B24Modal>
<B24Button label="Open" />

  <template #content>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

You can also use the `#header`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}, `#body`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} and `#footer`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} slots to customize the Modal's content.

### Title

Use the `title` prop to set the title of the Modal's header.

```vue

<template>
  <B24Modal title="Modal with title">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

### Description

Use the `description` prop to set the description of the Modal's header.

```vue

<template>
  <B24Modal title="Modal with description" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

### Close

Use the `close` prop to customize or hide the close button (with `false` value) displayed in the Modal's header.

You can pass any property from the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component to customize it.

```vue

<template>
  <B24Modal title="Modal with close button" :close="{color:'air-secondary-accent-2',class:'rounded-full'}">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

> !TIP
> The close button is not displayed if the `#content` slot is used as it's a part of the header.

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Modal title="Modal with close button" :close-icon="RocketIcon">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

### Transition

Use the `transition` prop to control whether the Modal is animated or not. Defaults to `true`.

```vue

<template>
  <B24Modal :transition="false" title="Modal without transition">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

### Overlay

Use the `overlay` prop to control whether the Modal has an overlay or not. Defaults to `true`.

```vue

<template>
  <B24Modal :overlay="false" title="Modal without overlay">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

### Overlay blur

If you want to disable background blur, you should use the `overlayBlur` prop.

The `overlayBlur` prop has 3 options:

- `auto`: (default) when the user has **not requested** [reduced motion](https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion){rel="nofollow"}
- `on`: always use blur
- `off`: do not use blur

```vue

<template>
  <B24Modal overlay-blur="auto" title="Overlay blur">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

### Modal

Use the `modal` prop to control whether the Modal blocks interaction with outside content. Defaults to `true`.

> !NOTE
> When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.

```vue

<template>
  <B24Modal :modal="false" title="Modal interactive">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

### Dismissible

Use the `dismissible` prop to control whether the Modal is dismissible when clicking outside of it or pressing escape. Defaults to `true`.

> !NOTE
> A `close:prevent` event will be emitted when the user tries to close it.

> !TIP
> You can combine `modal: false` with `dismissible: false` to make the Modal's background interactive without closing it.

```vue

<template>
  <B24Modal :dismissible="false" title="Modal non-dismissible">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-48" />

  </template>

</B24Modal>
</template>

```

### Scrollable :badge{label="Soon"}

Use the `scrollable` prop to make the Modal's content scrollable within the overlay.

> !WARNING
> As the overlay is needed for scrolling, `modal: false` is not compatible and `overlay: false` only removes the background.

```vue

<template>
  <B24Modal scrollable title="Modal scrollable">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-full" />

  </template>

</B24Modal>
</template>

```

> !CAUTION
> There's a [known issue](https://reka-ui.com/docs/components/dialog#scrollable-overlay){rel="nofollow"} where clicking on the scrollbar may unintentionally close the dialog on some operating systems.

### Fullscreen

Use the `fullscreen` prop to make the Modal fullscreen.

```vue

<template>
  <B24Modal fullscreen title="Modal fullscreen">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-full" />

  </template>

</B24Modal>
</template>

```

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [ModalOpenExample.vue]
<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Modal v-model:open="open">
    <B24Button label="Open" />

    <template #content>
      <Placeholder class="h-48" />
    </template>
  </B24Modal>
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the Modal by pressing ``.

> !TIP
> This allows you to move the trigger outside of the Modal or remove it entirely.

### Programmatic usage

You can use the [`useOverlay`](https://bitrix24.github.io/b24ui/raw/docs/composables/use-overlay.md) composable to open a Modal programmatically.

> !WARNING
> Make sure to wrap your app with the [`App`](https://bitrix24.github.io/b24ui/raw/docs/components/app.md) component which uses the [`OverlayProvider`](https://github.com/bitrix24/b24ui/blob/main/src/runtime/components/OverlayProvider.vue){rel="nofollow"} component.

First, create a modal component that will be opened programmatically:

```vue [ModalExample.vue]
<script setup lang="ts">
defineProps<{
  count: number
}>()

const emit = defineEmits<{ close: [boolean] }>()
</script>

<template>
  <B24Modal :close="{ onClick: () => emit('close', false) }" :title="`This modal was opened programmatically ${count} times`">
    <template #footer>
      <div class="flex gap-2">
        <B24Button label="Dismiss" @click="emit('close', false)" />
        <B24Button color="air-primary-success" label="Success" @click="emit('close', true)" />
      </div>
    </template>
  </B24Modal>
</template>
```

> !NOTE
> We are emitting a `close` event when the modal is closed or dismissed here. You can emit any data through the `close` event, however, the event must be emitted in order to capture the return value.

Then, use it in your app:

```vue [ModalProgrammaticExample.vue]
<script setup lang="ts">
import { LazyModalExample } from '#components'

const count = ref(0)

const toast = useToast()
const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

async function open() {
  const instance = modal.open({
    count: count.value
  })

  const shouldIncrement = await instance.result

  if (shouldIncrement) {
    count.value++

    toast.add({
      title: `Success: ${shouldIncrement}`,
      color: 'air-primary-success',
      id: 'modal-success'
    })

    // Update the count
    modal.patch({
      count: count.value
    })
    return
  }

  toast.add({
    title: `Dismissed: ${shouldIncrement}`,
    color: 'air-primary-alert',
    id: 'modal-dismiss'
  })
}
</script>

<template>
  <B24Button label="Open" @click="open" />
</template>
```

> !TIP
> You can close the modal within the modal component by emitting `emit('close')`.

### Nested modals

You can nest modals within each other.

```vue [ModalNestedExample.vue]
<script setup lang="ts">
const first = ref(false)
const second = ref(false)
</script>

<template>
  <B24Modal v-model:open="first" title="First modal" :ui="{ footer: 'justify-end' }">
    <B24Button label="Open" />

    <template #footer>
      <B24Button label="Close" @click="first = false" />

      <B24Modal v-model:open="second" title="Second modal" :ui="{ footer: 'justify-end' }">
        <B24Button label="Open second" color="air-primary" />

        <template #footer>
          <B24Button label="Close" @click="second = false" />
        </template>
      </B24Modal>
    </template>
  </B24Modal>
</template>
```

### With footer slot

Use the `#footer` slot to add content after the Modal's body.

```vue [ModalFooterSlotExample.vue]
<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <B24Modal v-model:open="open" title="Modal with footer" description="This is useful when you want a form in a Modal." :ui="{ footer: 'justify-end' }">
    <B24Button label="Open" />

    <template #body>
      <Placeholder class="h-48" />
    </template>

    <template #footer="{ close }">
      <B24Button label="Submit" color="air-primary-success" />
      <B24Button label="Cancel" @click="close" />
    </template>
  </B24Modal>
</template>
```

### With command palette

You can use a [CommandPalette](https://bitrix24.github.io/b24ui/raw/docs/components/command-palette.md) component inside the Modal's content.

```vue [ModalCommandPaletteExample.vue]
<script setup lang="ts">
import PersonSearchIcon from '@bitrix24/b24icons-vue/outline/PersonSearchIcon'

const searchTerm = ref('')

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'command-palette-users',
  params: { q: searchTerm },
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})

const groups = computed(() => [{
  id: 'users',
  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
  items: users.value || [],
  ignoreFilter: true
}])
</script>

<template>
  <B24Modal :b24ui="{ content: 'p-0 pt-0 pb-[10px]' }">
    <B24Button
      label="Search users..."
      :icon="PersonSearchIcon"
    />

    <template #content>
      <B24CommandPalette
        v-model:search-term="searchTerm"
        :loading="status === 'pending'"
        :groups="groups"
        placeholder="Search users..."
        class="h-[320px]"
      />
    </template>
  </B24Modal>
</template>
```

## API

### Props

```ts
/**
 * Props for the Modal component
 */
interface ModalProps {
  title?: string | undefined;
  description?: string | undefined;
  /**
   * The content of the modal.
   */
  content?: (Omit<DialogContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DialogContentImplEmits>>) | undefined;
  /**
   * Render an overlay behind the modal.
   * @default "true"
   */
  overlay?: boolean | undefined;
  /**
   * When `true`, enables scrollable overlay mode where content scrolls within the overlay.
   */
  scrollable?: boolean | undefined;
  /**
   * Render an overlay blur behind the modal.
   * `auto` use `motion-safe`.
   * @default "\"auto\""
   */
  overlayBlur?: "auto" | "on" | "off" | undefined;
  /**
   * Animate the modal when opening or closing.
   * @default "true"
   */
  transition?: boolean | undefined;
  /**
   * When `true`, the modal will take up the full screen.
   */
  fullscreen?: boolean | undefined;
  /**
   * Render the modal in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * Display a close button to dismiss the modal.
   * `{ size: 'xs', color: 'air-tertiary-no-accent' }`{lang="ts-type"}
   * @default "true"
   */
  close?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the close button.
   */
  closeIcon?: IconComponent | undefined;
  /**
   * When `false`, the modal will not close when clicking outside or pressing escape.
   * @default "true"
   */
  dismissible?: boolean | undefined;
  /**
   * @default "true"
   */
  scrollbarThin?: boolean | undefined;
  b24ui?: { overlay?: ClassNameValue; content?: ClassNameValue; contentWrapper?: ClassNameValue; header?: ClassNameValue; wrapper?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; close?: ClassNameValue; } | undefined;
  /**
   * The controlled open state of the dialog. Can be binded as `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The modality of the dialog When set to `true`, <br>
   * interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
   * @default "true"
   */
  modal?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Modal component
 */
interface ModalSlots {
  default(): any;
  content(): any;
  header(): any;
  title(): any;
  description(): any;
  actions(): any;
  close(): any;
  body(): any;
  footer(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Modal component
 */
interface ModalEmits {
  after:leave: (payload: []) => void;
  after:enter: (payload: []) => void;
  close:prevent: (payload: []) => void;
  update:open: (payload: [value: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    modal: {
      slots: {
        overlay: 'fixed inset-0',
        content: 'light bg-(--popup-window-background-color) flex flex-col gap-[20px] focus:outline-none p-[24px] pt-[20px]',
        contentWrapper: 'flex flex-col gap-[15px] pt-[4px]',
        header: 'flex items-start justify-between gap-[6px]',
        wrapper: '',
        body: 'flex-1 text-(length:--ui-font-size-md) leading-normal',
        footer: 'flex items-center justify-between gap-[10px] border-t border-t-1 border-t-(--ui-color-divider-default) pt-[18px]',
        title: 'font-[family-name:var(--ui-font-family-primary)] text-(--b24ui-typography-label-color) font-(--ui-font-weight-medium) mb-0 text-[calc(var(--ui-font-size-2xl)+2px)]/(--ui-font-size-2xl)',
        description: 'mt-1 text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
        close: '-mt-[4px]'
      },
      variants: {
        overlayBlur: {
          auto: {
            overlay: 'motion-safe:backdrop-blur-[2px]'
          },
          on: {
            overlay: 'backdrop-blur-[2px]'
          },
          off: {
            overlay: ''
          }
        },
        transition: {
          true: {
            overlay: 'motion-safe:data-[state=open]:animate-[fade-in_200ms_ease-out] motion-safe:data-[state=closed]:animate-[fade-out_200ms_ease-in]',
            content: 'motion-safe:data-[state=open]:animate-[scale-in_200ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_200ms_ease-in]'
          }
        },
        fullscreen: {
          true: {
            content: 'inset-0'
          },
          false: {
            content: 'w-[calc(100vw-2rem)] max-w-[32rem] rounded-[calc(var(--popup-window-border-radius)-2px)] shadow-lg',
            contentWrapper: ''
          }
        },
        overlay: {
          true: {
            overlay: 'bg-[#003366]/20'
          }
        },
        scrollable: {
          true: {
            overlay: 'overflow-y-auto',
            content: 'relative'
          },
          false: {
            content: 'fixed',
            body: 'overflow-y-auto'
          }
        },
        scrollbarThin: {
          true: {
            body: 'scrollbar-thin'
          }
        }
      },
      compoundVariants: [
        {
          scrollable: true,
          fullscreen: false,
          class: {
            overlay: 'grid place-items-center p-4 sm:py-8'
          }
        },
        {
          scrollable: false,
          fullscreen: false,
          class: {
            content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]',
            contentWrapper: 'overflow-hidden'
          }
        }
      ],
      defaultVariants: {
        scrollbarThin: true,
        overlayBlur: 'auto'
      }
    }
  }
})
```

---

# NavigationMenu

> A link list that can be arranged in horizontal or vertical orientation.

## Usage

Use the NavigationMenu component to display a list of links horizontally or vertically.

```vue

<script setup lang="ts">
const items = ref([
  {
    label: 'Sales management',
    type: 'trigger',
    children: [
      {
        label: 'Lead management'
      },
      {
        label: 'Deal management'
      },
      {
        label: 'Pipelines'
      },
      {
        label: 'Access permissions'
      }
    ]
  },
  {
    label: 'Collaboration',
    type: 'trigger',
    children: [
      {
        label: 'Online workspace',
        to: 'https://www.bitrix24.com/tools/communications/online-workspace.php'
      },
      {
        label: 'CoPilot in Chat',
        to: 'https://www.bitrix24.com/tools/copilot-ai-powered-tools-for-business.php#copilot-in-chat'
      },
      {
        label: 'useToast',
        to: '/docs/composables/use-toast'
      }
    ]
  },
  {
    label: 'HR & Automation',
    type: 'trigger',
    badge: 5,
    active: true,
    children: [
      {
        label: 'Employee management',
        to: 'https://www.bitrix24.com/tools/hr_automation/employee-management.php'
      },
      {
        label: 'Culture & engagement',
        to: 'https://www.bitrix24.com/tools/hr_automation/culture-and-engagement.php'
      },
      {
        label: 'Automation',
        to: 'https://www.bitrix24.com/tools/hr_automation/automation.php',
        target: '_blank'
      }
    ]
  },
  {
    label: 'GitHub',
    to: 'https://github.com/bitrix24/b24ui',
    target: '_blank'
  },
  {
    label: 'Help',
    disabled: true
  }
])
</script>

<template>
  <B24NavigationMenu :items="items" />
</template>

```

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `badge?: string | number | BadgeProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `hint?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `tooltip?: TooltipProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `trailingIcon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `type?: 'label' | 'trigger' | 'link'`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `defaultOpen?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `open?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `value?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- [`viewportRtl?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#orientation)
- `onSelect?: (e: Event) => void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `children?: NavigationMenuChildItem[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkLeadingHint?: ClassNameValue, linkLeadingBadgeSize?: ClassNameValue, linkLeadingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkHint?: ClassNameValue, childLinkBadgeSize?: ClassNameValue, childLinkBadge?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, popoverWrapper?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

You can pass any property from the [Link](https://bitrix24.github.io/b24ui/raw/docs/components/link.md#props) component such as `to`, `target`, etc.

```vue

<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<NavigationMenuItem[]>([
  {
    label: 'Sales management',
    type: 'trigger',
    hint: 'note',
    children: [
      {
        label: 'Lead management'
      },
      {
        label: 'Deal management'
      },
      {
        label: 'Pipelines',
        hint: 'note'
      },
      {
        label: 'Access permissions'
      }
    ]
  },
  {
    label: 'Collaboration',
    type: 'trigger',
    children: [
      {
        label: 'Online workspace',
        to: 'https://www.bitrix24.com/tools/communications/online-workspace.php'
      },
      {
        label: 'CoPilot in Chat',
        to: 'https://www.bitrix24.com/tools/copilot-ai-powered-tools-for-business.php#copilot-in-chat'
      },
      {
        label: 'useToast',
        to: '/docs/composables/use-toast'
      }
    ]
  },
  {
    label: 'HR & Automation',
    type: 'trigger',
    badge: 5,
    active: true,
    children: [
      {
        label: 'Employee management',
        to: 'https://www.bitrix24.com/tools/hr_automation/employee-management.php'
      },
      {
        label: 'Culture & engagement',
        to: 'https://www.bitrix24.com/tools/hr_automation/culture-and-engagement.php'
      },
      {
        label: 'Automation',
        to: 'https://www.bitrix24.com/tools/hr_automation/automation.php',
        target: '_blank'
      }
    ]
  },
  {
    label: 'GitHub',
    to: 'https://github.com/bitrix24/b24ui',
    target: '_blank'
  },
  {
    label: 'Help',
    disabled: true
  }
])
</script>

<template>
  <B24NavigationMenu :items="items" class="w-full justify-center" />
</template>

```

> !NOTE
> You can also pass an array of arrays to the `items` prop to display groups of items.

> !TIP
> Use a flat `children` array of objects to define submenus:
>
> - `label: string`
> - `icon?: IconComponent`
> - `onSelect?(e: Event): void`
> - `class?: any`

### Orientation

Use the `orientation` prop to change the orientation of the NavigationMenu.

> !NOTE
> When orientation is `vertical`, an [Accordion](https://bitrix24.github.io/b24ui/raw/docs/components/accordion.md) component is used to display each group. You can control the open state of each item using the `open` and `defaultOpen` properties and change the behavior using the [`collapsible`](https://bitrix24.github.io/b24ui/raw/docs/components/accordion.md#collapsible) and [`type`](https://bitrix24.github.io/b24ui/raw/docs/components/accordion.md#multiple) props.

> !WARNING
> The last top-level menu item needs to have `viewportRtl` set to ensure the drop-down menu is positioned correctly.

```vue

<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<NavigationMenuItem[][]>([
  [
    {
      label: 'Links',
      type: 'label'
    },
    {
      label: 'Sales management',
      type: 'trigger',
      hint: 'note',
      defaultOpen: true,
      children: [
        {
          label: 'Lead management'
        },
        {
          label: 'Deal management'
        },
        {
          label: 'Pipelines',
          hint: 'note'
        },
        {
          label: 'Access permissions'
        }
      ]
    }
  ],
  [
    {
      label: 'GitHub',
      to: 'https://github.com/bitrix24/b24ui',
      target: '_blank'
    },
    {
      label: 'Help',
      disabled: true
    },
    {
      label: 'HR & Automation',
      type: 'trigger',
      viewportRtl: true,
      badge: 5,
      active: true,
      children: [
        {
          label: 'Employee management',
          to: 'https://www.bitrix24.com/tools/hr_automation/employee-management.php'
        },
        {
          label: 'Culture & engagement',
          to: 'https://www.bitrix24.com/tools/hr_automation/culture-and-engagement.php'
        },
        {
          label: 'Automation',
          to: 'https://www.bitrix24.com/tools/hr_automation/automation.php',
          target: '_blank'
        }
      ]
    }
  ]
])
</script>

<template>
  <B24NavigationMenu orientation="vertical" :items="items" class="data-[orientation=vertical]:w-[430px]" />
</template>

```

> !NOTE
> Groups will be spaced when orientation is `horizontal` and separated when orientation is `vertical`.

### Collapsed

In `vertical` orientation, use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.

> !NOTE
> You can use the [`tooltip`](https://bitrix24.github.io/b24ui/#with-tooltip-in-items) and [`popover`](https://bitrix24.github.io/b24ui/#with-popover-in-items) props to display more information on the collapsed items.

```vue [NavigationMenuCollapsedExample.vue]
<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'

const items: NavigationMenuItem[] = [
  {
    label: 'Sales Pipeline',
    icon: ConnectionIcon,
    children: [
      {
        label: 'Lead Generation',
        description: 'Initial contact with potential clients'
      },
      {
        label: 'Lead Qualification',
        description: 'Client potential assessment'
      },
      {
        label: 'Negotiations',
        description: 'Deal terms discussion',
        icon: MicrophoneOnIcon
      }
    ]
  },
  {
    label: 'Sales Analytics',
    icon: CrmMapIcon,
    badge: '+3',
    children: [
      {
        label: 'Sales Reports',
        icon: CrmMapIcon,
        active: true,
        badge: 1
      },
      {
        label: 'Key Metrics',
        icon: Settings5Icon,
        badge: {
          label: 2,
          color: 'air-primary-copilot' as const
        }
      },
      {
        label: 'CRM Integration'
      }
    ]
  },
  {
    label: 'Resources',
    icon: Info1Icon,
    children: [
      {
        label: 'Support',
        icon: Info1Icon,
        disabled: true,
        to: 'https://helpdesk.bitrix24.com/',
        target: '_blank'
      },
      {
        label: 'RestApi Integration'
      }
    ]
  }
]

const idCollapsed = ref(true)
</script>

<template>
  <div class="flex flex-col items-center gap-[4px]">
    <div class="flex flex-row flex-wrap items-center justify-center gap-[4px]">
      <B24Switch v-model="idCollapsed" label="collapsed" />
    </div>
    <B24Separator class="my-[4px]" />
    <B24NavigationMenu
      orientation="vertical"
      :collapsed="idCollapsed"
      :items="items"
      class="data-[collapsed=true]:w-[50px]"
    />
  </div>
</template>
```

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} of each item. This icon is only displayed when an item has children.

> !TIP
> You can also set an icon for a specific item by using the `trailingIcon` property in the item object.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<NavigationMenuItem[]>([
  {
    label: 'Sales management',
    type: 'trigger',
    children: [
      {
        label: 'Lead management'
      },
      {
        label: 'Deal management'
      },
      {
        label: 'Pipelines'
      },
      {
        label: 'Access permissions'
      }
    ]
  },
  {
    label: 'Collaboration',
    type: 'trigger',
    children: [
      {
        label: 'Online workspace',
        to: 'https://www.bitrix24.com/tools/communications/online-workspace.php'
      },
      {
        label: 'CoPilot in Chat',
        to: 'https://www.bitrix24.com/tools/copilot-ai-powered-tools-for-business.php#copilot-in-chat'
      },
      {
        label: 'useToast',
        to: '/docs/composables/use-toast'
      }
    ]
  },
  {
    label: 'HR & Automation',
    type: 'trigger',
    badge: 5,
    active: true,
    children: [
      {
        label: 'Employee management',
        to: 'https://www.bitrix24.com/tools/hr_automation/employee-management.php'
      },
      {
        label: 'Culture & engagement',
        to: 'https://www.bitrix24.com/tools/hr_automation/culture-and-engagement.php'
      },
      {
        label: 'Automation',
        to: 'https://www.bitrix24.com/tools/hr_automation/automation.php',
        target: '_blank'
      }
    ]
  }
])
</script>

<template>
  <B24NavigationMenu :trailing-icon="RocketIcon" :items="items" class="w-full justify-center" />
</template>

```

### Unmount

Use the `unmount-on-hide` prop to control the content unmounting behavior. Defaults to `true`.

```vue

<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<NavigationMenuItem[]>([
  {
    label: 'Sales management',
    type: 'trigger',
    children: [
      {
        label: 'Lead management'
      },
      {
        label: 'Deal management'
      },
      {
        label: 'Pipelines'
      },
      {
        label: 'Access permissions'
      }
    ]
  },
  {
    label: 'Collaboration',
    type: 'trigger',
    children: [
      {
        label: 'Online workspace',
        to: 'https://www.bitrix24.com/tools/communications/online-workspace.php'
      },
      {
        label: 'CoPilot in Chat',
        to: 'https://www.bitrix24.com/tools/copilot-ai-powered-tools-for-business.php#copilot-in-chat'
      },
      {
        label: 'useToast',
        to: '/docs/composables/use-toast'
      }
    ]
  },
  {
    label: 'HR & Automation',
    type: 'trigger',
    badge: 5,
    active: true,
    children: [
      {
        label: 'Employee management',
        to: 'https://www.bitrix24.com/tools/hr_automation/employee-management.php'
      },
      {
        label: 'Culture & engagement',
        to: 'https://www.bitrix24.com/tools/hr_automation/culture-and-engagement.php'
      },
      {
        label: 'Automation',
        to: 'https://www.bitrix24.com/tools/hr_automation/automation.php',
        target: '_blank'
      }
    ]
  }
])
</script>

<template>
  <B24NavigationMenu :unmount-on-hide="false" :items="items" class="w-full justify-center" />
</template>

```

> !NOTE
> You can inspect the DOM to see each item's content being rendered.

## Examples

### With tooltip in items

When orientation is `vertical` and the menu is `collapsed`, you can set the `tooltip` prop to `true` to display a [Tooltip](https://bitrix24.github.io/b24ui/raw/docs/components/tooltip.md) around items with their label but you can also use the `tooltip` property on each item to override the default tooltip.

You can pass any property from the [Tooltip](https://bitrix24.github.io/b24ui/raw/docs/components/tooltip.md) component globally or on each item.

```vue [NavigationMenuCollapsedTooltipExample.vue]
<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'

const items: NavigationMenuItem[] = [
  {
    label: 'Sales Pipeline',
    icon: ConnectionIcon,
    children: [
      {
        label: 'Lead Generation',
        description: 'Initial contact with potential clients'
      },
      {
        label: 'Lead Qualification',
        description: 'Client potential assessment'
      },
      {
        label: 'Negotiations',
        description: 'Deal terms discussion',
        icon: MicrophoneOnIcon
      }
    ]
  },
  {
    label: 'Sales Analytics',
    icon: CrmMapIcon,
    badge: '+3',
    children: [
      {
        label: 'Sales Reports',
        icon: CrmMapIcon,
        active: true,
        badge: 1
      },
      {
        label: 'Key Metrics',
        icon: Settings5Icon,
        badge: {
          label: 2,
          color: 'air-primary-copilot' as const
        }
      },
      {
        label: 'CRM Integration'
      }
    ]
  },
  {
    label: 'Resources',
    icon: Info1Icon,
    children: [
      {
        label: 'Support',
        icon: Info1Icon,
        disabled: true,
        to: 'https://helpdesk.bitrix24.com/',
        target: '_blank'
      },
      {
        label: 'RestApi Integration'
      }
    ]
  }
]

const idCollapsed = ref(true)
const isTooltip = ref(true)
</script>

<template>
  <div class="flex flex-col items-center gap-[4px]">
    <div class="flex flex-row flex-wrap items-center justify-center gap-[4px]">
      <B24Switch v-model="idCollapsed" label="collapsed" />
      <B24Switch v-model="isTooltip" label="tooltip" />
    </div>
    <B24Separator class="my-[4px]" />
    <B24NavigationMenu
      orientation="vertical"
      :collapsed="idCollapsed"
      :tooltip="isTooltip"
      :items="items"
      class="data-[collapsed=true]:w-[50px]"
    />
  </div>
</template>
```

### With popover in items

When orientation is `vertical` and the menu is `collapsed`, you can set the `popover` prop to `true` to display a [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md) around items with their children but you can also use the `popover` property on each item to override the default popover.

You can pass any property from the [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md) component globally or on each item.

```vue [NavigationMenuCollapsedPopoverExample.vue]
<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'

const items: NavigationMenuItem[] = [
  {
    label: 'Sales Pipeline',
    icon: ConnectionIcon,
    children: [
      {
        label: 'Lead Generation',
        description: 'Initial contact with potential clients'
      },
      {
        label: 'Lead Qualification',
        description: 'Client potential assessment'
      },
      {
        label: 'Negotiations',
        description: 'Deal terms discussion',
        icon: MicrophoneOnIcon
      }
    ]
  },
  {
    label: 'Sales Analytics',
    icon: CrmMapIcon,
    badge: '+3',
    children: [
      {
        label: 'Sales Reports',
        icon: CrmMapIcon,
        active: true,
        badge: 1
      },
      {
        label: 'Key Metrics',
        icon: Settings5Icon,
        badge: {
          label: 2,
          color: 'air-primary-copilot' as const
        }
      },
      {
        label: 'CRM Integration'
      }
    ]
  },
  {
    label: 'Resources',
    icon: Info1Icon,
    children: [
      {
        label: 'Support',
        icon: Info1Icon,
        disabled: true,
        to: 'https://helpdesk.bitrix24.com/',
        target: '_blank'
      },
      {
        label: 'RestApi Integration'
      }
    ]
  }
]

const idCollapsed = ref(true)
const isPopover = ref(true)
</script>

<template>
  <div class="flex flex-col items-center gap-[4px]">
    <div class="flex flex-row flex-wrap items-center justify-center gap-[4px]">
      <B24Switch v-model="idCollapsed" label="collapsed" />
      <B24Switch v-model="isPopover" label="popover" />
    </div>
    <B24Separator class="my-[4px]" />
    <B24NavigationMenu
      orientation="vertical"
      :collapsed="idCollapsed"
      :popover="isPopover"
      :items="items"
      class="data-[collapsed=true]:w-[50px]"
    />
  </div>
</template>
```

> [!TIP](https://bitrix24.github.io/b24ui/#with-content-slot)
> You can use the `#content` slot to customize the content of the popover in the `vertical` orientation.

### Control active item

You can control the active item(s) by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to `item-${index}` for top-level items or `item-${level}-${index}` for nested items.

```vue [NavigationMenuModelValueExample.vue]
<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'

const items: NavigationMenuItem[] = [
  {
    label: 'Sales Pipeline',
    icon: ConnectionIcon,
    children: [
      {
        label: 'Lead Generation',
        description: 'Initial contact with potential clients'
      },
      {
        label: 'Lead Qualification',
        description: 'Client potential assessment'
      },
      {
        label: 'Negotiations',
        description: 'Deal terms discussion',
        icon: MicrophoneOnIcon
      }
    ]
  },
  {
    label: 'Sales Analytics',
    badge: '+3',
    children: [
      {
        label: 'Sales Reports',
        icon: CrmMapIcon,
        active: true,
        badge: 1
      },
      {
        label: 'Key Metrics',
        icon: Settings5Icon,
        badge: {
          label: 2,
          color: 'air-primary-copilot' as const
        }
      },
      {
        label: 'CRM Integration'
      }
    ]
  },
  {
    label: 'Resources',
    children: [
      {
        label: 'Support',
        icon: Info1Icon,
        disabled: true,
        to: 'https://helpdesk.bitrix24.com/',
        target: '_blank'
      },
      {
        label: 'RestApi Integration'
      }
    ]
  }
]

const active = ref()

defineShortcuts({
  1: () => {
    active.value = 'item-0'
  },
  2: () => {
    active.value = 'item-1'
  },
  3: () => {
    active.value = 'item-2'
  }
})
</script>

<template>
  <B24NavigationMenu v-model="active" :items="items" class="w-full justify-center" />
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can switch the active item by pressing ``, ``, or ``.

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-leading`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-label`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-trailing`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-content`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [NavigationMenuCustomSlotExample.vue]
<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'

const items = [
  {
    label: 'Sales Pipeline',
    icon: ConnectionIcon
  },
  {
    label: 'Sales Analytics',
    badge: '+3'
  },
  {
    label: 'Resources'
  },
  {
    label: 'Support',
    icon: Info1Icon,
    slot: 'support' as const
  }
] satisfies NavigationMenuItem[]
</script>

<template>
  <B24NavigationMenu :items="items" class="w-full justify-center">
    <template #support-trailing>
      <B24Badge label="44" size="sm" />
    </template>
  </B24NavigationMenu>
</template>
```

> [!TIP](https://bitrix24.github.io/b24ui/#slots)
> You can also use the `#item`, `#item-leading`, `#item-label`, `#item-trailing` and `#item-content` slots to customize all items.

### With content slot

Use the `#item-content` slot or the `slot` property (`#{{ item.slot }}-content`) to customize the content of a specific item.

```vue [NavigationMenuContentSlotExample.vue]
<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
import ConnectionIcon from '@bitrix24/b24icons-vue/actions/ConnectionIcon'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/main/MicrophoneOnIcon'
import GitHubIcon from '@bitrix24/b24icons-vue/social/GitHubIcon'
import CrmMapIcon from '@bitrix24/b24icons-vue/crm/CrmMapIcon'
import Settings5Icon from '@bitrix24/b24icons-vue/editor/Settings5Icon'

const items = [
  {
    label: 'Sales Pipeline',
    icon: ConnectionIcon,
    slot: 'pipeline' as const,
    children: [
      {
        label: 'Lead Generation',
        description: 'Initial contact with potential clients'
      },
      {
        label: 'Lead Qualification',
        description: 'Client potential assessment'
      },
      {
        label: 'Negotiations',
        description: 'Deal terms discussion',
        icon: MicrophoneOnIcon
      }
    ]
  },
  {
    label: 'Sales Analytics',
    badge: '+3',
    children: [
      {
        label: 'Sales Reports',
        icon: CrmMapIcon,
        active: true,
        badge: 1
      },
      {
        label: 'Key Metrics',
        icon: Settings5Icon,
        badge: {
          label: 2,
          color: 'air-primary-copilot' as const
        }
      },
      {
        label: 'CRM Integration'
      }
    ]
  },
  {
    label: 'GitHub',
    icon: GitHubIcon,
    to: 'https://github.com/bitrix24/b24ui',
    target: '_blank'
  }
] satisfies NavigationMenuItem[]
</script>

<template>
  <B24NavigationMenu
    :items="items"
    :b24ui="{
      viewport: 'sm:w-(--reka-navigation-menu-viewport-width)',
      content: 'sm:w-auto',
      childList: 'sm:w-[380px]'
    }"
    class="w-full justify-center"
  >
    <template #pipeline-content="{ item }">
      <ul class="grid gap-2 p-4 lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
        <li class="row-span-3">
          <Placeholder class="size-full min-h-[203px]" />
        </li>

        <li v-for="child in item.children" :key="child.label">
          <B24Link class="group text-(length:--ui-font-size-sm) text-left rounded-(--ui-border-radius-md) p-3 transition-colors hover:no-underline hover:bg-(--ui-color-bg-content-secondary)">
            <p class="font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color) group-hover:text-(--ui-color-accent-main-primary-alt-2)">
              {{ child.label }}
            </p>
            <p class="text-(--b24ui-typography-description-color) line-clamp-2">
              {{ child.description }}
            </p>
          </B24Link>
        </li>
      </ul>
    </template>
  </B24NavigationMenu>
</template>
```

> !NOTE
> In this example, we add the `sm:w-(--reka-navigation-menu-viewport-width)` class on the `viewport` to have a dynamic width. This requires to set a width on the content's first child.

## API

### Props

```ts
/**
 * Props for the NavigationMenu component
 */
interface NavigationMenuProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * Determines whether a "single" or "multiple" items can be selected at a time.
   * 
   * Only works when `orientation` is `vertical`.
   * @default "\"multiple\" as never"
   */
  type?: SingleOrMultipleType | undefined;
  /**
   * The controlled value of the active item(s).
   * - In horizontal orientation: always `string`
   * - In vertical orientation with `type="single"`: `string`
   * - In vertical orientation with `type="multiple"`: `string[]`
   * 
   * Use this when you need to control the state of the items. Can be binded with `v-model`
   */
  modelValue?: string | string[] | undefined;
  /**
   * The default active value of the item(s).
   * - In horizontal orientation: always `string`
   * - In vertical orientation with `type="single"`: `string`
   * - In vertical orientation with `type="multiple"`: `string[]`
   * 
   * Use when you do not need to control the state of the item(s).
   */
  defaultValue?: string | string[] | undefined;
  /**
   * The icon displayed to open the menu.
   */
  trailingIcon?: IconComponent | undefined;
  /**
   * The icon displayed when the item is an external link.
   * Set to `false` to hide the external icon.
   * @default "true"
   */
  externalIcon?: boolean | IconComponent | undefined;
  items?: ArrayOrNested<NavigationMenuItem> | undefined;
  /**
   * The orientation of the menu.
   * @default "\"horizontal\" as never"
   */
  orientation?: Orientation | undefined;
  /**
   * Collapse the navigation menu to only show icons.
   * Only works when `orientation` is `vertical`.
   */
  collapsed?: boolean | undefined;
  /**
   * Display a tooltip on the items when the menu is collapsed with the label of the item.
   * `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts-type"}
   */
  tooltip?: boolean | TooltipProps | undefined;
  /**
   * Display a popover on the items when the menu is collapsed with the children list.
   * `{ mode: 'hover', content: { side: 'right', align: 'center', alignOffset: 2 } }`{lang="ts-type"}
   */
  popover?: boolean | PopoverProps<PopoverMode> | undefined;
  /**
   * The content of the menu.
   */
  content?: (Omit<NavigationMenuContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>) | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<ArrayOrNested<NavigationMenuItem>> | undefined;
  b24ui?: { root?: ClassNameValue; list?: ClassNameValue; label?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLeadingAvatar?: ClassNameValue; linkLeadingAvatarSize?: ClassNameValue; linkLeadingHint?: ClassNameValue; linkLeadingBadge?: ClassNameValue; linkLeadingBadgeSize?: ClassNameValue; linkTrailing?: ClassNameValue; linkTrailingIcon?: ClassNameValue; linkLabel?: ClassNameValue; linkLabelWrapper?: ClassNameValue; linkLabelExternalIcon?: ClassNameValue; childList?: ClassNameValue; childLabel?: ClassNameValue; childItem?: ClassNameValue; childLink?: ClassNameValue; childLinkWrapper?: ClassNameValue; childLinkIcon?: ClassNameValue; childLinkHint?: ClassNameValue; childLinkBadge?: ClassNameValue; childLinkBadgeSize?: ClassNameValue; childLinkLabel?: ClassNameValue; childLinkLabelExternalIcon?: ClassNameValue; separator?: ClassNameValue; popoverWrapper?: ClassNameValue; viewportWrapper?: ClassNameValue; viewport?: ClassNameValue; content?: ClassNameValue; } | undefined;
  /**
   * The duration from when the pointer enters the trigger until the tooltip gets opened.
   * @default "0"
   */
  delayDuration?: number | undefined;
  /**
   * If `true`, menu cannot be open by click on trigger
   */
  disableClickTrigger?: boolean | undefined;
  /**
   * If `true`, menu cannot be open by hover on trigger
   */
  disableHoverTrigger?: boolean | undefined;
  /**
   * How much time a user has to enter another trigger without incurring a delay again.
   */
  skipDelayDuration?: number | undefined;
  /**
   * If `true`, menu will not close during pointer leave event
   */
  disablePointerLeaveClose?: boolean | undefined;
  /**
   * When `true`, the element will be unmounted on closed state.
   * @default "true"
   */
  unmountOnHide?: boolean | undefined;
  /**
   * When `true`, prevents the user from interacting with the accordion and all its items
   */
  disabled?: boolean | undefined;
  /**
   * When type is "single", allows closing content when clicking trigger for an open item.
   * When type is "multiple", this prop has no effect.
   * @default "true"
   */
  collapsible?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the NavigationMenu component
 */
interface NavigationMenuSlots {
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-trailing(): any;
  item-content(): any;
  list-leading(): any;
  list-trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the NavigationMenu component
 */
interface NavigationMenuEmits {
  update:modelValue: (payload: [value: string | string[] | undefined]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    navigationMenu: {
      slots: {
        root: 'relative flex [&>div]:min-w-0 font-[family-name:var(--ui-font-family-secondary)]',
        list: 'isolate min-w-0',
        label: 'w-full h-[22px] overflow-hidden mt-[10px] opacity-70 text-(length:--ui-font-size-sm)',
        item: 'min-w-0',
        link: 'min-w-[38px] w-full max-w-full p-0 m-0 group relative cursor-pointer flex items-center gap-[2px] font-(--ui-font-weight-normal) text-(length:--ui-font-size-lg) focus:outline-none focus-visible:rounded-(--menu-item-border-radius) focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-(--ui-color-base-4) rounded-(--menu-item-border-radius) text-(--menu-item-color) bg-(--menu-item-background) hover:bg-(--menu-item-background-hover) data-[state=open]:bg-(--menu-item-background-hover) border-0',
        linkLeadingIcon: 'shrink-0 size-[26px]',
        linkLeadingAvatar: 'shrink-0',
        linkLeadingAvatarSize: 'xs',
        linkLeadingHint: 'inline-flex m-0 absolute -top-[5px] left-[8px] text-(length:--ui-font-size-4xs) leading-[8px] font-semibold text-(--b24ui-typography-description-color) uppercase ml-px',
        linkLeadingBadge: 'inline-flex m-0 absolute',
        linkLeadingBadgeSize: 'xs',
        linkTrailing: 'group inline-flex mt-[2px] items-center',
        linkTrailingIcon: 'text-(--ui-color-design-plain-na-content-icon) shrink-0',
        linkLabel: 'truncate',
        linkLabelWrapper: 'flex items-center justify-between rtl:flex-row-reverse',
        linkLabelExternalIcon: 'inline-block size-[16px] text-(--ui-color-design-plain-content-icon-secondary)',
        childList: 'isolate',
        childLabel: '',
        childItem: 'h-[36px] mt-(--menu-item-block-stack-space)',
        childLink: 'group relative size-full flex flex-row rtl:flex-row-reverse items-center transition-colors text-start',
        childLinkWrapper: 'min-w-0 flex-1 flex flex-row items-center justify-start rtl:justify-end gap-0.5',
        childLinkIcon: 'size-[18px] shrink-0',
        childLinkHint: 'inline-flex m-0 absolute -top-[2px] left-[24px] text-(length:--ui-font-size-4xs) leading-[8px] font-semibold text-(--b24ui-typography-description-color) uppercase ml-px',
        childLinkBadge: 'inline-flex m-0',
        childLinkBadgeSize: 'xs',
        childLinkLabel: 'truncate ms-[2px] -mt-px',
        childLinkLabelExternalIcon: 'inline-block size-4 text-(--ui-color-design-plain-content-icon-secondary)',
        separator: 'h-px bg-(--leftmenu-bg-divider) my-[16px]',
        popoverWrapper: 'px-0 py-(--menu-popup-padding)',
        viewportWrapper: 'absolute top-[53px] left-0 flex w-full',
        viewport: 'light relative overflow-hidden w-full bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) h-(--reka-navigation-menu-viewport-height) w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left) rounded-(--popup-window-border-radius) will-change-[opacity] [&:has(>[data-viewport=rtl])]:left-auto [&:has(>[data-viewport=rtl])]:-right-[calc(100%-var(--reka-navigation-menu-viewport-width))] transition-[width,height] duration-200 origin-[top_center] z-[1]',
        content: ''
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'relative h-full items-center justify-between',
            list: 'flex items-center gap-x-1 h-full',
            item: 'empty:hidden',
            link: 'menu-item-horizontal h-[32px] min-h-[32px] px-[10px] border border-(--menu-item-background) hover:border-(--ui-color-design-plain-na-focused-stroke) data-[state=open]:bg-(--ui-color-design-plain-na-focused-stroke)',
            linkTrailingIcon: 'size-[16px]',
            linkLeadingBadge: '-top-[6px] -right-[14px] -translate-x-1/2',
            linkLabelWrapper: 'gap-[4px] truncate',
            childList: 'grid px-0 py-(--menu-popup-padding)',
            childLink: 'px-[18px] min-w-[195px] whitespace-nowrap font-[family-name:var(--ui-font-family-primary)] text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover)',
            childLinkLabel: '',
            content: 'absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-transparent'
          },
          vertical: {
            root: 'flex-col w-full ps-(--menu-items-block-padding-x) rtl:pe-(--menu-items-block-padding-x)',
            list: 'flex flex-col',
            item: 'mt-(--menu-item-block-stack-space) data-[state=open]:rounded-(--menu-item-border-radius) data-[state=open]:border-(length:--leftmenu-group-stroke-weight) data-[state=open]:border-(--leftmenu-group-stroke)',
            link: 'menu-item-vertical overflow-hidden h-[38px] min-h-[38px] p-[6px] flex-row rtl:flex-row-reverse justify-between data-[state=open]:text-(length:--ui-font-size-sm) data-[state=open]:opacity-70',
            linkLeadingIcon: '',
            linkTrailingIcon: 'size-[20px] group-data-[state=open]:rotate-180 transition-transform duration-200',
            linkLeadingBadge: '-top-[4px] left-[24px] -translate-x-1/2',
            linkLabelWrapper: 'relative h-[22px]',
            childList: '',
            childLink: 'px-[18px] min-w-[195px] whitespace-nowrap font-[family-name:var(--ui-font-family-primary)] text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover)',
            childLabel: 'w-full min-w-[195px] h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)'
          }
        },
        active: {
          true: {
            childLink: 'text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary)',
            childLinkIcon: 'text-(--ui-color-accent-main-primary)'
          },
          false: {
            linkLeadingIcon: 'text-(--ui-color-design-plain-content-icon-secondary)',
            childLinkIcon: 'text-(--ui-color-design-plain-content-icon-secondary) group-hover:text-(--ui-color-accent-main-primary)'
          }
        },
        disabled: {
          true: {
            link: 'cursor-not-allowed opacity-75'
          }
        },
        level: {
          true: ''
        },
        collapsed: {
          true: ''
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          class: {
            childList: '',
            content: 'w-[240px]'
          }
        },
        {
          orientation: 'vertical',
          collapsed: false,
          class: {
            item: 'data-[state=open]:bg-(--leftmenu-group-bg)',
            childList: '',
            childItem: '',
            content: 'motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden',
            linkLabel: 'ms-[9px]'
          }
        },
        {
          orientation: 'vertical',
          collapsed: true,
          class: {
            childList: 'grid px-0 py-(--menu-popup-padding)',
            linkLabel: 'hidden',
            linkTrailing: 'hidden'
          }
        },
        {
          orientation: 'vertical',
          collapsed: false,
          class: {
            link: 'collapsed data-[state=open]:-mt-(--leftmenu-group-stroke-weight) data-[state=open]:-mx-(--leftmenu-group-stroke-weight)'
          }
        },
        {
          disabled: false,
          active: false,
          class: {
            link: 'transition-colors',
            linkLeadingIcon: 'group-hover:text-(--ui-color-design-selection-content-icon)'
          }
        },
        {
          active: true,
          class: {
            link: 'leading-9 text-(--menu-item-color-active) bg-(--menu-item-background-active)'
          }
        },
        {
          active: true,
          orientation: 'horizontal',
          class: {
            link: 'menu-item-horizontal-active border-(--menu-item-border)'
          }
        },
        {
          active: true,
          orientation: 'vertical',
          class: {
            link: 'menu-item-vertical-active'
          }
        }
      ],
      defaultVariants: {}
    }
  }
})
```

---

# PageCard

> A pre-styled card component featuring a title, description, and optional link.

## Usage

The PageCard component provides a flexible way to display content in a card with an illustration in the default slot.

```vue [PageCardExample.vue]
<script setup lang="ts">
import CopilotIcon from '@bitrix24/b24icons-vue/outline/CopilotIcon'
</script>

<template>
  <B24PageCard
    class="w-96"
    title="Online workspace for the whole team"
    description="Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go."
    :icon="CopilotIcon"
  >
    <img
      src="/b24ui/assets/demo/communications-main.png.webp"
      alt="Online workspace for the whole team"
      class="w-full"
    >
  </B24PageCard>
</template>
```

> !TIP
> Use the [PageGrid](https://bitrix24.github.io/b24ui/raw/docs/components/page-grid.md), [PageColumns](https://bitrix24.github.io/b24ui/raw/docs/components/page-columns.md) or [PageList](https://bitrix24.github.io/b24ui/raw/docs/components/page-list.md) components to display multiple PageCard.

### Title

Use the `title` prop to set the title of the card.

```vue

<template>
  <B24PageCard title="Online workspace for the whole team" />
</template>

```

### Description

Use the `description` prop to set the description of the card.

```vue

<template>
  <B24PageCard title="Online workspace for the whole team" description="Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go." />
</template>

```

### Icon

Use the `icon` prop to set the [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} of the card.

```vue

<template>
  <B24PageCard title="Online workspace for the whole team" description="Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go." />
</template>

```

### Link

You can pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} component such as `to`, `target`, `rel`, etc.

```vue

<template>
  <B24PageCard title="Online workspace for the whole team" description="Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go." to="https://www.bitrix24.com/tools/communications/" target="_blank" />
</template>

```

### Variant

Use the `variant` prop to change the style of the card.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard title="Online workspace for the whole team" description="Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go." :icon="RocketIcon" to="https://www.bitrix24.com/tools/communications/" target="_blank" variant="outline-no-accent" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation with the default slot. Defaults to `vertical`.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard title="Online workspace for the whole team" description="Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go." :icon="RocketIcon" orientation="horizontal">
<img src="/b24ui/assets/demo/communications-main.png.webp" alt="Online workspace for the whole team" class="aspect-3/2 object-cover" />
</B24PageCard>
</template>

```

### Reverse

Use the `reverse` prop to reverse the orientation of the default slot.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard title="Online workspace for the whole team" description="Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go." :icon="RocketIcon" orientation="horizontal" reverse>
<img src="/b24ui/assets/demo/communications-main.png.webp" alt="Online workspace for the whole team" class="aspect-3/2 object-cover" />
</B24PageCard>
</template>

```

### Highlight

Use the `highlight` and `highlight-color` props to display a highlighted border around the card.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24PageCard title="Online workspace for the whole team" description="Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go." :icon="RocketIcon" orientation="horizontal" highlight highlight-color="air-primary">
<img src="/b24ui/assets/demo/communications-main.png.webp" alt="Online workspace for the whole team" class="aspect-3/2 object-cover" />
</B24PageCard>
</template>

```

## Examples

### As a testimonial

Use the [User](https://bitrix24.github.io/b24ui/raw/docs/components/user.md) component in the `header` or `footer` slot to make the card look like a testimonial.

```vue [PageCardTestimonialExample.vue]
<script setup lang="ts">
const testimonial = ref({
  user: {
    name: 'Evan You',
    description: 'Author of Vue.js and Vite',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/499550?v=4',
      alt: 'Evan You'
    }
  },
  quote: '“Nuxt on Cloudflare infra with minimal effort - this is huge!”'
})
</script>

<template>
  <B24PageCard :description="testimonial.quote" class="w-60">
    <template #footer>
      <B24User v-bind="testimonial.user" />
    </template>
  </B24PageCard>
</template>
```

> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/components/page-columns.md)
> You can use the [`PageColumns`](https://bitrix24.github.io/b24ui/raw/docs/components/page-columns.md) component to display multiple PageCard in a multi-column layout.

## API

### Props

```ts
/**
 * Props for the PageCard component
 */
interface PageCardProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The icon displayed above the title.
   */
  icon?: IconComponent | undefined;
  title?: string | undefined;
  description?: string | undefined;
  /**
   * The orientation of the page card.
   * @default "\"vertical\""
   */
  orientation?: "vertical" | "horizontal" | undefined;
  /**
   * Reverse the order of the default slot.
   */
  reverse?: boolean | undefined;
  /**
   * Display a line around the page card.
   */
  highlight?: boolean | undefined;
  highlightColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-primary-warning" | undefined;
  variant?: "filled" | "filled-success" | "filled-alert" | "filled-warning" | "filled-copilot" | "filled-no-accent" | "filled-black" | "tinted" | "tinted-alt" | "tinted-accent-1" | "tinted-success" | "tinted-alert" | "tinted-warning" | "tinted-no-accent" | "outline" | "outline-alt" | "outline-accent" | "outline-accent-2" | "outline-success" | "outline-alert" | "outline-warning" | "outline-copilot" | "outline-no-accent" | "plain" | "plain-accent" | "plain-no-accent" | "selection" | undefined;
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  target?: "_blank" | "_parent" | "_self" | "_top" | (string & {}) | null | undefined;
  onClick?: ((event: MouseEvent) => void | Promise<void>) | undefined;
  b24ui?: { root?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the PageCard component
 */
interface PageCardSlots {
  header(): any;
  body(): any;
  leading(): any;
  title(): any;
  description(): any;
  footer(): any;
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    pageCard: {
      slots: {
        root: 'relative flex rounded-lg',
        container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
        wrapper: 'flex flex-col flex-1 items-start',
        header: 'mb-4',
        body: 'flex-1',
        footer: 'pt-4 mt-auto',
        leading: 'inline-flex items-center mb-2.5',
        leadingIcon: 'size-5 shrink-0',
        title: 'text-2xl text-pretty font-(--ui-font-weight-semi-bold)',
        description: 'text-lg text-pretty'
      },
      variants: {
        orientation: {
          horizontal: {
            container: 'lg:grid-cols-2 lg:items-center'
          },
          vertical: {
            container: ''
          }
        },
        reverse: {
          true: {
            wrapper: 'lg:order-last'
          }
        },
        variant: {
          filled: {
            root: 'bg-(--ui-color-design-filled-bg) border border-(--ui-color-design-filled-stroke) border-(length:--ui-design-filled-stroke-weight) text-(--ui-color-design-filled-content)',
            leadingIcon: 'text-(--ui-color-design-filled-content-icon)',
            title: 'text-(--ui-color-design-filled-content)',
            description: 'text-(--ui-color-design-filled-content-secondary)'
          },
          'filled-success': {
            root: 'bg-(--ui-color-design-filled-success-bg) border border-(--ui-color-design-filled-success-stroke) border-(length:--ui-design-filled-success-stroke-weight) text-(--ui-color-design-filled-success-content)',
            leadingIcon: 'text-(--ui-color-design-filled-success-content-icon)',
            title: 'text-(--ui-color-design-filled-success-content)',
            description: 'text-(--ui-color-design-filled-success-content)'
          },
          'filled-alert': {
            root: 'bg-(--ui-color-design-filled-alert-bg) border border-(--ui-color-design-filled-alert-stroke) border-(length:--ui-design-filled-alert-stroke-weight) text-(--ui-color-design-filled-alert-content)',
            leadingIcon: 'text-(--ui-color-design-filled-alert-content-icon)',
            title: 'text-(--ui-color-design-filled-alert-content)',
            description: 'text-(--ui-color-design-filled-alert-content-secondary)'
          },
          'filled-warning': {
            root: 'bg-(--ui-color-design-filled-warning-bg) border border-(--ui-color-design-filled-warning-stroke) border-(length:--ui-design-filled-warning-stroke-weight) text-(--ui-color-design-filled-warning-content)',
            leadingIcon: 'text-(--ui-color-design-filled-warning-content-icon)',
            title: 'text-(--ui-color-design-filled-warning-content)',
            description: 'text-(--ui-color-design-filled-warning-content)'
          },
          'filled-copilot': {
            root: 'bg-(--ui-color-design-filled-copilot-bg) border border-(--ui-color-design-filled-copilot-stroke) border-(length:--ui-design-filled-copilot-stroke-weight) text-(--ui-color-design-filled-copilot-content)',
            leadingIcon: 'text-(--ui-color-design-filled-copilot-content-icon)',
            title: 'text-(--ui-color-design-filled-copilot-content)',
            description: 'text-(--ui-color-design-filled-copilot-content)'
          },
          'filled-no-accent': {
            root: 'bg-(--ui-color-design-filled-na-bg) border border-(--ui-color-design-filled-na-stroke) border-(length:--ui-design-filled-na-stroke-weight) text-(--ui-color-design-filled-na-content)',
            leadingIcon: 'text-(--ui-color-design-filled-na-content-icon)',
            title: 'text-(--ui-color-design-filled-na-content)',
            description: 'text-(--ui-color-design-filled-na-content)'
          },
          'filled-black': {
            root: 'bg-(--ui-color-design-filled-black-bg) border border-(--ui-color-design-filled-black-stroke) border-(length:--ui-design-filled-black-stroke-weight) text-(--ui-color-design-filled-black-content)',
            leadingIcon: 'text-(--ui-color-design-filled-black-content-icon)',
            title: 'text-(--ui-color-design-filled-black-content)',
            description: 'text-(--ui-color-design-filled-black-content)'
          },
          tinted: {
            root: 'bg-(--ui-color-design-tinted-bg) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-content-icon)',
            title: 'text-(--ui-color-design-tinted-content)',
            description: 'text-(--ui-color-design-tinted-content)'
          },
          'tinted-alt': {
            root: 'bg-(--ui-color-design-tinted-bg-alt) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-content-icon)',
            title: 'text-(--ui-color-design-tinted-content)',
            description: 'text-(--ui-color-design-tinted-content)'
          },
          'tinted-accent-1': {
            root: 'bg-(--ui-color-design-tinted-a1-bg) border border-(--ui-color-design-tinted-a1-stroke) border-(length:--ui-design-tinted-a1-stroke-weight) text-(--ui-color-design-tinted-a1-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-a1-content-icon)',
            title: 'text-(--ui-color-design-tinted-a1-content)',
            description: 'text-(--ui-color-design-tinted-a1-content)'
          },
          'tinted-success': {
            root: 'bg-(--ui-color-design-tinted-success-bg) border border-(--ui-color-design-tinted-success-stroke) border-(length:--ui-design-tinted-success-stroke-weight) text-(--ui-color-design-tinted-success-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-success-content-icon)',
            title: 'text-(--ui-color-design-tinted-success-content)',
            description: 'text-(--ui-color-design-tinted-success-content)'
          },
          'tinted-alert': {
            root: 'bg-(--ui-color-design-tinted-alert-bg) border border-(--ui-color-design-tinted-alert-stroke) border-(length:--ui-design-tinted-alert-stroke-weight) text-(--ui-color-design-tinted-alert-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-alert-content-icon)',
            title: 'text-(--ui-color-design-tinted-alert-content)',
            description: 'text-(--ui-color-design-tinted-alert-content)'
          },
          'tinted-warning': {
            root: 'bg-(--ui-color-design-tinted-warning-bg) border border-(--ui-color-design-tinted-warning-stroke) border-(length:--ui-design-tinted-warning-stroke-weight) text-(--ui-color-design-tinted-warning-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-warning-content-icon)',
            title: 'text-(--ui-color-design-tinted-warning-content)',
            description: 'text-(--ui-color-design-tinted-warning-content)'
          },
          'tinted-no-accent': {
            root: 'bg-(--ui-color-design-tinted-na-bg) border border-(--ui-color-design-tinted-na-stroke) border-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)',
            leadingIcon: 'text-(--ui-color-design-tinted-na-content-icon)',
            title: 'text-(--ui-color-design-tinted-na-content)',
            description: 'text-(--ui-color-design-tinted-na-content)'
          },
          outline: {
            root: 'bg-(--ui-color-design-outline-bg) border border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)',
            leadingIcon: 'text-(--ui-color-design-outline-content-icon)',
            title: 'text-(--ui-color-design-outline-content)',
            description: 'text-(--ui-color-design-outline-content-secondary)'
          },
          'outline-alt': {
            root: 'bg-(--ui-color-design-outline-bg-alt) border border-(--ui-color-design-outline-content-divider) border-(length:--ui-design-outline-stroke-weight-alt) text-(--ui-color-design-outline-content)',
            leadingIcon: 'text-(--ui-color-design-outline-content-icon)',
            title: 'text-(--ui-color-design-outline-content)',
            description: 'text-(--ui-color-design-outline-content-secondary)'
          },
          'outline-accent': {
            root: 'bg-(--ui-color-design-outline-a1-bg) border border-(--ui-color-design-outline-a1-stroke) border-(length:--ui-design-outline-a1-stroke-weight) text-(--ui-color-design-outline-a1-content)',
            leadingIcon: 'text-(--ui-color-design-outline-a1-content-icon)',
            title: 'text-(--ui-color-design-outline-a1-content)',
            description: 'text-(--ui-color-design-outline-a1-content)'
          },
          'outline-accent-2': {
            root: 'bg-(--ui-color-design-outline-a2-bg) border border-(--ui-color-design-outline-a2-stroke) border-(length:--ui-design-outline-a2-stroke-weight) text-(--ui-color-design-outline-a2-content)',
            leadingIcon: 'text-(--ui-color-design-outline-a2-content-icon)',
            title: 'text-(--ui-color-design-outline-a2-content)',
            description: 'text-(--ui-color-design-outline-a2-content)'
          },
          'outline-success': {
            root: 'bg-(--ui-color-design-outline-success-bg) border border-(--ui-color-design-outline-success-stroke) border-(length:--ui-design-outline-success-stroke-weight) text-(--ui-color-design-outline-success-content)',
            leadingIcon: 'text-(--ui-color-design-outline-success-content-icon)',
            title: 'text-(--ui-color-design-outline-success-content)',
            description: 'text-(--ui-color-design-outline-success-content)'
          },
          'outline-alert': {
            root: 'bg-(--ui-color-design-outline-alert-bg) border border-(--ui-color-design-outline-alert-stroke) border-(length:--ui-design-outline-alert-stroke-weight) text-(--ui-color-design-outline-alert-content)',
            leadingIcon: 'text-(--ui-color-design-outline-alert-content-icon)',
            title: 'text-(--ui-color-design-outline-alert-content)',
            description: 'text-(--ui-color-design-outline-alert-content)'
          },
          'outline-warning': {
            root: 'bg-(--ui-color-design-outline-warning-bg) border border-(--ui-color-design-outline-warning-stroke) border-(length:--ui-design-outline-warning-stroke-weight) text-(--ui-color-design-outline-warning-content)',
            leadingIcon: 'text-(--ui-color-design-outline-warning-content-icon)',
            title: 'text-(--ui-color-design-outline-warning-content)',
            description: 'text-(--ui-color-design-outline-warning-content)'
          },
          'outline-copilot': {
            root: 'bg-(--ui-color-design-outline-copilot-bg) border border-(--ui-color-design-outline-copilot-stroke) border-(length:--ui-design-outline-copilot-stroke-weight) text-(--ui-color-design-outline-copilot-content)',
            leadingIcon: 'text-(--ui-color-design-outline-copilot-content-icon)',
            title: 'text-(--ui-color-design-outline-copilot-content)',
            description: 'text-(--ui-color-design-outline-copilot-content)'
          },
          'outline-no-accent': {
            root: 'bg-(--ui-color-design-outline-na-bg) border border-(--ui-color-design-outline-na-stroke) border-(length:--ui-design-outline-na-stroke-weight) text-(--ui-color-design-outline-na-content)',
            leadingIcon: 'text-(--ui-color-design-outline-na-content-icon)',
            title: 'text-(--ui-color-design-outline-na-content)',
            description: 'text-(--ui-color-design-outline-na-content)'
          },
          plain: {
            root: 'bg-(--ui-color-design-plain-bg) border border-(--ui-color-design-plain-stroke) border-(length:--ui-design-plain-stroke-weight) text-(--ui-color-design-plain-content)',
            leadingIcon: 'text-(--ui-color-design-plain-content-icon)',
            title: 'text-(--ui-color-design-plain-content)',
            description: 'text-(--ui-color-design-plain-content)'
          },
          'plain-accent': {
            root: 'bg-(--ui-color-design-plain-a-bg) border border-(--ui-color-design-plain-a-stroke) border-(length:--ui-design-plain-a-stroke-weight) text-(--ui-color-design-plain-a-content)',
            leadingIcon: 'text-(--ui-color-design-plain-a-content-icon)',
            title: 'text-(--ui-color-design-plain-a-content)',
            description: 'text-(--ui-color-design-plain-a-content)'
          },
          'plain-no-accent': {
            root: 'bg-(--ui-color-design-plain-na-bg) border border-(--ui-color-design-plain-na-stroke) border-(length:--ui-design-plain-na-stroke-weight) text-(--ui-color-design-plain-na-content)',
            leadingIcon: 'text-(--ui-color-design-plain-na-content-icon)',
            title: 'text-(--ui-color-design-plain-na-content)',
            description: 'text-(--ui-color-design-plain-na-content)'
          },
          selection: {
            root: 'bg-(--ui-color-design-selection-bg) border border-(--ui-color-design-selection-stroke) border-(length:--ui-design-selection-stroke-weight) text-(--ui-color-design-selection-content)',
            leadingIcon: 'text-(--ui-color-design-selection-content-icon)',
            title: 'text-(--ui-color-design-selection-content)',
            description: 'text-(--ui-color-design-selection-content)'
          }
        },
        to: {
          true: {
            root: 'transition'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        },
        highlight: {
          true: {
            root: 'ring-2'
          }
        },
        highlightColor: {
          'air-primary': '',
          'air-primary-success': '',
          'air-primary-alert': '',
          'air-primary-copilot': '',
          'air-primary-warning': ''
        }
      },
      compoundVariants: [
        {
          variant: 'filled',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-success',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-alert',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-warning',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-copilot',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-copilot-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-no-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'filled-black',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-filled-black-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-alt',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-bg-alt)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-accent-1',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-a1-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-success',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-alert',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-warning',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'tinted-no-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-tinted-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-alt',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-bg-alt)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-a1-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-accent-2',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-a2-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-success',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-success-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-alert',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-alert-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-warning',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-warning-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-copilot',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-copilot-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'outline-no-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-outline-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'plain',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'plain-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-a-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'plain-no-accent',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-plain-na-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          variant: 'selection',
          to: true,
          class: {
            root: 'hover:bg-[color-mix(in_srgb,_var(--ui-color-design-selection-bg)_100%,_var(--ui-color-bg-state-hover-default-hex)_var(--ui-color-bg-state-hover-default-opacity))]'
          }
        },
        {
          highlightColor: 'air-primary',
          highlight: true,
          class: {
            root: 'ring-(--ui-color-design-filled-stroke)'
          }
        },
        {
          highlightColor: 'air-primary-success',
          highlight: true,
          class: {
            root: 'ring-(--ui-color-design-filled-success-stroke)'
          }
        },
        {
          highlightColor: 'air-primary-alert',
          highlight: true,
          class: {
            root: 'ring-(--ui-color-design-filled-alert-stroke)'
          }
        },
        {
          highlightColor: 'air-primary-copilot',
          highlight: true,
          class: {
            root: 'ring-(--ui-color-design-filled-copilot-stroke)'
          }
        },
        {
          highlightColor: 'air-primary-warning',
          highlight: true,
          class: {
            root: 'ring-(--ui-color-design-filled-warning-stroke)'
          }
        },
        {
          to: true,
          class: {
            root: 'has-focus-visible:ring-2 has-focus-visible:ring-(--ui-color-design-filled-stroke)'
          }
        }
      ],
      defaultVariants: {
        variant: 'outline',
        highlightColor: 'air-primary'
      }
    }
  }
})
```

---

# PageColumns

> A responsive multi-column layout system for organizing content side-by-side.

## Usage

The PageColumns component displays content in a responsive multi-column layout. It works well with [PageCard](https://bitrix24.github.io/b24ui/raw/docs/components/page-card.md) components or any other elements, adapting from single column on mobile to multiple columns on larger screens.

```vue [PageColumnsExample.vue]
<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'

const testimonials = ref([
  {
    user: {
      name: 'Employee Name',
      description: 'Clients Relations Manager',
      avatar: {
        src: '/b24ui/avatar/employee.png',
        alt: 'employee'
      }
    },
    quote: 'Bitrix24 has given us a crystal-clear overview of all our ongoing projects. The combination of task deadlines, time tracking, and visual workflow management in Kanban boards ensures that nothing falls through the cracks, significantly improving our on-time delivery and team accountability.'
  },
  {
    user: {
      name: 'Assistant Name',
      description: 'CEO',
      avatar: {
        src: '/b24ui/avatar/assistant.png',
        alt: 'Assistant Name'
      }
    },
    quote: 'The CRM and marketing automation tools in Bitrix24 have revolutionized our sales process. We can now track every customer interaction, automate follow-up emails, and segment our leads effectively, which has directly led to a higher conversion rate and more closed deals.'
  },
  {
    user: {
      name: '员工姓名',
      description: '客户关系经理',
      avatar: {
        src: '/b24ui/avatar/employee.png',
        alt: '员工姓名'
      }
    },
    quote: 'Bitrix24 帮助我们整个团队在一个功能丰富的统一平台上进行协作，彻底结束了之前需要在多个独立软件之间频繁切换的麻烦。这大大节省了我们的时间，并简化了工作流程。'
  },
  {
    user: {
      name: '助理姓名',
      description: '首席执行官',
      avatar: {
        src: '/b24ui/avatar/assistant.png',
        alt: '助理姓名'
      }
    },
    quote: '借助Bitrix24强大的任务管理、分析和信息共享工具，我们为内部流程的沟通和审批创建了自动化工作流。这极大地减少了手动操作和等待时间，从而显著提升了整体工作效率。'
  }
])
</script>

<template>
  <B24PageColumns>
    <B24PageCard
      variant="filled"
      to="https://www.bitrix24.com/tools/"
      :icon="Bitrix24Icon"
      title="Bitrix24 - Free online workspace for your business: CRM, tasks, online meetings, and more."
      description="An all-in-one free platform to manage your team and run your sales, Bitrix24 is designed to be seamlessly integrated into all your business processes and help you manage them with the highest precision and efficiency."
      :b24ui="{ leadingIcon: 'size-10' }"
    />

    <B24PageCard
      v-for="(testimonial, index) in testimonials"
      :key="index"
      variant="outline-no-accent"
      :description="testimonial.quote"
      :b24ui="{ description: 'before:content-[open-quote] after:content-[close-quote]' }"
    >
      <template #footer>
        <B24User v-bind="testimonial.user" size="xl" />
      </template>
    </B24PageCard>
  </B24PageColumns>
</template>
```

## API

### Props

```ts
/**
 * Props for the PageColumns component
 */
interface PageColumnsProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
}
```

### Slots

```ts
/**
 * Slots for the PageColumns component
 */
interface PageColumnsSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    pageColumns: {
      base: 'relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform'
    }
  }
})
```

---

# PageGrid

> A responsive grid system for creating flexible content layouts.

## Usage

The PageGrid component provides a responsive grid layout for displaying [PageCard](https://bitrix24.github.io/b24ui/raw/docs/components/page-card.md) components or any other elements, automatically adjusting from 1 to 3 columns based on screen size.

```vue [PageGridExample.vue]
<script setup lang="ts">
import CopilotIcon from '@bitrix24/b24icons-vue/outline/CopilotIcon'
import CrmLettersIcon from '@bitrix24/b24icons-vue/outline/CrmLettersIcon'
import TaskIcon from '@bitrix24/b24icons-vue/outline/TaskIcon'

const cards = ref([
  {
    title: 'Online workspace for the whole team',
    description: 'Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go.',
    icon: CopilotIcon,
    to: 'https://www.bitrix24.com/tools/communications/'
  },
  {
    title: 'Free CRM software for your business',
    description: 'Sell more. Sell better. Sell faster with Bitrix24 a single platform to cover all your needs.',
    icon: CrmLettersIcon,
    to: 'https://www.bitrix24.com/tools/crm/'
  },
  {
    title: 'Free task management software for your business',
    description: 'Set tasks, manage deadlines, collect reports, track KPIs, and run projects from wherever you are.',
    icon: TaskIcon,
    to: 'https://www.bitrix24.com/tools/tasks_and_projects/'
  }
])
</script>

<template>
  <B24PageGrid>
    <B24PageCard
      v-for="(card, index) in cards"
      :key="index"
      v-bind="card"
    />
  </B24PageGrid>
</template>
```

You can also use it to display a list of cards in a bento style layout by using `col-span-*` and `row-span-*` utility classes.

```vue [PageGridBentoExample.vue]
<script setup lang="ts">
import CopilotIcon from '@bitrix24/b24icons-vue/outline/CopilotIcon'
import CrmLettersIcon from '@bitrix24/b24icons-vue/outline/CrmLettersIcon'
import TaskIcon from '@bitrix24/b24icons-vue/outline/TaskIcon'
import HrAutomationIcon from '@bitrix24/b24icons-vue/main/HrAutomationIcon'

const cards = ref([
  {
    title: 'Online workspace for the whole team',
    description: 'Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go.',
    icon: CopilotIcon,
    to: 'https://www.bitrix24.com/tools/communications/',
    class: 'lg:col-span-2',
    image: {
      path: '/b24ui/assets/demo/communications-main.png.webp',
      width: 363,
      height: 152
    },
    orientation: 'horizontal' as const,
    variant: 'filled' as const
  },
  {
    title: 'Free CRM software for your business',
    description: 'Sell more. Sell better. Sell faster with Bitrix24 a single platform to cover all your needs.',
    icon: CrmLettersIcon,
    to: 'https://www.bitrix24.com/tools/crm/',
    variant: 'tinted-no-accent' as const
  },
  {
    title: 'Free task management software for your business',
    description: 'Set tasks, manage deadlines, collect reports, track KPIs, and run projects from wherever you are.',
    icon: TaskIcon,
    to: 'https://www.bitrix24.com/tools/tasks_and_projects/',
    variant: 'tinted-no-accent' as const
  },
  {
    title: 'HR management & workflow automation',
    description: 'Streamline workflows, automate your business processes, and manage employee data like a boss.',
    icon: HrAutomationIcon,
    to: 'https://www.bitrix24.com/tools/hr_automation/',
    image: {
      path: '/b24ui/assets/demo/hr_automation-main.png.webp',
      width: 362,
      height: 184
    },
    class: 'lg:col-span-2',
    orientation: 'horizontal' as const,
    variant: 'tinted' as const,
    reverse: true
  }
])
</script>

<template>
  <B24PageGrid>
    <B24PageCard
      v-for="(card, index) in cards"
      :key="index"
      v-bind="card"
    >
      <img
        v-if="card.image"
        :src="card.image.path"
        :width="card.image.width"
        :height="card.image.height"
        :alt="card.title"
        class="w-full"
      >
    </B24PageCard>
  </B24PageGrid>
</template>
```

## API

### Props

```ts
/**
 * Props for the PageGrid component
 */
interface PageGridProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
}
```

### Slots

```ts
/**
 * Slots for the PageGrid component
 */
interface PageGridSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    pageGrid: {
      base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
    }
  }
})
```

---

# PageLinks

> A list of links to display on the page.

## Usage

### Links

Use the `links` prop as an array of objects with the following properties:

- `label: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

You can pass any property from the [Link](https://bitrix24.github.io/b24ui/raw/docs/components/link.md#props) component such as `to`, `target`, etc.

```vue

<script setup lang="ts">
import type { PageLink } from '@bitrix24/b24ui-nuxt'

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    to: 'https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/page-links.md'
  },
  {
    label: 'Star on GitHub',
    to: 'https://github.com/bitrix24/b24ui'
  },
  {
    label: 'Releases',
    to: 'https://github.com/bitrix24/b24ui/releases'
  }
])
</script>

<template>
  <B24PageLinks :links="links" />
</template>

```

### Title

Use the `title` prop to display a title above the links.

```vue

<script setup lang="ts">
import type { PageLink } from '@bitrix24/b24ui-nuxt'

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    to: 'https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/page-links.md'
  },
  {
    label: 'Star on GitHub',
    to: 'https://github.com/bitrix24/b24ui'
  },
  {
    label: 'Releases',
    to: 'https://github.com/bitrix24/b24ui/releases'
  }
])
</script>

<template>
  <B24PageLinks title="Community" :links="links" />
</template>

```

## Examples

> !NOTE
> While these examples use [Nuxt Content](https://content.nuxt.com){rel="nofollow"}, the components can be integrated with any content management system.

### Within a page

Use the PageLinks component in the `bottom` slot of the ContentToc component to display a list of links below the table of contents.

```vue [pages/[...slug\\].vue] {50-54}
<script setup lang="ts">
import type { PageLink } from '@bitrix24/b24ui-nuxt'
import DocumentSignIcon from '@bitrix24/b24icons-vue/main/DocumentSignIcon'
import AiStarsIcon from '@bitrix24/b24icons-vue/outline/AiStarsIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const route = useRoute()

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})

const links = computed<PageLink[]>(() => [{
  label: 'Edit this page',
  icon: DocumentSignIcon,
  to: `https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/${page?.value?.stem}.md`,
  target: '_blank'
}, {
  label: 'Star on GitHub',
  icon: AiStarsIcon,
  to: 'https://github.com/bitrix24/b24ui',
  target: '_blank'
}, {
  label: 'Releases',
  icon: RocketIcon,
  to: 'https://github.com/bitrix24/b24ui/releases'
}])
</script>

<template>
  <div>
    <div>
      <ContentRenderer :value="page" />

      <B24Separator />

      <B24ContentSurround :surround="surround" />
    </div>

    <div>
      <B24ContentToc :links="page.body.toc.links">
        <template #bottom>
          <B24Separator type="dashed" />

          <B24PageLinks title="Community" :links="links" />
        </template>
      </B24ContentToc>
    </div>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the PageLinks component
 */
interface PageLinksProps {
  /**
   * The element or component this component should render as.
   * @default "\"nav\""
   */
  as?: any;
  title?: string | undefined;
  links?: PageLink[] | undefined;
  b24ui?: { root?: ClassNameValue; title?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkWrapper?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLabel?: ClassNameValue; linkLabelExternalIcon?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the PageLinks component
 */
interface PageLinksSlots {
  title(): any;
  link(): any;
  link-leading(): any;
  link-label(): any;
  link-trailing(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    pageLinks: {
      slots: {
        root: 'flex flex-col gap-[12px]',
        title: 'text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-md) leading-(--ui-font-line-height-md) font-(--ui-font-weight-semi-bold) flex items-center gap-[6px]',
        list: 'flex flex-col gap-[8px]',
        item: 'relative',
        link: 'group text-(length:--ui-font-size-sm) cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline flex flex-row items-center justify-between',
        linkWrapper: 'flex items-center gap-[6px]',
        linkLeadingIcon: 'size-5 shrink-0',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'size-4 text-(--ui-color-design-selection-content) group-hover:text-(--ui-color-accent-main-primary-alt-2)'
      },
      variants: {
        active: {
          true: {
            link: 'text-(--ui-color-accent-main-primary-alt-2)',
            linkLabelExternalIcon: 'text-(--ui-color-accent-main-primary-alt-2)'
          },
          false: {
            link: [
              'text-(--ui-color-design-selection-content) hover:text-(--ui-color-accent-main-primary-alt-2)'
            ]
          }
        }
      }
    }
  }
})
```

---

# PageList

> A vertical list layout for stacking content items.

## Usage

The PageList component provides a flexible way to display content in a vertical list layout. It's perfect for creating stacked lists of [PageCard](https://bitrix24.github.io/b24ui/raw/docs/components/page-card.md) components or any other elements, with optional dividers between items.

```vue [PageListExample.vue]
<script setup lang="ts">
const users = ref([
  {
    name: 'Bitrix24',
    description: 'bitrix24',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix24.png',
      alt: 'bitrix24'
    }
  },
  {
    name: 'Bitrix Tools',
    description: 'bitrix-tools',
    to: 'https://github.com/bitrix-tools',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix-tools.png',
      alt: 'bitrix-tools'
    }
  },

  {
    name: 'Bitrix24',
    description: 'bitrix24',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix24.png',
      alt: 'bitrix24'
    }
  },
  {
    name: 'Bitrix Tools',
    description: 'bitrix-tools',
    to: 'https://github.com/bitrix-tools',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix-tools.png',
      alt: 'bitrix-tools'
    }
  }
])
</script>

<template>
  <B24PageList>
    <B24PageCard
      v-for="(user, index) in users"
      :key="index"
      variant="plain"
      :to="user.to"
      :target="user.target"
    >
      <template #body>
        <B24User :name="user.name" :description="user.description" :avatar="user.avatar" size="xl" class="relative" />
      </template>
    </B24PageCard>
  </B24PageList>
</template>
```

### Divide

Use the `divide` prop to add a divider between each child element.

```vue [PageListDivideExample.vue]
<script setup lang="ts">
const users = ref([
  {
    name: 'Bitrix24',
    description: 'bitrix24',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix24.png',
      alt: 'bitrix24'
    }
  },
  {
    name: 'Bitrix Tools',
    description: 'bitrix-tools',
    to: 'https://github.com/bitrix-tools',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix-tools.png',
      alt: 'bitrix-tools'
    }
  },
  {
    name: 'Bitrix24',
    description: 'bitrix24',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix24.png',
      alt: 'bitrix24'
    }
  },
  {
    name: 'Bitrix Tools',
    description: 'bitrix-tools',
    to: 'https://github.com/bitrix-tools',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix-tools.png',
      alt: 'bitrix-tools'
    }
  }
])
</script>

<template>
  <B24PageList divide>
    <B24PageCard
      v-for="(user, index) in users"
      :key="index"
      variant="plain"
      :to="user.to"
      :target="user.target"
    >
      <template #body>
        <B24User :name="user.name" :description="user.description" :avatar="user.avatar" size="xl" />
      </template>
    </B24PageCard>
  </B24PageList>
</template>
```

## API

### Props

```ts
/**
 * Props for the PageList component
 */
interface PageListProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * @default "false"
   */
  divide?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the PageList component
 */
interface PageListSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    pageList: {
      base: 'relative flex flex-col',
      variants: {
        divide: {
          true: '*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-(--ui-color-divider-vibrant-default) *:not-last:after:h-px'
        }
      }
    }
  }
})
```

---

# Pagination

> A navigation component with buttons or links for pagination.

## Usage

Use the `default-page` prop or the `v-model:page` directive to control the current page.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" :total="100" />
</template>

```

> !NOTE
> The Pagination component uses some [`Button`](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) to display the pages, use [`color`](https://bitrix24.github.io/b24ui/#color) and [`size`](https://bitrix24.github.io/b24ui/#size) props to style them.

### Total

Use the `total` prop to set the total number of items in the list.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" :total="100" />
</template>

```

### Items Per Page

Use the `items-per-page` prop to set the number of items per page. Defaults to `10`.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" :items-per-page="20" :total="100" />
</template>

```

### Sibling Count

Use the `sibling-count` prop to set the number of siblings to show. Defaults to `2`.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" :sibling-count="1" :total="100" />
</template>

```

### Show Edges

Use the `show-edges` prop to always show the ellipsis, first and last pages. Defaults to `false`.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>

```

### Show Controls

Use the `show-controls` prop to show the first, prev, next and last buttons. Defaults to `true`.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>

```

### Color

Use the `color` prop to set the color of the inactive controls. Defaults to `air-secondary-no-accent`.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" color="air-tertiary-no-accent" :total="100" />
</template>

```

### Active Color

Use the `active-color` prop to set the color of the active control. Defaults to `air-primary`.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" active-color="air-primary-copilot" :total="100" />
</template>

```

### Size

Use the `size` prop to set the size of the controls. Defaults to `md`.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" size="xl" :total="100" />
</template>

```

### Disabled

Use the `disabled` prop to disable the pagination controls.

```vue

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <B24Pagination v-model:page="page" :total="100" disabled />
</template>

```

## Examples

### With links

Use the `to` prop to transform buttons into links. Pass a function that receives the page number and returns a route destination.

```vue [PaginationLinksExample.vue]
<script setup lang="ts">
const page = ref(5)

function to(page: number) {
  return {
    query: {
      page
    },
    hash: '#with-links'
  }
}
</script>

<template>
  <B24Pagination v-model:page="page" :total="100" :to="to" :sibling-count="1" show-edges />
</template>
```

> !NOTE
> In this example we're adding the `#with-links` hash to avoid going to the top of the page.

## API

### Props

```ts
/**
 * Props for the Pagination component
 */
interface PaginationProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The icon to use for the first page control.
   */
  firstIcon?: IconComponent | undefined;
  /**
   * The icon to use for the previous page control.
   */
  prevIcon?: IconComponent | undefined;
  /**
   * The icon to use for the next page control.
   */
  nextIcon?: IconComponent | undefined;
  /**
   * The icon to use for the last page control.
   */
  lastIcon?: IconComponent | undefined;
  /**
   * The icon to use for the ellipsis control.
   */
  ellipsisIcon?: IconComponent | undefined;
  /**
   * The color of the pagination controls.
   * @default "\"air-secondary-no-accent\""
   */
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link";
  /**
   * The color of the active pagination control.
   * @default "\"air-primary\""
   */
  activeColor?: "default" | "air-secondary-no-accent" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "link" | undefined;
  /**
   * Whether to show the first, previous, next, and last controls.
   * @default "true"
   */
  showControls?: boolean | undefined;
  size?: "xs" | "md" | "xss" | "sm" | "lg" | "xl" | undefined;
  /**
   * A function to render page controls as links.
   */
  to?: ((page: number) => string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined) | undefined;
  b24ui?: { root?: ClassNameValue; list?: ClassNameValue; ellipsis?: ClassNameValue; label?: ClassNameValue; first?: ClassNameValue; prev?: ClassNameValue; item?: ClassNameValue; next?: ClassNameValue; last?: ClassNameValue; } | undefined;
  /**
   * The value of the page that should be active when initially rendered.
   * 
   * Use when you do not need to control the value state.
   */
  defaultPage?: number | undefined;
  /**
   * When `true`, prevents the user from interacting with item
   */
  disabled?: boolean | undefined;
  /**
   * Number of items per page
   * @default "10"
   */
  itemsPerPage?: number | undefined;
  /**
   * The controlled value of the current page. Can be binded as `v-model:page`.
   */
  page?: number | undefined;
  /**
   * When `true`, always show first page, last page, and ellipsis
   * @default "false"
   */
  showEdges?: boolean | undefined;
  /**
   * Number of sibling should be shown around the current page
   * @default "2"
   */
  siblingCount?: number | undefined;
  /**
   * Number of items in your list
   * @default "0"
   */
  total?: number | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Pagination component
 */
interface PaginationSlots {
  first(): any;
  prev(): any;
  next(): any;
  last(): any;
  ellipsis(): any;
  item(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Pagination component
 */
interface PaginationEmits {
  update:page: (payload: [value: number]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    pagination: {
      slots: {
        root: '',
        list: 'flex items-center gap-1',
        ellipsis: 'pointer-events-none',
        label: 'text-center',
        first: '',
        prev: '',
        item: '',
        next: '',
        last: ''
      }
    }
  }
})
```

---

# PinInput

> A PIN code input component.

## Usage

Use the `v-model` directive to control the value of the PinInput.

```vue

<script setup lang="ts">
const value = ref([])
</script>

<template>
  <B24PinInput v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<template>
  <B24PinInput :default-value="{'0':'1','1':'2','2':'3'}" />
</template>

```

### Type

Use the `type` prop to change the input type. Defaults to `text`.

```vue

<template>
  <B24PinInput type="number" />
</template>

```

> !NOTE
> When `type` is set to `number`, it will only accept numeric characters.

### Mask

Use the `mask` prop to treat the input like a password.

```vue

<template>
  <B24PinInput mask :default-value="{'0':'1','1':'2','2':'3','3':'4','4':'5'}" />
</template>

```

### OTP

Use the `otp` prop to enable One-Time Password functionality. When enabled, mobile devices can automatically detect and fill OTP codes from SMS messages or clipboard content, with autocomplete support.

```vue

<template>
  <B24PinInput otp />
</template>

```

### Length

Use the `length` prop to change the amount of inputs.

```vue

<template>
  <B24PinInput :length="6" />
</template>

```

### Placeholder

Use the `placeholder` prop to set a placeholder text.

```vue

<template>
  <B24PinInput placeholder="○" />
</template>

```

### Color

Use the `color` prop to change the ring color when the PinInput is focused.

```vue

<template>
  <B24PinInput color="air-primary" highlight placeholder="○" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Size

Use the `size` prop to change the size of the PinInput.

```vue

<template>
  <B24PinInput size="xl" placeholder="○" />
</template>

```

### Disabled

Use the `disabled` prop to disable the PinInput.

```vue

<template>
  <B24PinInput disabled placeholder="○" />
</template>

```

### No border

Use the `noBorder` prop to removes all borders (rings) from the InputTags.

```vue

<template>
  <B24PinInput no-border highlight size="xl" placeholder="○" />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the InputTags.

```vue

<template>
  <B24PinInput underline highlight size="xl" placeholder="○" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the InputTags.

```vue

<template>
  <B24PinInput rounded highlight size="xl" placeholder="○" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## API

### Props

```ts
/**
 * Props for the PinInput component
 */
interface PinInputProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "md" | "xss" | "xs" | "sm" | "lg" | "xl" | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the input
   */
  rounded?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * The number of input fields.
   * @default "5"
   */
  length?: string | number | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  highlight?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; } | undefined;
  /**
   * The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.
   */
  defaultValue?: string[][] | undefined;
  /**
   * When `true`, prevents the user from interacting with the pin input
   */
  disabled?: boolean | undefined;
  /**
   * Id of the element
   */
  id?: string | undefined;
  /**
   * When `true`, pin inputs will be treated as password.
   */
  mask?: boolean | undefined;
  /**
   * The controlled checked state of the pin input. Can be binded as `v-model`.
   */
  modelValue?: string[] | null | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field.
   */
  otp?: boolean | undefined;
  /**
   * The placeholder character to use for empty pin-inputs.
   */
  placeholder?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  /**
   * Input type for the inputs.
   * @default "\"text\" as never"
   */
  type?: PinInputType | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the PinInput component
 */
interface PinInputEmits {
  update:modelValue: (payload: [value: string[]]) => void;
  complete: (payload: [value: string[]]) => void;
  change: (payload: [event: Event]) => void;
  blur: (payload: [event: Event]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                        | Type                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inputsRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    pinInput: {
      slots: {
        root: 'relative inline-flex items-center gap-1.5',
        base: 'px-0 py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none text-center appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color)'
      },
      variants: {
        size: {
          xss: {
            base: 'size-[20px] text-(length:--ui-font-size-4xs)/[normal]'
          },
          xs: {
            base: 'size-[24px] text-(length:--ui-font-size-xs)/[normal]'
          },
          sm: {
            base: 'size-[28px] text-(length:--ui-font-size-sm)/[normal]'
          },
          md: {
            base: 'size-[34px] text-(length:--ui-font-size-lg)/[normal]'
          },
          lg: {
            base: 'size-[38px] text-(length:--ui-font-size-lg)/[normal]'
          },
          xl: {
            base: 'size-[46px] text-(length:--ui-font-size-2xl)/[normal]'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        }
      },
      compoundVariants: [
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'air-primary'
      }
    }
  }
})
```

---

# Popover

> A non-modal popup window for showing messages or gathering user input.

## Usage

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) or any other component in the default slot of the Popover.

Then, use the `#content` slot to add the content displayed when the Popover is open.

```vue

<template>
  <B24Popover>
<B24Button label="Open" />

  <template #content>
    
<Placeholder class="size-48 m-4 inline-flex" />

  </template>

</B24Popover>
</template>

```

### Mode

Use the `mode` prop to change the mode of the Popover. Defaults to `click`.

```vue

<template>
  <B24Popover mode="hover">
<B24Button label="Open" />

  <template #content>
    
<Placeholder class="size-48 m-4 inline-flex" />

  </template>

</B24Popover>
</template>

```

> !NOTE
> When using the `hover` mode, the Reka UI [`HoverCard`](https://reka-ui.com/docs/components/hover-card){rel="nofollow"} component is used instead of the [`Popover`](https://reka-ui.com/docs/components/popover){rel="nofollow"}.

### Delay

When using the `hover` mode, you can use the `open-delay` and `close-delay` props to control the delay before the Popover is opened or closed.

```vue

<template>
  <B24Popover mode="hover" :open-delay="500" :close-delay="300">
<B24Button label="Open" />

  <template #content>
    
<Placeholder class="size-48 m-4 inline-flex" />

  </template>

</B24Popover>
</template>

```

### Content

Use the `content` prop to control how the Popover content is rendered, like its `align` or `side` for example.

```vue

<template>
  <B24Popover :content="{align:'center',side:'bottom',sideOffset:8}">
<B24Button label="Open" />

  <template #content>
    
<Placeholder class="size-48 m-4 inline-flex" />

  </template>

</B24Popover>
</template>

```

### Arrow

Use the `arrow` prop to display an arrow on the Popover.

```vue

<template>
  <B24Popover arrow>
<B24Button label="Open" />

  <template #content>
    
<Placeholder class="size-48 m-4 inline-flex" />

  </template>

</B24Popover>
</template>

```

### Modal

Use the `modal` prop to control whether the Popover blocks interaction with outside content. Defaults to `false`.

```vue

<template>
  <B24Popover modal>
<B24Button label="Open" />

  <template #content>
    
<Placeholder class="size-48 m-4 inline-flex" />

  </template>

</B24Popover>
</template>

```

### Dismissible

Use the `dismissible` prop to control whether the Popover is dismissible when clicking outside of it or pressing escape. Defaults to `true`.

> !NOTE
> A `close:prevent` event will be emitted when the user tries to close it.

```vue [PopoverDismissibleExample.vue]
<script setup lang="ts">
import Cross50Icon from '@bitrix24/b24icons-vue/actions/Cross50Icon'
</script>

<template>
  <B24Popover :dismissible="false" :b24ui="{ content: 'p-4' }">
    <B24Button label="Open" />

    <template #content="{ close }">
      <div class="flex items-center gap-4 mb-4">
        <h2 class="text-highlighted font-semibold">
          Popover non-dismissible
        </h2>

        <B24Button color="air-tertiary" :icon="Cross50Icon" @click="close" />
      </div>

      <Placeholder class="size-full min-h-48" />
    </template>
  </B24Popover>
</template>
```

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [PopoverOpenExample.vue]
<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Popover v-model:open="open">
    <B24Button label="Open" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </B24Popover>
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the Popover by pressing ``.

### With command palette

You can use a [CommandPalette](https://bitrix24.github.io/b24ui/raw/docs/components/command-palette.md) component inside the Popover's content.

```vue [PopoverCommandPaletteExample.vue]
<script setup lang="ts">
import TagIcon from '@bitrix24/b24icons-vue/outline/TagIcon'

const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
      color: 'air-primary-alert' as const
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'air-primary-success' as const
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'air-primary' as const
    }
  }
])
const label = ref([])
</script>

<template>
  <B24Popover :content="{ side: 'right', align: 'start' }">
    <B24Button
      :icon="TagIcon"
      label="Select labels"
    />

    <template #content>
      <B24CommandPalette
        v-model="label"
        :multiple="true"
        placeholder="Search labels..."
        :groups="[{ id: 'labels', items }]"
        :b24ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
      />
    </template>
  </B24Popover>
</template>
```

### With following cursor

You can make the Popover follow the cursor when hovering over an element using the [`reference`](https://reka-ui.com/docs/components/tooltip#trigger){rel="nofollow"} prop:

```vue [PopoverCursorExample.vue]
<script setup lang="ts">
const open = ref(false)
const anchor = ref({ x: 0, y: 0 })

const reference = computed(() => ({
  getBoundingClientRect: () =>
    ({
      width: 0,
      height: 0,
      left: anchor.value.x,
      right: anchor.value.x,
      top: anchor.value.y,
      bottom: anchor.value.y,
      ...anchor.value
    } as DOMRect)
}))
</script>

<template>
  <B24Popover
    :open="open"
    :reference="reference"
    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
  >
    <div
      class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-accent-main-primary-alt) text-sm aspect-video w-72"
      @pointerenter="open = true"
      @pointerleave="open = false"
      @pointermove="(ev) => {
        anchor.x = ev.clientX
        anchor.y = ev.clientY
      }"
    >
      Hover me
    </div>

    <template #content>
      <div class="p-4">
        {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
      </div>
    </template>
  </B24Popover>
</template>
```

### With anchor slot

You can use the `#anchor` slot to position the Popover against a custom element.

> !WARNING
> This slot only works when `mode` is `click`.

```vue [PopoverAnchorSlotExample.vue]
<script lang="ts" setup>
const open = ref(false)
</script>

<template>
  <B24Popover
    v-model:open="open"
    :dismissible="false"
    :b24ui="{ content: 'w-(--reka-popper-anchor-width) p-4' }"
  >
    <template #anchor>
      <B24Input placeholder="Focus to open" @focus="open = true" @blur="open = false" />
    </template>

    <template #content>
      <Placeholder class="w-full aspect-square" />
    </template>
  </B24Popover>
</template>
```

## API

### Props

```ts
/**
 * Props for the Popover component
 */
interface PopoverProps {
  /**
   * The display mode of the popover.
   * @default "\"click\" as never"
   */
  mode?: PopoverMode | undefined;
  /**
   * The content of the popover.
   */
  content?: (Omit<PopoverContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<PopoverContentImplEmits>>) | undefined;
  /**
   * Display an arrow alongside the popover.
   */
  arrow?: boolean | Omit<PopoverArrowProps, "as" | "asChild"> | undefined;
  /**
   * Render the popover in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * The reference (or anchor) element that is being referred to for positioning.
   * 
   * If not provided will use the current component as anchor.
   */
  reference?: ReferenceElement | undefined;
  /**
   * When `false`, the popover will not close when clicking outside or pressing escape.
   * @default "true"
   */
  dismissible?: boolean | undefined;
  b24ui?: { content?: ClassNameValue; arrow?: ClassNameValue; } | undefined;
  /**
   * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The controlled open state of the popover.
   */
  open?: boolean | undefined;
  /**
   * The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
   */
  modal?: boolean | undefined;
  /**
   * The duration from when the mouse enters the trigger until the hover card opens.
   * @default "0"
   */
  openDelay?: number | undefined;
  /**
   * The duration from when the mouse leaves the trigger or content until the hover card closes.
   * @default "0"
   */
  closeDelay?: number | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Popover component
 */
interface PopoverSlots {
  default(): any;
  content(): any;
  anchor(): any;
}
```

> !NOTE
> The `close` function is only available when `mode` is set to `click` because Reka UI exposes this for [`Popover`](https://reka-ui.com/docs/components/popover#close-using-slot-props){rel="nofollow"} but not for [`HoverCard`](https://reka-ui.com/docs/components/hover-card){rel="nofollow"}.

### Emits

```ts
/**
 * Emitted events for the Popover component
 */
interface PopoverEmits {
  close:prevent: (payload: []) => void;
  update:open: (payload: [value: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    popover: {
      slots: {
        content: 'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
        arrow: 'fill-(--popup-window-background-color)'
      }
    }
  }
})
```

---

# Progress

> A progress bar displaying task completion status.

## Usage

Use the `v-model` directive to control the value of the Progress.

```vue

<script setup lang="ts">
const value = ref(24)
</script>

<template>
  <B24Progress v-model="value" />
</template>

```

### Max

Use the `max` prop to set the maximum value of the Progress.

```vue

<script setup lang="ts">
const value = ref(2)
</script>

<template>
  <B24Progress v-model="value" :max="4" />
</template>

```

Use the `max` prop with an array of strings to display the active step under the bar, the maximum value of the Progress is the length of the array.

```vue

<script setup lang="ts">
const value = ref(3)
</script>

<template>
  <B24Progress v-model="value" :max="{'0':'Prospecting...','1':'Qualifying...','2':'Presenting...','3':'Negotiating...','4':'Closed!'}" />
</template>

```

### Status

Use the `status` prop to display the current Progress value above the bar.

```vue

<script setup lang="ts">
const value = ref(24)
</script>

<template>
  <B24Progress v-model="value" status />
</template>

```

### Indeterminate

When no `v-model` is set or the value is `null`, the Progress becomes *indeterminate*. The progress bar is animated as a `loading`, but you can change it using the [`animation`](https://bitrix24.github.io/b24ui/#animation) prop.

```vue

<script setup lang="ts">
const value = ref(null)
</script>

<template>
  <B24Progress v-model="value" />
</template>

```

### Animation

Use the `animation` prop to change the animation of the Progress to an inverse carousel, a swinging bar or an elastic bar. Defaults to `loading`.

```vue

<template>
  <B24Progress animation="swing" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the Progress. Defaults to `horizontal`.

```vue

<template>
  <B24Progress orientation="vertical" class="h-48 justify-center" />
</template>

```

### Color

Use the `color` prop to change the color of the Progress.

```vue

<template>
  <B24Progress color="air-primary-copilot" />
</template>

```

### Size

Use the `size` prop to change the size of the Progress.

```vue

<template>
  <B24Progress size="lg" />
</template>

```

### Inverted

Use the `inverted` prop to visually invert the Progress.

```vue

<template>
  <B24Progress inverted v-model="value" />
</template>

```

## API

### Props

```ts
/**
 * Props for the Progress component
 */
interface ProgressProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The maximum progress value
   */
  max?: number | any[] | undefined;
  /**
   * Display the current progress value
   */
  status?: boolean | undefined;
  /**
   * Whether the progress is visually inverted
   * @default "false"
   */
  inverted?: boolean | undefined;
  size?: "xs" | "sm" | "md" | "lg" | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary";
  /**
   * The orientation of the progress bar.
   * @default "\"horizontal\""
   */
  orientation?: "horizontal" | "vertical" | undefined;
  animation?: "carousel" | "loading" | "carousel-inverse" | "swing" | "elastic" | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; status?: ClassNameValue; steps?: ClassNameValue; step?: ClassNameValue; } | undefined;
  /**
   * A function to get the accessible label text in a human-readable format.
   * 
   *  If not provided, the value label will be read as the numeric value as a percentage of the max value.
   */
  getValueLabel?: ((value: number | null | undefined, max: number) => string | undefined) | undefined;
  /**
   * A function to get the accessible value text representing the current value in a human-readable format.
   */
  getValueText?: ((value: number | null | undefined, max: number) => string | undefined) | undefined;
  /**
   * The progress value. Can be bind as `v-model`.
   * @default "null"
   */
  modelValue?: number | null | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Progress component
 */
interface ProgressSlots {
  status(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Progress component
 */
interface ProgressEmits {
  update:modelValue: (payload: [value: string[] | undefined]) => void;
  update:max: (payload: [value: number]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    progress: {
      slots: {
        root: 'gap-2',
        base: 'relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5)',
        indicator: 'rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background)',
        status: 'flex justify-end text-(--b24ui-typography-legend-color) transition-[width] duration-200',
        steps: 'grid items-end text-(--b24ui-typography-legend-color)',
        step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
      },
      variants: {
        animation: {
          loading: '',
          carousel: '',
          'carousel-inverse': '',
          swing: '',
          elastic: ''
        },
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          'air-secondary': {
            root: 'style-tinted'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        size: {
          xs: {
            status: 'text-(length:--ui-font-size-xs)/(--ui-font-line-height-sm)',
            steps: 'text-(length:--ui-font-size-xs)/(--ui-font-line-height-sm)'
          },
          sm: {
            status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
            steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
          },
          md: {
            status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
            steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
          },
          lg: {
            status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
            steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
          }
        },
        step: {
          active: {
            step: 'opacity-100'
          },
          first: {
            step: 'opacity-100 text-(--b24ui-typography-legend-color)'
          },
          other: {
            step: 'opacity-0'
          },
          last: {
            step: ''
          }
        },
        orientation: {
          horizontal: {
            root: 'w-full flex flex-col',
            base: 'w-full',
            status: 'flex-row'
          },
          vertical: {
            root: 'h-full flex flex-row-reverse',
            base: 'h-full',
            status: 'flex-col min-w-[32px]'
          }
        },
        inverted: {
          true: {
            status: 'self-end'
          }
        }
      },
      compoundVariants: [
        {
          inverted: true,
          orientation: 'horizontal',
          class: {
            step: 'text-start',
            status: 'flex-row-reverse'
          }
        },
        {
          inverted: true,
          orientation: 'vertical',
          class: {
            steps: 'items-start',
            status: 'flex-col-reverse'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xs',
          class: 'h-[2px]'
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: 'h-[4px]'
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: 'h-[8px]'
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: 'h-[12px]'
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: 'w-[2px]'
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: 'w-[4px]'
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: 'w-[8px]'
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: 'w-[12px]'
        },
        {
          orientation: 'horizontal',
          animation: 'carousel',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'carousel',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'carousel-inverse',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'carousel-inverse',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'swing',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'swing',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'elastic',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'elastic',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'loading',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'loading',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        animation: 'loading',
        size: 'md'
      }
    }
  }
})
```

---

# RadioGroup

> A collection of radio buttons to pick a single choice from several options.

## Usage

Use the `v-model` directive to control the value of the RadioGroup or the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
const value = ref('System')
</script>

<template>
  <B24RadioGroup v-model="value" :items="items" />
</template>

```

### Items

Use the `items` prop as an array of strings or numbers:

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
const value = ref('System')
</script>

<template>
  <B24RadioGroup v-model="value" :items="items" />
</template>

```

You can also pass an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `description?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`value?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#value-key)
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
import type { RadioGroupItem } from '@bitrix24/b24ui-nuxt'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    description: 'This is the first option.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'This is the second option.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'This is the third option.',
    value: 'dark'
  }
])
const value = ref('system')
</script>

<template>
  <B24RadioGroup v-model="value" :items="items" />
</template>

```

> !CAUTION
> When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.

### Value Key

You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.

```vue

<script setup lang="ts">
import type { RadioGroupItem } from '@bitrix24/b24ui-nuxt'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    description: 'This is the first option.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'This is the second option.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'This is the third option.',
    id: 'dark'
  }
])
const value = ref('light')
</script>

<template>
  <B24RadioGroup v-model="value" value-key="id" :items="items" />
</template>

```

### Legend

Use the `legend` prop to set the legend of the RadioGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24RadioGroup legend="Theme" default-value="System" :items="items" />
</template>

```

### Color

Use the `color` prop to change the color of the RadioGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24RadioGroup color="air-primary-copilot" default-value="System" :items="items" />
</template>

```

### Variant

Use the `variant` prop to change the variant of the RadioGroup.

```vue

<script setup lang="ts">
import type { RadioGroupItem } from '@bitrix24/b24ui-nuxt'

const items = ref<RadioGroupItem[]>([
  {
    label: 'Pro',
    value: 'pro',
    description: 'Tailored for indie hackers, freelancers and solo founders.'
  },
  {
    label: 'Startup',
    value: 'startup',
    description: 'Best suited for small teams, startups and agencies.'
  },
  {
    label: 'Enterprise',
    value: 'enterprise',
    description: 'Ideal for larger teams and organizations.'
  }
])
</script>

<template>
  <B24RadioGroup color="air-primary-copilot" variant="card" default-value="pro" :items="items" />
</template>

```

### Size

Use the `size` prop to change the size of the RadioGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24RadioGroup size="lg" variant="list" default-value="System" :items="items" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the RadioGroup. Defaults to `vertical`.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24RadioGroup orientation="horizontal" variant="list" default-value="System" :items="items" />
</template>

```

### Indicator

Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24RadioGroup indicator="end" variant="card" default-value="System" :items="items" />
</template>

```

### Disabled

Use the `disabled` prop to disable the RadioGroup.

```vue

<script setup lang="ts">
const items = ref([
  'System',
  'Light',
  'Dark'
])
</script>

<template>
  <B24RadioGroup disabled variant="list" default-value="System" :items="items" />
</template>

```

## API

### Props

```ts
/**
 * Props for the RadioGroup component
 */
interface RadioGroupProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  legend?: string | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the value.
   * @default "\"value\" as never"
   */
  valueKey?: GetItemKeys<RadioGroupItem[]> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the label.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<RadioGroupItem[]> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the description.
   * @default "\"description\""
   */
  descriptionKey?: GetItemKeys<RadioGroupItem[]> | undefined;
  items?: RadioGroupItem[] | undefined;
  /**
   * The controlled value of the RadioGroup. Can be bind as `v-model`.
   */
  modelValue?: any;
  /**
   * The value of the RadioGroup when initially rendered. Use when you do not need to control the state of the RadioGroup.
   */
  defaultValue?: any;
  size?: "xs" | "sm" | "md" | "lg" | undefined;
  variant?: "card" | "list" | "table" | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  /**
   * The orientation the radio buttons are laid out.
   * @default "\"vertical\""
   */
  orientation?: DataOrientation | undefined;
  /**
   * Position of the indicator.
   */
  indicator?: "start" | "end" | "hidden" | undefined;
  b24ui?: { root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; } | undefined;
  /**
   * When `true`, prevents the user from interacting with radio items.
   */
  disabled?: boolean | undefined;
  /**
   * When `true`, keyboard navigation will loop from last item to first, and vice versa.
   */
  loop?: boolean | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the RadioGroup component
 */
interface RadioGroupSlots {
  legend(): any;
  label(): any;
  description(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the RadioGroup component
 */
interface RadioGroupEmits {
  update:modelValue: (payload: [value: any]) => void;
  change: (payload: [event: Event]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    radioGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex',
        legend: 'mb-1.5 block text-(--b24ui-typography-label-color)',
        item: 'flex items-start',
        base: 'cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background)',
        indicator: 'flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background)',
        container: 'flex items-center',
        wrapper: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full',
        label: 'cursor-pointer block text-(--b24ui-typography-label-color)',
        description: 'text-(--b24ui-typography-description-color)'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        variant: {
          list: {},
          card: {
            item: 'cursor-pointer items-start border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:border-(--b24ui-border-color)'
          },
          table: {
            item: 'cursor-pointer border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:bg-(--b24ui-background)/24 has-data-[state=checked]:border-(--b24ui-border-color) has-data-[state=checked]:text-(--b24ui-color) has-data-[state=checked]:z-[1]'
          }
        },
        orientation: {
          horizontal: {
            fieldset: 'flex-row',
            root: 'me-2'
          },
          vertical: {
            fieldset: 'flex-col'
          }
        },
        indicator: {
          start: {
            item: 'flex-row',
            base: 'me-2'
          },
          end: {
            item: 'flex-row-reverse',
            base: 'ms-2'
          },
          hidden: {
            base: 'sr-only',
            wrapper: 'text-center'
          }
        },
        size: {
          xs: {
            fieldset: 'gap-x-[12px] gap-y-[4px]',
            legend: 'text-(length:--ui-font-size-xs)',
            base: 'size-[12px]',
            item: 'text-(length:--ui-font-size-xs)',
            label: 'leading-[11px]',
            container: 'h-[12px]',
            indicator: 'after:size-[4px]'
          },
          sm: {
            fieldset: 'gap-x-[14px] gap-y-[6px]',
            legend: 'text-(length:--ui-font-size-xs)',
            base: 'size-[14px]',
            item: 'text-(length:--ui-font-size-sm)',
            label: 'leading-[14px]',
            container: 'h-[14px]',
            indicator: 'after:size-[6px]'
          },
          md: {
            fieldset: 'gap-x-[16px] gap-y-[8px]',
            legend: 'text-(length:--ui-font-size-sm)',
            base: 'size-[16px]',
            item: 'text-(length:--ui-font-size-lg)',
            label: 'leading-[15px]',
            container: 'h-[16px]',
            indicator: 'after:size-[6px]'
          },
          lg: {
            fieldset: 'gap-x-[16px] gap-y-[8px]',
            legend: 'text-(length:--ui-font-size-sm)',
            base: 'size-[20px]',
            item: 'text-(length:--ui-font-size-xl)',
            label: 'leading-[18px]',
            container: 'h-[20px]',
            indicator: 'after:size-[8px]'
          }
        },
        disabled: {
          true: {
            item: 'opacity-30',
            base: 'cursor-not-allowed',
            label: 'cursor-not-allowed',
            description: 'cursor-not-allowed'
          }
        },
        required: {
          true: {
            label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
          }
        }
      },
      compoundVariants: [
        {
          size: 'xs',
          variant: 'card',
          class: {
            item: 'px-[13px] py-[7px] rounded-(--ui-border-radius-xs)'
          }
        },
        {
          size: 'sm',
          variant: 'card',
          class: {
            item: 'px-[13px] py-[9px] rounded-(--ui-border-radius-sm)'
          }
        },
        {
          size: 'md',
          variant: 'card',
          class: {
            item: 'px-[17px] py-[10px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          size: 'lg',
          variant: 'card',
          class: {
            item: 'px-[23px] py-[12px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          class: {
            item: 'px-[13px] py-[7px]'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          class: {
            item: 'px-[13px] py-[9px]'
          }
        },
        {
          size: 'md',
          variant: 'table',
          class: {
            item: 'px-[17px] py-[10px]'
          }
        },
        {
          size: 'lg',
          variant: 'table',
          class: {
            item: 'px-[23px] py-[12px]'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-xs) last-of-type:rounded-e-(--ui-border-radius-xs)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-xs) last-of-type:rounded-b-(--ui-border-radius-xs)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-sm) last-of-type:rounded-e-(--ui-border-radius-sm)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-sm) last-of-type:rounded-b-(--ui-border-radius-sm)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          size: [
            'lg',
            'md'
          ],
          variant: 'table',
          orientation: 'horizontal',
          class: {
            item: 'first-of-type:rounded-s-(--ui-border-radius-md) last-of-type:rounded-e-(--ui-border-radius-md)',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          size: [
            'lg',
            'md'
          ],
          variant: 'table',
          orientation: 'vertical',
          class: {
            item: 'first-of-type:rounded-t-(--ui-border-radius-md) last-of-type:rounded-b-(--ui-border-radius-md)',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          variant: [
            'card',
            'table'
          ],
          disabled: true,
          class: {
            item: 'cursor-not-allowed'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md',
        variant: 'list',
        orientation: 'vertical',
        indicator: 'start'
      }
    }
  }
})
```

---

# Range

> A control for selecting a numeric value within a specified range.

## Usage

Use the `v-model` directive to control the value of the Range.

```vue

<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <B24Range v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<template>
  <B24Range :default-value="50" />
</template>

```

### Min / Max

Use the `min` and `max` props to set the minimum and maximum values of the Range. Defaults to `0` and `100`.

```vue

<template>
  <B24Range :min="0" :max="50" :default-value="50" />
</template>

```

### Step

Use the `step` prop to set the increment value of the Range. Defaults to `1`.

```vue

<template>
  <B24Range :step="10" :default-value="50" />
</template>

```

### Multiple

Use the `v-model` directive or the `default-value` prop with an array of values to create a range Range.

```vue

<script setup lang="ts">
const value = ref([
  25,
  75
])
</script>

<template>
  <B24Range v-model="value" />
</template>

```

Use the `min-steps-between-thumbs` prop to limit the minimum distance between the thumbs.

```vue

<script setup lang="ts">
const value = ref([
  25,
  50,
  75
])
</script>

<template>
  <B24Range v-model="value" :min-steps-between-thumbs="10" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the Range. Defaults to `horizontal`.

```vue

<template>
  <B24Range orientation="vertical" :default-value="50" class="h-48" />
</template>

```

### Color

Use the `color` prop to change the color of the Range.

```vue

<template>
  <B24Range color="air-primary-copilot" :default-value="50" />
</template>

```

### Size

Use the `size` prop to change the size of the Range.

```vue

<template>
  <B24Range size="lg" :default-value="50" />
</template>

```

### Tooltip

Use the `tooltip` prop to display a [Tooltip](https://bitrix24.github.io/b24ui/raw/docs/components/tooltip.md) around the Range thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](https://bitrix24.github.io/b24ui/raw/docs/components/tooltip.md#props) component.

```vue

<template>
  <B24Range :default-value="50" tooltip />
</template>

```

### Disabled

Use the `disabled` prop to disable the Range.

```vue

<template>
  <B24Range disabled :default-value="50" />
</template>

```

### Inverted

Use the `inverted` prop to visually invert the Range.

```vue

<template>
  <B24Range inverted :default-value="25" />
</template>

```

## API

### Props

```ts
/**
 * Props for the Range component
 */
interface RangeProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  size?: "xs" | "sm" | "md" | "lg" | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  /**
   * The orientation of the range.
   * @default "\"horizontal\""
   */
  orientation?: DataOrientation | undefined;
  /**
   * Display a tooltip around the range thumbs with the current value.
   * `{ disableClosingTrigger: true }`{lang="ts-type"}
   */
  tooltip?: boolean | TooltipProps | undefined;
  /**
   * The value of the range when initially rendered. Use when you do not need to control the state of the range.
   */
  defaultValue?: number | number[] | undefined;
  b24ui?: { root?: ClassNameValue; track?: ClassNameValue; range?: ClassNameValue; thumb?: ClassNameValue; } | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, prevents the user from interacting with the slider.
   */
  disabled?: boolean | undefined;
  /**
   * Whether the slider is visually inverted.
   */
  inverted?: boolean | undefined;
  /**
   * The minimum value for the range.
   * @default "0"
   */
  min?: number | undefined;
  /**
   * The maximum value for the range.
   * @default "100"
   */
  max?: number | undefined;
  /**
   * The stepping interval.
   * @default "1"
   */
  step?: number | undefined;
  /**
   * The minimum permitted steps between multiple thumbs.
   */
  minStepsBetweenThumbs?: number | undefined;
  modelValue?: number | number[] | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the Range component
 */
interface RangeEmits {
  change: (payload: [event: Event]) => void;
  update:modelValue: (payload: [value: number | number[] | undefined]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    range: {
      slots: {
        root: 'relative flex items-center select-none touch-none',
        track: 'relative rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) grow overflow-hidden',
        range: 'absolute rounded-(--ui-border-radius-pill) bg-(--b24ui-background)',
        thumb: 'rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) ring-2 outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--b24ui-background) focus-visible:outline-(--b24ui-background-hover)'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        size: {
          xs: {
            thumb: 'size-[12px]'
          },
          sm: {
            thumb: 'size-[14px]'
          },
          md: {
            thumb: 'size-[16px]'
          },
          lg: {
            thumb: 'size-[20px]'
          }
        },
        orientation: {
          horizontal: {
            root: 'w-full',
            range: 'h-full'
          },
          vertical: {
            root: 'flex-col h-full',
            range: 'w-full'
          }
        },
        disabled: {
          true: {
            root: 'opacity-30 cursor-not-allowed'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          size: 'xs',
          class: {
            track: 'h-[6px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            track: 'h-[7px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            track: 'h-[8px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            track: 'h-[9px]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            track: 'h-[10px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            track: 'w-[6px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            track: 'w-[7px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            track: 'w-[8px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            track: 'w-[9px]'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            track: 'w-[10px]'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# Select

> A selection field to pick from various options.

## Usage

Use the `v-model` directive to control the value of the Select or the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" :items="items" />
</template>

```

### Items

Use the `items` prop as an array of strings, numbers or booleans:

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" :items="items" class="w-[192px]" />
</template>

```

You can also pass an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`value?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#value-key)
- [`type?: "label" | "separator" | "item"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-items-type)
- [`icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-icons-in-items)
- [`avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-avatar-in-items)
- [`color?: Select['color']`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-colors-items)
- [`chip?: ChipProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-chip-in-items)
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
import type { SelectItem } from '@bitrix24/b24ui-nuxt'

const items = ref<SelectItem[]>([
  {
    label: 'Backlog',
    value: 'backlog'
  },
  {
    label: 'Todo',
    value: 'todo'
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Done',
    value: 'done'
  }
])
const value = ref('backlog')
</script>

<template>
  <B24Select v-model="value" :items="items" class="w-[192px]" />
</template>

```

> !CAUTION
> When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.

You can also pass an array of arrays to the `items` prop.
Use the element type `separator` as a separator.

```vue

<script setup lang="ts">
const items = ref([
  [
    'Apple',
    'Banana',
    'Blueberry',
    'Grapes',
    'Pineapple'
  ],
  [
    {
      type: 'separator'
    },
    'Aubergine',
    'Broccoli',
    'Carrot',
    'Courgette',
    'Leek'
  ]
])
const value = ref('Apple')
</script>

<template>
  <B24Select v-model="value" :items="items" class="w-[192px]" />
</template>

```

### Value Key

You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.

```vue

<script setup lang="ts">
import type { SelectItem } from '@bitrix24/b24ui-nuxt'

const items = ref<SelectItem[]>([
  {
    label: 'Backlog',
    id: 'backlog'
  },
  {
    label: 'Todo',
    id: 'todo'
  },
  {
    label: 'In Progress',
    id: 'in_progress'
  },
  {
    label: 'Done',
    id: 'done'
  }
])
const value = ref('todo')
</script>

<template>
  <B24Select v-model="value" value-key="id" :items="items" class="w-[192px]" />
</template>

```

### Multiple

Use the `multiple` prop to allow multiple selections, the selected items will be separated by a comma in the trigger.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref([
  'Backlog',
  'Todo'
])
</script>

<template>
  <B24Select v-model="value" multiple :items="items" class="w-[192px]" />
</template>

```

> !CAUTION
> Ensure to pass an array to the `default-value` prop or the `v-model` directive.

### Placeholder

Use the `placeholder` prop to set a placeholder text.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24Select placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

### Content

Use the `content` prop to control how the Select content is rendered, like its `align` or `side` for example.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" :content="{align:'center',side:'bottom',sideOffset:8}" :items="items" class="w-[192px]" />
</template>

```

### Arrow

Use the `arrow` prop to display an arrow on the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" arrow :items="items" class="w-[192px]" />
</template>

```

### Color

Use the `color` prop to change the ring color when the Select is focused.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" color="air-primary-copilot" highlight :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" tag="note" color="air-primary-warning" highlight placeholder="Search..." :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

Use the `tagColor` property to set the color for Badge.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" tag="note" tag-color="air-secondary-alert" color="air-primary-warning" highlight placeholder="Search..." :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Size

Use the `size` prop to change the size of the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" size="xl" :items="items" class="w-[192px]" />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the Select.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" :icon="RocketIcon" size="md" :items="items" class="w-[192px]" />
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" :trailing-icon="RocketIcon" size="md" :items="items" class="w-[192px]" />
</template>

```

### Selected Icon

Use the `selected-icon` prop to customize the [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} when an item is selected.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" :selected-icon="RocketIcon" size="md" :items="items" class="w-[192px]" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" :avatar="{src:'/b24ui/avatar/employee.png'}" :items="items" class="w-[192px]" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24Select v-model="value" loading :items="items" class="w-[192px]" />
</template>

```

### Disabled

Use the `disabled` prop to disable the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24Select disabled placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

### No padding

Use the `noPadding` prop to removes padding from the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24Select no-padding highlight placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### No border

Use the `noBorder` prop to removes all borders (rings) from the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24Select no-border highlight placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24Select underline highlight placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the Select.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24Select rounded highlight placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## Examples

### With items type

You can use the `type` property with `separator` to display a separator between items or `label` to display a label.

```vue

<script setup lang="ts">
import type { SelectItem } from '@bitrix24/b24ui-nuxt'

const items = ref<SelectItem[]>([
  {
    type: 'label',
    label: 'Fruits'
  },
  'Apple',
  'Banana',
  {
    type: 'separator'
  },
  'Blueberry',
  'Grapes',
  'Pineapple',
  {
    type: 'label',
    label: 'Vegetables'
  },
  'Aubergine',
  'Broccoli',
  'Carrot',
  'Courgette',
  'Leek'
])
const value = ref('Apple')
</script>

<template>
  <B24Select v-model="value" :items="items" class="w-[192px]" />
</template>

```

### With colors items

You can use the `color` property to change the color of items.

```vue [SelectItemsColorExample.vue]
<script setup lang="ts">
import type { SelectItem } from '@bitrix24/b24ui-nuxt'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    color: 'air-primary',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    color: 'air-primary-success',
    icon: MyPlanIcon
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    color: 'air-primary-alert',
    icon: Shield2DefendedIcon
  }
] satisfies SelectItem[])

const value = ref(items.value[0]?.value)

const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
</script>

<template>
  <B24Select v-model="value" :icon="icon" :items="items" value-key="value" class="w-[192px]" />
</template>
```

### With icon in items

You can use the `icon` property to display an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the items.

```vue [SelectItemsIconExample.vue]
<script setup lang="ts">
import type { SelectItem } from '@bitrix24/b24ui-nuxt'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    icon: MyPlanIcon
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    icon: Shield2DefendedIcon
  }
] satisfies SelectItem[])

const value = ref(items.value[0]?.value)

const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
</script>

<template>
  <B24Select v-model="value" :icon="icon" :items="items" value-key="value" class="w-[192px]" />
</template>
```

> !NOTE
> In this example, the icon is computed from the `value` property of the selected item.

> !TIP
> You can also use the `#leading` slot to display the selected icon.

### With avatar in items

You can use the `avatar` property to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the items.

```vue [SelectItemsAvatarExample.vue]
<script setup lang="ts">
import type { SelectItem } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'Assistant',
    value: 'assistant',
    avatar: {
      src: '/b24ui/avatar/assistant.png',
      alt: 'assistant'
    }
  },
  {
    label: 'Employee',
    value: 'employee',
    avatar: {
      src: '/b24ui/avatar/employee.png',
      alt: 'employee'
    }
  }
] satisfies SelectItem[])

const value = ref(items.value[0]?.value)

const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)
</script>

<template>
  <B24Select v-model="value" :items="items" value-key="value" :avatar="avatar" class="w-[192px]" />
</template>
```

> !NOTE
> In this example, the avatar is computed from the `value` property of the selected item.

> !TIP
> You can also use the `#leading` slot to display the selected avatar.

### With chip in items

You can use the `chip` property to display a [Chip](https://bitrix24.github.io/b24ui/raw/docs/components/chip.md) inside the items.

```vue [SelectItemsChipExample.vue]
<script setup lang="ts">
import type { SelectItem, ChipProps } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
      color: 'air-primary-alert'
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'air-primary-success'
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'air-primary-copilot'
    }
  }
] satisfies SelectItem[])

const value = ref(items.value[0]?.value)

function getChip(value: string) {
  return items.value.find(item => item.value === value)?.chip
}
</script>

<template>
  <B24Select v-model="value" :items="items" value-key="value" class="w-[192px]">
    <template #leading="{ modelValue, b24ui }">
      <B24Chip
        v-if="modelValue"
        v-bind="getChip(modelValue)"
        inset
        standalone
        :size="(b24ui.itemLeadingChipSize() as ChipProps['size'])"
        :class="b24ui.itemLeadingChip()"
      />
    </template>
  </B24Select>
</template>
```

> !NOTE
> In this example, the `#leading` slot is used to display the selected chip.

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [SelectOpenExample.vue]
<script setup lang="ts">
const open = ref(false)
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Select v-model="value" v-model:open="open" :items="items" class="w-[192px]" />
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the Select by pressing ``.

### With rotating icon

Here is an example with a rotating icon that indicates the open state of the Select.

```vue [SelectIconExample.vue]
<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')
</script>

<template>
  <B24Select
    v-model="value"
    :items="items"
    :b24ui="{
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
    }"
    class="w-[192px]"
  />
</template>
```

### With fetched items

You can fetch items from an API and use them in the Select.

```vue [SelectFetchExample.vue]
<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users',
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})

function getUserAvatar(value: string) {
  return users.value?.find(user => user.value === value)?.avatar || {}
}
</script>

<template>
  <B24Select
    :items="users"
    :loading="status === 'pending'"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    value-key="value"
    class="w-[192px]"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="getUserAvatar(modelValue)"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24Select>
</template>
```

### With full content width

You can expand the content to the full width of its items by adding the `b24ui.content`,`b24ui.item` and `b24ui.viewport` slots.

```vue [SelectContentWidthExample.vue]
<script setup lang="ts">
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const value = ref<string>()

const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24Select
    v-model="value"
    :items="users"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    value-key="value"
    :b24ui="{ content: 'min-w-fit', viewport: 'min-w-fit', item: 'min-w-fit' }"
    class="w-[192px]"
  >
    <template #item-label="{ item }">
      {{ item.label }}

      <span class="text-(--b24ui-typography-description-color)">
        {{ item.email }}
      </span>
    </template>
  </B24Select>
</template>
```

## API

### Props

```ts
/**
 * Props for the Select component
 */
interface SelectProps {
  id?: string | undefined;
  /**
   * The placeholder text when the select is empty.
   */
  placeholder?: string | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "sm" | "xss" | "xs" | "md" | "lg" | "xl" | undefined;
  /**
   * Removes padding from input
   */
  noPadding?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the select
   */
  rounded?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * The icon displayed to open the menu.
   */
  trailingIcon?: IconComponent | undefined;
  /**
   * The icon displayed when an item is selected.
   */
  selectedIcon?: IconComponent | undefined;
  /**
   * The content of the menu.
   */
  content?: (Omit<SelectContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<SelectContentImplEmits>>) | undefined;
  /**
   * Display an arrow alongside the menu.
   */
  arrow?: boolean | Omit<SelectArrowProps, "as" | "asChild"> | undefined;
  /**
   * Render the menu in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the value.
   * @default "\"value\" as never"
   */
  valueKey?: GetItemKeys<ArrayOrNested<SelectItem>> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the label.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<ArrayOrNested<SelectItem>> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the description.
   * @default "\"description\""
   */
  descriptionKey?: GetItemKeys<ArrayOrNested<SelectItem>> | undefined;
  items?: ArrayOrNested<SelectItem> | undefined;
  /**
   * The value of the Select when initially rendered. Use when you do not need to control the state of the Select.
   */
  defaultValue?: any;
  /**
   * The controlled value of the Select. Can be bind as `v-model`.
   */
  modelValue?: any;
  /**
   * Whether multiple options can be selected or not.
   */
  multiple?: boolean | undefined;
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; arrow?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; } | undefined;
  /**
   * When `true`, prevents the user from interacting with Select
   */
  disabled?: boolean | undefined;
  /**
   * The controlled open state of the Select. Can be bind as `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * The open state of the select when it is initially rendered. Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * Native html input `autocomplete` attribute.
   */
  autocomplete?: string | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

### Slots

```ts
/**
 * Slots for the Select component
 */
interface SelectSlots {
  leading(): any;
  default(): any;
  trailing(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-description(): any;
  item-trailing(): any;
  content-top(): any;
  content-bottom(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Select component
 */
interface SelectEmits {
  update:modelValue: (payload: [value: any]) => void;
  update:open: (payload: [value: boolean]) => void;
  change: (payload: [event: Event]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  focus: (payload: [event: FocusEvent]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                         | Type                                                                                                                                                            |
| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `triggerRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLButtonElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    select: {
      slots: {
        root: 'isolate relative inline-flex items-center',
        base: 'relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center',
        value: 'truncate pointer-events-none',
        placeholder: 'truncate text-(--ui-color-design-plain-na-content-secondary)',
        content: 'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto',
        viewport: 'relative scroll-py-1 w-[240px] max-h-[40vh] overflow-x-hidden overflow-y-auto scrollbar-thin',
        arrow: 'fill-(--popup-window-background-color)',
        group: 'grid',
        empty: 'h-(--popup-window-delimiter-section-height) mt-(--menu-item-block-stack-space) py-[8px] select-none outline-none whitespace-nowrap text-center text-(length:--popup-window-delimiter-font-size)/(--ui-font-line-height-lg) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight)',
        label: 'w-full min-w-[195px] h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)',
        separator: 'my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)',
        item: 'group w-full min-w-[195px] h-[36px] px-[18px] mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=open]:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover) data-highlighted:bg-(--menu-popup-item-bg-color-hover) data-[state=open]:bg-(--menu-popup-item-bg-color-hover) transition-colors',
        itemLeadingIcon: 'shrink-0 size-[24px] text-(--ui-color-design-plain-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary) group-data-[state=checked]:text-(--ui-color-accent-main-primary) transition-colors',
        itemLeadingAvatar: 'shrink-0 size-[16px] me-[12px]',
        itemLeadingAvatarSize: '2xs',
        itemLeadingChip: 'shrink-0 size-[16px]',
        itemLeadingChipSize: 'sm',
        itemTrailing: 'ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center',
        itemTrailingIcon: 'shrink-0 size-[24px] text-(--ui-color-accent-main-primary)',
        itemWrapper: 'flex-1 flex flex-col min-w-0',
        itemLabel: 'truncate group-data-[state=checked]:text-(--ui-color-accent-main-primary)',
        itemDescription: 'truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]'
          },
          xs: {
            base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]'
          },
          sm: {
            base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal]',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]'
          },
          md: {
            base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]'
          },
          lg: {
            base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          },
          xl: {
            base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        },
        colorItem: {
          'air-primary': {
            item: 'style-filled'
          },
          'air-primary-success': {
            item: 'style-filled-success'
          },
          'air-primary-alert': {
            item: 'style-filled-alert'
          },
          'air-primary-copilot': {
            item: 'style-filled-copilot'
          },
          'air-primary-warning': {
            item: 'style-filled-warning'
          },
          default: {
            item: 'style-old-default'
          },
          danger: {
            item: 'style-old-danger'
          },
          success: {
            item: 'style-old-success'
          },
          warning: {
            item: 'style-old-warning'
          },
          primary: {
            item: 'style-old-primary'
          },
          secondary: {
            item: 'style-old-secondary'
          },
          collab: {
            item: 'style-old-collab'
          },
          ai: {
            item: 'style-old-ai'
          }
        }
      },
      compoundVariants: [
        {
          colorItem: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)'
          }
        },
        {
          colorItem: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          colorItem: 'default',
          active: false,
          class: ''
        },
        {
          colorItem: 'default',
          active: true,
          class: ''
        },
        {
          colorItem: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background-active) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-icon) group-data-highlighted:text-(--b24ui-icon) group-data-[state=open]:text-(--b24ui-icon)'
          }
        },
        {
          colorItem: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# SelectMenu

> A refined and searchable selection component.

## Usage

Use the `v-model` directive to control the value of the SelectMenu or the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" :items="items" />
</template>

```

> !TIP
> Use this over a [`Select`](https://bitrix24.github.io/b24ui/raw/docs/components/select.md) to take advantage of Reka UI's [`Combobox`](https://reka-ui.com/docs/components/combobox){rel="nofollow"} component that offers search capabilities and multiple selection.

> !NOTE
> This component is similar to the [`InputMenu`](https://bitrix24.github.io/b24ui/raw/docs/components/input-menu.md) but it's using a Select instead of an Input with the search inside the menu.

### Items

Use the `items` prop as an array of strings, numbers or booleans:

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" :items="items" class="w-[192px]" />
</template>

```

You can also pass an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`value?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#value-key)
- [`type?: "label" | "separator" | "item"`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-items-type)
- [`icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-icons-in-items)
- [`avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-avatar-in-items)
- [`color?: SelectMenu['color']`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-colors-items)
- [`chip?: ChipProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-chip-in-items)
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `onSelect?: (e: Event) => void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

> !CAUTION
> Unlike the [`Select`](https://bitrix24.github.io/b24ui/raw/docs/components/select.md) component, the SelectMenu expects the whole object to be passed to the `v-model` directive or the `default-value` prop by default.

You can also pass an array of arrays to the `items` prop.
Use the element type `separator` as a separator.

```vue

<script setup lang="ts">
const items = ref([
  [
    'Apple',
    'Banana',
    'Blueberry',
    'Grapes',
    'Pineapple'
  ],
  [
    {
      type: 'separator'
    },
    'Aubergine',
    'Broccoli',
    'Carrot',
    'Courgette',
    'Leek'
  ]
])
const value = ref('Apple')
</script>

<template>
  <B24SelectMenu v-model="value" :items="items" class="w-[192px]" />
</template>

```

### Value Key

You can choose to bind a single property of the object rather than the whole object by using the `value-key` prop. Defaults to `undefined`.

```vue

<script setup lang="ts">
import type { SelectMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<SelectMenuItem[]>([
  {
    label: 'Backlog',
    id: 'backlog'
  },
  {
    label: 'Todo',
    id: 'todo'
  },
  {
    label: 'In Progress',
    id: 'in_progress'
  },
  {
    label: 'Done',
    id: 'done'
  }
])
const value = ref('todo')
</script>

<template>
  <B24SelectMenu v-model="value" value-key="id" :items="items" class="w-[192px]" />
</template>

```

### Multiple

Use the `multiple` prop to allow multiple selections, the selected items will be separated by a comma in the trigger.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref([
  'Backlog',
  'Todo'
])
</script>

<template>
  <B24SelectMenu v-model="value" multiple :items="items" class="w-[192px]" />
</template>

```

> !CAUTION
> Ensure to pass an array to the `default-value` prop or the `v-model` directive.

### Placeholder

Use the `placeholder` prop to set a placeholder text.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24SelectMenu placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

### Search Input

Use the `search-input` prop to customize or hide the search input (with `false` value).

You can pass any property from the [Input](https://bitrix24.github.io/b24ui/raw/docs/components/input.md) component to customize it.

```vue

<script setup lang="ts">
import type { SelectMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<SelectMenuItem[]>([
  {
    label: 'Backlog'
  },
  {
    label: 'Todo'
  },
  {
    label: 'In Progress'
  },
  {
    label: 'Done'
  }
])
const value = ref({
  label: 'Backlog'
})
</script>

<template>
  <B24SelectMenu v-model="value" :search-input="{placeholder:'Filter...'}" :items="items" class="w-[192px]" />
</template>

```

> !TIP
> You can set the `search-input` prop to `false` to hide the search input.

### Content

Use the `content` prop to control how the SelectMenu content is rendered, like its `align` or `side` for example.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" :content="{align:'center',side:'bottom',sideOffset:8}" :items="items" class="w-[192px]" />
</template>

```

### Arrow

Use the `arrow` prop to display an arrow on the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" arrow :items="items" class="w-[192px]" />
</template>

```

### Color

Use the `color` prop to change the ring color when the SelectMenu is focused.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" color="air-primary-copilot" highlight :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" tag="note" color="air-primary-warning" highlight placeholder="Search..." :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

Use the `tagColor` property to set the color for Badge.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" tag="note" tag-color="air-secondary-alert" color="air-primary-warning" highlight placeholder="Search..." :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Size

Use the `size` prop to change the size of the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" size="xl" :items="items" class="w-[192px]" />
</template>

```

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the SelectMenu.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" :icon="RocketIcon" size="md" :items="items" class="w-[192px]" />
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to customize the trailing [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" :trailing-icon="RocketIcon" size="md" :items="items" class="w-[192px]" />
</template>

```

### Selected Icon

Use the `selected-icon` prop to customize the [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} when an item is selected.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" :selected-icon="RocketIcon" size="md" :items="items" class="w-[192px]" />
</template>

```

### Avatar

Use the `avatar` prop to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" :avatar="{src:'/b24ui/avatar/employee.png'}" :items="items" class="w-[192px]" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24SelectMenu v-model="value" loading :items="items" class="w-[192px]" />
</template>

```

### Disabled

Use the `disabled` prop to disable the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24SelectMenu disabled placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

### No padding

Use the `noPadding` prop to removes padding from the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24SelectMenu no-padding highlight placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### No border

Use the `noBorder` prop to removes all borders (rings) from the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24SelectMenu no-border highlight placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24SelectMenu underline highlight placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the SelectMenu.

```vue

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
</script>

<template>
  <B24SelectMenu rounded highlight placeholder="Select status" :items="items" class="w-[192px]" />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## Examples

### With items type

You can use the `type` property with `separator` to display a separator between items or `label` to display a label.

```vue

<script setup lang="ts">
import type { SelectMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<SelectMenuItem[]>([
  {
    type: 'label',
    label: 'Fruits'
  },
  'Apple',
  'Banana',
  {
    type: 'separator'
  },
  'Blueberry',
  'Grapes',
  'Pineapple',
  {
    type: 'label',
    label: 'Vegetables'
  },
  'Aubergine',
  'Broccoli',
  'Carrot',
  'Courgette',
  'Leek'
])
const value = ref('Apple')
</script>

<template>
  <B24SelectMenu v-model="value" :items="items" class="w-[192px]" />
</template>

```

### With colors items

You can use the `color` property to change the color of items.

```vue [SelectMenuItemsColorExample.vue]
<script setup lang="ts">
import type { SelectMenuItem } from '@bitrix24/b24ui-nuxt'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    color: 'air-primary',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    color: 'air-primary-success',
    icon: MyPlanIcon
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    color: 'air-primary-alert',
    icon: Shield2DefendedIcon
  }
] satisfies SelectMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24SelectMenu v-model="value" :icon="value?.icon" :items="items" class="w-[192px]" />
</template>
```

### With icon in items

You can use the `icon` property to display an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the items.

```vue [SelectMenuItemsIconExample.vue]
<script setup lang="ts">
import type { SelectMenuItem } from '@bitrix24/b24ui-nuxt'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    icon: MyPlanIcon
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    icon: Shield2DefendedIcon
  }
] satisfies SelectMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24SelectMenu v-model="value" :icon="value?.icon" :items="items" class="w-[192px]" />
</template>
```

> !TIP
> You can also use the `#leading` slot to display the selected icon.

### With avatar in items

You can use the `avatar` property to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the items.

```vue [SelectMenuItemsAvatarExample.vue]
<script setup lang="ts">
import type { SelectMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'Assistant',
    value: 'assistant',
    avatar: {
      src: '/b24ui/avatar/assistant.png',
      alt: 'assistant'
    }
  },
  {
    label: 'Employee',
    value: 'employee',
    avatar: {
      src: '/b24ui/avatar/employee.png',
      alt: 'employee'
    }
  }
] satisfies SelectMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24SelectMenu v-model="value" :avatar="value?.avatar" :items="items" class="w-[192px]" />
</template>
```

> !TIP
> You can also use the `#leading` slot to display the selected avatar.

### With chip in items

You can use the `chip` property to display a [Chip](https://bitrix24.github.io/b24ui/raw/docs/components/chip.md) inside the items.

```vue [SelectMenuItemsChipExample.vue]
<script setup lang="ts">
import type { SelectMenuItem, ChipProps } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
      color: 'air-primary-alert'
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'air-primary-success'
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'air-primary-copilot'
    }
  }
] satisfies SelectMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24SelectMenu v-model="value" :items="items" class="w-[192px]">
    <template #leading="{ modelValue, b24ui }">
      <B24Chip
        v-if="modelValue"
        v-bind="modelValue.chip"
        inset
        standalone
        :size="(b24ui.itemLeadingChipSize() as ChipProps['size'])"
        :class="b24ui.itemLeadingChip()"
      />
    </template>
  </B24SelectMenu>
</template>
```

> !NOTE
> In this example, the `#leading` slot is used to display the selected chip.

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [SelectMenuOpenExample.vue]
<script setup lang="ts">
const open = ref(false)
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24SelectMenu v-model="value" v-model:open="open" :items="items" class="w-[192px]" />
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the SelectMenu by pressing ``.

### Control search term

Use the `v-model:search-term` directive to control the search term.

```vue [SelectMenuSearchTermExample.vue]
<script setup lang="ts">
const searchTerm = ref('o')
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')
</script>

<template>
  <B24SelectMenu v-model="value" v-model:search-term="searchTerm" :items="items" class="w-[192px]" />
</template>
```

### With rotating icon

Here is an example with a rotating icon that indicates the open state of the SelectMenu.

```vue [SelectMenuIconExample.vue]
<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')
</script>

<template>
  <B24SelectMenu
    v-model="value"
    :items="items"
    :b24ui="{
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
    }"
    class="w-[192px]"
  />
</template>
```

### With create item

Use the `create-item` prop to enable users to add custom values that aren't in the predefined options.

```vue [SelectMenuCreateItemExample.vue]
<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')

function onCreate(item: string) {
  items.value.push(item)

  value.value = item
}
</script>

<template>
  <B24SelectMenu
    v-model="value"
    create-item
    :items="items"
    class="w-[192px]"
    @create="onCreate"
  />
</template>
```

> !NOTE
> The create option shows when no match is found by default. Set it to `always` to show it even when similar values exist.

> [!TIP](https://bitrix24.github.io/b24ui/#emits)
> Use the `@create` event to handle the creation of the item. You will receive the event and the item as arguments.

### With fetched items

You can fetch items from an API and use them in the SelectMenu.

```vue [SelectMenuFetchExample.vue]
<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users',
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24SelectMenu
    :items="users"
    :loading="status === 'pending'"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    class="w-[192px]"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24SelectMenu>
</template>
```

### With ignore filter

Set the `ignore-filter` prop to `true` to disable the internal search and use your own search logic.

```vue [SelectMenuIgnoreFilterExample.vue]
<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import { refDebounced } from '@vueuse/core'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24SelectMenu
    v-model:search-term="searchTerm"
    :items="users"
    :loading="status === 'pending'"
    ignore-filter
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    class="w-[192px]"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24SelectMenu>
</template>
```

> !NOTE
> This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced){rel="nofollow"} to debounce the API calls.

### With filter fields

Use the `filter-fields` prop with an array of fields to filter on. Defaults to `[labelKey]`.

```vue [SelectMenuFilterFieldsExample.vue]
<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24SelectMenu
    :items="users"
    :loading="status === 'pending'"
    :filter-fields="['label', 'email']"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    class="w-[320px]"
    :b24ui="{ content: 'w-[320px]', viewport: 'w-[320px]' }"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>

    <template #item-label="{ item }">
      {{ item.label }}

      <span class="text-(--b24ui-typography-description-color)">
        {{ item.email }}
      </span>
    </template>
  </B24SelectMenu>
</template>
```

### With virtualization

Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.

> [!WARNING](https://github.com/unovue/reka-ui/issues/1885)
> When enabled, all groups are flattened into a single list due to a limitation of Reka UI.

```vue [SelectMenuVirtualizeExample.vue]
<script setup lang="ts">
import type { SelectMenuItem } from '@bitrix24/b24ui-nuxt'

const items: SelectMenuItem[] = Array(1000).fill(0).map((_, i) => ({
  label: `item-${i}`,
  value: i
}))
</script>

<template>
  <B24SelectMenu virtualize :items="items" class="w-[192px]" />
</template>
```

### With full content width

You can expand the content to the full width of its items by adding the `b24ui.content`,`b24ui.item` and `b24ui.viewport` slots.

```vue [SelectMenuContentWidthExample.vue]
<script setup lang="ts">
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24SelectMenu
    :items="users"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    :b24ui="{ content: 'min-w-fit', viewport: 'min-w-fit', item: 'min-w-fit' }"
    class="w-[192px]"
  >
    <template #item-label="{ item }">
      {{ item.label }}

      <span class="text-(--b24ui-typography-description-color)">
        {{ item.email }}
      </span>
    </template>
  </B24SelectMenu>
</template>
```

### As a CountryPicker

This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.

```vue [SelectMenuCountriesExample.vue]
<script setup lang="ts">
import CrmSearchIcon from '@bitrix24/b24icons-vue/crm/CrmSearchIcon'
import EarthIcon from '@bitrix24/b24icons-vue/main/EarthIcon'

const { data: countries, status, execute } = await useLazyFetch<{
  name: string
  code: string
  emoji: string
}[]>('/api/countries.json', {
  immediate: false
})

function onOpen() {
  if (!countries.value?.length) {
    execute()
  }
}
</script>

<template>
  <B24SelectMenu
    :items="countries"
    :loading="status === 'pending'"
    label-key="name"
    :search-input="{ icon: CrmSearchIcon }"
    placeholder="Select country"
    class="w-[192px]"
    @update:open="onOpen"
  >
    <template #leading="{ modelValue, b24ui }">
      <span v-if="modelValue" class="size-[26px] text-center">
        {{ modelValue?.emoji }}
      </span>
      <EarthIcon v-else :class="b24ui.leadingIcon()" />
    </template>
    <template #item-leading="{ item }">
      <span class="size-[26px] text-center">
        {{ item.emoji }}
      </span>
    </template>
  </B24SelectMenu>
</template>
```

## API

### Props

```ts
/**
 * Props for the SelectMenu component
 */
interface SelectMenuProps {
  id?: string | undefined;
  /**
   * The placeholder text when the select is empty.
   */
  placeholder?: string | undefined;
  /**
   * Whether to display the search input or not.
   * Can be an object to pass additional props to the input.
   * `{ placeholder: 'Search...', type: 'text', size: 'md' }`{lang="ts"}
   * @default "true"
   */
  searchInput?: boolean | InputProps<AcceptableValue> | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "sm" | "xss" | "xs" | "md" | "lg" | "xl" | undefined;
  /**
   * Removes padding from input
   */
  noPadding?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the select
   */
  rounded?: boolean | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  required?: boolean | undefined;
  /**
   * The icon displayed to open the menu.
   */
  trailingIcon?: IconComponent | undefined;
  /**
   * The icon displayed when an item is selected.
   */
  selectedIcon?: IconComponent | undefined;
  /**
   * The content of the menu.
   */
  content?: (Omit<ComboboxContentProps, "asChild" | "as" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>) | undefined;
  /**
   * Display an arrow alongside the menu.
   */
  arrow?: boolean | Omit<ComboboxArrowProps, "asChild" | "as"> | undefined;
  /**
   * Render the menu in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * Enable virtualization for large lists.
   * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
   * @default "false"
   */
  virtualize?: boolean | { overscan?: number | undefined; estimateSize?: number | undefined; } | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
   */
  valueKey?: GetItemKeys<ArrayOrNested<SelectMenuItem>> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the label.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<ArrayOrNested<SelectMenuItem>> | undefined;
  /**
   * When `items` is an array of objects, select the field to use as the description.
   * @default "\"description\""
   */
  descriptionKey?: GetItemKeys<ArrayOrNested<SelectMenuItem>> | undefined;
  items?: ArrayOrNested<SelectMenuItem> | undefined;
  /**
   * The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
   */
  defaultValue?: any;
  /**
   * The controlled value of the SelectMenu. Can be binded-with with `v-model`.
   */
  modelValue?: any;
  /**
   * Whether multiple options can be selected or not.
   */
  multiple?: boolean | undefined;
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  /**
   * Determines if custom user input that does not exist in options can be added.
   */
  createItem?: boolean | "always" | { position?: "bottom" | "top" | undefined; when?: "empty" | "always" | undefined; } | undefined;
  /**
   * Fields to filter items by.
   */
  filterFields?: string[] | undefined;
  /**
   * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
   */
  ignoreFilter?: boolean | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; arrow?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; } | undefined;
  /**
   * When `true`, prevents the user from interacting with listbox
   */
  disabled?: boolean | undefined;
  /**
   * The controlled open state of the Combobox. Can be binded with with `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * Whether to reset the searchTerm when the Combobox input blurred
   * @default "true"
   */
  resetSearchTermOnBlur?: boolean | undefined;
  /**
   * Whether to reset the searchTerm when the Combobox value is selected
   * @default "true"
   */
  resetSearchTermOnSelect?: boolean | undefined;
  /**
   * When `true`, hover over item will trigger highlight
   */
  highlightOnHover?: boolean | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  /**
   * @default "\"\""
   */
  searchTerm?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

### Slots

```ts
/**
 * Slots for the SelectMenu component
 */
interface SelectMenuSlots {
  leading(): any;
  default(): any;
  trailing(): any;
  empty(): any;
  item(): any;
  item-leading(): any;
  item-label(): any;
  item-description(): any;
  item-trailing(): any;
  content-top(): any;
  content-bottom(): any;
  create-item-label(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the SelectMenu component
 */
interface SelectMenuEmits {
  update:open: (payload: [value: boolean]) => void;
  change: (payload: [event: Event]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  focus: (payload: [event: FocusEvent]) => void;
  create: (payload: [item: string]) => void;
  highlight: (payload: [payload: { ref: HTMLElement; value: any; } | undefined]) => void;
  update:modelValue: (payload: [value: any]) => void;
  update:searchTerm: (payload: [value: string]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                         | Type                                                                                                                                                            |
| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `triggerRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLButtonElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    selectMenu: {
      slots: {
        root: 'isolate relative inline-flex items-center',
        base: 'relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center',
        value: 'truncate pointer-events-none',
        placeholder: 'truncate text-(--ui-color-design-plain-na-content-secondary)',
        content: [
          'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto',
          'origin-(--reka-combobox-content-transform-origin) '
        ],
        viewport: 'relative scroll-py-1 w-[240px] max-h-[40vh] overflow-x-hidden overflow-y-auto scrollbar-thin',
        arrow: 'fill-(--popup-window-background-color)',
        group: 'grid',
        empty: 'h-(--popup-window-delimiter-section-height) mt-(--menu-item-block-stack-space) py-[8px] select-none outline-none whitespace-nowrap text-center text-(length:--popup-window-delimiter-font-size)/(--ui-font-line-height-lg) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight)',
        label: 'w-full min-w-[195px] h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)',
        separator: 'my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)',
        item: 'group w-full min-w-[195px] h-[36px] px-[18px] mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=open]:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover) data-highlighted:bg-(--menu-popup-item-bg-color-hover) data-[state=open]:bg-(--menu-popup-item-bg-color-hover) transition-colors',
        itemLeadingIcon: 'shrink-0 size-[24px] text-(--ui-color-design-plain-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary) group-data-[state=checked]:text-(--ui-color-accent-main-primary) transition-colors',
        itemLeadingAvatar: 'shrink-0 size-[16px] me-[12px]',
        itemLeadingAvatarSize: '2xs',
        itemLeadingChip: 'shrink-0 size-[16px]',
        itemLeadingChipSize: 'sm',
        itemTrailing: 'ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center',
        itemTrailingIcon: 'shrink-0 size-[24px] text-(--ui-color-accent-main-primary)',
        itemWrapper: 'flex-1 flex flex-col min-w-0',
        itemLabel: 'truncate group-data-[state=checked]:text-(--ui-color-accent-main-primary)',
        itemDescription: 'truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
        input: 'border-b border-(--popup-window-delimiter-bg-color)',
        focusScope: 'flex flex-col min-h-0'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]'
          },
          xs: {
            base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]'
          },
          sm: {
            base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal]',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]'
          },
          md: {
            base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]'
          },
          lg: {
            base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          },
          xl: {
            base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        },
        colorItem: {
          'air-primary': {
            item: 'style-filled'
          },
          'air-primary-success': {
            item: 'style-filled-success'
          },
          'air-primary-alert': {
            item: 'style-filled-alert'
          },
          'air-primary-copilot': {
            item: 'style-filled-copilot'
          },
          'air-primary-warning': {
            item: 'style-filled-warning'
          },
          default: {
            item: 'style-old-default'
          },
          danger: {
            item: 'style-old-danger'
          },
          success: {
            item: 'style-old-success'
          },
          warning: {
            item: 'style-old-warning'
          },
          primary: {
            item: 'style-old-primary'
          },
          secondary: {
            item: 'style-old-secondary'
          },
          collab: {
            item: 'style-old-collab'
          },
          ai: {
            item: 'style-old-ai'
          }
        },
        virtualize: {
          true: {
            viewport: 'p-1 isolate'
          },
          false: {
            viewport: ''
          }
        },
        addNew: {
          true: {
            group: '',
            item: 'text-(--menu-popup-item-color) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover)',
            itemLabel: 'flex flex-row flex-nowrap items-center justify-start gap-2',
            itemLeadingIcon: 'size-[20px] rounded-full text-(--ui-color-base-white-fixed) bg-(--ui-color-design-selection-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-base-white-fixed) group-data-highlighted:not-data-disabled:bg-(--ui-color-design-selection-content-icon) group-data-[state=checked]:text-(--ui-color-base-white-fixed) group-data-[state=checked]:bg-(--ui-color-design-selection-content-icon)'
          }
        }
      },
      compoundVariants: [
        {
          colorItem: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)'
          }
        },
        {
          colorItem: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          colorItem: 'default',
          active: false,
          class: ''
        },
        {
          colorItem: 'default',
          active: true,
          class: ''
        },
        {
          colorItem: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background-active) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-icon) group-data-highlighted:text-(--b24ui-icon) group-data-[state=open]:text-(--b24ui-icon)'
          }
        },
        {
          colorItem: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# Separator

> Divides content in a horizontal or vertical manner.

## Usage

Use the Separator component as-is to separate content.

```vue

<template>
  <B24Separator />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the Separator. Defaults to `horizontal`.

```vue

<template>
  <B24Separator orientation="vertical" class="h-48" />
</template>

```

### Label

Use the `label` prop to display a label in the middle of the Separator.

```vue

<template>
  <B24Separator label="Bitrix24 UI" />
</template>

```

### Icon

Use the `icon` prop to display an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} in the middle of the Separator.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Separator :icon="RocketIcon" />
</template>

```

### Avatar

Use the `avatar` prop to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) in the middle of the Separator.

```vue

<template>
  <B24Separator :avatar="{src:'/b24ui/avatar/employee.png'}" />
</template>

```

### Accent

Use the `accent` prop to change the variant of the Separator. Defaults to `default`.

```vue

<template>
  <B24Separator accent="accent" type="solid" />
</template>

```

### Type

Use the `type` prop to change the type of the Separator. Defaults to `solid`.

```vue

<template>
  <B24Separator type="dashed" accent="accent" size="thick" />
</template>

```

### Size

Use the `size` prop to change the size of the Separator. Defaults to `thin`.

```vue

<template>
  <B24Separator size="thick" />
</template>

```

## API

### Props

```ts
/**
 * Props for the Separator component
 */
interface SeparatorProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * Display a label in the middle.
   */
  label?: string | undefined;
  /**
   * Display an icon in the middle
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar in the middle
   */
  avatar?: AvatarProps | undefined;
  /**
   * @default "\"default\""
   */
  accent?: "default" | "accent" | "less" | undefined;
  /**
   * @default "\"thin\""
   */
  size?: "thin" | "thick" | undefined;
  /**
   * @default "\"solid\""
   */
  type?: "solid" | "double" | "dashed" | "dotted" | undefined;
  /**
   * The orientation of the separator.
   * @default "\"horizontal\""
   */
  orientation?: DataOrientation | undefined;
  b24ui?: { root?: ClassNameValue; border?: ClassNameValue; container?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; label?: ClassNameValue; } | undefined;
  /**
   * Whether or not the component is purely decorative. <br>When `true`, accessibility-related attributes
   * are updated so that that the rendered element is removed from the accessibility tree.
   */
  decorative?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Separator component
 */
interface SeparatorSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    separator: {
      slots: {
        root: 'flex items-center align-center text-center',
        border: '',
        container: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-normal) flex',
        icon: 'shrink-0 size-7',
        avatar: 'shrink-0',
        avatarSize: 'sm',
        label: ''
      },
      variants: {
        accent: {
          default: {
            container: 'text-(--ui-color-design-plain-na-content-secondary) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
            border: 'border-(--ui-color-divider-vibrant-default)'
          },
          accent: {
            container: 'text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
            border: 'border-(--ui-color-divider-vibrant-accent-more)'
          },
          less: {
            container: 'text-(--ui-color-base-6) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)',
            border: 'border-(--ui-color-divider-vibrant-less)'
          }
        },
        orientation: {
          horizontal: {
            root: 'w-full flex-row',
            border: 'w-full',
            container: 'mx-3 whitespace-nowrap'
          },
          vertical: {
            root: 'h-full flex-col',
            border: 'h-full',
            container: 'my-2'
          }
        },
        size: {
          thin: '',
          thick: ''
        },
        type: {
          solid: {
            border: 'border-solid'
          },
          dashed: {
            border: 'border-dashed'
          },
          dotted: {
            border: 'border-dotted'
          },
          double: {
            border: 'border-double'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          size: 'thin',
          class: {
            border: 'border-t-(length:--ui-border-width-thin)'
          }
        },
        {
          orientation: 'horizontal',
          size: 'thick',
          class: {
            border: 'border-t-(length:--ui-border-width-thick)'
          }
        },
        {
          orientation: 'vertical',
          size: 'thin',
          class: {
            border: 'border-s-(length:--ui-border-width-thin)'
          }
        },
        {
          orientation: 'vertical',
          size: 'thick',
          class: {
            border: 'border-s-(length:--ui-border-width-thick)'
          }
        },
        {
          type: 'double',
          size: 'thick',
          orientation: 'horizontal',
          class: {
            border: 'border-t-[length:calc(var(--ui-border-width-thick)_+_1px)]'
          }
        },
        {
          type: 'double',
          size: 'thick',
          orientation: 'vertical',
          class: {
            border: 'border-s-[length:calc(var(--ui-border-width-thick)_+_1px)]'
          }
        }
      ],
      defaultVariants: {
        accent: 'default',
        size: 'thin',
        type: 'solid'
      }
    }
  }
})
```

---

# SidebarLayout

> You incorporate a sidebar in the slider and CRM entity tab embedding. Overall, it's stylish, trendy, and youthful

## Usage

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/getting-started/theme/components.md#customize-theme)
> The styling process is described on the page `Theme`

### Layout

The component must be used as a [`layout`](https://github.com/bitrix24/b24ui/blob/main/playgrounds/nuxt/app/layouts/default.vue){rel="nofollow"}.

```vue [SidebarLayoutExample.vue]
<script setup lang="ts">
import { ref } from 'vue'
import type { SidebarLayoutProps } from '@bitrix24/b24ui-nuxt'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'
import BusinesProcessStagesIcon from '@bitrix24/b24icons-vue/outline/BusinesProcessStagesIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'

const checkedUseLightContent = ref(true)

// Manage loading state
const handleAction = async () => {
  // Performing an asynchronous operation
  await new Promise(resolve => setTimeout(resolve, 2_000))
}

// This is for demonstration purposes only
const customUIForDemo = {
  root: 'h-[400px] min-h-[400px]',
  loadingWrapper: 'h-[400px] min-h-[400px]',
  sidebar: 'relative z-[0]',
  contentWrapper: 'lg:pl-0',
  container: 'min-h-[calc(100vh-var(--topbar-height)-32px)]'
} as SidebarLayoutProps['b24ui']
</script>

<template>
  <B24SidebarLayout
    :use-light-content="checkedUseLightContent"
    :b24ui="customUIForDemo"
  >
    <template #sidebar>
      <!-- Your sidebar -->
      <B24SidebarHeader>
        <!-- Navigation header -->
        <div class="h-full flex items-center relative my-0 ps-[25px] pe-xs rtl:pe-[25px]">
          <ProseH4 class="font-(--ui-font-weight-medium) mb-0">
            SideBar
          </ProseH4>
        </div>
      </B24SidebarHeader>
      <B24SidebarBody>
        <!-- Navigation elements -->
        <B24SidebarSection>
          <B24NavigationMenu
            :items="[{ label: 'Page 1', type: 'trigger', active: true }, { label: 'Page 2', type: 'trigger' }]"
            orientation="vertical"
          />
        </B24SidebarSection>

        <B24SidebarSpacer />
        <B24SidebarSection>
          <B24NavigationMenu
            :items="[{ label: 'Page 3', type: 'trigger' }, { label: 'Page 4', type: 'trigger' }]"
            orientation="vertical"
          />
        </B24SidebarSection>
      </B24SidebarBody>
      <B24SidebarFooter>
        <!-- Navigation footer -->
        <B24SidebarSection>
          <B24PageLinks
            :links="[
              {
                label: 'b24ui',
                to: 'https://bitrix24.github.io/b24ui/',
                target: '_blank'
              }
            ]"
            class="mb-[12px]"
          />
          <B24Button
            block
            label="Docs"
            color="air-boost"
            size="sm"
            loading-auto
            :icon="RocketIcon"
            to="https://bitrix24.github.io/b24ui/"
            target="_blank"
          />
        </B24SidebarSection>
      </B24SidebarFooter>
    </template>

    <template #navbar>
      <!-- Your navigation bar -->
      <B24NavbarSection class="hidden sm:inline-flex">
        <B24NavigationMenu
          :items="[{ label: 'Page 1', type: 'trigger', active: true }, { label: 'Page 2', type: 'trigger' }]"
          orientation="horizontal"
        />
      </B24NavbarSection>
      <B24NavbarSpacer />
      <B24NavbarSection class="flex-row items-center justify-start gap-4">
        <B24DropdownMenu
          arrow
          :items="[{ label: 'Value 1' }, { label: 'Value 2' }]"
        >
          <B24Button
            color="air-secondary-accent"
            size="xs"
            rounded
            use-dropdown
            label="Action"
          />
        </B24DropdownMenu>
        <B24Switch
          v-model="checkedUseLightContent"
          size="xs"
        />
        <B24Button
          label="Reload"
          color="air-secondary-accent"
          rounded
          size="xs"
          loading-auto
          @click="handleAction"
        />
      </B24NavbarSection>
    </template>

    <template #content-top>
      <div class="w-full flex flex-col gap-[20px] lg:mt-[22px]">
        <div class="lg:rounded-(--ui-border-radius-md) lg:border-1 border-(--ui-color-design-tinted-na-stroke) backdrop-blur-md bg-(--ui-color-design-tinted-na-bg) p-[24px] lg:px-[22px] lg:py-[15px] flex flex-col items-start justify-between gap-[14px]">
          <div class="w-full flex flex-row items-center justify-between gap-[20px]">
            <div class="flex-1 flex flex-row items-center justify-end gap-[12px]">
              <B24Avatar
                :icon="BusinesProcessStagesIcon"
                alt="Workflows"
                size="xl"
                :b24ui="{
                  root: 'bg-(--ui-color-primary-alt)',
                  icon: 'size-[36px] text-(--ui-color-palette-white-base)'
                }"
              />
              <div class="flex-1">
                <!-- Page Title -->
                <ProseH1 class="mb-0 text-(--b24ui-typography-label-color) leading-[29px] font-(--ui-font-weight-light)">
                  Some title
                </ProseH1>
              </div>
            </div>
            <div class="flex-1 flex flex-row items-center justify-end gap-[12px]">
              <B24DropdownMenu
                :items="[{ label: 'Value 1' }, { label: 'Value 2' }]"
                :content="{ side: 'bottom', align: 'end' }"
              >
                <B24Button size="sm" :icon="MoreMIcon" color="air-secondary-accent" />
              </B24DropdownMenu>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template #content-actions>
      <!-- Actions on page -->
      <div class="hidden lg:inline-flex">
        <B24Button
          color="air-secondary-accent"
          label="Action"
          loading-auto
          @click="handleAction"
        />
      </div>
    </template>

    <!-- Main content -->
    <div>
      <ProseP>Your main content goes here</ProseP>
    </div>

    <template #content-bottom>
      <!-- Bottom of page -->
      <ProseP small accent="less-more" class="mt-[12px] px-[22px] pb-[2px]">
        Footer or additional information
      </ProseP>
    </template>
  </B24SidebarLayout>
</template>
```

> !TIP
> On mobile devices the sidebar is hidden and accessible via `slideover`

### Inner

> !WARNING
> If the component needs to be placed inside the content, then the props `isInner` must be set.

You can control the content area scrollbar using the props `offContentScrollbar`.

```vue [SidebarLayoutInnerExample.vue]
<script setup lang="ts">
import type { SidebarLayoutProps } from '@bitrix24/b24ui-nuxt'
import NotificationIcon from '@bitrix24/b24icons-vue/outline/NotificationIcon'
import SidebarLayoutInnerAction from './SidebarLayoutInnerAction.vue'

// Manage loading state
const handleAction = async () => {
  // Performing an asynchronous operation
  await new Promise(resolve => setTimeout(resolve, 4_000))
}

// This is for demonstration purposes only
const customUIForDemo = {
  root: 'h-[400px] min-h-[400px]',
  loadingWrapper: 'h-[400px] min-h-[400px]',
  sidebar: 'relative z-[0]',
  contentWrapper: 'lg:pl-0',
  container: 'min-h-[calc(100vh-var(--topbar-height)-12px)]'
} as SidebarLayoutProps['b24ui']

// This is for demonstration purposes only
const customUIInnerForDemo = {
  loadingWrapper: 'h-[400px] min-h-[400px]'
} as SidebarLayoutProps['b24ui']
</script>

<template>
  <B24SidebarLayout
    :use-light-content="false"
    :b24ui="customUIForDemo"
  >
    <template #navbar>
      <!-- Your navigation bar -->
      <B24NavbarSection class="hidden sm:inline-flex">
        <B24NavigationMenu
          :items="[{ label: 'Page 1', type: 'trigger', active: true }, { label: 'Page 2', type: 'trigger' }]"
          orientation="horizontal"
        />
      </B24NavbarSection>
      <B24NavbarSpacer />
      <B24NavbarSection>
        <B24Button
          label="Reload"
          color="air-secondary-accent"
          rounded
          size="xs"
          loading-auto
          @click="handleAction"
        />
      </B24NavbarSection>
    </template>

    <!-- Main content -->
    <div class="mt-[12px] relative h-full rounded-t-[12px] overflow-hidden">
      <div class="size-full rounded-t-[12px]">
        <B24SidebarLayout
          :use-light-content="false"
          is-inner
          off-content-scrollbar
          :b24ui="{
            ...customUIInnerForDemo,
            root: [
              'edge-light',
              '[--leftmenu-bg-expanded:#eef2f4!important]',
              '[--air-theme-bg-color:#eef2f4]',
              '[--air-theme-bg-size:240px_240px]',
              '[--air-theme-bg-repeat:repeat]',
              '[--air-theme-bg-position:0_0]',
              '[--air-theme-bg-attachment:fixed]',
              '[--air-theme-bg-image:url(/bg/edge-light-v1.svg)]',
              '[--air-theme-bg-image-blurred:url(/bg/edge-light-v1-blurred.webp)]'
            ].join(' '),
            contentWrapper: [
              'bg-[url(/bg/pattern-1.png)] bg-cover bg-center bg-fixed bg-no-repeat bg-[#799fe1]/10',
              'p-0 px-0 ps-0 pe-0 lg:p-0 lg:px-0 lg:ps-0 lg:pe-0 '
            ].join(' '),
            containerWrapper: 'h-full relative',
            containerWrapperInner: 'flex flex-col items-center justify-center'
          } as SidebarLayoutProps['b24ui']"
        >
          <template #sidebar>
            <B24SidebarHeader>
              <div class="text-[#f8f7f7] h-full flex items-center relative my-0 ps-[25px] pe-xs rtl:pe-[25px]">
                <ProseH6 class="font-(--ui-font-weight-medium) mb-0">
                  Settings
                </ProseH6>
              </div>
            </B24SidebarHeader>
            <B24SidebarBody>
              <div class="space-y-6 px-[25px]">
                <B24Switch label="Expand" class="mt-1" />
                <B24Switch label="isShowProgress" class="mt-1" />
              </div>
            </B24SidebarBody>
          </template>
          <template #navbar>
            <ProseH4 class="font-(--ui-font-weight-medium) mb-0">
              Demo
            </ProseH4>
            <B24NavbarSpacer />
          </template>
          <template #default>
            <div class="mt-[22px] text-(--ui-color-design-filled-market-content) max-w-[550px] mx-(--content-area-shift) px-[60px] py-[20px] rounded-[24px] bg-[#525c69]/20 flex flex-col items-center justify-center gap-[20px]">
              <B24Avatar
                :icon="NotificationIcon"
                alt="Toast"
                size="xl"
                :b24ui="{
                  root: 'bg-transparent ring-2 ring-(--ui-color-design-filled-market-content)/50',
                  icon: 'size-[44px] text-(--ui-color-design-filled-market-content)'
                }"
              />
              <ProseH2 class="text-center text-(--ui-color-design-filled-market-content) leading-[29px] mb-0">
                Some text
              </ProseH2>
              <div class="flex flex-col sm:flex-row items-center justify-center gap-[15px]">
                <SidebarLayoutInnerAction />
              </div>
            </div>
          </template>
        </B24SidebarLayout>
      </div>
    </div>
  </B24SidebarLayout>
</template>
```

### Slideover

It should be understood that the [`Slideover`](https://bitrix24.github.io/b24ui/raw/docs/components/slideover.md) component displays data using the `SidebarLayout` component.

```vue [SlideoverSimpleListElementsExample.vue]
<script setup lang="ts">
import { ref } from 'vue'
import TrendUpIcon from '@bitrix24/b24icons-vue/outline/TrendUpIcon'
import TrendDownIcon from '@bitrix24/b24icons-vue/outline/TrendDownIcon'
import BusinesProcessStagesIcon from '@bitrix24/b24icons-vue/outline/BusinesProcessStagesIcon'

const openListItem = ref(false)

// Manage loading state
const handleAction = async () => {
  await new Promise(resolve => setTimeout(resolve, 2_000))
}
</script>

<template>
  <B24Slideover
    ref="currentSlideoverRef"
    title="Some list"
    description="Some description"
    :use-light-content="false"
    :b24ui="{
      content: 'sm:max-w-[970px] sm:top-[275px] sm:max-h-[calc(100%-275px)]',
      sidebarLayoutRoot: [
        'edge-dark',
        'edge-dark:[--air-theme-bg-color:#7c235b]',
        'edge-dark:[--air-theme-bg-size:cover]',
        'edge-dark:[--air-theme-bg-repeat:no-repeat]',
        'edge-dark:[--air-theme-bg-position:0_0]',
        'edge-dark:[--air-theme-bg-attachment:local]',
        'edge-dark:[--air-theme-bg-image:url(/bg/edge-dark-v2.jpg)]',
        'edge-dark:[--air-theme-bg-image-blurred:url(/bg/edge-dark-v2-blurred.webp)]'
      ].join(' '),
      sidebarLayoutLoadingIcon: 'text-(--ui-color-gray-70)'
    }"
  >
    <B24Button label="Some list" color="air-boost" />
    <template #body>
      <div class="light mt-[22px] rounded-(--ui-border-radius-md) bg-(--ui-color-background-primary)">
        <B24TableWrapper
          row-hover
          class="overflow-x-auto w-full"
        >
          <table>
            <!-- head -->
            <thead>
              <tr>
                <th>#</th>
                <th>Company</th>
                <th>Status</th>
                <th>Amount (USD)</th>
              </tr>
            </thead>
            <tbody>
              <!-- row 1 -->
              <tr>
                <th>1</th>
                <td><B24Link @click="openListItem = true">Tech Innovators Inc.</B24Link></td>
                <td><B24Badge label="Proposal Sent" use-link use-close /></td>
                <td>50,000</td>
              </tr>
              <!-- row 2 -->
              <tr>
                <th>2</th>
                <td><B24Link @click="openListItem = true">Global Solutions Ltd.</B24Link></td>
                <td><B24Badge label="Negotiation" use-link inverted use-close /></td>
                <td>120,000</td>
              </tr>
              <!-- row 3 -->
              <tr>
                <th>3</th>
                <td><B24Link @click="openListItem = true">Future Enterprises</B24Link></td>
                <td><B24Chip standalone color="air-primary-warning" text="Contract Signed" size="lg" :trailing-icon="TrendUpIcon" /></td>
                <td>200,000</td>
              </tr>
              <!-- row 4 -->
              <tr>
                <th>4</th>
                <td><B24Link @click="openListItem = true">Bright Ideas Co.</B24Link></td>
                <td>
                  <B24Chip
                    standalone
                    text="Initial Contact"
                    color="air-primary-alert"
                    size="lg"
                    inverted
                    :trailing-icon="TrendDownIcon"
                  />
                </td>
                <td>15,000</td>
              </tr>
              <!-- row 5 -->
              <tr>
                <th>5</th>
                <td><B24Link @click="openListItem = true">NextGen Technologies</B24Link></td>
                <td>
                  <B24Chip
                    standalone
                    text="Important"
                    size="lg"
                    color="air-primary-alert"
                    :b24ui="{ base: 'style-filled-boost' }"
                  />
                </td>
                <td>300,000</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th colspan="3" class="text-right">
                  Total:
                </th>
                <td>
                  685,000
                </td>
              </tr>
            </tfoot>
          </table>
        </B24TableWrapper>
      </div>
    </template>

    <template #footer>
      <B24Button
        label="Reload"
        color="air-primary"
        loading-auto
        @click="handleAction"
      />
      <B24ModalDialogClose>
        <B24Button label="Cancel" color="air-tertiary" />
      </B24ModalDialogClose>
    </template>
  </B24Slideover>
  <B24Slideover
    v-model:open="openListItem"
    :close="{ label: 'Item' }"
    title="Item"
    description="Some description"
    :use-light-content="false"
    :b24ui="{
      content: 'sm:max-w-[965px] sm:top-[375px] sm:max-h-[calc(100%-375px)]',
      body: 'relative',
      sidebarLayoutRoot: [
        'edge-light',
        'edge-light:[--air-theme-bg-color:#eef2f4]',
        'edge-light:[--air-theme-bg-size:auto]',
        'edge-light:[--air-theme-bg-repeat:no-repeat]',
        'edge-light:[--air-theme-bg-position:0_0]',
        'edge-light:[--air-theme-bg-attachment:local]',
        'edge-light:[--air-theme-bg-image:url(/bg/slider-ring-blurred.webp)]',
        'edge-light:[--air-theme-bg-image-blurred:url(/bg/slider-ring-blurred.webp)]'
      ].join(' ')
    }"
  >
    <template #header>
      <div
        class="w-full pt-(--ui-space-inset-md2) pb-[calc(var(--ui-space-inset-md2)+10px)] px-(--ui-space-inset-lg) rounded-(--ui-border-radius-3xl) bg-(--ui-color-background-primary)/80 flex flex-row items-center justify-between gap-[20px]"
      >
        <B24Avatar
          :icon="BusinesProcessStagesIcon"
          alt="Workflows"
          size="2xl"
          :b24ui="{
            root: 'bg-(--ui-color-primary)',
            icon: 'size-[48px] text-(--ui-color-palette-white-base)'
          }"
        />
        <div class="flex-1">
          <ProseH1 class="text-(--ui-color-text-primary) leading-[29px] font-(--ui-font-weight-light)">
            Workflows
          </ProseH1>
          <ProseP small accent="less">
            Automate your workflows, control every stage and manage workflows from your mobile.
          </ProseP>
        </div>
      </div>
    </template>
    <template #body>
      <Placeholder class="w-full h-[300px]" />
    </template>
    <template #footer>
      <B24ModalDialogClose>
        <B24Button label="Continue" color="air-primary" />
      </B24ModalDialogClose>
      <B24ModalDialogClose>
        <B24Button label="Back" color="air-tertiary" />
      </B24ModalDialogClose>
    </template>
  </B24Slideover>
</template>
```

> !TIP
> Many examples can be found on the [`playground`](https://bitrix24.github.io/b24ui/demo/components/slideover){rel="nofollow"} and also seen in the [`demo`](https://github.com/bitrix24/b24ui/blob/main/playgrounds/demo/app/pages/components/slideover.vue){rel="nofollow"} version.

## API

### Props

```ts
/**
 * Props for the SidebarLayout component
 */
interface SidebarLayoutProps {
  /**
   * The element or component this component should render as.
   * @default "\"div\""
   */
  as?: any;
  /**
   * The content is placed on a light background.
   * @default "true"
   */
  useLightContent?: boolean | undefined;
  /**
   * Set inner mode. Use in slider, modal and etc
   * @default "false"
   */
  isInner?: boolean | undefined;
  /**
   * Off scrollbar control of the content area in inner mode.
   * @default "false"
   */
  offContentScrollbar?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; sidebar?: ClassNameValue; sidebarSlideoverContainer?: ClassNameValue; sidebarSlideover?: ClassNameValue; sidebarSlideoverBtnClose?: ClassNameValue; contentWrapper?: ClassNameValue; header?: ClassNameValue; headerMenuIcon?: ClassNameValue; headerWrapper?: ClassNameValue; pageWrapper?: ClassNameValue; container?: ClassNameValue; containerWrapper?: ClassNameValue; pageTopWrapper?: ClassNameValue; pageActionsWrapper?: ClassNameValue; containerWrapperInner?: ClassNameValue; pageRightWrapper?: ClassNameValue; pageBottomWrapper?: ClassNameValue; loadingWrapper?: ClassNameValue; loadingIcon?: ClassNameValue; } | undefined;
  /**
   * The id of the SidebarLayout.
   */
  id?: string | undefined;
}
```

### Slots

```ts
/**
 * Slots for the SidebarLayout component
 */
interface SidebarLayoutSlots {
  /**
   * Left sidebar.
   */
  sidebar(): any;
  /**
   * Top menu.
   */
  navbar(): any;
  /**
   * Content above the page. Used for title, filter, etc.
   */
  content-top(): any;
  /**
   * Content above the page. Use for show actions.
   */
  content-actions(): any;
  /**
   * The page content.
   */
  default(): any;
  /**
   * Right sidebar.
   */
  content-right(): any;
  /**
   * Content below the page.
   */
  content-bottom(): any;
  /**
   * Loading state.
   */
  loading(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    sidebarLayout: {
      slots: {
        root: 'sidebar-layout text-(--b24ui-typography-label-color) w-full flex',
        sidebar: 'air-sidebar before:absolute before:inset-0 before:z-[-1] before:bg-(--leftmenu-bg-expanded) w-[240px] pe-[3px] rtl:me-[14px] inset-y-0 left-0 max-lg:hidden',
        sidebarSlideoverContainer: 'w-full sm:max-w-80',
        sidebarSlideover: 'h-full overflow-hidden flex flex-col text-(--b24ui-typography-label-color) bg-(--ui-color-base-white-fixed) dark:bg-(--ui-color-bg-content-primary) edge-dark:bg-[#21334cf0] ring-1 ring-(--ui-color-divider-vibrant-less) shadow-xs rounded-none',
        sidebarSlideoverBtnClose: '-mb-3 px-4 pt-3',
        contentWrapper: 'flex-1 flex flex-col',
        header: 'air-header px-(--content-area-shift) min-h-(--topbar-height) flex items-center gap-x-1',
        headerMenuIcon: 'lg:hidden',
        headerWrapper: 'min-w-0 flex-1 h-full',
        pageWrapper: 'flex flex-col lg:grid lg:grid-cols-12 lg:gap-[22px]',
        container: 'lg:col-span-12 lg:min-w-0 flex-1 flex flex-col lg:gap-[22px]',
        containerWrapper: 'grow group/layout-content',
        pageTopWrapper: 'text-(--ui-color-base-1) flex items-center gap-[12px]',
        pageActionsWrapper: 'flex flex-col md:flex-row items-start md:items-center justify-start gap-[12px]',
        containerWrapperInner: 'size-full',
        pageRightWrapper: '',
        pageBottomWrapper: '',
        loadingWrapper: 'cursor-wait w-full h-dvh flex flex-row flex-nowrap items-center justify-center',
        loadingIcon: 'text-(--ui-color-design-plain-content-icon-secondary) size-[110px] animate-spin-slow'
      },
      variants: {
        inner: {
          true: {
            root: '--inner light relative isolate h-full overflow-hidden',
            sidebar: 'relative z-[0]',
            header: 'relative',
            container: 'mt-0',
            containerWrapper: '',
            pageBottomWrapper: 'flex-0'
          },
          false: {
            root: '--app max-lg:flex-col',
            sidebar: 'h-screen lg:sticky',
            header: 'relative',
            container: 'relative',
            containerWrapper: ''
          }
        },
        offContentScrollbar: {
          false: '',
          true: ''
        },
        useSidebar: {
          true: '',
          false: ''
        },
        useLightContent: {
          true: {
            containerWrapper: 'light text-(--ui-color-text-primary) bg-(--ui-color-bg-content-primary)',
            loadingIcon: 'edge-dark:text-(--ui-color-gray-70)'
          },
          false: {
            pageWrapper: 'px-(--content-area-shift)',
            container: ''
          }
        },
        loading: {
          true: ''
        },
        useNavbar: {
          true: '',
          false: ''
        },
        useRightBar: {
          true: {
            pageWrapper: '',
            container: 'lg:col-span-10',
            pageRightWrapper: 'lg:col-span-2 order-first lg:order-last'
          },
          false: {
            container: ''
          }
        }
      },
      compoundVariants: [
        {
          inner: true,
          useLightContent: true,
          class: {
            container: '',
            pageTopWrapper: 'px-0 lg:px-0',
            pageActionsWrapper: 'px-0 lg:px-0',
            containerWrapper: 'p-[20px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          inner: false,
          useLightContent: true,
          class: {
            container: '',
            containerWrapper: 'p-6 lg:px-[22px] lg:py-[15px] lg:rounded-(--ui-border-radius-md)'
          }
        },
        {
          inner: true,
          offContentScrollbar: false,
          class: {}
        },
        {
          inner: true,
          useSidebar: [
            true,
            false
          ],
          class: {
            pageWrapper: 'pb-[20px] lg:pt-0 lg:px-[20px] lg:ps-[20px] lg:pe-[20px]'
          }
        },
        {
          inner: false,
          useSidebar: true,
          class: {
            header: 'ps-[calc(var(--content-area-shift)-10px)] pe-[calc(var(--content-area-shift))] lg:px-(--content-area-shift)',
            pageWrapper: 'lg:px-(--content-area-shift)',
            container: '',
            contentWrapper: ''
          }
        },
        {
          inner: false,
          useSidebar: false,
          class: {
            pageWrapper: 'px-(--content-area-shift)',
            container: '',
            contentWrapper: 'lg:pl-0'
          }
        },
        {
          inner: true,
          useNavbar: [
            true,
            false
          ],
          class: {
            container: 'h-full'
          }
        },
        {
          inner: false,
          useNavbar: true,
          class: {
            container: 'h-auto'
          }
        },
        {
          inner: false,
          useNavbar: false,
          class: {
            container: 'h-full'
          }
        }
      ],
      defaultVariants: {
        inner: false,
        noContentScrollbar: false,
        useLightContent: true
      }
    }
  }
})
```

---

# Skeleton

> A toggle control for switching between two states.

## Usage

Use the Skeleton component as-is to display a placeholder.

```vue [SkeletonExample.vue]
<template>
  <div class="flex items-center gap-4">
    <B24Skeleton class="h-12 w-12 rounded-full" />

    <div class="grid gap-2">
      <B24Skeleton class="h-4 w-[250px]" />
      <B24Skeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>
```

### Accent

Use the `accent` prop to change the variant of the Skeleton.

```vue [SkeletonAccentExample.vue]
<template>
  <div class="grid gap-2">
    <B24Skeleton accent="default" class="h-4 w-[250px]" />
    <B24Skeleton accent="accent" class="h-4 w-[200px]" />
    <B24Skeleton accent="less" class="h-4 w-[150px]" />
  </div>
</template>
```

## Examples

### Something more complex

Example of a loading indicator for a task creation form.

```vue [SkeletonTaskExample.vue]
<template>
  <div class="w-full flex flex-col flex-nowrap p-4 bg-base-50 dark:bg-base-dark">
    <div class="mb-4 flex flex-row flex-nowrap items-center justify-between gap-2 ">
      <B24Skeleton class="ml-xs2 h-xs2 w-[38%] rounded-3xs" />
      <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
        <div class="border-2 border-gray-200 dark:border-gray-800 size-[40px] rounded-2xs flex items-center justify-center">
          <B24Skeleton class="h-xs2 w-[10px] rounded-3xs" />
        </div>
        <div class="border-2 border-gray-200 dark:border-gray-800 h-[40px] w-[150px] px-lg rounded-2xs flex items-center justify-center">
          <B24Skeleton class="h-xs2 w-full rounded-3xs" />
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-white/10 rounded-md p-lg flex flex-col flex-nowrap items-start justify-between">
      <div class="mb-12 w-full flex flex-col items-start justify-start gap-2">
        <B24Skeleton class="h-xs2 w-[76%] rounded-3xs mb-1.5" />
        <B24Skeleton class="h-xs w-[76%] rounded-3xs" />
        <B24Skeleton class="h-xs w-[76%] rounded-3xs" />
        <B24Skeleton class="h-xs w-[40%] rounded-3xs" />
      </div>

      <div class="mb-3 bg-gray-20 dark:bg-gray-900 w-full h-14 rounded-md" />
      <div class="mb-6 bg-gray-20 dark:bg-gray-900 w-full h-40 rounded-md" />
      <B24Skeleton class="mb-4 h-xs w-[42%] rounded-3xs" />
      <div class="mb-4 pt-4 w-full flex flex-row flex-nowrap items-center justify-between gap-2 border-t-1 border-t-gray-100 dark:border-t-gray-900 overflow-hidden">
        <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
          <div class="bg-green-350 dark:bg-green-800 h-[40px] w-[100px] px-lg rounded-2xs flex items-center justify-center">
            <B24Skeleton class="h-xs2 w-full rounded-3xs bg-gray-50" />
          </div>
          <div class="border-2 border-gray-200 dark:border-gray-800 h-[40px] w-[150px] px-lg rounded-2xs flex items-center justify-center">
            <B24Skeleton class="h-xs2 w-full rounded-3xs" />
          </div>
        </div>
        <div class="flex flex-row flex-nowrap items-center justify-between gap-4">
          <div class="w-[140px]">
            <B24Skeleton class="h-xs2 w-full rounded-3xs" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the Skeleton component
 */
interface SkeletonProps {
  /**
   * @default "\"default\""
   */
  accent?: "default" | "accent" | "less" | undefined;
  /**
   * The element or component this component should render as.
   */
  as?: any;
  b24ui?: { base?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Skeleton component
 */
interface SkeletonSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    skeleton: {
      slots: {
        base: 'animate-pulse rounded-(--ui-border-radius-md) '
      },
      variants: {
        accent: {
          default: 'bg-(--ui-color-g-glass-grey-bg-1)',
          accent: 'bg-(--ui-color-g-glass-grey-bg-2)',
          less: 'bg-(--ui-color-g-glass-grey-bg-3)'
        }
      },
      defaultVariants: {
        accent: 'default'
      }
    }
  }
})
```

---

# Slideover

> A dialog that slides in from any side of the screen.

## Usage

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) or any other component in the default slot of the Slideover.

Then, use the `#content` slot to add the content displayed when the Slideover is open.

```vue

<template>
  <B24Slideover :b24ui="{content:'light bg-(--ui-color-base-7) sm:top-[300px] sm:max-h-[calc(100%-300px)]'}">
<B24Button label="Open" />

  <template #content>
    
<Placeholder class="edge-light h-full m-4" />

  </template>

</B24Slideover>
</template>

```

You can also use the `#header`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}, `#body`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} and `#footer`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} slots to customize the Slideover's content.

### Title

Use the `title` prop to set the title of the Slideover's header.

```vue

<template>
  <B24Slideover title="Slideover with title">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-full" />

  </template>

</B24Slideover>
</template>

```

### Description

Use the `description` prop to set the description of the Slideover's header.

```vue

<template>
  <B24Slideover title="Slideover with description" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-full" />

  </template>

</B24Slideover>
</template>

```

### Close

Use the `close` prop to customize or hide the close button (with `false` value) displayed in the Slideover's header.

You can pass any property from the [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component to customize it.

```vue

<template>
  <B24Slideover title="Slideover with close button" :close="{color:'air-secondary-accent-2'}">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-full" />

  </template>

</B24Slideover>
</template>

```

> !NOTE
> The close button is not displayed if the `#content` slot is used as it's a part of the header.

### Close Icon

Use the `close-icon` prop to customize the close button [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Slideover title="Slideover with close button" :close-icon="RocketIcon">
<B24Button label="Open" />
</B24Slideover>
</template>

```

### Side

Use the `side` prop to set the side of the screen where the Slideover will slide in from. Defaults to `bottom`.

```vue

<template>
  <B24Slideover side="bottom" title="Slideover with side">
<B24Button label="Open" />
</B24Slideover>
</template>

```

### Transition

Use the `transition` prop to control whether the Slideover is animated or not. Defaults to `true`.

```vue

<template>
  <B24Slideover :transition="false" title="Slideover without transition">
<B24Button label="Open" />
</B24Slideover>
</template>

```

### Overlay

Use the `overlay` prop to control whether the Slideover has an overlay or not. Defaults to `true`.

```vue

<template>
  <B24Slideover :overlay="false" title="Slideover without overlay">
<B24Button label="Open" />
</B24Slideover>
</template>

```

### Overlay blur

If you want to disable background blur, you should use the `overlayBlur` prop.

The `overlayBlur` prop has 3 options:

- `auto`: (default) when the user has **not requested** [reduced motion](https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion){rel="nofollow"}
- `on`: always use blur
- `off`: do not use blur

```vue

<template>
  <B24Slideover overlay-blur="auto" title="Overlay blur">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-full" />

  </template>

</B24Slideover>
</template>

```

### Modal

Use the `modal` prop to control whether the Slideover blocks interaction with outside content. Defaults to `true`.

> !NOTE
> When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.

```vue

<template>
  <B24Slideover :modal="false" title="Slideover interactive">
<B24Button label="Open" />

  <template #body>
    
<Placeholder class="h-full" />

  </template>

</B24Slideover>
</template>

```

### Dismissible

Use the `dismissible` prop to control whether the Slideover is dismissible when clicking outside of it or pressing escape. Defaults to `true`.

> !NOTE
> A `close:prevent` event will be emitted when the user tries to close it.

> !TIP
> You can combine `modal: false` with `dismissible: false` to make the Slideover's background interactive without closing it.

```vue

<template>
  <B24Slideover :dismissible="false" title="Slideover non-dismissible">
<B24Button label="Open" />
</B24Slideover>
</template>

```

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [SlideoverOpenExample.vue]
<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Slideover v-model:open="open" :b24ui="{ content: 'light bg-(--ui-color-base-7) sm:top-[300px] sm:max-h-[calc(100%-300px)]' }">
    <B24Button label="Open" />

    <template #content>
      <Placeholder class="edge-light h-full m-4" />
    </template>
  </B24Slideover>
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the Slideover by pressing ``.

> !TIP
> This allows you to move the trigger outside of the Slideover or remove it entirely.

### Programmatic usage

You can use the [`useOverlay`](https://bitrix24.github.io/b24ui/raw/docs/composables/use-overlay.md) composable to open a Slideover programmatically.

> !WARNING
> Make sure to wrap your app with the [`App`](https://bitrix24.github.io/b24ui/raw/docs/components/app.md) component which uses the [`OverlayProvider`](https://github.com/bitrix24/b24ui/blob/main/src/runtime/components/OverlayProvider.vue){rel="nofollow"} component.

First, create a slideover component that will be opened programmatically:

```vue [SlideoverExample.vue]
<script setup lang="ts">
defineProps<{
  count: number
}>()

const emit = defineEmits<{ close: [boolean] }>()
</script>

<template>
  <B24Slideover :close="{ onClick: () => emit('close', false) }" :description="`This slideover was opened programmatically ${count} times`">
    <template #body>
      <Placeholder class="h-full" />
    </template>

    <template #footer>
      <div class="flex gap-2">
        <B24Button label="Dismiss" @click="emit('close', false)" />
        <B24Button color="air-primary-success" label="Success" @click="emit('close', true)" />
      </div>
    </template>
  </B24Slideover>
</template>
```

> !NOTE
> We are emitting a `close` event when the slideover is closed or dismissed here. You can emit any data through the `close` event, however, the event must be emitted in order to capture the return value.

Then, use it in your app:

```vue [SlideoverProgrammaticExample.vue]
<script setup lang="ts">
import { LazySlideoverExample } from '#components'

const count = ref(0)

const toast = useToast()
const overlay = useOverlay()

const slideover = overlay.create(LazySlideoverExample)

async function open() {
  const instance = slideover.open({
    count: count.value
  })

  const shouldIncrement = await instance.result

  if (shouldIncrement) {
    count.value++

    toast.add({
      title: `Success: ${shouldIncrement}`,
      color: 'air-primary-success',
      id: 'slideover-success'
    })

    // Update the count
    slideover.patch({
      count: count.value
    })
    return
  }

  toast.add({
    title: `Dismissed: ${shouldIncrement}`,
    color: 'air-primary-alert',
    id: 'slideover-dismiss'
  })
}
</script>

<template>
  <B24Button label="Open" @click="open" />
</template>
```

> !TIP
> You can close the slideover within the slideover component by emitting `emit('close')`.

### Nested slideovers

You can nest slideovers within each other.

```vue [SlideoverNestedExample.vue]
<script setup lang="ts">
const first = ref(false)
const second = ref(false)
</script>

<template>
  <B24Slideover v-model:open="first" title="First slideover" :b24ui="{ footer: 'justify-end' }">
    <B24Button variant="subtle" label="Open" />

    <template #body>
      <Placeholder class="h-full" />
    </template>

    <template #footer>
      <B24Button label="Close" variant="outline" @click="first = false" />

      <B24Slideover v-model:open="second" title="Second slideover" :b24ui="{ footer: 'justify-end' }">
        <B24Button label="Open second" color="air-primary" />

        <template #body>
          <Placeholder class="h-full" />
        </template>

        <template #footer>
          <B24Button label="Close" @click="second = false" />
        </template>
      </B24Slideover>
    </template>
  </B24Slideover>
</template>
```

### With footer slot

Use the `#footer` slot to add content after the Slideover's body.

```vue [SlideoverFooterSlotExample.vue]
<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <B24Slideover
    v-model:open="open"
    title="Slideover with footer"
    description="This is useful when you want a form in a Slideover."
    :b24ui="{ footer: 'justify-between' }"
  >
    <B24Button label="Open" />

    <template #body>
      <Placeholder class="h-full" />
    </template>

    <template #footer="{ close }">
      <div class="w-1/5 flex justify-start" />
      <div class="w-full flex flex-row justify-center gap-[10px]">
        <B24ModalDialogClose>
          <B24Button label="Send" color="air-primary" />
        </B24ModalDialogClose>
        <B24Button label="Cancel" color="air-tertiary" @click="close" />
      </div>
      <div class="w-1/5 flex justify-end">
        <B24Button label="Full version" size="sm" color="air-tertiary-no-accent" />
      </div>
    </template>
  </B24Slideover>
</template>
```

### Simple list of elements

```vue [SlideoverSimpleListElementsExample.vue]
<script setup lang="ts">
import { ref } from 'vue'
import TrendUpIcon from '@bitrix24/b24icons-vue/outline/TrendUpIcon'
import TrendDownIcon from '@bitrix24/b24icons-vue/outline/TrendDownIcon'
import BusinesProcessStagesIcon from '@bitrix24/b24icons-vue/outline/BusinesProcessStagesIcon'

const openListItem = ref(false)

// Manage loading state
const handleAction = async () => {
  await new Promise(resolve => setTimeout(resolve, 2_000))
}
</script>

<template>
  <B24Slideover
    ref="currentSlideoverRef"
    title="Some list"
    description="Some description"
    :use-light-content="false"
    :b24ui="{
      content: 'sm:max-w-[970px] sm:top-[275px] sm:max-h-[calc(100%-275px)]',
      sidebarLayoutRoot: [
        'edge-dark',
        'edge-dark:[--air-theme-bg-color:#7c235b]',
        'edge-dark:[--air-theme-bg-size:cover]',
        'edge-dark:[--air-theme-bg-repeat:no-repeat]',
        'edge-dark:[--air-theme-bg-position:0_0]',
        'edge-dark:[--air-theme-bg-attachment:local]',
        'edge-dark:[--air-theme-bg-image:url(/bg/edge-dark-v2.jpg)]',
        'edge-dark:[--air-theme-bg-image-blurred:url(/bg/edge-dark-v2-blurred.webp)]'
      ].join(' '),
      sidebarLayoutLoadingIcon: 'text-(--ui-color-gray-70)'
    }"
  >
    <B24Button label="Some list" color="air-boost" />
    <template #body>
      <div class="light mt-[22px] rounded-(--ui-border-radius-md) bg-(--ui-color-background-primary)">
        <B24TableWrapper
          row-hover
          class="overflow-x-auto w-full"
        >
          <table>
            <!-- head -->
            <thead>
              <tr>
                <th>#</th>
                <th>Company</th>
                <th>Status</th>
                <th>Amount (USD)</th>
              </tr>
            </thead>
            <tbody>
              <!-- row 1 -->
              <tr>
                <th>1</th>
                <td><B24Link @click="openListItem = true">Tech Innovators Inc.</B24Link></td>
                <td><B24Badge label="Proposal Sent" use-link use-close /></td>
                <td>50,000</td>
              </tr>
              <!-- row 2 -->
              <tr>
                <th>2</th>
                <td><B24Link @click="openListItem = true">Global Solutions Ltd.</B24Link></td>
                <td><B24Badge label="Negotiation" use-link inverted use-close /></td>
                <td>120,000</td>
              </tr>
              <!-- row 3 -->
              <tr>
                <th>3</th>
                <td><B24Link @click="openListItem = true">Future Enterprises</B24Link></td>
                <td><B24Chip standalone color="air-primary-warning" text="Contract Signed" size="lg" :trailing-icon="TrendUpIcon" /></td>
                <td>200,000</td>
              </tr>
              <!-- row 4 -->
              <tr>
                <th>4</th>
                <td><B24Link @click="openListItem = true">Bright Ideas Co.</B24Link></td>
                <td>
                  <B24Chip
                    standalone
                    text="Initial Contact"
                    color="air-primary-alert"
                    size="lg"
                    inverted
                    :trailing-icon="TrendDownIcon"
                  />
                </td>
                <td>15,000</td>
              </tr>
              <!-- row 5 -->
              <tr>
                <th>5</th>
                <td><B24Link @click="openListItem = true">NextGen Technologies</B24Link></td>
                <td>
                  <B24Chip
                    standalone
                    text="Important"
                    size="lg"
                    color="air-primary-alert"
                    :b24ui="{ base: 'style-filled-boost' }"
                  />
                </td>
                <td>300,000</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th colspan="3" class="text-right">
                  Total:
                </th>
                <td>
                  685,000
                </td>
              </tr>
            </tfoot>
          </table>
        </B24TableWrapper>
      </div>
    </template>

    <template #footer>
      <B24Button
        label="Reload"
        color="air-primary"
        loading-auto
        @click="handleAction"
      />
      <B24ModalDialogClose>
        <B24Button label="Cancel" color="air-tertiary" />
      </B24ModalDialogClose>
    </template>
  </B24Slideover>
  <B24Slideover
    v-model:open="openListItem"
    :close="{ label: 'Item' }"
    title="Item"
    description="Some description"
    :use-light-content="false"
    :b24ui="{
      content: 'sm:max-w-[965px] sm:top-[375px] sm:max-h-[calc(100%-375px)]',
      body: 'relative',
      sidebarLayoutRoot: [
        'edge-light',
        'edge-light:[--air-theme-bg-color:#eef2f4]',
        'edge-light:[--air-theme-bg-size:auto]',
        'edge-light:[--air-theme-bg-repeat:no-repeat]',
        'edge-light:[--air-theme-bg-position:0_0]',
        'edge-light:[--air-theme-bg-attachment:local]',
        'edge-light:[--air-theme-bg-image:url(/bg/slider-ring-blurred.webp)]',
        'edge-light:[--air-theme-bg-image-blurred:url(/bg/slider-ring-blurred.webp)]'
      ].join(' ')
    }"
  >
    <template #header>
      <div
        class="w-full pt-(--ui-space-inset-md2) pb-[calc(var(--ui-space-inset-md2)+10px)] px-(--ui-space-inset-lg) rounded-(--ui-border-radius-3xl) bg-(--ui-color-background-primary)/80 flex flex-row items-center justify-between gap-[20px]"
      >
        <B24Avatar
          :icon="BusinesProcessStagesIcon"
          alt="Workflows"
          size="2xl"
          :b24ui="{
            root: 'bg-(--ui-color-primary)',
            icon: 'size-[48px] text-(--ui-color-palette-white-base)'
          }"
        />
        <div class="flex-1">
          <ProseH1 class="text-(--ui-color-text-primary) leading-[29px] font-(--ui-font-weight-light)">
            Workflows
          </ProseH1>
          <ProseP small accent="less">
            Automate your workflows, control every stage and manage workflows from your mobile.
          </ProseP>
        </div>
      </div>
    </template>
    <template #body>
      <Placeholder class="w-full h-[300px]" />
    </template>
    <template #footer>
      <B24ModalDialogClose>
        <B24Button label="Continue" color="air-primary" />
      </B24ModalDialogClose>
      <B24ModalDialogClose>
        <B24Button label="Back" color="air-tertiary" />
      </B24ModalDialogClose>
    </template>
  </B24Slideover>
</template>
```

> !TIP
> Many examples can be found on the [`playground`](https://bitrix24.github.io/b24ui/demo/components/slideover){rel="nofollow"} and also seen in the [`demo`](https://github.com/bitrix24/b24ui/blob/main/playgrounds/demo/app/pages/components/slideover.vue){rel="nofollow"} version.

## API

### Props

```ts
/**
 * Props for the Slideover component
 */
interface SlideoverProps {
  title?: string | undefined;
  description?: string | undefined;
  /**
   * The content of the slideover.
   */
  content?: (Omit<DialogContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<DialogContentImplEmits>>) | undefined;
  /**
   * Render an overlay behind the slideover.
   * @default "true"
   */
  overlay?: boolean | undefined;
  /**
   * Render an overlay blur behind the slideover.
   * `auto` use `motion-safe`.
   * @default "\"off\""
   */
  overlayBlur?: "off" | "auto" | "on" | undefined;
  /**
   * Animate the slideover when opening or closing.
   * @default "true"
   */
  transition?: boolean | undefined;
  /**
   * The side of the slideover.
   * @default "\"bottom\""
   */
  side?: "bottom" | "right" | "left" | "top" | undefined;
  /**
   * Render the slideover in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * Display a close button to dismiss the slideover.
   * `{ color: 'air-primary' }`{lang="ts"} for `left`, `right`, `bottom`
   * `{ color: 'air-tertiary' }`{lang="ts"} for `top`
   * @default "true"
   */
  close?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the close button.
   */
  closeIcon?: IconComponent | undefined;
  /**
   * When `false`, the slideover will not close when clicking outside or pressing escape.
   * @default "true"
   */
  dismissible?: boolean | undefined;
  /**
   * The content is placed on a light background.
   * @default "true"
   */
  useLightContent?: boolean | undefined;
  b24ui?: { overlay?: ClassNameValue; content?: ClassNameValue; sidebarLayoutRoot?: ClassNameValue; sidebarLayoutHeaderWrapper?: ClassNameValue; sidebarLayoutPageWrapper?: ClassNameValue; sidebarLayoutContainer?: ClassNameValue; sidebarLayoutPageBottomWrapper?: ClassNameValue; sidebarLayoutLoadingWrapper?: ClassNameValue; sidebarLayoutLoadingIcon?: ClassNameValue; header?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; close?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; safeList?: ClassNameValue; } | undefined;
  /**
   * The controlled open state of the dialog. Can be binded as `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The modality of the dialog When set to `true`, <br>
   * interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
   * @default "true"
   */
  modal?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Slideover component
 */
interface SlideoverSlots {
  default(): any;
  content(): any;
  sidebar(): any;
  navbar(): any;
  header(): any;
  title(): any;
  description(): any;
  actions(): any;
  close(): any;
  body(): any;
  footer(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Slideover component
 */
interface SlideoverEmits {
  after:leave: (payload: []) => void;
  after:enter: (payload: []) => void;
  close:prevent: (payload: []) => void;
  update:open: (payload: [value: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    slideover: {
      slots: {
        overlay: 'fixed inset-0 bg-linear-to-b from-[#00204e]/52 to-[#00204e]',
        content: 'fixed sm:shadow-lg flex flex-col focus:outline-none h-full',
        sidebarLayoutRoot: 'relative',
        sidebarLayoutHeaderWrapper: 'relative',
        sidebarLayoutPageWrapper: 'min-h-full pb-[calc(53px_+_10px)] px-[20px] ps-[20px] pe-[20px] pb-[20px]',
        sidebarLayoutContainer: 'gap-[22px]',
        sidebarLayoutPageBottomWrapper: 'relative',
        sidebarLayoutLoadingWrapper: '',
        sidebarLayoutLoadingIcon: '',
        header: 'pt-[24px] flex-1 flex items-center gap-x-[12px] gap-y-1.5',
        wrapper: 'min-h-[30px]',
        title: 'font-[family-name:var(--ui-font-family-primary)] text-(--b24ui-typography-label-color) font-(--ui-font-weight-semi-bold) mb-0 text-(length:--ui-font-size-4xl)/[calc(var(--ui-font-size-4xl)+2px)]',
        description: 'mt-1 text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
        close: 'absolute',
        body: 'size-full flex-1',
        footer: 'absolute inset-x-0 bottom-0 light bg-(--popup-window-background-color) flex items-center justify-center gap-3 border-t border-t-1 border-t-(--ui-color-divider-less) shadow-top-md py-[9px] px-2 pr-(--scrollbar-width)',
        safeList: 'group-hover:rounded-full group-hover:border-1 group-hover:border-current'
      },
      variants: {
        useFooter: {
          true: {
            sidebarLayoutPageWrapper: 'pb-[calc(53px+20px)]'
          }
        },
        overlayBlur: {
          auto: {
            overlay: 'motion-safe:backdrop-blur-sm'
          },
          on: {
            overlay: 'backdrop-blur-sm'
          },
          off: {
            overlay: ''
          }
        },
        side: {
          right: {
            content: 'right-0 inset-y-0 w-[calc(100%-60px)] sm:w-[calc(100%-150px)] sm:rounded-t-none',
            sidebarLayoutRoot: 'sm:rounded-t-none'
          },
          left: {
            content: 'left-0 inset-y-0 w-[calc(100%-60px)] sm:w-[calc(100%-150px)] sm:rounded-t-none',
            sidebarLayoutRoot: 'sm:rounded-t-none'
          },
          top: {
            content: 'inset-x-0 top-0 max-h-full sm:rounded-t-none',
            sidebarLayoutRoot: 'sm:rounded-t-none'
          },
          bottom: {
            content: 'right-[5px] top-0 sm:top-[18px] bottom-0 w-[calc(100%-60px-5px)] sm:w-[calc(100%-150px-70px)] sm:max-h-[calc(100%-18px)] sm:rounded-t-[18px]',
            sidebarLayoutRoot: 'sm:rounded-t-[18px]'
          }
        },
        transition: {
          true: {
            overlay: 'motion-safe:data-[state=open]:animate-[fade-in_200ms_ease-out] motion-safe:data-[state=closed]:animate-[fade-out_200ms_ease-in]'
          }
        }
      },
      compoundVariants: [
        {
          side: [
            'right',
            'bottom'
          ],
          class: {
            close: 'pl-1.5 pr-[4px] top-[17px] -translate-x-full left-[1px] rounded-l-full'
          }
        },
        {
          side: 'left',
          class: {
            close: 'pr-1.5 pl-[4px] top-[17px] translate-x-full right-[1px] rounded-r-full [&>div]:flex-row-reverse'
          }
        },
        {
          side: 'top',
          class: {
            close: 'top-4 end-4'
          }
        },
        {
          transition: true,
          side: 'top',
          class: {
            content: 'motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]'
          }
        },
        {
          transition: true,
          side: 'right',
          class: {
            content: 'motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]'
          }
        },
        {
          transition: true,
          side: 'bottom',
          class: {
            content: 'motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]'
          }
        },
        {
          transition: true,
          side: 'left',
          class: {
            content: 'motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]'
          }
        }
      ],
      defaultVariants: {
        side: 'bottom',
        overlayBlur: 'off'
      }
    }
  }
})
```

---

# Stepper

> A stepper component to visualize progress in a multistep workflow.

## Usage

Use the Stepper component to display a list of items in a stepper.

```vue

<script setup lang="ts">
const items = ref([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper :items="items" />
</template>

```

### Items

Use the `items` prop as an array of objects with the following properties:

- `title?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `description?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `content?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-controls)
- `value?: string | number`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, container?: ClassNameValue, trigger?: ClassNameValue, indicator?: ClassNameValue, icon?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper :items="items" class="w-full" />
</template>

```

> !NOTE
> Click on the items to navigate through the steps.

### Color

Use the `color` prop to change the color of the Stepper.

```vue

<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper color="air-primary-alert" :items="items" class="w-full" />
</template>

```

### Size

Use the `size` prop to change the size of the Stepper.

```vue

<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper size="xl" :items="items" class="w-full" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the Stepper. Defaults to `horizontal`.

```vue

<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper orientation="vertical" :items="items" class="w-full" />
</template>

```

### Disabled

Use the `disabled` prop to disable navigation through the steps.

```vue

<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'

const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <B24Stepper disabled :items="items" />
</template>

```

> [!NOTE](https://bitrix24.github.io/b24ui/#with-controls)
> This can be useful when you want to force navigation with controls.

## Examples

### With controls

You can add additional controls for the stepper using buttons.

```vue [StepperWithControlsExample.vue]
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'
import ArrowLeftLIcon from '@bitrix24/b24icons-vue/outline/ArrowLeftLIcon'
import ArrowRightLIcon from '@bitrix24/b24icons-vue/outline/ArrowRightLIcon'
import LocationIcon from '@bitrix24/b24icons-vue/outline/LocationIcon'
import DeliveryIcon from '@bitrix24/b24icons-vue/outline/DeliveryIcon'

const items: StepperItem[] = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: LocationIcon
  }, {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: DeliveryIcon
  }, {
    title: 'Checkout',
    description: 'Confirm your order'
  }
]

const stepper = useTemplateRef('stepper')
</script>

<template>
  <div class="w-full">
    <B24Stepper ref="stepper" :items="items">
      <template #content="{ item }">
        <Placeholder class="h-[200px]">
          {{ item.title }}
        </Placeholder>
      </template>
    </B24Stepper>

    <div class="flex gap-2 justify-between mt-4">
      <B24Button
        :disabled="!stepper?.hasPrev"
        label="Prev"
        @click="stepper?.prev()"
      >
        <template #leading>
          <ArrowLeftLIcon class="text-(--ui-btn-color) size-(--ui-btn-icon-size)" />
        </template>
      </B24Button>

      <B24Button
        :disabled="!stepper?.hasNext"
        label="Next"
        @click="stepper?.next()"
      >
        <template #trailing>
          <ArrowRightLIcon class="text-(--ui-btn-color) size-(--ui-btn-icon-size)" />
        </template>
      </B24Button>
    </div>
  </div>
</template>
```

### Control active item

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index.

```vue [StepperModelValueExample.vue]
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'
import { onMounted, ref } from 'vue'
import LocationIcon from '@bitrix24/b24icons-vue/outline/LocationIcon'
import DeliveryIcon from '@bitrix24/b24icons-vue/outline/DeliveryIcon'

const items: StepperItem[] = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: LocationIcon
  }, {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: DeliveryIcon
  }, {
    title: 'Checkout',
    description: 'Confirm your order'
  }
]

const active = ref(0)

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = (active.value + 1) % items.length
  }, 2000)
})
</script>

<template>
  <B24Stepper v-model="active" :items="items" class="w-full">
    <template #content="{ item }">
      <Placeholder class="h-[200px]">
        This is the {{ item?.title }} step.
      </Placeholder>
    </template>
  </B24Stepper>
</template>
```

### With content slot

Use the `#content` slot to customize the content of each item.

```vue [StepperContentSlotExample.vue]
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'
import LocationIcon from '@bitrix24/b24icons-vue/outline/LocationIcon'
import DeliveryIcon from '@bitrix24/b24icons-vue/outline/DeliveryIcon'

const items: StepperItem[] = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: LocationIcon
  }, {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: DeliveryIcon
  }, {
    title: 'Checkout',
    description: 'Confirm your order'
  }
]
</script>

<template>
  <B24Stepper ref="stepper" :items="items" class="w-full">
    <template #content="{ item }">
      <Placeholder class="h-[200px]">
        This is the {{ item?.title }} step.
      </Placeholder>
    </template>
  </B24Stepper>
</template>
```

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [StepperCustomSlotExample.vue]
<script setup lang="ts">
import type { StepperItem } from '@bitrix24/b24ui-nuxt'
import LocationIcon from '@bitrix24/b24icons-vue/outline/LocationIcon'
import DeliveryIcon from '@bitrix24/b24icons-vue/outline/DeliveryIcon'

const items: StepperItem[] = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: LocationIcon,
    slot: 'address'
  }, {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: DeliveryIcon,
    slot: 'shipping'
  }, {
    title: 'Checkout',
    description: 'Confirm your order',
    slot: 'checkout'
  }
]
</script>

<template>
  <B24Stepper :items="items" class="w-full">
    <template #address>
      <Placeholder class="h-[200px]">
        Address
      </Placeholder>
    </template>

    <template #shipping>
      <Placeholder class="h-[200px]">
        Shipping
      </Placeholder>
    </template>

    <template #checkout>
      <Placeholder class="h-[200px]">
        Checkout
      </Placeholder>
    </template>
  </B24Stepper>
</template>
```

## API

### Props

```ts
/**
 * Props for the Stepper component
 */
interface StepperProps {
  items: StepperItem[];
  /**
   * The element or component this component should render as.
   */
  as?: any;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  /**
   * The orientation of the stepper.
   * @default "\"horizontal\""
   */
  orientation?: "horizontal" | "vertical" | undefined;
  /**
   * The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.
   */
  defaultValue?: string | number | undefined;
  disabled?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; header?: ClassNameValue; item?: ClassNameValue; container?: ClassNameValue; trigger?: ClassNameValue; indicator?: ClassNameValue; icon?: ClassNameValue; separator?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; content?: ClassNameValue; } | undefined;
  /**
   * Whether or not the steps must be completed in order.
   * @default "true"
   */
  linear?: boolean | undefined;
  modelValue?: string | number | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Stepper component
 */
interface StepperSlots {
  indicator(): any;
  title(): any;
  description(): any;
  content(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Stepper component
 */
interface StepperEmits {
  next: (payload: [value: StepperItem]) => void;
  prev: (payload: [value: StepperItem]) => void;
  update:modelValue: (payload: [value: string | number | undefined]) => void;
}
```

### Expose

You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="nofollow"}.

```vue
<script setup lang="ts">
const stepper = useTemplateRef('stepper')
</script>

<template>
  <B24Stepper ref="stepper" />
</template>
```

This will give you access to the following:

| Name                                                                                                                                      | Type                                                                                                                                           |
| ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `next`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}    | `() => void`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}   |
| `prev`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}    | `() => void`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}   |
| `hasNext`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<boolean>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |
| `hasPrev`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<boolean>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    stepper: {
      slots: {
        root: 'flex gap-4',
        header: 'flex',
        item: 'group text-center relative w-full',
        container: 'relative',
        trigger: 'cursor-pointer rounded-full font-(--ui-font-weight-medium) text-center align-middle flex items-center justify-center group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-(--b24ui-typography-description-color) group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active) focus-visible:outline-(--b24ui-background-active) bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) focus-visible:outline-2 focus-visible:outline-offset-2',
        indicator: 'flex items-center justify-center size-full',
        icon: 'shrink-0',
        separator: 'absolute rounded-(--ui-border-radius-circle) group-data-[disabled]:opacity-75 group-data-[state=completed]:bg-(--b24ui-background-active) bg-(--ui-color-base-6)',
        wrapper: '',
        title: 'font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color)',
        description: 'text-(--b24ui-typography-description-color) text-wrap',
        content: 'size-full'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex-col',
            container: 'flex justify-center',
            separator: 'top-[calc(50%-2px)] h-0.5',
            wrapper: 'mt-1'
          },
          vertical: {
            header: 'flex-col gap-4',
            item: 'flex text-start',
            separator: 'start-[calc(50%-1px)] -bottom-[10px] w-0.5'
          }
        },
        size: {
          xs: {
            trigger: 'size-[28px] text-(length:--ui-font-size-sm)',
            icon: 'size-[26px]',
            title: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)',
            wrapper: 'mt-[6px]'
          },
          sm: {
            trigger: 'size-[32px] text-(length:--ui-font-size-md)',
            icon: 'size-[28px]',
            title: 'text-(length:--ui-font-size-sm)',
            description: 'text-(length:--ui-font-size-sm)',
            wrapper: 'mt-[8px]'
          },
          md: {
            trigger: 'size-[42px] text-(length:--ui-font-size-xl)',
            icon: 'size-[38px]',
            title: 'text-(length:--ui-font-size-md)',
            description: 'text-(length:--ui-font-size-md)',
            wrapper: 'mt-[10px]'
          },
          lg: {
            trigger: 'size-[48px] text-(length:--ui-font-size-2xl)',
            icon: 'size-[44px]',
            title: 'text-(length:--ui-font-size-xl)',
            description: 'text-(length:--ui-font-size-xl)',
            wrapper: 'mt-[12px]'
          },
          xl: {
            trigger: 'size-[60px] text-(length:--ui-font-size-3xl)',
            icon: 'size-[56px]',
            title: 'text-(length:--ui-font-size-2xl)',
            description: 'text-(length:--ui-font-size-2xl)',
            wrapper: 'mt-[14px]'
          }
        },
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          size: 'xs',
          class: {
            separator: 'start-[calc(50%+16px)] end-[calc(-50%+16px)]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            separator: 'start-[calc(50%+20px)] end-[calc(-50%+20px)]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            separator: 'start-[calc(50%+28px)] end-[calc(-50%+28px)]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            separator: 'start-[calc(50%+32px)] end-[calc(-50%+32px)]'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            separator: 'start-[calc(50%+36px)] end-[calc(-50%+36px)]'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            separator: 'top-[30px]',
            item: 'gap-1.5'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            separator: 'top-[38px]',
            item: 'gap-2'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            separator: 'top-[46px]',
            item: 'gap-2.5'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            separator: 'top-[54px]',
            item: 'gap-3'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            separator: 'top-[62px]',
            item: 'gap-3.5'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'air-primary'
      }
    }
  }
})
```

---

# Switch

> A toggle control for switching between two states.

## Usage

Use the `v-model` directive to control the checked state of the Switch.

```vue

<script setup lang="ts">
const value = ref(true)
</script>

<template>
  <B24Switch v-model="value" />
</template>

```

Use the `default-value` prop to set the initial value when you do not need to control its state.

```vue

<template>
  <B24Switch default-value />
</template>

```

### Label

Use the `label` prop to set the label of the Switch.

```vue

<template>
  <B24Switch label="Check me" />
</template>

```

When using the `required` prop, an asterisk is added next to the label.

```vue

<template>
  <B24Switch required label="Check me" />
</template>

```

### Description

Use the `description` prop to set the description of the Switch.

```vue

<template>
  <B24Switch label="Check me" description="This is a checkbox." />
</template>

```

### Icon

Use the `checked-icon` and `unchecked-icon` props to set the icons of the Switch when checked and unchecked.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Switch :checked-icon="RocketIcon" default-value label="Check me" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the Switch.

```vue

<template>
  <B24Switch loading default-value label="Check me" />
</template>

```

### Color

Use the `color` prop to change the color of the Switch.

```vue

<template>
  <B24Switch color="air-primary-copilot" default-value label="Check me" />
</template>

```

### Size

Use the `size` prop to change the size of the Switch.

```vue

<template>
  <B24Switch size="lg" default-value label="Check me" />
</template>

```

### Disabled

Use the `disabled` prop to disable the Switch.

```vue

<template>
  <B24Switch disabled label="Check me" />
</template>

```

## API

### Props

```ts
/**
 * Props for the Switch component
 */
interface SwitchProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  size?: "xs" | "sm" | "md" | "lg" | undefined;
  /**
   * When `true`, the loading icon will be displayed
   */
  loading?: boolean | undefined;
  /**
   * The icon when the `loading` prop is `true`.
   */
  loadingIcon?: IconComponent | undefined;
  /**
   * Display an icon when the switch is checked.
   */
  checkedIcon?: IconComponent | undefined;
  /**
   * Display an icon when the switch is unchecked.
   */
  uncheckedIcon?: IconComponent | undefined;
  label?: string | undefined;
  description?: string | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; container?: ClassNameValue; thumb?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; } | undefined;
  /**
   * The state of the switch when it is initially rendered. Use when you do not need to control its state.
   */
  defaultValue?: boolean | undefined;
  /**
   * When `true`, prevents the user from interacting with the switch.
   */
  disabled?: boolean | undefined;
  id?: string | undefined;
  /**
   * The name of the field. Submitted with its owning form as part of a name/value pair.
   */
  name?: string | undefined;
  /**
   * When `true`, indicates that the user must set the value before the owning form can be submitted.
   */
  required?: boolean | undefined;
  /**
   * The value given as data when submitted with a `name`.
   */
  value?: string | undefined;
  autofocus?: Booleanish | undefined;
  form?: string | undefined;
  formaction?: string | undefined;
  formenctype?: string | undefined;
  formmethod?: string | undefined;
  formnovalidate?: Booleanish | undefined;
  formtarget?: string | undefined;
  /**
   * @default "undefined"
   */
  modelValue?: boolean | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
> This component also supports all native `<button>` HTML attributes.

### Slots

```ts
/**
 * Slots for the Switch component
 */
interface SwitchSlots {
  label(): any;
  description(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Switch component
 */
interface SwitchEmits {
  update:modelValue: (payload: [value: boolean]) => void;
  change: (payload: [event: Event]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    switch: {
      slots: {
        root: 'relative flex items-start',
        base: 'cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color)',
        container: 'flex items-center',
        thumb: 'group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0',
        icon: 'absolute shrink-0 group-data-[state=unchecked]:text-(--ui-color-base-5) edge-dark:group-data-[state=unchecked]:text-(--ui-color-gray-60) opacity-0 p-0.5 size-full transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--b24ui-background)',
        wrapper: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2',
        label: 'cursor-pointer block text-(--b24ui-typography-label-color)',
        description: 'text-(--b24ui-typography-description-color)'
      },
      variants: {
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        size: {
          xs: {
            base: 'w-[28px]',
            container: 'h-[16px]',
            thumb: 'size-[12px] data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
            wrapper: 'text-(length:--ui-font-size-xs)',
            label: 'leading-[16px]'
          },
          sm: {
            base: 'w-[32px]',
            container: 'h-[16px]',
            thumb: 'size-[14px] data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
            wrapper: 'text-(length:--ui-font-size-sm)',
            label: 'leading-[16px]'
          },
          md: {
            base: 'w-[36px]',
            container: 'h-[20px]',
            thumb: 'size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
            wrapper: 'text-(length:--ui-font-size-md)',
            label: 'leading-[20px]'
          },
          lg: {
            base: 'w-[40px]',
            container: 'h-[20px]',
            thumb: 'size-[20px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
            wrapper: 'text-(length:--ui-font-size-xl)',
            label: 'leading-[20px]'
          }
        },
        checked: {
          true: {
            icon: 'group-data-[state=checked]:opacity-100'
          }
        },
        unchecked: {
          true: {
            icon: 'group-data-[state=unchecked]:opacity-100'
          }
        },
        loading: {
          true: {
            icon: 'animate-spin'
          }
        },
        required: {
          true: {
            label: "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
          }
        },
        disabled: {
          true: {
            root: 'opacity-30',
            base: 'cursor-not-allowed',
            label: 'cursor-not-allowed',
            description: 'cursor-not-allowed'
          }
        }
      },
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
```

---

# Table

> A responsive data table component.

## Usage

The Table component is built on top of [TanStack Table](https://tanstack.com/table/latest){rel="nofollow"} and is powered by the [useVueTable](https://tanstack.com/table/latest/docs/framework/vue/vue-table#usevuetable){rel="nofollow"} composable to provide a flexible and fully type-safe API. &#x2A;Some features of TanStack Table are not supported yet, we'll add more over time.*

```vue [TableExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import { upperFirst } from 'scule'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import { useClipboard } from '@vueuse/core'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'
import MenuIcon from '@bitrix24/b24icons-vue/main/MenuIcon'
import ChevronTopLIcon from '@bitrix24/b24icons-vue/outline/ChevronTopLIcon'
import ChevronDownLIcon from '@bitrix24/b24icons-vue/outline/ChevronDownLIcon'

const B24Button = resolveComponent('B24Button')
const B24Checkbox = resolveComponent('B24Checkbox')
const B24Badge = resolveComponent('B24Badge')
const B24DropdownMenu = resolveComponent('B24DropdownMenu')

const toast = useToast()
const { copy } = useClipboard()
const isLoading = ref(false)

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  },
  {
    id: '4595',
    date: '2024-03-10T13:40:00',
    status: 'refunded',
    email: 'ava.thomas@example.com',
    amount: 428
  },
  {
    id: '4594',
    date: '2024-03-10T09:15:00',
    status: 'paid',
    email: 'michael.wilson@example.com',
    amount: 683
  },
  {
    id: '4593',
    date: '2024-03-09T20:25:00',
    status: 'failed',
    email: 'olivia.taylor@example.com',
    amount: 947
  },
  {
    id: '4592',
    date: '2024-03-09T18:45:00',
    status: 'paid',
    email: 'benjamin.jackson@example.com',
    amount: 851
  },
  {
    id: '4591',
    date: '2024-03-09T16:05:00',
    status: 'paid',
    email: 'sophia.miller@example.com',
    amount: 762
  },
  {
    id: '4590',
    date: '2024-03-09T14:20:00',
    status: 'paid',
    email: 'noah.clark@example.com',
    amount: 573
  },
  {
    id: '4589',
    date: '2024-03-09T11:35:00',
    status: 'failed',
    email: 'isabella.lee@example.com',
    amount: 389
  },
  {
    id: '4588',
    date: '2024-03-08T22:50:00',
    status: 'refunded',
    email: 'liam.walker@example.com',
    amount: 701
  },
  {
    id: '4587',
    date: '2024-03-08T20:15:00',
    status: 'paid',
    email: 'charlotte.hall@example.com',
    amount: 856
  },
  {
    id: '4586',
    date: '2024-03-08T17:40:00',
    status: 'paid',
    email: 'mason.young@example.com',
    amount: 492
  },
  {
    id: '4585',
    date: '2024-03-08T14:55:00',
    status: 'failed',
    email: 'amelia.king@example.com',
    amount: 637
  },
  {
    id: '4584',
    date: '2024-03-08T12:30:00',
    status: 'paid',
    email: 'elijah.wright@example.com',
    amount: 784
  },
  {
    id: '4583',
    date: '2024-03-08T09:45:00',
    status: 'refunded',
    email: 'harper.scott@example.com',
    amount: 345
  },
  {
    id: '4582',
    date: '2024-03-07T23:10:00',
    status: 'paid',
    email: 'evelyn.green@example.com',
    amount: 918
  },
  {
    id: '4581',
    date: '2024-03-07T20:25:00',
    status: 'paid',
    email: 'logan.baker@example.com',
    amount: 567
  }
])

const columns: TableColumn<Payment>[] = [
  {
    id: 'select',
    header: ({ table }) => h(B24Checkbox, {
      'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
      'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
      'size': 'sm',
      'aria-label': 'Select all'
    }),
    cell: ({ row }) => h(B24Checkbox, {
      'modelValue': row.getIsSelected(),
      'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
      'size': 'sm',
      'aria-label': 'Select row'
    }),
    enableSorting: false,
    enableHiding: false
  },
  {
    id: 'actions',
    meta: {
      style: {
        td: {
          width: '20px',
          padding: '16px 4px'
        }
      }
    },
    enableHiding: false,
    cell: ({ row }) => {
      const items = [{
        type: 'label',
        label: 'Actions'
      }, {
        label: 'Copy payment ID',
        onSelect() {
          copy(row.original.id)

          toast.add({
            title: 'Payment ID copied to clipboard!',
            color: 'air-primary-success',
            icon: CircleCheckIcon
          })
        }
      }, {
        label: row.getIsExpanded() ? 'Collapse' : 'Expand',
        onSelect() {
          row.toggleExpanded()
        }
      }, {
        type: 'separator'
      }, {
        label: 'View customer'
      }, {
        label: 'View payment details'
      }]

      return h(B24DropdownMenu, {
        'content': {
          align: 'center',
          side: 'right',
          sideOffset: -2
        },
        'arrow': true,
        items,
        'aria-label': 'Actions dropdown'
      }, () => h(B24Button, {
        'icon': MenuIcon,
        'color': 'air-tertiary-no-accent',
        'size': 'sm',
        'aria-label': 'Actions dropdown'
      }))
    }
  },
  {
    accessorKey: 'id',
    header: '#',
    cell: ({ row }) => `#${row.getValue('id')}`
  },
  {
    accessorKey: 'date',
    header: 'Date',
    cell: ({ row }) => {
      return new Date(row.getValue('date')).toLocaleString('en-US', {
        day: 'numeric',
        month: 'short',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      })
    }
  },
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ row }) => {
      const color = ({
        paid: 'air-primary-success' as const,
        failed: 'air-primary-alert' as const,
        refunded: 'air-primary' as const
      })[row.getValue('status') as string]

      return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
    }
  },
  {
    accessorKey: 'email',
    header: ({ column }) => {
      const isSorted = column.getIsSorted()

      return h(B24Button, {
        color: 'air-tertiary-no-accent',
        label: 'Email',
        size: 'sm',
        class: '-mx-2.5 [--ui-btn-height:20px]',
        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
      }, {
        trailing: () => h(isSorted ? (isSorted === 'asc' ? ChevronTopLIcon : ChevronDownLIcon) : ChevronTopLIcon, {
          class: 'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)'
        })
      })
    },
    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email'))
  },
  {
    accessorKey: 'amount',
    header: () => h('div', { class: 'text-right' }, 'Amount'),
    cell: ({ row }) => {
      const amount = Number.parseFloat(row.getValue('amount'))

      const formatted = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'EUR'
      }).format(amount)

      return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
    }
  }
]

const table = useTemplateRef('table')

async function randomize() {
  isLoading.value = true
  await sleepAction(600)
  data.value = [...data.value].sort(() => Math.random() - 0.5)
  isLoading.value = false
}

async function sleepAction(timeout: number = 1000): Promise<void> {
  return new Promise<void>(resolve => setTimeout(resolve, timeout))
}
</script>

<template>
  <B24Card
    variant="outline"
    class="flex-1 w-full"
    :b24ui="{
      header: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px]',
      body: 'p-0 sm:px-0 sm:py-0',
      footer: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-legend-color)'
    }"
  >
    <template #header>
      <div class="flex items-center gap-2 overflow-x-auto">
        <B24Input
          :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
          class="max-w-sm min-w-[12ch]"
          placeholder="Filter emails..."
          @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
        />

        <B24Button color="air-primary-copilot" label="Randomize" @click="randomize" />

        <B24DropdownMenu
          :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
            label: upperFirst(column.id),
            type: 'checkbox' as const,
            checked: column.getIsVisible(),
            onUpdateChecked(checked: boolean) {
              table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
            },
            onSelect(e: Event) {
              e.preventDefault()
            }
          }))"
          :content="{ align: 'end' }"
        >
          <B24Button
            label="Columns"
            color="air-secondary-accent-1"
            use-dropdown
            class="ml-auto"
            aria-label="Columns select dropdown"
          />
        </B24DropdownMenu>
      </div>
    </template>

    <B24Table
      ref="table"
      :data="data"
      :columns="columns"
      :loading="isLoading"
      sticky
      class="h-[380px]"
    >
      <template #expanded="{ row }">
        <pre>{{ row.original }}</pre>
      </template>
    </B24Table>

    <template #footer>
      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
    </template>
  </B24Card>
</template>
```

> [View source code](https://github.com/bitrix24/b24ui/blob/main/docs/app/components/content/examples/table/TableExample.vue)
> This example demonstrates the most common use case of the `Table` component. Check out the source code on GitHub.

### Data

Use the `data` prop as an array of objects, the columns will be generated based on the keys of the objects.

```vue

<script setup lang="ts">
const data = ref([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])
</script>

<template>
  <B24Table :data="data" class="flex-1" />
</template>

```

### Columns

Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/latest/docs/api/core/column-def){rel="nofollow"} objects with properties like:

- `accessorKey`: [The key of the row object to use when extracting the value for the column.]{.text-(--b24ui-typography-description-color)}
- `header`: [The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).]{.text-(--b24ui-typography-description-color)}
- `footer`: [The footer to display for the column. Works exactly like header, but is displayed under the table.]{.text-(--b24ui-typography-description-color)}
- `cell`: [The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).]{.text-(--b24ui-typography-description-color)}
- `meta`: [Extra properties for the column.]{.text-(--b24ui-typography-description-color)}

  - `class`:

    - `td`: [The classes to apply to the `td` element.]{.text-(--b24ui-typography-description-color)}
    - `th`: [The classes to apply to the `th` element.]{.text-(--b24ui-typography-description-color)}
  - `style`:

    - `td`: [The style to apply to the `td` element.]{.text-(--b24ui-typography-description-color)}
    - `th`: [The style to apply to the `th` element.]{.text-(--b24ui-typography-description-color)}

In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h){rel="nofollow"} inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.

> [Table columns with slots](https://bitrix24.github.io/b24ui/#with-slots)
> You can also use slots to customize the header and data cells of the table.

```vue [TableColumnsExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([{
  id: '4600',
  date: '2024-03-11T15:30:00',
  status: 'paid',
  email: 'james.anderson@example.com',
  amount: 594
}, {
  id: '4599',
  date: '2024-03-11T10:10:00',
  status: 'failed',
  email: 'mia.white@example.com',
  amount: 276
}, {
  id: '4598',
  date: '2024-03-11T08:50:00',
  status: 'refunded',
  email: 'william.brown@example.com',
  amount: 315
}, {
  id: '4597',
  date: '2024-03-10T19:45:00',
  status: 'paid',
  email: 'emma.davis@example.com',
  amount: 529
}, {
  id: '4596',
  date: '2024-03-10T15:55:00',
  status: 'paid',
  email: 'ethan.harris@example.com',
  amount: 639
}])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]
</script>

<template>
  <B24Table :data="data" :columns="columns" class="flex-1" />
</template>
```

> !NOTE
> When rendering components with `h`, you can either use the `resolveComponent` function or import from `#components`.

### Meta

Use the `meta` prop as an object ([TableMeta](https://tanstack.com/table/latest/docs/api/core/table#meta){rel="nofollow"}) to pass properties like:

- `class`:

  - `tr`: [The classes to apply to the `tr` element.]{.text-(--b24ui-typography-description-color)}
- `style`:

  - `tr`: [The style to apply to the `tr` element.]{.text-(--b24ui-typography-description-color)}

```vue [TableCustomMetaExample.vue]
<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'

interface Payment {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data: Payment[] = [
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
]

const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
    meta: {
      class: {
        th: 'text-center font-(--ui-font-weight-semi-bold)',
        td: 'text-center font-[family-name:var(--ui-font-family-system-mono)]'
      }
    }
  },
  {
    accessorKey: 'date',
    header: 'Date',
    cell: ({ row }) => {
      return new Date(row.getValue('date')).toLocaleString('en-US', {
        day: 'numeric',
        month: 'short',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  },
  {
    accessorKey: 'status',
    header: 'Status',
    meta: {
      class: {
        th: 'text-center',
        td: 'text-center'
      }
    },
    cell: ({ row }) => {
      const status = row.getValue('status') as string
      const colorMap = {
        paid: 'text-(--ui-color-accent-main-success)',
        failed: 'text-(--ui-color-accent-main-alert)',
        refunded: 'text-(--ui-color-accent-main-warning)'
      }
      return h('span', {
        class: `font-(--ui-font-weight-semi-bold) capitalize ${colorMap[status as keyof typeof colorMap]}`
      }, status)
    }
  },
  {
    accessorKey: 'email',
    header: 'Email',
    meta: {
      class: {
        th: 'text-left',
        td: 'text-left'
      }
    }
  },
  {
    accessorKey: 'amount',
    header: 'Amount',
    meta: {
      class: {
        th: 'text-right font-(--ui-font-weight-bold) text-(--ui-color-accent-main-primary)',
        td: 'text-right font-[family-name:var(--ui-font-family-system-mono)]'
      }
    },
    cell: ({ row }) => {
      const amount = Number.parseFloat(row.getValue('amount'))
      const formatted = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      }).format(amount)

      return h('span', {
        class: 'font-(--ui-font-weight-semi-bold) text-(--ui-color-accent-main-success)'
      }, formatted)
    }
  }
]
</script>

<template>
  <B24Table :data="data" :columns="columns" class="w-full" />
</template>
```

### Loading

Use the `loading` prop to display a loading state, the `loading-color` prop to change its color and the `loading-animation` prop to change its animation.

```vue

<script setup lang="ts">
const data = ref([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])
</script>

<template>
  <B24Table loading loading-color="air-primary" loading-animation="loading" :data="data" class="flex-1" />
</template>

```

### Sticky

Use the `sticky` prop to make the header or footer sticky.

```vue

<script setup lang="ts">
const data = ref([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  },
  {
    id: '4595',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  },
  {
    id: '4594',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])
</script>

<template>
  <B24Table sticky :data="data" class="flex-1 max-h-[312px]" />
</template>

```

## Examples

### With row actions

You can add a new column that renders a [DropdownMenu](https://bitrix24.github.io/b24ui/raw/docs/components/dropdown-menu.md) component inside the `cell` to render row actions.

```vue [TableRowActionsExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import type { Row } from '@tanstack/vue-table'
import { useClipboard } from '@vueuse/core'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'
import MenuIcon from '@bitrix24/b24icons-vue/main/MenuIcon'

const B24Button = resolveComponent('B24Button')
const B24Badge = resolveComponent('B24Badge')
const B24DropdownMenu = resolveComponent('B24DropdownMenu')

const toast = useToast()
const { copy } = useClipboard()

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [
  {
    id: 'actions',
    meta: {
      style: {
        td: {
          width: '20px',
          padding: '16px 4px'
        }
      }
    },
    cell: ({ row }) => {
      return h(B24DropdownMenu, {
        'content': {
          align: 'center',
          side: 'right',
          sideOffset: -2
        },
        'arrow': true,
        'items': getRowItems(row),
        'aria-label': 'Actions dropdown'
      }, () => h(B24Button, {
        'icon': MenuIcon,
        'color': 'air-tertiary-no-accent',
        'size': 'sm',
        'aria-label': 'Actions dropdown'
      }))
    }
  },
  {
    accessorKey: 'id',
    header: '#',
    cell: ({ row }) => `#${row.getValue('id')}`
  },
  {
    accessorKey: 'date',
    header: 'Date',
    cell: ({ row }) => {
      return new Date(row.getValue('date')).toLocaleString('en-US', {
        day: 'numeric',
        month: 'short',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      })
    }
  },
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ row }) => {
      const color = ({
        paid: 'air-primary-success' as const,
        failed: 'air-primary-alert' as const,
        refunded: 'air-primary' as const
      })[row.getValue('status') as string]

      return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
    }
  },
  {
    accessorKey: 'email',
    header: 'Email'
  },
  {
    accessorKey: 'amount',
    header: () => h('div', { class: 'text-right' }, 'Amount'),
    cell: ({ row }) => {
      const amount = Number.parseFloat(row.getValue('amount'))

      const formatted = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'EUR'
      }).format(amount)

      return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
    }
  }
]

function getRowItems(row: Row<Payment>) {
  return [
    {
      type: 'label',
      label: 'Actions'
    },
    {
      label: 'Copy payment ID',
      onSelect() {
        copy(row.original.id)

        toast.add({
          title: 'Payment ID copied to clipboard!',
          color: 'air-primary-success',
          icon: CircleCheckIcon
        })
      }
    },
    {
      type: 'separator'
    },
    {
      label: 'View customer'
    },
    {
      label: 'View payment details'
    }
  ]
}
</script>

<template>
  <B24Table :data="data" :columns="columns" class="flex-1" />
</template>
```

### With expandable rows

You can add a new column that renders a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component inside the `cell` to toggle the expandable state of a row using the TanStack Table [Expanding APIs](https://tanstack.com/table/latest/docs/api/features/expanding){rel="nofollow"}.

> !CAUTION
> You need to define the `#expanded` slot to render the expanded content which will receive the row as a parameter.

```vue [TableRowExpandableExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const B24Button = resolveComponent('B24Button')
const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  id: 'expand',
  meta: {
    style: {
      td: {
        width: '20px',
        padding: '16px 4px'
      }
    }
  },
  cell: ({ row }) => h(B24Button, {
    'class': 'group',
    'color': 'air-secondary-no-accent',
    'size': 'sm',
    'use-dropdown': true,
    'aria-label': 'Expand',
    'b24ui': {
      trailingIcon: ['transition-transform', row.getIsExpanded() ? 'duration-200 rotate-180' : '']
    },
    'onClick': () => row.toggleExpanded()
  })
}, {
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const expanded = ref({ 1: true })
</script>

<template>
  <B24Table
    v-model:expanded="expanded"
    :data="data"
    :columns="columns"
    :b24ui="{ tr: 'data-[expanded=true]:bg-(--ui-color-base-6)' }"
    class="flex-1"
  >
    <template #expanded="{ row }">
      <pre>{{ row.original }}</pre>
    </template>
  </B24Table>
</template>
```

> !TIP
> You can use the `expanded` prop to control the expandable state of the rows (can be binded with `v-model`).

> !NOTE
> You could also add this action to the [`DropdownMenu`](https://bitrix24.github.io/b24ui/raw/docs/components/dropdown-menu.md) component inside the `actions` column.

### With grouped rows

You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table [Grouping APIs](https://tanstack.com/table/latest/docs/api/features/grouping){rel="nofollow"}.

#### Important parts:

- Add `grouping` prop with an array of column ids you want to group by.
- Add `grouping-options` prop. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
- Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
- Use `aggregateFn` on column definition to define how to aggregate the rows.
- `agregatedCell` renderer on column definition only works if there is no `cell` renderer.

```vue [TableGroupedRowsExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import { getGroupedRowModel } from '@tanstack/vue-table'
import type { GroupingOptions } from '@tanstack/vue-table'
import MinusLIcon from '@bitrix24/b24icons-vue/outline/MinusLIcon'
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'

const B24Badge = resolveComponent('B24Badge')

type Account = {
  id: string
  name: string
}

type PaymentStatus = 'paid' | 'failed' | 'refunded'

type Payment = {
  id: string
  date: string
  status: PaymentStatus
  email: string
  amount: number
  account: Account
}

const getColorByStatus = (status: PaymentStatus) => {
  return {
    paid: 'air-primary-success' as const,
    failed: 'air-primary-alert' as const,
    refunded: 'air-primary' as const
  }[status]
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594,
    account: {
      id: '1',
      name: 'Account 1'
    }
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276,
    account: {
      id: '2',
      name: 'Account 2'
    }
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315,
    account: {
      id: '1',
      name: 'Account 1'
    }
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529,
    account: {
      id: '2',
      name: 'Account 2'
    }
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639,
    account: {
      id: '1',
      name: 'Account 1'
    }
  }
])

const columns: TableColumn<Payment>[] = [
  {
    id: 'title',
    header: 'Item'
  },
  {
    id: 'account_id',
    accessorKey: 'account.id'
  },
  {
    accessorKey: 'id',
    header: '#',
    cell: ({ row }) =>
      row.getIsGrouped()
        ? `${row.getValue('id')} records`
        : `#${row.getValue('id')}`,
    aggregationFn: 'count'
  },
  {
    accessorKey: 'date',
    header: 'Date',
    cell: ({ row }) => {
      return new Date(row.getValue('date')).toLocaleString('en-US', {
        day: 'numeric',
        month: 'short',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      })
    },
    aggregationFn: 'max'
  },
  {
    accessorKey: 'status',
    header: 'Status'
  },
  {
    accessorKey: 'email',
    header: 'Email',
    meta: {
      class: {
        td: 'w-full'
      }
    },
    cell: ({ row }) =>
      row.getIsGrouped()
        ? `${row.getValue('email')} customers`
        : row.getValue('email'),
    aggregationFn: 'uniqueCount'
  },
  {
    accessorKey: 'amount',
    header: () => h('div', { class: 'text-right' }, 'Amount'),
    cell: ({ row }) => {
      const amount = Number.parseFloat(row.getValue('amount'))

      const formatted = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'EUR'
      }).format(amount)

      return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
    },
    aggregationFn: 'sum'
  }
]

const grouping_options = ref<GroupingOptions>({
  groupedColumnMode: 'remove',
  getGroupedRowModel: getGroupedRowModel()
})
</script>

<template>
  <B24Table
    :data="data"
    :columns="columns"
    :grouping="['account_id', 'status']"
    :grouping-options="grouping_options"
    :b24ui="{
      root: 'min-w-full',
      td: 'empty:p-0' // helps with the colspaned row added for expand slot
    }"
  >
    <template #title-cell="{ row }">
      <div v-if="row.getIsGrouped()" class="flex items-center">
        <span
          class="inline-block"
          :style="{ width: `calc(${row.depth} * 1rem)` }"
        />

        <B24Button
          class="mr-2"
          size="xs"
          :icon="row.getIsExpanded() ? MinusLIcon : PlusLIcon"
          @click="row.toggleExpanded()"
        />
        <strong v-if="row.groupingColumnId === 'account_id'">{{
          row.original.account.name
        }}</strong>
        <B24Badge
          v-else-if="row.groupingColumnId === 'status'"
          :color="getColorByStatus(row.original.status)"
          class="capitalize"
        >
          {{ row.original.status }}
        </B24Badge>
      </div>
    </template>
  </B24Table>
</template>
```

### With row selection

You can add a new column that renders a [Checkbox](https://bitrix24.github.io/b24ui/raw/docs/components/checkbox.md) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection){rel="nofollow"}.

```vue [TableRowSelectionExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const B24Checkbox = resolveComponent('B24Checkbox')
const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  id: 'select',
  header: ({ table }) => h(B24Checkbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select all'
  }),
  cell: ({ row }) => h(B24Checkbox, {
    'modelValue': row.getIsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select row'
  })
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const table = useTemplateRef('table')

const rowSelection = ref({ 1: true })
</script>

<template>
  <B24Card
    variant="outline"
    class="flex-1 w-full"
    :b24ui="{
      header: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px]',
      body: 'p-0 sm:px-0 sm:py-0',
      footer: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-legend-color)'
    }"
  >
    <B24Table
      ref="table"
      v-model:row-selection="rowSelection"
      :data="data"
      :columns="columns"
    />
    <template #footer>
      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
    </template>
  </B24Card>
</template>
```

> !TIP
> You can use the `row-selection` prop to control the selection state of the rows (can be binded with `v-model`).

### With row select event

You can add a `@select` listener to make rows clickable with or without a checkbox column.

> !NOTE
> The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.

```vue [TableRowSelectEventExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn, TableRow } from '@bitrix24/b24ui-nuxt'

const B24Checkbox = resolveComponent('B24Checkbox')
const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  id: 'select',
  header: ({ table }) => h(B24Checkbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select all'
  }),
  cell: ({ row }) => h(B24Checkbox, {
    'modelValue': row.getIsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select row'
  })
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const table = useTemplateRef('table')

const rowSelection = ref<Record<string, boolean>>({ })

function onSelect(e: Event, row: TableRow<Payment>) {
  /* If you decide to also select the column you can do this  */
  row.toggleSelected(!row.getIsSelected())
}
</script>

<template>
  <B24Card
    variant="outline"
    class="flex-1 w-full"
    :b24ui="{
      header: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px]',
      body: 'p-0 sm:px-0 sm:py-0',
      footer: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-legend-color)'
    }"
  >
    <B24Table
      ref="table"
      v-model:row-selection="rowSelection"
      :data="data"
      :columns="columns"
      @select="onSelect"
    />
    <template #footer>
      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
    </template>
  </B24Card>
</template>
```

> !TIP
> You can use this to navigate to a page, open a modal or even to select the row manually.

### With row context menu event

You can add a `@contextmenu` listener to make rows right clickable and wrap the Table in a [ContextMenu](https://bitrix24.github.io/b24ui/raw/docs/components/context-menu.md) component to display row actions for example.

> !NOTE
> The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.

```vue [TableRowContextMenuEventExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { ContextMenuItem, TableColumn, TableRow } from '@bitrix24/b24ui-nuxt'
import { useClipboard } from '@vueuse/core'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'

const B24Badge = resolveComponent('B24Badge')
const B24Checkbox = resolveComponent('B24Checkbox')

const toast = useToast()
const { copy } = useClipboard()

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  id: 'select',
  header: ({ table }) => h(B24Checkbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select all'
  }),
  cell: ({ row }) => h(B24Checkbox, {
    'modelValue': row.getIsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select row'
  })
}, {
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const items = ref<ContextMenuItem[]>([])

function getRowItems(row: TableRow<Payment>) {
  return [{
    type: 'label' as const,
    label: 'Actions'
  }, {
    label: 'Copy payment ID',
    onSelect() {
      copy(row.original.id)

      toast.add({
        title: 'Payment ID copied to clipboard!',
        color: 'air-primary-success',
        icon: CircleCheckIcon
      })
    }
  }, {
    label: row.getIsExpanded() ? 'Collapse' : 'Expand',
    onSelect() {
      row.toggleExpanded()
    }
  }, {
    type: 'separator' as const
  }, {
    label: 'View customer'
  }, {
    label: 'View payment details'
  }]
}

function onContextmenu(_e: Event, row: TableRow<Payment>) {
  items.value = getRowItems(row)
}
</script>

<template>
  <B24ContextMenu :items="items">
    <B24Table
      :data="data"
      :columns="columns"
      class="flex-1"
      @contextmenu="onContextmenu"
    >
      <template #expanded="{ row }">
        <pre>{{ row.original }}</pre>
      </template>
    </B24Table>
  </B24ContextMenu>
</template>
```

### With row hover event

You can add a `@hover` listener to make rows hoverable and use a [Popover](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md) or a [Tooltip](https://bitrix24.github.io/b24ui/raw/docs/components/tooltip.md) component to display row details for example.

> !NOTE
> The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.

```vue [TableRowHoverEventExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import { refDebounced } from '@vueuse/core'
import type { TableColumn, TableRow } from '@bitrix24/b24ui-nuxt'

const B24Checkbox = resolveComponent('B24Checkbox')
const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  id: 'select',
  header: ({ table }) => h(B24Checkbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select all'
  }),
  cell: ({ row }) => h(B24Checkbox, {
    'modelValue': row.getIsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select row'
  })
}, {
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const anchor = ref({ x: 0, y: 0 })

const reference = computed(() => ({
  getBoundingClientRect: () =>
    ({
      width: 0,
      height: 0,
      left: anchor.value.x,
      right: anchor.value.x,
      top: anchor.value.y,
      bottom: anchor.value.y,
      ...anchor.value
    } as DOMRect)
}))

const open = ref(false)
const openDebounced = refDebounced(open, 10)
const selectedRow = ref<TableRow<Payment> | null>(null)

function onHover(_e: Event, row: TableRow<Payment> | null) {
  selectedRow.value = row

  open.value = !!row
}
</script>

<template>
  <B24Card
    variant="outline"
    class="flex-1 w-full"
    :b24ui="{
      header: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px]',
      body: 'p-0 sm:px-0 sm:py-0',
      footer: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-legend-color)'
    }"
  >
    <B24Table
      :data="data"
      :columns="columns"
      class="flex-1"
      @pointermove="(ev: PointerEvent) => {
        anchor.x = ev.clientX
        anchor.y = ev.clientY
      }"
      @hover="onHover"
    />

    <B24Popover
      :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
      :open="openDebounced"
      :reference="reference"
    >
      <template #content>
        <ProseP class="p-4">
          {{ selectedRow?.original?.id || '?' }}
        </ProseP>
      </template>
    </B24Popover>
  </B24Card>
</template>
```

> !NOTE
> This example is similar as the Popover [with following cursor example](https://bitrix24.github.io/b24ui/raw/docs/components/popover.md#with-following-cursor) and uses a [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced){rel="nofollow"} to prevent the Popover from opening and closing too quickly when moving the cursor from one row to another.

### With column footer

You can add a `footer` property to the column definition to render a footer for the column.

```vue [TableColumnFooterExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn, TableRow } from '@bitrix24/b24ui-nuxt'

const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  footer: ({ column }) => {
    const total = column.getFacetedRowModel().rows.reduce((acc: number, row: TableRow<Payment>) => acc + Number.parseFloat(row.getValue('amount')), 0)

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(total)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, `Total: ${formatted}`)
  },
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]
</script>

<template>
  <B24Table :data="data" :columns="columns" class="flex-1" />
</template>
```

### With column sorting

You can update a column `header` to render a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component inside the `header` to toggle the sorting state using the TanStack Table [Sorting APIs](https://tanstack.com/table/latest/docs/api/features/sorting){rel="nofollow"}.

```vue [TableColumnSortingExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import ChevronTopLIcon from '@bitrix24/b24icons-vue/outline/ChevronTopLIcon'
import ChevronDownLIcon from '@bitrix24/b24icons-vue/outline/ChevronDownLIcon'

const B24Badge = resolveComponent('B24Badge')
const B24Button = resolveComponent('B24Button')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([{
  id: '4600',
  date: '2024-03-11T15:30:00',
  status: 'paid',
  email: 'james.anderson@example.com',
  amount: 594
}, {
  id: '4599',
  date: '2024-03-11T10:10:00',
  status: 'failed',
  email: 'mia.white@example.com',
  amount: 276
}, {
  id: '4598',
  date: '2024-03-11T08:50:00',
  status: 'refunded',
  email: 'william.brown@example.com',
  amount: 315
}, {
  id: '4597',
  date: '2024-03-10T19:45:00',
  status: 'paid',
  email: 'emma.davis@example.com',
  amount: 529
}, {
  id: '4596',
  date: '2024-03-10T15:55:00',
  status: 'paid',
  email: 'ethan.harris@example.com',
  amount: 639
}])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: ({ column }) => {
    const isSorted = column.getIsSorted()

    return h(B24Button, {
      color: 'air-tertiary-no-accent',
      label: 'Email',
      size: 'sm',
      class: '-mx-2.5 [--ui-btn-height:20px]',
      onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
    }, {
      trailing: () => h(isSorted ? (isSorted === 'asc' ? ChevronTopLIcon : ChevronDownLIcon) : ChevronTopLIcon, {
        class: 'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)'
      })
    })
  }
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const sorting = ref([{
  id: 'email',
  desc: false
}])
</script>

<template>
  <B24Table
    v-model:sorting="sorting"
    :data="data"
    :columns="columns"
    class="flex-1"
  />
</template>
```

> !TIP
> You can use the `sorting` prop to control the sorting state of the columns (can be binded with `v-model`).

You can also create a reusable component to make any column header sortable.

```vue [TableColumnSortingReusableExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import type { Column } from '@tanstack/vue-table'
import ChevronTopLIcon from '@bitrix24/b24icons-vue/outline/ChevronTopLIcon'
import ChevronDownLIcon from '@bitrix24/b24icons-vue/outline/ChevronDownLIcon'

const B24Badge = resolveComponent('B24Badge')
const B24Button = resolveComponent('B24Button')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([{
  id: '4600',
  date: '2024-03-11T15:30:00',
  status: 'paid',
  email: 'james.anderson@example.com',
  amount: 594
}, {
  id: '4599',
  date: '2024-03-11T10:10:00',
  status: 'failed',
  email: 'mia.white@example.com',
  amount: 276
}, {
  id: '4598',
  date: '2024-03-11T08:50:00',
  status: 'refunded',
  email: 'william.brown@example.com',
  amount: 315
}, {
  id: '4597',
  date: '2024-03-10T19:45:00',
  status: 'paid',
  email: 'emma.davis@example.com',
  amount: 529
}, {
  id: '4596',
  date: '2024-03-10T15:55:00',
  status: 'paid',
  email: 'ethan.harris@example.com',
  amount: 639
}])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: ({ column }) => getHeader(column, 'ID'),
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: ({ column }) => getHeader(column, 'Date'),
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: ({ column }) => getHeader(column, 'Status'),
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: ({ column }) => getHeader(column, 'Email')
}, {
  accessorKey: 'amount',
  header: ({ column }) => h('div', { class: 'text-left w-[60px]' }, getHeader(column, 'Amount')),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

function getHeader(column: Column<Payment>, label: string) {
  const isSorted = column.getIsSorted()

  return h(B24Button, {
    'color': 'air-tertiary-no-accent',
    label,
    'size': 'sm',
    'class': 'group -mx-2.5 [--ui-btn-height:20px]',
    'aria-label': `Sort by ${isSorted === 'asc' ? 'descending' : 'ascending'}`,
    'onClick': () => column.toggleSorting(column.getIsSorted() === 'asc')
  }, {
    trailing: () => h(isSorted ? (isSorted === 'asc' ? ChevronTopLIcon : ChevronDownLIcon) : ChevronTopLIcon, {
      class: {
        'text-(--ui-btn-color) shrink-0 size-(--ui-btn-icon-size)': true,
        'hidden group-hover:inline-flex': !isSorted
      }
    })
  })
}

const sorting = ref([{
  id: 'id',
  desc: false
}])
</script>

<template>
  <B24Table
    v-model:sorting="sorting"
    :data="data"
    :columns="columns"
    class="flex-1"
  />
</template>
```

> !NOTE
> In this example, we use a function to define the column header but you can also create an actual component.

### With column pinning

You can update a column `header` to render a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) component inside the `header` to toggle the pinning state using the TanStack Table [Pinning APIs](https://tanstack.com/table/latest/docs/api/features/row-pinning){rel="nofollow"}.

> !NOTE
> A pinned column will become sticky on the left or right side of the table. When using column pinning, you should define explicit `size` values for your columns to ensure proper column width handling, especially with multiple pinned columns.

```vue [TableColumnPinningExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import type { Column } from '@tanstack/vue-table'
import PinIcon from '@bitrix24/b24icons-vue/outline/PinIcon'
import UnpinIcon from '@bitrix24/b24icons-vue/outline/UnpinIcon'

const B24Badge = resolveComponent('B24Badge')
const B24Button = resolveComponent('B24Button')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([{
  id: '4600000000000000000000000000000000000000',
  date: '2024-03-11T15:30:00',
  status: 'paid',
  email: 'james.anderson@example.com',
  amount: 594000
}, {
  id: '4599000000000000000000000000000000000000',
  date: '2024-03-11T10:10:00',
  status: 'failed',
  email: 'mia.white@example.com',
  amount: 276000
}, {
  id: '4598000000000000000000000000000000000000',
  date: '2024-03-11T08:50:00',
  status: 'refunded',
  email: 'william.brown@example.com',
  amount: 315000
}, {
  id: '4597000000000000000000000000000000000000',
  date: '2024-03-10T19:45:00',
  status: 'paid',
  email: 'emma.davis@example.com',
  amount: 5290000
}, {
  id: '4596000000000000000000000000000000000000',
  date: '2024-03-10T15:55:00',
  status: 'paid',
  email: 'ethan.harris@example.com',
  amount: 639000
}])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: ({ column }) => getHeader(column, 'ID', 'left'),
  cell: ({ row }) => `#${row.getValue('id')}`,
  size: 381
}, {
  accessorKey: 'date',
  header: ({ column }) => getHeader(column, 'Date', 'left'),
  size: 172
}, {
  accessorKey: 'status',
  header: ({ column }) => getHeader(column, 'Status', 'left'),
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  },
  size: 103
}, {
  accessorKey: 'email',
  header: ({ column }) => getHeader(column, 'Email', 'left'),
  size: 232
}, {
  accessorKey: 'amount',
  header: ({ column }) => h('div', { class: 'text-left w-[60px]' }, getHeader(column, 'Amount', 'right')),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  },
  size: 130
}]

function getHeader(column: Column<Payment>, label: string, position: 'left' | 'right') {
  const isPinned = column.getIsPinned()

  return h(B24Button, {
    color: 'air-tertiary-no-accent',
    label,
    size: 'sm',
    icon: isPinned ? UnpinIcon : PinIcon,
    class: '-mx-2.5 [--ui-btn-height:20px]',
    onClick() {
      column.pin(isPinned === position ? false : position)
    }
  })
}

const columnPinning = ref({
  left: ['id'],
  right: ['amount']
})
</script>

<template>
  <B24Table
    v-model:column-pinning="columnPinning"
    :data="data"
    :columns="columns"
    class="flex-1"
  />
</template>
```

> !TIP
> You can use the `column-pinning` prop to control the pinning state of the columns (can be binded with `v-model`).

### With column visibility

You can use a [DropdownMenu](https://bitrix24.github.io/b24ui/raw/docs/components/dropdown-menu.md) component to toggle the visibility of the columns using the TanStack Table [Column Visibility APIs](https://tanstack.com/table/latest/docs/api/features/column-visibility){rel="nofollow"}.

```vue [TableColumnVisibilityExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import { upperFirst } from 'scule'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const table = useTemplateRef('table')

const columnVisibility = ref({
  id: false
})
</script>

<template>
  <B24Card
    variant="outline"
    class="flex-1 w-full"
    :b24ui="{
      header: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px]',
      body: 'p-0 sm:px-0 sm:py-0',
      footer: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-legend-color)'
    }"
  >
    <template #header>
      <div class="flex justify-end">
        <B24DropdownMenu
          :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
            label: upperFirst(column.id),
            type: 'checkbox' as const,
            checked: column.getIsVisible(),
            onUpdateChecked(checked: boolean) {
              table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
            },
            onSelect(e: Event) {
              e.preventDefault()
            }
          }))"
          :content="{ align: 'end' }"
        >
          <B24Button
            label="Columns"
            color="air-secondary-accent-1"
            use-dropdown
          />
        </B24DropdownMenu>
      </div>
    </template>
    <B24Table
      ref="table"
      v-model:column-visibility="columnVisibility"
      :data="data"
      :columns="columns"
    />
  </B24Card>
</template>
```

> !TIP
> You can use the `column-visibility` prop to control the visibility state of the columns (can be binded with `v-model`).

### With column filters

You can use an [Input](https://bitrix24.github.io/b24ui/raw/docs/components/input.md) component to filter per column the rows using the TanStack Table [Column Filtering APIs](https://tanstack.com/table/latest/docs/api/features/column-filtering){rel="nofollow"}.

```vue [TableColumnFiltersExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const table = useTemplateRef('table')

const columnFilters = ref([{
  id: 'email',
  value: 'james'
}])
</script>

<template>
  <B24Card
    variant="outline"
    class="flex-1 w-full"
    :b24ui="{
      header: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px]',
      body: 'p-0 sm:px-0 sm:py-0',
      footer: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-legend-color)'
    }"
  >
    <template #header>
      <B24Input
        :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
        class="max-w-[300px]"
        placeholder="Filter emails..."
        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
      />
    </template>
    <B24Table
      ref="table"
      v-model:column-filters="columnFilters"
      :data="data"
      :columns="columns"
    />
  </B24Card>
</template>
```

> !TIP
> You can use the `column-filters` prop to control the filters state of the columns (can be binded with `v-model`).

### With global filter

You can use an [Input](https://bitrix24.github.io/b24ui/raw/docs/components/input.md) component to filter the rows using the TanStack Table [Global Filtering APIs](https://tanstack.com/table/latest/docs/api/features/global-filtering){rel="nofollow"}.

```vue [TableGlobalFilterExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    status: 'paid',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    status: 'failed',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    status: 'refunded',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    status: 'paid',
    email: 'emma.davis@example.com',
    amount: 529
  },
  {
    id: '4596',
    date: '2024-03-10T15:55:00',
    status: 'paid',
    email: 'ethan.harris@example.com',
    amount: 639
  }
])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'air-primary-success' as const,
      failed: 'air-primary-alert' as const,
      refunded: 'air-primary' as const
    })[row.getValue('status') as string]

    return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const globalFilter = ref('45')
</script>

<template>
  <B24Card
    variant="outline"
    class="flex-1 w-full"
    :b24ui="{
      header: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px]',
      body: 'p-0 sm:px-0 sm:py-0',
      footer: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-legend-color)'
    }"
  >
    <template #header>
      <B24Input
        v-model="globalFilter"
        class="max-w-[300px]"
        placeholder="Filter..."
      />
    </template>

    <B24Table
      ref="table"
      v-model:global-filter="globalFilter"
      :data="data"
      :columns="columns"
    />
  </B24Card>
</template>
```

> !TIP
> You can use the `global-filter` prop to control the global filter state (can be binded with `v-model`).

### With pagination

You can use a [Pagination](https://bitrix24.github.io/b24ui/raw/docs/components/pagination.md) component to control the pagination state using the [Pagination APIs](https://tanstack.com/table/latest/docs/api/features/pagination){rel="nofollow"}.

There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/latest/docs/guide/pagination#pagination-guide){rel="nofollow"}. In this example, we use client-side pagination so we need to manually pass `getPaginationRowModel()`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"} function.

```vue [TablePaginationExample.vue]
<script setup lang="ts">
import { getPaginationRowModel } from '@tanstack/vue-table'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const table = useTemplateRef('table')

type Payment = {
  id: string
  date: string
  email: string
  amount: number
}
const data = ref<Payment[]>([{
  id: '4600',
  date: '2024-03-11T15:30:00',
  email: 'james.anderson@example.com',
  amount: 594
}, {
  id: '4599',
  date: '2024-03-11T10:10:00',
  email: 'mia.white@example.com',
  amount: 276
}, {
  id: '4598',
  date: '2024-03-11T08:50:00',
  email: 'william.brown@example.com',
  amount: 315
}, {
  id: '4597',
  date: '2024-03-10T19:45:00',
  email: 'emma.davis@example.com',
  amount: 529
}, {
  id: '4596',
  date: '2024-03-10T15:55:00',
  email: 'ethan.harris@example.com',
  amount: 639
}, {
  id: '4595',
  date: '2024-03-10T13:20:00',
  email: 'sophia.miller@example.com',
  amount: 428
}, {
  id: '4594',
  date: '2024-03-10T11:05:00',
  email: 'noah.wilson@example.com',
  amount: 673
}, {
  id: '4593',
  date: '2024-03-09T22:15:00',
  email: 'olivia.jones@example.com',
  amount: 382
}, {
  id: '4592',
  date: '2024-03-09T20:30:00',
  email: 'liam.taylor@example.com',
  amount: 547
}, {
  id: '4591',
  date: '2024-03-09T18:45:00',
  email: 'ava.thomas@example.com',
  amount: 291
}, {
  id: '4590',
  date: '2024-03-09T16:20:00',
  email: 'lucas.martin@example.com',
  amount: 624
}, {
  id: '4589',
  date: '2024-03-09T14:10:00',
  email: 'isabella.clark@example.com',
  amount: 438
}, {
  id: '4588',
  date: '2024-03-09T12:05:00',
  email: 'mason.rodriguez@example.com',
  amount: 583
}, {
  id: '4587',
  date: '2024-03-09T10:30:00',
  email: 'sophia.lee@example.com',
  amount: 347
}, {
  id: '4586',
  date: '2024-03-09T08:15:00',
  email: 'ethan.walker@example.com',
  amount: 692
}, {
  id: '4585',
  date: '2024-03-08T23:40:00',
  email: 'amelia.hall@example.com',
  amount: 419
}, {
  id: '4584',
  date: '2024-03-08T21:25:00',
  email: 'oliver.young@example.com',
  amount: 563
}, {
  id: '4583',
  date: '2024-03-08T19:50:00',
  email: 'aria.king@example.com',
  amount: 328
}, {
  id: '4582',
  date: '2024-03-08T17:35:00',
  email: 'henry.wright@example.com',
  amount: 647
}, {
  id: '4581',
  date: '2024-03-08T15:20:00',
  email: 'luna.lopez@example.com',
  amount: 482
}])
const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))
    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)
    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const pagination = ref({
  pageIndex: 0,
  pageSize: 5
})
</script>

<template>
  <B24Card
    variant="outline"
    class="flex-1 w-full"
    :b24ui="{
      header: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px]',
      body: 'p-0 sm:px-0 sm:py-0',
      footer: 'p-[12px] px-[14px] py-[14px] sm:px-[14px] sm:py-[14px] text-(length:--ui-font-size-xs) text-(--b24ui-typography-legend-color) flex justify-center'
    }"
  >
    <B24Table
      ref="table"
      v-model:pagination="pagination"
      :data="data"
      :columns="columns"
      :pagination-options="{ getPaginationRowModel: getPaginationRowModel() }"
      class="flex-1"
    />
    <template #footer>
      <B24Pagination
        size="sm"
        color="air-tertiary-no-accent"
        :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
        :items-per-page="table?.tableApi?.getState().pagination.pageSize"
        :total="table?.tableApi?.getFilteredRowModel().rows.length"
        @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
      />
    </template>
  </B24Card>
</template>
```

> !TIP
> You can use the `pagination` prop to control the pagination state (can be binded with `v-model`).

### With fetched data

You can fetch data from an API and use them in the Table.

```vue [TableFetchExample.vue]
<script setup lang="ts">
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const B24Avatar = resolveComponent('B24Avatar')

type User = {
  id: number
  name: string
  username: string
  email: string
  avatar: { src: string }
  company: { name: string }
}

const { data, status } = await useFetch<User[]>('https://jsonplaceholder.typicode.com/users', {
  key: 'table-users',
  transform: (data) => {
    return data?.map(user => ({
      ...user,
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, alt: `${user.name} avatar` }
    })) || []
  },
  lazy: true
})

const columns: TableColumn<User>[] = [{
  accessorKey: 'id',
  header: 'ID'
}, {
  accessorKey: 'name',
  header: 'Name',
  cell: ({ row }) => {
    return h('div', { class: 'flex items-center gap-3' }, [
      h(B24Avatar, {
        ...row.original.avatar,
        size: 'lg'
      }),
      h('div', undefined, [
        h('p', { class: 'font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color)' }, row.original.name),
        h('p', { class: '' }, `@${row.original.username}`)
      ])
    ])
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'company',
  header: 'Company',
  cell: ({ row }) => row.original.company.name
}]
</script>

<template>
  <B24Table :data="data" :columns="columns" :loading="status === 'pending'" class="flex-1 h-[290px]" />
</template>
```

### With infinite scroll

If you use server-side pagination, you can use the [`useInfiniteScroll`](https://vueuse.org/core/useInfiniteScroll/#useinfinitescroll){rel="nofollow"} composable to load more data when scrolling.

```vue [TableInfiniteScrollExample.vue]
<script setup lang="ts">
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import { useInfiniteScroll } from '@vueuse/core'

const B24Avatar = resolveComponent('B24Avatar')

type User = {
  id: number
  firstName: string
  username: string
  email: string
  image: string
}

type UserResponse = {
  users: User[]
  total: number
  skip: number
  limit: number
}

const skip = ref(0)

const { data, status, execute } = await useFetch('https://dummyjson.com/users?limit=10&select=firstName,username,email,image', {
  key: 'table-users-infinite-scroll',
  params: { skip },
  transform: (data?: UserResponse) => {
    return data?.users
  },
  lazy: true,
  immediate: false,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})

const columns: TableColumn<User>[] = [
  {
    accessorKey: 'id',
    header: 'ID'
  },
  {
    accessorKey: 'image',
    header: 'Avatar',
    cell: ({ row }) => h(B24Avatar, { src: row.original.image })
  },
  {
    accessorKey: 'firstName',
    header: 'First name'
  },
  {
    accessorKey: 'email',
    header: 'Email'
  },
  {
    accessorKey: 'username',
    header: 'Username'
  }
]

const users = ref<User[]>([])

watch(data, () => {
  users.value = [
    ...users.value,
    ...(data.value || [])
  ]
})

execute()

const table = useTemplateRef('table')

onMounted(() => {
  useInfiniteScroll(table.value?.$el, () => {
    skip.value += 10
  }, {
    distance: 200,
    canLoadMore: () => {
      return status.value !== 'pending'
    }
  })
})
</script>

<template>
  <B24Table
    ref="table"
    :data="users"
    :columns="columns"
    :loading="status === 'pending'"
    sticky
    class="flex-1 h-[290px]"
  />
</template>
```

### With drag and drop

You can use the [`useSortable`](https://vueuse.org/integrations/useSortable/){rel="nofollow"} composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html){rel="nofollow"} to enable drag and drop functionality on the Table. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/){rel="nofollow"} to provide a seamless drag and drop experience.

> !NOTE
> Since the table ref doesn't expose the tbody element, add a unique class to it via the `:b24ui` prop to target it with `useSortable` (e.g. `:b24ui="{ tbody: 'my-table-tbody' }"`).

```vue [TableDragAndDropExample.vue]
<script setup lang="ts">
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import { useSortable } from '@vueuse/integrations/useSortable.mjs'

type Payment = {
  id: string
  date: string
  email: string
  amount: number
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    email: 'james.anderson@example.com',
    amount: 594
  },
  {
    id: '4599',
    date: '2024-03-11T10:10:00',
    email: 'mia.white@example.com',
    amount: 276
  },
  {
    id: '4598',
    date: '2024-03-11T08:50:00',
    email: 'william.brown@example.com',
    amount: 315
  },
  {
    id: '4597',
    date: '2024-03-10T19:45:00',
    email: 'emma.davis@example.com',
    amount: 529
  }
])

const columns: TableColumn<Payment>[] = [{
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))
    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)
    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

useSortable('.my-table-tbody', data, {
  animation: 150
})
</script>

<template>
  <B24Table
    ref="table"
    :data="data"
    :columns="columns"
    :b24ui="{
      tbody: 'my-table-tbody'
    }"
    class="flex-1"
  />
</template>
```

### With virtualization

Use the `virtualize` prop to enable virtualization for large datasets as a boolean or an object with options like `{ estimateSize: 65, overscan: 12 }`. You can also pass other [TanStack Virtual options](https://tanstack.com/virtual/latest/docs/api/virtualizer#optional-options){rel="nofollow"} to customize the virtualization behavior.

> !WARNING
> When virtualization is enabled, the sticky properties are not supported.

```vue [TableVirtualizeExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'

const B24Badge = resolveComponent('B24Badge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>(Array(1000).fill(0).map((_, i) => ({
  id: `4600-${i}`,
  date: '2024-03-11T15:30:00',
  status: 'paid',
  email: 'james.anderson@example.com',
  amount: 594
})))

const columns: TableColumn<Payment>[] = [
  {
    accessorKey: 'id',
    header: '#',
    cell: ({ row }) => `#${row.getValue('id')}`
  },
  {
    accessorKey: 'date',
    header: 'Date',
    cell: ({ row }) => {
      return new Date(row.getValue('date')).toLocaleString('en-US', {
        day: 'numeric',
        month: 'short',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      })
    }
  },
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ row }) => {
      const color = ({
        paid: 'air-primary-success' as const,
        failed: 'air-primary-alert' as const,
        refunded: 'air-primary' as const
      })[row.getValue('status') as string]

      return h(B24Badge, { class: 'capitalize', color }, () => row.getValue('status'))
    }
  },
  {
    accessorKey: 'email',
    header: 'Email'
  },
  {
    accessorKey: 'amount',
    header: () => h('div', { class: 'text-right' }, 'Amount'),
    cell: ({ row }) => {
      const amount = Number.parseFloat(row.getValue('amount'))

      const formatted = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'EUR'
      }).format(amount)

      return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
    }
  }
]
</script>

<template>
  <B24Table
    virtualize
    :data="data"
    :columns="columns"
    class="flex-1 h-[290px]"
  />
</template>
```

> !NOTE
> A height constraint is required on the table for virtualization to work properly (e.g., `class="h-[400px]"`).

### With tree data

You can use the `get-sub-rows` prop to display hierarchical (tree) data in the table.
For example, if your data objects have a `children` array, set `:get-sub-rows="row => row.children"` to enable expandable rows.

```vue [TableTreeDataExample.vue]
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import type { TableColumn } from '@bitrix24/b24ui-nuxt'
import MinusLIcon from '@bitrix24/b24icons-vue/outline/MinusLIcon'
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'

const B24Checkbox = resolveComponent('B24Checkbox')
const B24Button = resolveComponent('B24Button')

type Payment = {
  id: string
  date: string
  email: string
  amount: number
  children?: Payment[]
}

const data = ref<Payment[]>([
  {
    id: '4600',
    date: '2024-03-11T15:30:00',
    email: 'james.anderson@example.com',
    amount: 594,
    children: [
      {
        id: '4599',
        date: '2024-03-11T10:10:00',
        email: 'mia.white@example.com',
        amount: 276
      },
      {
        id: '4598',
        date: '2024-03-11T08:50:00',
        email: 'william.brown@example.com',
        amount: 315
      },
      {
        id: '4597',
        date: '2024-03-10T19:45:00',
        email: 'emma.davis@example.com',
        amount: 529,
        children: [
          {
            id: '4592',
            date: '2024-03-09T18:45:00',
            email: 'benjamin.jackson@example.com',
            amount: 851
          },
          {
            id: '4591',
            date: '2024-03-09T16:05:00',
            email: 'sophia.miller@example.com',
            amount: 762
          },
          {
            id: '4590',
            date: '2024-03-09T14:20:00',
            email: 'noah.clark@example.com',
            amount: 573,
            children: [
              {
                id: '4596',
                date: '2024-03-10T15:55:00',
                email: 'ethan.harris@example.com',
                amount: 639
              },
              {
                id: '4595',
                date: '2024-03-10T13:40:00',
                email: 'ava.thomas@example.com',
                amount: 428
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: '4589',
    date: '2024-03-09T11:35:00',
    email: 'isabella.lee@example.com',
    amount: 389
  }
])

const columns: TableColumn<Payment>[] = [{
  id: 'select',
  header: ({ table }) => h(B24Checkbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select all'
  }),
  cell: ({ row }) => h(B24Checkbox, {
    'modelValue': row.getIsSelected() ? true : row.getIsSomeSelected() ? 'indeterminate' : false,
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
    'size': 'sm',
    'aria-label': 'Select row'
  })
}, {
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => {
    return h(
      'div',
      {
        style: {
          paddingLeft: `${row.depth}rem`
        },
        class: 'flex items-center gap-2'
      },
      [
        h(B24Button, {
          size: 'xs',
          icon: row.getIsExpanded() ? MinusLIcon : PlusLIcon,
          class: !row.getCanExpand() && 'invisible',
          b24ui: {
            base: 'p-0'
          },
          onClick: row.getToggleExpandedHandler()
        }),
        row.getValue('id') as string
      ]
    )
  }
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)

    return h('div', { class: 'text-right font-(--ui-font-weight-medium)' }, formatted)
  }
}]

const expanded = ref({ 0: true })
</script>

<template>
  <B24Table
    v-model:expanded="expanded"
    :data="data"
    :columns="columns"
    :get-sub-rows="row => row.children"
    class="flex-1"
    :b24ui="{
      base: 'border-separate border-spacing-0',
      tbody: '[&>tr]:last:[&>td]:border-b-0',
      tr: 'group',
      td: 'empty:p-0 group-has-[td:not(:empty)]:border-b border-(--ui-color-design-tinted-na-stroke)'
    }"
  />
</template>
```

### With slots

You can use slots to customize the header and data cells of the table.

Use the `#<column>-header` slot to customize the header of a column. You will have access to the `column`, `header` and `table` properties in the slot scope.

Use the `#<column>-cell` slot to customize the cell of a column. You will have access to the `cell`, `column`, `getValue`, `renderValue`, `row`, and `table` properties in the slot scope.

```vue [TableSlotsExample.vue]
<script setup lang="ts">
import type { TableColumn, DropdownMenuItem } from '@bitrix24/b24ui-nuxt'
import { useClipboard } from '@vueuse/core'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'
import MenuIcon from '@bitrix24/b24icons-vue/main/MenuIcon'

interface User {
  id: number
  name: string
  position: string
  email: string
  role: string
}

const toast = useToast()
const { copy } = useClipboard()

const data = ref<User[]>([
  {
    id: 1,
    name: 'Lindsay Walton',
    position: 'Front-end Developer',
    email: 'lindsay.walton@example.com',
    role: 'Member'
  },
  {
    id: 2,
    name: 'Courtney Henry',
    position: 'Designer',
    email: 'courtney.henry@example.com',
    role: 'Admin'
  },
  {
    id: 3,
    name: 'Tom Cook',
    position: 'Director of Product',
    email: 'tom.cook@example.com',
    role: 'Member'
  },
  {
    id: 4,
    name: 'Whitney Francis',
    position: 'Copywriter',
    email: 'whitney.francis@example.com',
    role: 'Admin'
  },
  {
    id: 5,
    name: 'Leonard Krasner',
    position: 'Senior Designer',
    email: 'leonard.krasner@example.com',
    role: 'Owner'
  },
  {
    id: 6,
    name: 'Floyd Miles',
    position: 'Principal Designer',
    email: 'floyd.miles@example.com',
    role: 'Member'
  }
])

const columns: TableColumn<User>[] = [
  {
    id: 'action',
    meta: {
      style: {
        td: {
          width: '20px',
          padding: '16px 4px'
        }
      }
    }
  },
  {
    accessorKey: 'id',
    header: 'ID'
  },
  {
    accessorKey: 'name',
    header: 'Name'
  },
  {
    accessorKey: 'email',
    header: 'Email'
  },
  {
    accessorKey: 'role',
    header: 'Role'
  }
]

function getDropdownActions(user: User): DropdownMenuItem[][] {
  return [
    [{
      label: 'Copy user Id',
      onSelect: () => {
        copy(user.id.toString())

        toast.add({
          title: 'Payment ID copied to clipboard!',
          color: 'air-primary-success',
          icon: CircleCheckIcon
        })
      }
    }],
    [{
      label: 'Edit'
    }, {
      label: 'Delete',
      color: 'air-primary-alert'
    }]
  ]
}
</script>

<template>
  <B24Table :data="data" :columns="columns" class="flex-1">
    <template #name-cell="{ row }">
      <div class="flex items-center gap-3">
        <B24Avatar :src="`https://i.pravatar.cc/120?img=${row.original.id}`" size="lg" :alt="`${row.original.name} avatar`" />
        <div>
          <p class="font-(--ui-font-weight-medium)">
            {{ row.original.name }}
          </p>
          <p>
            {{ row.original.position }}
          </p>
        </div>
      </div>
    </template>
    <template #action-cell="{ row }">
      <B24DropdownMenu :items="getDropdownActions(row.original)" arrow :content="{ align: 'center', side: 'right', sideOffset: -2 }">
        <B24Button color="air-tertiary-no-accent" size="sm" :icon="MenuIcon" aria-label="Actions" />
      </B24DropdownMenu>
    </template>
  </B24Table>
</template>
```

## API

### Props

```ts
/**
 * Props for the Table component
 */
interface TableProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  data?: unknown[] | undefined;
  columns?: TableColumn<unknown, unknown>[] | undefined;
  caption?: string | undefined;
  /**
   * You can pass any object to `options.meta` and access it anywhere the `table` is available via `table.options.meta`.
   */
  meta?: TableMeta<unknown> | undefined;
  /**
   * Enable virtualization for large datasets.
   * Note: when enabled, the divider between rows and sticky properties are not supported.
   * @default "false"
   */
  virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, "getScrollElement" | "count" | "estimateSize" | "overscan">> & { overscan?: number | undefined; estimateSize?: number | ((index: number) => number) | undefined; }) | undefined;
  /**
   * The text to display when the table is empty.
   */
  empty?: string | undefined;
  /**
   * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
   * Note: this prop is not supported when `virtualize` is true.
   */
  sticky?: boolean | "header" | "footer" | undefined;
  /**
   * Whether the table should be in loading state.
   */
  loading?: boolean | undefined;
  loadingColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-primary-warning" | undefined;
  loadingAnimation?: "loading" | "carousel" | "carousel-inverse" | "swing" | "elastic" | undefined;
  /**
   * Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly.
   * @default "{
    deep: true
}"
   */
  watchOptions?: WatchOptions<boolean> | undefined;
  globalFilterOptions?: Omit<GlobalFilterOptions<unknown>, "onGlobalFilterChange"> | undefined;
  columnFiltersOptions?: Omit<ColumnFiltersOptions<unknown>, "getFilteredRowModel" | "onColumnFiltersChange"> | undefined;
  columnPinningOptions?: Omit<ColumnPinningOptions, "onColumnPinningChange"> | undefined;
  columnSizingOptions?: Omit<ColumnSizingOptions, "onColumnSizingChange" | "onColumnSizingInfoChange"> | undefined;
  visibilityOptions?: Omit<VisibilityOptions, "onColumnVisibilityChange"> | undefined;
  sortingOptions?: Omit<SortingOptions<unknown>, "getSortedRowModel" | "onSortingChange"> | undefined;
  groupingOptions?: Omit<GroupingOptions, "onGroupingChange"> | undefined;
  expandedOptions?: Omit<ExpandedOptions<unknown>, "getExpandedRowModel" | "onExpandedChange"> | undefined;
  rowSelectionOptions?: Omit<RowSelectionOptions<unknown>, "onRowSelectionChange"> | undefined;
  rowPinningOptions?: Omit<RowPinningOptions<unknown>, "onRowPinningChange"> | undefined;
  paginationOptions?: Omit<PaginationOptions, "onPaginationChange"> | undefined;
  facetedOptions?: FacetedOptions<unknown> | undefined;
  onSelect?: ((e: Event, row: TableRow<unknown>) => void) | undefined;
  onHover?: ((e: Event, row: TableRow<unknown> | null) => void) | undefined;
  onContextmenu?: ((e: Event, row: TableRow<unknown>) => void) | ((e: Event, row: TableRow<unknown>) => void)[] | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; caption?: ClassNameValue; thead?: ClassNameValue; tbody?: ClassNameValue; tfoot?: ClassNameValue; tr?: ClassNameValue; th?: ClassNameValue; td?: ClassNameValue; separator?: ClassNameValue; empty?: ClassNameValue; loading?: ClassNameValue; } | undefined;
  state?: Partial<TableState> | undefined;
  onStateChange?: ((updater: Updater<TableState>) => void) | undefined;
  renderFallbackValue?: any;
  /**
   * An array of extra features that you can add to the table instance.
   */
  _features?: TableFeature<any>[] | undefined;
  /**
   * Set this option to override any of the `autoReset...` feature options.
   */
  autoResetAll?: boolean | undefined;
  /**
   * Set this option to `true` to output all debugging information to the console.
   */
  debugAll?: boolean | undefined;
  /**
   * Set this option to `true` to output cell debugging information to the console.
   */
  debugCells?: boolean | undefined;
  /**
   * Set this option to `true` to output column debugging information to the console.
   */
  debugColumns?: boolean | undefined;
  /**
   * Set this option to `true` to output header debugging information to the console.
   */
  debugHeaders?: boolean | undefined;
  /**
   * Set this option to `true` to output row debugging information to the console.
   */
  debugRows?: boolean | undefined;
  /**
   * Set this option to `true` to output table debugging information to the console.
   */
  debugTable?: boolean | undefined;
  /**
   * Default column options to use for all column defs supplied to the table.
   */
  defaultColumn?: Partial<ColumnDef<unknown, unknown>> | undefined;
  /**
   * This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
   */
  getRowId?: ((originalRow: unknown, index: number, parent?: Row<unknown> | undefined) => string) | undefined;
  /**
   * This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row.
   */
  getSubRows?: ((originalRow: unknown, index: number) => unknown[] | undefined) | undefined;
  /**
   * Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state.
   * 
   * Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.
   */
  initialState?: InitialTableState | undefined;
  /**
   * This option is used to optionally implement the merging of table options.
   */
  mergeOptions?: ((defaultOptions: TableOptions<unknown>, options: Partial<TableOptions<unknown>>) => TableOptions<unknown>) | undefined;
  cellpadding?: Numberish | undefined;
  cellspacing?: Numberish | undefined;
  summary?: string | undefined;
  width?: Numberish | undefined;
  /**
   * @default "undefined"
   */
  globalFilter?: string | undefined;
  /**
   * @default "[]"
   */
  columnFilters?: ColumnFiltersState | undefined;
  /**
   * @default "[]"
   */
  columnOrder?: ColumnOrderState | undefined;
  /**
   * @default "{}"
   */
  columnVisibility?: VisibilityState | undefined;
  /**
   * @default "{}"
   */
  columnPinning?: ColumnPinningState | undefined;
  /**
   * @default "{}"
   */
  columnSizing?: ColumnSizingState | undefined;
  /**
   * @default "{}"
   */
  columnSizingInfo?: ColumnSizingInfoState | undefined;
  /**
   * @default "{}"
   */
  rowSelection?: RowSelectionState | undefined;
  /**
   * @default "{}"
   */
  rowPinning?: RowPinningState | undefined;
  /**
   * @default "[]"
   */
  sorting?: SortingState | undefined;
  /**
   * @default "[]"
   */
  grouping?: GroupingState | undefined;
  /**
   * @default "{}"
   */
  expanded?: ExpandedState | undefined;
  /**
   * @default "{}"
   */
  pagination?: PaginationState | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes)
> This component also supports all native `<table>` HTML attributes.

### Slots

```ts
/**
 * Slots for the Table component
 */
interface TableSlots {
  expanded(): any;
  empty(): any;
  loading(): any;
  caption(): any;
  body-top(): any;
  body-bottom(): any;
}
```

### Expose

You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="nofollow"}.

```vue
<script setup lang="ts">
const table = useTemplateRef('table')
</script>

<template>
  <B24Table ref="table" />
</template>
```

This will give you access to the following:

| Name                                                                                                                                       | Type                                                                                                                                                                                                                       |
| ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `tableRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLTableElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}                                                             |
| `tableApi`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | [`Table`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api){rel="nofollow"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    table: {
      slots: {
        root: 'relative overflow-auto',
        base: 'min-w-full font-[family-name:var(--ui-font-family-primary)]',
        caption: 'sr-only',
        thead: 'relative',
        tbody: '[&>tr]:data-[selectable=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&>tr]:data-[selectable=true]:hover:bg-[#f6f8f9] [&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue) [&>tr]:data-[selected=true]:hover:bg-(--ui-color-bg-content-secondary) light:[&>tr]:data-[selected=true]:hover:bg-(#eff7d7) [&>tr]:data-[selected=true]:focus-visible:outline-(--ui-color-accent-soft-element-blue)',
        tfoot: 'relative',
        tr: 'data-[selected=true]:bg-(--ui-color-bg-content-tertiary) light:data-[selected=true]:bg-[#f4fcde]',
        th: 'px-4 py-3.5 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-(--b24ui-typography-label-color) whitespace-nowrap text-left rtl:text-right font-(--ui-font-weight-normal) [&:has([role=checkbox])]:pe-0 align-middle',
        td: 'p-4 text-(length:--ui-font-size-md)/(--ui-font-line-height-md) text-(--b24ui-typography-label-color) whitespace-nowrap font-(--ui-font-weight-normal) [&:has([role=checkbox])]:pe-0 align-middle',
        separator: 'absolute z-[1] left-0 w-full h-px bg-(--ui-color-design-tinted-na-stroke)',
        empty: 'py-6 text-center text-(length:--ui-font-size-sm) text-(--b24ui-typography-description-color)',
        loading: 'py-6 text-center'
      },
      variants: {
        virtualize: {
          true: {
            tr: 'relative before:absolute before:z-1 before:w-full before:border-b before:border-b-(--ui-color-design-tinted-na-stroke)'
          },
          false: {
            base: 'overflow-clip',
            tbody: 'divide-y divide-(--ui-color-design-tinted-na-stroke)'
          }
        },
        pinned: {
          true: {
            th: 'sticky bg-(--ui-color-bg-content-primary) z-[1]',
            td: 'sticky bg-(--ui-color-bg-content-primary) z-[1]'
          }
        },
        sticky: {
          true: {
            thead: 'sticky top-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur',
            tfoot: 'sticky bottom-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
          },
          header: {
            thead: 'sticky top-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
          },
          footer: {
            tfoot: 'sticky bottom-0 inset-x-0 bg-(--ui-color-bg-content-primary) z-[2] backdrop-blur'
          }
        },
        loading: {
          true: {
            thead: 'after:absolute after:z-[1] after:h-px after:bg-(--b24ui-background)'
          }
        },
        loadingAnimation: {
          loading: '',
          carousel: '',
          'carousel-inverse': '',
          swing: '',
          elastic: ''
        },
        loadingColor: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          }
        }
      },
      compoundVariants: [
        {
          loading: true,
          loadingAnimation: 'loading',
          class: {
            thead: 'after:animate-[progressbar-loading_2s_infinite]'
          }
        },
        {
          loading: true,
          loadingAnimation: 'carousel',
          class: {
            thead: 'after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          loading: true,
          loadingAnimation: 'carousel-inverse',
          class: {
            thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          loading: true,
          loadingAnimation: 'swing',
          class: {
            thead: 'after:animate-[swing_2s_ease-in-out_infinite]'
          }
        },
        {
          loading: true,
          loadingAnimation: 'elastic',
          class: {
            thead: 'after:animate-[elastic_2s_ease-in-out_infinite]'
          }
        }
      ],
      defaultVariants: {
        loadingColor: 'air-primary',
        loadingAnimation: 'loading'
      }
    }
  }
})
```

---

# TableWrapper

> Wrapper for displaying a html table

## Usage

TableWrapper is a wrapper for an HTML table that allows flexible control over its appearance.

You are free to style the table as you wish.

```vue [TableWrapperExample.vue]
<template>
  <B24TableWrapper class="overflow-x-auto w-full">
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr>
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>
```

### Size

By using the `size` property, you can adjust the size of the table.

```vue [TableWrapperSizeExample.vue]
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full"
    size="xs"
  >
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr>
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>
```

### Border and background

To display the table border, use the `bordered` property.

The background is set separately using the `class`. For example, for a white background: `class="bg-white"`.

Or you can use the [Card](https://bitrix24.github.io/b24ui/raw/docs/components/card.md) component to set the background.

```vue [TableWrapperBorderBackgroundExample.vue]
<template>
  <B24Card
    variant="outline-copilot"
    class="w-full"
    :b24ui="{ body: 'p-0 sm:px-0 sm:py-0' }"
  >
    <B24TableWrapper
      class="overflow-x-auto w-full"
      rounded
      :b24ui="{
        base: '[&>table>thead>tr]:border-(--ui-color-design-filled-copilot-stroke) [&>table>tbody>tr]:border-(--ui-color-design-tinted-a1-bg) [&>table>tfoot]:border-(--ui-color-design-filled-copilot-stroke)'
      }"
    >
      <table>
        <!-- head -->
        <thead>
          <tr>
            <th>#</th>
            <th>Company</th>
            <th>Deal Stage</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          <!-- row 1 -->
          <tr>
            <th>1</th>
            <td>Tech Innovators Inc.</td>
            <td>Proposal Sent</td>
            <td>50,000</td>
          </tr>
          <!-- row 2 -->
          <tr>
            <th>2</th>
            <td>Global Solutions Ltd.</td>
            <td>Negotiation</td>
            <td>120,000</td>
          </tr>
          <!-- row 3 -->
          <tr>
            <th>3</th>
            <td>Future Enterprises</td>
            <td>Contract Signed</td>
            <td>200,000</td>
          </tr>
          <!-- row 4 -->
          <tr>
            <th>4</th>
            <td>Bright Ideas Co.</td>
            <td>Initial Contact</td>
            <td>15,000</td>
          </tr>
          <!-- row 5 -->
          <tr>
            <th>5</th>
            <td>NextGen Technologies</td>
            <td>Closing</td>
            <td>300,000</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="3" class="text-right">
              Total:
            </th>
            <td>
              685,00
            </td>
          </tr>
        </tfoot>
      </table>
    </B24TableWrapper>
  </B24Card>
</template>
```

### Rounded

To round the corners, use the `rounded` parameter.

```vue [TableWrapperRoundedExample.vue]
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full dark bg-(--ui-color-gray-90)"
    rounded
  >
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr>
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>
```

### Zebra

If you need alternating rows, use the `zebra` property.

To highlight table rows, use the class of the `tr` tag.

To highlight a row when hovering the cursor, use something like `hover:bg-red-500` in the `tr` tag class.

```vue [TableWrapperZebraExample.vue]
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full"
    zebra
  >
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr class="hover:bg-(--ui-color-copilot-accent-primary)/20">
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>
```

### Row hover

For automatic row highlighting on hover, use the `rowHover` property.

```vue [TableWrapperHoverExample.vue]
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full"
    row-hover
  >
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr>
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>
```

### Pinned rows

Rows can be pinned using the `pinRows` property.

Define the pinned-row using `<thead>...</thead>` or `<tfoot>...</tfoot>`.

```vue [TableWrapperPinRowsExample.vue]
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full h-[400px]"
    size="xs"
    pin-rows
  >
    <table>
      <thead>
        <tr>
          <th>A</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>AlphaTech Solutions</td></tr>
        <tr><td>Apex Innovations</td></tr>
        <tr><td>AstroCore Systems</td></tr>
        <tr><td>Atomix Enterprises</td></tr>
        <tr><td>Aurora Dynamics</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>B</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>BlueWave Technologies</td></tr>
        <tr><td>BrightPath Solutions</td></tr>
        <tr><td>BoldFuture Inc.</td></tr>
        <tr><td>BioNova Industries</td></tr>
        <tr><td>BeaconWorks</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>CyberForge Ltd.</td></tr>
        <tr><td>CloudHaven Systems</td></tr>
        <tr><td>CrimsonLogic</td></tr>
        <tr><td>Catalyst Innovations</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>D</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>DeltaCore Technologies</td></tr>
        <tr><td>Dynamo Solutions</td></tr>
        <tr><td>DataSphere Inc.</td></tr>
        <tr><td>DreamForge Industries</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>E</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Eclipse Systems</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>F</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>FusionWorks</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>G</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>GreenPulse Technologies</td></tr>
        <tr><td>GlobeForge Solutions</td></tr>
        <tr><td>GoldenAxis Inc.</td></tr>
        <tr><td>GalacticCore</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>H</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Hyperion Dynamics</td></tr>
        <tr><td>HaloTech Industries</td></tr>
        <tr><td>HorizonWorks</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>I</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>InfinityForge</td></tr>
        <tr><td>Ironclad Solutions</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>M</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>MetaCore Systems</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>R</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Radiant Innovations</td></tr>
        <tr><td>RocketForge Ltd.</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>S</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Skyline Technologies</td></tr>
        <tr><td>SolarFlare Systems</td></tr>
        <tr><td>StellarCore Inc.</td></tr>
        <tr><td>SynapseWorks</td></tr>
        <tr><td>Summit Dynamics</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>T</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>TechNova Solutions</td></tr>
        <tr><td>TitanForge Industries</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>W</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>WaveFront Technologies</td></tr>
        <tr><td>WhiteHaven Systems</td></tr>
        <tr><td>WiseCore Inc.</td></tr>
        <tr><td>WorldForge Solutions</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>X</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Xenon Innovations</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>Z</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>ZenithCore Systems</td></tr>
        <tr><td>ZephyrWorks</td></tr>
      </tbody>
    </table>
  </B24TableWrapper>
</template>
```

### Pinned columns

To pin columns, use the `pinCols` property.

Define the columns using `<th>...</th>`.

```vue [TableWrapperPinColsExample.vue]
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full h-[400px]"
    size="xs"
    pin-cols
    pin-rows
    row-hover
  >
    <table>
      <colgroup>
        <col>
        <col style="min-width: 200px">
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th />
          <td>Deal Name</td>
          <td>Company</td>
          <td>Deal Stage</td>
          <td>Amount</td>
          <td>Assigned To</td>
          <td>Start Date</td>
          <td>Notes</td>
          <th />
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>1</th>
          <td>Tech Upgrade Project</td>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>150,000</td>
          <td>John Doe</td>
          <td>01/15/2023</td>
          <td>Waiting for feedback</td>
          <th>1</th>
        </tr>
        <tr>
          <th>2</th>
          <td>Global Expansion Plan</td>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>500,000</td>
          <td>Jane Smith</td>
          <td>02/10/2023</td>
          <td>Key decision maker</td>
          <th>2</th>
        </tr>
        <tr>
          <th>3</th>
          <td>New Product Launch</td>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>300,000</td>
          <td>Michael Brown</td>
          <td>03/05/2023</td>
          <td>Delivery in progress</td>
          <th>3</th>
        </tr>
        <tr>
          <th>4</th>
          <td>Marketing Campaign</td>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>75,000</td>
          <td>Emily Davis</td>
          <td>04/20/2023</td>
          <td>Budget approved</td>
          <th>4</th>
        </tr>
        <tr>
          <th>5</th>
          <td>IT Infrastructure Deal</td>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>1,000,000</td>
          <td>David Wilson</td>
          <td>05/12/2023</td>
          <td>Finalizing details</td>
          <th>5</th>
        </tr>
        <tr>
          <th>6</th>
          <td>HR Software Implementation</td>
          <td>People First Inc.</td>
          <td>Proposal Sent</td>
          <td>200,000</td>
          <td>Sophi Biles</td>
          <td>06/01/2023</td>
          <td>Awaiting approval</td>
          <th>6</th>
        </tr>
        <tr>
          <th>7</th>
          <td>Logistics Optimization</td>
          <td>Logistics Pro</td>
          <td>Negotiation</td>
          <td>450,000</td>
          <td>Reid Semiras</td>
          <td>07/18/2023</td>
          <td>Discussing terms</td>
          <th>7</th>
        </tr>
        <tr>
          <th>8</th>
          <td>Sales Training Program</td>
          <td>Global Sales Ltd.</td>
          <td>Contract Signed</td>
          <td>120,000</td>
          <td>Alec Lethby</td>
          <td>08/22/2023</td>
          <td>Training scheduled</td>
          <th>8</th>
        </tr>
        <tr>
          <th>9</th>
          <td>Product Redesign</td>
          <td>Innovate Corp.</td>
          <td>Initial Contact</td>
          <td>90,000</td>
          <td>Florida Garces</td>
          <td>09/05/2023</td>
          <td>Initial discussions</td>
          <th>9</th>
        </tr>
        <tr>
          <th>10</th>
          <td>Cloud Migration</td>
          <td>Tech Solutions Inc.</td>
          <td>Closing</td>
          <td>600,000</td>
          <td>Maribeth Popping</td>
          <td>10/10/2023</td>
          <td>Final review</td>
          <th>10</th>
        </tr>
        <tr>
          <th>11</th>
          <td>Customer Support Upgrade</td>
          <td>Zemlak, Daniel and Leannon</td>
          <td>Proposal Sent</td>
          <td>85,000</td>
          <td>Hart Hagerty</td>
          <td>11/15/2023</td>
          <td>Pending approval</td>
          <th>11</th>
        </tr>
        <tr>
          <th>12</th>
          <td>Financial Audit</td>
          <td>Carroll Group</td>
          <td>Negotiation</td>
          <td>250,000</td>
          <td>Brice Swyre</td>
          <td>12/01/2023</td>
          <td>Scope finalized</td>
          <th>12</th>
        </tr>
        <tr>
          <th>13</th>
          <td>Office Renovation</td>
          <td>Rowe-Schoen</td>
          <td>Contract Signed</td>
          <td>180,000</td>
          <td>Marjy Ferencz</td>
          <td>01/10/2024</td>
          <td>Work in progress</td>
          <th>13</th>
        </tr>
        <tr>
          <th>14</th>
          <td>Cybersecurity Upgrade</td>
          <td>Wyman-Ledner</td>
          <td>Initial Contact</td>
          <td>300,000</td>
          <td>Yancy Tear</td>
          <td>02/05/2024</td>
          <td>Initial assessment</td>
          <th>14</th>
        </tr>
        <tr>
          <th>15</th>
          <td>Employee Wellness Program</td>
          <td>Schuster-Schimmel</td>
          <td>Closing</td>
          <td>95,000</td>
          <td>Meghann Durtnal</td>
          <td>03/12/2024</td>
          <td>Finalizing details</td>
          <th>15</th>
        </tr>
        <tr>
          <th>16</th>
          <td>Data Analytics Project</td>
          <td>Wiza, Bins and Emard</td>
          <td>Proposal Sent</td>
          <td>220,000</td>
          <td>Irma Vasilik</td>
          <td>04/18/2024</td>
          <td>Awaiting feedback</td>
          <th>16</th>
        </tr>
        <tr>
          <th>17</th>
          <td>E-commerce Platform</td>
          <td>O'Hara, Welch and Keebler</td>
          <td>Negotiation</td>
          <td>700,000</td>
          <td>Sammy Seston</td>
          <td>05/22/2024</td>
          <td>Key terms discussed</td>
          <th>17</th>
        </tr>
        <tr>
          <th>18</th>
          <td>AI Integration</td>
          <td>Turner-Kuhlman</td>
          <td>Contract Signed</td>
          <td>1,200,000</td>
          <td>Lesya Tinham</td>
          <td>06/30/2024</td>
          <td>Implementation started</td>
          <th>18</th>
        </tr>
        <tr>
          <th>19</th>
          <td>Supply Chain Optimization</td>
          <td>Kshlerin, Rogahn and Swaniawski</td>
          <td>Initial Contact</td>
          <td>400,000</td>
          <td>Aland Wilber</td>
          <td>07/15/2024</td>
          <td>Initial discussions</td>
          <th>19</th>
        </tr>
        <tr>
          <th>20</th>
          <td>Product Launch Event</td>
          <td>Sauer LLC</td>
          <td>Closing</td>
          <td>150,000</td>
          <td>Zaneta Tewkesbury</td>
          <td>08/20/2024</td>
          <td>Final preparations</td>
          <th>20</th>
        </tr>
        <tr>
          <th>21</th>
          <td>Mobile App Development</td>
          <td>Hilpert Group</td>
          <td>Proposal Sent</td>
          <td>350,000</td>
          <td>Andy Tipple</td>
          <td>09/25/2024</td>
          <td>Awaiting approval</td>
          <th>21</th>
        </tr>
        <tr>
          <th>22</th>
          <td>Customer Loyalty Program</td>
          <td>Gutmann Inc</td>
          <td>Negotiation</td>
          <td>120,000</td>
          <td>Sophi Biles</td>
          <td>10/10/2024</td>
          <td>Terms under review</td>
          <th>22</th>
        </tr>
        <tr>
          <th>23</th>
          <td>ERP System Implementation</td>
          <td>Gaylord, Pacocha and Baumbach</td>
          <td>Contract Signed</td>
          <td>900,000</td>
          <td>Florida Garces</td>
          <td>11/15/2024</td>
          <td>Project kickoff</td>
          <th>23</th>
        </tr>
        <tr>
          <th>24</th>
          <td>Digital Marketing Campaign</td>
          <td>Deckow-Pouros</td>
          <td>Initial Contact</td>
          <td>200,000</td>
          <td>Maribeth Popping</td>
          <td>12/20/2024</td>
          <td>Initial discussions</td>
          <th>24</th>
        </tr>
        <tr>
          <th>25</th>
          <td>Warehouse Automation</td>
          <td>Schiller, Cole and Hackett</td>
          <td>Closing</td>
          <td>1,500,000</td>
          <td>Moritz Dryburgh</td>
          <td>01/05/2025</td>
          <td>Finalizing details</td>
          <th>25</th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th />
          <td>Deal Name</td>
          <td>Company</td>
          <td>Deal Stage</td>
          <td>Amount</td>
          <td>Assigned To</td>
          <td>Start Date</td>
          <td>Notes</td>
          <th />
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>
```

## API

### Props

```ts
/**
 * Props for the TableWrapper component
 */
interface TableWrapperProps {
  /**
   * The element or component this component should render as.
   * @default "\"div\""
   */
  as?: any;
  size?: "md" | "xs" | "sm" | "lg" | undefined;
  rounded?: boolean | undefined;
  zebra?: boolean | undefined;
  pinRows?: boolean | undefined;
  pinCols?: boolean | undefined;
  rowHover?: boolean | undefined;
  bordered?: boolean | undefined;
  /**
   * @default "true"
   */
  scrollbarThin?: boolean | undefined;
  b24ui?: { base?: ClassNameValue; } | undefined;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    tableWrapper: {
      slots: {
        base: 'font-[family-name:var(--ui-font-family-primary)] [&>table]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table]:relative [&>table]:w-full [&>table]:text-left [&>table]:rtl:text-right [&>table]:text-(--b24ui-typography-label-color) [&>table>thead>tr>td]:align-middle [&>table>thead>tr>th]:align-middle [&>table>tbody>tr>td]:align-middle [&>table>tbody>tr>th]:align-middle [&>table>tfoot>tr>td]:align-middle [&>table>tfoot>tr>th]:align-middle [&>table>thead>tr>td]:whitespace-nowrap [&>table>thead>tr>td]:text-(length:--ui-font-size-md) [&>table>thead>tr>td]:font-(--ui-font-weight-normal) [&>table>thead>tr>th]:whitespace-nowrap [&>table>thead>tr>th]:text-(length:--ui-font-size-md) [&>table>thead>tr>th]:font-(--ui-font-weight-normal) [&>table>tbody>tr>th]:whitespace-nowrap [&>table>tbody>tr>th]:text-(length:--ui-font-size-md) [&>table>tbody>tr>th]:font-(--ui-font-weight-normal) [&>table>tfoot>tr>td]:whitespace-nowrap [&>table>tfoot>tr>td]:text-(length:--ui-font-size-md) [&>table>tfoot>tr>td]:font-(--ui-font-weight-normal) [&>table>tfoot>tr>th]:whitespace-nowrap [&>table>tfoot>tr>th]:text-(length:--ui-font-size-md) [&>table>tfoot>tr>th]:font-(--ui-font-weight-normal) [&>table>thead>tr]:border-(--ui-color-design-tinted-na-stroke) [&>table>tbody>tr]:border-(--ui-color-design-tinted-na-stroke) [&>table>tfoot]:border-(--ui-color-design-tinted-na-stroke) [&>table>thead>tr]:border-b [&>table>tbody>tr:not(:last-child)]:border-b [&>table>tfoot]:border-t'
      },
      variants: {
        size: {
          xs: '[&>table>thead>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>thead>tr>td]:px-2 [&>table>thead>tr>td]:py-1 [&>table>thead>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>thead>tr>th]:px-2 [&>table>thead>tr>th]:py-1 [&>table>tbody>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tbody>tr>td]:px-2 [&>table>tbody>tr>td]:py-1 [&>table>tbody>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tbody>tr>th]:px-2 [&>table>tbody>tr>th]:py-1 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tfoot>tr>td]:px-2 [&>table>tfoot>tr>td]:py-1 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tfoot>tr>th]:px-2 [&>table>tfoot>tr>th]:py-1',
          sm: '[&>table>thead>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>thead>tr>td]:px-3 [&>table>thead>tr>td]:py-2 [&>table>thead>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>thead>tr>th]:px-3 [&>table>thead>tr>th]:py-2 [&>table>tbody>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tbody>tr>td]:px-3 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tbody>tr>th]:px-3 [&>table>tbody>tr>th]:py-2 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tfoot>tr>td]:px-3 [&>table>tfoot>tr>td]:py-2 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tfoot>tr>th]:px-3 [&>table>tfoot>tr>th]:py-2',
          md: '[&>table>thead>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>thead>tr>td]:px-4 [&>table>thead>tr>td]:py-3.5 [&>table>thead>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-3.5 [&>table>tbody>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-3.5 [&>table>tbody>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tbody>tr>th]:px-4 [&>table>tbody>tr>th]:py-3.5 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tfoot>tr>td]:px-4 [&>table>tfoot>tr>td]:py-3.5 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tfoot>tr>th]:px-4 [&>table>tfoot>tr>th]:py-3.5',
          lg: '[&>table>thead>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>thead>tr>td]:px-5 [&>table>thead>tr>td]:py-4 [&>table>thead>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>thead>tr>th]:px-5 [&>table>thead>tr>th]:py-4 [&>table>tbody>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tbody>tr>td]:px-5 [&>table>tbody>tr>td]:py-4 [&>table>tbody>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tbody>tr>th]:px-5 [&>table>tbody>tr>th]:py-4 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tfoot>tr>td]:px-5 [&>table>tfoot>tr>td]:py-4 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tfoot>tr>th]:px-5 [&>table>tfoot>tr>th]:py-4'
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-md)',
          false: ''
        },
        zebra: {
          true: '[&>table>tbody>tr]:even:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:even:[&>td]:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:even:[&>th]:bg-(--ui-color-bg-content-secondary) light:[&>table>tbody>tr]:even:bg-[#f6f8f9] light:[&>table>tbody>tr]:even:[&>td]:bg-[#f6f8f9] light:[&>table>tbody>tr]:even:[&>th]:bg-[#f6f8f9]'
        },
        pinRows: {
          true: '[&>table>thead>tr]:sticky [&>table>thead>tr]:top-0      [&>table>thead>tr]:z-1 [&>table>thead>tr]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur [&>table>thead>tr]:shadow-bottom-sm [&>table>tfoot>tr]:sticky [&>table>tfoot>tr]:bottom-0   [&>table>tfoot>tr]:z-1 [&>table>tfoot>tr]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur [&>table>tfoot>tr]:shadow-top-sm'
        },
        pinCols: {
          true: '[&>table>thead>tr>th]:sticky [&>table>thead>tr>th]:right-0 [&>table>thead>tr>th]:left-0 [&>table>thead>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur [&>table>tbody>tr>th]:sticky [&>table>tbody>tr>th]:right-0 [&>table>tbody>tr>th]:left-0 [&>table>tbody>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tbody>tr>th]:backdrop-blur [&>table>tfoot>tr>th]:sticky [&>table>tfoot>tr>th]:right-0 [&>table>tfoot>tr>th]:left-0 [&>table>tfoot>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur'
        },
        rowHover: {
          true: '[&>table>tbody>tr]:hover:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:hover:[&>td]:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:hover:[&>th]:bg-(--ui-color-bg-content-secondary) light:[&>table>tbody>tr]:hover:bg-[#f6f8f9] light:[&>table>tbody>tr]:hover:[&>td]:bg-[#f6f8f9] light:[&>table>tbody>tr]:hover:[&>th]:bg-[#f6f8f9]'
        },
        bordered: {
          true: 'border border-(--ui-color-design-tinted-na-stroke)'
        },
        scrollbarThin: {
          true: 'scrollbar-thin'
        }
      },
      defaultVariants: {
        size: 'md',
        scrollbarThin: true
      }
    }
  }
})
```

---

# Tabs

> A collection of tab panels shown individually.

## Usage

Use the Tabs component to display a list of items in a tabs.

```vue [TabsExample.vue]
<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Shield2ContourIcon from '@bitrix24/b24icons-vue/main/Shield2ContourIcon'

const items = [
  {
    label: 'Account',
    icon: UserIcon,
    slot: 'account'
  },
  {
    label: 'Password',
    icon: Shield2ContourIcon,
    slot: 'password'
  }
] satisfies TabsItem[]

const state = reactive({
  name: 'System User',
  username: 'system-user',
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})
</script>

<template>
  <B24Tabs :items="items">
    <template #account>
      <B24Form :state="state" class="flex flex-col gap-4">
        <B24FormField label="Name" name="name">
          <B24Input v-model="state.name" class="w-full" />
        </B24FormField>
        <B24FormField label="Username" name="username">
          <B24Input v-model="state.username" class="w-full" />
        </B24FormField>
      </B24Form>
    </template>

    <template #password>
      <B24Form :state="state" class="flex flex-col gap-4">
        <B24FormField label="Current Password" name="current" required>
          <B24Input v-model="state.currentPassword" type="password" required class="w-full" />
        </B24FormField>
        <B24FormField label="New Password" name="new" required>
          <B24Input v-model="state.newPassword" type="password" required class="w-full" />
        </B24FormField>
        <B24FormField label="Confirm Password" name="confirm" required>
          <B24Input v-model="state.confirmPassword" type="password" required class="w-full" />
        </B24FormField>
      </B24Form>
    </template>
  </B24Tabs>
</template>
```

### Items

Use the `items` prop as an array of objects with the following properties:

- `label?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#usage)
- `avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `badge?: string | number | BadgeProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `content?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `value?: string | number`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `disabled?: boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    content: 'This is the password content.'
  }
])
</script>

<template>
  <B24Tabs :items="items" class="w-full" />
</template>

```

### Content

Set the `content` prop to `false` to turn the Tabs into a toggle-only control without displaying any content. Defaults to `true`.

```vue

<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    content: 'This is the password content.'
  }
])
</script>

<template>
  <B24Tabs :content="false" :items="items" class="w-full" />
</template>

```

### Unmount

Use the `unmount-on-hide` prop to prevent the content from being unmounted when the Tabs is collapsed. Defaults to `true`.

```vue

<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TabsItem[]>([
  {
    label: 'Account',
    content: 'This is the account content.'
  },
  {
    label: 'Password',
    content: 'This is the password content.'
  }
])
</script>

<template>
  <B24Tabs :unmount-on-hide="false" :items="items" class="w-full" />
</template>

```

> !NOTE
> You can inspect the DOM to see each item's content being rendered.

### Size

Use the `size` prop to change the size of the Tabs.

```vue

<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

<template>
  <B24Tabs size="md" :content="false" :items="items" class="w-full" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the Tabs. Defaults to `horizontal`.

```vue

<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TabsItem[]>([
  {
    label: 'Account'
  },
  {
    label: 'Password'
  }
])
</script>

<template>
  <B24Tabs orientation="vertical" :content="false" :items="items" class="w-full" />
</template>

```

## Examples

### Control active item

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index **as a string**.

```vue [TabsModelValueExample.vue]
<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'

const route = useRoute()
const router = useRouter()

const items: TabsItem[] = [
  {
    label: 'Account',
    value: 'account'
  },
  {
    label: 'Password',
    value: 'password'
  }
]

const active = computed({
  get() {
    return (route.query.tab as string) || 'account'
  },
  set(tab) {
    // Hash is specified here to prevent the page from scrolling to the top
    router.push({
      path: '/docs/components/tabs/',
      query: { tab },
      hash: '#control-active-item'
    })
  }
})
</script>

<template>
  <B24Tabs v-model="active" :content="false" :items="items" class="w-full" />
</template>
```

### With content slot

Use the `#content` slot to customize the content of each item.

```vue [TabsContentSlotExample.vue]
<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Shield2ContourIcon from '@bitrix24/b24icons-vue/main/Shield2ContourIcon'

const items: TabsItem[] = [
  {
    label: 'Account',
    icon: UserIcon
  },
  {
    label: 'Password',
    icon: Shield2ContourIcon
  }
]
</script>

<template>
  <B24Tabs :items="items" class="w-full">
    <template #content="{ item }">
      <p>This is the {{ item.label }} tab.</p>
    </template>
  </B24Tabs>
</template>
```

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [TabsCustomSlotExample.vue]
<script setup lang="ts">
import type { TabsItem } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Shield2ContourIcon from '@bitrix24/b24icons-vue/main/Shield2ContourIcon'

const items = [
  {
    label: 'Account',
    description: 'Make changes to your account here. Click save when you\'re done.',
    icon: UserIcon,
    slot: 'account' as const
  },
  {
    label: 'Password',
    description: 'Change your password here. After saving, you\'ll be logged out.',
    icon: Shield2ContourIcon,
    slot: 'password' as const
  }
] satisfies TabsItem[]

const state = reactive({
  name: 'System User',
  username: 'system-user',
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})
</script>

<template>
  <B24Tabs :items="items" variant="link" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
    <template #account="{ item }">
      <ProseP accent="less" class="mb-4">
        {{ item.description }}
      </ProseP>

      <B24Form :state="state" class="flex flex-col gap-4">
        <B24FormField label="Name" name="name">
          <B24Input v-model="state.name" class="w-full" />
        </B24FormField>
        <B24FormField label="Username" name="username">
          <B24Input v-model="state.username" class="w-full" />
        </B24FormField>

        <B24Button label="Save changes" type="submit" color="air-primary-success" class="self-end" />
      </B24Form>
    </template>

    <template #password="{ item }">
      <ProseP accent="less" class="mb-4">
        {{ item.description }}
      </ProseP>

      <B24Form :state="state" class="flex flex-col gap-4">
        <B24FormField label="Current Password" name="current" required>
          <B24Input v-model="state.currentPassword" type="password" required class="w-full" />
        </B24FormField>
        <B24FormField label="New Password" name="new" required>
          <B24Input v-model="state.newPassword" type="password" required class="w-full" />
        </B24FormField>
        <B24FormField label="Confirm Password" name="confirm" required>
          <B24Input v-model="state.confirmPassword" type="password" required class="w-full" />
        </B24FormField>

        <B24Button label="Change password" type="submit" color="air-primary-success" class="self-end" />
      </B24Form>
    </template>
  </B24Tabs>
</template>
```

## API

### Props

```ts
/**
 * Props for the Tabs component
 */
interface TabsProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  items?: TabsItem[] | undefined;
  variant?: "link" | undefined;
  size?: "sm" | "xs" | "md" | "xss" | "lg" | "xl" | undefined;
  /**
   * The orientation of the tabs.
   * @default "\"horizontal\""
   */
  orientation?: DataOrientation | undefined;
  /**
   * The content of the tabs, can be disabled to prevent rendering the content.
   * @default "true"
   */
  content?: boolean | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<TabsItem> | undefined;
  b24ui?: { root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; label?: ClassNameValue; trailingBadge?: ClassNameValue; trailingBadgeSize?: ClassNameValue; content?: ClassNameValue; } | undefined;
  /**
   * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
   * @default "\"0\""
   */
  defaultValue?: string | number | undefined;
  /**
   * The controlled value of the tab to activate. Can be bind as `v-model`.
   */
  modelValue?: string | number | undefined;
  /**
   * Whether a tab is activated automatically (on focus) or manually (on click).
   */
  activationMode?: "automatic" | "manual" | undefined;
  /**
   * When `true`, the element will be unmounted on closed state.
   * @default "true"
   */
  unmountOnHide?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Tabs component
 */
interface TabsSlots {
  leading(): any;
  default(): any;
  trailing(): any;
  content(): any;
  list-leading(): any;
  list-trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Tabs component
 */
interface TabsEmits {
  update:modelValue: (payload: [payload: string | number]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                          | Type                                                                                                                                                             |
| --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `triggersRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    tabs: {
      slots: {
        root: 'style-outline-accent-2 flex items-center gap-2',
        list: 'relative flex p-1 group',
        indicator: 'absolute transition-[translate,width] duration-200',
        trigger: 'group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-color-design-plain-na-content) hover:data-[state=inactive]:not-disabled:text-(--ui-color-design-selection-content) font-(--ui-font-weight-medium) cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 transition-colors rounded-(--ui-border-radius-md)',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        label: '',
        trailingBadge: 'shrink-0',
        trailingBadgeSize: 'sm',
        content: 'focus:outline-none w-full'
      },
      variants: {
        variant: {
          link: {
            list: 'border-(--ui-color-divider-vibrant-accent-more)',
            indicator: 'rounded-(--ui-border-radius-pill)',
            trigger: 'focus:outline-none'
          }
        },
        orientation: {
          horizontal: {
            root: 'flex-col',
            list: 'w-full',
            indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)',
            trigger: 'justify-center'
          },
          vertical: {
            list: 'flex-col',
            indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)'
          }
        },
        size: {
          xss: {
            trigger: 'px-2 py-1 text-(length:--ui-font-size-4xs)/[normal] gap-1',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs'
          },
          xs: {
            trigger: 'px-2 py-1 text-(length:--ui-font-size-xs)/[normal] gap-1',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs'
          },
          sm: {
            trigger: 'px-2.5 py-1.5 text-(length:--ui-font-size-sm)/[normal] gap-1.5',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs'
          },
          md: {
            trigger: 'px-3 py-1.5 text-(length:--ui-font-size-md)/[normal] gap-1.5',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs'
          },
          lg: {
            trigger: 'px-3 py-2 text-(length:--ui-font-size-lg)/[normal] gap-2',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs'
          },
          xl: {
            trigger: 'px-3 py-2 text-(length:--ui-font-size-xl)/[normal] gap-2',
            leadingIcon: 'size-6',
            leadingAvatarSize: 'xs'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          variant: 'link',
          class: {
            list: 'border-b -mb-px',
            indicator: '-bottom-px h-px'
          }
        },
        {
          orientation: 'vertical',
          variant: 'link',
          class: {
            list: 'border-s -ms-px',
            indicator: '-start-px w-px'
          }
        },
        {
          variant: 'link',
          class: {
            indicator: 'bg-(--ui-color-design-selection-content)',
            trigger: [
              'focus-visible:ring-1 focus-visible:ring-inset',
              'data-[state=active]:text-(--b24ui-color)',
              'focus-visible:ring-(--ui-color-design-selection-content)'
            ]
          }
        }
      ],
      defaultVariants: {
        variant: 'link',
        size: 'md'
      }
    }
  }
})
```

---

# Textarea

> A textarea for entering multi-line text.

## Usage

Use the `v-model` directive to control the value of the Textarea.

```vue

<script setup lang="ts">
const value = ref('')
</script>

<template>
  <B24Textarea v-model="value" />
</template>

```

### Rows

Use the `rows` prop to set the number of rows. Defaults to `3`.

```vue

<template>
  <B24Textarea :rows="12" />
</template>

```

### Placeholder

Use the `placeholder` prop to set a placeholder text.

```vue

<template>
  <B24Textarea placeholder="Type something..." />
</template>

```

### Autoresize

Use the `autoresize` prop to enable autoresizing the height of the Textarea.

```vue

<script setup lang="ts">
const value = ref('This is a long text that will autoresize the height of the Textarea.')
</script>

<template>
  <B24Textarea v-model="value" autoresize />
</template>

```

Use the `maxrows` prop to set the maximum number of rows when autoresizing. If set to `0`, the Textarea will grow indefinitely.

```vue

<script setup lang="ts">
const value = ref('This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.')
</script>

<template>
  <B24Textarea v-model="value" :maxrows="4" autoresize />
</template>

```

### Color

Use the `color` prop to change the ring color when the Textarea is focused.

```vue

<template>
  <B24Textarea color="air-primary-copilot" highlight placeholder="Type something..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Tag

Use the `tag` property to display a [Badge](https://bitrix24.github.io/b24ui/raw/docs/components/badge.md) on top of the Textarea.

```vue

<template>
  <B24Textarea tag="note" color="air-primary-warning" highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

Use the `tagColor` property to set the color for Badge.

```vue

<template>
  <B24Textarea tag-color="air-secondary-alert" tag="note" color="air-primary-warning" highlight placeholder="Search..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

### Icon

Use the `icon` prop to show an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} inside the Textarea.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Textarea :icon="RocketIcon" placeholder="Search..." :rows="1" />
</template>

```

### Trailing Icon

Use the `trailing-icon` prop to set icon for trailing position.

```vue

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Textarea :trailing-icon="RocketIcon" placeholder="Enter your email" :rows="1" />
</template>

```

### Avatar

Use the `avatar` prop to show an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) inside the Textarea.

```vue

<template>
  <B24Textarea :avatar="{src:'/b24ui/avatar/employee.png'}" placeholder="Search..." :rows="1" />
</template>

```

### Loading

Use the `loading` prop to show a loading icon on the Textarea.

```vue

<template>
  <B24Textarea loading placeholder="Search..." :rows="1" />
</template>

```

### Disabled

Use the `disabled` prop to disable the Textarea.

```vue

<template>
  <B24Textarea disabled placeholder="Type something..." />
</template>

```

### No padding

Use the `noPadding` prop to removes padding from the Input.

```vue

<template>
  <B24Textarea no-padding highlight placeholder="Type something..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### No border

Use the `noBorder` prop to removes all borders (rings) from the Input.

```vue

<template>
  <B24Textarea no-border highlight placeholder="Type something..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to indicate that there is no focus state.

### Underline

Use the `underline` prop to removes all borders (rings) except the bottom one from the Input.

```vue

<template>
  <B24Textarea underline highlight placeholder="Type something..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

### Rounded

Use the `rounded` prop to round the Input.

```vue

<template>
  <B24Textarea rounded highlight placeholder="Type something..." />
</template>

```

> !NOTE
> The `highlight` prop is used here to show the focus state.

## API

### Props

```ts
/**
 * Props for the Textarea component
 */
interface TextareaProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  id?: string | undefined;
  name?: string | undefined;
  /**
   * The placeholder text when the textarea is empty.
   */
  placeholder?: string | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  /**
   * Removes padding from input
   */
  noPadding?: boolean | undefined;
  /**
   * Removes all borders (rings)
   */
  noBorder?: boolean | undefined;
  /**
   * Removes all borders (rings) except the bottom one
   */
  underline?: boolean | undefined;
  /**
   * Rounds the corners of the textarea
   */
  rounded?: boolean | undefined;
  required?: boolean | undefined;
  autofocus?: boolean | undefined;
  /**
   * @default "0"
   */
  autofocusDelay?: number | undefined;
  autoresize?: boolean | undefined;
  /**
   * @default "0"
   */
  autoresizeDelay?: number | undefined;
  disabled?: boolean | undefined;
  /**
   * @default "3"
   */
  rows?: number | undefined;
  maxrows?: number | undefined;
  tag?: string | undefined;
  tagColor?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection";
  /**
   * Highlight the ring color like a focus state.
   */
  highlight?: boolean | undefined;
  modelValue?: TextareaValue | undefined;
  defaultValue?: TextareaValue | undefined;
  modelModifiers?: ModelModifiers<TextareaValue> | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; } | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  /**
   * Display an avatar on the left side.
   */
  avatar?: AvatarProps | undefined;
  /**
   * When `true`, the loading icon will be displayed.
   */
  loading?: boolean | undefined;
  /**
   * When `true`, the icon will be displayed on the right side.
   */
  trailing?: boolean | undefined;
  /**
   * Display an icon on the right side.
   */
  trailingIcon?: IconComponent | undefined;
  autocomplete?: string | undefined;
  cols?: Numberish | undefined;
  dirname?: string | undefined;
  form?: string | undefined;
  maxlength?: Numberish | undefined;
  minlength?: Numberish | undefined;
  readonly?: Booleanish | undefined;
  wrap?: string | undefined;
}
```

> [!NOTE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)
> This component also supports all native `<textarea>` HTML attributes.

### Slots

```ts
/**
 * Slots for the Textarea component
 */
interface TextareaSlots {
  leading(): any;
  default(): any;
  trailing(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Textarea component
 */
interface TextareaEmits {
  update:modelValue: (payload: [value: TextareaValue]) => void;
  blur: (payload: [event: FocusEvent]) => void;
  change: (payload: [event: Event]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                          | Type                                                                                                                                                              |
| --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `textareaRef`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<HTMLTextAreaElement | null>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    textarea: {
      slots: {
        root: 'isolate relative inline-flex items-center',
        base: 'px-3 w-full pt-[7px] pb-[8px] border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) text-(length:--ui-font-size-lg)/(--ui-font-line-height-2xs) align-middle',
        leading: 'absolute inset-y-[7px] start-0 flex items-start px-[8px]',
        leadingIcon: 'shrink-0 size-[18px] text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0 size-[20px]',
        leadingAvatarSize: '2xs',
        trailing: 'absolute inset-y-[8px] end-0 flex items-start px-[6px]',
        trailingIcon: 'shrink-0 size-[18px] text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[6px] right-[12px]'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        autoresize: {
          true: {
            base: 'resize-none'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke) rounded-none'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        }
      },
      compoundVariants: [
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          leading: true,
          noPadding: false,
          class: 'ps-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          class: 'pe-[34px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary'
      }
    }
  }
})
```

---

# Timeline

> A component for displaying a chronological sequence of events, with dates, titles, and supporting icons or avatars.

## Usage

Use the Timeline component to display a list of items in a timeline.

```vue

<script setup lang="ts">
const items = ref([
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
  },
  {
    date: 'Mar 22 2025',
    title: 'Design Phase',
    description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
  },
  {
    date: 'Mar 29 2025',
    title: 'Development Sprint',
    description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
  },
  {
    date: 'Apr 5 2025',
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization. Deployed the application to production.'
  }
])
</script>

<template>
  <B24Timeline :items="items" />
</template>

```

### Items

Use the `items` prop as an array of objects with the following properties:

- `date?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `title?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `description?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`icon?: IconComponent`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-alternating-layout)
- `avatar?: AvatarProps`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `value?: string | number`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- [`slot?: string`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}](https://bitrix24.github.io/b24ui/#with-custom-slot)
- `class?: any`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `b24ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue

<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TimelineItem[]>([
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
  },
  {
    date: 'Mar 22 2025',
    title: 'Design Phase',
    description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
  },
  {
    date: 'Mar 29 2025',
    title: 'Development Sprint',
    description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
  },
  {
    date: 'Apr 5 2025',
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization. Deployed the application to production.'
  }
])
</script>

<template>
  <B24Timeline :default-value="2" :items="items" class="w-[384px]" />
</template>

```

### Color

Use the `color` prop to change the color of the active items in a Timeline.

```vue

<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TimelineItem[]>([
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
  },
  {
    date: 'Mar 22 2025',
    title: 'Design Phase',
    description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
  },
  {
    date: 'Mar 29 2025',
    title: 'Development Sprint',
    description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
  },
  {
    date: 'Apr 5 2025',
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization. Deployed the application to production.'
  }
])
</script>

<template>
  <B24Timeline color="air-primary" :default-value="2" :items="items" class="w-[384px]" />
</template>

```

### Size

Use the `size` prop to change the size of the Timeline.

```vue

<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TimelineItem[]>([
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.'
  },
  {
    date: 'Mar 22 2025',
    title: 'Design Phase',
    description: 'User research and design workshops. Created wireframes and prototypes for user testing.'
  },
  {
    date: 'Mar 29 2025',
    title: 'Development Sprint',
    description: 'Frontend and backend development. Implemented core features and integrated with APIs.'
  },
  {
    date: 'Apr 5 2025',
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization. Deployed the application to production.'
  }
])
</script>

<template>
  <B24Timeline size="xs" :default-value="2" :items="items" class="w-[384px]" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation of the Timeline. Defaults to `vertical`.

```vue

<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TimelineItem[]>([
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description: 'Kicked off the project with team alignment.'
  },
  {
    date: 'Mar 22 2025',
    title: 'Design Phase',
    description: 'User research and design workshops.'
  },
  {
    date: 'Mar 29 2025',
    title: 'Development Sprint',
    description: 'Frontend and backend development.'
  },
  {
    date: 'Apr 5 2025',
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization.'
  }
])
</script>

<template>
  <B24Timeline orientation="horizontal" :default-value="2" :items="items" class="w-full" />
</template>

```

### Reverse

Use the reverse prop to reverse the direction of the Timeline.

```vue

<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'

const items = ref<TimelineItem[]>([
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description: 'Kicked off the project with team alignment.'
  },
  {
    date: 'Mar 22 2025',
    title: 'Design Phase',
    description: 'User research and design workshops.'
  },
  {
    date: 'Mar 29 2025',
    title: 'Development Sprint',
    description: 'Frontend and backend development.'
  },
  {
    date: 'Apr 5 2025',
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization.'
  }
])
</script>

<template>
  <B24Timeline reverse v-model="value" orientation="vertical" :items="items" class="w-full" />
</template>

```

## Examples

### Control active item

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index.

```vue [TimelineModelValueExample.vue]
<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
import InfoIcon from '@bitrix24/b24icons-vue/button/InfoIcon'

const items: TimelineItem[] = [{
  date: 'Mar 15, 2025',
  title: 'Project Kickoff',
  description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
  icon: RocketIcon,
  value: 'kickoff'
}, {
  date: 'Mar 22, 2025',
  title: 'Design Phase',
  description: 'User research and design workshops. Created wireframes and prototypes for user testing.',
  icon: SignIcon,
  value: 'design'
}, {
  date: 'Mar 29, 2025',
  title: 'Development Sprint',
  description: 'Frontend and backend development. Implemented core features and integrated with APIs.',
  icon: MoreMIcon,
  value: 'development'
}, {
  date: 'Apr 5, 2025',
  title: 'Testing & Deployment',
  description: 'QA testing and performance optimization. Deployed the application to production.',
  icon: InfoIcon,
  value: 'deployment'
}]

const active = ref(0)

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = (active.value + 1) % items.length
  }, 2000)
})
</script>

<template>
  <B24Timeline v-model="active" :items="items" class="w-[384px]" />
</template>
```

### With alternating layout

Use the `b24ui` prop to create a Timeline with alternating layout.

```vue [TimelineAlternatingLayoutExample.vue]
<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
import InfoIcon from '@bitrix24/b24icons-vue/button/InfoIcon'

const items: TimelineItem[] = [{
  date: 'Mar 15, 2025',
  title: 'Project Kickoff',
  icon: RocketIcon,
  value: 'kickoff'
}, {
  date: 'Mar 22, 2025',
  title: 'Design Phase',
  icon: SignIcon,
  value: 'design'
}, {
  date: 'Mar 29, 2025',
  title: 'Development Sprint',
  icon: MoreMIcon,
  value: 'development'
}, {
  date: 'Apr 5, 2025',
  title: 'Testing & Deployment',
  icon: InfoIcon,
  value: 'deployment'
}]
</script>

<template>
  <B24Timeline
    :items="items"
    :default-value="2"
    :b24ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
    class="translate-x-[calc(50%-1rem)]"
  />
</template>
```

### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}-indicator`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-date`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-title`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}
- `#{{ item.slot }}-description`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

```vue [TimelineCustomSlotExample.vue]
<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
import InfoIcon from '@bitrix24/b24icons-vue/button/InfoIcon'

const items = [{
  date: 'Mar 15, 2025',
  title: 'Project Kickoff',
  subtitle: 'Project Initiation',
  description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
  icon: RocketIcon,
  value: 'kickoff'
}, {
  date: 'Mar 22, 2025',
  title: 'Design Phase',
  description: 'User research and design workshops. Created wireframes and prototypes for user testing.',
  icon: SignIcon,
  value: 'design'
}, {
  date: 'Mar 29, 2025',
  title: 'Development Sprint',
  description: 'Frontend and backend development. Implemented core features and integrated with APIs.',
  icon: MoreMIcon,
  value: 'development',
  slot: 'development' as const,
  developers: [
    {
      src: 'https://github.com/bitrix-tools.png'
    }, {
      src: 'https://github.com/bitrix24.png'
    }
  ]
}, {
  date: 'Apr 5, 2025',
  title: 'Testing & Deployment',
  description: 'QA testing and performance optimization. Deployed the application to production.',
  icon: InfoIcon,
  value: 'deployment'
}] satisfies TimelineItem[]
</script>

<template>
  <B24Timeline :items="items" :default-value="2" class="w-[384px]">
    <template #development-title="{ item }">
      <div class="flex items-center gap-1">
        <span>{{ item.title }}</span>

        <B24AvatarGroup size="2xs">
          <B24Avatar v-for="(developer, index) of item.developers" :key="index" v-bind="developer" />
        </B24AvatarGroup>
      </div>
    </template>
  </B24Timeline>
</template>
```

### With slots

Use the available slots to create a more complex Timeline.

```vue [TimelineSlotsExample.vue]
<script lang="ts" setup>
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'
import { useTimeAgo } from '@vueuse/core'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'

const items = [{
  username: 'Employee Name',
  date: '2025-05-24T14:58:55Z',
  action: 'opened this',
  avatar: {
    src: '/b24ui/avatar/employee.png'
  }
}, {
  username: 'Employee Name',
  date: '2025-05-26T19:30:14+02:00',
  action: 'marked this pull request as ready for review',
  icon: RocketIcon
}, {
  username: 'Assistant Name',
  date: '2025-05-27T11:01:20Z',
  action: 'commented on this',
  description: 'I\'ve made a few changes, let me know what you think! Basically I updated the design, removed unnecessary divs, used Avatar component for the indicator since it supports icon already.',
  avatar: {
    src: '/b24ui/avatar/assistant.png'
  }
}, {
  username: 'Employee Name',
  date: '2025-05-27T11:01:20Z',
  action: 'commented on this',
  description: 'Looks great! Good job on cleaning it up.',
  avatar: {
    src: '/b24ui/avatar/employee.png'
  }
}, {
  username: 'Assistant Name',
  date: '2025-05-27T11:01:20Z',
  action: 'merged this',
  icon: MoreMIcon
}] satisfies TimelineItem[]
</script>

<template>
  <B24Timeline
    :items="items"
    size="xs"
    :b24ui="{
      date: 'float-end ms-1',
      description: 'px-3 py-2 ring ring-(--ui-color-g-glass-grey-bg-2) mt-2 rounded-md text-(--b24ui-typography-description-color)'
    }"
    class="w-[384px]"
  >
    <template #title="{ item }">
      <span>{{ item.username }}</span>
      <span class="font-normal text-(--b24ui-typography-label-color)">&nbsp;{{ item.action }}</span>
    </template>

    <template #date="{ item }">
      {{ useTimeAgo(new Date(item.date)) }}
    </template>
  </B24Timeline>
</template>
```

## API

### Props

```ts
/**
 * Props for the Timeline component
 */
interface TimelineProps {
  items: TimelineItem[];
  /**
   * The element or component this component should render as.
   */
  as?: any;
  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot";
  /**
   * The orientation of the Timeline.
   * @default "\"vertical\""
   */
  orientation?: "horizontal" | "vertical" | undefined;
  defaultValue?: string | number | undefined;
  reverse?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; item?: ClassNameValue; container?: ClassNameValue; indicator?: ClassNameValue; separator?: ClassNameValue; wrapper?: ClassNameValue; date?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; } | undefined;
  modelValue?: string | number | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Timeline component
 */
interface TimelineSlots {
  indicator(): any;
  date(): any;
  title(): any;
  description(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Timeline component
 */
interface TimelineEmits {
  update:modelValue: (payload: [value: string | number | undefined]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    timeline: {
      slots: {
        root: 'flex gap-1.5',
        item: 'group relative flex flex-1 gap-3',
        container: 'relative flex items-center gap-1.5',
        indicator: 'group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-(--b24ui-typography-description-color) group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)',
        separator: 'flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6)',
        wrapper: 'w-full',
        date: 'text-(--b24ui-typography-label-color) text-(length:--ui-font-size-xs)/(--ui-font-line-height-md)',
        title: 'font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-sm)',
        description: 'text-(--b24ui-typography-description-color) text-wrap text-(length:--ui-font-size-sm)'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex-row w-full',
            item: 'flex-col',
            separator: 'h-0.5'
          },
          vertical: {
            root: 'flex-col',
            container: 'flex-col',
            separator: 'w-0.5'
          }
        },
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          }
        },
        size: {
          '3xs': '',
          '2xs': '',
          xs: '',
          sm: '',
          md: '',
          lg: '',
          xl: '',
          '2xl': ''
        },
        reverse: {
          false: {
            separator: 'group-data-[state=completed]:bg-(--b24ui-background-active)'
          },
          true: {
            separator: 'group-data-[state=active]:bg-(--b24ui-background) group-data-[state=completed]:bg-(--b24ui-background)'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          size: '3xs',
          class: {
            wrapper: 'pe-4.5'
          }
        },
        {
          orientation: 'horizontal',
          size: '2xs',
          class: {
            wrapper: 'pe-5'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xs',
          class: {
            wrapper: 'pe-5.5'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            wrapper: 'pe-6'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            wrapper: 'pe-6.5'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            wrapper: 'pe-7'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            wrapper: 'pe-7.5'
          }
        },
        {
          orientation: 'horizontal',
          size: '2xl',
          class: {
            wrapper: 'pe-8'
          }
        },
        {
          orientation: 'horizontal',
          size: '3xl',
          class: {
            wrapper: 'pe-8.5'
          }
        },
        {
          orientation: 'vertical',
          size: '3xs',
          class: {
            wrapper: '-mt-0.5 pb-4.5'
          }
        },
        {
          orientation: 'vertical',
          size: '2xs',
          class: {
            wrapper: 'pb-5'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            wrapper: 'mt-0.5 pb-5.5'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            wrapper: 'mt-1 pb-6'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            wrapper: 'mt-1.5 pb-6.5'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            wrapper: 'mt-2 pb-7'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            wrapper: 'mt-2.5 pb-7.5'
          }
        },
        {
          orientation: 'vertical',
          size: '2xl',
          class: {
            wrapper: 'mt-3 pb-8'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'air-primary'
      }
    }
  }
})
```

---

# Toast

> A short message to offer information or feedback to the user.

## Usage

Use the [useToast](https://bitrix24.github.io/b24ui/raw/docs/composables/use-toast.md) composable to display a toast in your application.

```vue [ToastExample.vue]
<script setup lang="ts">
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'
import CalendarWithSlotsIcon from '@bitrix24/b24icons-vue/outline/CalendarWithSlotsIcon'

const toast = useToast()

function addToCalendar() {
  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
  const formattedDate = eventDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })

  toast.add({
    title: 'Event added to calendar',
    description: `This event is scheduled for ${formattedDate}.`,
    icon: CalendarWithSlotsIcon
  })
}
</script>

<template>
  <B24Button label="Add to calendar" :icon="PlusLIcon" @click="addToCalendar" />
</template>
```

> !WARNING
> Make sure to wrap your app with the [`App`](https://bitrix24.github.io/b24ui/raw/docs/components/app.md) component which uses our [`Toaster`](https://github.com/bitrix24/b24ui/blob/main/src/runtime/components/Toaster.vue){rel="nofollow"} component which uses the [`ToastProvider`](https://reka-ui.com/docs/components/toast#provider){rel="nofollow"} component from Reka UI.

> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/components/app.md#props)
> You can check the `App` component `toaster` prop to see how to configure the Toaster globally.

### Title

Pass a `title` field to the `toast.add` method to display a title.

```vue [ToastTitleExample.vue]
<script setup lang="ts">
const props = defineProps<{
  title: string
}>()

const toast = useToast()

function showToast() {
  toast.add(props)
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Description

Pass a `description` field to the `toast.add` method to display a description.

```vue [ToastDescriptionExample.vue]
<script setup lang="ts">
const props = defineProps<{
  title: string
  description: string
}>()

const toast = useToast()

function showToast() {
  toast.add(props)
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Icon

Pass an `icon` field to the `toast.add` method to display an [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue [ToastIconExample.vue]
<script setup lang="ts">
import CopilotAiIcon from '@bitrix24/b24icons-vue/main/CopilotAiIcon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: CopilotAiIcon
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Avatar

Pass an `avatar` field to the `toast.add` method to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md).

```vue [ToastAvatarExample.vue]
<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'The calculation of indicators has been completed',
    description: 'Is there anything else you need help with?',
    avatar: { src: '/b24ui/avatar/assistant.png' }
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Color

Pass a `color` field to the `toast.add` method to change the color of the Toast.

```vue [ToastColorExample.vue]
<script setup lang="ts">
import type { ToastProps } from '@bitrix24/b24ui-nuxt'
import CopilotAiIcon from '@bitrix24/b24icons-vue/main/CopilotAiIcon'

const props = defineProps<{
  color: ToastProps['color']
}>()

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: CopilotAiIcon,
    color: props.color
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Close

Pass a `close` field to customize or hide the close [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) (with `false` value).

```vue [ToastCloseExample.vue]
<script setup lang="ts">
import CopilotAiIcon from '@bitrix24/b24icons-vue/main/CopilotAiIcon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: CopilotAiIcon,
    close: {
      color: 'air-primary-copilot',
      class: 'rounded-full'
    }
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Close Icon

Pass a `closeIcon` field to customize the close button [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"}.

```vue [ToastCloseIconExample.vue]
<script setup lang="ts">
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    closeIcon: ArrowToTheRightIcon
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Actions

Pass an `actions` field to add some [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) actions to the Toast.

```vue [ToastActionsExample.vue]
<script setup lang="ts">
import Refresh9Icon from '@bitrix24/b24icons-vue/crm/Refresh9Icon'

const toast = useToast()

const props = defineProps<{
  description: string
}>()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: props.description,
    actions: [{
      icon: Refresh9Icon,
      label: 'Retry',
      color: 'air-secondary-accent-2',
      onClick: (e) => {
        e?.stopPropagation()
      }
    }]
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Progress

Pass a `progress` field to customize or hide the [Progress](https://bitrix24.github.io/b24ui/raw/docs/components/progress.md) bar (with `false` value).

> !TIP
> The Progress bar inherits the Toast color by default, but you can override it using the `progress.color` field.

```vue [ToastProgressExample.vue]
<script setup lang="ts">
import CopilotAiIcon from '@bitrix24/b24icons-vue/main/CopilotAiIcon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    description: 'There was a problem with your request.',
    icon: CopilotAiIcon,
    progress: false
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

### Orientation

Pass an `orientation` field to the `toast.add` method to change the orientation of the Toast.

```vue [ToastOrientationExample.vue]
<script setup lang="ts">
import Refresh9Icon from '@bitrix24/b24icons-vue/crm/Refresh9Icon'

const toast = useToast()

const props = defineProps<{
  orientation: 'horizontal' | 'vertical'
}>()

function showToast() {
  toast.add({
    title: 'Uh oh! Something went wrong.',
    orientation: props.orientation,
    actions: [{
      icon: Refresh9Icon,
      label: 'Retry',
      color: 'air-secondary-accent-2',
      onClick: (e) => {
        e?.stopPropagation()
      }
    }]
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>
```

## Examples

> [!NOTE](https://bitrix24.github.io/b24ui/raw/docs/components/app.md)
> Bitrix24 UI provides an **App** component that wraps your app to provide global configurations.

### Change global position

Change the `toaster.position` prop on the [App](https://bitrix24.github.io/b24ui/raw/docs/components/app.md#props) component to change the position of the toasts.

```vue [app.vue]
<script setup lang="ts">
const toaster = { position: 'bottom-right' }
</script>

<template>
  <B24App :toaster="toaster">
    <NuxtPage />
  </B24App>
</template>
```

```vue [ToastExample.vue]
<script setup lang="ts">
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'
import CalendarWithSlotsIcon from '@bitrix24/b24icons-vue/outline/CalendarWithSlotsIcon'

const toast = useToast()

function addToCalendar() {
  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
  const formattedDate = eventDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })

  toast.add({
    title: 'Event added to calendar',
    description: `This event is scheduled for ${formattedDate}.`,
    icon: CalendarWithSlotsIcon
  })
}
</script>

<template>
  <B24Button label="Add to calendar" :icon="PlusLIcon" @click="addToCalendar" />
</template>
```

> [!NOTE](https://github.com/bitrix24/b24ui/blob/main/docs/app/app.config.ts#L3)
> In this example, we use the `AppConfig` to configure the `position` prop of the `Toaster` component globally.

### Change global duration

Change the `toaster.duration` prop on the [App](https://bitrix24.github.io/b24ui/raw/docs/components/app.md#props) component to change the duration of the toasts.

```vue [app.vue]
<script setup lang="ts">
const toaster = { duration: 5000 }
</script>

<template>
  <B24App :toaster="toaster">
    <NuxtPage />
  </B24App>
</template>
```

```vue [ToastExample.vue]
<script setup lang="ts">
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'
import CalendarWithSlotsIcon from '@bitrix24/b24icons-vue/outline/CalendarWithSlotsIcon'

const toast = useToast()

function addToCalendar() {
  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
  const formattedDate = eventDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })

  toast.add({
    title: 'Event added to calendar',
    description: `This event is scheduled for ${formattedDate}.`,
    icon: CalendarWithSlotsIcon
  })
}
</script>

<template>
  <B24Button label="Add to calendar" :icon="PlusLIcon" @click="addToCalendar" />
</template>
```

> [!NOTE](https://github.com/bitrix24/b24ui/blob/main/docs/app/app.config.ts#L4)
> In this example, we use the `AppConfig` to configure the `duration` prop of the `Toaster` component globally.

### Change global max :badge{label="Soon"}

Change the `toaster.max` prop on the [App](https://bitrix24.github.io/b24ui/raw/docs/components/app.md#props) component to change the max number of toasts displayed at once.

```vue [app.vue]
<script setup lang="ts">
const toaster = { max: 3 }
</script>

<template>
  <B24App :toaster="toaster">
    <NuxtPage />
  </B24App>
</template>
```

```vue [ToastExample.vue]
<script setup lang="ts">
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'
import CalendarWithSlotsIcon from '@bitrix24/b24icons-vue/outline/CalendarWithSlotsIcon'

const toast = useToast()

function addToCalendar() {
  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
  const formattedDate = eventDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })

  toast.add({
    title: 'Event added to calendar',
    description: `This event is scheduled for ${formattedDate}.`,
    icon: CalendarWithSlotsIcon
  })
}
</script>

<template>
  <B24Button label="Add to calendar" :icon="PlusLIcon" @click="addToCalendar" />
</template>
```

> [!NOTE](https://github.com/bitrix24/b24ui/blob/main/docs/app/app.config.ts#L5)
> In this example, we use the `AppConfig` to configure the `max` prop of the `Toaster` component globally.

### Stacked toasts

Set the `toaster.expand` prop to `false` on the [App](https://bitrix24.github.io/b24ui/raw/docs/components/app.md#props) component to display stacked toasts (inspired by [Sonner](https://sonner.emilkowal.ski/){rel="nofollow"}).

```vue [app.vue]
<script setup lang="ts">
const toaster = { expand: true }
</script>

<template>
  <B24App :toaster="toaster">
    <NuxtPage />
  </B24App>
</template>
```

> !TIP
> You can hover over the toasts to expand them. This will also pause the timer of the toasts.

```vue [ToastExample.vue]
<script setup lang="ts">
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'
import CalendarWithSlotsIcon from '@bitrix24/b24icons-vue/outline/CalendarWithSlotsIcon'

const toast = useToast()

function addToCalendar() {
  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
  const formattedDate = eventDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })

  toast.add({
    title: 'Event added to calendar',
    description: `This event is scheduled for ${formattedDate}.`,
    icon: CalendarWithSlotsIcon
  })
}
</script>

<template>
  <B24Button label="Add to calendar" :icon="PlusLIcon" @click="addToCalendar" />
</template>
```

> [!NOTE](https://github.com/bitrix24/b24ui/blob/main/docs/app/app.config.ts#L6)
> In this example, we use the `AppConfig` to configure the `expand` prop of the `Toaster` component globally.

## API

### Props

```ts
/**
 * Props for the Toast component
 */
interface ToastProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  title?: StringOrVNode | undefined;
  description?: StringOrVNode | undefined;
  icon?: IconComponent | undefined;
  avatar?: AvatarProps | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary";
  /**
   * The orientation between the content and the actions
   * @default "\"vertical\""
   */
  orientation?: "vertical" | "horizontal" | undefined;
  /**
   * Display a close button to dismiss the toast.
   * `{ size: 'sm', color: 'air-tertiary' }`{lang="ts"}
   * @default "true"
   */
  close?: boolean | Partial<ButtonProps> | undefined;
  /**
   * The icon displayed in the close button.
   */
  closeIcon?: IconComponent | undefined;
  /**
   * Display a list of actions:
   * - under the title and description when orientation is `vertical`
   * - next to the close button when orientation is `horizontal`
   * `{ size: 'sm' }`{lang="ts"}
   */
  actions?: ButtonProps[] | undefined;
  /**
   * Display a progress bar showing the toast's remaining duration.
   * `{ size: 'sm' }`{lang="ts"}
   * @default "true"
   */
  progress?: boolean | Pick<ProgressProps, "color" | "b24ui"> | undefined;
  b24ui?: { root?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; actions?: ClassNameValue; progress?: ClassNameValue; close?: ClassNameValue; } | undefined;
  /**
   * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The controlled open state of the dialog. Can be bind as `v-model:open`.
   */
  open?: boolean | undefined;
  /**
   * Control the sensitivity of the toast for accessibility purposes.
   * 
   * For toasts that are the result of a user action, choose `foreground`. Toasts generated from background tasks should use `background`.
   */
  type?: "foreground" | "background" | undefined;
  /**
   * Time in milliseconds that toast should remain visible for. Overrides value
   * given to `ToastProvider`.
   */
  duration?: number | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Toast component
 */
interface ToastSlots {
  leading(): any;
  title(): any;
  description(): any;
  actions(): any;
  close(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Toast component
 */
interface ToastEmits {
  pause: (payload: []) => void;
  escapeKeyDown: (payload: [event: KeyboardEvent]) => void;
  resume: (payload: []) => void;
  swipeStart: (payload: [event: SwipeEvent]) => void;
  swipeMove: (payload: [event: SwipeEvent]) => void;
  swipeCancel: (payload: [event: SwipeEvent]) => void;
  swipeEnd: (payload: [event: SwipeEvent]) => void;
  update:open: (payload: [value: boolean]) => void;
}
```

### Expose

When accessing the component via a template ref, you can use the following:

| Name                                                                                                                                     | Type                                                                                                                                          |
| ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `height`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} | `Ref<number>`{.language-ts-type.shiki.shiki-themes.material-theme-palenight.material-theme-palenight.material-theme-palenight lang="ts-type"} |

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    toast: {
      slots: {
        root: 'dark relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex items-center gap-2.5 focus-visible:outline-(length:--ui-design-outline-stroke-weight) focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-design-outline-content-divider) font-[family-name:var(--ui-font-family-primary)] bg-(--ui-color-bg-content-primary)/80 text-(--ui-color-design-plain-na-focused-content) text-(length:--ui-font-size-sm) font-(--ui-font-weight-normal)',
        wrapper: 'w-0 flex-1 flex flex-col',
        title: 'font-(--ui-font-weight-medium)',
        description: '',
        icon: 'shrink-0 size-6 text-(--b24ui-border-color)',
        avatar: 'shrink-0',
        avatarSize: 'xl',
        actions: 'flex gap-1.5 shrink-0',
        progress: 'absolute inset-x-0 bottom-0',
        close: 'p-0'
      },
      variants: {
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          'air-secondary': {
            root: 'style-filled-inverted'
          },
          default: {
            root: 'old-style-default'
          },
          danger: {
            root: 'old-style-danger'
          },
          success: {
            root: 'old-style-success'
          },
          warning: {
            root: 'old-style-warning'
          },
          primary: {
            root: 'old-style-primary'
          },
          secondary: {
            root: 'old-style-secondary'
          },
          collab: {
            root: 'old-style-collab'
          },
          ai: {
            root: 'old-style-ai'
          }
        },
        orientation: {
          horizontal: {
            root: 'items-center',
            actions: 'items-center'
          },
          vertical: {
            root: 'items-center',
            actions: 'items-start mt-1'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      },
      defaultVariants: {
        color: 'air-secondary'
      }
    }
  }
})
```

---

# Tooltip

> A small window that shows details when you move your mouse over an item.

## Usage

Use a [Button](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) or any other component in the default slot of the Tooltip.

```vue

<template>
  <B24Tooltip text="Open on GitHub">
<B24Button label="Open" />
</B24Tooltip>
</template>

```

> !WARNING
> Make sure to wrap your app with the [`App`](https://bitrix24.github.io/b24ui/raw/docs/components/app.md) component which uses the [`TooltipProvider`](https://reka-ui.com/docs/components/tooltip#provider){rel="nofollow"} component from Reka UI.

> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/components/app.md#props)
> You can check the `App` component `tooltip` prop to see how to configure the Tooltip globally.

### Text

Use the `text` prop to set the content of the Tooltip.

```vue

<template>
  <B24Tooltip text="Open on GitHub">
<B24Button label="Open" />
</B24Tooltip>
</template>

```

### Kbds

Use the `kbds` prop to render [Kbd](https://bitrix24.github.io/b24ui/raw/docs/components/kbd.md) components in the Tooltip.

```vue

<template>
  <B24Tooltip text="Open on GitHub" :kbds="{'0':'meta','1':'G'}">
<B24Button label="Open" />
</B24Tooltip>
</template>

```

> !TIP
> You can use special keys like `meta` that displays as `⌘` on macOS and `Ctrl` on other platforms.

### Delay

Use the `delay-duration` prop to change the delay before the Tooltip appears. For example, you can make it appear instantly by setting it to `0`.

```vue

<template>
  <B24Tooltip :delay-duration="0" text="Open on GitHub">
<B24Button label="Open" />
</B24Tooltip>
</template>

```

> !TIP
> This can be configured globally through the `tooltip.delayDuration` option in the [`App`](https://bitrix24.github.io/b24ui/raw/docs/components/app.md) component.

### Content

Use the `content` prop to control how the Tooltip content is rendered, like its `align` or `side` for example.

```vue

<template>
  <B24Tooltip :content="{align:'center',side:'bottom',sideOffset:8}" text="Open on GitHub">
<B24Button label="Open" />
</B24Tooltip>
</template>

```

### Arrow

Use the `arrow` prop to display an arrow on the Tooltip.

```vue

<template>
  <B24Tooltip text="Open on GitHub">
<B24Button label="Open" />
</B24Tooltip>
</template>

```

### Disabled

Use the `disabled` prop to disable the Tooltip.

```vue

<template>
  <B24Tooltip disabled text="Open on GitHub">
<B24Button label="Open" />
</B24Tooltip>
</template>

```

## Examples

### Control open state

You can control the open state by using the `default-open` prop or the `v-model:open` directive.

```vue [TooltipOpenExample.vue]
<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Tooltip v-model:open="open" text="Open on GitHub">
    <B24Button label="Open" />
  </B24Tooltip>
</template>
```

> !NOTE
> In this example, leveraging [`defineShortcuts`](https://bitrix24.github.io/b24ui/raw/docs/composables/define-shortcuts.md), you can toggle the Tooltip by pressing ``.

### With following cursor

You can make the Tooltip follow the cursor when hovering over an element using the [`reference`](https://reka-ui.com/docs/components/tooltip#trigger){rel="nofollow"} prop:

```vue [TooltipCursorExample.vue]
<script setup lang="ts">
const open = ref(false)
const anchor = ref({ x: 0, y: 0 })

const reference = computed(() => ({
  getBoundingClientRect: () =>
    ({
      width: 0,
      height: 0,
      left: anchor.value.x,
      right: anchor.value.x,
      top: anchor.value.y,
      bottom: anchor.value.y,
      ...anchor.value
    } as DOMRect)
}))
</script>

<template>
  <B24Tooltip
    :open="open"
    :reference="reference"
    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
  >
    <div
      class="flex items-center justify-center rounded-md border border-dashed border-(--ui-color-accent-main-primary-alt) text-sm aspect-video w-72"
      @pointerenter="open = true"
      @pointerleave="open = false"
      @pointermove="(ev) => {
        anchor.x = ev.clientX
        anchor.y = ev.clientY
      }"
    >
      Hover me
    </div>

    <template #content>
      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
    </template>
  </B24Tooltip>
</template>
```

### Help Icon

You can use the [Icon](https://bitrix24.github.io/b24icons/icons/){rel="nofollow"} and the Tooltip.

```vue [TooltipHelpIconExample.vue]
<script setup lang="ts">
import HelpIcon from '@bitrix24/b24icons-vue/main/HelpIcon'
</script>

<template>
  <B24Tooltip
    :delay-duration="100"
    :content="{ side: 'right' }"
    text="When the performer completes the task, it will come to you for review. You can accept the work (and then the task will be closed) or return the task for revision."
  >
    <HelpIcon class="size-5 cursor-help" />
  </B24Tooltip>
</template>
```

## API

### Props

```ts
/**
 * Props for the Tooltip component
 */
interface TooltipProps {
  /**
   * The text content of the tooltip.
   */
  text?: string | undefined;
  /**
   * The keyboard keys to display in the tooltip.
   */
  kbds?: (string | undefined)[] | KbdProps[] | undefined;
  /**
   * The content of the tooltip.
   */
  content?: (Omit<TooltipContentProps, "as" | "asChild"> & Partial<EmitsToProps<TooltipContentImplEmits>>) | undefined;
  /**
   * Display an arrow alongside the tooltip.
   * @default "true"
   */
  arrow?: boolean | Omit<TooltipArrowProps, "as" | "asChild"> | undefined;
  /**
   * Render the tooltip in a portal.
   * @default "true"
   */
  portal?: string | boolean | HTMLElement | undefined;
  /**
   * The reference (or anchor) element that is being referred to for positioning.
   * 
   * If not provided will use the current component as anchor.
   */
  reference?: ReferenceElement | undefined;
  b24ui?: { content?: ClassNameValue; arrow?: ClassNameValue; text?: ClassNameValue; kbds?: ClassNameValue; kbdsSize?: ClassNameValue; kbdsAccent?: ClassNameValue; } | undefined;
  /**
   * The open state of the tooltip when it is initially rendered.
   * Use when you do not need to control its open state.
   */
  defaultOpen?: boolean | undefined;
  /**
   * The controlled open state of the tooltip.
   */
  open?: boolean | undefined;
  /**
   * Override the duration given to the `Provider` to customise
   * the open delay for a specific tooltip.
   */
  delayDuration?: number | undefined;
  /**
   * Prevents Tooltip.Content from remaining open when hovering.
   * Disabling this has accessibility consequences. Inherits
   * from Tooltip.Provider.
   */
  disableHoverableContent?: boolean | undefined;
  /**
   * When `true`, clicking on trigger will not close the content.
   */
  disableClosingTrigger?: boolean | undefined;
  /**
   * When `true`, disable tooltip
   */
  disabled?: boolean | undefined;
  /**
   * Prevent the tooltip from opening if the focus did not come from
   * the keyboard by matching against the `:focus-visible` selector.
   * This is useful if you want to avoid opening it when switching
   * browser tabs or closing a dialog.
   */
  ignoreNonKeyboardFocus?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Tooltip component
 */
interface TooltipSlots {
  default(): any;
  content(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Tooltip component
 */
interface TooltipEmits {
  update:open: (payload: [value: boolean]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    tooltip: {
      slots: {
        content: 'dark flex flex-row items-center justify-between gap-[5px] will-change-[opacity] min-h-[37px] shadow-xl/20 select-none motion-safe:data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] p-[10px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) font-[family-name:var(--ui-font-family-primary)] bg-(--ui-color-bg-content-primary)/80 text-(--ui-color-design-plain-na-focused-content) rounded-[calc(var(--popup-window-border-radius)-2px)] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
        arrow: 'fill-(--ui-color-bg-content-primary)/80',
        text: 'text-pretty max-w-[200px] min-w-[100px]',
        kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-[''] not-first-of-type:before:me-0.5",
        kbdsSize: 'sm',
        kbdsAccent: 'default'
      }
    }
  }
})
```

---

# User

> A component to display user details, including their name, bio, and profile picture.

## Usage

### Name

Use the `name` prop to display a name for the user.

```vue

<template>
  <B24User name="John Doe" />
</template>

```

### Description

Use the `description` prop to display a description for the user.

```vue

<template>
  <B24User name="John Doe" description="Software Engineer" />
</template>

```

### Avatar

Use the `avatar` prop to display an [Avatar](https://bitrix24.github.io/b24ui/raw/docs/components/avatar.md) component.

```vue

<template>
  <B24User name="John Doe" description="Software Engineer" :avatar="{src:'/b24ui/avatar/employee.png'}" />
</template>

```

::collapsible{name="all avatar properties"}
```ts
/**
 * Props for the Avatar component
 */
interface AvatarProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  src?: string | undefined;
  alt?: string | undefined;
  /**
   * Display an icon on the left side.
   */
  icon?: IconComponent | undefined;
  text?: string | undefined;
  size?: "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined;
  chip?: boolean | ChipProps | undefined;
  b24ui?: { root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; } | undefined;
  crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
  decoding?: "async" | "auto" | "sync" | undefined;
  height?: Numberish | undefined;
  loading?: "lazy" | "eager" | undefined;
  referrerpolicy?: HTMLAttributeReferrerPolicy | undefined;
  sizes?: string | undefined;
  srcset?: string | undefined;
  usemap?: string | undefined;
  width?: Numberish | undefined;
}
```
::

### Chip

Use the `chip` prop to display a [Chip](https://bitrix24.github.io/b24ui/raw/docs/components/chip.md) component.

```vue

<template>
  <B24User name="John Doe" description="Software Engineer" :avatar="{src:'/b24ui/avatar/employee.png'}" :chip="{color:'primary',position:'top-right'}" />
</template>

```

::collapsible{name="all chip properties"}
```ts
/**
 * Props for the Chip component
 */
interface ChipProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * Display some text inside the chip.
   */
  text?: string | number | undefined;
  /**
   * The icon displayed on the right side of the chip.
   */
  trailingIcon?: IconComponent | undefined;
  color?: "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary";
  /**
   * If set to `true` the color is inverted.
   * Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
   * @default "false"
   */
  inverted?: boolean | undefined;
  size?: "sm" | "md" | "lg" | undefined;
  /**
   * The position of the chip.
   */
  position?: "top-right" | "bottom-right" | "top-left" | "bottom-left" | undefined;
  /**
   * When `true`, keep the chip inside the component for rounded elements
   * @default "false"
   */
  inset?: boolean | undefined;
  /**
   * When `true`, render the chip relatively to the parent.
   * @default "false"
   */
  standalone?: boolean | undefined;
  /**
   * When `true`, hide chip if value='0'
   * @default "false"
   */
  hideZero?: boolean | undefined;
  b24ui?: { root?: ClassNameValue; base?: ClassNameValue; trailingIcon?: ClassNameValue; } | undefined;
  /**
   * @default "true"
   */
  show?: boolean | undefined;
}
```
::

### Size

Use the `size` prop to change the size of the user avatar and text.

```vue

<template>
  <B24User name="John Doe" description="Software Engineer" :avatar="{src:'/b24ui/avatar/employee.png'}" chip size="xl" />
</template>

```

### Orientation

Use the `orientation` prop to change the orientation. Defaults to `horizontal`.

```vue

<template>
  <B24User orientation="vertical" name="John Doe" description="Software Engineer" :avatar="{src:'/b24ui/avatar/employee.png'}" />
</template>

```

### Link

You can pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} component such as `to`, `target`, `rel`, etc.

```vue

<template>
  <B24User to="https://github.com/bitrix24" target="_blank" name="Username" description="User description" :avatar="{src:'https://github.com/bitrix24.png'}" />
</template>

```

> !NOTE
> The `NuxtLink` component will inherit all other attributes you pass to the `User` component.

## API

### Props

```ts
/**
 * Props for the User component
 */
interface UserProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  name?: string | undefined;
  description?: string | undefined;
  avatar?: (Omit<AvatarProps, "size"> & { [key: string]: any; }) | undefined;
  chip?: boolean | Omit<ChipProps, "size" | "inset"> | undefined;
  size?: "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined;
  /**
   * The orientation of the user.
   * @default "\"horizontal\""
   */
  orientation?: "horizontal" | "vertical" | undefined;
  to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric | undefined;
  target?: "_blank" | "_parent" | "_self" | "_top" | (string & {}) | null | undefined;
  onClick?: ((event: MouseEvent) => void | Promise<void>) | undefined;
  b24ui?: { root?: ClassNameValue; wrapper?: ClassNameValue; name?: ClassNameValue; description?: ClassNameValue; avatar?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the User component
 */
interface UserSlots {
  avatar(): any;
  name(): any;
  description(): any;
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  b24ui: {
    user: {
      slots: {
        root: 'relative group/user',
        wrapper: '',
        name: 'font-(--ui-font-weight-medium)',
        description: 'text-(--b24ui-typography-description-color)',
        avatar: 'shrink-0'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-center'
          },
          vertical: {
            root: 'flex flex-col'
          }
        },
        to: {
          true: {
            name: 'text-(--b24ui-typography-label-color) peer-hover:text-(--ui-color-design-selection-content) transition-colors',
            description: 'peer-hover:text-(--ui-color-design-selection-content) transition-colors',
            avatar: 'transform transition-transform duration-200 group-hover/user:scale-115'
          },
          false: {
            name: 'text-(--b24ui-typography-label-color)',
            description: ''
          }
        },
        size: {
          '3xs': {
            root: 'gap-1',
            wrapper: 'flex items-center gap-1',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          '2xs': {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          xs: {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          sm: {
            root: 'gap-2',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          md: {
            root: 'gap-2',
            name: 'text-(length:--ui-font-size-sm)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          lg: {
            root: 'gap-2.5',
            name: 'text-(length:--ui-font-size-sm)',
            description: 'text-(length:--ui-font-size-sm)'
          },
          xl: {
            root: 'gap-2.5',
            name: 'text-(length:--ui-font-size-md)',
            description: 'text-(length:--ui-font-size-sm)'
          },
          '2xl': {
            root: 'gap-3',
            name: 'text-(length:--ui-font-size-md)',
            description: 'text-(length:--ui-font-size-md)'
          },
          '3xl': {
            root: 'gap-3',
            name: 'text-(length:--ui-font-size-lg)',
            description: 'text-(length:--ui-font-size-md)'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
```

---

# defineShortcuts

> A composable to assign keyboard shortcuts in your app.

## Usage

Use the auto-imported `defineShortcuts` composable to define keyboard shortcuts.

```vue
<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  meta_k: () => {
    open.value = !open.value
  }
})
</script>
```

- Shortcuts are automatically adjusted for non-macOS platforms, converting `meta` to `ctrl`.
- The composable uses VueUse's [`useEventListener`](https://vueuse.org/core/useEventListener/){rel="nofollow"} to handle keydown events.
- For a complete list of available shortcut keys, refer to the [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values){rel="nofollow"} API documentation. Note that the key should be written in lowercase.

> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/components/kbd.md)
> Learn how to display shortcuts in components in the **Kbd** component documentation.

## API

`defineShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Define keyboard shortcuts for your application.

#### Parameters

::field-group
  :::field{required name="config" required="true" type="ShortcutsConfig"}
  An object where keys are shortcut definitions and values are either handler functions or shortcut configuration objects.
  :::

  :::field{name="options" type="ShortcutsOptions"}
  Optional configuration for the shortcuts behavior.
  
    ::::collapsible
      :::::field{name="chainDelay" type="number"}
      The delay between key presses to consider the shortcut as chained. Default is `250`.
      :::::
    ::::
  :::
::

#### Shortcut definition

Shortcuts are defined using the following format:

- Single key: `'a'`, `'b'`, `'1'`, `'?'`, etc.
- Key combinations: Use `_` to separate keys, e.g., `'meta_k'`, `'ctrl_shift_f'`
- Key sequences: Use `-` to define a sequence, e.g., `'g-d'`

#### Modifiers

- `meta`: Represents `⌘ Command` on macOS and `Ctrl` on other platforms
- `ctrl`: Represents `Ctrl` on all platforms
- `shift`: Used for alphabetic keys when Shift is required

#### Special keys

- `escape`: Triggers on Esc key
- `enter`: Triggers on Enter key
- `arrowleft`, `arrowright`, `arrowup`, `arrowdown`: Trigger on respective arrow keys

#### Shortcut configuration

Each shortcut can be defined as a function or an object with the following properties:

`interface ShortcutConfig { handler: () => void; usingInput?: boolean | string }`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

#### Parameters

::field-group
  :::field{required name="handler" required="true" type="() => void"}
  Function to be executed when the shortcut is triggered.
  :::

  :::field{name="usingInput" type="boolean | string"}
  Controls when the shortcut should trigger based on input focus:
  
  - `false` (default): Shortcut only triggers when no input is focused
  - `true`: Shortcut triggers even when any input is focused
  - `string`: Shortcut only triggers when the specified input (by name) is focused
  :::
::

## Examples

### Basic usage

```vue
<script setup lang="ts">
defineShortcuts({
  '?': () => openHelpModal(),
  'meta_k': () => openCommandPalette(),
  'g-d': () => navigateToDashboard()
})
</script>
```

### With input focus handling

The `usingInput` option allows you to specify that a shortcut should only trigger when a specific input is focused.

```vue
<template>
  <B24Input v-model="query" name="queryInput" />
</template>

<script setup lang="ts">
const query = ref('')

defineShortcuts({
  enter: {
    usingInput: 'queryInput',
    handler: () => performSearch()
  },
  escape: {
    usingInput: true,
    handler: () => clearSearch()
  }
})
</script>
```

### Extracting shortcuts from menu items

The `extractShortcuts` utility can be used to automatically define shortcuts from menu items:

```vue
<script setup lang="ts">
const items = [{
  label: 'Save',
  kbds: ['meta', 'S'],
  onSelect() {
    save()
  }
}, {
  label: 'Copy',
  kbds: ['meta', 'C'],
  onSelect() {
    copy()
  }
}]

defineShortcuts(extractShortcuts(items))
</script>
```

---

# useConfetti

> Performant confetti animation in the browser

## Usage

Use the auto-imported `useConfetti` composable to programmatically control `canvas-confetti`.

```vue
<script setup lang="ts">
const confetti = useConfetti()
</script>
```

- The `useConfetti` composable is created using `createSharedComposable`, ensuring that the same `canvas-confetti` is shared across your entire application.

> !CAUTION
> Since canvas-confetti works with the DOM, make sure your code only runs on the client.

## API

`fire(options?: confetti.Options) => Promise<undefined> | null`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Fire some confetti.

```vue
<script setup lang="ts">
const confetti = useConfetti()

function fireConfetti(): void {
  confetti.fire()
}
</script>
```

`create(canvas?: HTMLCanvasElement, options?: GlobalOptions) => CreateTypes`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

This method creates an instance of the confetti function that uses a custom canvas.

Use if you need to specify your own parameters for confetti.

```vue
<script setup lang="ts">
const confetti = useConfetti()

function fireConfettiWithOptions(): void {
  confetti.create()
  confetti.fire({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6 }
  })
}
</script>
```

Or like this. Specify your own Canvas.

```vue {4,8,17}
<script setup lang="ts">
import { ref } from 'vue'
  
const myCanvas = ref<HTMLCanvasElement | undefined>()
const confetti = useConfetti()

function fireAtPlace(): void {
  const confettiInstance = confetti.create(myCanvas.value, { resize: true })
  confettiInstance({
    spread: 70
  })
}
</script>
<template>
  <B24Button label="custom canvas" color="link" depth="dark" @click.stop="fireAtPlace" />
  <div>
    <canvas ref="myCanvas" class="h-64 w-1/2" />
  </div>
</template>
```

## Example

Here's a complete example of how to use the `useConfetti` composable:

### Simple use

```vue [UseConfettiExample.vue]
<script setup lang="ts">
const confetti = useConfetti()

function fireConfetti(): void {
  confetti.fire()
}
</script>

<template>
  <B24Button label="simple" color="air-primary" @click.stop="fireConfetti" />
</template>
```

### With some options

```vue [UseConfettiSomeOptionsExample.vue]
<script setup lang="ts">
const confetti = useConfetti()

function fireConfettiWithOptions(): void {
  confetti.create()
  confetti.fire({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6 }
  })
}
</script>

<template>
  <B24Button label="with options" color="air-secondary" @click.stop="fireConfettiWithOptions" />
</template>
```

### At custom place

```vue [UseConfettiCustomPlaceExample.vue]
<script setup lang="ts">
import { ref } from 'vue'

const myCanvas = ref<HTMLCanvasElement | undefined>()
const confetti = useConfetti()

function fireAtPlace(): void {
  const confettiInstance = confetti.create(myCanvas.value, { resize: true })
  confettiInstance({
    spread: 70
  })
}
</script>

<template>
  <div class="isolate relative p-4 min-h-40 w-full h-full flex flex-col flex-nowrap justify-center items-center gap-4">
    <B24Button label="custom canvas" color="air-primary-success" @click.stop="fireAtPlace" />

    <div class="relative mt-sm2 mb-4 w-full">
      <canvas
        ref="myCanvas"
        class="m-auto h-64 w-1/2 rounded backdrop-blur-md bg-(--ui-color-design-outline-na-bg) border-1 border-(--ui-color-design-outline-na-stroke)"
      />
    </div>
  </div>
</template>
```

---

# useFormField

> A composable to merge custom inputs with the Form component

## Usage

Use the auto-imported `useFormField` composable to integrate custom inputs with a [Form](https://bitrix24.github.io/b24ui/raw/docs/components/form.md).

```vue
<script setup lang="ts">
const { id, emitFormBlur, emitFormInput, emitFormChange } = useFormField()
</script>
```

---

# useOverlay

> A composable to programmatically control overlays in App.

## Usage

Use the auto-imported `useOverlay` composable to programmatically control [Modal](https://bitrix24.github.io/b24ui/raw/docs/components/modal.md) and [Slideover](https://bitrix24.github.io/b24ui/raw/docs/components/slideover.md) components.

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

async function openModal() {
  modal.open()
}
</script>
```

- The `useOverlay` composable is created using `createSharedComposable`, ensuring that the same overlay state is shared across your entire application.

> !NOTE
> In order to return a value from the overlay, the `overlay.open()` can be awaited. In order for this to work, however, the **overlay component must emit a `close` event**. See example below for details.

## API

`useOverlay()`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

The `useOverlay` composable provides methods to manage overlays globally. Each created overlay returns an instance with its own methods.

### create()

`create(component: T, options: OverlayOptions): OverlayInstance`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Create an overlay, and return a factory instance.

#### Parameters

::field-group
  :::field{required name="component" required="true" type="T"}
  The overlay component to render.
  :::

  :::field{name="options" type="OverlayOptions"}
  Configuration options for the overlay.
  
    ::::collapsible
      :::::field-group
        ::::::field{name="defaultOpen" type="boolean"}
        Open the overlay immediately after being created. Defaults to `false`.
        ::::::
      
        ::::::field{name="props" type="ComponentProps"}
        An optional object of props to pass to the rendered component.
        ::::::
      
        ::::::field{name="destroyOnClose" type="boolean"}
        Removes the overlay from memory when closed. Defaults to `false`.
        ::::::
      :::::
    ::::
  :::
::

### open()

`open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Open an overlay by its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::

  :::field{name="props" type="ComponentProps<T>"}
  An optional object of props to pass to the rendered component.
  :::
::

### close()

`close(id: symbol, value?: any): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Close an overlay by its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::

  :::field{name="value" type="any"}
  A value to resolve the overlay promise with.
  :::
::

### patch()

`patch(id: symbol, props: ComponentProps<T>): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Update an overlay by its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::

  :::field{required name="props" required="true" type="ComponentProps<T>"}
  An object of props to update on the rendered component.
  :::
::

### unmount()

`unmount(id: symbol): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Remove an overlay from the DOM by its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::
::

### isOpen()

`isOpen(id: symbol): boolean`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Check if an overlay is open using its `id`.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="symbol"}
  The identifier of the overlay.
  :::
::

### overlays

`overlays: Overlay[]`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

In-memory list of all overlays that were created.

## Instance API

### open()

`open(props?: ComponentProps<T>): Promise<OpenedOverlay<T>>`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Open the overlay.

#### Parameters

::field-group
  :::field{name="props" type="ComponentProps<T>"}
  An optional object of props to pass to the rendered component.
  :::
::

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

function openModal() {
  modal.open({
    title: 'Welcome'
  })
}
</script>
```

### close()

`close(value?: any): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Close the overlay.

#### Parameters

::field-group
  :::field{name="value" type="any"}
  A value to resolve the overlay promise with.
  :::
::

### patch()

`patch(props: ComponentProps<T>): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Update the props of the overlay.

#### Parameters

::field-group
  :::field{required name="props" required="true" type="ComponentProps<T>"}
  An object of props to update on the rendered component.
  :::
::

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample, {
  title: 'Welcome'
})

function openModal() {
  modal.open()
}

function updateModalTitle() {
  modal.patch({ title: 'Updated Title' })
}
</script>
```

## Example

Here's a complete example of how to use the `useOverlay` composable:

```vue
<script setup lang="ts">
import { ModalA, ModalB, SlideoverA } from '#components'

const overlay = useOverlay()

// Create with default props
const modalA = overlay.create(ModalA, { title: 'Welcome' })
const modalB = overlay.create(ModalB)

const slideoverA = overlay.create(SlideoverA)

const openModalA = () => {
  // Open modalA, but override the title prop
  modalA.open({ title: 'Hello' })
}

const openModalB = async () => {
  // Open modalB, and wait for its result
  const modalBInstance = modalB.open()

  const input = await modalBInstance

  // Pass the result from modalB to the slideover, and open it
  slideoverA.open({ input })
}
</script>

<template>
  <button @click="openModalA">Open Modal</button>
</template>
```

In this example, we're using the `useOverlay` composable to control multiple modals and slideovers.

## Caveats

### Provide / Inject

When opening overlays programmatically (e.g. modals, slideovers, etc), the overlay component can only access injected values from the component containing `B24App` (typically `app.vue` or layout components). This is because overlays are mounted outside of the page context by the `B24App` component.

As such, using `provide()` in pages or parent components isn't supported directly. To pass provided values to overlays, the recommended approach is to use props instead:

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const providedValue = inject('valueProvidedInPage')

const modal = overlay.create(LazyModalExample, {
  props: {
    providedValue,
    otherData: someValue
  }
})
</script>
```

---

# useToast

> A composable for showing toast notifications in your app.

## Usage

Use the auto-imported `useToast` composable to display [Toast](https://bitrix24.github.io/b24ui/raw/docs/components/toast.md) notifications.

```vue
<script setup lang="ts">
const toast = useToast()
</script>
```

- The `useToast` composable uses Nuxt's `useState` to manage the toast state, ensuring reactivity across your application.
- A maximum of 5 toasts are displayed at a time. When adding a new toast that would exceed this limit, the oldest toast is automatically removed.
- When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.

> !WARNING
> Make sure to wrap your app with the [`App`](https://bitrix24.github.io/b24ui/raw/docs/components/app.md) component which uses our [`Toaster`](https://github.com/bitrix24/b24ui/blob/main/src/runtime/components/Toaster.vue){rel="nofollow"} component which uses the [`ToastProvider`](https://reka-ui.com/docs/components/toast#provider){rel="nofollow"} component from Reka UI.

> [!TIP](https://bitrix24.github.io/b24ui/raw/docs/components/toast.md)
> Learn how to customize the appearance and behavior of toasts in the **Toast** component documentation.

## API

`useToast()`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

The `useToast` composable provides methods to manage toast notifications globally.

### add()

`add(toast: Partial<Toast>): Toast`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Adds a new toast notification.

#### Parameters

::field-group
  :::field{required name="toast" required="true" type="Partial<Toast>"}
  A partial `Toast` object with the following properties:
  
    ::::collapsible
      :::::field-group
        ::::::field{name="id" type="string | number"}
        A unique identifier for the toast. If not provided, a timestamp will be used.
        ::::::
      
        ::::::field{name="open" type="boolean"}
        Whether the toast is open. Defaults to `true`.
        ::::::
      
        ::::::field{name="..." type="Toast"}
        Other properties from the `Toast` interface.
        ::::::
      :::::
    ::::
  :::
::

**Returns:** The complete `Toast` object that was added.

```vue
<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your action was completed successfully.',
    color: 'air-primary-success'
  })
}
</script>
```

### update()

`update(id: string | number, toast: Partial<Toast>): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Updates an existing toast notification.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="string | number"}
  The unique identifier of the toast to update.
  :::

  :::field{required name="toast" required="true" type="Partial<Toast>"}
  A partial `Toast` object with the properties to update.
  :::
::

```vue
<script setup lang="ts">
const toast = useToast()

function updateToast(id: string | number) {
  toast.update(id, {
    title: 'Updated Toast',
    description: 'This toast has been updated.'
  })
}
</script>
```

### remove()

`remove(id: string | number): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Removes a toast notification.

#### Parameters

::field-group
  :::field{required name="id" required="true" type="string | number"}
  The unique identifier of the toast to remove.
  :::
::

```vue
<script setup lang="ts">
const toast = useToast()

function removeToast(id: string | number) {
  toast.remove(id)
}
</script>
```

### clear()

`clear(): void`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

Removes all toast notifications.

```vue
<script setup lang="ts">
const toast = useToast()

function clearAllToasts() {
  toast.clear()
}
</script>
```

### `toasts`

`toasts: Ref<Toast[]>`{.shiki,shiki-themes,material-theme-palenight,material-theme-palenight,material-theme-palenight lang="ts-type"}

- Type: `Ref<Toast[]>`
- Description: A reactive array containing all current toast notifications.

---