[{"data":1,"prerenderedAt":443},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Fsidebar":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":104,"body":135,"description":436,"extension":437,"meta":438,"navigation":439,"path":103,"section":11,"seo":440,"stem":441,"__hash__":442},"pkg\u002Fpkg\u002Fsidebar.md",{"type":136,"value":137,"toc":432},"minimark",[138,142,145,150,312,316,425,428],[139,140,141],"p",{},"The glass panel on the left and the right of each app. One shell, the same type, the same rows.",[143,144],"base-sidebar-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","\u003CSidebar side=\"start\" label=\"Apps\">\n  \u003Ctemplate #header>\n    \u003CSidebarHeader>\n      \u003CSidebarTitle>Apps\u003C\u002FSidebarTitle>\n      \u003CSidebarTools>\n        \u003CSidebarSearch v-model=\"query\" \u002F>\n        \u003CSidebarIcon label=\"Add\" \u002F>\n      \u003C\u002FSidebarTools>\n    \u003C\u002FSidebarHeader>\n  \u003C\u002Ftemplate>\n  \u003CSidebarBody>\n    \u003CSidebarSection title=\"Records\">\n      \u003Cul>\n        \u003Cli>\n          \u003CSidebarItem to=\"\u002Frecords\">Records\u003C\u002FSidebarItem>\n        \u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002FSidebarSection>\n  \u003C\u002FSidebarBody>\n\u003C\u002FSidebar>\n","vue","",[158,159,160,194,200,206,212,218,224,230,236,242,248,254,260,266,272,278,284,290,296,302],"code",{"__ignoreMap":156},[161,162,165,169,172,176,179,183,186,188,191],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"sVt8B","\u003C",[161,170,104],{"class":171},"s9eBZ",[161,173,175],{"class":174},"sScJk"," side",[161,177,178],{"class":167},"=",[161,180,182],{"class":181},"sZZnC","\"start\"",[161,184,185],{"class":174}," label",[161,187,178],{"class":167},[161,189,190],{"class":181},"\"Apps\"",[161,192,193],{"class":167},">\n",[161,195,197],{"class":163,"line":196},2,[161,198,199],{"class":167},"  \u003Ctemplate #header>\n",[161,201,203],{"class":163,"line":202},3,[161,204,205],{"class":167},"    \u003CSidebarHeader>\n",[161,207,209],{"class":163,"line":208},4,[161,210,211],{"class":167},"      \u003CSidebarTitle>Apps\u003C\u002FSidebarTitle>\n",[161,213,215],{"class":163,"line":214},5,[161,216,217],{"class":167},"      \u003CSidebarTools>\n",[161,219,221],{"class":163,"line":220},6,[161,222,223],{"class":167},"        \u003CSidebarSearch v-model=\"query\" \u002F>\n",[161,225,227],{"class":163,"line":226},7,[161,228,229],{"class":167},"        \u003CSidebarIcon label=\"Add\" \u002F>\n",[161,231,233],{"class":163,"line":232},8,[161,234,235],{"class":167},"      \u003C\u002FSidebarTools>\n",[161,237,239],{"class":163,"line":238},9,[161,240,241],{"class":167},"    \u003C\u002FSidebarHeader>\n",[161,243,245],{"class":163,"line":244},10,[161,246,247],{"class":167},"  \u003C\u002Ftemplate>\n",[161,249,251],{"class":163,"line":250},11,[161,252,253],{"class":167},"  \u003CSidebarBody>\n",[161,255,257],{"class":163,"line":256},12,[161,258,259],{"class":167},"    \u003CSidebarSection title=\"Records\">\n",[161,261,263],{"class":163,"line":262},13,[161,264,265],{"class":167},"      \u003Cul>\n",[161,267,269],{"class":163,"line":268},14,[161,270,271],{"class":167},"        \u003Cli>\n",[161,273,275],{"class":163,"line":274},15,[161,276,277],{"class":167},"          \u003CSidebarItem to=\"\u002Frecords\">Records\u003C\u002FSidebarItem>\n",[161,279,281],{"class":163,"line":280},16,[161,282,283],{"class":167},"        \u003C\u002Fli>\n",[161,285,287],{"class":163,"line":286},17,[161,288,289],{"class":167},"      \u003C\u002Ful>\n",[161,291,293],{"class":163,"line":292},18,[161,294,295],{"class":167},"    \u003C\u002FSidebarSection>\n",[161,297,299],{"class":163,"line":298},19,[161,300,301],{"class":167},"  \u003C\u002FSidebarBody>\n",[161,303,305,308,310],{"class":163,"line":304},20,[161,306,307],{"class":167},"\u003C\u002F",[161,309,104],{"class":171},[161,311,193],{"class":167},[146,313,315],{"id":314},"parts","Parts",[317,318,319,346,360,366,383,393,407,419],"ul",{},[320,321,322,325,326,329,330,333,334,337,338,341,342,345],"li",{},[323,324,104],"strong",{}," — ",[158,327,328],{},"side"," is ",[158,331,332],{},"start"," (left) or ",[158,335,336],{},"end"," (right). Fixed, 18rem by default, translucent. Drag the inner edge to resize it (12rem to 36rem); the width is remembered per side. Stops pointer and wheel so a canvas does not pan through it. ",[158,339,340],{},"contained"," positions it inside a relative frame and does not remember the width. ",[158,343,344],{},"compact"," shortens a start panel under 865px.",[320,347,348,351,352,355,356,359],{},[323,349,350],{},"Header \u002F Title \u002F Tools \u002F Icon"," — the 1rem title and the icon buttons. ",[158,353,354],{},"Icon"," ",[158,357,358],{},"size=\"sm\""," is the add button on a section.",[320,361,362,365],{},[323,363,364],{},"Search"," — the filter row. Opens under the header, focuses the field, and clears on Escape.",[320,367,368,371,372,329,375,378,379,382],{},[323,369,370],{},"Body"," — the scroll region. ",[158,373,374],{},"density",[158,376,377],{},"list"," or ",[158,380,381],{},"inspector",".",[320,384,385,388,389,392],{},[323,386,387],{},"Section"," — an uppercase label. Hovering the section shows a chevron beside the name. The chevron collapses the rows, and the rows ease open or closed. A longer list takes a little longer. A plus sits on the right only when the section can add something: listen for ",[158,390,391],{},"add",", or pass the action slot. At rest the plus is only the icon. Hovering it fills it and darkens the icon. The label is “New” followed by the section name.",[320,394,395,398,399,402,403,406],{},[323,396,397],{},"Item"," — a row. Hover and current go dark on a lighter fill. ",[158,400,401],{},"to"," makes it a link. ",[158,404,405],{},"layout=\"row\""," is for a row with an icon or mark beside the name.",[320,408,409,411,412,329,415,378,417,382],{},[323,410,62],{}," — the bordered dropdown. ",[158,413,414],{},"align",[158,416,336],{},[158,418,332],{},[320,420,421,424],{},[323,422,423],{},"Anchor"," — the relative box a menu hangs from.",[139,426,427],{},"No drop-shadow. The translucent fill sits on the page.",[429,430,431],"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 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 .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);}",{"title":156,"searchDepth":196,"depth":196,"links":433},[434,435],{"id":148,"depth":196,"text":149},{"id":314,"depth":196,"text":315},"The glass panel on the left and the right of each app","md",{},true,{"title":104,"description":436},"pkg\u002Fsidebar","BY5XdNNfOIRq4uH7vU5e6hPkFhyXD1FExmUx6oMl3r8",1791043754617]