[{"data":1,"prerenderedAt":685},["ShallowReactive",2],{"navigation-source":3,"navigation-es":271,"docs-\u002Fes\u002Fdocs\u002Fapi\u002Fmake-draggable":474,"docs-surround-\u002Fes\u002Fdocs\u002Fapi\u002Fmake-draggable":670,"example-draggable":675},[4],{"title":5,"path":6,"stem":7,"children":8,"page":35},"Docs","\u002Fdocs","docs",[9,36,122,198,251],{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":35},"Getting started","i-lucide-rocket","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[15,20,25,30],{"title":16,"path":17,"stem":18,"icon":19},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":21,"path":22,"stem":23,"icon":24},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":26,"path":27,"stem":28,"icon":29},"Quick start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F3.quick-start","i-lucide-zap",{"title":31,"path":32,"stem":33,"icon":34},"Migrating from v2","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","docs\u002F1.getting-started\u002F4.migrating-from-v2","i-lucide-arrow-right-left",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"Guides","i-lucide-book-marked","\u002Fdocs\u002Fguides","docs\u002F2.guides",[42,47,52,57,62,67,72,77,82,87,92,97,102,107,112,117],{"title":43,"path":44,"stem":45,"icon":46},"The provider","\u002Fdocs\u002Fguides\u002Fprovider","docs\u002F2.guides\u002F01.provider","i-lucide-layers",{"title":48,"path":49,"stem":50,"icon":51},"Drag and drop","\u002Fdocs\u002Fguides\u002Fdrag-and-drop","docs\u002F2.guides\u002F02.drag-and-drop","i-lucide-move",{"title":53,"path":54,"stem":55,"icon":56},"Sortable lists","\u002Fdocs\u002Fguides\u002Fsortable-lists","docs\u002F2.guides\u002F03.sortable-lists","i-lucide-list-ordered",{"title":58,"path":59,"stem":60,"icon":61},"Lists that share items","\u002Fdocs\u002Fguides\u002Fshared-lists","docs\u002F2.guides\u002F04.shared-lists","i-lucide-kanban",{"title":63,"path":64,"stem":65,"icon":66},"Trees","\u002Fdocs\u002Fguides\u002Ftrees","docs\u002F2.guides\u002F05.trees","i-lucide-folder-tree",{"title":68,"path":69,"stem":70,"icon":71},"Multi-drag and selection","\u002Fdocs\u002Fguides\u002Fmulti-drag","docs\u002F2.guides\u002F06.multi-drag","i-lucide-copy",{"title":73,"path":74,"stem":75,"icon":76},"The overlay","\u002Fdocs\u002Fguides\u002Foverlay","docs\u002F2.guides\u002F07.overlay","i-lucide-mouse-pointer-2",{"title":78,"path":79,"stem":80,"icon":81},"Axes, bounds and grids","\u002Fdocs\u002Fguides\u002Fconstraints","docs\u002F2.guides\u002F08.constraints","i-lucide-axis-3d",{"title":83,"path":84,"stem":85,"icon":86},"Deciding a drop","\u002Fdocs\u002Fguides\u002Fdrop-decisions","docs\u002F2.guides\u002F09.drop-decisions","i-lucide-check-check",{"title":88,"path":89,"stem":90,"icon":91},"Animations","\u002Fdocs\u002Fguides\u002Fanimations","docs\u002F2.guides\u002F10.animations","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Accessibility","\u002Fdocs\u002Fguides\u002Faccessibility","docs\u002F2.guides\u002F11.accessibility","i-lucide-accessibility",{"title":98,"path":99,"stem":100,"icon":101},"Virtual lists","\u002Fdocs\u002Fguides\u002Fvirtual-lists","docs\u002F2.guides\u002F12.virtual-lists","i-lucide-rows-3",{"title":103,"path":104,"stem":105,"icon":106},"Styling","\u002Fdocs\u002Fguides\u002Fstyling","docs\u002F2.guides\u002F13.styling","i-lucide-palette",{"title":108,"path":109,"stem":110,"icon":111},"Sensors and programmatic drags","\u002Fdocs\u002Fguides\u002Fsensors","docs\u002F2.guides\u002F14.sensors","i-lucide-joystick",{"title":113,"path":114,"stem":115,"icon":116},"DevTools","\u002Fdocs\u002Fguides\u002Fdevtools","docs\u002F2.guides\u002F15.devtools","i-lucide-bug",{"title":118,"path":119,"stem":120,"icon":121},"Files and other apps","\u002Fdocs\u002Fguides\u002Fnative","docs\u002F2.guides\u002F16.native","i-lucide-app-window",{"title":123,"icon":124,"path":125,"stem":126,"children":127,"page":35},"API","i-lucide-braces","\u002Fdocs\u002Fapi","docs\u002F3.api",[128,133,137,142,146,151,156,161,166,171,175,180,184,188,193],{"title":129,"path":130,"stem":131,"icon":132},"DnDProvider","\u002Fdocs\u002Fapi\u002Fdnd-provider","docs\u002F3.api\u002F01.dnd-provider","i-lucide-box",{"title":134,"path":135,"stem":136,"icon":51},"makeDraggable","\u002Fdocs\u002Fapi\u002Fmake-draggable","docs\u002F3.api\u002F02.make-draggable",{"title":138,"path":139,"stem":140,"icon":141},"makeDroppable","\u002Fdocs\u002Fapi\u002Fmake-droppable","docs\u002F3.api\u002F03.make-droppable","i-lucide-inbox",{"title":143,"path":144,"stem":145,"icon":56},"makeSortableList","\u002Fdocs\u002Fapi\u002Fmake-sortable-list","docs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":148,"stem":149,"icon":150},"makeSortableItem","\u002Fdocs\u002Fapi\u002Fmake-sortable-item","docs\u002F3.api\u002F05.make-sortable-item","i-lucide-grip-vertical",{"title":152,"path":153,"stem":154,"icon":155},"makeSortableTree","\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","docs\u002F3.api\u002F06.make-sortable-tree","i-lucide-list-tree",{"title":157,"path":158,"stem":159,"icon":160},"makeSelectionArea","\u002Fdocs\u002Fapi\u002Fmake-selection-area","docs\u002F3.api\u002F07.make-selection-area","i-lucide-square-dashed-mouse-pointer",{"title":162,"path":163,"stem":164,"icon":165},"makeDragArea","\u002Fdocs\u002Fapi\u002Fmake-drag-area","docs\u002F3.api\u002F08.make-drag-area","i-lucide-frame",{"title":167,"path":168,"stem":169,"icon":170},"useDnD and monitors","\u002Fdocs\u002Fapi\u002Fuse-dnd","docs\u002F3.api\u002F09.use-dnd","i-lucide-radio",{"title":172,"path":173,"stem":174,"icon":29},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F3.api\u002F10.events",{"title":176,"path":177,"stem":178,"icon":179},"Modifiers and collision","\u002Fdocs\u002Fapi\u002Fmodifiers","docs\u002F3.api\u002F11.modifiers","i-lucide-sliders-horizontal",{"title":181,"path":182,"stem":183,"icon":71},"DragPreview and overlay props","\u002Fdocs\u002Fapi\u002Fdrag-preview","docs\u002F3.api\u002F12.drag-preview",{"title":88,"path":185,"stem":186,"icon":187},"\u002Fdocs\u002Fapi\u002Fanimations","docs\u002F3.api\u002F13.animations","i-lucide-wand-sparkles",{"title":189,"path":190,"stem":191,"icon":192},"Sensors","\u002Fdocs\u002Fapi\u002Fsensors","docs\u002F3.api\u002F14.sensors","i-lucide-gamepad-2",{"title":194,"path":195,"stem":196,"icon":197},"Common types","\u002Fdocs\u002Fapi\u002Ftypes","docs\u002F3.api\u002F15.types","i-lucide-shapes",{"title":199,"path":200,"stem":201,"children":202,"icon":205},"Examples","\u002Fdocs\u002Fexamples","docs\u002F4.examples\u002F00.index",[203,206,211,216,221,226,231,236,241,246],{"title":204,"path":200,"stem":201,"icon":205},"Overview","i-lucide-layout-grid",{"title":207,"path":208,"stem":209,"icon":210},"Project board","\u002Fdocs\u002Fexamples\u002Fboard","docs\u002F4.examples\u002F01.board","i-lucide-square-kanban",{"title":212,"path":213,"stem":214,"icon":215},"Week calendar","\u002Fdocs\u002Fexamples\u002Fcalendar","docs\u002F4.examples\u002F02.calendar","i-lucide-calendar-days",{"title":217,"path":218,"stem":219,"icon":220},"File manager","\u002Fdocs\u002Fexamples\u002Ffile-manager","docs\u002F4.examples\u002F03.file-manager","i-lucide-folder-open",{"title":222,"path":223,"stem":224,"icon":225},"Block editor","\u002Fdocs\u002Fexamples\u002Fblock-editor","docs\u002F4.examples\u002F04.block-editor","i-lucide-blocks",{"title":227,"path":228,"stem":229,"icon":230},"Chess","\u002Fdocs\u002Fexamples\u002Fchess","docs\u002F4.examples\u002F05.chess","i-lucide-chess-knight",{"title":232,"path":233,"stem":234,"icon":235},"Form builder","\u002Fdocs\u002Fexamples\u002Fform-builder","docs\u002F4.examples\u002F06.form-builder","i-lucide-text-cursor-input",{"title":237,"path":238,"stem":239,"icon":240},"Design canvas","\u002Fdocs\u002Fexamples\u002Fdesign-canvas","docs\u002F4.examples\u002F07.design-canvas","i-lucide-pen-tool",{"title":242,"path":243,"stem":244,"icon":245},"Page builder","\u002Fdocs\u002Fexamples\u002Fpage-builder","docs\u002F4.examples\u002F08.page-builder","i-lucide-layout-template",{"title":247,"path":248,"stem":249,"icon":250},"Data table","\u002Fdocs\u002Fexamples\u002Fdata-table","docs\u002F4.examples\u002F09.data-table","i-lucide-table-2",{"title":252,"path":253,"stem":254,"children":255,"icon":257},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F5.changelog\u002F0.index",[256,258,263,267],{"title":204,"path":253,"stem":254,"icon":257},"i-lucide-history",{"title":259,"path":260,"stem":261,"icon":262},"3.0.0","\u002Fdocs\u002Fchangelog\u002Fv3-0-0","docs\u002F5.changelog\u002F997.v3-0-0","i-lucide-tag",{"title":264,"path":265,"stem":266,"icon":262},"3.0.0-beta.2","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-2","docs\u002F5.changelog\u002F998.v3-0-0-beta-2",{"title":268,"path":269,"stem":270,"icon":262},"3.0.0-beta.1","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-1","docs\u002F5.changelog\u002F999.v3-0-0-beta-1",[272],{"title":273,"path":274,"stem":275,"children":276,"page":35},"Es","\u002Fes","es",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"Documentación","6556add362","\u002Fes\u002Fdocs","es\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"Primeros pasos","e345edbff3","\u002Fes\u002Fdocs\u002Fgetting-started","es\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"Introducción","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fintroduction","es\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"Instalación","\u002Fes\u002Fdocs\u002Fgetting-started\u002Finstallation","es\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"Inicio rápido","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fquick-start","es\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"Migrar desde la v2","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","es\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"Guías","0338bbaa33","\u002Fes\u002Fdocs\u002Fguides","es\u002Fdocs\u002F2.guides",[311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,370],{"title":312,"path":313,"stem":314,"icon":46},"El provider","\u002Fes\u002Fdocs\u002Fguides\u002Fprovider","es\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"Arrastrar y soltar","\u002Fes\u002Fdocs\u002Fguides\u002Fdrag-and-drop","es\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"Listas ordenables","\u002Fes\u002Fdocs\u002Fguides\u002Fsortable-lists","es\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"Listas que comparten ítems","\u002Fes\u002Fdocs\u002Fguides\u002Fshared-lists","es\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"Árboles","\u002Fes\u002Fdocs\u002Fguides\u002Ftrees","es\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"Multi-drag y selección","\u002Fes\u002Fdocs\u002Fguides\u002Fmulti-drag","es\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"El overlay","\u002Fes\u002Fdocs\u002Fguides\u002Foverlay","es\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"Ejes, límites y cuadrículas","\u002Fes\u002Fdocs\u002Fguides\u002Fconstraints","es\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"Decidir un drop","\u002Fes\u002Fdocs\u002Fguides\u002Fdrop-decisions","es\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"Animaciones","\u002Fes\u002Fdocs\u002Fguides\u002Fanimations","es\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"Accesibilidad","\u002Fes\u002Fdocs\u002Fguides\u002Faccessibility","es\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"Listas virtuales","\u002Fes\u002Fdocs\u002Fguides\u002Fvirtual-lists","es\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"Estilos","\u002Fes\u002Fdocs\u002Fguides\u002Fstyling","es\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"Sensores y arrastres programáticos","\u002Fes\u002Fdocs\u002Fguides\u002Fsensors","es\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fes\u002Fdocs\u002Fguides\u002Fdevtools","es\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"Archivos y otras apps","\u002Fes\u002Fdocs\u002Fguides\u002Fnative","es\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fes\u002Fdocs\u002Fapi","es\u002Fdocs\u002F3.api",[379,382,385,388,391,394,397,400,403,407,411,415,419,422,426],{"title":129,"path":380,"stem":381,"icon":132},"\u002Fes\u002Fdocs\u002Fapi\u002Fdnd-provider","es\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-draggable","es\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-droppable","es\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-list","es\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-item","es\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","es\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-selection-area","es\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-drag-area","es\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD y monitores","\u002Fes\u002Fdocs\u002Fapi\u002Fuse-dnd","es\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"Eventos","\u002Fes\u002Fdocs\u002Fapi\u002Fevents","es\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"Modificadores y colisión","\u002Fes\u002Fdocs\u002Fapi\u002Fmodifiers","es\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview y props del overlay","\u002Fes\u002Fdocs\u002Fapi\u002Fdrag-preview","es\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fes\u002Fdocs\u002Fapi\u002Fanimations","es\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"Sensores","\u002Fes\u002Fdocs\u002Fapi\u002Fsensors","es\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"Tipos comunes","\u002Fes\u002Fdocs\u002Fapi\u002Ftypes","es\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"Ejemplos","\u002Fes\u002Fdocs\u002Fexamples","es\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"Resumen",{"title":438,"path":439,"stem":440,"icon":210},"Tablero de proyecto","\u002Fes\u002Fdocs\u002Fexamples\u002Fboard","es\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"Calendario semanal","\u002Fes\u002Fdocs\u002Fexamples\u002Fcalendar","es\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"Gestor de archivos","\u002Fes\u002Fdocs\u002Fexamples\u002Ffile-manager","es\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"Editor de bloques","\u002Fes\u002Fdocs\u002Fexamples\u002Fblock-editor","es\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"Ajedrez","\u002Fes\u002Fdocs\u002Fexamples\u002Fchess","es\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"Constructor de formularios","\u002Fes\u002Fdocs\u002Fexamples\u002Fform-builder","es\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"Lienzo de diseño","\u002Fes\u002Fdocs\u002Fexamples\u002Fdesign-canvas","es\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"Constructor de páginas","\u002Fes\u002Fdocs\u002Fexamples\u002Fpage-builder","es\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"Tabla de datos","\u002Fes\u002Fdocs\u002Fexamples\u002Fdata-table","es\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":134,"body":477,"category":123,"description":662,"extension":663,"links":664,"meta":665,"navigation":667,"path":383,"seo":668,"stem":384,"__hash__":669},"docs_es\u002Fes\u002Fdocs\u002F3.api\u002F02.make-draggable.md",{"type":478,"value":479,"toc":656},"minimark",[480,483,598,611,617,622,626,630,633,637,649,652],[481,482],"api-signature",{"name":134},[484,485,490],"pre",{"className":486,"code":487,"language":488,"meta":489,"style":489},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","const el = useTemplateRef\u003CHTMLElement>('el');\nconst { isDragging } = makeDraggable(el, { id: 'card', type: 'card', data: { title } });\n","ts","",[491,492,493,531],"code",{"__ignoreMap":489},[494,495,498,502,506,510,514,517,521,524,528],"span",{"class":496,"line":497},"line",1,[494,499,501],{"class":500},"s78Kj","const",[494,503,505],{"class":504},"snmWg"," el ",[494,507,509],{"class":508},"s6cML","=",[494,511,513],{"class":512},"sbwC8"," useTemplateRef",[494,515,516],{"class":508},"\u003C",[494,518,520],{"class":519},"sR6Ar","HTMLElement",[494,522,523],{"class":508},">(",[494,525,527],{"class":526},"sN8r7","'el'",[494,529,530],{"class":508},");\n",[494,532,534,536,539,542,545,548,551,554,557,560,562,566,569,572,574,577,579,581,583,586,588,590,593,595],{"class":496,"line":533},2,[494,535,501],{"class":500},[494,537,538],{"class":508}," {",[494,540,541],{"class":504}," isDragging ",[494,543,544],{"class":508},"}",[494,546,547],{"class":508}," =",[494,549,550],{"class":512}," makeDraggable",[494,552,553],{"class":508},"(",[494,555,556],{"class":504},"el",[494,558,559],{"class":508},",",[494,561,538],{"class":508},[494,563,565],{"class":564},"sVvmN"," id",[494,567,568],{"class":508},":",[494,570,571],{"class":526}," 'card'",[494,573,559],{"class":508},[494,575,576],{"class":564}," type",[494,578,568],{"class":508},[494,580,571],{"class":526},[494,582,559],{"class":508},[494,584,585],{"class":564}," data",[494,587,568],{"class":508},[494,589,538],{"class":508},[494,591,592],{"class":504}," title ",[494,594,544],{"class":508},[494,596,597],{"class":508}," });\n",[599,600,601,602,605,606,610],"p",{},"Consulta ",[603,604,316],"a",{"href":49},". Los ítems ordenables también son\nelementos arrastrables: ",[603,607,608],{"href":148},[491,609,147],{}," acepta las mismas\nopciones y alguna más.",[612,613],"example",{"height":614,"hint":615,"name":616},"22rem","Arrastra cada tarjeta. Suéltala y volverá a su sitio","draggable",[618,619,621],"h2",{"id":620},"options","Opciones",[623,624],"api-table",{"name":625},"DraggableOptions",[618,627,629],{"id":628},"returns","Valor devuelto",[623,631],{"name":632},"DraggableReturn",[618,634,636],{"id":635},"out-of-the-page","Fuera de la página",[599,638,639,640,643,644,648],{},"Lo que lleva un arrastre ",[491,641,642],{},"native"," fuera de la página. Consulta ",[603,645,647],{"href":646},"\u002Fdocs\u002Fguides\u002Fnative#out-of-the-page","archivos y otras apps",".",[623,650],{"name":651},"NativeDragOptions",[653,654,655],"style",{},"html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .sR6Ar, html code.shiki .sR6Ar{--shiki-light:#0F766E;--shiki-default:#0F766E;--shiki-dark:#7EE0C0}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}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":489,"searchDepth":657,"depth":657,"links":658},3,[659,660,661],{"id":620,"depth":533,"text":621},{"id":628,"depth":533,"text":629},{"id":635,"depth":533,"text":636},"Hace que un elemento se pueda arrastrar — arrastre libre, o hacia los destinos de drop que lo aceptan.","md",null,{"source":666},"6d5b16a97c",{"icon":51},{"title":134,"description":662},"Roso-TuAqfNOvHn7kfKaVlRx6w9MnboM_V10Gkx8l4U",[671,673],{"title":129,"path":380,"stem":381,"description":672,"icon":132},"El componente que gestiona el arrastre — la entrada, el overlay, la selección, el desplazamiento automático y la región viva — para todo lo que se renderiza dentro de él.",{"title":138,"path":386,"stem":387,"description":674,"icon":141},"Convierte un elemento en un destino de drop, con reglas sobre lo que acepta y hooks para el drop.",[676,681],{"name":677,"lang":678,"code":679,"html":680},"index.vue","vue","\u003Cscript setup lang=\"ts\">\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport DragCard from '.\u002FDragCard.vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- No drop target here: let go, and each card goes back where it was. -->\n  \u003CDnDProvider>\n    \u003Cdiv class=\"cards\">\n      \u003CDragCard title=\"Grab it anywhere\" code=\"makeDraggable(el)\" \u002F>\n      \u003CDragCard title=\"Grab the handle\" code=\"{ handle: grip }\" handle \u002F>\n      \u003CDragCard title=\"It moves itself\" code=\"{ overlay: false }\" self \u002F>\n      \u003CDragCard title=\"Not now\" code=\"{ disabled: true }\" disabled \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.cards {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 220px));\n  gap: 14px;\n}\n\n@media (max-width: 480px) {\n  .cards {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DragCard \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FDragCard.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  <!-- No drop target here: let go, and each card goes back where it was. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"cards\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <DragCard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Grab it anywhere\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"makeDraggable(el)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <DragCard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Grab the handle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ handle: grip }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <DragCard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"It moves itself\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ overlay: false }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <DragCard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Not now\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ disabled: true }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">cards\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 220\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">max-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 480\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">cards\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":682,"lang":678,"code":683,"html":684},"DragCard.vue","\u003Cscript setup lang=\"ts\">\nimport { computed, useTemplateRef } from 'vue';\nimport { makeDraggable } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ title: string; code: string; handle?: boolean; self?: boolean; disabled?: boolean }>();\n\nconst el = useTemplateRef\u003CHTMLElement>('el');\nconst grip = useTemplateRef\u003CHTMLElement>('grip');\nconst { isDragging, transform } = makeDraggable(el, {\n  \u002F\u002F Only the grip starts a drag: the rest of the card stays clickable and selectable.\n  handle: () => (props.handle ? grip.value : undefined),\n  \u002F\u002F No overlay: the card itself moves, by the `transform` below.\n  overlay: !props.self,\n  disabled: () => !!props.disabled,\n});\nconst style = computed(() => (transform.value ? { transform: `translate(${transform.value.x}px, ${transform.value.y}px)` } : undefined));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" class=\"card\" :class=\"{ dragging: isDragging, handled: handle, self, disabled }\" :style=\"style\">\n    \u003Cbutton v-if=\"handle\" ref=\"grip\" type=\"button\" class=\"grip\" aria-label=\"Drag\">⋮⋮\u003C\u002Fbutton>\n    \u003Cstrong>{{ title }}\u003C\u002Fstrong>\n    \u003Ccode>{{ code }}\u003C\u002Fcode>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n  border-radius: 12px;\n  background: Canvas;\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, currentColor 10%, transparent),\n    0 4px 10px -6px rgb(0 0 0 \u002F 0.35);\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n  touch-action: none;\n}\n\n.card:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n\u002F* With an overlay, the card stays as the slot it will go back to. *\u002F\n.card.dragging:not(.self) {\n  opacity: 0.35;\n}\n\n\u002F* Without one, the card is what moves. Back home, it eases in. *\u002F\n.card.self {\n  transition: transform 0.25s ease;\n}\n\n.card.self.dragging {\n  z-index: 1;\n  transition: none;\n  box-shadow:\n    0 0 0 1px #42b883,\n    0 18px 32px -14px rgb(0 0 0 \u002F 0.5);\n}\n\n.card.handled {\n  padding-left: 40px;\n  cursor: default;\n}\n\n.card.disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n\u002F* A button: it takes focus, so a keyboard drag starts from it too. *\u002F\n.grip {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  translate: 0 -50%;\n  padding: 4px 2px;\n  border: 0;\n  border-radius: 4px;\n  background: none;\n  color: inherit;\n  font-size: 13px;\n  letter-spacing: -2px;\n  opacity: 0.5;\n  cursor: grab;\n}\n\n.grip:hover {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  opacity: 1;\n}\n\ncode {\n  font: 11px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  color: #42b883;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeDraggable \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> grip \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'grip'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isDragging\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeDraggable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Only the grip starts a drag: the rest of the card stays clickable and selectable.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">handle \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F No overlay: the card itself moves, by the `transform` below.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> style \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `translate(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px)`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"card\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ dragging: isDragging, handled: handle, self, disabled }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"style\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"handle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"grip\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"grip\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Drag\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">⋮⋮\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <strong>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <code>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ code }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fcode>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.35\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  touch-action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* With an overlay, the card stays as the slot it will go back to. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">dragging\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">not\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.35\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Without one, the card is what moves. Back home, it eases in. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ease\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">dragging\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  z-index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 32\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">handled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> not-allowed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* A button: it takes focus, so a keyboard drag starts from it too. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  letter-spacing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1793707572291]