[{"data":1,"prerenderedAt":883},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Fcollapsible":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":32,"body":135,"description":876,"extension":877,"meta":878,"navigation":879,"path":31,"section":11,"seo":880,"stem":881,"__hash__":882},"pkg\u002Fpkg\u002Fcollapsible.md",{"type":136,"value":137,"toc":863},"minimark",[138,142,145,150,198,202,207,220,222,273,277,287,289,335,341,345,354,356,388,392,396,402,527,556,618,622,640,683,712,716,727,782,827,859],[139,140,141],"p",{},"A panel controlled by a button. There is no border. An open trigger rests on the wash, and hover and focus shift that wash. The trigger is rounded and Regular.",[143,144],"base-collapsible-demo",{},[146,147,149],"h2",{"id":148},"anatomy","Anatomy",[151,152,157],"pre",{"className":153,"code":154,"language":155,"meta":156,"style":156},"language-vue shiki shiki-themes github-light github-dark","\u003CUiCollapsibleRoot>\n  \u003CUiCollapsibleTrigger \u002F>\n  \u003CUiCollapsiblePanel \u002F>\n\u003C\u002FUiCollapsibleRoot>\n","vue","",[158,159,160,176,182,188],"code",{"__ignoreMap":156},[161,162,165,169,173],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"sVt8B","\u003C",[161,170,172],{"class":171},"s9eBZ","UiCollapsibleRoot",[161,174,175],{"class":167},">\n",[161,177,179],{"class":163,"line":178},2,[161,180,181],{"class":167},"  \u003CUiCollapsibleTrigger \u002F>\n",[161,183,185],{"class":163,"line":184},3,[161,186,187],{"class":167},"  \u003CUiCollapsiblePanel \u002F>\n",[161,189,191,194,196],{"class":163,"line":190},4,[161,192,193],{"class":167},"\u003C\u002F",[161,195,172],{"class":171},[161,197,175],{"class":167},[146,199,201],{"id":200},"examples","Examples",[203,204,206],"h3",{"id":205},"open","Open",[139,208,209,212,213,215,216,219],{},[158,210,211],{},"defaultOpen"," shows the panel on first render. Use ",[158,214,205],{}," \u002F ",[158,217,218],{},"@update:open"," for a controlled collapsible.",[143,221],{"variant":205},[151,223,225],{"className":153,"code":224,"language":155,"meta":156,"style":156},"\u003CUiCollapsibleRoot :default-open=\"true\">\n  \u003CUiCollapsibleTrigger>Recovery keys\u003C\u002FUiCollapsibleTrigger>\n  \u003CUiCollapsiblePanel>\u003C!-- ... -->\u003C\u002FUiCollapsiblePanel>\n\u003C\u002FUiCollapsibleRoot>\n",[158,226,227,255,260,265],{"__ignoreMap":156},[161,228,229,231,233,236,240,243,247,251,253],{"class":163,"line":164},[161,230,168],{"class":167},[161,232,172],{"class":171},[161,234,235],{"class":167}," :",[161,237,239],{"class":238},"sScJk","default-open",[161,241,242],{"class":167},"=",[161,244,246],{"class":245},"sZZnC","\"",[161,248,250],{"class":249},"sj4cs","true",[161,252,246],{"class":245},[161,254,175],{"class":167},[161,256,257],{"class":163,"line":178},[161,258,259],{"class":167},"  \u003CUiCollapsibleTrigger>Recovery keys\u003C\u002FUiCollapsibleTrigger>\n",[161,261,262],{"class":163,"line":184},[161,263,264],{"class":167},"  \u003CUiCollapsiblePanel>\u003C!-- ... -->\u003C\u002FUiCollapsiblePanel>\n",[161,266,267,269,271],{"class":163,"line":190},[161,268,193],{"class":167},[161,270,172],{"class":171},[161,272,175],{"class":167},[203,274,276],{"id":275},"hidden-until-found","Hidden until found",[139,278,279,282,283,286],{},[158,280,281],{},"hiddenUntilFound"," hides the closed panel with ",[158,284,285],{},"hidden=\"until-found\""," so find-in-page (Ctrl+F \u002F Cmd+F) can still search it and open the panel on a match. Closed content stays in the DOM, which also keeps it indexable. Search for “business days”.",[143,288],{"variant":281},[151,290,292],{"className":153,"code":291,"language":155,"meta":156,"style":156},"\u003CUiCollapsibleRoot hidden-until-found>\n  \u003CUiCollapsibleTrigger>Shipping details\u003C\u002FUiCollapsibleTrigger>\n  \u003CUiCollapsiblePanel>\n    Standard shipping takes 3–5 business days.\n  \u003C\u002FUiCollapsiblePanel>\n\u003C\u002FUiCollapsibleRoot>\n",[158,293,294,305,310,315,320,326],{"__ignoreMap":156},[161,295,296,298,300,303],{"class":163,"line":164},[161,297,168],{"class":167},[161,299,172],{"class":171},[161,301,302],{"class":238}," hidden-until-found",[161,304,175],{"class":167},[161,306,307],{"class":163,"line":178},[161,308,309],{"class":167},"  \u003CUiCollapsibleTrigger>Shipping details\u003C\u002FUiCollapsibleTrigger>\n",[161,311,312],{"class":163,"line":184},[161,313,314],{"class":167},"  \u003CUiCollapsiblePanel>\n",[161,316,317],{"class":163,"line":190},[161,318,319],{"class":167},"    Standard shipping takes 3–5 business days.\n",[161,321,323],{"class":163,"line":322},5,[161,324,325],{"class":167},"  \u003C\u002FUiCollapsiblePanel>\n",[161,327,329,331,333],{"class":163,"line":328},6,[161,330,193],{"class":167},[161,332,172],{"class":171},[161,334,175],{"class":167},[139,336,337,338,340],{},"Older browsers that don’t support ",[158,339,285],{}," keep the panel hidden until the trigger opens it.",[203,342,344],{"id":343},"disabled","Disabled",[139,346,347,349,350,353],{},[158,348,343],{}," ignores presses and sets ",[158,351,352],{},"data-disabled",".",[143,355],{"variant":343},[151,357,359],{"className":153,"code":358,"language":155,"meta":156,"style":156},"\u003CUiCollapsibleRoot disabled>\n  \u003CUiCollapsibleTrigger>Recovery keys\u003C\u002FUiCollapsibleTrigger>\n  \u003CUiCollapsiblePanel>\u003C!-- ... -->\u003C\u002FUiCollapsiblePanel>\n\u003C\u002FUiCollapsibleRoot>\n",[158,360,361,372,376,380],{"__ignoreMap":156},[161,362,363,365,367,370],{"class":163,"line":164},[161,364,168],{"class":167},[161,366,172],{"class":171},[161,368,369],{"class":238}," disabled",[161,371,175],{"class":167},[161,373,374],{"class":163,"line":178},[161,375,259],{"class":167},[161,377,378],{"class":163,"line":184},[161,379,264],{"class":167},[161,381,382,384,386],{"class":163,"line":190},[161,383,193],{"class":167},[161,385,172],{"class":171},[161,387,175],{"class":167},[146,389,391],{"id":390},"api-reference","API reference",[203,393,395],{"id":394},"root","Root",[139,397,398,399,353],{},"Groups all parts of the collapsible. Renders a ",[158,400,401],{},"\u003Cdiv>",[403,404,405,424],"table",{},[406,407,408],"thead",{},[409,410,411,415,418,421],"tr",{},[412,413,414],"th",{},"Prop",[412,416,417],{},"Type",[412,419,420],{},"Default",[412,422,423],{},"Description",[425,426,427,447,467,484,507],"tbody",{},[409,428,429,434,439,444],{},[430,431,432],"td",{},[158,433,211],{},[430,435,436],{},[158,437,438],{},"boolean",[430,440,441],{},[158,442,443],{},"false",[430,445,446],{},"Uncontrolled initial open state.",[409,448,449,453,457,460],{},[430,450,451],{},[158,452,205],{},[430,454,455],{},[158,456,438],{},[430,458,459],{},"—",[430,461,462,463,466],{},"Controlled open state (",[158,464,465],{},"v-model:open",").",[409,468,469,473,477,481],{},[430,470,471],{},[158,472,343],{},[430,474,475],{},[158,476,438],{},[430,478,479],{},[158,480,443],{},[430,482,483],{},"Ignore interaction.",[409,485,486,490,494,498],{},[430,487,488],{},[158,489,281],{},[430,491,492],{},[158,493,438],{},[430,495,496],{},[158,497,443],{},[430,499,500,501,503,504,353],{},"Apply ",[158,502,285],{}," to the closed panel. Overrides ",[158,505,506],{},"keepMounted",[409,508,509,513,517,521],{},[430,510,511],{},[158,512,506],{},[430,514,515],{},[158,516,438],{},[430,518,519],{},[158,520,443],{},[430,522,523,524,526],{},"Keep the panel in the DOM while closed. Ignored when ",[158,525,281],{}," is set.",[403,528,529,540],{},[406,530,531],{},[409,532,533,536,538],{},[412,534,535],{},"Event",[412,537,417],{},[412,539,423],{},[425,541,542],{},[409,543,544,548,553],{},[430,545,546],{},[158,547,218],{},[430,549,550],{},[158,551,552],{},"(open: boolean) => void",[430,554,555],{},"Emitted when the panel opens or closes.",[403,557,558,567],{},[406,559,560],{},[409,561,562,565],{},[412,563,564],{},"Attribute",[412,566,423],{},[425,568,569,579,589,598,608],{},[409,570,571,576],{},[430,572,573],{},[158,574,575],{},"data-open",[430,577,578],{},"Present when the collapsible is open.",[409,580,581,586],{},[430,582,583],{},[158,584,585],{},"data-closed",[430,587,588],{},"Present when the collapsible is closed.",[409,590,591,595],{},[430,592,593],{},[158,594,352],{},[430,596,597],{},"Present when the collapsible is disabled.",[409,599,600,605],{},[430,601,602],{},[158,603,604],{},"data-starting-style",[430,606,607],{},"Present while the panel is animating in.",[409,609,610,615],{},[430,611,612],{},[158,613,614],{},"data-ending-style",[430,616,617],{},"Present while the panel is animating out.",[203,619,621],{"id":620},"trigger","Trigger",[139,623,624,625,628,629,632,633,636,637,526],{},"A button that opens and closes the panel. Renders a ",[158,626,627],{},"\u003Cbutton>"," by default. Sets ",[158,630,631],{},"aria-expanded"," and ",[158,634,635],{},"aria-controls",". The caret rotates 90° when ",[158,638,639],{},"data-panel-open",[403,641,642,654],{},[406,643,644],{},[409,645,646,648,650,652],{},[412,647,414],{},[412,649,417],{},[412,651,420],{},[412,653,423],{},[425,655,656],{},[409,657,658,663,667,671],{},[430,659,660],{},[158,661,662],{},"nativeButton",[430,664,665],{},[158,666,438],{},[430,668,669],{},[158,670,250],{},[430,672,673,674,676,677,679,680,682],{},"Render a native ",[158,675,627],{},". Set ",[158,678,443],{}," to render a ",[158,681,161],{}," with button semantics.",[403,684,685,693],{},[406,686,687],{},[409,688,689,691],{},[412,690,564],{},[412,692,423],{},[425,694,695,704],{},[409,696,697,701],{},[430,698,699],{},[158,700,639],{},[430,702,703],{},"Present when the panel is open.",[409,705,706,710],{},[430,707,708],{},[158,709,352],{},[430,711,597],{},[203,713,715],{"id":714},"panel","Panel",[139,717,718,719,722,723,726],{},"The collapsible contents. Renders a ",[158,720,721],{},"\u003Cdiv role=\"region\">",". Height uses ",[158,724,725],{},"--collapsible-panel-height"," with a 150ms CSS transition (no animation library).",[403,728,729,741],{},[406,730,731],{},[409,732,733,735,737,739],{},[412,734,414],{},[412,736,417],{},[412,738,420],{},[412,740,423],{},[425,742,743,762],{},[409,744,745,749,753,757],{},[430,746,747],{},[158,748,281],{},[430,750,751],{},[158,752,438],{},[430,754,755],{},[158,756,443],{},[430,758,759,760,353],{},"Searchable closed panel. Overrides ",[158,761,506],{},[409,763,764,768,772,776],{},[430,765,766],{},[158,767,506],{},[430,769,770],{},[158,771,438],{},[430,773,774],{},[158,775,443],{},[430,777,778,779,781],{},"Keep this panel mounted while closed. Root ",[158,780,506],{}," still applies.",[403,783,784,792],{},[406,785,786],{},[409,787,788,790],{},[412,789,564],{},[412,791,423],{},[425,793,794,802,811,819],{},[409,795,796,800],{},[430,797,798],{},[158,799,575],{},[430,801,703],{},[409,803,804,808],{},[430,805,806],{},[158,807,585],{},[430,809,810],{},"Present when the panel is closed.",[409,812,813,817],{},[430,814,815],{},[158,816,604],{},[430,818,607],{},[409,820,821,825],{},[430,822,823],{},[158,824,614],{},[430,826,617],{},[403,828,829,838],{},[406,830,831],{},[409,832,833,836],{},[412,834,835],{},"CSS variable",[412,837,423],{},[425,839,840,849],{},[409,841,842,846],{},[430,843,844],{},[158,845,725],{},[430,847,848],{},"The panel’s height.",[409,850,851,856],{},[430,852,853],{},[158,854,855],{},"--collapsible-panel-width",[430,857,858],{},"The panel’s width.",[860,861,862],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":156,"searchDepth":178,"depth":178,"links":864},[865,866,871],{"id":148,"depth":178,"text":149},{"id":200,"depth":178,"text":201,"children":867},[868,869,870],{"id":205,"depth":184,"text":206},{"id":275,"depth":184,"text":276},{"id":343,"depth":184,"text":344},{"id":390,"depth":178,"text":391,"children":872},[873,874,875],{"id":394,"depth":184,"text":395},{"id":620,"depth":184,"text":621},{"id":714,"depth":184,"text":715},"A collapsible element with a trigger and panel","md",{},true,{"title":32,"description":876},"pkg\u002Fcollapsible","LRK3q_ZlebuKbjaIuh89TeI69GDK5m-Oim2VRByxAW0",1791043754649]