[{"data":1,"prerenderedAt":1898},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Ftray":313,"\u002Fcomponents\u002Ftray-surround":1893},[4,24,41,48,293,298,303,308],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":23},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles","i-lucide-rocket",{"title":25,"package":11,"icon":26,"path":27,"stem":28,"children":29,"page":40},"Packages","i-lucide-package","\u002Fpackages","2.packages",[30,35],{"title":31,"path":32,"stem":33,"package":11,"icon":34},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":36,"path":37,"stem":38,"package":11,"icon":39},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":42,"path":43,"stem":44,"children":45,"package":11,"icon":47},"CLI","\u002Fcli","3.cli\u002F1.index",[46],{"title":42,"path":43,"stem":44,"package":11,"icon":47},"i-lucide-terminal",{"title":49,"package":11,"icon":50,"path":51,"stem":52,"children":53},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[54,56,62,67,72,77,82,87,92,97,102,107,112,117,122,127,132,136,141,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,220,225,230,234,238,243,248,253,258,263,268,272,276,280,284,288],{"title":49,"path":51,"stem":55,"package":11,"icon":50},"3.components\u002Findex",{"title":57,"path":58,"stem":59,"package":60,"icon":61},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":63,"path":64,"stem":65,"package":60,"icon":66},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":68,"path":69,"stem":70,"package":60,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":78,"path":79,"stem":80,"package":60,"icon":81},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":83,"path":84,"stem":85,"package":60,"icon":86},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":88,"path":89,"stem":90,"package":60,"icon":91},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":93,"path":94,"stem":95,"package":60,"icon":96},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":98,"path":99,"stem":100,"package":60,"icon":101},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":103,"path":104,"stem":105,"package":60,"icon":106},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":108,"path":109,"stem":110,"package":60,"icon":111},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":113,"path":114,"stem":115,"package":76,"icon":116},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":118,"path":119,"stem":120,"package":76,"icon":121},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":123,"path":124,"stem":125,"package":76,"icon":126},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":128,"path":129,"stem":130,"package":60,"icon":131},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":133,"path":134,"stem":135,"package":76,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":137,"path":138,"stem":139,"package":60,"icon":140},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":142,"path":143,"stem":144,"package":60,"icon":66},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":146,"path":147,"stem":148,"package":60,"icon":149},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":151,"path":152,"stem":153,"package":60,"icon":154},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":156,"path":157,"stem":158,"package":60,"icon":159},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":161,"path":162,"stem":163,"package":60,"icon":164},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":166,"path":167,"stem":168,"package":60,"icon":169},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":171,"path":172,"stem":173,"package":76,"icon":174},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":176,"path":177,"stem":178,"package":60,"icon":179},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":181,"path":182,"stem":183,"package":76,"icon":184},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":186,"path":187,"stem":188,"package":60,"icon":189},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":191,"path":192,"stem":193,"package":60,"icon":194},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":196,"path":197,"stem":198,"package":60,"icon":199},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":201,"path":202,"stem":203,"package":60,"icon":204},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":206,"path":207,"stem":208,"package":60,"icon":209},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":211,"path":212,"stem":213,"package":60,"icon":214},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":216,"path":217,"stem":218,"package":76,"icon":219},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":221,"path":222,"stem":223,"package":60,"icon":224},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":226,"path":227,"stem":228,"package":60,"icon":229},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":231,"path":232,"stem":233,"package":76,"icon":66},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":235,"path":236,"stem":237,"package":60,"icon":154},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":239,"path":240,"stem":241,"package":60,"icon":242},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":244,"path":245,"stem":246,"package":60,"icon":247},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":249,"path":250,"stem":251,"package":60,"icon":252},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":254,"path":255,"stem":256,"package":60,"icon":257},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":259,"path":260,"stem":261,"package":60,"icon":262},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":264,"path":265,"stem":266,"package":60,"icon":267},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":269,"path":270,"stem":271,"package":60,"icon":154},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":273,"path":274,"stem":275,"package":60,"icon":140},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":277,"path":278,"stem":279,"package":60,"icon":199},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":281,"path":282,"stem":283,"package":60,"icon":267},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":285,"path":286,"stem":287,"package":60,"icon":154},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":289,"path":290,"stem":291,"package":60,"icon":292},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":294,"path":295,"stem":296,"package":11,"icon":297},"Theming","\u002Ftheming","4.theming","i-lucide-palette",{"title":299,"path":300,"stem":301,"package":11,"icon":302},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":304,"path":305,"stem":306,"package":11,"icon":307},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":309,"path":310,"stem":311,"package":11,"icon":312},"Roadmap","\u002Froadmap","7.roadmap","i-lucide-map",{"id":314,"title":289,"body":315,"description":1881,"extension":1882,"links":1883,"meta":1889,"navigation":1890,"package":60,"path":290,"seo":1891,"stem":291,"__hash__":1892},"docs\u002F3.components\u002Ftray.md",{"type":316,"value":317,"toc":1861},"minimark",[318,323,349,354,386,390,408,871,882,887,903,1035,1039,1045,1117,1121,1138,1227,1230,1237,1313,1317,1336,1403,1406,1425,1439,1534,1538,1594,1598,1601,1604,1607,1611,1614,1618,1621,1625,1635,1759,1762,1776,1780,1824,1828,1857],[319,320,322],"h2",{"id":321},"overview","Overview",[324,325,326,330,331,335,336,340,341,344,345,348],"p",{},[327,328,329],"code",{},"VyTray"," is a bottom sheet that hosts several named ",[332,333,334],"strong",{},"views"," and animates its height to fit whichever one is showing — the panel ",[337,338,339],"em",{},"grows into place"," as you navigate rather than jumping. A back stack (",[327,342,343],{},"goBack",", ",[327,346,347],{},"canGoBack",") makes it a natural home for short, branching flows: a menu that drills into a detail, a confirm step, a quick form.",[350,351],"component-code",{"height":352,"name":353},"420px","tray-example",[355,356,357],"callout",{"icon":34},[324,358,359,360,362,363,368,369,372,373,379,380,385],{},"Built on the ",[327,361,31],{}," ",[364,365,366],"a",{"href":232},[327,367,231],{}," primitives in ",[327,370,371],{},"fitContent"," mode, so the panel hugs its content. Reach for ",[364,374,376],{"href":375},"\u002Fcomponents\u002Fdrawer",[327,377,378],{},"Drawer"," instead when you want a fixed-height, snap-point sheet, or ",[364,381,382],{"href":64},[327,383,384],{},"ActionSheet"," for a simple list of actions.",[319,387,389],{"id":388},"usage","Usage",[324,391,392,393,396,397,400,401,407],{},"Give each screen a ",[327,394,395],{},"VyTrayView"," with a unique ",[327,398,399],{},"id",". Only the active view mounts, and the tray measures it and morphs its height to match. Navigate with the controls exposed on the default slot (or ",[364,402,404],{"href":403},"#usetray",[327,405,406],{},"useTray",").",[409,410,415],"pre",{"className":411,"code":412,"language":413,"meta":414,"style":414},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyButton, VyTray, VyTrayView } from '@vyui\u002Fkit'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyTray v-model:open=\"open\" default-view=\"menu\">\n    \u003Ctemplate #trigger>\n      \u003CVyButton label=\"Open tray\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #default=\"{ setView }\">\n      \u003CVyTrayView id=\"menu\">\n        \u003CVyButton label=\"Share\" @tap=\"setView('share')\" \u002F>\n        \u003CVyButton label=\"Delete\" @tap=\"setView('confirm')\" \u002F>\n      \u003C\u002FVyTrayView>\n\n      \u003CVyTrayView id=\"share\">…a taller view; the tray grows…\u003C\u002FVyTrayView>\n      \u003CVyTrayView id=\"confirm\">…a short view; the tray shrinks…\u003C\u002FVyTrayView>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVyTray>\n\u003C\u002Ftemplate>\n","vue","",[327,416,417,452,480,511,518,542,552,557,567,601,617,641,651,656,685,705,738,769,779,784,814,843,852,862],{"__ignoreMap":414},[418,419,422,426,430,434,437,440,443,447,449],"span",{"class":420,"line":421},"line",1,[418,423,425],{"class":424},"sMK4o","\u003C",[418,427,429],{"class":428},"swJcz","script",[418,431,433],{"class":432},"spNyl"," setup",[418,435,436],{"class":432}," lang",[418,438,439],{"class":424},"=",[418,441,442],{"class":424},"\"",[418,444,446],{"class":445},"sfazB","ts",[418,448,442],{"class":424},[418,450,451],{"class":424},">\n",[418,453,455,459,462,466,469,472,475,477],{"class":420,"line":454},2,[418,456,458],{"class":457},"s7zQu","import",[418,460,461],{"class":424}," {",[418,463,465],{"class":464},"sTEyZ"," ref",[418,467,468],{"class":424}," }",[418,470,471],{"class":457}," from",[418,473,474],{"class":424}," '",[418,476,413],{"class":445},[418,478,479],{"class":424},"'\n",[418,481,483,485,487,490,493,496,498,501,503,505,507,509],{"class":420,"line":482},3,[418,484,458],{"class":457},[418,486,461],{"class":424},[418,488,489],{"class":464}," VyButton",[418,491,492],{"class":424},",",[418,494,495],{"class":464}," VyTray",[418,497,492],{"class":424},[418,499,500],{"class":464}," VyTrayView",[418,502,468],{"class":424},[418,504,471],{"class":457},[418,506,474],{"class":424},[418,508,36],{"class":445},[418,510,479],{"class":424},[418,512,514],{"class":420,"line":513},4,[418,515,517],{"emptyLinePlaceholder":516},true,"\n",[418,519,521,524,527,529,532,535,539],{"class":420,"line":520},5,[418,522,523],{"class":432},"const",[418,525,526],{"class":464}," open ",[418,528,439],{"class":424},[418,530,465],{"class":531},"s2Zo4",[418,533,534],{"class":464},"(",[418,536,538],{"class":537},"sfNiH","false",[418,540,541],{"class":464},")\n",[418,543,545,548,550],{"class":420,"line":544},6,[418,546,547],{"class":424},"\u003C\u002F",[418,549,429],{"class":428},[418,551,451],{"class":424},[418,553,555],{"class":420,"line":554},7,[418,556,517],{"emptyLinePlaceholder":516},[418,558,560,562,565],{"class":420,"line":559},8,[418,561,425],{"class":424},[418,563,564],{"class":428},"template",[418,566,451],{"class":424},[418,568,570,573,575,578,580,582,585,587,590,592,594,597,599],{"class":420,"line":569},9,[418,571,572],{"class":424},"  \u003C",[418,574,329],{"class":428},[418,576,577],{"class":432}," v-model:open",[418,579,439],{"class":424},[418,581,442],{"class":424},[418,583,584],{"class":445},"open",[418,586,442],{"class":424},[418,588,589],{"class":432}," default-view",[418,591,439],{"class":424},[418,593,442],{"class":424},[418,595,596],{"class":445},"menu",[418,598,442],{"class":424},[418,600,451],{"class":424},[418,602,604,607,609,612,615],{"class":420,"line":603},10,[418,605,606],{"class":424},"    \u003C",[418,608,564],{"class":428},[418,610,611],{"class":424}," #",[418,613,614],{"class":432},"trigger",[418,616,451],{"class":424},[418,618,620,623,626,629,631,633,636,638],{"class":420,"line":619},11,[418,621,622],{"class":424},"      \u003C",[418,624,625],{"class":428},"VyButton",[418,627,628],{"class":432}," label",[418,630,439],{"class":424},[418,632,442],{"class":424},[418,634,635],{"class":445},"Open tray",[418,637,442],{"class":424},[418,639,640],{"class":424}," \u002F>\n",[418,642,644,647,649],{"class":420,"line":643},12,[418,645,646],{"class":424},"    \u003C\u002F",[418,648,564],{"class":428},[418,650,451],{"class":424},[418,652,654],{"class":420,"line":653},13,[418,655,517],{"emptyLinePlaceholder":516},[418,657,659,661,663,665,668,670,672,675,678,681,683],{"class":420,"line":658},14,[418,660,606],{"class":424},[418,662,564],{"class":428},[418,664,611],{"class":424},[418,666,667],{"class":432},"default",[418,669,439],{"class":424},[418,671,442],{"class":424},[418,673,674],{"class":424},"{",[418,676,677],{"class":464}," setView ",[418,679,680],{"class":424},"}",[418,682,442],{"class":424},[418,684,451],{"class":424},[418,686,688,690,692,695,697,699,701,703],{"class":420,"line":687},15,[418,689,622],{"class":424},[418,691,395],{"class":428},[418,693,694],{"class":432}," id",[418,696,439],{"class":424},[418,698,442],{"class":424},[418,700,596],{"class":445},[418,702,442],{"class":424},[418,704,451],{"class":424},[418,706,708,711,713,715,717,719,722,724,727,729,731,734,736],{"class":420,"line":707},16,[418,709,710],{"class":424},"        \u003C",[418,712,625],{"class":428},[418,714,628],{"class":432},[418,716,439],{"class":424},[418,718,442],{"class":424},[418,720,721],{"class":445},"Share",[418,723,442],{"class":424},[418,725,726],{"class":432}," @tap",[418,728,439],{"class":424},[418,730,442],{"class":424},[418,732,733],{"class":445},"setView('share')",[418,735,442],{"class":424},[418,737,640],{"class":424},[418,739,741,743,745,747,749,751,754,756,758,760,762,765,767],{"class":420,"line":740},17,[418,742,710],{"class":424},[418,744,625],{"class":428},[418,746,628],{"class":432},[418,748,439],{"class":424},[418,750,442],{"class":424},[418,752,753],{"class":445},"Delete",[418,755,442],{"class":424},[418,757,726],{"class":432},[418,759,439],{"class":424},[418,761,442],{"class":424},[418,763,764],{"class":445},"setView('confirm')",[418,766,442],{"class":424},[418,768,640],{"class":424},[418,770,772,775,777],{"class":420,"line":771},18,[418,773,774],{"class":424},"      \u003C\u002F",[418,776,395],{"class":428},[418,778,451],{"class":424},[418,780,782],{"class":420,"line":781},19,[418,783,517],{"emptyLinePlaceholder":516},[418,785,787,789,791,793,795,797,800,802,805,808,810,812],{"class":420,"line":786},20,[418,788,622],{"class":424},[418,790,395],{"class":428},[418,792,694],{"class":432},[418,794,439],{"class":424},[418,796,442],{"class":424},[418,798,799],{"class":445},"share",[418,801,442],{"class":424},[418,803,804],{"class":424},">",[418,806,807],{"class":464},"…a taller view; the tray grows…",[418,809,547],{"class":424},[418,811,395],{"class":428},[418,813,451],{"class":424},[418,815,817,819,821,823,825,827,830,832,834,837,839,841],{"class":420,"line":816},21,[418,818,622],{"class":424},[418,820,395],{"class":428},[418,822,694],{"class":432},[418,824,439],{"class":424},[418,826,442],{"class":424},[418,828,829],{"class":445},"confirm",[418,831,442],{"class":424},[418,833,804],{"class":424},[418,835,836],{"class":464},"…a short view; the tray shrinks…",[418,838,547],{"class":424},[418,840,395],{"class":428},[418,842,451],{"class":424},[418,844,846,848,850],{"class":420,"line":845},22,[418,847,646],{"class":424},[418,849,564],{"class":428},[418,851,451],{"class":424},[418,853,855,858,860],{"class":420,"line":854},23,[418,856,857],{"class":424},"  \u003C\u002F",[418,859,329],{"class":428},[418,861,451],{"class":424},[418,863,865,867,869],{"class":420,"line":864},24,[418,866,547],{"class":424},[418,868,564],{"class":428},[418,870,451],{"class":424},[324,872,873,874,877,878,881],{},"The ",[327,875,876],{},"#trigger"," slot renders in normal flow; tapping it opens the tray to ",[327,879,880],{},"defaultView",".",[883,884,886],"h3",{"id":885},"navigation-and-the-back-stack","Navigation and the back stack",[324,888,889,892,893,896,897,899,900,881],{},[327,890,891],{},"setView(id)"," pushes the current view onto a history stack; ",[327,894,895],{},"goBack()"," pops it. ",[327,898,347],{}," reflects whether there is anywhere to return to, so a Back control can hide itself on the first view. The default and footer slots both receive ",[327,901,902],{},"{ open, close, setView, goBack, visible, view, canGoBack }",[409,904,906],{"className":411,"code":905,"language":413,"meta":414,"style":414},"\u003Ctemplate #default=\"{ setView, goBack, canGoBack }\">\n  \u003CVyTrayView id=\"confirm\">\n    \u003CVyButton v-if=\"canGoBack\" label=\"← Back\" @tap=\"goBack()\" \u002F>\n    \u003Ctext>Delete item?\u003C\u002Ftext>\n  \u003C\u002FVyTrayView>\n\u003C\u002Ftemplate>\n",[327,907,908,943,961,1001,1019,1027],{"__ignoreMap":414},[418,909,910,912,914,916,918,920,922,924,927,929,932,934,937,939,941],{"class":420,"line":421},[418,911,425],{"class":424},[418,913,564],{"class":428},[418,915,611],{"class":424},[418,917,667],{"class":432},[418,919,439],{"class":424},[418,921,442],{"class":424},[418,923,674],{"class":424},[418,925,926],{"class":464}," setView",[418,928,492],{"class":424},[418,930,931],{"class":464}," goBack",[418,933,492],{"class":424},[418,935,936],{"class":464}," canGoBack ",[418,938,680],{"class":424},[418,940,442],{"class":424},[418,942,451],{"class":424},[418,944,945,947,949,951,953,955,957,959],{"class":420,"line":454},[418,946,572],{"class":424},[418,948,395],{"class":428},[418,950,694],{"class":432},[418,952,439],{"class":424},[418,954,442],{"class":424},[418,956,829],{"class":445},[418,958,442],{"class":424},[418,960,451],{"class":424},[418,962,963,965,967,970,972,974,976,978,980,982,984,987,989,991,993,995,997,999],{"class":420,"line":482},[418,964,606],{"class":424},[418,966,625],{"class":428},[418,968,969],{"class":432}," v-if",[418,971,439],{"class":424},[418,973,442],{"class":424},[418,975,347],{"class":445},[418,977,442],{"class":424},[418,979,628],{"class":432},[418,981,439],{"class":424},[418,983,442],{"class":424},[418,985,986],{"class":445},"← Back",[418,988,442],{"class":424},[418,990,726],{"class":432},[418,992,439],{"class":424},[418,994,442],{"class":424},[418,996,895],{"class":445},[418,998,442],{"class":424},[418,1000,640],{"class":424},[418,1002,1003,1005,1008,1010,1013,1015,1017],{"class":420,"line":513},[418,1004,606],{"class":424},[418,1006,1007],{"class":428},"text",[418,1009,804],{"class":424},[418,1011,1012],{"class":464},"Delete item?",[418,1014,547],{"class":424},[418,1016,1007],{"class":428},[418,1018,451],{"class":424},[418,1020,1021,1023,1025],{"class":420,"line":520},[418,1022,857],{"class":424},[418,1024,395],{"class":428},[418,1026,451],{"class":424},[418,1028,1029,1031,1033],{"class":420,"line":544},[418,1030,547],{"class":424},[418,1032,564],{"class":428},[418,1034,451],{"class":424},[883,1036,1038],{"id":1037},"persistent-footer","Persistent footer",[324,1040,873,1041,1044],{},[327,1042,1043],{},"#footer"," slot mounts outside the morphing region, so it stays put — it does not unmount or re-animate as views change. Ideal for a primary action or a Close button that should be present on every view.",[409,1046,1048],{"className":411,"code":1047,"language":413,"meta":414,"style":414},"\u003Ctemplate #footer=\"{ close }\">\n  \u003CVyButton label=\"Close\" block @tap=\"close()\" \u002F>\n\u003C\u002Ftemplate>\n",[327,1049,1050,1076,1109],{"__ignoreMap":414},[418,1051,1052,1054,1056,1058,1061,1063,1065,1067,1070,1072,1074],{"class":420,"line":421},[418,1053,425],{"class":424},[418,1055,564],{"class":428},[418,1057,611],{"class":424},[418,1059,1060],{"class":432},"footer",[418,1062,439],{"class":424},[418,1064,442],{"class":424},[418,1066,674],{"class":424},[418,1068,1069],{"class":464}," close ",[418,1071,680],{"class":424},[418,1073,442],{"class":424},[418,1075,451],{"class":424},[418,1077,1078,1080,1082,1084,1086,1088,1091,1093,1096,1098,1100,1102,1105,1107],{"class":420,"line":454},[418,1079,572],{"class":424},[418,1081,625],{"class":428},[418,1083,628],{"class":432},[418,1085,439],{"class":424},[418,1087,442],{"class":424},[418,1089,1090],{"class":445},"Close",[418,1092,442],{"class":424},[418,1094,1095],{"class":432}," block",[418,1097,726],{"class":432},[418,1099,439],{"class":424},[418,1101,442],{"class":424},[418,1103,1104],{"class":445},"close()",[418,1106,442],{"class":424},[418,1108,640],{"class":424},[418,1110,1111,1113,1115],{"class":420,"line":482},[418,1112,547],{"class":424},[418,1114,564],{"class":428},[418,1116,451],{"class":424},[883,1118,1120],{"id":1119},"floating-and-flush-variants","Floating and flush variants",[324,1122,1123,1126,1127,1130,1131,1134,1135,1137],{},[327,1124,1125],{},"variant"," sets the panel chrome. ",[327,1128,1129],{},"floating"," (the default) is a detached card that hovers with a gap and a border on all sides — the tray's signature look. ",[327,1132,1133],{},"flush"," anchors it to the screen edges with a rounded top only, matching a classic ",[327,1136,378],{}," silhouette.",[409,1139,1141],{"className":411,"code":1140,"language":413,"meta":414,"style":414},"\u003CVyTray v-model:open=\"open\" variant=\"floating\">…\u003C\u002FVyTray>\n\u003CVyTray v-model:open=\"open\" variant=\"flush\">…\u003C\u002FVyTray>\n",[327,1142,1143,1187],{"__ignoreMap":414},[418,1144,1145,1147,1149,1152,1155,1157,1159,1161,1163,1165,1168,1170,1172,1174,1176,1178,1181,1183,1185],{"class":420,"line":421},[418,1146,425],{"class":424},[418,1148,329],{"class":428},[418,1150,1151],{"class":432}," v-model",[418,1153,1154],{"class":424},":",[418,1156,584],{"class":432},[418,1158,439],{"class":424},[418,1160,442],{"class":424},[418,1162,584],{"class":464},[418,1164,442],{"class":424},[418,1166,1167],{"class":432}," variant",[418,1169,439],{"class":424},[418,1171,442],{"class":424},[418,1173,1129],{"class":445},[418,1175,442],{"class":424},[418,1177,804],{"class":424},[418,1179,1180],{"class":464},"…",[418,1182,547],{"class":424},[418,1184,329],{"class":428},[418,1186,451],{"class":424},[418,1188,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225],{"class":420,"line":454},[418,1190,425],{"class":424},[418,1192,329],{"class":428},[418,1194,1151],{"class":432},[418,1196,1154],{"class":424},[418,1198,584],{"class":432},[418,1200,439],{"class":424},[418,1202,442],{"class":424},[418,1204,584],{"class":464},[418,1206,442],{"class":424},[418,1208,1167],{"class":432},[418,1210,439],{"class":424},[418,1212,442],{"class":424},[418,1214,1133],{"class":445},[418,1216,442],{"class":424},[418,1218,804],{"class":424},[418,1220,1180],{"class":464},[418,1222,547],{"class":424},[418,1224,329],{"class":428},[418,1226,451],{"class":424},[883,1228,406],{"id":1229},"usetray",[324,1231,1232,1233,1236],{},"Any component rendered inside the tray can drive it imperatively with ",[327,1234,1235],{},"useTray()"," — handy for custom triggers or deep view bodies that shouldn't thread callbacks through props.",[409,1238,1240],{"className":411,"code":1239,"language":413,"meta":414,"style":414},"\u003Cscript setup lang=\"ts\">\nimport { useTray } from '@vyui\u002Fkit'\n\nconst tray = useTray()\n\u002F\u002F tray.setView('confirm'); tray.goBack(); tray.close()\n\u003C\u002Fscript>\n",[327,1241,1242,1262,1281,1285,1299,1305],{"__ignoreMap":414},[418,1243,1244,1246,1248,1250,1252,1254,1256,1258,1260],{"class":420,"line":421},[418,1245,425],{"class":424},[418,1247,429],{"class":428},[418,1249,433],{"class":432},[418,1251,436],{"class":432},[418,1253,439],{"class":424},[418,1255,442],{"class":424},[418,1257,446],{"class":445},[418,1259,442],{"class":424},[418,1261,451],{"class":424},[418,1263,1264,1266,1268,1271,1273,1275,1277,1279],{"class":420,"line":454},[418,1265,458],{"class":457},[418,1267,461],{"class":424},[418,1269,1270],{"class":464}," useTray",[418,1272,468],{"class":424},[418,1274,471],{"class":457},[418,1276,474],{"class":424},[418,1278,36],{"class":445},[418,1280,479],{"class":424},[418,1282,1283],{"class":420,"line":482},[418,1284,517],{"emptyLinePlaceholder":516},[418,1286,1287,1289,1292,1294,1296],{"class":420,"line":513},[418,1288,523],{"class":432},[418,1290,1291],{"class":464}," tray ",[418,1293,439],{"class":424},[418,1295,1270],{"class":531},[418,1297,1298],{"class":464},"()\n",[418,1300,1301],{"class":420,"line":520},[418,1302,1304],{"class":1303},"sHwdD","\u002F\u002F tray.setView('confirm'); tray.goBack(); tray.close()\n",[418,1306,1307,1309,1311],{"class":420,"line":544},[418,1308,547],{"class":424},[418,1310,429],{"class":428},[418,1312,451],{"class":424},[883,1314,1316],{"id":1315},"keyboard-awareness","Keyboard awareness",[324,1318,1319,1320,1323,1324,1327,1328,1331,1332,1335],{},"Set ",[327,1321,1322],{},"keyboard-aware"," and the whole panel rises above the on-screen keyboard when an input inside it gains focus (Lynx; no-op on web). Because the panel is bottom-anchored and hugs its content, the tray grows its bottom padding by the keyboard height — handle, body, and footer all clear the keyboard while the panel background fills in behind it. Any ",[327,1325,1326],{},"VyInput"," or ",[327,1329,1330],{},"VyTextarea"," in the body ",[332,1333,1334],{},"or"," footer registers itself automatically; no per-input wrapping.",[409,1337,1339],{"className":411,"code":1338,"language":413,"meta":414,"style":414},"\u003CVyTray v-model:open=\"open\" keyboard-aware=\"lift\">\n  \u003CVyInput v-model=\"reply\" placeholder=\"Type a reply…\" \u002F>\n  \u003Ctemplate #footer=\"{ close }\">\n    \u003CVyButton label=\"Send\" block @tap=\"close()\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FVyTray>\n",[327,1340,1341,1375,1380,1385,1390,1395],{"__ignoreMap":414},[418,1342,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1364,1366,1368,1371,1373],{"class":420,"line":421},[418,1344,425],{"class":424},[418,1346,329],{"class":428},[418,1348,1151],{"class":432},[418,1350,1154],{"class":424},[418,1352,584],{"class":432},[418,1354,439],{"class":424},[418,1356,442],{"class":424},[418,1358,584],{"class":464},[418,1360,442],{"class":424},[418,1362,1363],{"class":432}," keyboard-aware",[418,1365,439],{"class":424},[418,1367,442],{"class":424},[418,1369,1370],{"class":445},"lift",[418,1372,442],{"class":424},[418,1374,451],{"class":424},[418,1376,1377],{"class":420,"line":454},[418,1378,1379],{"class":464},"  \u003CVyInput v-model=\"reply\" placeholder=\"Type a reply…\" \u002F>\n",[418,1381,1382],{"class":420,"line":482},[418,1383,1384],{"class":464},"  \u003Ctemplate #footer=\"{ close }\">\n",[418,1386,1387],{"class":420,"line":513},[418,1388,1389],{"class":464},"    \u003CVyButton label=\"Send\" block @tap=\"close()\" \u002F>\n",[418,1391,1392],{"class":420,"line":520},[418,1393,1394],{"class":464},"  \u003C\u002Ftemplate>\n",[418,1396,1397,1399,1401],{"class":420,"line":544},[418,1398,547],{"class":424},[418,1400,329],{"class":428},[418,1402,451],{"class":424},[324,1404,1405],{},"Two modes:",[1407,1408,1409,1416],"ul",{},[1410,1411,1412,1415],"li",{},[327,1413,1414],{},"keyboard-aware=\"lift\""," — rise only. Right for short and medium trays whose content fits above the keyboard.",[1410,1417,1418,1420,1421,1424],{},[327,1419,1322],{}," \u002F ",[327,1422,1423],{},"keyboard-aware=\"scroll\""," — rise, plus the body becomes a keyboard-aware scroll region that keeps the focused input in view. Right for tall content like a multi-field form.",[355,1426,1428],{"icon":1427},"i-lucide-ruler",[324,1429,1430,1431,1434,1435,1438],{},"The scroll region only scrolls once its height is bounded — cap it through the ",[327,1432,1433],{},"bodyScroll"," ui slot (e.g. ",[327,1436,1437],{},":ui=\"{ bodyScroll: 'max-h-80' }\"","). Left unbounded, the tray hugs its content and there is nothing to scroll.",[409,1440,1442],{"className":411,"code":1441,"language":413,"meta":414,"style":414},"\u003CVyTray v-model:open=\"open\" keyboard-aware :ui=\"{ bodyScroll: 'max-h-80' }\">\n  \u003CVyInput v-model=\"form.name\" placeholder=\"Name\" \u002F>\n  \u003CVyTextarea v-model=\"form.bio\" placeholder=\"Bio\" \u002F>\n  \u003CVyInput v-model=\"form.website\" placeholder=\"Website\" \u002F>\n  \u003Ctemplate #footer>\n    \u003CVyInput v-model=\"form.note\" placeholder=\"Footer note\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FVyTray>\n",[327,1443,1444,1497,1502,1507,1512,1517,1522,1526],{"__ignoreMap":414},[418,1445,1446,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466,1469,1472,1474,1476,1478,1481,1483,1485,1488,1491,1493,1495],{"class":420,"line":421},[418,1447,425],{"class":424},[418,1449,329],{"class":428},[418,1451,1151],{"class":432},[418,1453,1154],{"class":424},[418,1455,584],{"class":432},[418,1457,439],{"class":424},[418,1459,442],{"class":424},[418,1461,584],{"class":464},[418,1463,442],{"class":424},[418,1465,1363],{"class":432},[418,1467,1468],{"class":424}," :",[418,1470,1471],{"class":432},"ui",[418,1473,439],{"class":424},[418,1475,442],{"class":424},[418,1477,674],{"class":424},[418,1479,1480],{"class":428}," bodyScroll",[418,1482,1154],{"class":424},[418,1484,474],{"class":424},[418,1486,1487],{"class":445},"max-h-80",[418,1489,1490],{"class":424},"'",[418,1492,468],{"class":424},[418,1494,442],{"class":424},[418,1496,451],{"class":424},[418,1498,1499],{"class":420,"line":454},[418,1500,1501],{"class":464},"  \u003CVyInput v-model=\"form.name\" placeholder=\"Name\" \u002F>\n",[418,1503,1504],{"class":420,"line":482},[418,1505,1506],{"class":464},"  \u003CVyTextarea v-model=\"form.bio\" placeholder=\"Bio\" \u002F>\n",[418,1508,1509],{"class":420,"line":513},[418,1510,1511],{"class":464},"  \u003CVyInput v-model=\"form.website\" placeholder=\"Website\" \u002F>\n",[418,1513,1514],{"class":420,"line":520},[418,1515,1516],{"class":464},"  \u003Ctemplate #footer>\n",[418,1518,1519],{"class":420,"line":544},[418,1520,1521],{"class":464},"    \u003CVyInput v-model=\"form.note\" placeholder=\"Footer note\" \u002F>\n",[418,1523,1524],{"class":420,"line":554},[418,1525,1394],{"class":464},[418,1527,1528,1530,1532],{"class":420,"line":559},[418,1529,547],{"class":424},[418,1531,329],{"class":428},[418,1533,451],{"class":424},[319,1535,1537],{"id":1536},"features-and-behavior","Features and behavior",[1407,1539,1540,1547,1569,1575,1581],{},[1410,1541,1542,1543,1546],{},"The panel height morphs between views via CSS ",[327,1544,1545],{},"transition: height","; measured per view, so content of any height is supported.",[1410,1548,1549,1551,1552,1555,1556,1420,1559,1562,1563,1420,1566,881],{},[327,1550,584],{}," and ",[327,1553,1554],{},"view"," are controllable through ",[327,1557,1558],{},"v-model:open",[327,1560,1561],{},"v-model:view"," and default through ",[327,1564,1565],{},"default-open",[327,1567,1568],{},"default-view",[1410,1570,1571,1572,1574],{},"Only the active ",[327,1573,395],{}," mounts — inactive views (and their state) unmount.",[1410,1576,1577,1578,1580],{},"Closing resets navigation to ",[327,1579,880],{}," and clears the back stack, so a reopen starts clean.",[1410,1582,1583,1584,1586,1587,1590,1591,1593],{},"Drag-to-close, the slide-in\u002Fout, and the backdrop are inherited from the core ",[327,1585,231],{}," engine; set ",[327,1588,1589],{},"dismissible"," to ",[327,1592,538],{}," to keep it open until dismissed in code.",[319,1595,1597],{"id":1596},"props","Props",[1599,1600],"component-props",{"name":289},[883,1602,395],{"id":1603},"vytrayview",[1599,1605],{"name":1606},"TrayView",[319,1608,1610],{"id":1609},"emits","Emits",[1612,1613],"component-emits",{"name":289},[319,1615,1617],{"id":1616},"slots","Slots",[1619,1620],"component-slots",{"name":289},[319,1622,1624],{"id":1623},"styling-and-theming","Styling and theming",[324,1626,1627,1628,1631,1632,1634],{},"Override globally through ",[327,1629,1630],{},"appConfig.ui.tray"," or locally with the ",[327,1633,1471],{}," prop.",[1636,1637,1638,1651],"table",{},[1639,1640,1641],"thead",{},[1642,1643,1644,1648],"tr",{},[1645,1646,1647],"th",{},"UI slot",[1645,1649,1650],{},"Purpose",[1652,1653,1654,1665,1678,1688,1705,1715,1725,1750],"tbody",{},[1642,1655,1656,1662],{},[1657,1658,1659],"td",{},[327,1660,1661],{},"overlay",[1657,1663,1664],{},"The dim backdrop behind the panel.",[1642,1666,1667,1672],{},[1657,1668,1669],{},[327,1670,1671],{},"content",[1657,1673,1674,1675,1677],{},"The sheet panel. Carries the ",[327,1676,1125],{}," chrome (inset\u002Fborder\u002Fradius).",[1642,1679,1680,1685],{},[1657,1681,1682],{},[327,1683,1684],{},"handle",[1657,1686,1687],{},"The drag pill at the top of the panel.",[1642,1689,1690,1695],{},[1657,1691,1692],{},[327,1693,1694],{},"morph",[1657,1696,1697,1698,1701,1702,1634],{},"The height-animated container. Its ",[327,1699,1700],{},"transition-duration"," comes from the ",[327,1703,1704],{},"duration",[1642,1706,1707,1712],{},[1657,1708,1709],{},[327,1710,1711],{},"viewport",[1657,1713,1714],{},"Inner wrapper measured to drive the morph.",[1642,1716,1717,1722],{},[1657,1718,1719],{},[327,1720,1721],{},"body",[1657,1723,1724],{},"Padding around the active view.",[1642,1726,1727,1731],{},[1657,1728,1729],{},[327,1730,1433],{},[1657,1732,1733,1734,1737,1738,1741,1742,1745,1746,1749],{},"The keyboard-aware ",[327,1735,1736],{},"\u003Cscroll-view>"," around the body (rendered when ",[327,1739,1740],{},"keyboardAware"," is ",[327,1743,1744],{},"'scroll'","\u002F",[327,1747,1748],{},"true","). Cap its height here.",[1642,1751,1752,1756],{},[1657,1753,1754],{},[327,1755,1060],{},[1657,1757,1758],{},"The persistent footer region.",[319,1760,299],{"id":1761},"accessibility",[324,1763,1764,1765,1768,1769,1772,1773,1775],{},"The panel announces as a dialog and traps focus, inherited from the core ",[327,1766,1767],{},"SheetContent",". Give icon-only navigation controls an ",[327,1770,1771],{},"accessibility-label",", and make sure a Back control is reachable when ",[327,1774,347],{}," is true. Because views mount and unmount as you navigate, test the morphing flow with VoiceOver and TalkBack to confirm focus lands sensibly on each view.",[319,1777,1779],{"id":1778},"platform-notes","Platform notes",[1407,1781,1782,1796,1808,1813],{},[1410,1783,1784,1785,1788,1789,1792,1793,1795],{},"The height morph relies on animating between concrete pixel heights; Lynx animates ",[327,1786,1787],{},"height"," via CSS ",[327,1790,1791],{},"transition"," (not via main-thread style writes), which is what ",[327,1794,329],{}," uses under the hood.",[1410,1797,1798,1799,1802,1803,1807],{},"The keyboard rise is driven by the focused input's per-element ",[327,1800,1801],{},"keyboard"," event — the reliable keyboard signal under vue-lynx (see ",[364,1804,1805],{"href":157},[327,1806,156],{},"). It is applied as panel padding rather than a transform so it cannot fight the sheet's main-thread drag physics.",[1410,1809,1810,1812],{},[327,1811,1129],{}," positions the panel with inset utilities that override the core edge-anchored sheet rules; on Lynx the later-injected utilities win.",[1410,1814,1815,1816,1818,1819,1823],{},"Open\u002Fclose motion and drag physics come from the core ",[327,1817,231],{}," primitives — see ",[364,1820,1821],{"href":232},[327,1822,231],{}," for the underlying behavior.",[319,1825,1827],{"id":1826},"related-components","Related components",[1407,1829,1830,1837,1843,1850],{},[1410,1831,1832,1836],{},[364,1833,1834],{"href":375},[327,1835,378],{}," for a fixed-height, snap-point bottom sheet.",[1410,1838,1839,385],{},[364,1840,1841],{"href":64},[327,1842,63],{},[1410,1844,1845,1849],{},[364,1846,1847],{"href":167},[327,1848,166],{}," for a centered blocking dialog.",[1410,1851,1852,1856],{},[364,1853,1854],{"href":143},[327,1855,142],{}," for a floating pill that morphs and expands in place.",[1858,1859,1860],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":414,"searchDepth":421,"depth":454,"links":1862},[1863,1864,1871,1872,1875,1876,1877,1878,1879,1880],{"id":321,"depth":454,"text":322},{"id":388,"depth":454,"text":389,"children":1865},[1866,1867,1868,1869,1870],{"id":885,"depth":482,"text":886},{"id":1037,"depth":482,"text":1038},{"id":1119,"depth":482,"text":1120},{"id":1229,"depth":482,"text":406},{"id":1315,"depth":482,"text":1316},{"id":1536,"depth":454,"text":1537},{"id":1596,"depth":454,"text":1597,"children":1873},[1874],{"id":1603,"depth":482,"text":395},{"id":1609,"depth":454,"text":1610},{"id":1616,"depth":454,"text":1617},{"id":1623,"depth":454,"text":1624},{"id":1761,"depth":454,"text":299},{"id":1778,"depth":454,"text":1779},{"id":1826,"depth":454,"text":1827},"A morphing multi-view bottom sheet that grows to fit each view.","md",[1884],{"label":1885,"icon":1886,"to":1887,"target":1888},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FTray.vue","_blank",{},{"icon":292},{"title":289,"description":1881},"3XxZWKtGRa8tx2_JqAgJJ-jX50YMitTq_WEHxPqyBMo",[1894,1896],{"title":285,"path":286,"stem":287,"description":1895,"icon":-1,"children":-1,"navigation":-1},"Select one or multiple values from a connected set of toggles.",{"title":294,"path":295,"stem":296,"description":1897,"icon":-1,"children":-1,"navigation":-1},"Override any Vy UI component slot, variant, or default via Tailwind Variants — full theme control without fighting the library.",1783464067265]