[{"data":1,"prerenderedAt":557},["ShallowReactive",2],{"docs:collapsible":3,"demo:collapsible\u002Fhero":556},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,139,143,148,155,235,304,308,314,355,400,404,409,469,523],[8,9,11],"h1",{"id":10},"collapsible","Collapsible",[13,14,15],"p",{},"An expand-and-collapse panel.",[17,18],"demo",{"name":19},"collapsible\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,113,55,122,55,131],"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}," { Collapsible } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fcollapsible'",[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},"Collapsible.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},"Collapsible.Trigger",[36,111,112],{"style":42}," \u002F>",[36,114,115,117,120],{"class":38,"style":39},[36,116,106],{"style":42},[36,118,119],{"style":46},"Collapsible.Panel",[36,121,112],{"style":42},[36,123,124,127,129],{"class":38,"style":39},[36,125,126],{"style":42},"  \u003C\u002F",[36,128,99],{"style":46},[36,130,54],{"style":42},[36,132,133,135,137],{"class":38,"style":39},[36,134,76],{"style":42},[36,136,89],{"style":46},[36,138,54],{"style":42},[21,140,142],{"id":141},"api-reference","API reference",[144,145,147],"h3",{"id":146},"api-reference-root","Root",[13,149,150,151,154],{},"Groups all parts of the collapsible.\nRenders a ",[32,152,153],{},"\u003Cdiv>"," element.",[156,157],"table",{"columns":158,"rows":162},[159,160,161],"Prop","Type","Default",[163,175,186,195,206,216,225],{"summary":164,"detail":168},[165,166,167],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[169,170,171,172],{"label":159,"html":165},{"label":160,"html":166},{"label":161,"html":167},{"label":173,"html":174},"Description","HTML element to render.",{"summary":176,"detail":180},[177,178,179],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[181,182,183,184],{"label":159,"html":177},{"label":160,"html":178},{"label":161,"html":179},{"label":173,"html":185},"CSS class applied to the element.",{"summary":187,"detail":189},[188,178,179],"\u003Ccode>style\u003C\u002Fcode>",[190,191,192,193],{"label":159,"html":188},{"label":160,"html":178},{"label":161,"html":179},{"label":173,"html":194},"Inline style applied to the element.",{"summary":196,"detail":200},[197,198,199],"\u003Ccode>open\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[201,202,203,204],{"label":159,"html":197},{"label":160,"html":198},{"label":161,"html":199},{"label":173,"html":205},"Whether the collapsible panel is currently open (use \u003Ccode>v-model:open\u003C\u002Fcode>).",{"summary":207,"detail":210},[208,209,179],"\u003Ccode>update:open\u003C\u002Fcode>","\u003Ccode>(open: boolean) => void\u003C\u002Fcode>",[211,212,213,214],{"label":159,"html":208},{"label":160,"html":209},{"label":161,"html":179},{"label":173,"html":215},"Emitted when the panel is opened or closed.",{"summary":217,"detail":219},[218,198,199],"\u003Ccode>disabled\u003C\u002Fcode>",[220,221,222,223],{"label":159,"html":218},{"label":160,"html":198},{"label":161,"html":199},{"label":173,"html":224},"Whether the component should ignore user interaction.",{"summary":226,"detail":229},[227,228,179],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ open, disabled, transitionStatus }>\u003C\u002Fcode>",[230,231,232,233],{"label":159,"html":227},{"label":160,"html":228},{"label":161,"html":179},{"label":173,"html":234},"Content; receives the collapsible state.",[156,236,237,250],{},[238,239,240],"thead",{},[241,242,243,248],"tr",{},[244,245,247],"th",{"style":246},"text-align:left","Attribute",[244,249,173],{"style":246},[251,252,253,264,274,284,294],"tbody",{},[241,254,255,261],{},[256,257,258],"td",{"style":246},[32,259,260],{},"data-open",[256,262,263],{"style":246},"Present when the collapsible panel is open.",[241,265,266,271],{},[256,267,268],{"style":246},[32,269,270],{},"data-closed",[256,272,273],{"style":246},"Present when the collapsible panel is closed.",[241,275,276,281],{},[256,277,278],{"style":246},[32,279,280],{},"data-disabled",[256,282,283],{"style":246},"Present when the collapsible is disabled.",[241,285,286,291],{},[256,287,288],{"style":246},[32,289,290],{},"data-starting-style",[256,292,293],{"style":246},"Present when the panel is animating in.",[241,295,296,301],{},[256,297,298],{"style":246},[32,299,300],{},"data-ending-style",[256,302,303],{"style":246},"Present when the panel is animating out.",[144,305,307],{"id":306},"api-reference-trigger","Trigger",[13,309,310,311,154],{},"A button that opens and closes the collapsible panel.\nRenders a ",[32,312,313],{},"\u003Cbutton>",[156,315],{"columns":316,"rows":317},[159,160,161],[318,326,333,340,348],{"summary":319,"detail":321},[165,166,320],"\u003Ccode>'button'\u003C\u002Fcode>",[322,323,324,325],{"label":159,"html":165},{"label":160,"html":166},{"label":161,"html":320},{"label":173,"html":174},{"summary":327,"detail":328},[177,178,179],[329,330,331,332],{"label":159,"html":177},{"label":160,"html":178},{"label":161,"html":179},{"label":173,"html":185},{"summary":334,"detail":335},[188,178,179],[336,337,338,339],{"label":159,"html":188},{"label":160,"html":178},{"label":161,"html":179},{"label":173,"html":194},{"summary":341,"detail":342},[218,198,179],[343,344,345,346],{"label":159,"html":218},{"label":160,"html":198},{"label":161,"html":179},{"label":173,"html":347},"Overrides Root's \u003Ccode>disabled\u003C\u002Fcode>. Disables this trigger.",{"summary":349,"detail":350},[227,228,179],[351,352,353,354],{"label":159,"html":227},{"label":160,"html":228},{"label":161,"html":179},{"label":173,"html":234},[156,356,357,365],{},[238,358,359],{},[241,360,361,363],{},[244,362,247],{"style":246},[244,364,173],{"style":246},[251,366,367,376,384,392],{},[241,368,369,374],{},[256,370,371],{"style":246},[32,372,373],{},"data-panel-open",[256,375,263],{"style":246},[241,377,378,382],{},[256,379,380],{"style":246},[32,381,280],{},[256,383,283],{"style":246},[241,385,386,390],{},[256,387,388],{"style":246},[32,389,290],{},[256,391,293],{"style":246},[241,393,394,398],{},[256,395,396],{"style":246},[32,397,300],{},[256,399,303],{"style":246},[144,401,403],{"id":402},"api-reference-panel","Panel",[13,405,406,407,154],{},"A panel with the collapsible contents.\nRenders a ",[32,408,153],{},[156,410],{"columns":411,"rows":412},[159,160,161],[413,420,427,434,444,453,462],{"summary":414,"detail":415},[165,166,167],[416,417,418,419],{"label":159,"html":165},{"label":160,"html":166},{"label":161,"html":167},{"label":173,"html":174},{"summary":421,"detail":422},[177,178,179],[423,424,425,426],{"label":159,"html":177},{"label":160,"html":178},{"label":161,"html":179},{"label":173,"html":185},{"summary":428,"detail":429},[188,178,179],[430,431,432,433],{"label":159,"html":188},{"label":160,"html":178},{"label":161,"html":179},{"label":173,"html":194},{"summary":435,"detail":438},[436,178,437],"\u003Ccode>id\u003C\u002Fcode>","auto",[439,440,441,442],{"label":159,"html":436},{"label":160,"html":178},{"label":161,"html":437},{"label":173,"html":443},"Custom element ID. Referenced by the trigger's \u003Ccode>aria-controls\u003C\u002Fcode>.",{"summary":445,"detail":447},[446,198,199],"\u003Ccode>hiddenUntilFound\u003C\u002Fcode>",[448,449,450,451],{"label":159,"html":446},{"label":160,"html":198},{"label":161,"html":199},{"label":173,"html":452},"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="until-found"\u003C\u002Fcode> to hide the element without removing it from the DOM.",{"summary":454,"detail":456},[455,198,199],"\u003Ccode>keepMounted\u003C\u002Fcode>",[457,458,459,460],{"label":159,"html":455},{"label":160,"html":198},{"label":161,"html":199},{"label":173,"html":461},"Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when \u003Ccode>hiddenUntilFound\u003C\u002Fcode> is used.",{"summary":463,"detail":464},[227,228,179],[465,466,467,468],{"label":159,"html":227},{"label":160,"html":228},{"label":161,"html":179},{"label":173,"html":234},[156,470,471,479],{},[238,472,473],{},[241,474,475,477],{},[244,476,247],{"style":246},[244,478,173],{"style":246},[251,480,481,490,499,507,515],{},[241,482,483,487],{},[256,484,485],{"style":246},[32,486,260],{},[256,488,489],{"style":246},"Present when the panel is open.",[241,491,492,496],{},[256,493,494],{"style":246},[32,495,270],{},[256,497,498],{"style":246},"Present when the panel is closed.",[241,500,501,505],{},[256,502,503],{"style":246},[32,504,280],{},[256,506,283],{"style":246},[241,508,509,513],{},[256,510,511],{"style":246},[32,512,290],{},[256,514,293],{"style":246},[241,516,517,521],{},[256,518,519],{"style":246},[32,520,300],{},[256,522,303],{"style":246},[156,524,525,534],{},[238,526,527],{},[241,528,529,532],{},[244,530,531],{"style":246},"CSS Variable",[244,533,173],{"style":246},[251,535,536,546],{},[241,537,538,543],{},[256,539,540],{"style":246},[32,541,542],{},"--collapsible-panel-height",[256,544,545],{"style":246},"The panel's computed height.",[241,547,548,553],{},[256,549,550],{"style":246},[32,551,552],{},"--collapsible-panel-width",[256,554,555],{"style":246},"The panel's computed width.","\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\"><\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\"> { Collapsible } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fcollapsible'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\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\"><\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\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Collapsible.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-72 flex-col text-sm\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\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\">\"m-0 text-gray-600\"\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\">      Learn how type is set — choosing a type scale, tuning leading, and spacing letters with\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      tracking so text reads cleanly.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Collapsible.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-(--collapsible-panel-height) overflow-hidden 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\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\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\">\"m-0 pt-2 text-gray-600\"\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\">        Build a modular type scale, balance leading against line length, and match x-heights when\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        pairing typefaces.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\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\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Collapsible.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\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Collapsible.Trigger\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      v-slot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"{ open }\"\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\">\"mt-3 self-center rounded-xs text-sm font-medium text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-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\">      {{ open ? 'Show less' : 'Show more' }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Collapsible.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\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Collapsible.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\"><\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>",1789390073972]