[{"data":1,"prerenderedAt":1274},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion":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":1118,"description":1119,"extension":1120,"from":1118,"meta":1121,"navigation":1122,"path":1123,"seo":1124,"since":1118,"stem":1125,"tags":1126,"to":1118,"__hash__":1129},"docs_v1\u002Fdocs\u002Fv1\u002F04.components\u002F01.accordion.md","Accordion",{"type":69,"value":70,"toc":1110},"minimark",[71,264,269,276,451,455,535,539,542,545,637,641,650,826,833,884,888,895,991,998,1002,1015,1106],[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","\u003Cdiv class=\"pui-accordion\">\n  \u003Cdetails class=\"pui-accordion-item\">\n    \u003Csummary>What is Perfect UI?\u003C\u002Fsummary>\n    \u003Cp>A lightweight CSS and JavaScript library.\u003C\u002Fp>\n  \u003C\u002Fdetails>\n  \u003Cdetails class=\"pui-accordion-item\">\n    \u003Csummary>Does it need JavaScript?\u003C\u002Fsummary>\n    \u003Cp>Only to emulate what a browser is missing.\u003C\u002Fp>\n  \u003C\u002Fdetails>\n\u003C\u002Fdiv>\n","html","",[83,84,85,117,139,162,181,191,210,228,246,255],"code",{"__ignoreMap":81},[86,87,90,94,98,102,105,108,112,114],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"s8qk9","\u003C",[86,95,97],{"class":96},"sz5At","div",[86,99,101],{"class":100},"sz6eq"," class",[86,103,104],{"class":92},"=",[86,106,107],{"class":92},"\"",[86,109,111],{"class":110},"s8AH5","pui-accordion",[86,113,107],{"class":92},[86,115,116],{"class":92},">\n",[86,118,120,123,126,128,130,132,135,137],{"class":88,"line":119},2,[86,121,122],{"class":92},"  \u003C",[86,124,125],{"class":96},"details",[86,127,101],{"class":100},[86,129,104],{"class":92},[86,131,107],{"class":92},[86,133,134],{"class":110},"pui-accordion-item",[86,136,107],{"class":92},[86,138,116],{"class":92},[86,140,142,145,148,151,155,158,160],{"class":88,"line":141},3,[86,143,144],{"class":92},"    \u003C",[86,146,147],{"class":96},"summary",[86,149,150],{"class":92},">",[86,152,154],{"class":153},"stV6K","What is Perfect UI?",[86,156,157],{"class":92},"\u003C\u002F",[86,159,147],{"class":96},[86,161,116],{"class":92},[86,163,165,167,170,172,175,177,179],{"class":88,"line":164},4,[86,166,144],{"class":92},[86,168,169],{"class":96},"p",[86,171,150],{"class":92},[86,173,174],{"class":153},"A lightweight CSS and JavaScript library.",[86,176,157],{"class":92},[86,178,169],{"class":96},[86,180,116],{"class":92},[86,182,184,187,189],{"class":88,"line":183},5,[86,185,186],{"class":92},"  \u003C\u002F",[86,188,125],{"class":96},[86,190,116],{"class":92},[86,192,194,196,198,200,202,204,206,208],{"class":88,"line":193},6,[86,195,122],{"class":92},[86,197,125],{"class":96},[86,199,101],{"class":100},[86,201,104],{"class":92},[86,203,107],{"class":92},[86,205,134],{"class":110},[86,207,107],{"class":92},[86,209,116],{"class":92},[86,211,213,215,217,219,222,224,226],{"class":88,"line":212},7,[86,214,144],{"class":92},[86,216,147],{"class":96},[86,218,150],{"class":92},[86,220,221],{"class":153},"Does it need JavaScript?",[86,223,157],{"class":92},[86,225,147],{"class":96},[86,227,116],{"class":92},[86,229,231,233,235,237,240,242,244],{"class":88,"line":230},8,[86,232,144],{"class":92},[86,234,169],{"class":96},[86,236,150],{"class":92},[86,238,239],{"class":153},"Only to emulate what a browser is missing.",[86,241,157],{"class":92},[86,243,169],{"class":96},[86,245,116],{"class":92},[86,247,249,251,253],{"class":88,"line":248},9,[86,250,186],{"class":92},[86,252,125],{"class":96},[86,254,116],{"class":92},[86,256,258,260,262],{"class":88,"line":257},10,[86,259,157],{"class":92},[86,261,97],{"class":96},[86,263,116],{"class":92},[265,266,268],"h2",{"id":267},"one-open-at-a-time","One open at a time",[169,270,271,272,275],{},"Give the items the same ",[83,273,274],{},"name",". The browser closes the others for you:",[72,277,278],{},[76,279,281],{"className":78,"code":280,"language":80,"meta":81,"style":81},"\u003Cdiv class=\"pui-accordion\">\n  \u003Cdetails class=\"pui-accordion-item\" name=\"faq\">\n    \u003Csummary>First question\u003C\u002Fsummary>\n    \u003Cp>First answer\u003C\u002Fp>\n  \u003C\u002Fdetails>\n  \u003Cdetails class=\"pui-accordion-item\" name=\"faq\">\n    \u003Csummary>Second question\u003C\u002Fsummary>\n    \u003Cp>Second answer\u003C\u002Fp>\n  \u003C\u002Fdetails>\n\u003C\u002Fdiv>\n",[83,282,283,301,331,348,365,373,401,418,435,443],{"__ignoreMap":81},[86,284,285,287,289,291,293,295,297,299],{"class":88,"line":89},[86,286,93],{"class":92},[86,288,97],{"class":96},[86,290,101],{"class":100},[86,292,104],{"class":92},[86,294,107],{"class":92},[86,296,111],{"class":110},[86,298,107],{"class":92},[86,300,116],{"class":92},[86,302,303,305,307,309,311,313,315,317,320,322,324,327,329],{"class":88,"line":119},[86,304,122],{"class":92},[86,306,125],{"class":96},[86,308,101],{"class":100},[86,310,104],{"class":92},[86,312,107],{"class":92},[86,314,134],{"class":110},[86,316,107],{"class":92},[86,318,319],{"class":100}," name",[86,321,104],{"class":92},[86,323,107],{"class":92},[86,325,326],{"class":110},"faq",[86,328,107],{"class":92},[86,330,116],{"class":92},[86,332,333,335,337,339,342,344,346],{"class":88,"line":141},[86,334,144],{"class":92},[86,336,147],{"class":96},[86,338,150],{"class":92},[86,340,341],{"class":153},"First question",[86,343,157],{"class":92},[86,345,147],{"class":96},[86,347,116],{"class":92},[86,349,350,352,354,356,359,361,363],{"class":88,"line":164},[86,351,144],{"class":92},[86,353,169],{"class":96},[86,355,150],{"class":92},[86,357,358],{"class":153},"First answer",[86,360,157],{"class":92},[86,362,169],{"class":96},[86,364,116],{"class":92},[86,366,367,369,371],{"class":88,"line":183},[86,368,186],{"class":92},[86,370,125],{"class":96},[86,372,116],{"class":92},[86,374,375,377,379,381,383,385,387,389,391,393,395,397,399],{"class":88,"line":193},[86,376,122],{"class":92},[86,378,125],{"class":96},[86,380,101],{"class":100},[86,382,104],{"class":92},[86,384,107],{"class":92},[86,386,134],{"class":110},[86,388,107],{"class":92},[86,390,319],{"class":100},[86,392,104],{"class":92},[86,394,107],{"class":92},[86,396,326],{"class":110},[86,398,107],{"class":92},[86,400,116],{"class":92},[86,402,403,405,407,409,412,414,416],{"class":88,"line":212},[86,404,144],{"class":92},[86,406,147],{"class":96},[86,408,150],{"class":92},[86,410,411],{"class":153},"Second question",[86,413,157],{"class":92},[86,415,147],{"class":96},[86,417,116],{"class":92},[86,419,420,422,424,426,429,431,433],{"class":88,"line":230},[86,421,144],{"class":92},[86,423,169],{"class":96},[86,425,150],{"class":92},[86,427,428],{"class":153},"Second answer",[86,430,157],{"class":92},[86,432,169],{"class":96},[86,434,116],{"class":92},[86,436,437,439,441],{"class":88,"line":248},[86,438,186],{"class":92},[86,440,125],{"class":96},[86,442,116],{"class":92},[86,444,445,447,449],{"class":88,"line":257},[86,446,157],{"class":92},[86,448,97],{"class":96},[86,450,116],{"class":92},[265,452,454],{"id":453},"open-by-default","Open by default",[72,456,457],{},[76,458,460],{"className":78,"code":459,"language":80,"meta":81,"style":81},"\u003Cdetails class=\"pui-accordion-item\" name=\"faq\" open>\n  \u003Csummary>Open on load\u003C\u002Fsummary>\n  \u003Cp>Content\u003C\u002Fp>\n\u003C\u002Fdetails>\n",[83,461,462,493,510,527],{"__ignoreMap":81},[86,463,464,466,468,470,472,474,476,478,480,482,484,486,488,491],{"class":88,"line":89},[86,465,93],{"class":92},[86,467,125],{"class":96},[86,469,101],{"class":100},[86,471,104],{"class":92},[86,473,107],{"class":92},[86,475,134],{"class":110},[86,477,107],{"class":92},[86,479,319],{"class":100},[86,481,104],{"class":92},[86,483,107],{"class":92},[86,485,326],{"class":110},[86,487,107],{"class":92},[86,489,490],{"class":100}," open",[86,492,116],{"class":92},[86,494,495,497,499,501,504,506,508],{"class":88,"line":119},[86,496,122],{"class":92},[86,498,147],{"class":96},[86,500,150],{"class":92},[86,502,503],{"class":153},"Open on load",[86,505,157],{"class":92},[86,507,147],{"class":96},[86,509,116],{"class":92},[86,511,512,514,516,518,521,523,525],{"class":88,"line":141},[86,513,122],{"class":92},[86,515,169],{"class":96},[86,517,150],{"class":92},[86,519,520],{"class":153},"Content",[86,522,157],{"class":92},[86,524,169],{"class":96},[86,526,116],{"class":92},[86,528,529,531,533],{"class":88,"line":164},[86,530,157],{"class":92},[86,532,125],{"class":96},[86,534,116],{"class":92},[265,536,538],{"id":537},"one-block","One block",[169,540,541],{},"Consecutive items share the line between them, and only the outer corners stay round — an accordion reads as one block, not as a stack of cards. Nothing to add: this is what the first example already does. A lone item keeps all four corners, since it is both the first child and the last.",[169,543,544],{},"Spacing them apart instead is two rules of your own:",[76,546,550],{"className":547,"code":548,"language":549,"meta":81,"style":81},"language-css shiki shiki-themes perfectui-site",".accordion-spaced {\n  gap: var(--pui-space);\n}\n.accordion-spaced > .pui-accordion-item {\n  margin-block-start: 0;\n  border-radius: var(--pui-radius);\n}\n","css",[83,551,552,563,583,588,604,617,633],{"__ignoreMap":81},[86,553,554,557,560],{"class":88,"line":89},[86,555,556],{"class":92},".",[86,558,559],{"class":100},"accordion-spaced",[86,561,562],{"class":92}," {\n",[86,564,565,568,571,574,577,580],{"class":88,"line":119},[86,566,567],{"class":100},"  gap",[86,569,570],{"class":92},":",[86,572,573],{"class":153}," var",[86,575,576],{"class":92},"(",[86,578,579],{"class":153},"--pui-space",[86,581,582],{"class":92},");\n",[86,584,585],{"class":88,"line":141},[86,586,587],{"class":92},"}\n",[86,589,590,592,594,597,600,602],{"class":88,"line":164},[86,591,556],{"class":92},[86,593,559],{"class":100},[86,595,596],{"class":96}," >",[86,598,599],{"class":92}," .",[86,601,134],{"class":100},[86,603,562],{"class":92},[86,605,606,609,611,614],{"class":88,"line":183},[86,607,608],{"class":100},"  margin-block-start",[86,610,570],{"class":92},[86,612,613],{"class":110}," 0",[86,615,616],{"class":92},";\n",[86,618,619,622,624,626,628,631],{"class":88,"line":193},[86,620,621],{"class":100},"  border-radius",[86,623,570],{"class":92},[86,625,573],{"class":153},[86,627,576],{"class":92},[86,629,630],{"class":153},"--pui-radius",[86,632,582],{"class":92},[86,634,635],{"class":88,"line":212},[86,636,587],{"class":92},[265,638,640],{"id":639},"marking-the-open-item","Marking the open item",[169,642,643,646,647,570],{},[83,644,645],{},"pui-highlighted"," on the container gives the expanded item the same background as a card header, so a long list shows where you are. It replaces v0's ",[83,648,649],{},"accordion-accented",[72,651,652],{},[76,653,655],{"className":78,"code":654,"language":80,"meta":81,"style":81},"\u003Cdiv class=\"pui-accordion pui-highlighted\">\n  \u003Cdetails class=\"pui-accordion-item\" name=\"faq\" open>\n    \u003Csummary>Expanded\u003C\u002Fsummary>\n    \u003Cp>This item carries the band.\u003C\u002Fp>\n  \u003C\u002Fdetails>\n  \u003Cdetails class=\"pui-accordion-item\" name=\"faq\">\n    \u003Csummary>Collapsed\u003C\u002Fsummary>\n    \u003Cp>This one does not.\u003C\u002Fp>\n  \u003C\u002Fdetails>\n\u003C\u002Fdiv>\n",[83,656,657,676,706,723,740,748,776,793,810,818],{"__ignoreMap":81},[86,658,659,661,663,665,667,669,672,674],{"class":88,"line":89},[86,660,93],{"class":92},[86,662,97],{"class":96},[86,664,101],{"class":100},[86,666,104],{"class":92},[86,668,107],{"class":92},[86,670,671],{"class":110},"pui-accordion pui-highlighted",[86,673,107],{"class":92},[86,675,116],{"class":92},[86,677,678,680,682,684,686,688,690,692,694,696,698,700,702,704],{"class":88,"line":119},[86,679,122],{"class":92},[86,681,125],{"class":96},[86,683,101],{"class":100},[86,685,104],{"class":92},[86,687,107],{"class":92},[86,689,134],{"class":110},[86,691,107],{"class":92},[86,693,319],{"class":100},[86,695,104],{"class":92},[86,697,107],{"class":92},[86,699,326],{"class":110},[86,701,107],{"class":92},[86,703,490],{"class":100},[86,705,116],{"class":92},[86,707,708,710,712,714,717,719,721],{"class":88,"line":141},[86,709,144],{"class":92},[86,711,147],{"class":96},[86,713,150],{"class":92},[86,715,716],{"class":153},"Expanded",[86,718,157],{"class":92},[86,720,147],{"class":96},[86,722,116],{"class":92},[86,724,725,727,729,731,734,736,738],{"class":88,"line":164},[86,726,144],{"class":92},[86,728,169],{"class":96},[86,730,150],{"class":92},[86,732,733],{"class":153},"This item carries the band.",[86,735,157],{"class":92},[86,737,169],{"class":96},[86,739,116],{"class":92},[86,741,742,744,746],{"class":88,"line":183},[86,743,186],{"class":92},[86,745,125],{"class":96},[86,747,116],{"class":92},[86,749,750,752,754,756,758,760,762,764,766,768,770,772,774],{"class":88,"line":193},[86,751,122],{"class":92},[86,753,125],{"class":96},[86,755,101],{"class":100},[86,757,104],{"class":92},[86,759,107],{"class":92},[86,761,134],{"class":110},[86,763,107],{"class":92},[86,765,319],{"class":100},[86,767,104],{"class":92},[86,769,107],{"class":92},[86,771,326],{"class":110},[86,773,107],{"class":92},[86,775,116],{"class":92},[86,777,778,780,782,784,787,789,791],{"class":88,"line":212},[86,779,144],{"class":92},[86,781,147],{"class":96},[86,783,150],{"class":92},[86,785,786],{"class":153},"Collapsed",[86,788,157],{"class":92},[86,790,147],{"class":96},[86,792,116],{"class":92},[86,794,795,797,799,801,804,806,808],{"class":88,"line":230},[86,796,144],{"class":92},[86,798,169],{"class":96},[86,800,150],{"class":92},[86,802,803],{"class":153},"This one does not.",[86,805,157],{"class":92},[86,807,169],{"class":96},[86,809,116],{"class":92},[86,811,812,814,816],{"class":88,"line":248},[86,813,186],{"class":92},[86,815,125],{"class":96},[86,817,116],{"class":92},[86,819,820,822,824],{"class":88,"line":257},[86,821,157],{"class":92},[86,823,97],{"class":96},[86,825,116],{"class":92},[169,827,828,829,832],{},"For a different tone, one rule of your own is enough — ",[83,830,831],{},"--pui-bg-emphasis"," is there for a third level:",[76,834,836],{"className":547,"code":835,"language":549,"meta":81,"style":81},".pui-accordion.pui-highlighted > .pui-accordion-item[open] {\n  background-color: var(--pui-bg-emphasis);\n}\n",[83,837,838,865,880],{"__ignoreMap":81},[86,839,840,842,844,846,848,850,852,854,857,860,863],{"class":88,"line":89},[86,841,556],{"class":92},[86,843,111],{"class":100},[86,845,556],{"class":92},[86,847,645],{"class":100},[86,849,596],{"class":96},[86,851,599],{"class":92},[86,853,134],{"class":100},[86,855,856],{"class":92},"[",[86,858,859],{"class":100},"open",[86,861,862],{"class":92},"]",[86,864,562],{"class":92},[86,866,867,870,872,874,876,878],{"class":88,"line":119},[86,868,869],{"class":100},"  background-color",[86,871,570],{"class":92},[86,873,573],{"class":153},[86,875,576],{"class":92},[86,877,831],{"class":153},[86,879,582],{"class":92},[86,881,882],{"class":88,"line":141},[86,883,587],{"class":92},[265,885,887],{"id":886},"your-own-icon","Your own icon",[169,889,890,891,894],{},"Put an element with ",[83,892,893],{},"pui-accordion-icon"," in the summary and the drawn chevron\nsteps aside. Placement and the rotation on open stay with the library:",[72,896,897],{},[76,898,900],{"className":78,"code":899,"language":80,"meta":81,"style":81},"\u003Cdetails class=\"pui-accordion-item\">\n  \u003Csummary>\n    Question\n    \u003Ci class=\"pui-accordion-icon bi-chevron-down\">\u003C\u002Fi>\n  \u003C\u002Fsummary>\n  \u003Cp>Answer\u003C\u002Fp>\n\u003C\u002Fdetails>\n",[83,901,902,920,928,933,958,966,983],{"__ignoreMap":81},[86,903,904,906,908,910,912,914,916,918],{"class":88,"line":89},[86,905,93],{"class":92},[86,907,125],{"class":96},[86,909,101],{"class":100},[86,911,104],{"class":92},[86,913,107],{"class":92},[86,915,134],{"class":110},[86,917,107],{"class":92},[86,919,116],{"class":92},[86,921,922,924,926],{"class":88,"line":119},[86,923,122],{"class":92},[86,925,147],{"class":96},[86,927,116],{"class":92},[86,929,930],{"class":88,"line":141},[86,931,932],{"class":153},"    Question\n",[86,934,935,937,940,942,944,946,949,951,954,956],{"class":88,"line":164},[86,936,144],{"class":92},[86,938,939],{"class":96},"i",[86,941,101],{"class":100},[86,943,104],{"class":92},[86,945,107],{"class":92},[86,947,948],{"class":110},"pui-accordion-icon bi-chevron-down",[86,950,107],{"class":92},[86,952,953],{"class":92},">\u003C\u002F",[86,955,939],{"class":96},[86,957,116],{"class":92},[86,959,960,962,964],{"class":88,"line":183},[86,961,186],{"class":92},[86,963,147],{"class":96},[86,965,116],{"class":92},[86,967,968,970,972,974,977,979,981],{"class":88,"line":193},[86,969,122],{"class":92},[86,971,169],{"class":96},[86,973,150],{"class":92},[86,975,976],{"class":153},"Answer",[86,978,157],{"class":92},[86,980,169],{"class":96},[86,982,116],{"class":92},[86,984,985,987,989],{"class":88,"line":212},[86,986,157],{"class":92},[86,988,125],{"class":96},[86,990,116],{"class":92},[169,992,993,994,997],{},"Anything works — an icon font, an inline ",[83,995,996],{},"\u003Csvg>",", or a character.",[265,999,1001],{"id":1000},"reacting-to-it","Reacting to it",[169,1003,1004,1007,1008,1011,1012,1014],{},[83,1005,1006],{},"\u003Cdetails>"," fires a ",[83,1009,1010],{},"toggle"," event, and ",[83,1013,859],{}," is a property:",[76,1016,1020],{"className":1017,"code":1018,"language":1019,"meta":81,"style":81},"language-js shiki shiki-themes perfectui-site","document\n  .querySelector(\".pui-accordion-item\")\n  .addEventListener(\"toggle\", (event) => {\n    console.log(event.target.open);\n  });\n","js",[83,1021,1022,1027,1045,1075,1097],{"__ignoreMap":81},[86,1023,1024],{"class":88,"line":89},[86,1025,1026],{"class":153},"document\n",[86,1028,1029,1032,1035,1037,1040,1042],{"class":88,"line":119},[86,1030,1031],{"class":92},"  .",[86,1033,1034],{"class":153},"querySelector(",[86,1036,107],{"class":92},[86,1038,1039],{"class":110},".pui-accordion-item",[86,1041,107],{"class":92},[86,1043,1044],{"class":153},")\n",[86,1046,1047,1049,1052,1054,1056,1058,1061,1064,1067,1070,1073],{"class":88,"line":141},[86,1048,1031],{"class":92},[86,1050,1051],{"class":153},"addEventListener(",[86,1053,107],{"class":92},[86,1055,1010],{"class":110},[86,1057,107],{"class":92},[86,1059,1060],{"class":92},",",[86,1062,1063],{"class":92}," (",[86,1065,1066],{"class":100},"event",[86,1068,1069],{"class":92},")",[86,1071,1072],{"class":96}," =>",[86,1074,562],{"class":92},[86,1076,1077,1080,1082,1085,1087,1090,1092,1095],{"class":88,"line":164},[86,1078,1079],{"class":153},"    console",[86,1081,556],{"class":92},[86,1083,1084],{"class":153},"log(event",[86,1086,556],{"class":92},[86,1088,1089],{"class":153},"target",[86,1091,556],{"class":92},[86,1093,1094],{"class":153},"open)",[86,1096,616],{"class":92},[86,1098,1099,1102,1104],{"class":88,"line":183},[86,1100,1101],{"class":92},"  }",[86,1103,1069],{"class":153},[86,1105,616],{"class":92},[1107,1108,1109],"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":119,"depth":119,"links":1111},[1112,1113,1114,1115,1116,1117],{"id":267,"depth":119,"text":268},{"id":453,"depth":119,"text":454},{"id":537,"depth":119,"text":538},{"id":639,"depth":119,"text":640},{"id":886,"depth":119,"text":887},{"id":1000,"depth":119,"text":1001},null,"Built on `\u003Cdetails>`. Opening, closing and keyboard support come from the browser: this component is pure CSS, with no script at all.","md",{},true,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion",{"title":67,"description":1119},"docs\u002Fv1\u002F04.components\u002F01.accordion",[1127,1128],"component","accordion","zHZARFiWYC1JxoXii5DgTlrBvrc36ulCZZ4OeykZI48",[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,1197,1201,1205,1209,1213,1217,1221,1225,1229,1233],{"title":67,"path":1123,"stem":1125},{"title":1198,"path":1199,"stem":1200},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":1202,"path":1203,"stem":1204},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":1206,"path":1207,"stem":1208},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":1210,"path":1211,"stem":1212},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":1214,"path":1215,"stem":1216},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":1218,"path":1219,"stem":1220},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":1222,"path":1223,"stem":1224},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"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",1790376112114]