[{"data":1,"prerenderedAt":1508},["ShallowReactive",2],{"navigation":3,"-docs-components-chat-shimmer-":876,"-docs-components-chat-shimmer--description":1018,"component-meta-B24ChatShimmer":1027,"-docs-components-chat-shimmer--as-description":1080,"component-theme-chatShimmer-f8fAB3nzRWFAPhCZ7pNfZJ9xEBnySmJBtxvIx4E7L-I":1088,"-docs-components-chat-shimmer--text-description":1175,"-docs-components-chat-shimmer--duration-description":1183,"-docs-components-chat-shimmer--spread-description":1191,"component-code-B24ChatShimmer-i0jVGr6ovRvd56xLq9qHImu7C5N8dDCCjxSCZ8Mgsd0-VTl-29VzyLjfs5al0YEhczqb8fvWuSEnmPfOAezugEw":1206,"component-code-B24ChatShimmer-ytICAAnv2_aT-Nr5vW2zeaccifXgWmTyi4LREq0tKXg-PHckPv61HMI2bn_tXEjSjMPIKdLNll8lwmGf2E3rVhY":1300,"component-code-B24ChatShimmer-5g7YBVt1dtCe9LhI-EwK3shYY1J2fLOQNtya__qStnY-PHckPv61HMI2bn_tXEjSjMPIKdLNll8lwmGf2E3rVhY":1404},[4],{"title":5,"path":6,"stem":7,"children":8,"page":34},"Docs","\u002Fdocs","docs",[9,137,730,785],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16,"badge":16},"Get Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,18,35,44,49,69,122],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17,"badge":16},"Introduction",null,"Bitrix24 UI is a comprehensive Vue UI component library (Nuxt optional), offering 100+ accessible, Tailwind CSS components for building modern web applications.",{"title":19,"framework":16,"category":16,"description":16,"badge":16,"shadow":20,"path":21,"stem":22,"children":23,"page":34},"Installation",true,"\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",[24,29],{"title":19,"path":25,"stem":26,"framework":27,"category":16,"description":28,"badge":16},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fnuxt","docs\u002F1.getting-started\u002F2.installation\u002F1.nuxt","nuxt","Learn how to install and configure Bitrix24 UI in your Nuxt application.",{"title":19,"path":30,"stem":31,"framework":32,"category":16,"description":33,"badge":16},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fvue","docs\u002F1.getting-started\u002F2.installation\u002F2.vue","vue","Learn how to install and configure Bitrix24 UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":36,"framework":16,"category":16,"description":16,"badge":16,"shadow":20,"path":37,"stem":38,"children":39,"page":34},"Migration","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002F1.getting-started\u002F3.migration",[40],{"title":36,"path":41,"stem":42,"framework":16,"category":16,"description":43,"badge":16},"\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Fv2","docs\u002F1.getting-started\u002F3.migration\u002F1.v2","A comprehensive guide to migrate your application from Bitrix24 UI v1 to Bitrix24 UI v2.",{"title":45,"path":46,"stem":47,"framework":16,"category":16,"description":48,"badge":16},"Contribution","\u002Fdocs\u002Fgetting-started\u002Fcontribution","docs\u002F1.getting-started\u002F4.contribution","A detailed guide on how to contribute to Bitrix24 UI, including insights on project structure, development workflow, and best practices.",{"title":50,"path":51,"stem":52,"children":53,"page":34},"Theme","\u002Fdocs\u002Fgetting-started\u002Ftheme","docs\u002F1.getting-started\u002F5.theme",[54,59,64],{"title":55,"path":56,"stem":57,"framework":16,"category":16,"description":58,"badge":16},"Design System","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system","docs\u002F1.getting-started\u002F5.theme\u002F1.design-system","Bitrix24 UI's design system uses Tailwind CSS for simple theming and easy customization.",{"title":60,"path":61,"stem":62,"framework":16,"category":16,"description":63,"badge":16},"CSS Variables","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcss-variables","docs\u002F1.getting-started\u002F5.theme\u002F2.css-variables","Bitrix24 UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.",{"title":65,"path":66,"stem":67,"framework":16,"category":16,"description":68,"badge":16},"Components","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents","docs\u002F1.getting-started\u002F5.theme\u002F3.components","Learn how to customize Bitrix24 UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.",{"title":70,"framework":16,"category":16,"description":16,"badge":16,"path":71,"stem":72,"children":73,"page":34},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002F1.getting-started\u002F6.integrations",[74,86,98,112,117],{"title":75,"framework":16,"category":16,"description":16,"badge":16,"shadow":20,"path":76,"stem":77,"children":78,"page":34},"Icons","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons",[79,83],{"title":75,"path":80,"stem":81,"framework":27,"category":16,"description":82,"badge":16},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F1.nuxt","Bitrix24 UI integrates with @bitrix24\u002Fb24icons to access over 1,400+ icons.",{"title":75,"path":84,"stem":85,"framework":32,"category":16,"description":82,"badge":16},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F2.vue",{"title":87,"framework":16,"category":16,"description":16,"badge":16,"shadow":20,"path":88,"stem":89,"children":90,"page":34},"Color Mode","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode",[91,95],{"title":87,"path":92,"stem":93,"framework":27,"category":16,"description":94,"badge":16},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F1.nuxt","Bitrix24 UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":87,"path":96,"stem":97,"framework":32,"category":16,"description":94,"badge":16},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F2.vue",{"title":99,"framework":16,"category":16,"description":16,"badge":16,"shadow":20,"path":100,"stem":101,"children":102,"page":34},"I18n","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n",[103,109],{"title":104,"path":105,"stem":106,"framework":27,"category":107,"description":108,"badge":16},"Internationalization (i18n)","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F1.nuxt","integrations","Bitrix24 UI supports 19 locales and multi-directional (LTR\u002FRTL) internationalization.",{"title":104,"path":110,"stem":111,"framework":32,"category":16,"description":108,"badge":16},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F2.vue",{"title":113,"path":114,"stem":115,"framework":27,"category":16,"description":116,"badge":16},"Content","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcontent","docs\u002F1.getting-started\u002F6.integrations\u002F5.content","Bitrix24 UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.",{"title":118,"path":119,"stem":120,"framework":32,"category":16,"description":121,"badge":16},"SSR","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fssr","docs\u002F1.getting-started\u002F6.integrations\u002F6.ssr","Bitrix24 UI has first-party support for Vue SSR. This guide will help you have it fully enabled.",{"title":123,"framework":16,"category":16,"description":16,"badge":16,"path":124,"stem":125,"children":126,"page":34},"Agents","\u002Fdocs\u002Fgetting-started\u002Fai","docs\u002F1.getting-started\u002F7.ai",[127,132],{"title":128,"path":129,"stem":130,"framework":16,"category":16,"description":131,"badge":16},"LLMs.txt","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fllms-txt","docs\u002F1.getting-started\u002F7.ai\u002F2.llms-txt","How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Bitrix24 UI components, theming, and best practices.",{"title":133,"path":134,"stem":135,"framework":16,"category":16,"description":136,"badge":16},"Skills","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fskills","docs\u002F1.getting-started\u002F7.ai\u002F3.skills","Install Bitrix24 UI skills to give AI coding agents deep knowledge of components, theming, and best practices.",{"title":65,"framework":16,"category":16,"description":16,"badge":16,"path":138,"stem":139,"children":140,"page":34},"\u002Fdocs\u002Fcomponents","docs\u002F2.components",[141,147,153,158,164,169,174,179,184,190,195,200,205,211,216,221,226,231,236,242,247,253,259,264,269,274,280,285,290,295,300,305,310,315,321,326,331,336,342,347,353,358,363,368,373,378,383,388,393,398,403,408,413,419,424,429,434,439,444,449,454,459,464,469,474,479,484,489,494,499,504,509,514,519,524,529,535,540,545,550,556,561,566,571,576,581,586,591,596,601,606,611,616,621,626,631,636,641,646,651,656,661,667,672,677,682,686,691,696,701,706,710,715,720,725],{"title":142,"path":143,"stem":144,"framework":16,"category":145,"description":146,"badge":16},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002Faccordion","data","This is a stacked set of collapsible panels",{"title":148,"path":149,"stem":150,"framework":16,"category":151,"description":152,"badge":16},"Advice","\u002Fdocs\u002Fcomponents\u002Fadvice","docs\u002F2.components\u002Fadvice","element","A couple of lines of text and an avatar",{"title":154,"path":155,"stem":156,"framework":16,"category":151,"description":157,"badge":16},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002F2.components\u002Falert","An alert designed to capture the user's attention.",{"title":159,"path":160,"stem":161,"framework":16,"category":162,"description":163,"badge":16},"App","\u002Fdocs\u002Fcomponents\u002Fapp","docs\u002F2.components\u002Fapp","layout","Encases your app to deliver global settings and additional features.",{"title":165,"path":166,"stem":167,"framework":16,"category":151,"description":168,"badge":16},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002Favatar","An img element that includes fallback and supports Nuxt Image.",{"title":170,"path":171,"stem":172,"framework":16,"category":151,"description":173,"badge":16},"AvatarGroup","\u002Fdocs\u002Fcomponents\u002Favatar-group","docs\u002F2.components\u002Favatar-group","Pile multiple avatars into a single group.",{"title":175,"path":176,"stem":177,"framework":16,"category":151,"description":178,"badge":16},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002Fbadge","A short descriptor for a status or category.",{"title":180,"path":181,"stem":182,"framework":16,"category":151,"description":183,"badge":16},"Banner","\u002Fdocs\u002Fcomponents\u002Fbanner","docs\u002F2.components\u002Fbanner","Top banner for important user messages.",{"title":185,"path":186,"stem":187,"framework":16,"category":188,"description":189,"badge":16},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002F2.components\u002Fbreadcrumb","navigation","A breadcrumb navigation component.",{"title":191,"path":192,"stem":193,"framework":16,"category":151,"description":194,"badge":16},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002Fbutton","A button capable of linking or performing an action.",{"title":196,"path":197,"stem":198,"framework":16,"category":151,"description":199,"badge":16},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002F2.components\u002Fcalendar","A calendar tool for choosing individual dates, multiple dates, or date spans.",{"title":201,"path":202,"stem":203,"framework":16,"category":151,"description":204,"badge":16},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002Fcard","Render the content within a card component comprising a header, body, and footer section.",{"title":206,"path":207,"stem":208,"framework":16,"category":209,"description":210,"badge":16},"Chat","\u002Fdocs\u002Fcomponents\u002Fchat","docs\u002F2.components\u002Fchat","chat","Develop AI-powered chat interfaces with streaming responses, reasoning capabilities, and tool calling.",{"title":212,"path":213,"stem":214,"framework":16,"category":209,"description":215,"badge":16},"ChatMessage","\u002Fdocs\u002Fcomponents\u002Fchat-message","docs\u002F2.components\u002Fchat-message","A chat message component with icon, avatar, and action buttons.",{"title":217,"path":218,"stem":219,"framework":16,"category":209,"description":220,"badge":16},"ChatMessages","\u002Fdocs\u002Fcomponents\u002Fchat-messages","docs\u002F2.components\u002Fchat-messages","A chat messages list component designed for seamless integration with the Vercel AI SDK.",{"title":222,"path":223,"stem":224,"framework":16,"category":209,"description":225,"badge":16},"ChatPalette","\u002Fdocs\u002Fcomponents\u002Fchat-palette","docs\u002F2.components\u002Fchat-palette","A chat interface component designed to be displayed in a modal overlay.",{"title":227,"path":228,"stem":229,"framework":16,"category":209,"description":230,"badge":16},"ChatPrompt","\u002Fdocs\u002Fcomponents\u002Fchat-prompt","docs\u002F2.components\u002Fchat-prompt","An enhanced Textarea component optimized for prompt submission in AI chat interfaces.",{"title":232,"path":233,"stem":234,"framework":16,"category":209,"description":235,"badge":16},"ChatPromptSubmit","\u002Fdocs\u002Fcomponents\u002Fchat-prompt-submit","docs\u002F2.components\u002Fchat-prompt-submit","A chat prompt submission button with automatic status handling.",{"title":237,"path":238,"stem":239,"framework":16,"category":209,"description":240,"badge":241},"ChatReasoning","\u002Fdocs\u002Fcomponents\u002Fchat-reasoning","docs\u002F2.components\u002Fchat-reasoning","An expandable panel that shows the AI's internal reasoning steps.","Soon",{"title":243,"path":244,"stem":245,"framework":16,"category":209,"description":246,"badge":241},"ChatShimmer","\u002Fdocs\u002Fcomponents\u002Fchat-shimmer","docs\u002F2.components\u002Fchat-shimmer","Apply a shimmer loading effect to text.",{"title":248,"path":249,"stem":250,"framework":16,"category":209,"description":251,"badge":252},"ChatTool","\u002Fdocs\u002Fcomponents\u002Fchat-tool","docs\u002F2.components\u002Fchat-tool","An expandable section that indicates whether an AI tool has been called and its execution state.","New",{"title":254,"path":255,"stem":256,"framework":16,"category":257,"description":258,"badge":16},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002Fcheckbox","form","A toggle input for marking as checked or unchecked.",{"title":260,"path":261,"stem":262,"framework":16,"category":257,"description":263,"badge":16},"CheckboxGroup","\u002Fdocs\u002Fcomponents\u002Fcheckbox-group","docs\u002F2.components\u002Fcheckbox-group","Multi-select checklist using button controls.",{"title":265,"path":266,"stem":267,"framework":16,"category":151,"description":268,"badge":16},"Chip","\u002Fdocs\u002Fcomponents\u002Fchip","docs\u002F2.components\u002Fchip","An indicator that shows either a number or a state.",{"title":270,"path":271,"stem":272,"framework":16,"category":151,"description":273,"badge":16},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002F2.components\u002Fcollapsible","A collapsible component for showing or hiding its content.",{"title":275,"path":276,"stem":277,"framework":16,"category":278,"description":279,"badge":16},"ColorModeAvatar","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-avatar","docs\u002F2.components\u002Fcolor-mode-avatar","color-mode","An Avatar that automatically switches its image based on the current theme (light\u002Fdark).",{"title":281,"path":282,"stem":283,"framework":16,"category":278,"description":284,"badge":16},"ColorModeButton","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-button","docs\u002F2.components\u002Fcolor-mode-button","A button to toggle between light and dark themes.",{"title":286,"path":287,"stem":288,"framework":16,"category":278,"description":289,"badge":16},"ColorModeImage","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-image","docs\u002F2.components\u002Fcolor-mode-image","An image element with a different source for light and dark mode.",{"title":291,"path":292,"stem":293,"framework":16,"category":278,"description":294,"badge":16},"ColorModeSelect","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-select","docs\u002F2.components\u002Fcolor-mode-select","A Select to switch between system, dark & light mode.",{"title":296,"path":297,"stem":298,"framework":16,"category":278,"description":299,"badge":16},"ColorModeSwitch","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-switch","docs\u002F2.components\u002Fcolor-mode-switch","A switch to toggle between light and dark mode.",{"title":301,"path":302,"stem":303,"framework":16,"category":257,"description":304,"badge":16},"ColorPicker","\u002Fdocs\u002Fcomponents\u002Fcolor-picker","docs\u002F2.components\u002Fcolor-picker","A color picker component.",{"title":306,"path":307,"stem":308,"framework":16,"category":188,"description":309,"badge":16},"CommandPalette","\u002Fdocs\u002Fcomponents\u002Fcommand-palette","docs\u002F2.components\u002Fcommand-palette","A searchable command palette powered by Fuse.js for fast, fuzzy text search.",{"title":311,"path":312,"stem":313,"framework":16,"category":162,"description":314,"badge":16},"Container","\u002Fdocs\u002Fcomponents\u002Fcontainer","docs\u002F2.components\u002Fcontainer","A box for centering and setting a maximum width for your content.",{"title":316,"path":317,"stem":318,"framework":27,"category":319,"description":320,"badge":16},"ContentSearch","\u002Fdocs\u002Fcomponents\u002Fcontent-search","docs\u002F2.components\u002Fcontent-search","content","A ready-to-use Command Palette component for your documentation.",{"title":322,"path":323,"stem":324,"framework":27,"category":319,"description":325,"badge":16},"ContentSearchButton","\u002Fdocs\u002Fcomponents\u002Fcontent-search-button","docs\u002F2.components\u002Fcontent-search-button","A pre-styled button that opens the content search modal.",{"title":327,"path":328,"stem":329,"framework":27,"category":319,"description":330,"badge":16},"ContentSurround","\u002Fdocs\u002Fcomponents\u002Fcontent-surround","docs\u002F2.components\u002Fcontent-surround"," A pair of \"Previous\" and \"Next\" buttons for sequential page navigation.",{"title":332,"path":333,"stem":334,"framework":27,"category":319,"description":335,"badge":16},"ContentToc","\u002Fdocs\u002Fcomponents\u002Fcontent-toc","docs\u002F2.components\u002Fcontent-toc","A sticky table of contents component with dynamic active section highlighting.",{"title":337,"path":338,"stem":339,"framework":16,"category":340,"description":341,"badge":16},"ContextMenu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002Fcontext-menu","overlay","A pop-up menu that appears upon right-clicking an element to present relevant actions.",{"title":343,"path":344,"stem":345,"framework":16,"category":151,"description":346,"badge":16},"Countdown","\u002Fdocs\u002Fcomponents\u002Fcountdown","docs\u002F2.components\u002Fcountdown","Countdown with options control.",{"title":348,"path":349,"stem":350,"framework":16,"category":351,"description":352,"badge":16},"DashboardGroup","\u002Fdocs\u002Fcomponents\u002Fdashboard-group","docs\u002F2.components\u002Fdashboard-group","dashboard","A fixed-layout dashboard container with sidebar state management and persistent UI state.",{"title":354,"path":355,"stem":356,"framework":16,"category":351,"description":357,"badge":16},"DashboardNavbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-navbar","docs\u002F2.components\u002Fdashboard-navbar","A responsive navigation bar for dashboards.",{"title":359,"path":360,"stem":361,"framework":16,"category":351,"description":362,"badge":16},"DashboardPanel","\u002Fdocs\u002Fcomponents\u002Fdashboard-panel","docs\u002F2.components\u002Fdashboard-panel","A resizable panel component for dashboards.",{"title":364,"path":365,"stem":366,"framework":16,"category":351,"description":367,"badge":16},"DashboardResizeHandle","\u002Fdocs\u002Fcomponents\u002Fdashboard-resize-handle","docs\u002F2.components\u002Fdashboard-resize-handle","A resize handle for sidebars or panels.",{"title":369,"path":370,"stem":371,"framework":16,"category":351,"description":372,"badge":16},"DashboardSearch","\u002Fdocs\u002Fcomponents\u002Fdashboard-search","docs\u002F2.components\u002Fdashboard-search","A ready-to-use CommandPalette component for your dashboard.",{"title":374,"path":375,"stem":376,"framework":16,"category":351,"description":377,"badge":16},"DashboardSearchButton","\u002Fdocs\u002Fcomponents\u002Fdashboard-search-button","docs\u002F2.components\u002Fdashboard-search-button","A pre-styled button that opens the DashboardSearch modal.",{"title":379,"path":380,"stem":381,"framework":16,"category":351,"description":382,"badge":16},"DashboardSidebar","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar","docs\u002F2.components\u002Fdashboard-sidebar","A resizable and collapsible sidebar component for dashboards.",{"title":384,"path":385,"stem":386,"framework":16,"category":351,"description":387,"badge":16},"DashboardSidebarCollapse","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-collapse","docs\u002F2.components\u002Fdashboard-sidebar-collapse","A desktop toggle button that collapses the sidebar to provide more space for content.",{"title":389,"path":390,"stem":391,"framework":16,"category":351,"description":392,"badge":16},"DashboardSidebarToggle","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-toggle","docs\u002F2.components\u002Fdashboard-sidebar-toggle","A mobile menu button that shows or hides the sidebar navigation.",{"title":394,"path":395,"stem":396,"framework":16,"category":351,"description":397,"badge":16},"DashboardToolbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-toolbar","docs\u002F2.components\u002Fdashboard-toolbar","A secondary action bar positioned beneath the main navigation in dashboards.",{"title":399,"path":400,"stem":401,"framework":16,"category":145,"description":402,"badge":16},"DescriptionList","\u002Fdocs\u002Fcomponents\u002Fdescription-list","docs\u002F2.components\u002Fdescription-list","For instances requiring the conversion of a table row into its own table to enhance page completeness.",{"title":404,"path":405,"stem":406,"framework":16,"category":340,"description":407,"badge":16},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002Fdrawer","A toggleable drawer with fluid enter\u002Fexit transitions.",{"title":409,"path":410,"stem":411,"framework":16,"category":340,"description":412,"badge":16},"DropdownMenu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002Fdropdown-menu","A contextual menu for actions triggered by clicking an element.",{"title":414,"path":415,"stem":416,"framework":16,"category":417,"description":418,"badge":16},"Editor","\u002Fdocs\u002Fcomponents\u002Feditor","docs\u002F2.components\u002Feditor","editor","A rich text editor built on TipTap supporting markdown, HTML, and JSON content formats.",{"title":420,"path":421,"stem":422,"framework":16,"category":417,"description":423,"badge":16},"EditorDragHandle","\u002Fdocs\u002Fcomponents\u002Feditor-drag-handle","docs\u002F2.components\u002Feditor-drag-handle","A draggable handle component for reordering and selecting editor blocks.",{"title":425,"path":426,"stem":427,"framework":16,"category":417,"description":428,"badge":16},"EditorEmojiMenu","\u002Fdocs\u002Fcomponents\u002Feditor-emoji-menu","docs\u002F2.components\u002Feditor-emoji-menu","An emoji suggestion menu that automatically appears upon typing the colon : character in the editor.",{"title":430,"path":431,"stem":432,"framework":16,"category":417,"description":433,"badge":16},"EditorMentionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-mention-menu","docs\u002F2.components\u002Feditor-mention-menu","A mention menu that displays user suggestions when a trigger character is typed in the editor.",{"title":435,"path":436,"stem":437,"framework":16,"category":417,"description":438,"badge":16},"EditorSuggestionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-suggestion-menu","docs\u002F2.components\u002Feditor-suggestion-menu","A slash command menu that displays formatting and action suggestions when typing \u002F.",{"title":440,"path":441,"stem":442,"framework":16,"category":417,"description":443,"badge":16},"EditorToolbar","\u002Fdocs\u002Fcomponents\u002Feditor-toolbar","docs\u002F2.components\u002Feditor-toolbar","A customizable toolbar for editor actions with multiple display modes: fixed, bubble, or floating.",{"title":445,"path":446,"stem":447,"framework":16,"category":145,"description":448,"badge":16},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002F2.components\u002Fempty","An empty state component.",{"title":450,"path":451,"stem":452,"framework":16,"category":162,"description":453,"badge":16},"Error","\u002Fdocs\u002Fcomponents\u002Ferror","docs\u002F2.components\u002Ferror","A pre-built error component with NuxtError support.",{"title":455,"path":456,"stem":457,"framework":16,"category":151,"description":458,"badge":16},"FieldGroup","\u002Fdocs\u002Fcomponents\u002Ffield-group","docs\u002F2.components\u002Ffield-group","Organize several button-like elements into a group.",{"title":460,"path":461,"stem":462,"framework":16,"category":257,"description":463,"badge":16},"FileUpload","\u002Fdocs\u002Fcomponents\u002Ffile-upload","docs\u002F2.components\u002Ffile-upload","A file upload input component.",{"title":465,"path":466,"stem":467,"framework":16,"category":162,"description":468,"badge":16},"Footer","\u002Fdocs\u002Fcomponents\u002Ffooter","docs\u002F2.components\u002Ffooter","A responsive footer for displaying copyright, links, and additional information.",{"title":470,"path":471,"stem":472,"framework":16,"category":188,"description":473,"badge":16},"FooterColumns","\u002Fdocs\u002Fcomponents\u002Ffooter-columns","docs\u002F2.components\u002Ffooter-columns","A set of link columns to organize navigation and information in the footer.",{"title":475,"path":476,"stem":477,"framework":16,"category":257,"description":478,"badge":16},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002F2.components\u002Fform","A form component designed for validation and handling submissions.",{"title":480,"path":481,"stem":482,"framework":16,"category":257,"description":483,"badge":16},"FormField","\u002Fdocs\u002Fcomponents\u002Fform-field","docs\u002F2.components\u002Fform-field","A container for form elements with built-in validation and error management.",{"title":485,"path":486,"stem":487,"framework":16,"category":162,"description":488,"badge":16},"Header","\u002Fdocs\u002Fcomponents\u002Fheader","docs\u002F2.components\u002Fheader","A header that adapts its structure and content to different screen sizes.",{"title":490,"path":491,"stem":492,"framework":16,"category":257,"description":493,"badge":16},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002Finput","An input box designed for text entry.",{"title":495,"path":496,"stem":497,"framework":16,"category":257,"description":498,"badge":16},"InputDate","\u002Fdocs\u002Fcomponents\u002Finput-date","docs\u002F2.components\u002Finput-date","A date selection input field.",{"title":500,"path":501,"stem":502,"framework":16,"category":257,"description":503,"badge":16},"InputMenu","\u002Fdocs\u002Fcomponents\u002Finput-menu","docs\u002F2.components\u002Finput-menu","An input field with live autocomplete suggestions.",{"title":505,"path":506,"stem":507,"framework":16,"category":257,"description":508,"badge":16},"InputNumber","\u002Fdocs\u002Fcomponents\u002Finput-number","docs\u002F2.components\u002Finput-number","Provide numerical input with a flexible range setting.",{"title":510,"path":511,"stem":512,"framework":16,"category":257,"description":513,"badge":16},"InputTags","\u002Fdocs\u002Fcomponents\u002Finput-tags","docs\u002F2.components\u002Finput-tags","A tags input component with interactive tag elements.",{"title":515,"path":516,"stem":517,"framework":16,"category":257,"description":518,"badge":16},"InputTime","\u002Fdocs\u002Fcomponents\u002Finput-time","docs\u002F2.components\u002Finput-time","A time selection input field.",{"title":520,"path":521,"stem":522,"framework":16,"category":151,"description":523,"badge":16},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002F2.components\u002Fkbd","A kbd element for indicating a keyboard input.",{"title":525,"path":526,"stem":527,"framework":16,"category":188,"description":528,"badge":16},"Link","\u002Fdocs\u002Fcomponents\u002Flink","docs\u002F2.components\u002Flink","A wrapper around \u003CNuxtLink> with extra props.",{"title":530,"path":531,"stem":532,"framework":16,"category":533,"description":534,"badge":16},"LocaleSelect","\u002Fdocs\u002Fcomponents\u002Flocale-select","docs\u002F2.components\u002Flocale-select","i18n","A Select to switch between locales.",{"title":536,"path":537,"stem":538,"framework":16,"category":162,"description":539,"badge":16},"Main","\u002Fdocs\u002Fcomponents\u002Fmain","docs\u002F2.components\u002Fmain","A main content element that expands to fill the full viewport height.",{"title":541,"path":542,"stem":543,"framework":16,"category":340,"description":544,"badge":16},"Modal","\u002Fdocs\u002Fcomponents\u002Fmodal","docs\u002F2.components\u002Fmodal","A popup window for showing messages or gathering user input.",{"title":546,"path":547,"stem":548,"framework":16,"category":188,"description":549,"badge":16},"NavigationMenu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002F2.components\u002Fnavigation-menu","A link list that can be arranged in horizontal or vertical orientation.",{"title":551,"path":552,"stem":553,"framework":16,"category":554,"description":555,"badge":16},"Page","\u002Fdocs\u002Fcomponents\u002Fpage","docs\u002F2.components\u002Fpage","page","A page grid divided into three columns: left sidebar, main content area, and right sidebar.",{"title":557,"path":558,"stem":559,"framework":16,"category":554,"description":560,"badge":16},"PageAside","\u002Fdocs\u002Fcomponents\u002Fpage-aside","docs\u002F2.components\u002Fpage-aside","A sticky navigation aside.",{"title":562,"path":563,"stem":564,"framework":16,"category":554,"description":565,"badge":16},"PageBody","\u002Fdocs\u002Fcomponents\u002Fpage-body","docs\u002F2.components\u002Fpage-body","A container for the main content of the page.",{"title":567,"path":568,"stem":569,"framework":16,"category":554,"description":570,"badge":16},"PageCard","\u002Fdocs\u002Fcomponents\u002Fpage-card","docs\u002F2.components\u002Fpage-card","A pre-styled card component featuring a title, description, and optional link.",{"title":572,"path":573,"stem":574,"framework":16,"category":554,"description":575,"badge":16},"PageColumns","\u002Fdocs\u002Fcomponents\u002Fpage-columns","docs\u002F2.components\u002Fpage-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":577,"path":578,"stem":579,"framework":16,"category":554,"description":580,"badge":16},"PageFeature","\u002Fdocs\u002Fcomponents\u002Fpage-feature","docs\u002F2.components\u002Fpage-feature","A feature showcase component to present your app",{"title":582,"path":583,"stem":584,"framework":16,"category":554,"description":585,"badge":16},"PageGrid","\u002Fdocs\u002Fcomponents\u002Fpage-grid","docs\u002F2.components\u002Fpage-grid","A responsive grid system for creating flexible content layouts.",{"title":587,"path":588,"stem":589,"framework":16,"category":554,"description":590,"badge":16},"PageHeader","\u002Fdocs\u002Fcomponents\u002Fpage-header","docs\u002F2.components\u002Fpage-header","A responsive page header.",{"title":592,"path":593,"stem":594,"framework":16,"category":554,"description":595,"badge":16},"PageLinks","\u002Fdocs\u002Fcomponents\u002Fpage-links","docs\u002F2.components\u002Fpage-links","A list of links to display on the page.",{"title":597,"path":598,"stem":599,"framework":16,"category":554,"description":600,"badge":16},"PageList","\u002Fdocs\u002Fcomponents\u002Fpage-list","docs\u002F2.components\u002Fpage-list","A vertical list layout for stacking content items.",{"title":602,"path":603,"stem":604,"framework":16,"category":554,"description":605,"badge":16},"PageSection","\u002Fdocs\u002Fcomponents\u002Fpage-section","docs\u002F2.components\u002Fpage-section","A responsive section.",{"title":607,"path":608,"stem":609,"framework":16,"category":188,"description":610,"badge":16},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002F2.components\u002Fpagination","A navigation component with buttons or links for pagination.",{"title":612,"path":613,"stem":614,"framework":16,"category":257,"description":615,"badge":16},"PinInput","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002F2.components\u002Fpin-input","A PIN code input component.",{"title":617,"path":618,"stem":619,"framework":16,"category":340,"description":620,"badge":16},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002Fpopover","A non-modal popup window for showing messages or gathering user input.",{"title":622,"path":623,"stem":624,"framework":16,"category":151,"description":625,"badge":16},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002Fprogress","A progress bar displaying task completion status.",{"title":627,"path":628,"stem":629,"framework":16,"category":257,"description":630,"badge":16},"RadioGroup","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002Fradio-group","A collection of radio buttons to pick a single choice from several options.",{"title":632,"path":633,"stem":634,"framework":16,"category":257,"description":635,"badge":16},"Range","\u002Fdocs\u002Fcomponents\u002Frange","docs\u002F2.components\u002Frange","A control for selecting a numeric value within a specified range.",{"title":637,"path":638,"stem":639,"framework":16,"category":145,"description":640,"badge":16},"ScrollArea","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002F2.components\u002Fscroll-area","A flexible scrollable viewport component that implements virtualization to handle large datasets with optimal performance.",{"title":642,"path":643,"stem":644,"framework":16,"category":257,"description":645,"badge":16},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002Fselect","A selection field to pick from various options.",{"title":647,"path":648,"stem":649,"framework":16,"category":257,"description":650,"badge":16},"SelectMenu","\u002Fdocs\u002Fcomponents\u002Fselect-menu","docs\u002F2.components\u002Fselect-menu","A refined and searchable selection component.",{"title":652,"path":653,"stem":654,"framework":16,"category":151,"description":655,"badge":16},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002Fseparator","Divides content in a horizontal or vertical manner.",{"title":657,"path":658,"stem":659,"framework":16,"category":162,"description":660,"badge":241},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002Fsidebar","A collapsible sidebar with multiple visual style options.",{"title":662,"path":663,"stem":664,"framework":16,"category":665,"description":666,"badge":16},"SidebarLayout","\u002Fdocs\u002Fcomponents\u002Fsidebar-layout","docs\u002F2.components\u002Fsidebar-layout","deprecated","You incorporate a sidebar in the slider and CRM entity tab embedding. Overall, it's stylish, trendy, and youthful",{"title":668,"path":669,"stem":670,"framework":16,"category":151,"description":671,"badge":16},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002Fskeleton","A toggle control for switching between two states.",{"title":673,"path":674,"stem":675,"framework":16,"category":340,"description":676,"badge":16},"Slideover","\u002Fdocs\u002Fcomponents\u002Fslideover","docs\u002F2.components\u002Fslideover","A dialog that slides in from any side of the screen.",{"title":678,"path":679,"stem":680,"framework":16,"category":188,"description":681,"badge":16},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002F2.components\u002Fstepper","A stepper component to visualize progress in a multistep workflow.",{"title":683,"path":684,"stem":685,"framework":16,"category":257,"description":671,"badge":16},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002Fswitch",{"title":687,"path":688,"stem":689,"framework":16,"category":145,"description":690,"badge":16},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002F2.components\u002Ftable","A responsive data table component.",{"title":692,"path":693,"stem":694,"framework":16,"category":145,"description":695,"badge":16},"TableWrapper","\u002Fdocs\u002Fcomponents\u002Ftable-wrapper","docs\u002F2.components\u002Ftable-wrapper","Wrapper for displaying a html table",{"title":697,"path":698,"stem":699,"framework":16,"category":188,"description":700,"badge":16},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002Ftabs","A collection of tab panels shown individually.",{"title":702,"path":703,"stem":704,"framework":16,"category":257,"description":705,"badge":16},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002F2.components\u002Ftextarea","A textarea for entering multi-line text.",{"title":50,"path":707,"stem":708,"framework":16,"category":162,"description":709,"badge":16},"\u002Fdocs\u002Fcomponents\u002Ftheme","docs\u002F2.components\u002Ftheme","A headless component for theming its child components.",{"title":711,"path":712,"stem":713,"framework":16,"category":145,"description":714,"badge":16},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002F2.components\u002Ftimeline","A component for displaying a chronological sequence of events, with dates, titles, and supporting icons or avatars.",{"title":716,"path":717,"stem":718,"framework":16,"category":340,"description":719,"badge":16},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002F2.components\u002Ftoast","A short message to offer information or feedback to the user.",{"title":721,"path":722,"stem":723,"framework":16,"category":340,"description":724,"badge":16},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002Ftooltip","A small window that shows details when you move your mouse over an item.",{"title":726,"path":727,"stem":728,"framework":16,"category":145,"description":729,"badge":16},"User","\u002Fdocs\u002Fcomponents\u002Fuser","docs\u002F2.components\u002Fuser","A component to display user details, including their name, bio, and profile picture.",{"title":731,"framework":16,"category":16,"description":16,"badge":16,"path":732,"stem":733,"children":734,"page":34},"Composables","\u002Fdocs\u002Fcomposables","docs\u002F3.composables",[735,740,745,750,755,760,765,770,775,780],{"title":736,"path":737,"stem":738,"framework":16,"category":16,"description":739,"badge":16},"defineLocale","\u002Fdocs\u002Fcomposables\u002Fdefine-locale","docs\u002F3.composables\u002Fdefine-locale","A utility to create a custom locale configuration for your application.",{"title":741,"path":742,"stem":743,"framework":16,"category":16,"description":744,"badge":16},"defineShortcuts","\u002Fdocs\u002Fcomposables\u002Fdefine-shortcuts","docs\u002F3.composables\u002Fdefine-shortcuts","A composable to assign keyboard shortcuts in your app.",{"title":746,"path":747,"stem":748,"framework":16,"category":16,"description":749,"badge":16},"extendLocale","\u002Fdocs\u002Fcomposables\u002Fextend-locale","docs\u002F3.composables\u002Fextend-locale","A utility to extend an existing locale with custom translation overrides.",{"title":751,"path":752,"stem":753,"framework":16,"category":16,"description":754,"badge":16},"extractShortcuts","\u002Fdocs\u002Fcomposables\u002Fextract-shortcuts","docs\u002F3.composables\u002Fextract-shortcuts","A keyboard shortcut extractor for menu items.",{"title":756,"path":757,"stem":758,"framework":16,"category":16,"description":759,"badge":16},"useConfetti","\u002Fdocs\u002Fcomposables\u002Fuse-confetti","docs\u002F3.composables\u002Fuse-confetti","Performant confetti animation in the browser",{"title":761,"path":762,"stem":763,"framework":16,"category":16,"description":764,"badge":252},"useDevice","\u002Fdocs\u002Fcomposables\u002Fuse-device","docs\u002F3.composables\u002Fuse-device","Detect the current platform (Bitrix24 mobile\u002Fdesktop app or web) and screen size based on Tailwind breakpoints.",{"title":766,"path":767,"stem":768,"framework":16,"category":16,"description":769,"badge":16},"useOverlay","\u002Fdocs\u002Fcomposables\u002Fuse-overlay","docs\u002F3.composables\u002Fuse-overlay","A composable to programmatically control overlays in App.",{"title":771,"path":772,"stem":773,"framework":16,"category":16,"description":774,"badge":241},"useScrollShadow","\u002Fdocs\u002Fcomposables\u002Fuse-scroll-shadow","docs\u002F3.composables\u002Fuse-scroll-shadow","A composable function to apply scroll shadow effects to any scrollable element.",{"title":776,"path":777,"stem":778,"framework":16,"category":16,"description":779,"badge":16},"useSpeechRecognition","\u002Fdocs\u002Fcomposables\u002Fuse-speech-recognition","docs\u002F3.composables\u002Fuse-speech-recognition","A speech recognition composable using the Web Speech API.",{"title":781,"path":782,"stem":783,"framework":16,"category":16,"description":784,"badge":16},"useToast","\u002Fdocs\u002Fcomposables\u002Fuse-toast","docs\u002F3.composables\u002Fuse-toast","A composable for showing toast notifications in your app.",{"title":786,"path":787,"stem":788,"children":789,"framework":16,"category":16,"description":16,"badge":16},"Typography","\u002Fdocs\u002Ftypography","docs\u002F4.typography\u002F1.index",[790,792,797,802,807,812,817,821,826,830,835,840,845,850,854,859,863,867,872],{"title":15,"path":787,"stem":788,"framework":16,"category":16,"description":791,"badge":16},"Ready-to-use typography styles and utilities for a professional look.",{"title":793,"path":794,"stem":795,"framework":16,"category":16,"description":796,"badge":16},"Headers and text","\u002Fdocs\u002Ftypography\u002Fheaders-and-text","docs\u002F4.typography\u002F2.headers-and-text","Easy-to-read text with carefully designed headings, formatted content, and clear links.",{"title":798,"path":799,"stem":800,"framework":16,"category":16,"description":801,"badge":16},"Lists and tables","\u002Fdocs\u002Ftypography\u002Flists-and-tables","docs\u002F4.typography\u002F3.lists-and-tables","Structure data effectively using designed lists and adaptive tables for better readability.",{"title":803,"path":804,"stem":805,"framework":16,"category":16,"description":806,"badge":16},"Images and embeds","\u002Fdocs\u002Ftypography\u002Fimages-and-embeds","docs\u002F4.typography\u002F4.images-and-embeds","Flexible visuals and interactive content to make your documentation clearer and more engaging.",{"title":808,"path":809,"stem":810,"framework":16,"category":16,"description":811,"badge":16},"Code","\u002Fdocs\u002Ftypography\u002Fcode","docs\u002F4.typography\u002F5.code","Render code snippets and highlighted code blocks, complete with clipboard copying.",{"title":142,"path":813,"stem":814,"framework":16,"category":815,"description":816,"badge":16},"\u002Fdocs\u002Ftypography\u002Faccordion","docs\u002F4.typography\u002Faccordion","components","Add interactive toggles for a more structured content presentation.",{"title":175,"path":818,"stem":819,"framework":16,"category":815,"description":820,"badge":16},"\u002Fdocs\u002Ftypography\u002Fbadge","docs\u002F4.typography\u002Fbadge","Present versioning information, status labels, and relevant tags within your material.",{"title":822,"path":823,"stem":824,"framework":16,"category":815,"description":825,"badge":16},"Callout","\u002Fdocs\u002Ftypography\u002Fcallout","docs\u002F4.typography\u002Fcallout","Organize critical content for easy scanning with colored panels and intuitive symbols.",{"title":201,"path":827,"stem":828,"framework":16,"category":815,"description":829,"badge":16},"\u002Fdocs\u002Ftypography\u002Fcard","docs\u002F4.typography\u002Fcard","Develop prominent content areas with integrated navigation options.",{"title":831,"path":832,"stem":833,"framework":16,"category":815,"description":834,"badge":16},"CardGroup","\u002Fdocs\u002Ftypography\u002Fcard-group","docs\u002F4.typography\u002Fcard-group","Arrange content cards into flexible grids to enhance structure and readability.",{"title":836,"path":837,"stem":838,"framework":16,"category":815,"description":839,"badge":16},"CodeCollapse","\u002Fdocs\u002Ftypography\u002Fcode-collapse","docs\u002F4.typography\u002Fcode-collapse","Add toggle functionality for lengthy code sections to optimize layout.",{"title":841,"path":842,"stem":843,"framework":16,"category":815,"description":844,"badge":16},"CodeGroup","\u002Fdocs\u002Ftypography\u002Fcode-group","docs\u002F4.typography\u002Fcode-group","Use a tabbed layout to present multiple code snippets for a clearer view.",{"title":846,"path":847,"stem":848,"framework":16,"category":815,"description":849,"badge":16},"CodePreview","\u002Fdocs\u002Ftypography\u002Fcode-preview","docs\u002F4.typography\u002Fcode-preview","For clearer docs, pair code snippets with their visual output and source.",{"title":270,"path":851,"stem":852,"framework":16,"category":815,"description":853,"badge":16},"\u002Fdocs\u002Ftypography\u002Fcollapsible","docs\u002F4.typography\u002Fcollapsible","Smooth content toggle with expand and collapse effects.",{"title":855,"path":856,"stem":857,"framework":16,"category":815,"description":858,"badge":16},"Field","\u002Fdocs\u002Ftypography\u002Ffield","docs\u002F4.typography\u002Ffield","Provide clear and comprehensive documentation for the API configurable elements.",{"title":455,"path":860,"stem":861,"framework":16,"category":815,"description":862,"badge":16},"\u002Fdocs\u002Ftypography\u002Ffield-group","docs\u002F4.typography\u002Ffield-group","Combine logically connected fields to create exhaustive API documentation.",{"title":520,"path":864,"stem":865,"framework":16,"category":815,"description":866,"badge":16},"\u002Fdocs\u002Ftypography\u002Fkbd","docs\u002F4.typography\u002Fkbd","Show all available hotkeys with their properly formatted keys.",{"title":868,"path":869,"stem":870,"framework":16,"category":815,"description":871,"badge":16},"Steps","\u002Fdocs\u002Ftypography\u002Fsteps","docs\u002F4.typography\u002Fsteps","Turn your headings into clear, sequential instructions.",{"title":697,"path":873,"stem":874,"framework":16,"category":815,"description":875,"badge":16},"\u002Fdocs\u002Ftypography\u002Ftabs","docs\u002F4.typography\u002Ftabs","Group related information into interactive tabs to improve content navigation.",{"id":877,"title":243,"badge":16,"body":878,"category":209,"description":246,"extension":1000,"framework":16,"index":34,"links":1001,"meta":1014,"navigation":1015,"path":244,"seo":1016,"stem":245,"__hash__":1017},"docs\u002Fdocs\u002F2.components\u002Fchat-shimmer.md",{"type":879,"value":880,"toc":985},"minimark",[881,886,890,910,915,921,925,929,934,937,941,950,953,957,968,972,976,979,982],[882,883,885],"h2",{"id":884},"usage","Usage",[887,888,889],"p",{},"The ChatShimmer component renders an element with an animated shimmer gradient over text, commonly used to indicate streaming or loading states in chat interfaces.",[891,892,893],"note",{},[887,894,895,896,903,904,909],{},"This component is automatically used by the ",[897,898,900],"a",{"href":899},"\u002Fdocs\u002Fcomponents\u002Fchat-tool\u002F",[901,902,248],"code",{}," and ",[897,905,907],{"href":906},"\u002Fdocs\u002Fcomponents\u002Fchat-reasoning\u002F",[901,908,237],{}," components when streaming.",[911,912,914],"h3",{"id":913},"text","Text",[887,916,917,918,920],{},"Use the ",[901,919,913],{}," prop to set the shimmer text.",[922,923],"component-code",{":props":924},"{\"text\":\"Thinking...\"}",[911,926,928],{"id":927},"duration","Duration",[887,930,917,931,933],{},[901,932,927],{}," prop to control the animation speed in seconds.",[922,935],{":props":936},"{\"text\":\"Thinking...\",\"duration\":4}",[911,938,940],{"id":939},"spread","Spread",[887,942,917,943,945,946,949],{},[901,944,939],{}," prop to control the width of the shimmer highlight. The actual spread is computed as ",[901,947,948],{},"text.length * spread"," in pixels.",[922,951],{":props":952},"{\"text\":\"Thinking...\",\"spread\":5}",[882,954,956],{"id":955},"examples","Examples",[958,959,961],"tip",{"to":960},"\u002Fdocs\u002Fcomponents\u002Fchat\u002F",[887,962,963,964,967],{},"Check the ",[965,966,206],"strong",{}," overview page for installation instructions, server setup and usage examples.",[882,969,971],{"id":970},"api","API",[911,973,975],{"id":974},"props","Props",[977,978],"component-props",{},[882,980,50],{"id":981},"theme",[983,984],"component-theme",{},{"title":986,"searchDepth":987,"depth":987,"links":988},"",2,[989,995,996,999],{"id":884,"depth":987,"text":885,"children":990},[991,993,994],{"id":913,"depth":992,"text":914},3,{"id":927,"depth":992,"text":928},{"id":939,"depth":992,"text":940},{"id":955,"depth":987,"text":956},{"id":970,"depth":987,"text":971,"children":997},[998],{"id":974,"depth":992,"text":975},{"id":981,"depth":987,"text":50},"md",[1002,1006,1010],{"label":1003,"iconName":1004,"to":1005},"GitHub","GitHubIcon","https:\u002F\u002Fgithub.com\u002Fbitrix24\u002Fb24ui\u002Fblob\u002Fmain\u002Fsrc\u002Fruntime\u002Fcomponents\u002FChatShimmer.vue",{"label":1007,"iconName":1008,"to":1009},"Demo","DemonstrationOnIcon","https:\u002F\u002Fbitrix24.github.io\u002Fb24ui\u002Fdemo\u002Fcomponents\u002Fchat-shimmer",{"label":1011,"iconName":1012,"to":1013},"Nuxt UI","NuxtIcon","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fchat-shimmer",{},{"badge":241},{"title":243,"description":246},"YnTaW3rYOdPxtsqe4KhkWvZ48C47OXtxIjapXF_SlAk",{"data":1019,"body":1020},{},{"type":1021,"children":1022},"root",[1023],{"type":151,"tag":887,"props":1024,"children":1025},{},[1026],{"type":913,"value":246},{"mode":1028,"prefetch":34,"preload":34,"filePath":1029,"declarationPath":1030,"pascalName":1031,"kebabName":1032,"chunkName":1033,"priority":1034,"_scanned":20,"meta":1035},"all","..\u002Fsrc\u002Fruntime\u002Fcomponents\u002FChatShimmer.vue","\u002Fhome\u002Frunner\u002Fwork\u002Fb24ui\u002Fb24ui\u002Fsrc\u002Fruntime\u002Fcomponents\u002FChatShimmer.vue","B24ChatShimmer","b24-chat-shimmer","components\u002Fb24-chat-shimmer",0,{"type":1036,"props":1037,"slots":1076,"events":1077,"exposed":1078,"hash":1079},1,[1038,1042,1050,1062,1068],{"name":913,"global":34,"description":1039,"tags":1040,"required":20,"type":1041,"schema":1041},"The text to display with the shimmer effect.",[],"string",{"name":1043,"global":34,"default":1044,"description":1045,"tags":1046,"required":34,"type":1049,"schema":1049},"as","'span'","The element or component this component should render as.",[1047],{"name":1048,"text":1044},"defaultValue","any",{"name":927,"global":34,"default":1051,"description":1052,"tags":1053,"required":34,"type":1055,"schema":1056},"2","The duration of the shimmer animation in seconds.",[1054],{"name":1048,"text":1051},"undefined | number",{"kind":1057,"type":1058,"schema":1059},"enum","number | undefined",{"0":1060,"1":1061},"undefined","number",{"name":939,"global":34,"default":1051,"description":1063,"tags":1064,"required":34,"type":1055,"schema":1066},"The spread multiplier for the shimmer highlight. The actual spread is computed as `text.length * spread` in pixels.",[1065],{"name":1048,"text":1051},{"kind":1057,"type":1058,"schema":1067},{"0":1060,"1":1061},{"name":1069,"global":34,"description":986,"tags":1070,"required":34,"type":1071,"schema":1072},"b24ui",[],"undefined | {}",{"kind":1057,"type":1073,"schema":1074},"{} | undefined",{"0":1060,"1":1075},"{}",[],[],[],"I338CbKOV3rcYRbdt5dVL4zWv-CSxxLzqgNKDpchv_w",{"data":1081,"body":1082},{},{"type":1021,"children":1083},[1084],{"type":151,"tag":887,"props":1085,"children":1086},{},[1087],{"type":913,"value":1045},{"data":1089,"body":1090,"toc":1173},{"title":986,"description":986},{"type":1021,"children":1091},[1092,1167],{"type":151,"tag":1093,"props":1094,"children":1095},"code-collapse",{},[1096],{"type":151,"tag":1097,"props":1098,"children":1103},"pre",{"className":1099,"code":1100,"filename":1101,"language":1102,"meta":986,"style":986},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default {\n  base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]'\n}\n","https:\u002F\u002Fgithub.com\u002Fbitrix24\u002Fb24ui\u002Ftree\u002Fmain\u002Fsrc\u002Ftheme\u002Fchat-shimmer.ts","ts",[1104],{"type":151,"tag":901,"props":1105,"children":1106},{"__ignoreMap":986},[1107,1129,1159],{"type":151,"tag":1108,"props":1109,"children":1111},"span",{"class":1110,"line":1036},"line",[1112,1118,1123],{"type":151,"tag":1108,"props":1113,"children":1115},{"style":1114},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1116],{"type":913,"value":1117},"export",{"type":151,"tag":1108,"props":1119,"children":1120},{"style":1114},[1121],{"type":913,"value":1122}," default",{"type":151,"tag":1108,"props":1124,"children":1126},{"style":1125},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1127],{"type":913,"value":1128}," {\n",{"type":151,"tag":1108,"props":1130,"children":1131},{"class":1110,"line":987},[1132,1138,1143,1148,1154],{"type":151,"tag":1108,"props":1133,"children":1135},{"style":1134},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1136],{"type":913,"value":1137},"  base",{"type":151,"tag":1108,"props":1139,"children":1140},{"style":1125},[1141],{"type":913,"value":1142},":",{"type":151,"tag":1108,"props":1144,"children":1145},{"style":1125},[1146],{"type":913,"value":1147}," '",{"type":151,"tag":1108,"props":1149,"children":1151},{"style":1150},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1152],{"type":913,"value":1153},"text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--b24ui-typography-label-color),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-design-plain-na-content-secondary),var(--ui-color-design-plain-na-content-secondary))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]",{"type":151,"tag":1108,"props":1155,"children":1156},{"style":1125},[1157],{"type":913,"value":1158},"'\n",{"type":151,"tag":1108,"props":1160,"children":1161},{"class":1110,"line":992},[1162],{"type":151,"tag":1108,"props":1163,"children":1164},{"style":1125},[1165],{"type":913,"value":1166},"}\n",{"type":151,"tag":1168,"props":1169,"children":1170},"style",{},[1171],{"type":913,"value":1172},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":986,"searchDepth":987,"depth":987,"links":1174},[],{"data":1176,"body":1177},{},{"type":1021,"children":1178},[1179],{"type":151,"tag":887,"props":1180,"children":1181},{},[1182],{"type":913,"value":1039},{"data":1184,"body":1185},{},{"type":1021,"children":1186},[1187],{"type":151,"tag":887,"props":1188,"children":1189},{},[1190],{"type":913,"value":1052},{"data":1192,"body":1193},{},{"type":1021,"children":1194},[1195],{"type":151,"tag":887,"props":1196,"children":1197},{},[1198,1200,1205],{"type":913,"value":1199},"The spread multiplier for the shimmer highlight. The actual spread is computed as ",{"type":151,"tag":901,"props":1201,"children":1203},{"className":1202},[],[1204],{"type":913,"value":948},{"type":913,"value":949},{"data":1207,"body":1208,"toc":1298},{"title":986,"description":986},{"type":1021,"children":1209},[1210,1294],{"type":151,"tag":1097,"props":1211,"children":1214},{"className":1212,"code":1213,"language":32,"meta":986,"style":986},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CB24ChatShimmer text=\"Thinking...\" \u002F>\n\u003C\u002Ftemplate>\n",[1215],{"type":151,"tag":901,"props":1216,"children":1217},{"__ignoreMap":986},[1218,1236,1278],{"type":151,"tag":1108,"props":1219,"children":1220},{"class":1110,"line":1036},[1221,1226,1231],{"type":151,"tag":1108,"props":1222,"children":1223},{"style":1125},[1224],{"type":913,"value":1225},"\u003C",{"type":151,"tag":1108,"props":1227,"children":1228},{"style":1134},[1229],{"type":913,"value":1230},"template",{"type":151,"tag":1108,"props":1232,"children":1233},{"style":1125},[1234],{"type":913,"value":1235},">\n",{"type":151,"tag":1108,"props":1237,"children":1238},{"class":1110,"line":987},[1239,1244,1248,1254,1259,1264,1269,1273],{"type":151,"tag":1108,"props":1240,"children":1241},{"style":1125},[1242],{"type":913,"value":1243},"  \u003C",{"type":151,"tag":1108,"props":1245,"children":1246},{"style":1134},[1247],{"type":913,"value":1031},{"type":151,"tag":1108,"props":1249,"children":1251},{"style":1250},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1252],{"type":913,"value":1253}," text",{"type":151,"tag":1108,"props":1255,"children":1256},{"style":1125},[1257],{"type":913,"value":1258},"=",{"type":151,"tag":1108,"props":1260,"children":1261},{"style":1125},[1262],{"type":913,"value":1263},"\"",{"type":151,"tag":1108,"props":1265,"children":1266},{"style":1150},[1267],{"type":913,"value":1268},"Thinking...",{"type":151,"tag":1108,"props":1270,"children":1271},{"style":1125},[1272],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1274,"children":1275},{"style":1125},[1276],{"type":913,"value":1277}," \u002F>\n",{"type":151,"tag":1108,"props":1279,"children":1280},{"class":1110,"line":992},[1281,1286,1290],{"type":151,"tag":1108,"props":1282,"children":1283},{"style":1125},[1284],{"type":913,"value":1285},"\u003C\u002F",{"type":151,"tag":1108,"props":1287,"children":1288},{"style":1134},[1289],{"type":913,"value":1230},{"type":151,"tag":1108,"props":1291,"children":1292},{"style":1125},[1293],{"type":913,"value":1235},{"type":151,"tag":1168,"props":1295,"children":1296},{},[1297],{"type":913,"value":1172},{"title":986,"searchDepth":987,"depth":987,"links":1299},[],{"data":1301,"body":1302,"toc":1402},{"title":986,"description":986},{"type":1021,"children":1303},[1304,1398],{"type":151,"tag":1097,"props":1305,"children":1307},{"className":1212,"code":1306,"language":32,"meta":986,"style":986},"\u003Ctemplate>\n  \u003CB24ChatShimmer text=\"Thinking...\" :duration=\"4\" \u002F>\n\u003C\u002Ftemplate>\n",[1308],{"type":151,"tag":901,"props":1309,"children":1310},{"__ignoreMap":986},[1311,1326,1383],{"type":151,"tag":1108,"props":1312,"children":1313},{"class":1110,"line":1036},[1314,1318,1322],{"type":151,"tag":1108,"props":1315,"children":1316},{"style":1125},[1317],{"type":913,"value":1225},{"type":151,"tag":1108,"props":1319,"children":1320},{"style":1134},[1321],{"type":913,"value":1230},{"type":151,"tag":1108,"props":1323,"children":1324},{"style":1125},[1325],{"type":913,"value":1235},{"type":151,"tag":1108,"props":1327,"children":1328},{"class":1110,"line":987},[1329,1333,1337,1341,1345,1349,1353,1357,1362,1366,1370,1375,1379],{"type":151,"tag":1108,"props":1330,"children":1331},{"style":1125},[1332],{"type":913,"value":1243},{"type":151,"tag":1108,"props":1334,"children":1335},{"style":1134},[1336],{"type":913,"value":1031},{"type":151,"tag":1108,"props":1338,"children":1339},{"style":1250},[1340],{"type":913,"value":1253},{"type":151,"tag":1108,"props":1342,"children":1343},{"style":1125},[1344],{"type":913,"value":1258},{"type":151,"tag":1108,"props":1346,"children":1347},{"style":1125},[1348],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1350,"children":1351},{"style":1150},[1352],{"type":913,"value":1268},{"type":151,"tag":1108,"props":1354,"children":1355},{"style":1125},[1356],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1358,"children":1359},{"style":1250},[1360],{"type":913,"value":1361}," :duration",{"type":151,"tag":1108,"props":1363,"children":1364},{"style":1125},[1365],{"type":913,"value":1258},{"type":151,"tag":1108,"props":1367,"children":1368},{"style":1125},[1369],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1371,"children":1372},{"style":1150},[1373],{"type":913,"value":1374},"4",{"type":151,"tag":1108,"props":1376,"children":1377},{"style":1125},[1378],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1380,"children":1381},{"style":1125},[1382],{"type":913,"value":1277},{"type":151,"tag":1108,"props":1384,"children":1385},{"class":1110,"line":992},[1386,1390,1394],{"type":151,"tag":1108,"props":1387,"children":1388},{"style":1125},[1389],{"type":913,"value":1285},{"type":151,"tag":1108,"props":1391,"children":1392},{"style":1134},[1393],{"type":913,"value":1230},{"type":151,"tag":1108,"props":1395,"children":1396},{"style":1125},[1397],{"type":913,"value":1235},{"type":151,"tag":1168,"props":1399,"children":1400},{},[1401],{"type":913,"value":1172},{"title":986,"searchDepth":987,"depth":987,"links":1403},[],{"data":1405,"body":1406,"toc":1506},{"title":986,"description":986},{"type":1021,"children":1407},[1408,1502],{"type":151,"tag":1097,"props":1409,"children":1411},{"className":1212,"code":1410,"language":32,"meta":986,"style":986},"\u003Ctemplate>\n  \u003CB24ChatShimmer text=\"Thinking...\" :spread=\"5\" \u002F>\n\u003C\u002Ftemplate>\n",[1412],{"type":151,"tag":901,"props":1413,"children":1414},{"__ignoreMap":986},[1415,1430,1487],{"type":151,"tag":1108,"props":1416,"children":1417},{"class":1110,"line":1036},[1418,1422,1426],{"type":151,"tag":1108,"props":1419,"children":1420},{"style":1125},[1421],{"type":913,"value":1225},{"type":151,"tag":1108,"props":1423,"children":1424},{"style":1134},[1425],{"type":913,"value":1230},{"type":151,"tag":1108,"props":1427,"children":1428},{"style":1125},[1429],{"type":913,"value":1235},{"type":151,"tag":1108,"props":1431,"children":1432},{"class":1110,"line":987},[1433,1437,1441,1445,1449,1453,1457,1461,1466,1470,1474,1479,1483],{"type":151,"tag":1108,"props":1434,"children":1435},{"style":1125},[1436],{"type":913,"value":1243},{"type":151,"tag":1108,"props":1438,"children":1439},{"style":1134},[1440],{"type":913,"value":1031},{"type":151,"tag":1108,"props":1442,"children":1443},{"style":1250},[1444],{"type":913,"value":1253},{"type":151,"tag":1108,"props":1446,"children":1447},{"style":1125},[1448],{"type":913,"value":1258},{"type":151,"tag":1108,"props":1450,"children":1451},{"style":1125},[1452],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1454,"children":1455},{"style":1150},[1456],{"type":913,"value":1268},{"type":151,"tag":1108,"props":1458,"children":1459},{"style":1125},[1460],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1462,"children":1463},{"style":1250},[1464],{"type":913,"value":1465}," :spread",{"type":151,"tag":1108,"props":1467,"children":1468},{"style":1125},[1469],{"type":913,"value":1258},{"type":151,"tag":1108,"props":1471,"children":1472},{"style":1125},[1473],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1475,"children":1476},{"style":1150},[1477],{"type":913,"value":1478},"5",{"type":151,"tag":1108,"props":1480,"children":1481},{"style":1125},[1482],{"type":913,"value":1263},{"type":151,"tag":1108,"props":1484,"children":1485},{"style":1125},[1486],{"type":913,"value":1277},{"type":151,"tag":1108,"props":1488,"children":1489},{"class":1110,"line":992},[1490,1494,1498],{"type":151,"tag":1108,"props":1491,"children":1492},{"style":1125},[1493],{"type":913,"value":1285},{"type":151,"tag":1108,"props":1495,"children":1496},{"style":1134},[1497],{"type":913,"value":1230},{"type":151,"tag":1108,"props":1499,"children":1500},{"style":1125},[1501],{"type":913,"value":1235},{"type":151,"tag":1168,"props":1503,"children":1504},{},[1505],{"type":913,"value":1172},{"title":986,"searchDepth":987,"depth":987,"links":1507},[],1776671495746]