[{"data":1,"prerenderedAt":1817},["ShallowReactive",2],{"navigation_docs":3,"-guide-styling-and-animations":188,"-guide-styling-and-animations-surround":1812},[4,9,27,52,101,130,163],{"title":5,"path":6,"stem":7,"icon":8},"Playground","\u002Fplayground","1.playground","i-lucide-flask-conical",{"title":10,"path":11,"stem":12,"children":13,"page":26},"Getting Started","\u002Fgetting-started","2.getting-started",[14,18,22],{"title":15,"path":16,"stem":17},"Introduction","\u002Fgetting-started\u002Fintroduction","2.getting-started\u002F1.introduction",{"title":19,"path":20,"stem":21},"Installation","\u002Fgetting-started\u002Finstallation","2.getting-started\u002F2.installation",{"title":23,"path":24,"stem":25},"First modal","\u002Fgetting-started\u002Ffirst-modal","2.getting-started\u002F3.first-modal",false,{"title":28,"path":29,"stem":30,"children":31,"page":26},"Concepts","\u002Fconcepts","3.concepts",[32,36,40,44,48],{"title":33,"path":34,"stem":35},"Architecture","\u002Fconcepts\u002Farchitecture","3.concepts\u002F1.architecture",{"title":37,"path":38,"stem":39},"Imperative flow","\u002Fconcepts\u002Fimperative-flow","3.concepts\u002F2.imperative-flow",{"title":41,"path":42,"stem":43},"Stacking","\u002Fconcepts\u002Fstacking","3.concepts\u002F3.stacking",{"title":45,"path":46,"stem":47},"Groups","\u002Fconcepts\u002Fgroups","3.concepts\u002F4.groups",{"title":49,"path":50,"stem":51},"Headless primitives","\u002Fconcepts\u002Fheadless-primitives","3.concepts\u002F5.headless-primitives",{"title":53,"path":54,"stem":55,"children":56,"page":26},"Guide","\u002Fguide","4.guide",[57,61,65,69,73,77,81,85,89,93,97],{"title":58,"path":59,"stem":60},"Writing a modal","\u002Fguide\u002Fwriting-a-modal","4.guide\u002F01.writing-a-modal",{"title":62,"path":63,"stem":64},"Opening & closing","\u002Fguide\u002Fopening-and-closing","4.guide\u002F02.opening-and-closing",{"title":66,"path":67,"stem":68},"Props & results","\u002Fguide\u002Fpassing-props-and-results","4.guide\u002F03.passing-props-and-results",{"title":70,"path":71,"stem":72},"Behavior options","\u002Fguide\u002Fbehavior-options","4.guide\u002F04.behavior-options",{"title":74,"path":75,"stem":76},"Animations & styling","\u002Fguide\u002Fstyling-and-animations","4.guide\u002F05.styling-and-animations",{"title":78,"path":79,"stem":80},"useModal composable","\u002Fguide\u002Fusemodal-composable","4.guide\u002F06.usemodal-composable",{"title":82,"path":83,"stem":84},"Modal context","\u002Fguide\u002Fmodal-context","4.guide\u002F07.modal-context",{"title":86,"path":87,"stem":88},"Multiple targets","\u002Fguide\u002Fmultiple-targets","4.guide\u002F08.multiple-targets",{"title":90,"path":91,"stem":92},"Overlay","\u002Fguide\u002Foverlay","4.guide\u002F09.overlay",{"title":94,"path":95,"stem":96},"Async components","\u002Fguide\u002Fasync-components","4.guide\u002F10.async-components",{"title":98,"path":99,"stem":100},"TypeScript","\u002Fguide\u002Ftypescript","4.guide\u002F11.typescript",{"title":102,"path":103,"stem":104,"children":105,"page":26},"Recipes","\u002Frecipes","5.recipes",[106,110,114,118,122,126],{"title":107,"path":108,"stem":109},"Confirm dialog","\u002Frecipes\u002Fconfirm-dialog","5.recipes\u002F1.confirm-dialog",{"title":111,"path":112,"stem":113},"Form modal with validation","\u002Frecipes\u002Fform-modal-with-validation","5.recipes\u002F2.form-modal-with-validation",{"title":115,"path":116,"stem":117},"Image lightbox","\u002Frecipes\u002Fimage-lightbox","5.recipes\u002F3.image-lightbox",{"title":119,"path":120,"stem":121},"Command palette","\u002Frecipes\u002Fcommand-palette","5.recipes\u002F4.command-palette",{"title":123,"path":124,"stem":125},"Nested flows \u002F wizards","\u002Frecipes\u002Fnested-flows","5.recipes\u002F5.nested-flows",{"title":127,"path":128,"stem":129},"Global error modal","\u002Frecipes\u002Fglobal-error-modal","5.recipes\u002F6.global-error-modal",{"title":131,"path":132,"stem":133,"children":134,"page":26},"Api","\u002Fapi","6.api",[135,139,143,147,151,155,159],{"title":136,"path":137,"stem":138},"Functions","\u002Fapi\u002Ffunctions","6.api\u002F1.functions",{"title":140,"path":141,"stem":142},"Components","\u002Fapi\u002Fcomponents","6.api\u002F2.components",{"title":144,"path":145,"stem":146},"Composables","\u002Fapi\u002Fcomposables","6.api\u002F3.composables",{"title":148,"path":149,"stem":150},"Plugin","\u002Fapi\u002Fplugin","6.api\u002F4.plugin",{"title":152,"path":153,"stem":154},"State helpers","\u002Fapi\u002Fstate","6.api\u002F5.state",{"title":156,"path":157,"stem":158},"Global events","\u002Fapi\u002Fevents","6.api\u002F6.events",{"title":160,"path":161,"stem":162},"Types","\u002Fapi\u002Ftypes","6.api\u002F7.types",{"title":164,"path":165,"stem":166,"children":167,"page":26},"Resources","\u002Fresources","7.resources",[168,172,176,180,184],{"title":169,"path":170,"stem":171},"Migration from v1","\u002Fresources\u002Fmigration-from-v1","7.resources\u002F1.migration-from-v1",{"title":173,"path":174,"stem":175},"FAQ","\u002Fresources\u002Ffaq","7.resources\u002F2.faq",{"title":177,"path":178,"stem":179},"Troubleshooting","\u002Fresources\u002Ftroubleshooting","7.resources\u002F3.troubleshooting",{"title":181,"path":182,"stem":183},"Comparison","\u002Fresources\u002Fcomparison","7.resources\u002F4.comparison",{"title":185,"path":186,"stem":187},"Changelog","\u002Fresources\u002Fchangelog","7.resources\u002F5.changelog",{"id":189,"title":74,"body":190,"description":1806,"extension":1807,"links":1808,"meta":1809,"navigation":719,"path":75,"seo":1810,"stem":76,"__hash__":1811},"docs\u002F4.guide\u002F05.styling-and-animations.md",{"type":191,"value":192,"toc":1793},"minimark",[193,197,211,214,219,373,377,389,442,519,527,536,585,647,677,681,1082,1086,1089,1120,1123,1130,1136,1242,1245,1308,1312,1321,1365,1370,1425,1428,1473,1478,1481,1565,1569,1572,1666,1681,1780,1790],[194,195,74],"h1",{"id":196},"animations-styling",[198,199,200,201,205,206,210],"p",{},"The package ships ",[202,203,204],"strong",{},"zero visual styles and zero animations",". You drive everything via ",[207,208,209],"code",{},"data-state=\"open\" | \"closed\""," attributes on the rendered elements.",[198,212,213],{},"The package waits for your CSS animations\u002Ftransitions to finish before unmounting — close animations always play to completion.",[215,216,218],"h2",{"id":217},"data-attributes-you-can-target","Data attributes you can target",[220,221,222,238],"table",{},[223,224,225],"thead",{},[226,227,228,232,235],"tr",{},[229,230,231],"th",{},"Selector",[229,233,234],{},"Where it lives",[229,236,237],{},"Notes",[239,240,241,262,280,296,313,334,353],"tbody",{},[226,242,243,249,255],{},[244,245,246],"td",{},[207,247,248],{},"[data-modal-region]",[244,250,251,254],{},[207,252,253],{},"\u003CModalTarget>"," root",[244,256,257,258,261],{},"No ",[207,259,260],{},"data-state"," — layout anchor",[226,263,264,269,274],{},[244,265,266],{},[207,267,268],{},"[data-modal-overlay][data-state]",[244,270,271],{},[207,272,273],{},"\u003CModalOverlay>",[244,275,276,279],{},[207,277,278],{},"data-state=\"open\""," while group has any active modal",[226,281,282,287,292],{},[244,283,284],{},[207,285,286],{},"[data-modal-root]",[244,288,289],{},[207,290,291],{},"\u003CModalRoot>",[244,293,257,294,261],{},[207,295,260],{},[226,297,298,303,308],{},[244,299,300],{},[207,301,302],{},"[data-modal-content][data-state]",[244,304,305],{},[207,306,307],{},"\u003CModalContent>",[244,309,310,312],{},[207,311,278],{}," while this is the visible top",[226,314,315,320,327],{},[244,316,317],{},[207,318,319],{},"[data-modal-content][data-instant]",[244,321,322,323,326],{},"Lifetime of ",[207,324,325],{},"instantEnter"," modal",[244,328,329,330,333],{},"Bundled rule scoped to ",[207,331,332],{},"[data-state=\"open\"]"," suppresses the enter animation only",[226,335,336,341,347],{},[244,337,338],{},[207,339,340],{},"[data-modal-overlay][data-instant]",[244,342,343,344,346],{},"While a ",[207,345,325],{}," modal is on top",[244,348,349,350,352],{},"Same rule applied to ",[207,351,273],{}," so overlay enter animation skips in sync",[226,354,355,364,367],{},[244,356,357,360,361],{},[207,358,359],{},"[data-modal-title]",", ",[207,362,363],{},"[data-modal-description]",[244,365,366],{},"Title \u002F description elements",[244,368,369,370,372],{},"Semantic anchors (no ",[207,371,260],{},")",[215,374,376],{"id":375},"positioning-rule-read-this-first","Positioning rule (read this first)",[198,378,379,381,382,385,386],{},[207,380,291],{}," already covers the whole target — its bundled CSS is ",[207,383,384],{},"position: absolute; inset: 0",". ",[202,387,388],{},"It is the positioning context for the card.",[390,391,392,406,412],"ul",{},[393,394,395,396,360,399,402,403,405],"li",{},"Put layout utilities (",[207,397,398],{},"flex",[207,400,401],{},"grid",", padding, alignment) on ",[207,404,291],{},".",[393,407,408,409,411],{},"Style ",[207,410,307],{}," as a normal block: width, padding, background, border, shadow, animations.",[393,413,414,415,418,419,360,422,360,425,360,428,360,431,434,435,438,439,441],{},"Do ",[202,416,417],{},"not"," put ",[207,420,421],{},"position: fixed",[207,423,424],{},"position: absolute",[207,426,427],{},"inset-0",[207,429,430],{},"top-*",[207,432,433],{},"left-*",", or ",[207,436,437],{},"-translate-*"," on ",[207,440,307],{},". You will fight the parent and break stacking.",[443,444,449],"pre",{"className":445,"code":446,"language":447,"meta":448,"style":448},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- correct -->\n\u003CModalRoot class=\"flex items-center justify-center p-4\">\n  \u003CModalContent class=\"w-full max-w-md bg-white rounded-lg p-6 shadow-xl\">\n    \u003Cslot \u002F>\n  \u003C\u002FModalContent>\n\u003C\u002FModalRoot>\n","vue","",[207,450,451,460,490,497,503,509],{"__ignoreMap":448},[452,453,456],"span",{"class":454,"line":455},"line",1,[452,457,459],{"class":458},"sHwdD","\u003C!-- correct -->\n",[452,461,463,467,471,475,478,481,485,487],{"class":454,"line":462},2,[452,464,466],{"class":465},"sMK4o","\u003C",[452,468,470],{"class":469},"swJcz","ModalRoot",[452,472,474],{"class":473},"spNyl"," class",[452,476,477],{"class":465},"=",[452,479,480],{"class":465},"\"",[452,482,484],{"class":483},"sfazB","flex items-center justify-center p-4",[452,486,480],{"class":465},[452,488,489],{"class":465},">\n",[452,491,493],{"class":454,"line":492},3,[452,494,496],{"class":495},"sTEyZ","  \u003CModalContent class=\"w-full max-w-md bg-white rounded-lg p-6 shadow-xl\">\n",[452,498,500],{"class":454,"line":499},4,[452,501,502],{"class":495},"    \u003Cslot \u002F>\n",[452,504,506],{"class":454,"line":505},5,[452,507,508],{"class":495},"  \u003C\u002FModalContent>\n",[452,510,512,515,517],{"class":454,"line":511},6,[452,513,514],{"class":465},"\u003C\u002F",[452,516,470],{"class":469},[452,518,489],{"class":465},[215,520,522,523,526],{"id":521},"strategy-1-tailwind-tw-animate-css-shadcn-style","Strategy 1 — Tailwind + ",[207,524,525],{},"tw-animate-css"," (shadcn-style)",[198,528,529,530,532,533,535],{},"Pass utility classes directly to ",[207,531,273],{}," and ",[207,534,307],{},":",[443,537,539],{"className":445,"code":538,"language":447,"meta":448,"style":448},"\u003CModalTarget group=\"default\">\n  \u003CModalOverlay class=\"bg-black\u002F80\n    data-[state=open]:animate-in   data-[state=closed]:animate-out\n    data-[state=open]:fade-in-0    data-[state=closed]:fade-out-0\" \u002F>\n\u003C\u002FModalTarget>\n",[207,540,541,562,567,572,577],{"__ignoreMap":448},[452,542,543,545,548,551,553,555,558,560],{"class":454,"line":455},[452,544,466],{"class":465},[452,546,547],{"class":469},"ModalTarget",[452,549,550],{"class":473}," group",[452,552,477],{"class":465},[452,554,480],{"class":465},[452,556,557],{"class":483},"default",[452,559,480],{"class":465},[452,561,489],{"class":465},[452,563,564],{"class":454,"line":462},[452,565,566],{"class":495},"  \u003CModalOverlay class=\"bg-black\u002F80\n",[452,568,569],{"class":454,"line":492},[452,570,571],{"class":495},"    data-[state=open]:animate-in   data-[state=closed]:animate-out\n",[452,573,574],{"class":454,"line":499},[452,575,576],{"class":495},"    data-[state=open]:fade-in-0    data-[state=closed]:fade-out-0\" \u002F>\n",[452,578,579,581,583],{"class":454,"line":505},[452,580,514],{"class":465},[452,582,547],{"class":469},[452,584,489],{"class":465},[443,586,589],{"className":445,"code":587,"filename":588,"language":447,"meta":448,"style":448},"\u003CModalRoot class=\"flex items-center justify-center\">\n  \u003CModalContent class=\"bg-white rounded-lg p-6 shadow-xl\n    data-[state=open]:animate-in   data-[state=closed]:animate-out\n    data-[state=open]:fade-in-0    data-[state=closed]:fade-out-0\n    data-[state=open]:zoom-in-95   data-[state=closed]:zoom-out-95\">\n    \u003Cslot \u002F>\n  \u003C\u002FModalContent>\n\u003C\u002FModalRoot>\n","MyDialog.vue",[207,590,591,610,615,619,624,629,633,638],{"__ignoreMap":448},[452,592,593,595,597,599,601,603,606,608],{"class":454,"line":455},[452,594,466],{"class":465},[452,596,470],{"class":469},[452,598,474],{"class":473},[452,600,477],{"class":465},[452,602,480],{"class":465},[452,604,605],{"class":483},"flex items-center justify-center",[452,607,480],{"class":465},[452,609,489],{"class":465},[452,611,612],{"class":454,"line":462},[452,613,614],{"class":495},"  \u003CModalContent class=\"bg-white rounded-lg p-6 shadow-xl\n",[452,616,617],{"class":454,"line":492},[452,618,571],{"class":495},[452,620,621],{"class":454,"line":499},[452,622,623],{"class":495},"    data-[state=open]:fade-in-0    data-[state=closed]:fade-out-0\n",[452,625,626],{"class":454,"line":505},[452,627,628],{"class":495},"    data-[state=open]:zoom-in-95   data-[state=closed]:zoom-out-95\">\n",[452,630,631],{"class":454,"line":511},[452,632,502],{"class":495},[452,634,636],{"class":454,"line":635},7,[452,637,508],{"class":495},[452,639,641,643,645],{"class":454,"line":640},8,[452,642,514],{"class":465},[452,644,470],{"class":469},[452,646,489],{"class":465},[198,648,649,650,658,659,662,663,666,667,666,670,666,673,676],{},"Requires the ",[651,652,656],"a",{"href":653,"rel":654},"https:\u002F\u002Fgithub.com\u002FWombosvideo\u002Ftw-animate-css",[655],"nofollow",[207,657,525],{}," plugin (or older ",[207,660,661],{},"tailwindcss-animate",") for the ",[207,664,665],{},"animate-in","\u002F",[207,668,669],{},"animate-out",[207,671,672],{},"fade-in-N",[207,674,675],{},"zoom-in-N"," utilities.",[215,678,680],{"id":679},"strategy-2-custom-css-keyframes","Strategy 2 — Custom CSS keyframes",[443,682,684],{"className":445,"code":683,"language":447,"meta":448,"style":448},"\u003CModalRoot>\n  \u003CModalContent class=\"my-card\">\n    \u003Cslot \u002F>\n  \u003C\u002FModalContent>\n\u003C\u002FModalRoot>\n\n\u003Cstyle>\n.my-card {\n  background: white;\n  border-radius: 12px;\n  padding: 24px;\n  \u002F* starting values for enter *\u002F\n  opacity: 0;\n  transform: translateY(8px) scale(0.98);\n}\n.my-card[data-state='open'] {\n  animation: card-in 200ms ease forwards;\n}\n.my-card[data-state='closed'] {\n  animation: card-out 150ms ease forwards;\n}\n\n@keyframes card-in {\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n@keyframes card-out {\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.98);\n  }\n}\n\u003C\u002Fstyle>\n",[207,685,686,694,699,703,707,715,721,730,741,756,770,783,789,802,833,839,866,885,890,914,931,936,941,954,962,975,1001,1007,1012,1022,1029,1040,1063,1068,1073],{"__ignoreMap":448},[452,687,688,690,692],{"class":454,"line":455},[452,689,466],{"class":465},[452,691,470],{"class":469},[452,693,489],{"class":465},[452,695,696],{"class":454,"line":462},[452,697,698],{"class":495},"  \u003CModalContent class=\"my-card\">\n",[452,700,701],{"class":454,"line":492},[452,702,502],{"class":495},[452,704,705],{"class":454,"line":499},[452,706,508],{"class":495},[452,708,709,711,713],{"class":454,"line":505},[452,710,514],{"class":465},[452,712,470],{"class":469},[452,714,489],{"class":465},[452,716,717],{"class":454,"line":511},[452,718,720],{"emptyLinePlaceholder":719},true,"\n",[452,722,723,725,728],{"class":454,"line":635},[452,724,466],{"class":465},[452,726,727],{"class":469},"style",[452,729,489],{"class":465},[452,731,732,734,738],{"class":454,"line":640},[452,733,405],{"class":465},[452,735,737],{"class":736},"sBMFI","my-card",[452,739,740],{"class":465}," {\n",[452,742,744,748,750,753],{"class":454,"line":743},9,[452,745,747],{"class":746},"sqsOY","  background",[452,749,535],{"class":465},[452,751,752],{"class":495}," white",[452,754,755],{"class":465},";\n",[452,757,759,762,764,768],{"class":454,"line":758},10,[452,760,761],{"class":746},"  border-radius",[452,763,535],{"class":465},[452,765,767],{"class":766},"sbssI"," 12px",[452,769,755],{"class":465},[452,771,773,776,778,781],{"class":454,"line":772},11,[452,774,775],{"class":746},"  padding",[452,777,535],{"class":465},[452,779,780],{"class":766}," 24px",[452,782,755],{"class":465},[452,784,786],{"class":454,"line":785},12,[452,787,788],{"class":458},"  \u002F* starting values for enter *\u002F\n",[452,790,792,795,797,800],{"class":454,"line":791},13,[452,793,794],{"class":746},"  opacity",[452,796,535],{"class":465},[452,798,799],{"class":766}," 0",[452,801,755],{"class":465},[452,803,805,808,810,814,817,820,822,825,827,830],{"class":454,"line":804},14,[452,806,807],{"class":746},"  transform",[452,809,535],{"class":465},[452,811,813],{"class":812},"s2Zo4"," translateY",[452,815,816],{"class":465},"(",[452,818,819],{"class":766},"8px",[452,821,372],{"class":465},[452,823,824],{"class":812}," scale",[452,826,816],{"class":465},[452,828,829],{"class":766},"0.98",[452,831,832],{"class":465},");\n",[452,834,836],{"class":454,"line":835},15,[452,837,838],{"class":465},"}\n",[452,840,842,844,846,849,851,853,856,859,861,864],{"class":454,"line":841},16,[452,843,405],{"class":465},[452,845,737],{"class":736},[452,847,848],{"class":465},"[",[452,850,260],{"class":473},[452,852,477],{"class":465},[452,854,855],{"class":465},"'",[452,857,858],{"class":483},"open",[452,860,855],{"class":465},[452,862,863],{"class":465},"]",[452,865,740],{"class":465},[452,867,869,872,874,877,880,883],{"class":454,"line":868},17,[452,870,871],{"class":746},"  animation",[452,873,535],{"class":465},[452,875,876],{"class":495}," card-in ",[452,878,879],{"class":766},"200ms",[452,881,882],{"class":495}," ease forwards",[452,884,755],{"class":465},[452,886,888],{"class":454,"line":887},18,[452,889,838],{"class":465},[452,891,893,895,897,899,901,903,905,908,910,912],{"class":454,"line":892},19,[452,894,405],{"class":465},[452,896,737],{"class":736},[452,898,848],{"class":465},[452,900,260],{"class":473},[452,902,477],{"class":465},[452,904,855],{"class":465},[452,906,907],{"class":483},"closed",[452,909,855],{"class":465},[452,911,863],{"class":465},[452,913,740],{"class":465},[452,915,917,919,921,924,927,929],{"class":454,"line":916},20,[452,918,871],{"class":746},[452,920,535],{"class":465},[452,922,923],{"class":495}," card-out ",[452,925,926],{"class":766},"150ms",[452,928,882],{"class":495},[452,930,755],{"class":465},[452,932,934],{"class":454,"line":933},21,[452,935,838],{"class":465},[452,937,939],{"class":454,"line":938},22,[452,940,720],{"emptyLinePlaceholder":719},[452,942,944,948,952],{"class":454,"line":943},23,[452,945,947],{"class":946},"s7zQu","@keyframes",[452,949,951],{"class":950},"sHdIc"," card-in",[452,953,740],{"class":465},[452,955,957,960],{"class":454,"line":956},24,[452,958,959],{"class":736},"  to",[452,961,740],{"class":465},[452,963,965,968,970,973],{"class":454,"line":964},25,[452,966,967],{"class":746},"    opacity",[452,969,535],{"class":465},[452,971,972],{"class":766}," 1",[452,974,755],{"class":465},[452,976,978,981,983,985,987,990,992,994,996,999],{"class":454,"line":977},26,[452,979,980],{"class":746},"    transform",[452,982,535],{"class":465},[452,984,813],{"class":812},[452,986,816],{"class":465},[452,988,989],{"class":766},"0",[452,991,372],{"class":465},[452,993,824],{"class":812},[452,995,816],{"class":465},[452,997,998],{"class":766},"1",[452,1000,832],{"class":465},[452,1002,1004],{"class":454,"line":1003},27,[452,1005,1006],{"class":465},"  }\n",[452,1008,1010],{"class":454,"line":1009},28,[452,1011,838],{"class":465},[452,1013,1015,1017,1020],{"class":454,"line":1014},29,[452,1016,947],{"class":946},[452,1018,1019],{"class":950}," card-out",[452,1021,740],{"class":465},[452,1023,1025,1027],{"class":454,"line":1024},30,[452,1026,959],{"class":736},[452,1028,740],{"class":465},[452,1030,1032,1034,1036,1038],{"class":454,"line":1031},31,[452,1033,967],{"class":746},[452,1035,535],{"class":465},[452,1037,799],{"class":766},[452,1039,755],{"class":465},[452,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061],{"class":454,"line":1042},32,[452,1044,980],{"class":746},[452,1046,535],{"class":465},[452,1048,813],{"class":812},[452,1050,816],{"class":465},[452,1052,819],{"class":766},[452,1054,372],{"class":465},[452,1056,824],{"class":812},[452,1058,816],{"class":465},[452,1060,829],{"class":766},[452,1062,832],{"class":465},[452,1064,1066],{"class":454,"line":1065},33,[452,1067,1006],{"class":465},[452,1069,1071],{"class":454,"line":1070},34,[452,1072,838],{"class":465},[452,1074,1076,1078,1080],{"class":454,"line":1075},35,[452,1077,514],{"class":465},[452,1079,727],{"class":469},[452,1081,489],{"class":465},[215,1083,1085],{"id":1084},"strategy-3-no-animation","Strategy 3 — No animation",[198,1087,1088],{},"Skip animation entirely:",[443,1090,1092],{"className":445,"code":1091,"language":447,"meta":448,"style":448},"\u003CModalOverlay class=\"bg-black\u002F50\" \u002F>\n\u003C!-- no transition, no @keyframes — overlay just appears\u002Fdisappears -->\n",[207,1093,1094,1115],{"__ignoreMap":448},[452,1095,1096,1098,1101,1103,1105,1107,1110,1112],{"class":454,"line":455},[452,1097,466],{"class":465},[452,1099,1100],{"class":469},"ModalOverlay",[452,1102,474],{"class":473},[452,1104,477],{"class":465},[452,1106,480],{"class":465},[452,1108,1109],{"class":483},"bg-black\u002F50",[452,1111,480],{"class":465},[452,1113,1114],{"class":465}," \u002F>\n",[452,1116,1117],{"class":454,"line":462},[452,1118,1119],{"class":458},"\u003C!-- no transition, no @keyframes — overlay just appears\u002Fdisappears -->\n",[198,1121,1122],{},"With no animation to wait for, the modal unmounts immediately on close.",[215,1124,1126,1127,1129],{"id":1125},"css-vars-on-modaltarget-optional-convenience","CSS-vars on ",[207,1128,253],{}," (optional convenience)",[198,1131,1132,1133,535],{},"For static visuals on overlays without writing class rules, you can drive a few values via custom properties on the region — they cascade to descendant ",[207,1134,1135],{},"[data-modal-overlay]",[443,1137,1139],{"className":445,"code":1138,"language":447,"meta":448,"style":448},"\u003CModalTarget\n  :style=\"{\n    '--modal-overlay-bg': 'rgba(0,0,0,0.5)',\n    '--modal-overlay-backdrop': 'blur(2px)'\n  }\"\n  group=\"default\"\n>\n  \u003CModalOverlay \u002F>\n\u003C\u002FModalTarget>\n",[207,1140,1141,1148,1162,1185,1204,1212,1225,1229,1234],{"__ignoreMap":448},[452,1142,1143,1145],{"class":454,"line":455},[452,1144,466],{"class":465},[452,1146,1147],{"class":469},"ModalTarget\n",[452,1149,1150,1153,1155,1157,1159],{"class":454,"line":462},[452,1151,1152],{"class":465},"  :",[452,1154,727],{"class":473},[452,1156,477],{"class":465},[452,1158,480],{"class":465},[452,1160,1161],{"class":465},"{\n",[452,1163,1164,1167,1170,1172,1174,1177,1180,1182],{"class":454,"line":492},[452,1165,1166],{"class":465},"    '",[452,1168,1169],{"class":469},"--modal-overlay-bg",[452,1171,855],{"class":465},[452,1173,535],{"class":465},[452,1175,1176],{"class":465}," '",[452,1178,1179],{"class":483},"rgba(0,0,0,0.5)",[452,1181,855],{"class":465},[452,1183,1184],{"class":465},",\n",[452,1186,1187,1189,1192,1194,1196,1198,1201],{"class":454,"line":499},[452,1188,1166],{"class":465},[452,1190,1191],{"class":469},"--modal-overlay-backdrop",[452,1193,855],{"class":465},[452,1195,535],{"class":465},[452,1197,1176],{"class":465},[452,1199,1200],{"class":483},"blur(2px)",[452,1202,1203],{"class":465},"'\n",[452,1205,1206,1209],{"class":454,"line":505},[452,1207,1208],{"class":465},"  }",[452,1210,1211],{"class":465},"\"\n",[452,1213,1214,1217,1219,1221,1223],{"class":454,"line":511},[452,1215,1216],{"class":473},"  group",[452,1218,477],{"class":465},[452,1220,480],{"class":465},[452,1222,557],{"class":483},[452,1224,1211],{"class":465},[452,1226,1227],{"class":454,"line":635},[452,1228,489],{"class":465},[452,1230,1231],{"class":454,"line":640},[452,1232,1233],{"class":495},"  \u003CModalOverlay \u002F>\n",[452,1235,1236,1238,1240],{"class":454,"line":743},[452,1237,514],{"class":465},[452,1239,547],{"class":469},[452,1241,489],{"class":465},[198,1243,1244],{},"These are user-defined custom properties — the package gives no defaults; you wire them in your own CSS:",[443,1246,1250],{"className":1247,"code":1248,"language":1249,"meta":448,"style":448},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[data-modal-overlay] {\n  background: var(--modal-overlay-bg, transparent);\n  backdrop-filter: var(--modal-overlay-backdrop, none);\n}\n","css",[207,1251,1252,1263,1284,1304],{"__ignoreMap":448},[452,1253,1254,1256,1259,1261],{"class":454,"line":455},[452,1255,848],{"class":465},[452,1257,1258],{"class":473},"data-modal-overlay",[452,1260,863],{"class":465},[452,1262,740],{"class":465},[452,1264,1265,1267,1269,1272,1274,1276,1279,1282],{"class":454,"line":462},[452,1266,747],{"class":746},[452,1268,535],{"class":465},[452,1270,1271],{"class":812}," var",[452,1273,816],{"class":465},[452,1275,1169],{"class":495},[452,1277,1278],{"class":465},",",[452,1280,1281],{"class":495}," transparent",[452,1283,832],{"class":465},[452,1285,1286,1289,1291,1293,1295,1297,1299,1302],{"class":454,"line":492},[452,1287,1288],{"class":746},"  backdrop-filter",[452,1290,535],{"class":465},[452,1292,1271],{"class":812},[452,1294,816],{"class":465},[452,1296,1191],{"class":495},[452,1298,1278],{"class":465},[452,1300,1301],{"class":495}," none",[452,1303,832],{"class":465},[452,1305,1306],{"class":454,"line":499},[452,1307,838],{"class":465},[215,1309,1311],{"id":1310},"centering-the-card","Centering the card",[198,1313,1314,1316,1317,1320],{},[207,1315,291],{}," ships only ",[207,1318,1319],{},"position: absolute; inset: 0; pointer-events: auto",". Layout primitives are yours to choose — flex, grid, padding, anything.",[443,1322,1324],{"className":445,"code":1323,"language":447,"meta":448,"style":448},"\u003CModalRoot class=\"grid place-items-center\">\n  \u003CModalContent class=\"my-card\">\n    \u003Cslot \u002F>\n  \u003C\u002FModalContent>\n\u003C\u002FModalRoot>\n",[207,1325,1326,1345,1349,1353,1357],{"__ignoreMap":448},[452,1327,1328,1330,1332,1334,1336,1338,1341,1343],{"class":454,"line":455},[452,1329,466],{"class":465},[452,1331,470],{"class":469},[452,1333,474],{"class":473},[452,1335,477],{"class":465},[452,1337,480],{"class":465},[452,1339,1340],{"class":483},"grid place-items-center",[452,1342,480],{"class":465},[452,1344,489],{"class":465},[452,1346,1347],{"class":454,"line":462},[452,1348,698],{"class":495},[452,1350,1351],{"class":454,"line":492},[452,1352,502],{"class":495},[452,1354,1355],{"class":454,"line":499},[452,1356,508],{"class":495},[452,1358,1359,1361,1363],{"class":454,"line":505},[452,1360,514],{"class":465},[452,1362,470],{"class":469},[452,1364,489],{"class":465},[198,1366,1367,1368,535],{},"Or via CSS targeting ",[207,1369,286],{},[443,1371,1373],{"className":1247,"code":1372,"language":1249,"meta":448,"style":448},"[data-modal-root] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n",[207,1374,1375,1386,1398,1410,1421],{"__ignoreMap":448},[452,1376,1377,1379,1382,1384],{"class":454,"line":455},[452,1378,848],{"class":465},[452,1380,1381],{"class":473},"data-modal-root",[452,1383,863],{"class":465},[452,1385,740],{"class":465},[452,1387,1388,1391,1393,1396],{"class":454,"line":462},[452,1389,1390],{"class":746},"  display",[452,1392,535],{"class":465},[452,1394,1395],{"class":495}," flex",[452,1397,755],{"class":465},[452,1399,1400,1403,1405,1408],{"class":454,"line":492},[452,1401,1402],{"class":746},"  align-items",[452,1404,535],{"class":465},[452,1406,1407],{"class":495}," center",[452,1409,755],{"class":465},[452,1411,1412,1415,1417,1419],{"class":454,"line":499},[452,1413,1414],{"class":746},"  justify-content",[452,1416,535],{"class":465},[452,1418,1407],{"class":495},[452,1420,755],{"class":465},[452,1422,1423],{"class":454,"line":505},[452,1424,838],{"class":465},[198,1426,1427],{},"Top-anchored sheet (e.g. command palette):",[443,1429,1431],{"className":445,"code":1430,"language":447,"meta":448,"style":448},"\u003CModalRoot class=\"flex items-start justify-center pt-[15vh]\">\n  \u003CModalContent class=\"w-full max-w-xl ...\">\n    \u003Cslot \u002F>\n  \u003C\u002FModalContent>\n\u003C\u002FModalRoot>\n",[207,1432,1433,1452,1457,1461,1465],{"__ignoreMap":448},[452,1434,1435,1437,1439,1441,1443,1445,1448,1450],{"class":454,"line":455},[452,1436,466],{"class":465},[452,1438,470],{"class":469},[452,1440,474],{"class":473},[452,1442,477],{"class":465},[452,1444,480],{"class":465},[452,1446,1447],{"class":483},"flex items-start justify-center pt-[15vh]",[452,1449,480],{"class":465},[452,1451,489],{"class":465},[452,1453,1454],{"class":454,"line":462},[452,1455,1456],{"class":495},"  \u003CModalContent class=\"w-full max-w-xl ...\">\n",[452,1458,1459],{"class":454,"line":492},[452,1460,502],{"class":495},[452,1462,1463],{"class":454,"line":499},[452,1464,508],{"class":495},[452,1466,1467,1469,1471],{"class":454,"line":505},[452,1468,514],{"class":465},[452,1470,470],{"class":469},[452,1472,489],{"class":465},[215,1474,1476],{"id":1475},"prefers-reduced-motion",[207,1477,1475],{},[198,1479,1480],{},"Respect the user OS setting in your CSS:",[443,1482,1484],{"className":1247,"code":1483,"language":1249,"meta":448,"style":448},"@media (prefers-reduced-motion: reduce) {\n  [data-modal-overlay][data-state],\n  [data-modal-content][data-state] {\n    animation: none;\n    transition: none;\n  }\n}\n",[207,1485,1486,1505,1520,1535,1546,1557,1561],{"__ignoreMap":448},[452,1487,1488,1491,1494,1496,1498,1501,1503],{"class":454,"line":455},[452,1489,1490],{"class":946},"@media",[452,1492,1493],{"class":465}," (",[452,1495,1475],{"class":495},[452,1497,535],{"class":465},[452,1499,1500],{"class":495}," reduce",[452,1502,372],{"class":465},[452,1504,740],{"class":465},[452,1506,1507,1510,1512,1515,1517],{"class":454,"line":462},[452,1508,1509],{"class":465},"  [",[452,1511,1258],{"class":473},[452,1513,1514],{"class":465},"][",[452,1516,260],{"class":473},[452,1518,1519],{"class":465},"],\n",[452,1521,1522,1524,1527,1529,1531,1533],{"class":454,"line":492},[452,1523,1509],{"class":465},[452,1525,1526],{"class":473},"data-modal-content",[452,1528,1514],{"class":465},[452,1530,260],{"class":473},[452,1532,863],{"class":465},[452,1534,740],{"class":465},[452,1536,1537,1540,1542,1544],{"class":454,"line":499},[452,1538,1539],{"class":746},"    animation",[452,1541,535],{"class":465},[452,1543,1301],{"class":495},[452,1545,755],{"class":465},[452,1547,1548,1551,1553,1555],{"class":454,"line":505},[452,1549,1550],{"class":746},"    transition",[452,1552,535],{"class":465},[452,1554,1301],{"class":495},[452,1556,755],{"class":465},[452,1558,1559],{"class":454,"line":511},[452,1560,1006],{"class":465},[452,1562,1563],{"class":454,"line":635},[452,1564,838],{"class":465},[215,1566,1568],{"id":1567},"skipping-animation-programmatically","Skipping animation programmatically",[198,1570,1571],{},"When opening \u002F closing programmatically you can skip enter \u002F exit animations:",[443,1573,1577],{"className":1574,"code":1575,"language":1576,"meta":448,"style":448},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","openModal(MyDialog, { instantEnter: true })       \u002F\u002F no enter animation\nhandle.close({ instantExit: true })                \u002F\u002F no exit animation\nreplaceModal(NextStep, { instantEnter: true })    \u002F\u002F wizard step swap\n","ts",[207,1578,1579,1610,1640],{"__ignoreMap":448},[452,1580,1581,1584,1587,1589,1592,1595,1597,1601,1604,1607],{"class":454,"line":455},[452,1582,1583],{"class":812},"openModal",[452,1585,1586],{"class":495},"(MyDialog",[452,1588,1278],{"class":465},[452,1590,1591],{"class":465}," {",[452,1593,1594],{"class":469}," instantEnter",[452,1596,535],{"class":465},[452,1598,1600],{"class":1599},"sfNiH"," true",[452,1602,1603],{"class":465}," }",[452,1605,1606],{"class":495},")       ",[452,1608,1609],{"class":458},"\u002F\u002F no enter animation\n",[452,1611,1612,1615,1617,1620,1622,1625,1628,1630,1632,1634,1637],{"class":454,"line":462},[452,1613,1614],{"class":495},"handle",[452,1616,405],{"class":465},[452,1618,1619],{"class":812},"close",[452,1621,816],{"class":495},[452,1623,1624],{"class":465},"{",[452,1626,1627],{"class":469}," instantExit",[452,1629,535],{"class":465},[452,1631,1600],{"class":1599},[452,1633,1603],{"class":465},[452,1635,1636],{"class":495},")                ",[452,1638,1639],{"class":458},"\u002F\u002F no exit animation\n",[452,1641,1642,1645,1648,1650,1652,1654,1656,1658,1660,1663],{"class":454,"line":492},[452,1643,1644],{"class":812},"replaceModal",[452,1646,1647],{"class":495},"(NextStep",[452,1649,1278],{"class":465},[452,1651,1591],{"class":465},[452,1653,1594],{"class":469},[452,1655,535],{"class":465},[452,1657,1600],{"class":1599},[452,1659,1603],{"class":465},[452,1661,1662],{"class":495},")    ",[452,1664,1665],{"class":458},"\u002F\u002F wizard step swap\n",[198,1667,1668,1670,1671,1674,1675,1677,1678,1680],{},[207,1669,325],{}," sets ",[207,1672,1673],{},"data-instant=\"\""," on both ",[207,1676,307],{}," and the topmost ",[207,1679,273],{}," for the entire lifetime of that modal. The bundled CSS rule",[443,1682,1684],{"className":1247,"code":1683,"language":1249,"meta":448,"style":448},":where([data-modal-content][data-instant][data-state='open']),\n:where([data-modal-overlay][data-instant][data-state='open']) {\n  animation: none !important;\n  transition: none !important;\n}\n",[207,1685,1686,1718,1749,1763,1776],{"__ignoreMap":448},[452,1687,1688,1690,1693,1696,1698,1700,1703,1705,1707,1709,1711,1713,1715],{"class":454,"line":455},[452,1689,535],{"class":465},[452,1691,1692],{"class":473},"where",[452,1694,1695],{"class":465},"([",[452,1697,1526],{"class":473},[452,1699,1514],{"class":465},[452,1701,1702],{"class":473},"data-instant",[452,1704,1514],{"class":465},[452,1706,260],{"class":473},[452,1708,477],{"class":465},[452,1710,855],{"class":465},[452,1712,858],{"class":483},[452,1714,855],{"class":465},[452,1716,1717],{"class":465},"]),\n",[452,1719,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1747],{"class":454,"line":462},[452,1721,535],{"class":465},[452,1723,1692],{"class":473},[452,1725,1695],{"class":465},[452,1727,1258],{"class":473},[452,1729,1514],{"class":465},[452,1731,1702],{"class":473},[452,1733,1514],{"class":465},[452,1735,260],{"class":473},[452,1737,477],{"class":465},[452,1739,855],{"class":465},[452,1741,858],{"class":483},[452,1743,855],{"class":465},[452,1745,1746],{"class":465},"])",[452,1748,740],{"class":465},[452,1750,1751,1753,1755,1758,1761],{"class":454,"line":492},[452,1752,871],{"class":746},[452,1754,535],{"class":465},[452,1756,1757],{"class":495}," none ",[452,1759,1760],{"class":766},"!important",[452,1762,755],{"class":465},[452,1764,1765,1768,1770,1772,1774],{"class":454,"line":499},[452,1766,1767],{"class":746},"  transition",[452,1769,535],{"class":465},[452,1771,1757],{"class":495},[452,1773,1760],{"class":766},[452,1775,755],{"class":465},[452,1777,1778],{"class":454,"line":505},[452,1779,838],{"class":465},[198,1781,1782,1783,1785,1786,1789],{},"suppresses any user enter animation on both elements. Suppression is scoped to ",[207,1784,332],{},", so when the modal closes (",[207,1787,1788],{},"data-state=\"closed\"",") your exit animation still runs.",[727,1791,1792],{},"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 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 .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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":448,"searchDepth":462,"depth":462,"links":1794},[1795,1796,1797,1799,1800,1801,1803,1804,1805],{"id":217,"depth":462,"text":218},{"id":375,"depth":462,"text":376},{"id":521,"depth":462,"text":1798},"Strategy 1 — Tailwind + tw-animate-css (shadcn-style)",{"id":679,"depth":462,"text":680},{"id":1084,"depth":462,"text":1085},{"id":1125,"depth":462,"text":1802},"CSS-vars on \u003CModalTarget> (optional convenience)",{"id":1310,"depth":462,"text":1311},{"id":1475,"depth":462,"text":1475},{"id":1567,"depth":462,"text":1568},"Headless data-state hooks, Tailwind utilities, custom keyframes.","md",null,{},{"title":74,"description":1806},"qMI6actfSlvy2HyMlDY0Lxu8IeJon7NsnRI29j2qlKU",[1813,1815],{"title":70,"path":71,"stem":72,"description":1814,"children":-1},"Modal mode, close triggers, scroll lock, focus trap.",{"title":78,"path":79,"stem":80,"description":1816,"children":-1},"Bind a modal component to a reactive controller — persistent listeners, reactive isOpen, auto-cleanup.",1779523617515]