[{"data":1,"prerenderedAt":1274},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal":65,"nav:v1":1130},{"id":4,"extension":5,"meta":6,"sections":7,"stem":62,"tagline":63,"__hash__":64},"landing\u002Flanding.yml","yml",{},[8,18,22,29,33,40,47,51,57],{"id":9,"headline":10,"body":11,"cta":12,"secondary":15},"hero","The bare minimum for elegant interfaces.","Three classes, no framework, {css.kB}. A CSS and JavaScript library with no reset, no font, no runtime dependencies and no rule outside a `pui-` class; the browser does the work.",{"label":13,"to":14},"Get started","\u002Fdocs",{"label":16,"to":17},"Migrating from 0.x","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-0-x",{"id":19,"headline":20,"body":21},"size","{css.kB}. Measured, not promised.","`perfectui.css` is {css.bytes} bytes gzip; the optional JavaScript loader is {js.bytes}. The bars below are the same measurement run on the published builds of the alternatives.",{"id":23,"headline":24,"body":25,"cta":26},"classes","A shape, a style, a colour.","Every element is up to three classes you can combine freely: what it is, how the colour is applied, which colour. Seven colours and four styles give 28 looks per shape, and adding a colour never multiplies your classes.",{"label":27,"to":28},"See the components","\u002Fdocs\u002Fcomponents\u002Fbutton",{"id":30,"headline":31,"body":32},"overlays","Overlays without a plugin.","Modals are `\u003Cdialog>`, menus are `popover`, tooltips are `interestfor`, accordions are `\u003Cdetails>`. The optional loader downloads a fallback only when a browser is missing one of them.",{"id":34,"headline":35,"body":36,"cta":37},"mode-theme","One attribute for dark mode. One variable for your colour.","With no attribute, perfectui follows the operating system. Set `data-pui-mode` to choose, and `--pui-theme` to make every component yours.",{"label":38,"to":39},"Dark mode docs","\u002Fdocs\u002Fcustomization\u002Fdark-mode",{"id":41,"headline":42,"body":43,"cta":44},"tailwind","Your utilities always win.","One `@layer` line keeps Tailwind's reset below perfectui and every utility above it.",{"label":45,"to":46},"Tailwind guide","\u002Fdocs\u002Fgetting-started\u002Ftailwind-css",{"id":48,"headline":49,"body":50},"nothing-to-undo","Nothing you have to undo.","No reset to override, no font to remove, no `!important` to beat, no initialiser to call after rendering, no guard for server rendering. ESM only, nothing on `window`.",{"id":52,"headline":53,"body":54,"cta":55},"migration","Coming from 0.x?","1.0 is a rewrite: every class is prefixed, styles and colours are separate classes, and the browser replaced the JavaScript. The guide lists every change.",{"label":56,"to":17},"Read the migration guide",{"id":58,"headline":59,"body":60,"cta":61},"install","Install it your way.","A package for npm, yarn, pnpm or bun, or two tags from a CDN. Import everything or only the components you use.",{"label":13,"to":14},"landing","Components the browser already knows how to run.","QsxvMnCQ8bgawTVgX6YLkvZoqMKaQbFt0j1urNnrKQw",{"id":66,"title":67,"body":68,"changed":1120,"description":1121,"extension":1122,"from":1120,"meta":1123,"navigation":177,"path":1124,"seo":1125,"since":1120,"stem":1126,"tags":1127,"to":1120,"__hash__":1129},"docs_v1\u002Fdocs\u002Fv1\u002F04.components\u002F08.modal.md","Modal",{"type":69,"value":70,"toc":1113},"minimark",[71,516,528,589,601,606,611,615,621,668,672,679,784,788,791,991,994,997,1102,1106,1109],[72,73,75],"example",{"name":74},"basic",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-html shiki shiki-themes perfectui-site","\u003Cbutton\n  class=\"pui-btn pui-solid pui-theme\"\n  commandfor=\"confirm\"\n  command=\"show-modal\"\n>\n  Delete project\n\u003C\u002Fbutton>\n\n\u003Cdialog class=\"pui-modal\" id=\"confirm\" closedby=\"any\">\n  \u003Cdiv class=\"pui-card\">\n    \u003Cdiv class=\"pui-card-header\">Delete project\u003C\u002Fdiv>\n    \u003Cdiv class=\"pui-card-content\">\n      \u003Cspan>This cannot be undone.\u003C\u002Fspan>\n      \u003Cdiv class=\"pui-group-row\">\n        \u003Cbutton\n          class=\"pui-btn pui-outline pui-surface\"\n          commandfor=\"confirm\"\n          command=\"close\"\n        >\n          Cancel\n        \u003C\u002Fbutton>\n        \u003Cbutton\n          class=\"pui-btn pui-solid pui-error\"\n          commandfor=\"confirm\"\n          command=\"close\"\n        >\n          Delete\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdialog>\n","html","",[83,84,85,98,118,133,148,154,161,172,179,224,246,277,297,316,336,344,359,373,388,394,400,410,417,431,444,457,462,468,477,487,497,507],"code",{"__ignoreMap":81},[86,87,90,94],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"s8qk9","\u003C",[86,95,97],{"class":96},"sz5At","button\n",[86,99,101,105,108,111,115],{"class":88,"line":100},2,[86,102,104],{"class":103},"sz6eq","  class",[86,106,107],{"class":92},"=",[86,109,110],{"class":92},"\"",[86,112,114],{"class":113},"s8AH5","pui-btn pui-solid pui-theme",[86,116,117],{"class":92},"\"\n",[86,119,121,124,126,128,131],{"class":88,"line":120},3,[86,122,123],{"class":103},"  commandfor",[86,125,107],{"class":92},[86,127,110],{"class":92},[86,129,130],{"class":113},"confirm",[86,132,117],{"class":92},[86,134,136,139,141,143,146],{"class":88,"line":135},4,[86,137,138],{"class":103},"  command",[86,140,107],{"class":92},[86,142,110],{"class":92},[86,144,145],{"class":113},"show-modal",[86,147,117],{"class":92},[86,149,151],{"class":88,"line":150},5,[86,152,153],{"class":92},">\n",[86,155,157],{"class":88,"line":156},6,[86,158,160],{"class":159},"stV6K","  Delete project\n",[86,162,164,167,170],{"class":88,"line":163},7,[86,165,166],{"class":92},"\u003C\u002F",[86,168,169],{"class":96},"button",[86,171,153],{"class":92},[86,173,175],{"class":88,"line":174},8,[86,176,178],{"emptyLinePlaceholder":177},true,"\n",[86,180,182,184,187,190,192,194,197,199,202,204,206,208,210,213,215,217,220,222],{"class":88,"line":181},9,[86,183,93],{"class":92},[86,185,186],{"class":96},"dialog",[86,188,189],{"class":103}," class",[86,191,107],{"class":92},[86,193,110],{"class":92},[86,195,196],{"class":113},"pui-modal",[86,198,110],{"class":92},[86,200,201],{"class":103}," id",[86,203,107],{"class":92},[86,205,110],{"class":92},[86,207,130],{"class":113},[86,209,110],{"class":92},[86,211,212],{"class":103}," closedby",[86,214,107],{"class":92},[86,216,110],{"class":92},[86,218,219],{"class":113},"any",[86,221,110],{"class":92},[86,223,153],{"class":92},[86,225,227,230,233,235,237,239,242,244],{"class":88,"line":226},10,[86,228,229],{"class":92},"  \u003C",[86,231,232],{"class":96},"div",[86,234,189],{"class":103},[86,236,107],{"class":92},[86,238,110],{"class":92},[86,240,241],{"class":113},"pui-card",[86,243,110],{"class":92},[86,245,153],{"class":92},[86,247,249,252,254,256,258,260,263,265,268,271,273,275],{"class":88,"line":248},11,[86,250,251],{"class":92},"    \u003C",[86,253,232],{"class":96},[86,255,189],{"class":103},[86,257,107],{"class":92},[86,259,110],{"class":92},[86,261,262],{"class":113},"pui-card-header",[86,264,110],{"class":92},[86,266,267],{"class":92},">",[86,269,270],{"class":159},"Delete project",[86,272,166],{"class":92},[86,274,232],{"class":96},[86,276,153],{"class":92},[86,278,280,282,284,286,288,290,293,295],{"class":88,"line":279},12,[86,281,251],{"class":92},[86,283,232],{"class":96},[86,285,189],{"class":103},[86,287,107],{"class":92},[86,289,110],{"class":92},[86,291,292],{"class":113},"pui-card-content",[86,294,110],{"class":92},[86,296,153],{"class":92},[86,298,300,303,305,307,310,312,314],{"class":88,"line":299},13,[86,301,302],{"class":92},"      \u003C",[86,304,86],{"class":96},[86,306,267],{"class":92},[86,308,309],{"class":159},"This cannot be undone.",[86,311,166],{"class":92},[86,313,86],{"class":96},[86,315,153],{"class":92},[86,317,319,321,323,325,327,329,332,334],{"class":88,"line":318},14,[86,320,302],{"class":92},[86,322,232],{"class":96},[86,324,189],{"class":103},[86,326,107],{"class":92},[86,328,110],{"class":92},[86,330,331],{"class":113},"pui-group-row",[86,333,110],{"class":92},[86,335,153],{"class":92},[86,337,339,342],{"class":88,"line":338},15,[86,340,341],{"class":92},"        \u003C",[86,343,97],{"class":96},[86,345,347,350,352,354,357],{"class":88,"line":346},16,[86,348,349],{"class":103},"          class",[86,351,107],{"class":92},[86,353,110],{"class":92},[86,355,356],{"class":113},"pui-btn pui-outline pui-surface",[86,358,117],{"class":92},[86,360,362,365,367,369,371],{"class":88,"line":361},17,[86,363,364],{"class":103},"          commandfor",[86,366,107],{"class":92},[86,368,110],{"class":92},[86,370,130],{"class":113},[86,372,117],{"class":92},[86,374,376,379,381,383,386],{"class":88,"line":375},18,[86,377,378],{"class":103},"          command",[86,380,107],{"class":92},[86,382,110],{"class":92},[86,384,385],{"class":113},"close",[86,387,117],{"class":92},[86,389,391],{"class":88,"line":390},19,[86,392,393],{"class":92},"        >\n",[86,395,397],{"class":88,"line":396},20,[86,398,399],{"class":159},"          Cancel\n",[86,401,403,406,408],{"class":88,"line":402},21,[86,404,405],{"class":92},"        \u003C\u002F",[86,407,169],{"class":96},[86,409,153],{"class":92},[86,411,413,415],{"class":88,"line":412},22,[86,414,341],{"class":92},[86,416,97],{"class":96},[86,418,420,422,424,426,429],{"class":88,"line":419},23,[86,421,349],{"class":103},[86,423,107],{"class":92},[86,425,110],{"class":92},[86,427,428],{"class":113},"pui-btn pui-solid pui-error",[86,430,117],{"class":92},[86,432,434,436,438,440,442],{"class":88,"line":433},24,[86,435,364],{"class":103},[86,437,107],{"class":92},[86,439,110],{"class":92},[86,441,130],{"class":113},[86,443,117],{"class":92},[86,445,447,449,451,453,455],{"class":88,"line":446},25,[86,448,378],{"class":103},[86,450,107],{"class":92},[86,452,110],{"class":92},[86,454,385],{"class":113},[86,456,117],{"class":92},[86,458,460],{"class":88,"line":459},26,[86,461,393],{"class":92},[86,463,465],{"class":88,"line":464},27,[86,466,467],{"class":159},"          Delete\n",[86,469,471,473,475],{"class":88,"line":470},28,[86,472,405],{"class":92},[86,474,169],{"class":96},[86,476,153],{"class":92},[86,478,480,483,485],{"class":88,"line":479},29,[86,481,482],{"class":92},"      \u003C\u002F",[86,484,232],{"class":96},[86,486,153],{"class":92},[86,488,490,493,495],{"class":88,"line":489},30,[86,491,492],{"class":92},"    \u003C\u002F",[86,494,232],{"class":96},[86,496,153],{"class":92},[86,498,500,503,505],{"class":88,"line":499},31,[86,501,502],{"class":92},"  \u003C\u002F",[86,504,232],{"class":96},[86,506,153],{"class":92},[86,508,510,512,514],{"class":88,"line":509},32,[86,511,166],{"class":92},[86,513,186],{"class":96},[86,515,153],{"class":92},[517,518,519,520,523,524,527],"p",{},"No script is written above. ",[83,521,522],{},"commandfor"," names the dialog and ",[83,525,526],{},"command"," says what to do with it.",[529,530,531,544],"table",{},[532,533,534],"thead",{},[535,536,537,541],"tr",{},[538,539,540],"th",{},"Attribute",[538,542,543],{},"Meaning",[545,546,547,558,568,578],"tbody",{},[535,548,549,555],{},[550,551,552],"td",{},[83,553,554],{},"command=\"show-modal\"",[550,556,557],{},"open it as a modal",[535,559,560,565],{},[550,561,562],{},[83,563,564],{},"command=\"close\"",[550,566,567],{},"close it",[535,569,570,575],{},[550,571,572],{},[83,573,574],{},"closedby=\"any\"",[550,576,577],{},"clicking the backdrop closes it",[535,579,580,586],{},[550,581,582,583],{},"no ",[83,584,585],{},"closedby",[550,587,588],{},"only the escape key closes it",[590,591,592],"warning",{},[517,593,594,595,597,598,600],{},"Import the script for the modal. Browsers that do not have ",[83,596,522],{}," or ",[83,599,585],{}," yet get a fallback, and browsers that do download nothing.",[602,603,605],"h2",{"id":604},"the-surface-comes-from-a-card","The surface comes from a card",[517,607,608,610],{},[83,609,196],{}," is only a frame: it centers the dialog, sizes it and dims the page. What it looks like is whatever you put inside, which is usually a card. A modal is composed from pieces you already know.",[602,612,614],{"id":613},"a-static-backdrop","A static backdrop",[517,616,617,618,620],{},"Leave ",[83,619,585],{}," off and the backdrop stops dismissing the dialog:",[76,622,624],{"className":78,"code":623,"language":80,"meta":81,"style":81},"\u003Cdialog class=\"pui-modal\" id=\"terms\">\n  \u003C!-- ... -->\n\u003C\u002Fdialog>\n",[83,625,626,655,660],{"__ignoreMap":81},[86,627,628,630,632,634,636,638,640,642,644,646,648,651,653],{"class":88,"line":89},[86,629,93],{"class":92},[86,631,186],{"class":96},[86,633,189],{"class":103},[86,635,107],{"class":92},[86,637,110],{"class":92},[86,639,196],{"class":113},[86,641,110],{"class":92},[86,643,201],{"class":103},[86,645,107],{"class":92},[86,647,110],{"class":92},[86,649,650],{"class":113},"terms",[86,652,110],{"class":92},[86,654,153],{"class":92},[86,656,657],{"class":88,"line":100},[86,658,659],{"class":92},"  \u003C!-- ... -->\n",[86,661,662,664,666],{"class":88,"line":120},[86,663,166],{"class":92},[86,665,186],{"class":96},[86,667,153],{"class":92},[602,669,671],{"id":670},"from-javascript","From JavaScript",[517,673,674,675,678],{},"The element is a plain ",[83,676,677],{},"\u003Cdialog>",":",[76,680,684],{"className":681,"code":682,"language":683,"meta":81,"style":81},"language-js shiki shiki-themes perfectui-site","const modal = document.getElementById(\"confirm\");\nmodal.showModal();\nmodal.close();\nmodal.addEventListener(\"close\", () => console.log(\"closed\"));\n","js",[83,685,686,717,729,740],{"__ignoreMap":81},[86,687,688,691,694,696,699,702,705,707,709,711,714],{"class":88,"line":89},[86,689,690],{"class":96},"const",[86,692,693],{"class":159}," modal ",[86,695,107],{"class":96},[86,697,698],{"class":159}," document",[86,700,701],{"class":92},".",[86,703,704],{"class":159},"getElementById(",[86,706,110],{"class":92},[86,708,130],{"class":113},[86,710,110],{"class":92},[86,712,713],{"class":159},")",[86,715,716],{"class":92},";\n",[86,718,719,722,724,727],{"class":88,"line":100},[86,720,721],{"class":159},"modal",[86,723,701],{"class":92},[86,725,726],{"class":159},"showModal()",[86,728,716],{"class":92},[86,730,731,733,735,738],{"class":88,"line":120},[86,732,721],{"class":159},[86,734,701],{"class":92},[86,736,737],{"class":159},"close()",[86,739,716],{"class":92},[86,741,742,744,746,749,751,753,755,758,761,764,767,769,772,774,777,779,782],{"class":88,"line":135},[86,743,721],{"class":159},[86,745,701],{"class":92},[86,747,748],{"class":159},"addEventListener(",[86,750,110],{"class":92},[86,752,385],{"class":113},[86,754,110],{"class":92},[86,756,757],{"class":92},",",[86,759,760],{"class":92}," ()",[86,762,763],{"class":96}," =>",[86,765,766],{"class":159}," console",[86,768,701],{"class":92},[86,770,771],{"class":159},"log(",[86,773,110],{"class":92},[86,775,776],{"class":113},"closed",[86,778,110],{"class":92},[86,780,781],{"class":159},"))",[86,783,716],{"class":92},[602,785,787],{"id":786},"moving-between-two-modals","Moving between two modals",[517,789,790],{},"A button carries one command, so opening the next modal leaves the one you are\nin open behind it, and closing the new one reveals the old. Close it on the\nsame click and you get a swap, which is what a multi-step flow wants:",[76,792,794],{"className":78,"code":793,"language":80,"meta":81,"style":81},"\u003Cdialog class=\"pui-modal\" id=\"first\" closedby=\"any\">\n  \u003Cdiv class=\"pui-card\">\n    \u003Cdiv class=\"pui-card-content\">\n      \u003Cbutton\n        class=\"pui-btn pui-solid pui-theme\"\n        commandfor=\"second\"\n        command=\"show-modal\"\n        onclick=\"this.closest('dialog').close()\"\n      >\n        Continue\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdialog>\n",[83,795,796,835,853,871,877,890,904,917,949,954,959,967,975,983],{"__ignoreMap":81},[86,797,798,800,802,804,806,808,810,812,814,816,818,821,823,825,827,829,831,833],{"class":88,"line":89},[86,799,93],{"class":92},[86,801,186],{"class":96},[86,803,189],{"class":103},[86,805,107],{"class":92},[86,807,110],{"class":92},[86,809,196],{"class":113},[86,811,110],{"class":92},[86,813,201],{"class":103},[86,815,107],{"class":92},[86,817,110],{"class":92},[86,819,820],{"class":113},"first",[86,822,110],{"class":92},[86,824,212],{"class":103},[86,826,107],{"class":92},[86,828,110],{"class":92},[86,830,219],{"class":113},[86,832,110],{"class":92},[86,834,153],{"class":92},[86,836,837,839,841,843,845,847,849,851],{"class":88,"line":100},[86,838,229],{"class":92},[86,840,232],{"class":96},[86,842,189],{"class":103},[86,844,107],{"class":92},[86,846,110],{"class":92},[86,848,241],{"class":113},[86,850,110],{"class":92},[86,852,153],{"class":92},[86,854,855,857,859,861,863,865,867,869],{"class":88,"line":120},[86,856,251],{"class":92},[86,858,232],{"class":96},[86,860,189],{"class":103},[86,862,107],{"class":92},[86,864,110],{"class":92},[86,866,292],{"class":113},[86,868,110],{"class":92},[86,870,153],{"class":92},[86,872,873,875],{"class":88,"line":135},[86,874,302],{"class":92},[86,876,97],{"class":96},[86,878,879,882,884,886,888],{"class":88,"line":150},[86,880,881],{"class":103},"        class",[86,883,107],{"class":92},[86,885,110],{"class":92},[86,887,114],{"class":113},[86,889,117],{"class":92},[86,891,892,895,897,899,902],{"class":88,"line":156},[86,893,894],{"class":103},"        commandfor",[86,896,107],{"class":92},[86,898,110],{"class":92},[86,900,901],{"class":113},"second",[86,903,117],{"class":92},[86,905,906,909,911,913,915],{"class":88,"line":163},[86,907,908],{"class":103},"        command",[86,910,107],{"class":92},[86,912,110],{"class":92},[86,914,145],{"class":113},[86,916,117],{"class":92},[86,918,919,922,924,926,929,931,934,937,939,941,943,945,947],{"class":88,"line":174},[86,920,921],{"class":103},"        onclick",[86,923,107],{"class":92},[86,925,110],{"class":92},[86,927,928],{"class":113},"this",[86,930,701],{"class":92},[86,932,933],{"class":113},"closest(",[86,935,936],{"class":92},"'",[86,938,186],{"class":113},[86,940,936],{"class":92},[86,942,713],{"class":113},[86,944,701],{"class":92},[86,946,737],{"class":113},[86,948,117],{"class":92},[86,950,951],{"class":88,"line":181},[86,952,953],{"class":92},"      >\n",[86,955,956],{"class":88,"line":226},[86,957,958],{"class":159},"        Continue\n",[86,960,961,963,965],{"class":88,"line":248},[86,962,482],{"class":92},[86,964,169],{"class":96},[86,966,153],{"class":92},[86,968,969,971,973],{"class":88,"line":279},[86,970,492],{"class":92},[86,972,232],{"class":96},[86,974,153],{"class":92},[86,976,977,979,981],{"class":88,"line":299},[86,978,502],{"class":92},[86,980,232],{"class":96},[86,982,153],{"class":92},[86,984,985,987,989],{"class":88,"line":318},[86,986,166],{"class":92},[86,988,186],{"class":96},[86,990,153],{"class":92},[517,992,993],{},"Stacking is the browser's own behavior, not something the library adds, so this\nis the line that turns it into a swap.",[517,995,996],{},"If inline handlers are not allowed by your content security policy, the same\nthing written once for the whole page, which makes swapping the default\neverywhere:",[76,998,1000],{"className":681,"code":999,"language":683,"meta":81,"style":81},"document.addEventListener(\"click\", (event) => {\n  const button = event.target.closest('[command=\"show-modal\"][commandfor]');\n  if (button) button.closest(\"dialog\")?.close();\n});\n",[83,1001,1002,1033,1066,1093],{"__ignoreMap":81},[86,1003,1004,1007,1009,1011,1013,1016,1018,1020,1023,1026,1028,1030],{"class":88,"line":89},[86,1005,1006],{"class":159},"document",[86,1008,701],{"class":92},[86,1010,748],{"class":159},[86,1012,110],{"class":92},[86,1014,1015],{"class":113},"click",[86,1017,110],{"class":92},[86,1019,757],{"class":92},[86,1021,1022],{"class":92}," (",[86,1024,1025],{"class":103},"event",[86,1027,713],{"class":92},[86,1029,763],{"class":96},[86,1031,1032],{"class":92}," {\n",[86,1034,1035,1038,1041,1043,1046,1048,1051,1053,1055,1057,1060,1062,1064],{"class":88,"line":100},[86,1036,1037],{"class":96},"  const",[86,1039,1040],{"class":159}," button ",[86,1042,107],{"class":96},[86,1044,1045],{"class":159}," event",[86,1047,701],{"class":92},[86,1049,1050],{"class":159},"target",[86,1052,701],{"class":92},[86,1054,933],{"class":159},[86,1056,936],{"class":92},[86,1058,1059],{"class":113},"[command=\"show-modal\"][commandfor]",[86,1061,936],{"class":92},[86,1063,713],{"class":159},[86,1065,716],{"class":92},[86,1067,1068,1071,1074,1076,1078,1080,1082,1084,1086,1089,1091],{"class":88,"line":120},[86,1069,1070],{"class":96},"  if",[86,1072,1073],{"class":159}," (button) button",[86,1075,701],{"class":92},[86,1077,933],{"class":159},[86,1079,110],{"class":92},[86,1081,186],{"class":113},[86,1083,110],{"class":92},[86,1085,713],{"class":159},[86,1087,1088],{"class":92},"?.",[86,1090,737],{"class":159},[86,1092,716],{"class":92},[86,1094,1095,1098,1100],{"class":88,"line":135},[86,1096,1097],{"class":92},"}",[86,1099,713],{"class":159},[86,1101,716],{"class":92},[602,1103,1105],{"id":1104},"long-content","Long content",[517,1107,1108],{},"The dialog scrolls on its own once it reaches the height of the viewport.",[1110,1111,1112],"style",{},"html pre.shiki code .s8qk9, html code.shiki .s8qk9{--shiki-default:var(--site-code-punct)}html pre.shiki code .sz5At, html code.shiki .sz5At{--shiki-default:var(--site-code-tag)}html pre.shiki code .sz6eq, html code.shiki .sz6eq{--shiki-default:var(--site-code-attr)}html pre.shiki code .s8AH5, html code.shiki .s8AH5{--shiki-default:var(--site-code-value)}html pre.shiki code .stV6K, html code.shiki .stV6K{--shiki-default:var(--site-code-text)}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);}",{"title":81,"searchDepth":100,"depth":100,"links":1114},[1115,1116,1117,1118,1119],{"id":604,"depth":100,"text":605},{"id":613,"depth":100,"text":614},{"id":670,"depth":100,"text":671},{"id":786,"depth":100,"text":787},{"id":1104,"depth":100,"text":1105},null,"Built on `\u003Cdialog>`. The browser handles the top layer, the backdrop, focus trapping and the escape key.","md",{},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal",{"title":67,"description":1121},"docs\u002Fv1\u002F04.components\u002F08.modal",[1128,721],"component","iX6qIMLTHMOfBjjJgVKE3AA8EUKeyK3wo8UGTBSBRww",[1131],{"title":1132,"path":14,"stem":1133,"children":1134,"page":1164},"Docs","docs",[1135],{"title":1136,"path":1137,"stem":1138,"children":1139,"page":1164},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[1140,1165,1178,1191,1237],{"title":1141,"path":1142,"stem":1143,"children":1144,"page":1164},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[1145,1149,1153,1157,1160],{"title":1146,"path":1147,"stem":1148},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":1150,"path":1151,"stem":1152},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":1154,"path":1155,"stem":1156},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":1158,"stem":1159},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":1161,"path":1162,"stem":1163},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":1166,"path":1167,"stem":1168,"children":1169,"page":1164},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[1170,1174],{"title":1171,"path":1172,"stem":1173},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":1175,"path":1176,"stem":1177},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":1179,"path":1180,"stem":1181,"children":1182,"page":1164},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[1183,1187],{"title":1184,"path":1185,"stem":1186},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":1188,"path":1189,"stem":1190},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":1192,"path":1193,"stem":1194,"children":1195,"page":1164},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[1196,1200,1204,1208,1212,1216,1220,1224,1225,1229,1233],{"title":1197,"path":1198,"stem":1199},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":1201,"path":1202,"stem":1203},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":1205,"path":1206,"stem":1207},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":1209,"path":1210,"stem":1211},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":1213,"path":1214,"stem":1215},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":1217,"path":1218,"stem":1219},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":1221,"path":1222,"stem":1223},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":67,"path":1124,"stem":1126},{"title":1226,"path":1227,"stem":1228},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":1230,"path":1231,"stem":1232},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":1234,"path":1235,"stem":1236},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":1238,"path":1239,"stem":1240,"children":1241,"page":1164},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[1242,1246,1250,1254,1258,1262,1266,1270],{"title":1243,"path":1244,"stem":1245},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":1247,"path":1248,"stem":1249},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":1251,"path":1252,"stem":1253},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":1255,"path":1256,"stem":1257},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":1259,"path":1260,"stem":1261},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":1263,"path":1264,"stem":1265},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":1267,"path":1268,"stem":1269},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":1271,"path":1272,"stem":1273},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790354564801]