[{"data":1,"prerenderedAt":823},["ShallowReactive",2],{"docs:accordion":3,"demo:accordion\u002Fhero":821,"demo:accordion\u002Fmultiple":822},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,177,181,186,193,196,200,204,211,320,349,353,358,419,470,474,480,513,557,561,567,618,656,660,665,723,756],[8,9,11],"h1",{"id":10},"accordion","Accordion",[13,14,15],"p",{},"Collapsible stacked sections.",[17,18],"demo",{"name":19},"accordion\u002Fhero",[21,22,24],"h2",{"id":23},"anatomy","Anatomy",[26,27,31],"pre",{"language":28,"meta":29,"class":30},"vue","title=\"Anatomy\"","shiki shiki-themes github-light github-dark dark:github-dark",[32,33,35,55,56,55,72,55,81,55,83,55,92,55,102,55,112,55,122,55,133,55,142,55,151,55,160,55,169],"code",{"class":34},"language-vue",[36,37,40,44,48,52],"span",{"class":38,"style":39},"line","display: inline",[36,41,43],{"style":42},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[36,45,47],{"style":46},"color:#22863A;--shiki-dark:#85E89D","script",[36,49,51],{"style":50},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[36,53,54],{"style":42},">","\n",[36,57,58,62,65,68],{"class":38,"style":39},[36,59,61],{"style":60},"color:#D73A49;--shiki-dark:#F97583","import",[36,63,64],{"style":42}," { Accordion } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Faccordion'",[36,73,74,77,79],{"class":38,"style":39},[36,75,76],{"style":42},"\u003C\u002F",[36,78,47],{"style":46},[36,80,54],{"style":42},[36,82],{"class":38,"style":39},[36,84,85,87,90],{"class":38,"style":39},[36,86,43],{"style":42},[36,88,89],{"style":46},"template",[36,91,54],{"style":42},[36,93,94,97,100],{"class":38,"style":39},[36,95,96],{"style":42},"  \u003C",[36,98,99],{"style":46},"Accordion.Root",[36,101,54],{"style":42},[36,103,104,107,110],{"class":38,"style":39},[36,105,106],{"style":42},"    \u003C",[36,108,109],{"style":46},"Accordion.Item",[36,111,54],{"style":42},[36,113,114,117,120],{"class":38,"style":39},[36,115,116],{"style":42},"      \u003C",[36,118,119],{"style":46},"Accordion.Header",[36,121,54],{"style":42},[36,123,124,127,130],{"class":38,"style":39},[36,125,126],{"style":42},"        \u003C",[36,128,129],{"style":46},"Accordion.Trigger",[36,131,132],{"style":42}," \u002F>",[36,134,135,138,140],{"class":38,"style":39},[36,136,137],{"style":42},"      \u003C\u002F",[36,139,119],{"style":46},[36,141,54],{"style":42},[36,143,144,146,149],{"class":38,"style":39},[36,145,116],{"style":42},[36,147,148],{"style":46},"Accordion.Panel",[36,150,132],{"style":42},[36,152,153,156,158],{"class":38,"style":39},[36,154,155],{"style":42},"    \u003C\u002F",[36,157,109],{"style":46},[36,159,54],{"style":42},[36,161,162,165,167],{"class":38,"style":39},[36,163,164],{"style":42},"  \u003C\u002F",[36,166,99],{"style":46},[36,168,54],{"style":42},[36,170,171,173,175],{"class":38,"style":39},[36,172,76],{"style":42},[36,174,89],{"style":46},[36,176,54],{"style":42},[21,178,180],{"id":179},"examples","Examples",[182,183,185],"h3",{"id":184},"examples-open-multiple-panels","Open multiple panels",[13,187,188,189,192],{},"Set ",[32,190,191],{},"multiple"," to keep more than one panel open at once.",[17,194],{"name":195},"accordion\u002Fmultiple",[21,197,199],{"id":198},"api-reference","API reference",[182,201,203],{"id":202},"api-reference-root","Root",[13,205,206,207,210],{},"Groups all parts of the accordion.\nRenders a ",[32,208,209],{},"\u003Cdiv>"," element.",[212,213],"table",{"columns":214,"rows":218},[215,216,217],"Prop","Type","Default",[219,231,242,251,262,273,282,291,300,310],{"summary":220,"detail":224},[221,222,223],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[225,226,227,228],{"label":215,"html":221},{"label":216,"html":222},{"label":217,"html":223},{"label":229,"html":230},"Description","HTML element to render.",{"summary":232,"detail":236},[233,234,235],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[237,238,239,240],{"label":215,"html":233},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":241},"CSS class applied to the element.",{"summary":243,"detail":245},[244,234,235],"\u003Ccode>style\u003C\u002Fcode>",[246,247,248,249],{"label":215,"html":244},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":250},"Inline style applied to the element.",{"summary":252,"detail":256},[253,254,255],"\u003Ccode>value\u003C\u002Fcode>","\u003Ccode>Value[]\u003C\u002Fcode>","\u003Ccode>[]\u003C\u002Fcode>",[257,258,259,260],{"label":215,"html":253},{"label":216,"html":254},{"label":217,"html":255},{"label":229,"html":261},"The value of the item(s) that should be expanded (use \u003Ccode>v-model:value\u003C\u002Fcode>). \u003Ccode>Value\u003C\u002Fcode> is generic and defaults to \u003Ccode>unknown\u003C\u002Fcode>.",{"summary":263,"detail":267},[264,265,266],"\u003Ccode>disabled\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[268,269,270,271],{"label":215,"html":264},{"label":216,"html":265},{"label":217,"html":266},{"label":229,"html":272},"Whether the component should ignore user interaction.",{"summary":274,"detail":276},[275,265,266],"\u003Ccode>hiddenUntilFound\u003C\u002Fcode>",[277,278,279,280],{"label":215,"html":275},{"label":216,"html":265},{"label":217,"html":266},{"label":229,"html":281},"Allows the browser's built-in page search to find and expand the panel contents. Overrides the \u003Ccode>keepMounted\u003C\u002Fcode> prop and uses \u003Ccode>hidden=&quot;until-found&quot;\u003C\u002Fcode> to hide the element without removing it from the DOM.",{"summary":283,"detail":285},[284,265,266],"\u003Ccode>multiple\u003C\u002Fcode>",[286,287,288,289],{"label":215,"html":284},{"label":216,"html":265},{"label":217,"html":266},{"label":229,"html":290},"Whether multiple items can be open at the same time.",{"summary":292,"detail":294},[293,265,266],"\u003Ccode>keepMounted\u003C\u002Fcode>",[295,296,297,298],{"label":215,"html":293},{"label":216,"html":265},{"label":217,"html":266},{"label":229,"html":299},"Whether to keep the element in the DOM while the panel is closed. This prop is ignored when \u003Ccode>hiddenUntilFound\u003C\u002Fcode> is used.",{"summary":301,"detail":304},[302,303,235],"\u003Ccode>update:value\u003C\u002Fcode>","\u003Ccode>(value: Value[]) =&gt; void\u003C\u002Fcode>",[305,306,307,308],{"label":215,"html":302},{"label":216,"html":303},{"label":217,"html":235},{"label":229,"html":309},"Emitted when an accordion item is expanded or collapsed. Provides the new value as an argument.",{"summary":311,"detail":314},[312,313,235],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot&lt;{ value, disabled }&gt;\u003C\u002Fcode>",[315,316,317,318],{"label":215,"html":312},{"label":216,"html":313},{"label":217,"html":235},{"label":229,"html":319},"Content; receives the accordion state.",[212,321,322,335],{},[323,324,325],"thead",{},[326,327,328,333],"tr",{},[329,330,332],"th",{"style":331},"text-align:left","Attribute",[329,334,229],{"style":331},[336,337,338],"tbody",{},[326,339,340,346],{},[341,342,343],"td",{"style":331},[32,344,345],{},"data-disabled",[341,347,348],{"style":331},"Present when the accordion is disabled.",[182,350,352],{"id":351},"api-reference-item","Item",[13,354,355,356,210],{},"Groups an accordion header with the corresponding panel.\nRenders a ",[32,357,209],{},[212,359],{"columns":360,"rows":361},[215,216,217],[362,369,376,383,392,400,410],{"summary":363,"detail":364},[221,222,223],[365,366,367,368],{"label":215,"html":221},{"label":216,"html":222},{"label":217,"html":223},{"label":229,"html":230},{"summary":370,"detail":371},[233,234,235],[372,373,374,375],{"label":215,"html":233},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":241},{"summary":377,"detail":378},[244,234,235],[379,380,381,382],{"label":215,"html":244},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":250},{"summary":384,"detail":386},[253,385,235],"\u003Ccode>unknown\u003C\u002Fcode>",[387,388,389,390],{"label":215,"html":253},{"label":216,"html":385},{"label":217,"html":235},{"label":229,"html":391},"A unique value identifying this item. Auto-generated if omitted.",{"summary":393,"detail":394},[264,265,266],[395,396,397,398],{"label":215,"html":264},{"label":216,"html":265},{"label":217,"html":266},{"label":229,"html":399},"Disables this item (inherits from Root if set there).",{"summary":401,"detail":404},[402,403,235],"\u003Ccode>openChange\u003C\u002Fcode>","\u003Ccode>(open: boolean) =&gt; void\u003C\u002Fcode>",[405,406,407,408],{"label":215,"html":402},{"label":216,"html":403},{"label":217,"html":235},{"label":229,"html":409},"Emitted when this item's panel is opened or closed.",{"summary":411,"detail":413},[312,412,235],"\u003Ccode>Slot&lt;{ value, disabled, hidden, open }&gt;\u003C\u002Fcode>",[414,415,416,417],{"label":215,"html":312},{"label":216,"html":412},{"label":217,"html":235},{"label":229,"html":418},"Content; receives the item state.",[212,420,421,429],{},[323,422,423],{},[326,424,425,427],{},[329,426,332],{"style":331},[329,428,229],{"style":331},[336,430,431,441,451,461],{},[326,432,433,438],{},[341,434,435],{"style":331},[32,436,437],{},"data-open",[341,439,440],{"style":331},"Present when the accordion item is open.",[326,442,443,448],{},[341,444,445],{"style":331},[32,446,447],{},"data-closed",[341,449,450],{"style":331},"Present when the accordion item is closed.",[326,452,453,458],{},[341,454,455],{"style":331},[32,456,457],{},"data-hidden",[341,459,460],{"style":331},"Present when the panel is closed and not animating out.",[326,462,463,467],{},[341,464,465],{"style":331},[32,466,345],{},[341,468,469],{"style":331},"Present when the accordion item is disabled.",[182,471,473],{"id":472},"api-reference-header","Header",[13,475,476,477,210],{},"A heading that labels the corresponding panel.\nRenders an ",[32,478,479],{},"\u003Ch3>",[212,481],{"columns":482,"rows":483},[215,216,217],[484,492,499,506],{"summary":485,"detail":487},[221,222,486],"\u003Ccode>'h3'\u003C\u002Fcode>",[488,489,490,491],{"label":215,"html":221},{"label":216,"html":222},{"label":217,"html":486},{"label":229,"html":230},{"summary":493,"detail":494},[233,234,235],[495,496,497,498],{"label":215,"html":233},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":241},{"summary":500,"detail":501},[244,234,235],[502,503,504,505],{"label":215,"html":244},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":250},{"summary":507,"detail":508},[312,412,235],[509,510,511,512],{"label":215,"html":312},{"label":216,"html":412},{"label":217,"html":235},{"label":229,"html":418},[212,514,515,523],{},[323,516,517],{},[326,518,519,521],{},[329,520,332],{"style":331},[329,522,229],{"style":331},[336,524,525,533,541,549],{},[326,526,527,531],{},[341,528,529],{"style":331},[32,530,437],{},[341,532,440],{"style":331},[326,534,535,539],{},[341,536,537],{"style":331},[32,538,447],{},[341,540,450],{"style":331},[326,542,543,547],{},[341,544,545],{"style":331},[32,546,457],{},[341,548,460],{"style":331},[326,550,551,555],{},[341,552,553],{"style":331},[32,554,345],{},[341,556,469],{"style":331},[182,558,560],{"id":559},"api-reference-trigger","Trigger",[13,562,563,564,210],{},"A button that opens and closes the corresponding panel.\nRenders a ",[32,565,566],{},"\u003Cbutton>",[212,568],{"columns":569,"rows":570},[215,216,217],[571,579,586,593,603,611],{"summary":572,"detail":574},[221,222,573],"\u003Ccode>'button'\u003C\u002Fcode>",[575,576,577,578],{"label":215,"html":221},{"label":216,"html":222},{"label":217,"html":573},{"label":229,"html":230},{"summary":580,"detail":581},[233,234,235],[582,583,584,585],{"label":215,"html":233},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":241},{"summary":587,"detail":588},[244,234,235],[589,590,591,592],{"label":215,"html":244},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":250},{"summary":594,"detail":597},[595,234,596],"\u003Ccode>id\u003C\u002Fcode>","auto",[598,599,600,601],{"label":215,"html":595},{"label":216,"html":234},{"label":217,"html":596},{"label":229,"html":602},"Custom element ID. Referenced by the panel's \u003Ccode>aria-labelledby\u003C\u002Fcode>.",{"summary":604,"detail":605},[264,265,235],[606,607,608,609],{"label":215,"html":264},{"label":216,"html":265},{"label":217,"html":235},{"label":229,"html":610},"Disables this trigger (also disabled when Item or Root is).",{"summary":612,"detail":613},[312,412,235],[614,615,616,617],{"label":215,"html":312},{"label":216,"html":412},{"label":217,"html":235},{"label":229,"html":418},[212,619,620,628],{},[323,621,622],{},[326,623,624,626],{},[329,625,332],{"style":331},[329,627,229],{"style":331},[336,629,630,640,648],{},[326,631,632,637],{},[341,633,634],{"style":331},[32,635,636],{},"data-panel-open",[341,638,639],{"style":331},"Present when the accordion panel is open.",[326,641,642,646],{},[341,643,644],{"style":331},[32,645,457],{},[341,647,460],{"style":331},[326,649,650,654],{},[341,651,652],{"style":331},[32,653,345],{},[341,655,469],{"style":331},[182,657,659],{"id":658},"api-reference-panel","Panel",[13,661,662,663,210],{},"A collapsible panel with the accordion item contents.\nRenders a ",[32,664,209],{},[212,666],{"columns":667,"rows":668},[215,216,217],[669,676,683,690,698,706,714],{"summary":670,"detail":671},[221,222,223],[672,673,674,675],{"label":215,"html":221},{"label":216,"html":222},{"label":217,"html":223},{"label":229,"html":230},{"summary":677,"detail":678},[233,234,235],[679,680,681,682],{"label":215,"html":233},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":241},{"summary":684,"detail":685},[244,234,235],[686,687,688,689],{"label":215,"html":244},{"label":216,"html":234},{"label":217,"html":235},{"label":229,"html":250},{"summary":691,"detail":692},[595,234,596],[693,694,695,696],{"label":215,"html":595},{"label":216,"html":234},{"label":217,"html":596},{"label":229,"html":697},"Custom element ID.",{"summary":699,"detail":700},[293,265,235],[701,702,703,704],{"label":215,"html":293},{"label":216,"html":265},{"label":217,"html":235},{"label":229,"html":705},"Overrides Root's setting. Keeps this panel in the DOM when closed.",{"summary":707,"detail":708},[275,265,235],[709,710,711,712],{"label":215,"html":275},{"label":216,"html":265},{"label":217,"html":235},{"label":229,"html":713},"Overrides Root's setting. Uses \u003Ccode>hidden=&quot;until-found&quot;\u003C\u002Fcode> so in-page search can find and reveal this panel.",{"summary":715,"detail":717},[312,716,235],"\u003Ccode>Slot&lt;{ value, disabled, hidden, open, transitionStatus }&gt;\u003C\u002Fcode>",[718,719,720,721],{"label":215,"html":312},{"label":216,"html":716},{"label":217,"html":235},{"label":229,"html":722},"Content; receives the panel state.",[212,724,725,734],{},[323,726,727],{},[326,728,729,732],{},[329,730,731],{"style":331},"CSS Variable",[329,733,229],{"style":331},[336,735,736,746],{},[326,737,738,743],{},[341,739,740],{"style":331},[32,741,742],{},"--accordion-panel-height",[341,744,745],{"style":331},"The panel's computed height.",[326,747,748,753],{},[341,749,750],{"style":331},[32,751,752],{},"--accordion-panel-width",[341,754,755],{"style":331},"The panel's computed width.",[212,757,758,766],{},[323,759,760],{},[326,761,762,764],{},[329,763,332],{"style":331},[329,765,229],{"style":331},[336,767,768,776,785,793,801,811],{},[326,769,770,774],{},[341,771,772],{"style":331},[32,773,437],{},[341,775,639],{"style":331},[326,777,778,782],{},[341,779,780],{"style":331},[32,781,447],{},[341,783,784],{"style":331},"Present when the accordion panel is closed.",[326,786,787,791],{},[341,788,789],{"style":331},[32,790,457],{},[341,792,460],{"style":331},[326,794,795,799],{},[341,796,797],{"style":331},[32,798,345],{},[341,800,469],{"style":331},[326,802,803,808],{},[341,804,805],{"style":331},[32,806,807],{},"data-starting-style",[341,809,810],{"style":331},"Present when the panel is animating in.",[326,812,813,818],{},[341,814,815],{"style":331},[32,816,817],{},"data-ending-style",[341,819,820],{"style":331},"Present when the panel is animating out.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Accordion } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Faccordion'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> faqs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    question: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Kerning or tracking?'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    answer:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">      'Kerning adjusts the space between two specific characters. Tracking spaces a whole word or block uniformly.'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    question: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Ease-in or ease-out for an entrance?'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    answer:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">      'Ease-out. It starts fast and settles into place, so entrances feel natural — ease-in feels reluctant.'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full max-w-80 flex-col text-gray-900\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"faq in faqs\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"faq.question\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"border-b border-gray-200\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h2\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Trigger\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"group relative flex w-full items-center justify-between gap-4 bg-gray-50 px-3 py-2 text-left text-sm font-normal focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-gray-950\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          {{ faq.question }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">svg\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"0 0 24 24\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"none\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"true\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"block size-4 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">            &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">path\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"M12 3.75V12M12 12V20.25M12 12H3.75M12 12H20.25\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"currentColor\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"1.5\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-linecap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"round\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-linejoin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"round\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">            \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Trigger\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Panel\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-600 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"px-3 py-2\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{{ faq.answer }}&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Accordion } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Faccordion'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> sections\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    title: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Type scale'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    content: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Pick every size from one ratio-based scale so hierarchy stays consistent.'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    title: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Focus states'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    content: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Keep the keyboard-focused element visible — restyle the outline, never remove it.'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">&#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> multiple\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full max-w-80 flex-col text-gray-900\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Item\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"section in sections\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"section.title\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"border-b border-gray-200\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Trigger\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"group relative flex w-full items-center justify-between gap-4 bg-gray-50 px-3 py-2 text-left text-sm font-normal focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-gray-950\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          {{ section.title }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">svg\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"0 0 24 24\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"none\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"true\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"block size-4 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">            &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">path\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"M12 3.75V12M12 12V20.25M12 12H3.75M12 12H20.25\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"currentColor\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"1.5\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-linecap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"round\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-linejoin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"round\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">            \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Trigger\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Panel\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-600 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        &#x3C;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"px-3 py-2\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{{ section.content }}&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  &#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Accordion.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">&#x3C;\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1789390071940]