[{"data":1,"prerenderedAt":1055},["ShallowReactive",2],{"navigation_docs":3,"-concepts-headless-primitives":188,"-concepts-headless-primitives-surround":1050},[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":49,"body":190,"description":1044,"extension":1045,"links":1046,"meta":1047,"navigation":772,"path":50,"seo":1048,"stem":51,"__hash__":1049},"docs\u002F3.concepts\u002F5.headless-primitives.md",{"type":191,"value":192,"toc":1036},"minimark",[193,197,205,208,213,224,519,538,542,545,596,602,615,869,899,902,906,925,959,965,969,1032],[194,195,49],"h1",{"id":196},"headless-primitives",[198,199,200,204],"p",{},[201,202,203],"code",{},"@kolirt\u002Fvue-modal"," ships zero CSS for modal appearance. There is no default backdrop color, no panel size, no shadow, no transition. What you see is entirely what you write.",[198,206,207],{},"This is intentional. Modals live at the top of the visual hierarchy and need to match your design system exactly. Any \"sensible default\" would just need to be overridden.",[209,210,212],"h2",{"id":211},"layout-resets-that-are-applied","Layout resets that are applied",[198,214,215,216,219,220,223],{},"A minimal layout reset is applied via ",[201,217,218],{},":where()"," (specificity 0), so your CSS always wins without ",[201,221,222],{},"!important",":",[225,226,231],"pre",{"className":227,"code":228,"language":229,"meta":230,"style":230},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":where([data-modal-region]) {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n}\n:where([data-modal-root]) {\n  position: absolute;\n  inset: 0;\n  pointer-events: auto;\n}\n:where([data-modal-overlay]) {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n: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","css","",[201,232,233,257,273,287,300,306,322,334,345,357,362,378,389,400,411,416,454,485,500,514],{"__ignoreMap":230},[234,235,238,241,245,248,251,254],"span",{"class":236,"line":237},"line",1,[234,239,223],{"class":240},"sMK4o",[234,242,244],{"class":243},"spNyl","where",[234,246,247],{"class":240},"([",[234,249,250],{"class":243},"data-modal-region",[234,252,253],{"class":240},"])",[234,255,256],{"class":240}," {\n",[234,258,260,264,266,270],{"class":236,"line":259},2,[234,261,263],{"class":262},"sqsOY","  position",[234,265,223],{"class":240},[234,267,269],{"class":268},"sTEyZ"," fixed",[234,271,272],{"class":240},";\n",[234,274,276,279,281,285],{"class":236,"line":275},3,[234,277,278],{"class":262},"  inset",[234,280,223],{"class":240},[234,282,284],{"class":283},"sbssI"," 0",[234,286,272],{"class":240},[234,288,290,293,295,298],{"class":236,"line":289},4,[234,291,292],{"class":262},"  pointer-events",[234,294,223],{"class":240},[234,296,297],{"class":268}," none",[234,299,272],{"class":240},[234,301,303],{"class":236,"line":302},5,[234,304,305],{"class":240},"}\n",[234,307,309,311,313,315,318,320],{"class":236,"line":308},6,[234,310,223],{"class":240},[234,312,244],{"class":243},[234,314,247],{"class":240},[234,316,317],{"class":243},"data-modal-root",[234,319,253],{"class":240},[234,321,256],{"class":240},[234,323,325,327,329,332],{"class":236,"line":324},7,[234,326,263],{"class":262},[234,328,223],{"class":240},[234,330,331],{"class":268}," absolute",[234,333,272],{"class":240},[234,335,337,339,341,343],{"class":236,"line":336},8,[234,338,278],{"class":262},[234,340,223],{"class":240},[234,342,284],{"class":283},[234,344,272],{"class":240},[234,346,348,350,352,355],{"class":236,"line":347},9,[234,349,292],{"class":262},[234,351,223],{"class":240},[234,353,354],{"class":268}," auto",[234,356,272],{"class":240},[234,358,360],{"class":236,"line":359},10,[234,361,305],{"class":240},[234,363,365,367,369,371,374,376],{"class":236,"line":364},11,[234,366,223],{"class":240},[234,368,244],{"class":243},[234,370,247],{"class":240},[234,372,373],{"class":243},"data-modal-overlay",[234,375,253],{"class":240},[234,377,256],{"class":240},[234,379,381,383,385,387],{"class":236,"line":380},12,[234,382,263],{"class":262},[234,384,223],{"class":240},[234,386,331],{"class":268},[234,388,272],{"class":240},[234,390,392,394,396,398],{"class":236,"line":391},13,[234,393,278],{"class":262},[234,395,223],{"class":240},[234,397,284],{"class":283},[234,399,272],{"class":240},[234,401,403,405,407,409],{"class":236,"line":402},14,[234,404,292],{"class":262},[234,406,223],{"class":240},[234,408,297],{"class":268},[234,410,272],{"class":240},[234,412,414],{"class":236,"line":413},15,[234,415,305],{"class":240},[234,417,419,421,423,425,428,431,434,436,439,442,445,449,451],{"class":236,"line":418},16,[234,420,223],{"class":240},[234,422,244],{"class":243},[234,424,247],{"class":240},[234,426,427],{"class":243},"data-modal-content",[234,429,430],{"class":240},"][",[234,432,433],{"class":243},"data-instant",[234,435,430],{"class":240},[234,437,438],{"class":243},"data-state",[234,440,441],{"class":240},"=",[234,443,444],{"class":240},"'",[234,446,448],{"class":447},"sfazB","open",[234,450,444],{"class":240},[234,452,453],{"class":240},"]),\n",[234,455,457,459,461,463,465,467,469,471,473,475,477,479,481,483],{"class":236,"line":456},17,[234,458,223],{"class":240},[234,460,244],{"class":243},[234,462,247],{"class":240},[234,464,373],{"class":243},[234,466,430],{"class":240},[234,468,433],{"class":243},[234,470,430],{"class":240},[234,472,438],{"class":243},[234,474,441],{"class":240},[234,476,444],{"class":240},[234,478,448],{"class":447},[234,480,444],{"class":240},[234,482,253],{"class":240},[234,484,256],{"class":240},[234,486,488,491,493,496,498],{"class":236,"line":487},18,[234,489,490],{"class":262},"  animation",[234,492,223],{"class":240},[234,494,495],{"class":268}," none ",[234,497,222],{"class":283},[234,499,272],{"class":240},[234,501,503,506,508,510,512],{"class":236,"line":502},19,[234,504,505],{"class":262},"  transition",[234,507,223],{"class":240},[234,509,495],{"class":268},[234,511,222],{"class":283},[234,513,272],{"class":240},[234,515,517],{"class":236,"line":516},20,[234,518,305],{"class":240},[198,520,521,522,524,525,528,529,532,533,537],{},"The ",[201,523,222],{}," rule applies only when ",[201,526,527],{},"instantEnter: true"," was passed. It is scoped to ",[201,530,531],{},"[data-state=\"open\"]",", so it suppresses the ",[534,535,536],"strong",{},"enter"," animation only — your exit animation runs normally when the modal closes.",[209,539,541],{"id":540},"built-in-behavior","Built-in behavior",[198,543,544],{},"You don't configure focus or accessibility — they ship out of the box:",[546,547,548,555,561,590],"ul",{},[549,550,551,554],"li",{},[534,552,553],{},"Focus trap"," — keyboard focus is locked inside the modal while it is open.",[549,556,557,560],{},[534,558,559],{},"Focus return"," — focus returns to the trigger element when the modal closes.",[549,562,563,566,567,570,571,570,574,577,578,581,582,585,586,589],{},[534,564,565],{},"ARIA"," — ",[201,568,569],{},"role=\"dialog\"",", ",[201,572,573],{},"aria-modal",[201,575,576],{},"aria-labelledby","\u002F",[201,579,580],{},"aria-describedby"," wired through ",[201,583,584],{},"\u003CModalTitle>"," and ",[201,587,588],{},"\u003CModalDescription>",".",[549,591,592,595],{},[534,593,594],{},"Exit-animation wait"," — the DOM node stays alive until your CSS animation finishes.",[209,597,599,600],{"id":598},"driving-animations-with-data-state","Driving animations with ",[201,601,438],{},[198,603,604,585,607,610,611,614],{},[201,605,606],{},"\u003CModalContent>",[201,608,609],{},"\u003CModalOverlay>"," expose ",[201,612,613],{},"data-state=\"open\" | \"closed\"",". Target it with CSS:",[225,616,618],{"className":227,"code":617,"language":229,"meta":230,"style":230},"[data-modal-content] {\n  transition: opacity 200ms, transform 200ms;\n}\n[data-modal-content][data-state='open'] {\n  opacity: 1;\n  transform: translateY(0);\n}\n[data-modal-content][data-state='closed'] {\n  opacity: 0;\n  transform: translateY(8px);\n}\n\n[data-modal-overlay] {\n  transition: opacity 200ms;\n}\n[data-modal-overlay][data-state='open']   { opacity: 1; }\n[data-modal-overlay][data-state='closed'] { opacity: 0; }\n",[201,619,620,632,654,658,680,692,712,716,739,749,764,768,774,784,796,800,836],{"__ignoreMap":230},[234,621,622,625,627,630],{"class":236,"line":237},[234,623,624],{"class":240},"[",[234,626,427],{"class":243},[234,628,629],{"class":240},"]",[234,631,256],{"class":240},[234,633,634,636,638,641,644,647,650,652],{"class":236,"line":259},[234,635,505],{"class":262},[234,637,223],{"class":240},[234,639,640],{"class":268}," opacity ",[234,642,643],{"class":283},"200ms",[234,645,646],{"class":240},",",[234,648,649],{"class":268}," transform ",[234,651,643],{"class":283},[234,653,272],{"class":240},[234,655,656],{"class":236,"line":275},[234,657,305],{"class":240},[234,659,660,662,664,666,668,670,672,674,676,678],{"class":236,"line":289},[234,661,624],{"class":240},[234,663,427],{"class":243},[234,665,430],{"class":240},[234,667,438],{"class":243},[234,669,441],{"class":240},[234,671,444],{"class":240},[234,673,448],{"class":447},[234,675,444],{"class":240},[234,677,629],{"class":240},[234,679,256],{"class":240},[234,681,682,685,687,690],{"class":236,"line":302},[234,683,684],{"class":262},"  opacity",[234,686,223],{"class":240},[234,688,689],{"class":283}," 1",[234,691,272],{"class":240},[234,693,694,697,699,703,706,709],{"class":236,"line":308},[234,695,696],{"class":262},"  transform",[234,698,223],{"class":240},[234,700,702],{"class":701},"s2Zo4"," translateY",[234,704,705],{"class":240},"(",[234,707,708],{"class":283},"0",[234,710,711],{"class":240},");\n",[234,713,714],{"class":236,"line":324},[234,715,305],{"class":240},[234,717,718,720,722,724,726,728,730,733,735,737],{"class":236,"line":336},[234,719,624],{"class":240},[234,721,427],{"class":243},[234,723,430],{"class":240},[234,725,438],{"class":243},[234,727,441],{"class":240},[234,729,444],{"class":240},[234,731,732],{"class":447},"closed",[234,734,444],{"class":240},[234,736,629],{"class":240},[234,738,256],{"class":240},[234,740,741,743,745,747],{"class":236,"line":347},[234,742,684],{"class":262},[234,744,223],{"class":240},[234,746,284],{"class":283},[234,748,272],{"class":240},[234,750,751,753,755,757,759,762],{"class":236,"line":359},[234,752,696],{"class":262},[234,754,223],{"class":240},[234,756,702],{"class":701},[234,758,705],{"class":240},[234,760,761],{"class":283},"8px",[234,763,711],{"class":240},[234,765,766],{"class":236,"line":364},[234,767,305],{"class":240},[234,769,770],{"class":236,"line":380},[234,771,773],{"emptyLinePlaceholder":772},true,"\n",[234,775,776,778,780,782],{"class":236,"line":391},[234,777,624],{"class":240},[234,779,373],{"class":243},[234,781,629],{"class":240},[234,783,256],{"class":240},[234,785,786,788,790,792,794],{"class":236,"line":402},[234,787,505],{"class":262},[234,789,223],{"class":240},[234,791,640],{"class":268},[234,793,643],{"class":283},[234,795,272],{"class":240},[234,797,798],{"class":236,"line":413},[234,799,305],{"class":240},[234,801,802,804,806,808,810,812,814,816,818,820,823,826,828,830,833],{"class":236,"line":418},[234,803,624],{"class":240},[234,805,373],{"class":243},[234,807,430],{"class":240},[234,809,438],{"class":243},[234,811,441],{"class":240},[234,813,444],{"class":240},[234,815,448],{"class":447},[234,817,444],{"class":240},[234,819,629],{"class":240},[234,821,822],{"class":240},"   {",[234,824,825],{"class":262}," opacity",[234,827,223],{"class":240},[234,829,689],{"class":283},[234,831,832],{"class":240},";",[234,834,835],{"class":240}," }\n",[234,837,838,840,842,844,846,848,850,852,854,856,859,861,863,865,867],{"class":236,"line":456},[234,839,624],{"class":240},[234,841,373],{"class":243},[234,843,430],{"class":240},[234,845,438],{"class":243},[234,847,441],{"class":240},[234,849,444],{"class":240},[234,851,732],{"class":447},[234,853,444],{"class":240},[234,855,629],{"class":240},[234,857,858],{"class":240}," {",[234,860,825],{"class":262},[234,862,223],{"class":240},[234,864,284],{"class":283},[234,866,832],{"class":240},[234,868,835],{"class":240},[546,870,871,887],{},[549,872,873,874,570,876,878,879,882,883,886],{},"On ",[201,875,606],{},[201,877,438],{}," is ",[201,880,881],{},"\"open\""," while this modal is the visible top of its group, and ",[201,884,885],{},"\"closed\""," when it's leaving or covered by another modal in the same group.",[549,888,873,889,570,891,878,893,895,896,898],{},[201,890,609],{},[201,892,438],{},[201,894,881],{}," while any modal in the overlay's group is active, and ",[201,897,885],{}," otherwise.",[198,900,901],{},"The DOM persists until the close animation finishes.",[209,903,904],{"id":433},[201,905,433],{},[198,907,908,910,911,913,914,917,918,920,921,924],{},[201,909,606],{}," (and the topmost ",[201,912,609],{},") carries ",[201,915,916],{},"data-instant=\"\""," for the entire lifetime of a modal opened with ",[201,919,527],{},". Used by ",[201,922,923],{},"replaceModal"," for snappy wizard step swaps:",[225,926,930],{"className":927,"code":928,"language":929,"meta":230,"style":230},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","replaceModal(StepTwo, { instantEnter: true })\n","ts",[201,931,932],{"__ignoreMap":230},[234,933,934,936,939,941,943,947,949,953,956],{"class":236,"line":237},[234,935,923],{"class":701},[234,937,938],{"class":268},"(StepTwo",[234,940,646],{"class":240},[234,942,858],{"class":240},[234,944,946],{"class":945},"swJcz"," instantEnter",[234,948,223],{"class":240},[234,950,952],{"class":951},"sfNiH"," true",[234,954,955],{"class":240}," }",[234,957,958],{"class":268},")\n",[198,960,961,962,964],{},"The bundled CSS rule is scoped to ",[201,963,531],{},", so it suppresses only the enter animation — exit animations still play normally when the modal closes.",[209,966,968],{"id":967},"what-isnt-provided","What isn't provided",[970,971,972,985],"table",{},[973,974,975],"thead",{},[976,977,978,982],"tr",{},[979,980,981],"th",{},"Not provided",[979,983,984],{},"Reason",[986,987,988,1000,1008,1016],"tbody",{},[976,989,990,997],{},[991,992,993,996],"td",{},[201,994,995],{},"\u003CModalTrigger>"," button",[991,998,999],{},"You open modals imperatively — there is no declarative trigger concept.",[976,1001,1002,1005],{},[991,1003,1004],{},"Default visual styles",[991,1006,1007],{},"These belong to your design system.",[976,1009,1010,1013],{},[991,1011,1012],{},"Animation presets",[991,1014,1015],{},"Transitions are 2–5 lines of CSS; presets impose naming and specificity.",[976,1017,1018,1021],{},[991,1019,1020],{},"Built-in close button",[991,1022,1023,1024,1027,1028,1031],{},"Presentational choice — call ",[201,1025,1026],{},"close()"," from ",[201,1029,1030],{},"useModalContext()"," on whatever element fits.",[1033,1034,1035],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":230,"searchDepth":259,"depth":259,"links":1037},[1038,1039,1040,1042,1043],{"id":211,"depth":259,"text":212},{"id":540,"depth":259,"text":541},{"id":598,"depth":259,"text":1041},"Driving animations with data-state",{"id":433,"depth":259,"text":433},{"id":967,"depth":259,"text":968},"Why the package ships no visual styles and how to drive animations with data attributes.","md",null,{},{"title":49,"description":1044},"1gXHHwLCFoTkq-tGXSrztj_LjQqcKrnuDC7i7nz83wI",[1051,1053],{"title":45,"path":46,"stem":47,"description":1052,"children":-1},"Why modals belong to named groups and what isolation that provides.",{"title":58,"path":59,"stem":60,"description":1054,"children":-1},"Structure of a modal component using ModalRoot, ModalContent, and useModalContext.",1779523617515]