[{"data":1,"prerenderedAt":2077},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Ftray":460,"\u002Fcomponents\u002Ftray-surround":2072},[4,34,51,301,327,332,337,406],{"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",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,437,441,446,450,455],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Why use Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":433,"path":434,"stem":435,"package":11,"icon":436},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":438,"path":439,"stem":440,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":442,"path":443,"stem":444,"package":11,"icon":445},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":447,"path":448,"stem":449,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":461,"title":297,"body":462,"description":2060,"extension":2061,"links":2062,"meta":2068,"navigation":2069,"package":63,"path":298,"seo":2070,"stem":299,"__hash__":2071},"docs\u002F3.components\u002Ftray.md",{"type":463,"value":464,"toc":2040},"minimark",[465,470,496,501,533,537,554,1049,1060,1065,1081,1214,1218,1224,1296,1300,1317,1406,1409,1416,1492,1496,1515,1582,1585,1604,1618,1713,1717,1773,1777,1780,1783,1786,1790,1793,1797,1800,1804,1814,1938,1941,1955,1959,2003,2007,2036],[466,467,469],"h2",{"id":468},"overview","Overview",[471,472,473,477,478,482,483,487,488,491,492,495],"p",{},[474,475,476],"code",{},"VyTray"," is a bottom sheet that hosts several named ",[479,480,481],"strong",{},"views"," and animates its height to fit whichever one is showing — the panel ",[484,485,486],"em",{},"grows into place"," as you navigate rather than jumping. A back stack (",[474,489,490],{},"goBack",", ",[474,493,494],{},"canGoBack",") makes it a natural home for short, branching flows: a menu that drills into a detail, a confirm step, a quick form.",[497,498],"component-code",{"height":499,"name":500},"420px","tray-example",[502,503,504],"callout",{"icon":44},[471,505,506,507,509,510,515,516,519,520,526,527,532],{},"Built on the ",[474,508,41],{}," ",[511,512,513],"a",{"href":240},[474,514,239],{}," primitives in ",[474,517,518],{},"fitContent"," mode, so the panel hugs its content. Reach for ",[511,521,523],{"href":522},"\u002Fcomponents\u002Fdrawer",[474,524,525],{},"Drawer"," instead when you want a fixed-height, snap-point sheet, or ",[511,528,529],{"href":67},[474,530,531],{},"ActionSheet"," for a simple list of actions.",[466,534,536],{"id":535},"usage","Usage",[471,538,539,540,543,544,547,548,553],{},"Give each screen a ",[474,541,542],{},"VyTrayView"," with a unique ",[474,545,546],{},"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 ",[511,549,551],{"href":550},"#usetray",[474,552,384],{},").",[555,556,561],"pre",{"className":557,"code":558,"language":559,"meta":560,"style":560},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyButton } from '@vyui\u002Fkit\u002Fbutton'\nimport { VyTray } from '@vyui\u002Fkit\u002Ftray'\nimport { VyTrayView } from '@vyui\u002Fkit\u002Ftray-view'\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","",[474,562,563,598,626,647,668,689,696,720,730,735,745,779,795,819,829,834,863,883,916,947,957,962,992,1021,1030,1040],{"__ignoreMap":560},[564,565,568,572,576,580,583,586,589,593,595],"span",{"class":566,"line":567},"line",1,[564,569,571],{"class":570},"sMK4o","\u003C",[564,573,575],{"class":574},"swJcz","script",[564,577,579],{"class":578},"spNyl"," setup",[564,581,582],{"class":578}," lang",[564,584,585],{"class":570},"=",[564,587,588],{"class":570},"\"",[564,590,592],{"class":591},"sfazB","ts",[564,594,588],{"class":570},[564,596,597],{"class":570},">\n",[564,599,601,605,608,612,615,618,621,623],{"class":566,"line":600},2,[564,602,604],{"class":603},"s7zQu","import",[564,606,607],{"class":570}," {",[564,609,611],{"class":610},"sTEyZ"," ref",[564,613,614],{"class":570}," }",[564,616,617],{"class":603}," from",[564,619,620],{"class":570}," '",[564,622,559],{"class":591},[564,624,625],{"class":570},"'\n",[564,627,629,631,633,636,638,640,642,645],{"class":566,"line":628},3,[564,630,604],{"class":603},[564,632,607],{"class":570},[564,634,635],{"class":610}," VyButton",[564,637,614],{"class":570},[564,639,617],{"class":603},[564,641,620],{"class":570},[564,643,644],{"class":591},"@vyui\u002Fkit\u002Fbutton",[564,646,625],{"class":570},[564,648,650,652,654,657,659,661,663,666],{"class":566,"line":649},4,[564,651,604],{"class":603},[564,653,607],{"class":570},[564,655,656],{"class":610}," VyTray",[564,658,614],{"class":570},[564,660,617],{"class":603},[564,662,620],{"class":570},[564,664,665],{"class":591},"@vyui\u002Fkit\u002Ftray",[564,667,625],{"class":570},[564,669,671,673,675,678,680,682,684,687],{"class":566,"line":670},5,[564,672,604],{"class":603},[564,674,607],{"class":570},[564,676,677],{"class":610}," VyTrayView",[564,679,614],{"class":570},[564,681,617],{"class":603},[564,683,620],{"class":570},[564,685,686],{"class":591},"@vyui\u002Fkit\u002Ftray-view",[564,688,625],{"class":570},[564,690,692],{"class":566,"line":691},6,[564,693,695],{"emptyLinePlaceholder":694},true,"\n",[564,697,699,702,705,707,710,713,717],{"class":566,"line":698},7,[564,700,701],{"class":578},"const",[564,703,704],{"class":610}," open ",[564,706,585],{"class":570},[564,708,611],{"class":709},"s2Zo4",[564,711,712],{"class":610},"(",[564,714,716],{"class":715},"sfNiH","false",[564,718,719],{"class":610},")\n",[564,721,723,726,728],{"class":566,"line":722},8,[564,724,725],{"class":570},"\u003C\u002F",[564,727,575],{"class":574},[564,729,597],{"class":570},[564,731,733],{"class":566,"line":732},9,[564,734,695],{"emptyLinePlaceholder":694},[564,736,738,740,743],{"class":566,"line":737},10,[564,739,571],{"class":570},[564,741,742],{"class":574},"template",[564,744,597],{"class":570},[564,746,748,751,753,756,758,760,763,765,768,770,772,775,777],{"class":566,"line":747},11,[564,749,750],{"class":570},"  \u003C",[564,752,476],{"class":574},[564,754,755],{"class":578}," v-model:open",[564,757,585],{"class":570},[564,759,588],{"class":570},[564,761,762],{"class":591},"open",[564,764,588],{"class":570},[564,766,767],{"class":578}," default-view",[564,769,585],{"class":570},[564,771,588],{"class":570},[564,773,774],{"class":591},"menu",[564,776,588],{"class":570},[564,778,597],{"class":570},[564,780,782,785,787,790,793],{"class":566,"line":781},12,[564,783,784],{"class":570},"    \u003C",[564,786,742],{"class":574},[564,788,789],{"class":570}," #",[564,791,792],{"class":578},"trigger",[564,794,597],{"class":570},[564,796,798,801,804,807,809,811,814,816],{"class":566,"line":797},13,[564,799,800],{"class":570},"      \u003C",[564,802,803],{"class":574},"VyButton",[564,805,806],{"class":578}," label",[564,808,585],{"class":570},[564,810,588],{"class":570},[564,812,813],{"class":591},"Open tray",[564,815,588],{"class":570},[564,817,818],{"class":570}," \u002F>\n",[564,820,822,825,827],{"class":566,"line":821},14,[564,823,824],{"class":570},"    \u003C\u002F",[564,826,742],{"class":574},[564,828,597],{"class":570},[564,830,832],{"class":566,"line":831},15,[564,833,695],{"emptyLinePlaceholder":694},[564,835,837,839,841,843,846,848,850,853,856,859,861],{"class":566,"line":836},16,[564,838,784],{"class":570},[564,840,742],{"class":574},[564,842,789],{"class":570},[564,844,845],{"class":578},"default",[564,847,585],{"class":570},[564,849,588],{"class":570},[564,851,852],{"class":570},"{",[564,854,855],{"class":610}," setView ",[564,857,858],{"class":570},"}",[564,860,588],{"class":570},[564,862,597],{"class":570},[564,864,866,868,870,873,875,877,879,881],{"class":566,"line":865},17,[564,867,800],{"class":570},[564,869,542],{"class":574},[564,871,872],{"class":578}," id",[564,874,585],{"class":570},[564,876,588],{"class":570},[564,878,774],{"class":591},[564,880,588],{"class":570},[564,882,597],{"class":570},[564,884,886,889,891,893,895,897,900,902,905,907,909,912,914],{"class":566,"line":885},18,[564,887,888],{"class":570},"        \u003C",[564,890,803],{"class":574},[564,892,806],{"class":578},[564,894,585],{"class":570},[564,896,588],{"class":570},[564,898,899],{"class":591},"Share",[564,901,588],{"class":570},[564,903,904],{"class":578}," @tap",[564,906,585],{"class":570},[564,908,588],{"class":570},[564,910,911],{"class":591},"setView('share')",[564,913,588],{"class":570},[564,915,818],{"class":570},[564,917,919,921,923,925,927,929,932,934,936,938,940,943,945],{"class":566,"line":918},19,[564,920,888],{"class":570},[564,922,803],{"class":574},[564,924,806],{"class":578},[564,926,585],{"class":570},[564,928,588],{"class":570},[564,930,931],{"class":591},"Delete",[564,933,588],{"class":570},[564,935,904],{"class":578},[564,937,585],{"class":570},[564,939,588],{"class":570},[564,941,942],{"class":591},"setView('confirm')",[564,944,588],{"class":570},[564,946,818],{"class":570},[564,948,950,953,955],{"class":566,"line":949},20,[564,951,952],{"class":570},"      \u003C\u002F",[564,954,542],{"class":574},[564,956,597],{"class":570},[564,958,960],{"class":566,"line":959},21,[564,961,695],{"emptyLinePlaceholder":694},[564,963,965,967,969,971,973,975,978,980,983,986,988,990],{"class":566,"line":964},22,[564,966,800],{"class":570},[564,968,542],{"class":574},[564,970,872],{"class":578},[564,972,585],{"class":570},[564,974,588],{"class":570},[564,976,977],{"class":591},"share",[564,979,588],{"class":570},[564,981,982],{"class":570},">",[564,984,985],{"class":610},"…a taller view; the tray grows…",[564,987,725],{"class":570},[564,989,542],{"class":574},[564,991,597],{"class":570},[564,993,995,997,999,1001,1003,1005,1008,1010,1012,1015,1017,1019],{"class":566,"line":994},23,[564,996,800],{"class":570},[564,998,542],{"class":574},[564,1000,872],{"class":578},[564,1002,585],{"class":570},[564,1004,588],{"class":570},[564,1006,1007],{"class":591},"confirm",[564,1009,588],{"class":570},[564,1011,982],{"class":570},[564,1013,1014],{"class":610},"…a short view; the tray shrinks…",[564,1016,725],{"class":570},[564,1018,542],{"class":574},[564,1020,597],{"class":570},[564,1022,1024,1026,1028],{"class":566,"line":1023},24,[564,1025,824],{"class":570},[564,1027,742],{"class":574},[564,1029,597],{"class":570},[564,1031,1033,1036,1038],{"class":566,"line":1032},25,[564,1034,1035],{"class":570},"  \u003C\u002F",[564,1037,476],{"class":574},[564,1039,597],{"class":570},[564,1041,1043,1045,1047],{"class":566,"line":1042},26,[564,1044,725],{"class":570},[564,1046,742],{"class":574},[564,1048,597],{"class":570},[471,1050,1051,1052,1055,1056,1059],{},"The ",[474,1053,1054],{},"#trigger"," slot renders in normal flow; tapping it opens the tray to ",[474,1057,1058],{},"defaultView",".",[1061,1062,1064],"h3",{"id":1063},"navigation-and-the-back-stack","Navigation and the back stack",[471,1066,1067,1070,1071,1074,1075,1077,1078,1059],{},[474,1068,1069],{},"setView(id)"," pushes the current view onto a history stack; ",[474,1072,1073],{},"goBack()"," pops it. ",[474,1076,494],{}," 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 ",[474,1079,1080],{},"{ open, close, setView, goBack, visible, view, canGoBack }",[555,1082,1084],{"className":557,"code":1083,"language":559,"meta":560,"style":560},"\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",[474,1085,1086,1122,1140,1180,1198,1206],{"__ignoreMap":560},[564,1087,1088,1090,1092,1094,1096,1098,1100,1102,1105,1108,1111,1113,1116,1118,1120],{"class":566,"line":567},[564,1089,571],{"class":570},[564,1091,742],{"class":574},[564,1093,789],{"class":570},[564,1095,845],{"class":578},[564,1097,585],{"class":570},[564,1099,588],{"class":570},[564,1101,852],{"class":570},[564,1103,1104],{"class":610}," setView",[564,1106,1107],{"class":570},",",[564,1109,1110],{"class":610}," goBack",[564,1112,1107],{"class":570},[564,1114,1115],{"class":610}," canGoBack ",[564,1117,858],{"class":570},[564,1119,588],{"class":570},[564,1121,597],{"class":570},[564,1123,1124,1126,1128,1130,1132,1134,1136,1138],{"class":566,"line":600},[564,1125,750],{"class":570},[564,1127,542],{"class":574},[564,1129,872],{"class":578},[564,1131,585],{"class":570},[564,1133,588],{"class":570},[564,1135,1007],{"class":591},[564,1137,588],{"class":570},[564,1139,597],{"class":570},[564,1141,1142,1144,1146,1149,1151,1153,1155,1157,1159,1161,1163,1166,1168,1170,1172,1174,1176,1178],{"class":566,"line":628},[564,1143,784],{"class":570},[564,1145,803],{"class":574},[564,1147,1148],{"class":578}," v-if",[564,1150,585],{"class":570},[564,1152,588],{"class":570},[564,1154,494],{"class":591},[564,1156,588],{"class":570},[564,1158,806],{"class":578},[564,1160,585],{"class":570},[564,1162,588],{"class":570},[564,1164,1165],{"class":591},"← Back",[564,1167,588],{"class":570},[564,1169,904],{"class":578},[564,1171,585],{"class":570},[564,1173,588],{"class":570},[564,1175,1073],{"class":591},[564,1177,588],{"class":570},[564,1179,818],{"class":570},[564,1181,1182,1184,1187,1189,1192,1194,1196],{"class":566,"line":649},[564,1183,784],{"class":570},[564,1185,1186],{"class":574},"text",[564,1188,982],{"class":570},[564,1190,1191],{"class":610},"Delete item?",[564,1193,725],{"class":570},[564,1195,1186],{"class":574},[564,1197,597],{"class":570},[564,1199,1200,1202,1204],{"class":566,"line":670},[564,1201,1035],{"class":570},[564,1203,542],{"class":574},[564,1205,597],{"class":570},[564,1207,1208,1210,1212],{"class":566,"line":691},[564,1209,725],{"class":570},[564,1211,742],{"class":574},[564,1213,597],{"class":570},[1061,1215,1217],{"id":1216},"persistent-footer","Persistent footer",[471,1219,1051,1220,1223],{},[474,1221,1222],{},"#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.",[555,1225,1227],{"className":557,"code":1226,"language":559,"meta":560,"style":560},"\u003Ctemplate #footer=\"{ close }\">\n  \u003CVyButton label=\"Close\" block @tap=\"close()\" \u002F>\n\u003C\u002Ftemplate>\n",[474,1228,1229,1255,1288],{"__ignoreMap":560},[564,1230,1231,1233,1235,1237,1240,1242,1244,1246,1249,1251,1253],{"class":566,"line":567},[564,1232,571],{"class":570},[564,1234,742],{"class":574},[564,1236,789],{"class":570},[564,1238,1239],{"class":578},"footer",[564,1241,585],{"class":570},[564,1243,588],{"class":570},[564,1245,852],{"class":570},[564,1247,1248],{"class":610}," close ",[564,1250,858],{"class":570},[564,1252,588],{"class":570},[564,1254,597],{"class":570},[564,1256,1257,1259,1261,1263,1265,1267,1270,1272,1275,1277,1279,1281,1284,1286],{"class":566,"line":600},[564,1258,750],{"class":570},[564,1260,803],{"class":574},[564,1262,806],{"class":578},[564,1264,585],{"class":570},[564,1266,588],{"class":570},[564,1268,1269],{"class":591},"Close",[564,1271,588],{"class":570},[564,1273,1274],{"class":578}," block",[564,1276,904],{"class":578},[564,1278,585],{"class":570},[564,1280,588],{"class":570},[564,1282,1283],{"class":591},"close()",[564,1285,588],{"class":570},[564,1287,818],{"class":570},[564,1289,1290,1292,1294],{"class":566,"line":628},[564,1291,725],{"class":570},[564,1293,742],{"class":574},[564,1295,597],{"class":570},[1061,1297,1299],{"id":1298},"floating-and-flush-variants","Floating and flush variants",[471,1301,1302,1305,1306,1309,1310,1313,1314,1316],{},[474,1303,1304],{},"variant"," sets the panel chrome. ",[474,1307,1308],{},"floating"," (the default) is a detached card that hovers with a gap and a border on all sides — the tray's signature look. ",[474,1311,1312],{},"flush"," anchors it to the screen edges with a rounded top only, matching a classic ",[474,1315,525],{}," silhouette.",[555,1318,1320],{"className":557,"code":1319,"language":559,"meta":560,"style":560},"\u003CVyTray v-model:open=\"open\" variant=\"floating\">…\u003C\u002FVyTray>\n\u003CVyTray v-model:open=\"open\" variant=\"flush\">…\u003C\u002FVyTray>\n",[474,1321,1322,1366],{"__ignoreMap":560},[564,1323,1324,1326,1328,1331,1334,1336,1338,1340,1342,1344,1347,1349,1351,1353,1355,1357,1360,1362,1364],{"class":566,"line":567},[564,1325,571],{"class":570},[564,1327,476],{"class":574},[564,1329,1330],{"class":578}," v-model",[564,1332,1333],{"class":570},":",[564,1335,762],{"class":578},[564,1337,585],{"class":570},[564,1339,588],{"class":570},[564,1341,762],{"class":610},[564,1343,588],{"class":570},[564,1345,1346],{"class":578}," variant",[564,1348,585],{"class":570},[564,1350,588],{"class":570},[564,1352,1308],{"class":591},[564,1354,588],{"class":570},[564,1356,982],{"class":570},[564,1358,1359],{"class":610},"…",[564,1361,725],{"class":570},[564,1363,476],{"class":574},[564,1365,597],{"class":570},[564,1367,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404],{"class":566,"line":600},[564,1369,571],{"class":570},[564,1371,476],{"class":574},[564,1373,1330],{"class":578},[564,1375,1333],{"class":570},[564,1377,762],{"class":578},[564,1379,585],{"class":570},[564,1381,588],{"class":570},[564,1383,762],{"class":610},[564,1385,588],{"class":570},[564,1387,1346],{"class":578},[564,1389,585],{"class":570},[564,1391,588],{"class":570},[564,1393,1312],{"class":591},[564,1395,588],{"class":570},[564,1397,982],{"class":570},[564,1399,1359],{"class":610},[564,1401,725],{"class":570},[564,1403,476],{"class":574},[564,1405,597],{"class":570},[1061,1407,384],{"id":1408},"usetray",[471,1410,1411,1412,1415],{},"Any component rendered inside the tray can drive it imperatively with ",[474,1413,1414],{},"useTray()"," — handy for custom triggers or deep view bodies that shouldn't thread callbacks through props.",[555,1417,1419],{"className":557,"code":1418,"language":559,"meta":560,"style":560},"\u003Cscript setup lang=\"ts\">\nimport { useTray } from '@vyui\u002Fkit\u002Ftray'\n\nconst tray = useTray()\n\u002F\u002F tray.setView('confirm'); tray.goBack(); tray.close()\n\u003C\u002Fscript>\n",[474,1420,1421,1441,1460,1464,1478,1484],{"__ignoreMap":560},[564,1422,1423,1425,1427,1429,1431,1433,1435,1437,1439],{"class":566,"line":567},[564,1424,571],{"class":570},[564,1426,575],{"class":574},[564,1428,579],{"class":578},[564,1430,582],{"class":578},[564,1432,585],{"class":570},[564,1434,588],{"class":570},[564,1436,592],{"class":591},[564,1438,588],{"class":570},[564,1440,597],{"class":570},[564,1442,1443,1445,1447,1450,1452,1454,1456,1458],{"class":566,"line":600},[564,1444,604],{"class":603},[564,1446,607],{"class":570},[564,1448,1449],{"class":610}," useTray",[564,1451,614],{"class":570},[564,1453,617],{"class":603},[564,1455,620],{"class":570},[564,1457,665],{"class":591},[564,1459,625],{"class":570},[564,1461,1462],{"class":566,"line":628},[564,1463,695],{"emptyLinePlaceholder":694},[564,1465,1466,1468,1471,1473,1475],{"class":566,"line":649},[564,1467,701],{"class":578},[564,1469,1470],{"class":610}," tray ",[564,1472,585],{"class":570},[564,1474,1449],{"class":709},[564,1476,1477],{"class":610},"()\n",[564,1479,1480],{"class":566,"line":670},[564,1481,1483],{"class":1482},"sHwdD","\u002F\u002F tray.setView('confirm'); tray.goBack(); tray.close()\n",[564,1485,1486,1488,1490],{"class":566,"line":691},[564,1487,725],{"class":570},[564,1489,575],{"class":574},[564,1491,597],{"class":570},[1061,1493,1495],{"id":1494},"keyboard-awareness","Keyboard awareness",[471,1497,1498,1499,1502,1503,1506,1507,1510,1511,1514],{},"Set ",[474,1500,1501],{},"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 ",[474,1504,1505],{},"VyInput"," or ",[474,1508,1509],{},"VyTextarea"," in the body ",[479,1512,1513],{},"or"," footer registers itself automatically; no per-input wrapping.",[555,1516,1518],{"className":557,"code":1517,"language":559,"meta":560,"style":560},"\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",[474,1519,1520,1554,1559,1564,1569,1574],{"__ignoreMap":560},[564,1521,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1543,1545,1547,1550,1552],{"class":566,"line":567},[564,1523,571],{"class":570},[564,1525,476],{"class":574},[564,1527,1330],{"class":578},[564,1529,1333],{"class":570},[564,1531,762],{"class":578},[564,1533,585],{"class":570},[564,1535,588],{"class":570},[564,1537,762],{"class":610},[564,1539,588],{"class":570},[564,1541,1542],{"class":578}," keyboard-aware",[564,1544,585],{"class":570},[564,1546,588],{"class":570},[564,1548,1549],{"class":591},"lift",[564,1551,588],{"class":570},[564,1553,597],{"class":570},[564,1555,1556],{"class":566,"line":600},[564,1557,1558],{"class":610},"  \u003CVyInput v-model=\"reply\" placeholder=\"Type a reply…\" \u002F>\n",[564,1560,1561],{"class":566,"line":628},[564,1562,1563],{"class":610},"  \u003Ctemplate #footer=\"{ close }\">\n",[564,1565,1566],{"class":566,"line":649},[564,1567,1568],{"class":610},"    \u003CVyButton label=\"Send\" block @tap=\"close()\" \u002F>\n",[564,1570,1571],{"class":566,"line":670},[564,1572,1573],{"class":610},"  \u003C\u002Ftemplate>\n",[564,1575,1576,1578,1580],{"class":566,"line":691},[564,1577,725],{"class":570},[564,1579,476],{"class":574},[564,1581,597],{"class":570},[471,1583,1584],{},"Two modes:",[1586,1587,1588,1595],"ul",{},[1589,1590,1591,1594],"li",{},[474,1592,1593],{},"keyboard-aware=\"lift\""," — rise only. Right for short and medium trays whose content fits above the keyboard.",[1589,1596,1597,1599,1600,1603],{},[474,1598,1501],{}," \u002F ",[474,1601,1602],{},"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.",[502,1605,1607],{"icon":1606},"i-lucide-ruler",[471,1608,1609,1610,1613,1614,1617],{},"The scroll region only scrolls once its height is bounded — cap it through the ",[474,1611,1612],{},"bodyScroll"," ui slot (e.g. ",[474,1615,1616],{},":ui=\"{ bodyScroll: 'max-h-80' }\"","). Left unbounded, the tray hugs its content and there is nothing to scroll.",[555,1619,1621],{"className":557,"code":1620,"language":559,"meta":560,"style":560},"\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",[474,1622,1623,1676,1681,1686,1691,1696,1701,1705],{"__ignoreMap":560},[564,1624,1625,1627,1629,1631,1633,1635,1637,1639,1641,1643,1645,1648,1651,1653,1655,1657,1660,1662,1664,1667,1670,1672,1674],{"class":566,"line":567},[564,1626,571],{"class":570},[564,1628,476],{"class":574},[564,1630,1330],{"class":578},[564,1632,1333],{"class":570},[564,1634,762],{"class":578},[564,1636,585],{"class":570},[564,1638,588],{"class":570},[564,1640,762],{"class":610},[564,1642,588],{"class":570},[564,1644,1542],{"class":578},[564,1646,1647],{"class":570}," :",[564,1649,1650],{"class":578},"ui",[564,1652,585],{"class":570},[564,1654,588],{"class":570},[564,1656,852],{"class":570},[564,1658,1659],{"class":574}," bodyScroll",[564,1661,1333],{"class":570},[564,1663,620],{"class":570},[564,1665,1666],{"class":591},"max-h-80",[564,1668,1669],{"class":570},"'",[564,1671,614],{"class":570},[564,1673,588],{"class":570},[564,1675,597],{"class":570},[564,1677,1678],{"class":566,"line":600},[564,1679,1680],{"class":610},"  \u003CVyInput v-model=\"form.name\" placeholder=\"Name\" \u002F>\n",[564,1682,1683],{"class":566,"line":628},[564,1684,1685],{"class":610},"  \u003CVyTextarea v-model=\"form.bio\" placeholder=\"Bio\" \u002F>\n",[564,1687,1688],{"class":566,"line":649},[564,1689,1690],{"class":610},"  \u003CVyInput v-model=\"form.website\" placeholder=\"Website\" \u002F>\n",[564,1692,1693],{"class":566,"line":670},[564,1694,1695],{"class":610},"  \u003Ctemplate #footer>\n",[564,1697,1698],{"class":566,"line":691},[564,1699,1700],{"class":610},"    \u003CVyInput v-model=\"form.note\" placeholder=\"Footer note\" \u002F>\n",[564,1702,1703],{"class":566,"line":698},[564,1704,1573],{"class":610},[564,1706,1707,1709,1711],{"class":566,"line":722},[564,1708,725],{"class":570},[564,1710,476],{"class":574},[564,1712,597],{"class":570},[466,1714,1716],{"id":1715},"features-and-behavior","Features and behavior",[1586,1718,1719,1726,1748,1754,1760],{},[1589,1720,1721,1722,1725],{},"The panel height morphs between views via CSS ",[474,1723,1724],{},"transition: height","; measured per view, so content of any height is supported.",[1589,1727,1728,1730,1731,1734,1735,1599,1738,1741,1742,1599,1745,1059],{},[474,1729,762],{}," and ",[474,1732,1733],{},"view"," are controllable through ",[474,1736,1737],{},"v-model:open",[474,1739,1740],{},"v-model:view"," and default through ",[474,1743,1744],{},"default-open",[474,1746,1747],{},"default-view",[1589,1749,1750,1751,1753],{},"Only the active ",[474,1752,542],{}," mounts — inactive views (and their state) unmount.",[1589,1755,1756,1757,1759],{},"Closing resets navigation to ",[474,1758,1058],{}," and clears the back stack, so a reopen starts clean.",[1589,1761,1762,1763,1765,1766,1769,1770,1772],{},"Drag-to-close, the slide-in\u002Fout, and the backdrop are inherited from the core ",[474,1764,239],{}," engine; set ",[474,1767,1768],{},"dismissible"," to ",[474,1771,716],{}," to keep it open until dismissed in code.",[466,1774,1776],{"id":1775},"props","Props",[1778,1779],"component-props",{"name":297},[1061,1781,542],{"id":1782},"vytrayview",[1778,1784],{"name":1785},"TrayView",[466,1787,1789],{"id":1788},"emits","Emits",[1791,1792],"component-emits",{"name":297},[466,1794,1796],{"id":1795},"slots","Slots",[1798,1799],"component-slots",{"name":297},[466,1801,1803],{"id":1802},"styling-and-theming","Styling and theming",[471,1805,1806,1807,1810,1811,1813],{},"Override globally through ",[474,1808,1809],{},"appConfig.ui.tray"," or locally with the ",[474,1812,1650],{}," prop.",[1815,1816,1817,1830],"table",{},[1818,1819,1820],"thead",{},[1821,1822,1823,1827],"tr",{},[1824,1825,1826],"th",{},"UI slot",[1824,1828,1829],{},"Purpose",[1831,1832,1833,1844,1857,1867,1884,1894,1904,1929],"tbody",{},[1821,1834,1835,1841],{},[1836,1837,1838],"td",{},[474,1839,1840],{},"overlay",[1836,1842,1843],{},"The dim backdrop behind the panel.",[1821,1845,1846,1851],{},[1836,1847,1848],{},[474,1849,1850],{},"content",[1836,1852,1853,1854,1856],{},"The sheet panel. Carries the ",[474,1855,1304],{}," chrome (inset\u002Fborder\u002Fradius).",[1821,1858,1859,1864],{},[1836,1860,1861],{},[474,1862,1863],{},"handle",[1836,1865,1866],{},"The drag pill at the top of the panel.",[1821,1868,1869,1874],{},[1836,1870,1871],{},[474,1872,1873],{},"morph",[1836,1875,1876,1877,1880,1881,1813],{},"The height-animated container. Its ",[474,1878,1879],{},"transition-duration"," comes from the ",[474,1882,1883],{},"duration",[1821,1885,1886,1891],{},[1836,1887,1888],{},[474,1889,1890],{},"viewport",[1836,1892,1893],{},"Inner wrapper measured to drive the morph.",[1821,1895,1896,1901],{},[1836,1897,1898],{},[474,1899,1900],{},"body",[1836,1902,1903],{},"Padding around the active view.",[1821,1905,1906,1910],{},[1836,1907,1908],{},[474,1909,1612],{},[1836,1911,1912,1913,1916,1917,1920,1921,1924,1925,1928],{},"The keyboard-aware ",[474,1914,1915],{},"\u003Cscroll-view>"," around the body (rendered when ",[474,1918,1919],{},"keyboardAware"," is ",[474,1922,1923],{},"'scroll'","\u002F",[474,1926,1927],{},"true","). Cap its height here.",[1821,1930,1931,1935],{},[1836,1932,1933],{},[474,1934,1239],{},[1836,1936,1937],{},"The persistent footer region.",[466,1939,328],{"id":1940},"accessibility",[471,1942,1943,1944,1947,1948,1951,1952,1954],{},"The panel announces as a dialog and traps focus, inherited from the core ",[474,1945,1946],{},"SheetContent",". Give icon-only navigation controls an ",[474,1949,1950],{},"accessibility-label",", and make sure a Back control is reachable when ",[474,1953,494],{}," 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.",[466,1956,1958],{"id":1957},"platform-notes","Platform notes",[1586,1960,1961,1975,1987,1992],{},[1589,1962,1963,1964,1967,1968,1971,1972,1974],{},"The height morph relies on animating between concrete pixel heights; Lynx animates ",[474,1965,1966],{},"height"," via CSS ",[474,1969,1970],{},"transition"," (not via main-thread style writes), which is what ",[474,1973,476],{}," uses under the hood.",[1589,1976,1977,1978,1981,1982,1986],{},"The keyboard rise is driven by the focused input's per-element ",[474,1979,1980],{},"keyboard"," event — the reliable keyboard signal under vue-lynx (see ",[511,1983,1984],{"href":165},[474,1985,164],{},"). It is applied as panel padding rather than a transform so it cannot fight the sheet's main-thread drag physics.",[1589,1988,1989,1991],{},[474,1990,1308],{}," positions the panel with inset utilities that override the core edge-anchored sheet rules; on Lynx the later-injected utilities win.",[1589,1993,1994,1995,1997,1998,2002],{},"Open\u002Fclose motion and drag physics come from the core ",[474,1996,239],{}," primitives — see ",[511,1999,2000],{"href":240},[474,2001,239],{}," for the underlying behavior.",[466,2004,2006],{"id":2005},"related-components","Related components",[1586,2008,2009,2016,2022,2029],{},[1589,2010,2011,2015],{},[511,2012,2013],{"href":522},[474,2014,525],{}," for a fixed-height, snap-point bottom sheet.",[1589,2017,2018,532],{},[511,2019,2020],{"href":67},[474,2021,66],{},[1589,2023,2024,2028],{},[511,2025,2026],{"href":175},[474,2027,174],{}," for a centered blocking dialog.",[1589,2030,2031,2035],{},[511,2032,2033],{"href":151},[474,2034,150],{}," for a floating pill that morphs and expands in place.",[2037,2038,2039],"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":560,"searchDepth":567,"depth":600,"links":2041},[2042,2043,2050,2051,2054,2055,2056,2057,2058,2059],{"id":468,"depth":600,"text":469},{"id":535,"depth":600,"text":536,"children":2044},[2045,2046,2047,2048,2049],{"id":1063,"depth":628,"text":1064},{"id":1216,"depth":628,"text":1217},{"id":1298,"depth":628,"text":1299},{"id":1408,"depth":628,"text":384},{"id":1494,"depth":628,"text":1495},{"id":1715,"depth":600,"text":1716},{"id":1775,"depth":600,"text":1776,"children":2052},[2053],{"id":1782,"depth":628,"text":542},{"id":1788,"depth":600,"text":1789},{"id":1795,"depth":600,"text":1796},{"id":1802,"depth":600,"text":1803},{"id":1940,"depth":600,"text":328},{"id":1957,"depth":600,"text":1958},{"id":2005,"depth":600,"text":2006},"A morphing multi-view bottom sheet that grows to fit each view.","md",[2063],{"label":2064,"icon":2065,"to":2066,"target":2067},"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":2060},"4n2OxuPnGCAYKYPbUJtq_vWjiA5sSolljhEZp2Xg-tY",[2073,2075],{"title":293,"path":294,"stem":295,"description":2074,"icon":-1,"children":-1,"navigation":-1},"Select one or multiple values from a connected set of toggles.",{"title":302,"path":303,"stem":304,"description":2076,"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.",1785060121092]