[{"data":1,"prerenderedAt":1613},["ShallowReactive",2],{"navigation":3,"-docs-composables-use-scroll-shadow-":876,"-docs-composables-use-scroll-shadow--description":1603},[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":771,"badge":16,"body":878,"category":16,"description":774,"extension":1598,"framework":16,"index":34,"links":16,"meta":1599,"navigation":1600,"path":772,"seo":1601,"stem":773,"__hash__":1602},"docs\u002Fdocs\u002F3.composables\u002Fuse-scroll-shadow.md",{"type":879,"value":880,"toc":1587},"minimark",[881,886,894,1093,1110,1114,1137,1142,1181,1184,1188,1232,1236,1240,1246,1414,1418,1423,1584],[882,883,885],"h2",{"id":884},"usage","Usage",[887,888,889,890,893],"p",{},"Use the auto-imported ",[891,892,771],"code",{}," composable to apply fade shadows on the edges of a scrollable element, indicating that more content is available in the scroll direction.",[895,896,900],"pre",{"className":897,"code":898,"language":32,"meta":899,"style":899},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst el = useTemplateRef('el')\n\nconst { style } = useScrollShadow(el)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" class=\"max-h-[200px] overflow-y-auto\" :style=\"style\">\n    \u003C!-- Scrollable content -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","",[891,901,902,937,967,973,996,1006,1011,1021,1067,1074,1084],{"__ignoreMap":899},[903,904,907,911,915,919,922,925,928,932,934],"span",{"class":905,"line":906},"line",1,[903,908,910],{"class":909},"sMK4o","\u003C",[903,912,914],{"class":913},"swJcz","script",[903,916,918],{"class":917},"spNyl"," setup",[903,920,921],{"class":917}," lang",[903,923,924],{"class":909},"=",[903,926,927],{"class":909},"\"",[903,929,931],{"class":930},"sfazB","ts",[903,933,927],{"class":909},[903,935,936],{"class":909},">\n",[903,938,940,943,947,949,953,956,959,962,964],{"class":905,"line":939},2,[903,941,942],{"class":917},"const",[903,944,946],{"class":945},"sTEyZ"," el ",[903,948,924],{"class":909},[903,950,952],{"class":951},"s2Zo4"," useTemplateRef",[903,954,955],{"class":945},"(",[903,957,958],{"class":909},"'",[903,960,961],{"class":930},"el",[903,963,958],{"class":909},[903,965,966],{"class":945},")\n",[903,968,970],{"class":905,"line":969},3,[903,971,972],{"emptyLinePlaceholder":20},"\n",[903,974,976,978,981,984,987,990,993],{"class":905,"line":975},4,[903,977,942],{"class":917},[903,979,980],{"class":909}," {",[903,982,983],{"class":945}," style ",[903,985,986],{"class":909},"}",[903,988,989],{"class":909}," =",[903,991,992],{"class":951}," useScrollShadow",[903,994,995],{"class":945},"(el)\n",[903,997,999,1002,1004],{"class":905,"line":998},5,[903,1000,1001],{"class":909},"\u003C\u002F",[903,1003,914],{"class":913},[903,1005,936],{"class":909},[903,1007,1009],{"class":905,"line":1008},6,[903,1010,972],{"emptyLinePlaceholder":20},[903,1012,1014,1016,1019],{"class":905,"line":1013},7,[903,1015,910],{"class":909},[903,1017,1018],{"class":913},"template",[903,1020,936],{"class":909},[903,1022,1024,1027,1030,1033,1035,1037,1039,1041,1044,1046,1048,1051,1053,1056,1058,1060,1063,1065],{"class":905,"line":1023},8,[903,1025,1026],{"class":909},"  \u003C",[903,1028,1029],{"class":913},"div",[903,1031,1032],{"class":917}," ref",[903,1034,924],{"class":909},[903,1036,927],{"class":909},[903,1038,961],{"class":930},[903,1040,927],{"class":909},[903,1042,1043],{"class":917}," class",[903,1045,924],{"class":909},[903,1047,927],{"class":909},[903,1049,1050],{"class":930},"max-h-[200px] overflow-y-auto",[903,1052,927],{"class":909},[903,1054,1055],{"class":917}," :style",[903,1057,924],{"class":909},[903,1059,927],{"class":909},[903,1061,1062],{"class":930},"style",[903,1064,927],{"class":909},[903,1066,936],{"class":909},[903,1068,1070],{"class":905,"line":1069},9,[903,1071,1073],{"class":1072},"sHwdD","    \u003C!-- Scrollable content -->\n",[903,1075,1077,1080,1082],{"class":905,"line":1076},10,[903,1078,1079],{"class":909},"  \u003C\u002F",[903,1081,1029],{"class":913},[903,1083,936],{"class":909},[903,1085,1087,1089,1091],{"class":905,"line":1086},11,[903,1088,1001],{"class":909},[903,1090,1018],{"class":913},[903,1092,936],{"class":909},[1094,1095,1096,1104,1107],"ul",{},[1097,1098,1099,1100,1103],"li",{},"Uses CSS ",[891,1101,1102],{},"mask-image"," to fade content at the edges rather than overlay elements, so it works on any background.",[1097,1105,1106],{},"Automatically detects whether the element is overflowing and only applies shadows when needed.",[1097,1108,1109],{},"Supports both vertical and horizontal orientations.",[882,1111,1113],{"id":1112},"api","API",[887,1115,1116],{},[891,1117,1120,1123,1125,1128,1131,1134],{"className":1118,"language":1119,"style":899},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[903,1121,771],{"class":1122},"sBMFI",[903,1124,955],{"class":909},[903,1126,151],{"class":1127},"sHdIc",[903,1129,1130],{"class":909},",",[903,1132,1133],{"class":1127}," options",[903,1135,1136],{"class":909},"?)",[1138,1139,1141],"h3",{"id":1140},"parameters","Parameters",[1143,1144,1145,1153],"field-group",{},[1146,1147,1150],"field",{"name":151,"type":1148,":required":1149},"MaybeRef\u003CHTMLElement | null | undefined>","true",[887,1151,1152],{},"A template ref or reactive reference to the scrollable element.",[1146,1154,1157,1160],{"name":1155,"type":1156},"options","UseScrollShadowOptions",[887,1158,1159],{},"Configuration options for the scroll shadow.",[1161,1162,1163],"collapsible",{},[1143,1164,1165,1173],{},[1146,1166,1170],{"name":1167,"type":1168,"default":1169},"size","MaybeRefOrGetter\u003Cnumber>","24",[887,1171,1172],{},"The shadow size in pixels.",[1146,1174,1178],{"name":1175,"type":1176,"default":1177},"orientation","MaybeRefOrGetter\u003C'vertical' | 'horizontal'>","'vertical'",[887,1179,1180],{},"The scroll direction to apply shadows.",[887,1182,1183],{},"::\n::",[1138,1185,1187],{"id":1186},"return","Return",[1143,1189,1190,1208,1215],{},[1146,1191,1193],{"name":1062,"type":1192},"ComputedRef\u003CCSSProperties | undefined>",[887,1194,1195,1196,1199,1200,1203,1204,1207],{},"A reactive style object to bind on the scrollable element with ",[891,1197,1198],{},":style",". Contains ",[891,1201,1202],{},"maskImage"," when shadows are active, ",[891,1205,1206],{},"undefined"," otherwise.",[1146,1209,1212],{"name":1210,"type":1211},"isOverflowing","ComputedRef\u003Cboolean>",[887,1213,1214],{},"Whether the element's content overflows its visible area.",[1146,1216,1219],{"name":1217,"type":1218},"arrivedState","{ top: boolean, bottom: boolean, left: boolean, right: boolean }",[887,1220,1221,1222,1231],{},"Reactive scroll arrival state from ",[1223,1224,1228],"a",{"href":1225,"rel":1226},"https:\u002F\u002Fvueuse.org\u002Fcore\u002FuseScroll\u002F",[1227],"nofollow",[891,1229,1230],{},"useScroll",".",[882,1233,1235],{"id":1234},"examples","Examples",[1138,1237,1239],{"id":1238},"horizontal","Horizontal",[887,1241,1242,1243,1245],{},"Use the ",[891,1244,1175],{}," option for horizontally scrollable containers:",[895,1247,1249],{"className":897,"code":1248,"language":32,"meta":899,"style":899},"\u003Cscript setup lang=\"ts\">\nconst el = useTemplateRef('el')\n\nconst { style } = useScrollShadow(el, { orientation: 'horizontal' })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" class=\"overflow-x-auto whitespace-nowrap\" :style=\"style\">\n    \u003C!-- Horizontally scrollable content -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[891,1250,1251,1271,1291,1295,1334,1342,1346,1354,1393,1398,1406],{"__ignoreMap":899},[903,1252,1253,1255,1257,1259,1261,1263,1265,1267,1269],{"class":905,"line":906},[903,1254,910],{"class":909},[903,1256,914],{"class":913},[903,1258,918],{"class":917},[903,1260,921],{"class":917},[903,1262,924],{"class":909},[903,1264,927],{"class":909},[903,1266,931],{"class":930},[903,1268,927],{"class":909},[903,1270,936],{"class":909},[903,1272,1273,1275,1277,1279,1281,1283,1285,1287,1289],{"class":905,"line":939},[903,1274,942],{"class":917},[903,1276,946],{"class":945},[903,1278,924],{"class":909},[903,1280,952],{"class":951},[903,1282,955],{"class":945},[903,1284,958],{"class":909},[903,1286,961],{"class":930},[903,1288,958],{"class":909},[903,1290,966],{"class":945},[903,1292,1293],{"class":905,"line":969},[903,1294,972],{"emptyLinePlaceholder":20},[903,1296,1297,1299,1301,1303,1305,1307,1309,1312,1314,1316,1319,1322,1325,1327,1329,1332],{"class":905,"line":975},[903,1298,942],{"class":917},[903,1300,980],{"class":909},[903,1302,983],{"class":945},[903,1304,986],{"class":909},[903,1306,989],{"class":909},[903,1308,992],{"class":951},[903,1310,1311],{"class":945},"(el",[903,1313,1130],{"class":909},[903,1315,980],{"class":909},[903,1317,1318],{"class":913}," orientation",[903,1320,1321],{"class":909},":",[903,1323,1324],{"class":909}," '",[903,1326,1238],{"class":930},[903,1328,958],{"class":909},[903,1330,1331],{"class":909}," }",[903,1333,966],{"class":945},[903,1335,1336,1338,1340],{"class":905,"line":998},[903,1337,1001],{"class":909},[903,1339,914],{"class":913},[903,1341,936],{"class":909},[903,1343,1344],{"class":905,"line":1008},[903,1345,972],{"emptyLinePlaceholder":20},[903,1347,1348,1350,1352],{"class":905,"line":1013},[903,1349,910],{"class":909},[903,1351,1018],{"class":913},[903,1353,936],{"class":909},[903,1355,1356,1358,1360,1362,1364,1366,1368,1370,1372,1374,1376,1379,1381,1383,1385,1387,1389,1391],{"class":905,"line":1023},[903,1357,1026],{"class":909},[903,1359,1029],{"class":913},[903,1361,1032],{"class":917},[903,1363,924],{"class":909},[903,1365,927],{"class":909},[903,1367,961],{"class":930},[903,1369,927],{"class":909},[903,1371,1043],{"class":917},[903,1373,924],{"class":909},[903,1375,927],{"class":909},[903,1377,1378],{"class":930},"overflow-x-auto whitespace-nowrap",[903,1380,927],{"class":909},[903,1382,1055],{"class":917},[903,1384,924],{"class":909},[903,1386,927],{"class":909},[903,1388,1062],{"class":930},[903,1390,927],{"class":909},[903,1392,936],{"class":909},[903,1394,1395],{"class":905,"line":1069},[903,1396,1397],{"class":1072},"    \u003C!-- Horizontally scrollable content -->\n",[903,1399,1400,1402,1404],{"class":905,"line":1076},[903,1401,1079],{"class":909},[903,1403,1029],{"class":913},[903,1405,936],{"class":909},[903,1407,1408,1410,1412],{"class":905,"line":1086},[903,1409,1001],{"class":909},[903,1411,1018],{"class":913},[903,1413,936],{"class":909},[1138,1415,1417],{"id":1416},"custom-size","Custom size",[887,1419,1242,1420,1422],{},[891,1421,1167],{}," option to change the shadow size in pixels:",[895,1424,1426],{"className":897,"code":1425,"language":32,"meta":899,"style":899},"\u003Cscript setup lang=\"ts\">\nconst el = useTemplateRef('el')\n\nconst { style } = useScrollShadow(el, { size: 48 })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" class=\"max-h-[300px] overflow-y-auto\" :style=\"style\">\n    \u003C!-- Scrollable content -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[891,1427,1428,1448,1468,1472,1505,1513,1517,1525,1564,1568,1576],{"__ignoreMap":899},[903,1429,1430,1432,1434,1436,1438,1440,1442,1444,1446],{"class":905,"line":906},[903,1431,910],{"class":909},[903,1433,914],{"class":913},[903,1435,918],{"class":917},[903,1437,921],{"class":917},[903,1439,924],{"class":909},[903,1441,927],{"class":909},[903,1443,931],{"class":930},[903,1445,927],{"class":909},[903,1447,936],{"class":909},[903,1449,1450,1452,1454,1456,1458,1460,1462,1464,1466],{"class":905,"line":939},[903,1451,942],{"class":917},[903,1453,946],{"class":945},[903,1455,924],{"class":909},[903,1457,952],{"class":951},[903,1459,955],{"class":945},[903,1461,958],{"class":909},[903,1463,961],{"class":930},[903,1465,958],{"class":909},[903,1467,966],{"class":945},[903,1469,1470],{"class":905,"line":969},[903,1471,972],{"emptyLinePlaceholder":20},[903,1473,1474,1476,1478,1480,1482,1484,1486,1488,1490,1492,1495,1497,1501,1503],{"class":905,"line":975},[903,1475,942],{"class":917},[903,1477,980],{"class":909},[903,1479,983],{"class":945},[903,1481,986],{"class":909},[903,1483,989],{"class":909},[903,1485,992],{"class":951},[903,1487,1311],{"class":945},[903,1489,1130],{"class":909},[903,1491,980],{"class":909},[903,1493,1494],{"class":913}," size",[903,1496,1321],{"class":909},[903,1498,1500],{"class":1499},"sbssI"," 48",[903,1502,1331],{"class":909},[903,1504,966],{"class":945},[903,1506,1507,1509,1511],{"class":905,"line":998},[903,1508,1001],{"class":909},[903,1510,914],{"class":913},[903,1512,936],{"class":909},[903,1514,1515],{"class":905,"line":1008},[903,1516,972],{"emptyLinePlaceholder":20},[903,1518,1519,1521,1523],{"class":905,"line":1013},[903,1520,910],{"class":909},[903,1522,1018],{"class":913},[903,1524,936],{"class":909},[903,1526,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1550,1552,1554,1556,1558,1560,1562],{"class":905,"line":1023},[903,1528,1026],{"class":909},[903,1530,1029],{"class":913},[903,1532,1032],{"class":917},[903,1534,924],{"class":909},[903,1536,927],{"class":909},[903,1538,961],{"class":930},[903,1540,927],{"class":909},[903,1542,1043],{"class":917},[903,1544,924],{"class":909},[903,1546,927],{"class":909},[903,1548,1549],{"class":930},"max-h-[300px] overflow-y-auto",[903,1551,927],{"class":909},[903,1553,1055],{"class":917},[903,1555,924],{"class":909},[903,1557,927],{"class":909},[903,1559,1062],{"class":930},[903,1561,927],{"class":909},[903,1563,936],{"class":909},[903,1565,1566],{"class":905,"line":1069},[903,1567,1073],{"class":1072},[903,1569,1570,1572,1574],{"class":905,"line":1076},[903,1571,1079],{"class":909},[903,1573,1029],{"class":913},[903,1575,936],{"class":909},[903,1577,1578,1580,1582],{"class":905,"line":1086},[903,1579,1001],{"class":909},[903,1581,1018],{"class":913},[903,1583,936],{"class":909},[1062,1585,1586],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":899,"searchDepth":939,"depth":939,"links":1588},[1589,1590,1594],{"id":884,"depth":939,"text":885},{"id":1112,"depth":939,"text":1113,"children":1591},[1592,1593],{"id":1140,"depth":969,"text":1141},{"id":1186,"depth":969,"text":1187},{"id":1234,"depth":939,"text":1235,"children":1595},[1596,1597],{"id":1238,"depth":969,"text":1239},{"id":1416,"depth":969,"text":1417},"md",{},{"badge":241},{"title":771,"description":774},"PGwDeS479o4z8cNLpkNaRexY0sO_oa5S4HPMma6tQ9I",{"data":1604,"body":1605},{},{"type":1606,"children":1607},"root",[1608],{"type":151,"tag":887,"props":1609,"children":1610},{},[1611],{"type":1612,"value":774},"text",1776671511641]