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