[{"data":1,"prerenderedAt":3128},["ShallowReactive",2],{"navigation":3,"page:\u002Fcomponents\u002Fapp-layout":362,"\u002Fcomponents\u002Fapp-layout-surround":3123},[4,28,56,350],{"title":5,"path":6,"stem":7,"children":8,"icon":27},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Styling","\u002Fgetting-started\u002Fstyling","1.getting-started\u002F3.styling","i-lucide-paintbrush",{"title":23,"path":24,"stem":25,"icon":26},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage","i-lucide-sliders",false,{"title":29,"path":30,"stem":31,"children":32,"icon":27},"Composables","\u002Fcomposables","2.composables\u002F1.index",[33,36,41,46,51],{"title":34,"path":30,"stem":31,"icon":35},"All Composables","i-lucide-braces",{"title":37,"path":38,"stem":39,"icon":40},"useDataTable","\u002Fcomposables\u002Fuse-data-table","2.composables\u002Fuse-data-table","i-lucide-table-2",{"title":42,"path":43,"stem":44,"icon":45},"useOverlay","\u002Fcomposables\u002Fuse-overlay","2.composables\u002Fuse-overlay","i-lucide-panels-top-left",{"title":47,"path":48,"stem":49,"icon":50},"useSidebar","\u002Fcomposables\u002Fuse-sidebar","2.composables\u002Fuse-sidebar","i-lucide-panel-left",{"title":52,"path":53,"stem":54,"icon":55},"useToast","\u002Fcomposables\u002Fuse-toast","2.composables\u002Fuse-toast","i-lucide-bell",{"title":57,"path":58,"stem":59,"children":60,"icon":63},"Components","\u002Fcomponents","3.components\u002F1.index",[61,64,69,74,81,86,91,97,102,107,112,117,122,127,133,139,145,150,155,160,165,170,175,180,184,188,193,198,203,208,213,221,226,230,235,240,245,250,255,260,265,270,275,280,285,290,294,299,305,311,315,320,324,329,334,340,345],{"title":62,"path":58,"stem":59,"icon":63},"All Components","i-lucide-component",{"title":65,"path":66,"stem":67,"icon":68},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","i-lucide-layout-panel-top",{"title":70,"path":71,"stem":72,"icon":73},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","i-lucide-triangle-alert",{"title":75,"path":76,"stem":77,"icon":45,"badge":78},"App Layout","\u002Fcomponents\u002Fapp-layout","3.components\u002Fapp-layout",{"label":79,"color":80},"NEW","success",{"title":82,"path":83,"stem":84,"icon":85},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user",{"title":87,"path":88,"stem":89,"icon":90},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-mouse-pointer-click",{"title":92,"path":93,"stem":94,"icon":95,"badge":96},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"label":79,"color":80},{"title":98,"path":99,"stem":100,"icon":101},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":103,"path":104,"stem":105,"icon":106},"Checkbox Group","\u002Fcomponents\u002Fcheckbox-group","3.components\u002Fcheckbox-group","i-lucide-list-checks",{"title":108,"path":109,"stem":110,"icon":111},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":113,"path":114,"stem":115,"icon":116},"Combobox","\u002Fcomponents\u002Fcombobox","3.components\u002Fcombobox","i-lucide-search",{"title":118,"path":119,"stem":120,"icon":121},"Context Menu","\u002Fcomponents\u002Fcontext-menu","3.components\u002Fcontext-menu","i-lucide-mouse-pointer-2",{"title":123,"path":124,"stem":125,"icon":40,"badge":126},"Data Table","\u002Fcomponents\u002Fdata-table","3.components\u002Fdata-table",{"label":79,"color":80},{"title":128,"path":129,"stem":130,"icon":131,"badge":132},"Date Field","\u002Fcomponents\u002Fdate-field","3.components\u002Fdate-field","i-lucide-calendar-clock",{"label":79,"color":80},{"title":134,"path":135,"stem":136,"icon":137,"badge":138},"Date Range Field","\u002Fcomponents\u002Fdate-range-field","3.components\u002Fdate-range-field","i-lucide-calendar-range",{"label":79,"color":80},{"title":140,"path":141,"stem":142,"icon":143,"badge":144},"Date Range Picker","\u002Fcomponents\u002Fdate-range-picker","3.components\u002Fdate-range-picker","i-lucide-calendar-search",{"label":79,"color":80},{"title":146,"path":147,"stem":148,"icon":149},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-square",{"title":151,"path":152,"stem":153,"icon":154},"Drawer","\u002Fcomponents\u002Fdrawer","3.components\u002Fdrawer","i-lucide-panel-right",{"title":156,"path":157,"stem":158,"icon":159},"Editable","\u002Fcomponents\u002Feditable","3.components\u002Feditable","i-lucide-square-pen",{"title":161,"path":162,"stem":163,"icon":164},"Field","\u002Fcomponents\u002Ffield","3.components\u002Ffield","i-lucide-text-cursor-input",{"title":166,"path":167,"stem":168,"icon":169},"Fieldset","\u002Fcomponents\u002Ffieldset","3.components\u002Ffieldset","i-lucide-group",{"title":171,"path":172,"stem":173,"icon":174},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-check",{"title":176,"path":177,"stem":178,"icon":179},"Hover Preview Card","\u002Fcomponents\u002Fhover-preview-card","3.components\u002Fhover-preview-card","i-lucide-id-card",{"title":181,"path":182,"stem":183,"icon":164},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput",{"title":185,"path":186,"stem":187,"icon":106},"Listbox","\u002Fcomponents\u002Flistbox","3.components\u002Flistbox",{"title":189,"path":190,"stem":191,"icon":192},"Menu","\u002Fcomponents\u002Fmenu","3.components\u002Fmenu","i-lucide-list",{"title":194,"path":195,"stem":196,"icon":197},"Menubar","\u002Fcomponents\u002Fmenubar","3.components\u002Fmenubar","i-lucide-panel-top",{"title":199,"path":200,"stem":201,"icon":202},"Meter","\u002Fcomponents\u002Fmeter","3.components\u002Fmeter","i-lucide-gauge",{"title":204,"path":205,"stem":206,"icon":137,"badge":207},"Month Picker","\u002Fcomponents\u002Fmonth-picker","3.components\u002Fmonth-picker",{"label":79,"color":80},{"title":209,"path":210,"stem":211,"icon":137,"badge":212},"Month Range Picker","\u002Fcomponents\u002Fmonth-range-picker","3.components\u002Fmonth-range-picker",{"label":79,"color":80},{"title":214,"path":215,"stem":216,"icon":217,"badge":218},"Navigation Menu","\u002Fcomponents\u002Fnavigation-menu","3.components\u002Fnavigation-menu","i-lucide-navigation",{"label":219,"color":220},"UPDATED","warning",{"title":222,"path":223,"stem":224,"icon":225},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-badge-plus",{"title":227,"path":228,"stem":229,"icon":45},"Overlay Provider","\u002Fcomponents\u002Foverlay","3.components\u002Foverlay",{"title":231,"path":232,"stem":233,"icon":234},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":236,"path":237,"stem":238,"icon":239},"Pin \u002F OTP Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-binary",{"title":241,"path":242,"stem":243,"icon":244},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square",{"title":246,"path":247,"stem":248,"icon":249},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-loader",{"title":251,"path":252,"stem":253,"icon":254},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":256,"path":257,"stem":258,"icon":259},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":261,"path":262,"stem":263,"icon":264},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-filter",{"title":266,"path":267,"stem":268,"icon":269},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-minus",{"title":271,"path":272,"stem":273,"icon":50,"badge":274},"Sidebar","\u002Fcomponents\u002Fsidebar","3.components\u002Fsidebar",{"label":79,"color":80},{"title":276,"path":277,"stem":278,"icon":279},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":281,"path":282,"stem":283,"icon":284},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":286,"path":287,"stem":288,"icon":289},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-left",{"title":291,"path":292,"stem":293,"icon":68},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":295,"path":296,"stem":297,"icon":298},"Tags Input","\u002Fcomponents\u002Ftags-input","3.components\u002Ftags-input","i-lucide-tags",{"title":300,"path":301,"stem":302,"icon":303,"badge":304},"Time Field","\u002Fcomponents\u002Ftime-field","3.components\u002Ftime-field","i-lucide-clock-3",{"label":79,"color":80},{"title":306,"path":307,"stem":308,"icon":309,"badge":310},"Time Range Field","\u002Fcomponents\u002Ftime-range-field","3.components\u002Ftime-range-field","i-lucide-clock-arrow-up",{"label":79,"color":80},{"title":312,"path":313,"stem":314,"icon":244},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":316,"path":317,"stem":318,"icon":319},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle","i-lucide-toggle-right",{"title":321,"path":322,"stem":323,"icon":106},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":325,"path":326,"stem":327,"icon":328},"Toolbar","\u002Fcomponents\u002Ftoolbar","3.components\u002Ftoolbar","i-lucide-wrench",{"title":330,"path":331,"stem":332,"icon":333},"Tooltip","\u002Fcomponents\u002Ftooltip","3.components\u002Ftooltip","i-lucide-info",{"title":335,"path":336,"stem":337,"icon":338,"badge":339},"Tree","\u002Fcomponents\u002Ftree","3.components\u002Ftree","i-lucide-folder-tree",{"label":79,"color":80},{"title":341,"path":342,"stem":343,"icon":95,"badge":344},"Year Picker","\u002Fcomponents\u002Fyear-picker","3.components\u002Fyear-picker",{"label":79,"color":80},{"title":346,"path":347,"stem":348,"icon":137,"badge":349},"Year Range Picker","\u002Fcomponents\u002Fyear-range-picker","3.components\u002Fyear-range-picker",{"label":79,"color":80},{"title":351,"path":352,"stem":353,"children":354,"icon":27},"Builders","\u002Fbuilders","4.builders\u002F1.index",[355,357],{"title":356,"path":352,"stem":353,"icon":45},"All Builders",{"title":358,"path":359,"stem":360,"icon":361},"Layout Builder","\u002Fbuilders\u002Flayout-builder","4.builders\u002Flayout-builder","i-lucide-layout-dashboard",{"id":363,"title":75,"body":364,"description":3115,"extension":3116,"links":3117,"meta":3118,"navigation":3119,"path":76,"seo":3121,"stem":77,"__hash__":3122},"docs\u002F3.components\u002Fapp-layout.md",{"type":365,"value":366,"toc":3092},"minimark",[367,378,383,431,438,441,444,450,461,1118,1122,1125,1244,1247,1250,1259,1263,1268,1279,1285,1376,1380,1390,1395,1476,1484,1488,1506,1509,1514,1573,1577,1595,1600,1663,1667,1670,1673,1678,2095,2100,2104,2127,2165,2174,2178,2182,2496,2500,2589,2593,2607,2611,2654,2657,2661,2738,2748,2752,2911,2917,2921,3082,3088],[368,369,370,374,375,377],"p",{},[371,372,373],"code",{},"AppLayout"," arranges a header, main content, sidebars, and footer. Add only the slots you need. Use ",[371,376,271],{}," in either side slot for collapse, resizing, and mobile dialogs.",[379,380,382],"h2",{"id":381},"anatomy","Anatomy",[384,385,386,396,407,415,423],"ul",{},[387,388,389,395],"li",{},[390,391,392],"strong",{},[371,393,394],{},"#header",": Optional header above the workspace or just the content column.",[387,397,398,403,404,406],{},[390,399,400],{},[371,401,402],{},"#left",": Optional left region. A ",[371,405,271],{}," supplies its own width and responsive behavior.",[387,408,409,414],{},[390,410,411],{},[371,412,413],{},"#default",": Main content. This region scrolls independently by default.",[387,416,417,422],{},[390,418,419],{},[371,420,421],{},"#right",": Optional right region, with independent sidebar state.",[387,424,425,430],{},[390,426,427],{},[371,428,429],{},"#footer",": Optional footer below the workspace or just the content column.",[368,432,433,434,437],{},"Every slot receives ",[371,435,436],{},"{ mainId, layout, scroll }",". No layout sub-components are required. The generated main element and keyboard skip link share a unique ID.",[379,439,23],{"id":440},"usage",[368,442,443],{},"In the default mode, main content scrolls while the header, sidebars, and footer stay in place. Try the Navigation button to collapse the sidebar. On a narrow browser window, it opens a mobile dialog instead.",[445,446,447],"component-preview",{},[448,449],"examples-app-layout-demo",{},[368,451,452,453,456,457,460],{},"The preview is styled for this documentation. Code examples show the component structure and behavior without the demo's visual classes. See ",[454,455,18],"a",{"href":19}," for ",[371,458,459],{},"ui"," and CSS hooks.",[462,463,464],"component-code",{},[465,466,471],"pre",{"className":467,"code":468,"language":469,"meta":470,"style":470},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { SidebarController } from \"akaza-ui\";\nimport { AppLayout, Sidebar, useSidebar } from \"akaza-ui\";\nimport { useTemplateRef } from \"vue\";\n\nconst sidebar = useSidebar(useTemplateRef\u003CSidebarController>(\"navigation\"));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAppLayout>\n    \u003Ctemplate #header>\n      \u003Cbutton type=\"button\" @click=\"sidebar.toggle\">Navigation\u003C\u002Fbutton>\n      \u003Cspan>Workspace\u003C\u002Fspan>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #left>\n      \u003CSidebar\n        ref=\"navigation\"\n        collapsible=\"icon\"\n        aria-label=\"Workspace navigation\"\n      >\n        \u003Ctemplate #default=\"{ collapsed, isMobile, closeMobile }\">\n          \u003Cbutton v-if=\"isMobile\" type=\"button\" @click=\"closeMobile\">Close navigation\u003C\u002Fbutton>\n          \u003Cnav aria-label=\"Workspace\">\n            \u003Ca href=\"\u002Fprojects\">{{ collapsed ? 'P' : 'Projects' }}\u003C\u002Fa>\n          \u003C\u002Fnav>\n        \u003C\u002Ftemplate>\n      \u003C\u002FSidebar>\n    \u003C\u002Ftemplate>\n\n    \u003Ch1>Projects\u003C\u002Fh1>\n    \u003Cp>Application content goes here.\u003C\u002Fp>\n\n    \u003Ctemplate #footer>Ready\u003C\u002Ftemplate>\n  \u003C\u002FAppLayout>\n\u003C\u002Ftemplate>\n","vue","",[371,472,473,508,542,575,597,604,647,657,662,672,682,698,740,758,768,773,787,795,810,825,840,846,886,938,959,990,1000,1010,1020,1029,1034,1053,1071,1076,1099,1109],{"__ignoreMap":470},[474,475,478,482,486,490,493,496,499,503,505],"span",{"class":476,"line":477},"line",1,[474,479,481],{"class":480},"sMK4o","\u003C",[474,483,485],{"class":484},"swJcz","script",[474,487,489],{"class":488},"spNyl"," setup",[474,491,492],{"class":488}," lang",[474,494,495],{"class":480},"=",[474,497,498],{"class":480},"\"",[474,500,502],{"class":501},"sfazB","ts",[474,504,498],{"class":480},[474,506,507],{"class":480},">\n",[474,509,511,515,518,521,525,528,531,534,537,539],{"class":476,"line":510},2,[474,512,514],{"class":513},"s7zQu","import",[474,516,517],{"class":513}," type",[474,519,520],{"class":480}," {",[474,522,524],{"class":523},"sTEyZ"," SidebarController",[474,526,527],{"class":480}," }",[474,529,530],{"class":513}," from",[474,532,533],{"class":480}," \"",[474,535,536],{"class":501},"akaza-ui",[474,538,498],{"class":480},[474,540,541],{"class":480},";\n",[474,543,545,547,549,552,555,558,560,563,565,567,569,571,573],{"class":476,"line":544},3,[474,546,514],{"class":513},[474,548,520],{"class":480},[474,550,551],{"class":523}," AppLayout",[474,553,554],{"class":480},",",[474,556,557],{"class":523}," Sidebar",[474,559,554],{"class":480},[474,561,562],{"class":523}," useSidebar",[474,564,527],{"class":480},[474,566,530],{"class":513},[474,568,533],{"class":480},[474,570,536],{"class":501},[474,572,498],{"class":480},[474,574,541],{"class":480},[474,576,578,580,582,585,587,589,591,593,595],{"class":476,"line":577},4,[474,579,514],{"class":513},[474,581,520],{"class":480},[474,583,584],{"class":523}," useTemplateRef",[474,586,527],{"class":480},[474,588,530],{"class":513},[474,590,533],{"class":480},[474,592,469],{"class":501},[474,594,498],{"class":480},[474,596,541],{"class":480},[474,598,600],{"class":476,"line":599},5,[474,601,603],{"emptyLinePlaceholder":602},true,"\n",[474,605,607,610,613,615,618,621,624,626,630,633,635,637,640,642,645],{"class":476,"line":606},6,[474,608,609],{"class":488},"const",[474,611,612],{"class":523}," sidebar ",[474,614,495],{"class":480},[474,616,562],{"class":617},"s2Zo4",[474,619,620],{"class":523},"(",[474,622,623],{"class":617},"useTemplateRef",[474,625,481],{"class":480},[474,627,629],{"class":628},"sBMFI","SidebarController",[474,631,632],{"class":480},">",[474,634,620],{"class":523},[474,636,498],{"class":480},[474,638,639],{"class":501},"navigation",[474,641,498],{"class":480},[474,643,644],{"class":523},"))",[474,646,541],{"class":480},[474,648,650,653,655],{"class":476,"line":649},7,[474,651,652],{"class":480},"\u003C\u002F",[474,654,485],{"class":484},[474,656,507],{"class":480},[474,658,660],{"class":476,"line":659},8,[474,661,603],{"emptyLinePlaceholder":602},[474,663,665,667,670],{"class":476,"line":664},9,[474,666,481],{"class":480},[474,668,669],{"class":484},"template",[474,671,507],{"class":480},[474,673,675,678,680],{"class":476,"line":674},10,[474,676,677],{"class":480},"  \u003C",[474,679,373],{"class":484},[474,681,507],{"class":480},[474,683,685,688,690,693,696],{"class":476,"line":684},11,[474,686,687],{"class":480},"    \u003C",[474,689,669],{"class":484},[474,691,692],{"class":480}," #",[474,694,695],{"class":488},"header",[474,697,507],{"class":480},[474,699,701,704,707,709,711,713,715,717,720,722,724,727,729,731,734,736,738],{"class":476,"line":700},12,[474,702,703],{"class":480},"      \u003C",[474,705,706],{"class":484},"button",[474,708,517],{"class":488},[474,710,495],{"class":480},[474,712,498],{"class":480},[474,714,706],{"class":501},[474,716,498],{"class":480},[474,718,719],{"class":488}," @click",[474,721,495],{"class":480},[474,723,498],{"class":480},[474,725,726],{"class":501},"sidebar.toggle",[474,728,498],{"class":480},[474,730,632],{"class":480},[474,732,733],{"class":523},"Navigation",[474,735,652],{"class":480},[474,737,706],{"class":484},[474,739,507],{"class":480},[474,741,743,745,747,749,752,754,756],{"class":476,"line":742},13,[474,744,703],{"class":480},[474,746,474],{"class":484},[474,748,632],{"class":480},[474,750,751],{"class":523},"Workspace",[474,753,652],{"class":480},[474,755,474],{"class":484},[474,757,507],{"class":480},[474,759,761,764,766],{"class":476,"line":760},14,[474,762,763],{"class":480},"    \u003C\u002F",[474,765,669],{"class":484},[474,767,507],{"class":480},[474,769,771],{"class":476,"line":770},15,[474,772,603],{"emptyLinePlaceholder":602},[474,774,776,778,780,782,785],{"class":476,"line":775},16,[474,777,687],{"class":480},[474,779,669],{"class":484},[474,781,692],{"class":480},[474,783,784],{"class":488},"left",[474,786,507],{"class":480},[474,788,790,792],{"class":476,"line":789},17,[474,791,703],{"class":480},[474,793,794],{"class":484},"Sidebar\n",[474,796,798,801,803,805,807],{"class":476,"line":797},18,[474,799,800],{"class":488},"        ref",[474,802,495],{"class":480},[474,804,498],{"class":480},[474,806,639],{"class":501},[474,808,809],{"class":480},"\"\n",[474,811,813,816,818,820,823],{"class":476,"line":812},19,[474,814,815],{"class":488},"        collapsible",[474,817,495],{"class":480},[474,819,498],{"class":480},[474,821,822],{"class":501},"icon",[474,824,809],{"class":480},[474,826,828,831,833,835,838],{"class":476,"line":827},20,[474,829,830],{"class":488},"        aria-label",[474,832,495],{"class":480},[474,834,498],{"class":480},[474,836,837],{"class":501},"Workspace navigation",[474,839,809],{"class":480},[474,841,843],{"class":476,"line":842},21,[474,844,845],{"class":480},"      >\n",[474,847,849,852,854,856,859,861,863,866,869,871,874,876,879,882,884],{"class":476,"line":848},22,[474,850,851],{"class":480},"        \u003C",[474,853,669],{"class":484},[474,855,692],{"class":480},[474,857,858],{"class":488},"default",[474,860,495],{"class":480},[474,862,498],{"class":480},[474,864,865],{"class":480},"{",[474,867,868],{"class":523}," collapsed",[474,870,554],{"class":480},[474,872,873],{"class":523}," isMobile",[474,875,554],{"class":480},[474,877,878],{"class":523}," closeMobile ",[474,880,881],{"class":480},"}",[474,883,498],{"class":480},[474,885,507],{"class":480},[474,887,889,892,894,897,899,901,904,906,908,910,912,914,916,918,920,922,925,927,929,932,934,936],{"class":476,"line":888},23,[474,890,891],{"class":480},"          \u003C",[474,893,706],{"class":484},[474,895,896],{"class":488}," v-if",[474,898,495],{"class":480},[474,900,498],{"class":480},[474,902,903],{"class":501},"isMobile",[474,905,498],{"class":480},[474,907,517],{"class":488},[474,909,495],{"class":480},[474,911,498],{"class":480},[474,913,706],{"class":501},[474,915,498],{"class":480},[474,917,719],{"class":488},[474,919,495],{"class":480},[474,921,498],{"class":480},[474,923,924],{"class":501},"closeMobile",[474,926,498],{"class":480},[474,928,632],{"class":480},[474,930,931],{"class":523},"Close navigation",[474,933,652],{"class":480},[474,935,706],{"class":484},[474,937,507],{"class":480},[474,939,941,943,946,949,951,953,955,957],{"class":476,"line":940},24,[474,942,891],{"class":480},[474,944,945],{"class":484},"nav",[474,947,948],{"class":488}," aria-label",[474,950,495],{"class":480},[474,952,498],{"class":480},[474,954,751],{"class":501},[474,956,498],{"class":480},[474,958,507],{"class":480},[474,960,962,965,967,970,972,974,977,979,981,984,986,988],{"class":476,"line":961},25,[474,963,964],{"class":480},"            \u003C",[474,966,454],{"class":484},[474,968,969],{"class":488}," href",[474,971,495],{"class":480},[474,973,498],{"class":480},[474,975,976],{"class":501},"\u002Fprojects",[474,978,498],{"class":480},[474,980,632],{"class":480},[474,982,983],{"class":523},"{{ collapsed ? 'P' : 'Projects' }}",[474,985,652],{"class":480},[474,987,454],{"class":484},[474,989,507],{"class":480},[474,991,993,996,998],{"class":476,"line":992},26,[474,994,995],{"class":480},"          \u003C\u002F",[474,997,945],{"class":484},[474,999,507],{"class":480},[474,1001,1003,1006,1008],{"class":476,"line":1002},27,[474,1004,1005],{"class":480},"        \u003C\u002F",[474,1007,669],{"class":484},[474,1009,507],{"class":480},[474,1011,1013,1016,1018],{"class":476,"line":1012},28,[474,1014,1015],{"class":480},"      \u003C\u002F",[474,1017,271],{"class":484},[474,1019,507],{"class":480},[474,1021,1023,1025,1027],{"class":476,"line":1022},29,[474,1024,763],{"class":480},[474,1026,669],{"class":484},[474,1028,507],{"class":480},[474,1030,1032],{"class":476,"line":1031},30,[474,1033,603],{"emptyLinePlaceholder":602},[474,1035,1037,1039,1042,1044,1047,1049,1051],{"class":476,"line":1036},31,[474,1038,687],{"class":480},[474,1040,1041],{"class":484},"h1",[474,1043,632],{"class":480},[474,1045,1046],{"class":523},"Projects",[474,1048,652],{"class":480},[474,1050,1041],{"class":484},[474,1052,507],{"class":480},[474,1054,1056,1058,1060,1062,1065,1067,1069],{"class":476,"line":1055},32,[474,1057,687],{"class":480},[474,1059,368],{"class":484},[474,1061,632],{"class":480},[474,1063,1064],{"class":523},"Application content goes here.",[474,1066,652],{"class":480},[474,1068,368],{"class":484},[474,1070,507],{"class":480},[474,1072,1074],{"class":476,"line":1073},33,[474,1075,603],{"emptyLinePlaceholder":602},[474,1077,1079,1081,1083,1085,1088,1090,1093,1095,1097],{"class":476,"line":1078},34,[474,1080,687],{"class":480},[474,1082,669],{"class":484},[474,1084,692],{"class":480},[474,1086,1087],{"class":488},"footer",[474,1089,632],{"class":480},[474,1091,1092],{"class":523},"Ready",[474,1094,652],{"class":480},[474,1096,669],{"class":484},[474,1098,507],{"class":480},[474,1100,1102,1105,1107],{"class":476,"line":1101},35,[474,1103,1104],{"class":480},"  \u003C\u002F",[474,1106,373],{"class":484},[474,1108,507],{"class":480},[474,1110,1112,1114,1116],{"class":476,"line":1111},36,[474,1113,652],{"class":480},[474,1115,669],{"class":484},[474,1117,507],{"class":480},[379,1119,1121],{"id":1120},"how-regions-fit-together","How regions fit together",[368,1123,1124],{},"The default arrangement is a full-width header, a middle row containing left \u002F main \u002F right, and a full-width footer. Empty slots do not leave empty columns or bars.",[1126,1127,1128,1141],"table",{},[1129,1130,1131],"thead",{},[1132,1133,1134,1138],"tr",{},[1135,1136,1137],"th",{},"Setting",[1135,1139,1140],{},"What changes",[1142,1143,1144,1159,1172,1185,1198,1211,1224,1234],"tbody",{},[1132,1145,1146,1156],{},[1147,1148,1149,1152,1153],"td",{},[371,1150,1151],{},"header: 'full'"," \u002F ",[371,1154,1155],{},"footer: 'full'",[1147,1157,1158],{},"The bar spans the layout, including the sidebars.",[1132,1160,1161,1169],{},[1147,1162,1163,1152,1166],{},[371,1164,1165],{},"header: 'content'",[371,1167,1168],{},"footer: 'content'",[1147,1170,1171],{},"The bar spans only main. Sidebars extend alongside it.",[1132,1173,1174,1182],{},[1147,1175,1176,1152,1179],{},[371,1177,1178],{},"header: 'left'",[371,1180,1181],{},"footer: 'left'",[1147,1183,1184],{},"The bar spans left and main. The right sidebar extends alongside it.",[1132,1186,1187,1195],{},[1147,1188,1189,1152,1192],{},[371,1190,1191],{},"header: 'right'",[371,1193,1194],{},"footer: 'right'",[1147,1196,1197],{},"The bar spans main and right. The left sidebar extends alongside it.",[1132,1199,1200,1208],{},[1147,1201,1202,1152,1205],{},[371,1203,1204],{},"left: 'inline'",[371,1206,1207],{},"right: 'inline'",[1147,1209,1210],{},"The sidebar takes space beside main.",[1132,1212,1213,1221],{},[1147,1214,1215,1152,1218],{},[371,1216,1217],{},"left: 'overlay'",[371,1219,1220],{},"right: 'overlay'",[1147,1222,1223],{},"The sidebar covers main without narrowing it.",[1132,1225,1226,1231],{},[1147,1227,1228],{},[371,1229,1230],{},"scroll=\"content\"",[1147,1232,1233],{},"Main scrolls independently inside the shell.",[1132,1235,1236,1241],{},[1147,1237,1238],{},[371,1239,1240],{},"scroll=\"page\"",[1147,1242,1243],{},"The layout follows document flow. Bars can be sticky.",[368,1245,1246],{},"Widths come from the contents of each side slot. Header and footer heights are measured automatically. Each Sidebar has its own controller; collapsing one does not collapse the other.",[379,1248,358],{"id":1249},"layout-builder",[368,1251,1252,1253,1255,1256,1258],{},"Open the ",[454,1254,358],{"href":359}," to choose regions, arrange both sidebars, test mobile dialogs, and generate Vue code without the preview's styling. For external sidebar controls, see ",[454,1257,47],{"href":48},".",[379,1260,1262],{"id":1261},"examples","Examples",[1264,1265,1267],"h3",{"id":1266},"header-and-footer-between-sidebars","Header and footer between sidebars",[368,1269,1270,1271,1274,1275,1278],{},"Use ",[371,1272,1273],{},"content"," when sidebars should extend alongside the bars. ",[371,1276,1277],{},"full"," spans all three columns. Left and right widths follow the elements placed in those slots, including Sidebar resize and collapse transitions.",[445,1280,1281],{},[1282,1283],"examples-app-layout-example",{"variant":1284},"between",[462,1286,1287],{},[465,1288,1290],{"className":467,"code":1289,"language":469,"meta":470,"style":470},"\u003CAppLayout :layout=\"{ header: 'content', footer: 'content' }\">\n  \u003Ctemplate #header>Workspace toolbar\u003C\u002Ftemplate>\n  \u003Ctemplate #left>\u003CSidebar aria-label=\"Navigation\">Navigation\u003C\u002FSidebar>\u003C\u002Ftemplate>\n  \u003Ch1>Workspace\u003C\u002Fh1>\n  \u003Ctemplate #right>\u003CSidebar side=\"right\" aria-label=\"Inspector\">Inspector\u003C\u002FSidebar>\u003C\u002Ftemplate>\n  \u003Ctemplate #footer>Workspace status\u003C\u002Ftemplate>\n\u003C\u002FAppLayout>\n",[371,1291,1292,1343,1348,1353,1358,1363,1368],{"__ignoreMap":470},[474,1293,1294,1296,1298,1301,1304,1306,1308,1310,1313,1316,1319,1321,1324,1326,1329,1331,1333,1335,1337,1339,1341],{"class":476,"line":477},[474,1295,481],{"class":480},[474,1297,373],{"class":484},[474,1299,1300],{"class":480}," :",[474,1302,1303],{"class":488},"layout",[474,1305,495],{"class":480},[474,1307,498],{"class":480},[474,1309,865],{"class":480},[474,1311,1312],{"class":484}," header",[474,1314,1315],{"class":480},":",[474,1317,1318],{"class":480}," '",[474,1320,1273],{"class":501},[474,1322,1323],{"class":480},"'",[474,1325,554],{"class":480},[474,1327,1328],{"class":484}," footer",[474,1330,1315],{"class":480},[474,1332,1318],{"class":480},[474,1334,1273],{"class":501},[474,1336,1323],{"class":480},[474,1338,527],{"class":480},[474,1340,498],{"class":480},[474,1342,507],{"class":480},[474,1344,1345],{"class":476,"line":510},[474,1346,1347],{"class":523},"  \u003Ctemplate #header>Workspace toolbar\u003C\u002Ftemplate>\n",[474,1349,1350],{"class":476,"line":544},[474,1351,1352],{"class":523},"  \u003Ctemplate #left>\u003CSidebar aria-label=\"Navigation\">Navigation\u003C\u002FSidebar>\u003C\u002Ftemplate>\n",[474,1354,1355],{"class":476,"line":577},[474,1356,1357],{"class":523},"  \u003Ch1>Workspace\u003C\u002Fh1>\n",[474,1359,1360],{"class":476,"line":599},[474,1361,1362],{"class":523},"  \u003Ctemplate #right>\u003CSidebar side=\"right\" aria-label=\"Inspector\">Inspector\u003C\u002FSidebar>\u003C\u002Ftemplate>\n",[474,1364,1365],{"class":476,"line":606},[474,1366,1367],{"class":523},"  \u003Ctemplate #footer>Workspace status\u003C\u002Ftemplate>\n",[474,1369,1370,1372,1374],{"class":476,"line":649},[474,1371,652],{"class":480},[474,1373,373],{"class":484},[474,1375,507],{"class":480},[1264,1377,1379],{"id":1378},"independent-header-and-footer-corners","Independent header and footer corners",[368,1381,1382,1383,1385,1386,1389],{},"Choose ",[371,1384,784],{}," or ",[371,1387,1388],{},"right"," to span main plus only that side. Header and footer are independent, so either sidebar can extend alongside one bar, both bars, or neither. These values refer to the named left and right slots.",[445,1391,1392],{},[1282,1393],{"variant":1394},"asymmetric",[462,1396,1397],{},[465,1398,1400],{"className":467,"code":1399,"language":469,"meta":470,"style":470},"\u003CAppLayout :layout=\"{ header: 'left', footer: 'right' }\">\n  \u003Ctemplate #header>Header above navigation and main\u003C\u002Ftemplate>\n  \u003Ctemplate #left>\u003CSidebar aria-label=\"Navigation\">Navigation\u003C\u002FSidebar>\u003C\u002Ftemplate>\n  \u003Ch1>Workspace\u003C\u002Fh1>\n  \u003Ctemplate #right>\u003CSidebar side=\"right\" aria-label=\"Inspector\">Inspector\u003C\u002FSidebar>\u003C\u002Ftemplate>\n  \u003Ctemplate #footer>Footer below main and inspector\u003C\u002Ftemplate>\n\u003C\u002FAppLayout>\n",[371,1401,1402,1446,1451,1455,1459,1463,1468],{"__ignoreMap":470},[474,1403,1404,1406,1408,1410,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432,1434,1436,1438,1440,1442,1444],{"class":476,"line":477},[474,1405,481],{"class":480},[474,1407,373],{"class":484},[474,1409,1300],{"class":480},[474,1411,1303],{"class":488},[474,1413,495],{"class":480},[474,1415,498],{"class":480},[474,1417,865],{"class":480},[474,1419,1312],{"class":484},[474,1421,1315],{"class":480},[474,1423,1318],{"class":480},[474,1425,784],{"class":501},[474,1427,1323],{"class":480},[474,1429,554],{"class":480},[474,1431,1328],{"class":484},[474,1433,1315],{"class":480},[474,1435,1318],{"class":480},[474,1437,1388],{"class":501},[474,1439,1323],{"class":480},[474,1441,527],{"class":480},[474,1443,498],{"class":480},[474,1445,507],{"class":480},[474,1447,1448],{"class":476,"line":510},[474,1449,1450],{"class":523},"  \u003Ctemplate #header>Header above navigation and main\u003C\u002Ftemplate>\n",[474,1452,1453],{"class":476,"line":544},[474,1454,1352],{"class":523},[474,1456,1457],{"class":476,"line":577},[474,1458,1357],{"class":523},[474,1460,1461],{"class":476,"line":599},[474,1462,1362],{"class":523},[474,1464,1465],{"class":476,"line":606},[474,1466,1467],{"class":523},"  \u003Ctemplate #footer>Footer below main and inspector\u003C\u002Ftemplate>\n",[474,1469,1470,1472,1474],{"class":476,"line":649},[474,1471,652],{"class":480},[474,1473,373],{"class":484},[474,1475,507],{"class":480},[368,1477,1478,1479,1481,1482,1258],{},"For a right sidebar beside header, main, and footer, set both bars to ",[371,1480,784],{},". For a left sidebar beside all three, set both to ",[371,1483,1388],{},[1264,1485,1487],{"id":1486},"page-scrolling-with-sticky-regions","Page scrolling with sticky regions",[368,1489,1490,1491,1493,1494,1497,1498,1501,1502,1505],{},"Set ",[371,1492,1240],{}," for document scrolling. Enable stickiness independently for header, footer, and side regions. ",[371,1495,1496],{},"stickyLeft"," and ",[371,1499,1500],{},"stickyRight"," override ",[371,1503,1504],{},"stickySides"," for each inline side. Sticky side offsets track only the bars that cover that side, including changes to their heights. As with native CSS sticky positioning, the nearest scrolling ancestor determines where regions stick. Footer remains at its natural place at the end of the page until it reaches its sticky boundary.",[368,1507,1508],{},"The contained preview scrolls as a whole; its header stays visible. In a full-screen application, the document scrolls instead.",[445,1510,1511],{},[1282,1512],{"variant":1513},"page",[462,1515,1516],{},[465,1517,1519],{"className":467,"code":1518,"language":469,"meta":470,"style":470},"\u003CAppLayout scroll=\"page\" sticky-header sticky-sides>\n  \u003Ctemplate #header>Page toolbar\u003C\u002Ftemplate>\n  \u003Ctemplate #left>\u003CSidebar aria-label=\"Navigation\">Navigation\u003C\u002FSidebar>\u003C\u002Ftemplate>\n  \u003Carticle>Long page content\u003C\u002Farticle>\n  \u003Ctemplate #footer>Page footer\u003C\u002Ftemplate>\n\u003C\u002FAppLayout>\n",[371,1520,1521,1546,1551,1555,1560,1565],{"__ignoreMap":470},[474,1522,1523,1525,1527,1530,1532,1534,1536,1538,1541,1544],{"class":476,"line":477},[474,1524,481],{"class":480},[474,1526,373],{"class":484},[474,1528,1529],{"class":488}," scroll",[474,1531,495],{"class":480},[474,1533,498],{"class":480},[474,1535,1513],{"class":501},[474,1537,498],{"class":480},[474,1539,1540],{"class":488}," sticky-header",[474,1542,1543],{"class":488}," sticky-sides",[474,1545,507],{"class":480},[474,1547,1548],{"class":476,"line":510},[474,1549,1550],{"class":523},"  \u003Ctemplate #header>Page toolbar\u003C\u002Ftemplate>\n",[474,1552,1553],{"class":476,"line":544},[474,1554,1352],{"class":523},[474,1556,1557],{"class":476,"line":577},[474,1558,1559],{"class":523},"  \u003Carticle>Long page content\u003C\u002Farticle>\n",[474,1561,1562],{"class":476,"line":599},[474,1563,1564],{"class":523},"  \u003Ctemplate #footer>Page footer\u003C\u002Ftemplate>\n",[474,1566,1567,1569,1571],{"class":476,"line":606},[474,1568,652],{"class":480},[474,1570,373],{"class":484},[474,1572,507],{"class":480},[1264,1574,1576],{"id":1575},"contained-workspace","Contained workspace",[368,1578,1579,1580,1583,1584,1152,1587,1590,1591,1594],{},"Disable ",[371,1581,1582],{},"viewport"," when embedding a shell inside another page. Content-scrolling mode then uses the parent's height. Supply a definite height on that parent, or override the root height through ",[371,1585,1586],{},"class",[371,1588,1589],{},"ui.root",". Nested previews should use ",[371,1592,1593],{},"main-as=\"div\""," to avoid a second main landmark.",[445,1596,1597],{},[1282,1598],{"variant":1599},"contained",[462,1601,1602],{},[465,1603,1605],{"className":467,"code":1604,"language":469,"meta":470,"style":470},"\u003Cdiv style=\"height: 24rem\">\n  \u003CAppLayout :viewport=\"false\" main-as=\"div\" main-label=\"Workspace preview\">\n    \u003Ctemplate #header>Preview toolbar\u003C\u002Ftemplate>\n    \u003Cp>Scrollable preview content\u003C\u002Fp>\n  \u003C\u002FAppLayout>\n\u003C\u002Fdiv>\n",[371,1606,1607,1635,1640,1645,1650,1655],{"__ignoreMap":470},[474,1608,1609,1611,1614,1617,1619,1621,1625,1627,1631,1633],{"class":476,"line":477},[474,1610,481],{"class":480},[474,1612,1613],{"class":484},"div",[474,1615,1616],{"class":488}," style",[474,1618,495],{"class":480},[474,1620,498],{"class":480},[474,1622,1624],{"class":1623},"sqsOY","height",[474,1626,1315],{"class":480},[474,1628,1630],{"class":1629},"sbssI"," 24rem",[474,1632,498],{"class":480},[474,1634,507],{"class":480},[474,1636,1637],{"class":476,"line":510},[474,1638,1639],{"class":523},"  \u003CAppLayout :viewport=\"false\" main-as=\"div\" main-label=\"Workspace preview\">\n",[474,1641,1642],{"class":476,"line":544},[474,1643,1644],{"class":523},"    \u003Ctemplate #header>Preview toolbar\u003C\u002Ftemplate>\n",[474,1646,1647],{"class":476,"line":577},[474,1648,1649],{"class":523},"    \u003Cp>Scrollable preview content\u003C\u002Fp>\n",[474,1651,1652],{"class":476,"line":599},[474,1653,1654],{"class":523},"  \u003C\u002FAppLayout>\n",[474,1656,1657,1659,1661],{"class":476,"line":606},[474,1658,652],{"class":480},[474,1660,1613],{"class":484},[474,1662,507],{"class":480},[1264,1664,1666],{"id":1665},"overlay-sides","Overlay sides",[368,1668,1669],{},"An overlay side does not reserve a grid column. It sits over main content, beneath full-width bars. Use Sidebar's off-canvas collapse and external controls to show or hide it. Desktop overlay placement is non-modal; mobile Sidebar behavior remains modal with focus trapping and dismissal. Supply a background on the sidebar panel so underlying content does not show through.",[368,1671,1672],{},"Try Navigation to collapse the overlay, then reopen it. Main keeps the same width. This preview starts expanded so you can see the overlay placement.",[445,1674,1675],{},[1282,1676],{"variant":1677},"overlay",[462,1679,1680],{},[465,1681,1683],{"className":467,"code":1682,"language":469,"meta":470,"style":470},"\u003Cscript setup lang=\"ts\">\nimport type { SidebarController } from \"akaza-ui\";\nimport { AppLayout, Sidebar, useSidebar } from \"akaza-ui\";\nimport { useTemplateRef } from \"vue\";\n\nconst sidebar = useSidebar(useTemplateRef\u003CSidebarController>(\"navigation\"));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAppLayout :layout=\"{ left: 'overlay' }\">\n    \u003Ctemplate #header>\n      \u003Cbutton type=\"button\" @click=\"sidebar.toggle\">Navigation\u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #left>\n      \u003CSidebar ref=\"navigation\" collapsible=\"offcanvas\" aria-label=\"Navigation\">\n        \u003Ctemplate #default=\"{ isMobile, closeMobile }\">\n          \u003Cbutton v-if=\"isMobile\" type=\"button\" @click=\"closeMobile\">Close navigation\u003C\u002Fbutton>\n          Navigation\n        \u003C\u002Ftemplate>\n      \u003C\u002FSidebar>\n    \u003C\u002Ftemplate>\n    \u003Ch1>Workspace\u003C\u002Fh1>\n  \u003C\u002FAppLayout>\n\u003C\u002Ftemplate>\n",[371,1684,1685,1705,1727,1755,1775,1779,1811,1819,1823,1831,1851,1863,1899,1907,1919,1960,1988,2034,2039,2047,2055,2063,2079,2087],{"__ignoreMap":470},[474,1686,1687,1689,1691,1693,1695,1697,1699,1701,1703],{"class":476,"line":477},[474,1688,481],{"class":480},[474,1690,485],{"class":484},[474,1692,489],{"class":488},[474,1694,492],{"class":488},[474,1696,495],{"class":480},[474,1698,498],{"class":480},[474,1700,502],{"class":501},[474,1702,498],{"class":480},[474,1704,507],{"class":480},[474,1706,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725],{"class":476,"line":510},[474,1708,514],{"class":513},[474,1710,517],{"class":513},[474,1712,520],{"class":480},[474,1714,524],{"class":523},[474,1716,527],{"class":480},[474,1718,530],{"class":513},[474,1720,533],{"class":480},[474,1722,536],{"class":501},[474,1724,498],{"class":480},[474,1726,541],{"class":480},[474,1728,1729,1731,1733,1735,1737,1739,1741,1743,1745,1747,1749,1751,1753],{"class":476,"line":544},[474,1730,514],{"class":513},[474,1732,520],{"class":480},[474,1734,551],{"class":523},[474,1736,554],{"class":480},[474,1738,557],{"class":523},[474,1740,554],{"class":480},[474,1742,562],{"class":523},[474,1744,527],{"class":480},[474,1746,530],{"class":513},[474,1748,533],{"class":480},[474,1750,536],{"class":501},[474,1752,498],{"class":480},[474,1754,541],{"class":480},[474,1756,1757,1759,1761,1763,1765,1767,1769,1771,1773],{"class":476,"line":577},[474,1758,514],{"class":513},[474,1760,520],{"class":480},[474,1762,584],{"class":523},[474,1764,527],{"class":480},[474,1766,530],{"class":513},[474,1768,533],{"class":480},[474,1770,469],{"class":501},[474,1772,498],{"class":480},[474,1774,541],{"class":480},[474,1776,1777],{"class":476,"line":599},[474,1778,603],{"emptyLinePlaceholder":602},[474,1780,1781,1783,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809],{"class":476,"line":606},[474,1782,609],{"class":488},[474,1784,612],{"class":523},[474,1786,495],{"class":480},[474,1788,562],{"class":617},[474,1790,620],{"class":523},[474,1792,623],{"class":617},[474,1794,481],{"class":480},[474,1796,629],{"class":628},[474,1798,632],{"class":480},[474,1800,620],{"class":523},[474,1802,498],{"class":480},[474,1804,639],{"class":501},[474,1806,498],{"class":480},[474,1808,644],{"class":523},[474,1810,541],{"class":480},[474,1812,1813,1815,1817],{"class":476,"line":649},[474,1814,652],{"class":480},[474,1816,485],{"class":484},[474,1818,507],{"class":480},[474,1820,1821],{"class":476,"line":659},[474,1822,603],{"emptyLinePlaceholder":602},[474,1824,1825,1827,1829],{"class":476,"line":664},[474,1826,481],{"class":480},[474,1828,669],{"class":484},[474,1830,507],{"class":480},[474,1832,1833,1835,1837,1840,1842,1844,1847,1849],{"class":476,"line":674},[474,1834,677],{"class":480},[474,1836,373],{"class":484},[474,1838,1839],{"class":488}," :layout",[474,1841,495],{"class":480},[474,1843,498],{"class":480},[474,1845,1846],{"class":501},"{ left: 'overlay' }",[474,1848,498],{"class":480},[474,1850,507],{"class":480},[474,1852,1853,1855,1857,1859,1861],{"class":476,"line":684},[474,1854,687],{"class":480},[474,1856,669],{"class":484},[474,1858,692],{"class":480},[474,1860,695],{"class":488},[474,1862,507],{"class":480},[474,1864,1865,1867,1869,1871,1873,1875,1877,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897],{"class":476,"line":700},[474,1866,703],{"class":480},[474,1868,706],{"class":484},[474,1870,517],{"class":488},[474,1872,495],{"class":480},[474,1874,498],{"class":480},[474,1876,706],{"class":501},[474,1878,498],{"class":480},[474,1880,719],{"class":488},[474,1882,495],{"class":480},[474,1884,498],{"class":480},[474,1886,726],{"class":501},[474,1888,498],{"class":480},[474,1890,632],{"class":480},[474,1892,733],{"class":523},[474,1894,652],{"class":480},[474,1896,706],{"class":484},[474,1898,507],{"class":480},[474,1900,1901,1903,1905],{"class":476,"line":742},[474,1902,763],{"class":480},[474,1904,669],{"class":484},[474,1906,507],{"class":480},[474,1908,1909,1911,1913,1915,1917],{"class":476,"line":760},[474,1910,687],{"class":480},[474,1912,669],{"class":484},[474,1914,692],{"class":480},[474,1916,784],{"class":488},[474,1918,507],{"class":480},[474,1920,1921,1923,1925,1928,1930,1932,1934,1936,1939,1941,1943,1946,1948,1950,1952,1954,1956,1958],{"class":476,"line":770},[474,1922,703],{"class":480},[474,1924,271],{"class":484},[474,1926,1927],{"class":488}," ref",[474,1929,495],{"class":480},[474,1931,498],{"class":480},[474,1933,639],{"class":501},[474,1935,498],{"class":480},[474,1937,1938],{"class":488}," collapsible",[474,1940,495],{"class":480},[474,1942,498],{"class":480},[474,1944,1945],{"class":501},"offcanvas",[474,1947,498],{"class":480},[474,1949,948],{"class":488},[474,1951,495],{"class":480},[474,1953,498],{"class":480},[474,1955,733],{"class":501},[474,1957,498],{"class":480},[474,1959,507],{"class":480},[474,1961,1962,1964,1966,1968,1970,1972,1974,1976,1978,1980,1982,1984,1986],{"class":476,"line":775},[474,1963,851],{"class":480},[474,1965,669],{"class":484},[474,1967,692],{"class":480},[474,1969,858],{"class":488},[474,1971,495],{"class":480},[474,1973,498],{"class":480},[474,1975,865],{"class":480},[474,1977,873],{"class":523},[474,1979,554],{"class":480},[474,1981,878],{"class":523},[474,1983,881],{"class":480},[474,1985,498],{"class":480},[474,1987,507],{"class":480},[474,1989,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024,2026,2028,2030,2032],{"class":476,"line":789},[474,1991,891],{"class":480},[474,1993,706],{"class":484},[474,1995,896],{"class":488},[474,1997,495],{"class":480},[474,1999,498],{"class":480},[474,2001,903],{"class":501},[474,2003,498],{"class":480},[474,2005,517],{"class":488},[474,2007,495],{"class":480},[474,2009,498],{"class":480},[474,2011,706],{"class":501},[474,2013,498],{"class":480},[474,2015,719],{"class":488},[474,2017,495],{"class":480},[474,2019,498],{"class":480},[474,2021,924],{"class":501},[474,2023,498],{"class":480},[474,2025,632],{"class":480},[474,2027,931],{"class":523},[474,2029,652],{"class":480},[474,2031,706],{"class":484},[474,2033,507],{"class":480},[474,2035,2036],{"class":476,"line":797},[474,2037,2038],{"class":523},"          Navigation\n",[474,2040,2041,2043,2045],{"class":476,"line":812},[474,2042,1005],{"class":480},[474,2044,669],{"class":484},[474,2046,507],{"class":480},[474,2048,2049,2051,2053],{"class":476,"line":827},[474,2050,1015],{"class":480},[474,2052,271],{"class":484},[474,2054,507],{"class":480},[474,2056,2057,2059,2061],{"class":476,"line":842},[474,2058,763],{"class":480},[474,2060,669],{"class":484},[474,2062,507],{"class":480},[474,2064,2065,2067,2069,2071,2073,2075,2077],{"class":476,"line":848},[474,2066,687],{"class":480},[474,2068,1041],{"class":484},[474,2070,632],{"class":480},[474,2072,751],{"class":523},[474,2074,652],{"class":480},[474,2076,1041],{"class":484},[474,2078,507],{"class":480},[474,2080,2081,2083,2085],{"class":476,"line":888},[474,2082,1104],{"class":480},[474,2084,373],{"class":484},[474,2086,507],{"class":480},[474,2088,2089,2091,2093],{"class":476,"line":940},[474,2090,652],{"class":480},[474,2092,669],{"class":484},[474,2094,507],{"class":480},[368,2096,2097,2098,1258],{},"Route handling, navigation selection, and persistence remain application-owned. For controller methods and mobile dismissal, see ",[454,2099,271],{"href":272},[379,2101,2103],{"id":2102},"accessibility-and-keyboard","Accessibility and Keyboard",[368,2105,2106,2107,2109,2110,2113,2114,2116,2117,2119,2120,2123,2124,2126],{},"The default shell renders one ",[371,2108,695],{},", ",[371,2111,2112],{},"main",", and ",[371,2115,1087],{},". Side wrappers are plain ",[371,2118,1613],{}," elements so a Sidebar's ",[371,2121,2122],{},"aside"," or a consumer-owned ",[371,2125,945],{}," does not receive duplicate landmark wrappers. Give each navigation or inspector its own accessible name.",[1126,2128,2129,2139],{},[1129,2130,2131],{},[1132,2132,2133,2136],{},[1135,2134,2135],{},"Key \u002F action",[1135,2137,2138],{},"Behavior",[1142,2140,2141,2149,2157],{},[1132,2142,2143,2146],{},[1147,2144,2145],{},"Tab",[1147,2147,2148],{},"Reaches the skip link, then application controls in DOM order: header, left, main, right, footer. Main is a tab stop in content-scrolling mode so keyboard users can scroll it.",[1132,2150,2151,2154],{},[1147,2152,2153],{},"Enter on skip link",[1147,2155,2156],{},"Moves focus to main without changing the URL or resetting the workspace scroll position.",[1132,2158,2159,2162],{},[1147,2160,2161],{},"Page Up \u002F Down, Space, arrows",[1147,2163,2164],{},"Native scrolling when focus is inside the scrollable content. Controls retain their own keyboard behavior.",[368,2166,2167,2169,2170,2173],{},[371,2168,1593],{}," is intended for nested previews or a shell inside an existing main landmark. ",[371,2171,2172],{},"focusMain()"," is exposed for applications that move focus after a route change. AppLayout itself does not observe routes.",[379,2175,2177],{"id":2176},"api","API",[1264,2179,2181],{"id":2180},"props","Props",[1126,2183,2184,2200],{},[1129,2185,2186],{},[1132,2187,2188,2191,2194,2197],{},[1135,2189,2190],{},"Prop",[1135,2192,2193],{},"Type",[1135,2195,2196],{},"Default",[1135,2198,2199],{},"Description",[1142,2201,2202,2222,2241,2258,2278,2297,2316,2334,2351,2371,2390,2408,2426,2443,2461,2480],{},[1132,2203,2204,2209,2214,2219],{},[1147,2205,2206],{},[371,2207,2208],{},"as",[1147,2210,2211],{},[371,2212,2213],{},"string | Component",[1147,2215,2216],{},[371,2217,2218],{},"\"div\"",[1147,2220,2221],{},"Outer root element.",[1132,2223,2224,2229,2233,2238],{},[1147,2225,2226],{},[371,2227,2228],{},"mainAs",[1147,2230,2231],{},[371,2232,2213],{},[1147,2234,2235],{},[371,2236,2237],{},"\"main\"",[1147,2239,2240],{},"Content element; use a native tag for the exposed focus helper.",[1132,2242,2243,2247,2252,2255],{},[1147,2244,2245],{},[371,2246,1303],{},[1147,2248,2249],{},[371,2250,2251],{},"AppLayoutConfig",[1147,2253,2254],{},"See below",[1147,2256,2257],{},"Region span and side placement. Partial objects keep defaults for omitted keys.",[1132,2259,2260,2265,2270,2275],{},[1147,2261,2262],{},[371,2263,2264],{},"scroll",[1147,2266,2267],{},[371,2268,2269],{},"\"content\" | \"page\"",[1147,2271,2272],{},[371,2273,2274],{},"\"content\"",[1147,2276,2277],{},"Independent main scrolling or document flow.",[1132,2279,2280,2284,2289,2294],{},[1147,2281,2282],{},[371,2283,1582],{},[1147,2285,2286],{},[371,2287,2288],{},"boolean",[1147,2290,2291],{},[371,2292,2293],{},"true",[1147,2295,2296],{},"Dynamic viewport height in content mode; minimum viewport height in page mode.",[1132,2298,2299,2304,2308,2313],{},[1147,2300,2301],{},[371,2302,2303],{},"stickyHeader",[1147,2305,2306],{},[371,2307,2288],{},[1147,2309,2310],{},[371,2311,2312],{},"false",[1147,2314,2315],{},"Sticky header in page mode.",[1132,2317,2318,2323,2327,2331],{},[1147,2319,2320],{},[371,2321,2322],{},"stickyFooter",[1147,2324,2325],{},[371,2326,2288],{},[1147,2328,2329],{},[371,2330,2312],{},[1147,2332,2333],{},"Sticky footer in page mode.",[1132,2335,2336,2340,2344,2348],{},[1147,2337,2338],{},[371,2339,1504],{},[1147,2341,2342],{},[371,2343,2288],{},[1147,2345,2346],{},[371,2347,2312],{},[1147,2349,2350],{},"Sticky inline sides in page mode.",[1132,2352,2353,2357,2361,2365],{},[1147,2354,2355],{},[371,2356,1496],{},[1147,2358,2359],{},[371,2360,2288],{},[1147,2362,2363],{},[371,2364,1504],{},[1147,2366,2367,2368,2370],{},"Override stickiness for the inline left side in page mode. Explicit ",[371,2369,2312],{}," disables it.",[1132,2372,2373,2377,2381,2385],{},[1147,2374,2375],{},[371,2376,1500],{},[1147,2378,2379],{},[371,2380,2288],{},[1147,2382,2383],{},[371,2384,1504],{},[1147,2386,2387,2388,2370],{},"Override stickiness for the inline right side in page mode. Explicit ",[371,2389,2312],{},[1132,2391,2392,2397,2401,2405],{},[1147,2393,2394],{},[371,2395,2396],{},"safeArea",[1147,2398,2399],{},[371,2400,2288],{},[1147,2402,2403],{},[371,2404,2293],{},[1147,2406,2407],{},"Outer device safe-area padding. Consumer padding utilities can override it.",[1132,2409,2410,2415,2420,2423],{},[1147,2411,2412],{},[371,2413,2414],{},"mainId",[1147,2416,2417],{},[371,2418,2419],{},"string",[1147,2421,2422],{},"Generated",[1147,2424,2425],{},"Main ID and skip-link target. Keep explicit IDs unique.",[1132,2427,2428,2433,2437,2440],{},[1147,2429,2430],{},[371,2431,2432],{},"mainLabel",[1147,2434,2435],{},[371,2436,2419],{},[1147,2438,2439],{},"-",[1147,2441,2442],{},"Accessible name on content element.",[1132,2444,2445,2450,2454,2458],{},[1147,2446,2447],{},[371,2448,2449],{},"skipLink",[1147,2451,2452],{},[371,2453,2288],{},[1147,2455,2456],{},[371,2457,2293],{},[1147,2459,2460],{},"Render the keyboard skip link.",[1132,2462,2463,2468,2472,2477],{},[1147,2464,2465],{},[371,2466,2467],{},"skipLabel",[1147,2469,2470],{},[371,2471,2419],{},[1147,2473,2474],{},[371,2475,2476],{},"\"Skip to content\"",[1147,2478,2479],{},"Skip-link text, including localization.",[1132,2481,2482,2486,2491,2493],{},[1147,2483,2484],{},[371,2485,459],{},[1147,2487,2488],{},[371,2489,2490],{},"AppLayoutUi",[1147,2492,2439],{},[1147,2494,2495],{},"Classes for generated parts.",[1264,2497,2499],{"id":2498},"layout-options","Layout Options",[1126,2501,2502,2516],{},[1129,2503,2504],{},[1132,2505,2506,2509,2512,2514],{},[1135,2507,2508],{},"Key",[1135,2510,2511],{},"Values",[1135,2513,2196],{},[1135,2515,2199],{},[1142,2517,2518,2537,2553,2572],{},[1132,2519,2520,2524,2529,2534],{},[1147,2521,2522],{},[371,2523,695],{},[1147,2525,2526],{},[371,2527,2528],{},"\"full\" | \"content\" | \"left\" | \"right\"",[1147,2530,2531],{},[371,2532,2533],{},"\"full\"",[1147,2535,2536],{},"All columns, main only, main plus left, or main plus right.",[1132,2538,2539,2543,2547,2551],{},[1147,2540,2541],{},[371,2542,1087],{},[1147,2544,2545],{},[371,2546,2528],{},[1147,2548,2549],{},[371,2550,2533],{},[1147,2552,2536],{},[1132,2554,2555,2559,2564,2569],{},[1147,2556,2557],{},[371,2558,784],{},[1147,2560,2561],{},[371,2562,2563],{},"\"inline\" | \"overlay\"",[1147,2565,2566],{},[371,2567,2568],{},"\"inline\"",[1147,2570,2571],{},"Reserve left width or cover main content.",[1132,2573,2574,2578,2582,2586],{},[1147,2575,2576],{},[371,2577,1388],{},[1147,2579,2580],{},[371,2581,2563],{},[1147,2583,2584],{},[371,2585,2568],{},[1147,2587,2588],{},"Reserve right width or cover main content.",[1264,2590,2592],{"id":2591},"slots","Slots",[368,2594,2595,2596,2599,2600,2113,2603,2606],{},"All five slots receive ",[371,2597,2598],{},"mainId: string",", resolved ",[371,2601,2602],{},"layout: Required\u003CAppLayoutConfig>",[371,2604,2605],{},"scroll: AppLayoutScroll",". Slots supply content inside generated region wrappers. Omitted region slots produce no wrappers. Slot-owned controls retain their own event handlers and accessibility.",[1264,2608,2610],{"id":2609},"exposed-methods","Exposed Methods",[1126,2612,2613,2624],{},[1129,2614,2615],{},[1132,2616,2617,2620,2622],{},[1135,2618,2619],{},"Member",[1135,2621,2193],{},[1135,2623,2199],{},[1142,2625,2626,2640],{},[1132,2627,2628,2632,2637],{},[1147,2629,2630],{},[371,2631,2112],{},[1147,2633,2634],{},[371,2635,2636],{},"HTMLElement | null",[1147,2638,2639],{},"Main element after mounting.",[1132,2641,2642,2646,2651],{},[1147,2643,2644],{},[371,2645,2172],{},[1147,2647,2648],{},[371,2649,2650],{},"() => void",[1147,2652,2653],{},"Focus main while preserving scroll position.",[368,2655,2656],{},"AppLayout has no value model or change emits. It derives geometry from props, slots, and region measurements; Sidebar models remain on Sidebar.",[1264,2658,2660],{"id":2659},"ui-options","UI Options",[1126,2662,2663,2672],{},[1129,2664,2665],{},[1132,2666,2667,2669],{},[1135,2668,2508],{},[1135,2670,2671],{},"Element",[1142,2673,2674,2684,2693,2702,2711,2720,2729],{},[1132,2675,2676,2681],{},[1147,2677,2678],{},[371,2679,2680],{},"root",[1147,2682,2683],{},"Outer CSS grid.",[1132,2685,2686,2690],{},[1147,2687,2688],{},[371,2689,2449],{},[1147,2691,2692],{},"Keyboard skip link.",[1132,2694,2695,2699],{},[1147,2696,2697],{},[371,2698,695],{},[1147,2700,2701],{},"Header wrapper.",[1132,2703,2704,2708],{},[1147,2705,2706],{},[371,2707,784],{},[1147,2709,2710],{},"Left region wrapper.",[1132,2712,2713,2717],{},[1147,2714,2715],{},[371,2716,2112],{},[1147,2718,2719],{},"Scrollable main content.",[1132,2721,2722,2726],{},[1147,2723,2724],{},[371,2725,1388],{},[1147,2727,2728],{},"Right region wrapper.",[1132,2730,2731,2735],{},[1147,2732,2733],{},[371,2734,1087],{},[1147,2736,2737],{},"Footer wrapper.",[368,2739,2740,2741,1497,2743,2745,2746,1258],{},"Direct ",[371,2742,1586],{},[371,2744,1589],{}," both style the single outer root. AppLayout supplies only positioning, scrolling, visibility, and safe-area mechanics. Supply backgrounds, padding, borders, typography, and visible focus styles through ",[371,2747,459],{},[1264,2749,2751],{"id":2750},"styling-hooks","Styling Hooks",[1126,2753,2754,2767],{},[1129,2755,2756],{},[1132,2757,2758,2761,2764],{},[1135,2759,2760],{},"UI key",[1135,2762,2763],{},"CSS class",[1135,2765,2766],{},"Data attributes",[1142,2768,2769,2797,2817,2836,2857,2874,2894],{},[1132,2770,2771,2775,2780],{},[1147,2772,2773],{},[371,2774,2680],{},[1147,2776,2777],{},[371,2778,2779],{},"akaza-app-layout",[1147,2781,2782,2109,2785,2109,2788,2109,2791,2109,2794],{},[371,2783,2784],{},"data-akaza-scroll=\"content|page\"",[371,2786,2787],{},"data-akaza-viewport",[371,2789,2790],{},"data-akaza-safe-area",[371,2792,2793],{},"data-akaza-header=\"full|content|left|right\"",[371,2795,2796],{},"data-akaza-footer=\"full|content|left|right\"",[1132,2798,2799,2803,2808],{},[1147,2800,2801],{},[371,2802,2449],{},[1147,2804,2805],{},[371,2806,2807],{},"akaza-app-layout-skip-link",[1147,2809,2810,2811,1152,2814,1258],{},"Native ",[371,2812,2813],{},":focus",[371,2815,2816],{},":focus-visible",[1132,2818,2819,2823,2828],{},[1147,2820,2821],{},[371,2822,695],{},[1147,2824,2825],{},[371,2826,2827],{},"akaza-app-layout-header",[1147,2829,2830,2109,2833],{},[371,2831,2832],{},"data-akaza-span=\"full|content|left|right\"",[371,2834,2835],{},"data-akaza-sticky",[1132,2837,2838,2842,2847],{},[1147,2839,2840],{},[371,2841,784],{},[1147,2843,2844],{},[371,2845,2846],{},"akaza-app-layout-left",[1147,2848,2849,2109,2852,2109,2855],{},[371,2850,2851],{},"data-akaza-side=\"left\"",[371,2853,2854],{},"data-akaza-mode=\"inline|overlay\"",[371,2856,2835],{},[1132,2858,2859,2863,2868],{},[1147,2860,2861],{},[371,2862,2112],{},[1147,2864,2865],{},[371,2866,2867],{},"akaza-app-layout-main",[1147,2869,2810,2870,1152,2872,1258],{},[371,2871,2813],{},[371,2873,2816],{},[1132,2875,2876,2880,2885],{},[1147,2877,2878],{},[371,2879,1388],{},[1147,2881,2882],{},[371,2883,2884],{},"akaza-app-layout-right",[1147,2886,2887,2109,2890,2109,2892],{},[371,2888,2889],{},"data-akaza-side=\"right\"",[371,2891,2854],{},[371,2893,2835],{},[1132,2895,2896,2900,2905],{},[1147,2897,2898],{},[371,2899,1087],{},[1147,2901,2902],{},[371,2903,2904],{},"akaza-app-layout-footer",[1147,2906,2907,2109,2909],{},[371,2908,2832],{},[371,2910,2835],{},[368,2912,2913,2914,1258],{},"No exclusive interaction state exists on AppLayout, so there is no artificial ",[371,2915,2916],{},"data-akaza-state",[1264,2918,2920],{"id":2919},"css-variables","CSS Variables",[1126,2922,2923,2933],{},[1129,2924,2925],{},[1132,2926,2927,2930],{},[1135,2928,2929],{},"Variable",[1135,2931,2932],{},"Value \u002F default",[1142,2934,2935,2945,2955,2968,2981,2994,3007,3020,3033,3046,3058,3070],{},[1132,2936,2937,2942],{},[1147,2938,2939],{},[371,2940,2941],{},"--akaza-app-layout-header-height",[1147,2943,2944],{},"Measured header border-box height.",[1132,2946,2947,2952],{},[1147,2948,2949],{},[371,2950,2951],{},"--akaza-app-layout-footer-height",[1147,2953,2954],{},"Measured footer border-box height.",[1132,2956,2957,2962],{},[1147,2958,2959],{},[371,2960,2961],{},"--akaza-app-layout-viewport-height",[1147,2963,2964,2967],{},[371,2965,2966],{},"100dvh",". Height basis for sticky sides; set it to the parent's height for contained layouts.",[1132,2969,2970,2978],{},[1147,2971,2972,2109,2975],{},[371,2973,2974],{},"--akaza-app-layout-left-top",[371,2976,2977],{},"--akaza-app-layout-right-top",[1147,2979,2980],{},"Header offset for each side; zero if header does not cover it.",[1132,2982,2983,2991],{},[1147,2984,2985,2109,2988],{},[371,2986,2987],{},"--akaza-app-layout-left-bottom",[371,2989,2990],{},"--akaza-app-layout-right-bottom",[1147,2992,2993],{},"Footer offset for each side; zero if footer does not cover it.",[1132,2995,2996,3004],{},[1147,2997,2998,2109,3001],{},[371,2999,3000],{},"--akaza-app-layout-left-sticky-top",[371,3002,3003],{},"--akaza-app-layout-right-sticky-top",[1147,3005,3006],{},"Header offset for each sticky side when that bar is sticky and covers the side.",[1132,3008,3009,3017],{},[1147,3010,3011,2109,3014],{},[371,3012,3013],{},"--akaza-app-layout-left-sticky-bottom",[371,3015,3016],{},"--akaza-app-layout-right-sticky-bottom",[1147,3018,3019],{},"Footer offset for each sticky side when that bar is sticky and covers the side.",[1132,3021,3022,3030],{},[1147,3023,3024,2109,3027],{},[371,3025,3026],{},"--akaza-app-layout-side-top",[371,3028,3029],{},"--akaza-app-layout-side-bottom",[1147,3031,3032],{},"On each side wrapper, aliases of its own overlay offsets.",[1132,3034,3035,3043],{},[1147,3036,3037,2109,3040],{},[371,3038,3039],{},"--akaza-app-layout-sticky-top",[371,3041,3042],{},"--akaza-app-layout-sticky-bottom",[1147,3044,3045],{},"On each side wrapper, aliases of its own sticky offsets.",[1132,3047,3048,3053],{},[1147,3049,3050],{},[371,3051,3052],{},"--akaza-app-layout-side-z-index",[1147,3054,3055],{},[371,3056,3057],{},"1",[1132,3059,3060,3065],{},[1147,3061,3062],{},[371,3063,3064],{},"--akaza-app-layout-bar-z-index",[1147,3066,3067],{},[371,3068,3069],{},"2",[1132,3071,3072,3077],{},[1147,3073,3074],{},[371,3075,3076],{},"--akaza-app-layout-skip-z-index",[1147,3078,3079],{},[371,3080,3081],{},"3",[368,3083,3084,3085,3087],{},"Overlay side regions use local stacking inside the isolated shell. Sidebar mobile dialogs and NavigationMenu flyouts keep their existing Teleport behavior outside the shell. Use ",[371,3086,1240],{}," if non-teleported popups need to escape the shell's clipped boundary.",[3089,3090,3091],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":470,"searchDepth":477,"depth":510,"links":3093},[3094,3095,3096,3097,3098,3105,3106],{"id":381,"depth":510,"text":382},{"id":440,"depth":510,"text":23},{"id":1120,"depth":510,"text":1121},{"id":1249,"depth":510,"text":358},{"id":1261,"depth":510,"text":1262,"children":3099},[3100,3101,3102,3103,3104],{"id":1266,"depth":544,"text":1267},{"id":1378,"depth":544,"text":1379},{"id":1486,"depth":544,"text":1487},{"id":1575,"depth":544,"text":1576},{"id":1665,"depth":544,"text":1666},{"id":2102,"depth":510,"text":2103},{"id":2176,"depth":510,"text":2177,"children":3107},[3108,3109,3110,3111,3112,3113,3114],{"id":2180,"depth":544,"text":2181},{"id":2498,"depth":544,"text":2499},{"id":2591,"depth":544,"text":2592},{"id":2609,"depth":544,"text":2610},{"id":2659,"depth":544,"text":2660},{"id":2750,"depth":544,"text":2751},{"id":2919,"depth":544,"text":2920},"Header, content, sidebars, and footer in one application shell.","md",null,{},{"icon":45,"badge":3120},{"label":79,"color":80},{"title":75,"description":3115},"IkYTLaKAHcY9ezCaSpEu1zLNspoQK-IAwVTfBxzMc6k",[3124,3126],{"title":70,"path":71,"stem":72,"description":3125,"icon":73,"children":-1},"A modal dialog that interrupts the user and requires a response.",{"title":82,"path":83,"stem":84,"description":3127,"icon":85,"children":-1},"An image element with a fallback for when the image fails to load.",1791960470764]