[{"data":1,"prerenderedAt":1352},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fdrawer":474,"\u002Fcomponents\u002Fdrawer-surround":1347},[4,34,51,302,328,333,338,416],{"title":5,"path":6,"stem":7,"children":8,"package":11,"category":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,"category":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"category":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"category":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"category":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"category":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"category":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,"category":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"category":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"category":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,66,72,78,84,89,94,99,105,111,116,121,126,131,137,142,146,150,155,160,165,170,175,180,185,189,194,199,204,209,214,219,224,229,234,239,243,247,252,257,262,267,272,277,281,285,289,293,297],{"title":52,"path":54,"stem":58,"package":11,"category":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"category":64,"icon":65},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","Navigation","i-lucide-list-collapse",{"title":67,"path":68,"stem":69,"package":63,"category":70,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","Data Display","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"category":77,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core","Overlay",{"title":79,"path":80,"stem":81,"package":63,"category":82,"icon":83},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","Layout","i-lucide-smartphone",{"title":85,"path":86,"stem":87,"package":63,"category":82,"icon":88},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":90,"path":91,"stem":92,"package":63,"category":70,"icon":93},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":95,"path":96,"stem":97,"package":63,"category":70,"icon":98},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":100,"path":101,"stem":102,"package":63,"category":103,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","Buttons","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"category":109,"icon":110},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","Form","i-lucide-calendar-days",{"title":112,"path":113,"stem":114,"package":63,"category":82,"icon":115},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":117,"path":118,"stem":119,"package":63,"category":109,"icon":120},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":122,"path":123,"stem":124,"package":76,"category":64,"icon":125},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":127,"path":128,"stem":129,"package":76,"category":77,"icon":130},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":132,"path":133,"stem":134,"package":76,"category":135,"icon":136},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","Gestures & Lists","i-lucide-move",{"title":138,"path":139,"stem":140,"package":63,"category":77,"icon":141},"Drawer","\u002Fcomponents\u002Fdrawer","3.components\u002Fdrawer","i-lucide-panel-bottom",{"title":109,"path":143,"stem":144,"package":63,"category":109,"icon":145},"\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":147,"path":148,"stem":149,"package":76,"category":70,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":151,"path":152,"stem":153,"package":63,"category":109,"icon":154},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":156,"path":157,"stem":158,"package":63,"category":159,"icon":141},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland","Dynamic Island",{"title":161,"path":162,"stem":163,"package":63,"category":159,"icon":164},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":166,"path":167,"stem":168,"package":63,"category":159,"icon":169},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":171,"path":172,"stem":173,"package":63,"category":11,"icon":174},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":176,"path":177,"stem":178,"package":63,"category":109,"icon":179},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":181,"path":182,"stem":183,"package":63,"category":77,"icon":184},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":64,"path":186,"stem":187,"package":76,"category":64,"icon":188},"\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":190,"path":191,"stem":192,"package":63,"category":109,"icon":193},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":195,"path":196,"stem":197,"package":63,"category":109,"icon":198},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":200,"path":201,"stem":202,"package":63,"category":82,"icon":203},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":205,"path":206,"stem":207,"package":63,"category":77,"icon":208},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":210,"path":211,"stem":212,"package":63,"category":70,"icon":213},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":215,"path":216,"stem":217,"package":63,"category":109,"icon":218},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":220,"path":221,"stem":222,"package":63,"category":109,"icon":223},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":225,"path":226,"stem":227,"package":76,"category":82,"icon":228},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":230,"path":231,"stem":232,"package":63,"category":109,"icon":233},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":235,"path":236,"stem":237,"package":63,"category":82,"icon":238},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":240,"path":241,"stem":242,"package":76,"category":77,"icon":141},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":244,"path":245,"stem":246,"package":63,"category":82,"icon":169},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":248,"path":249,"stem":250,"package":63,"category":109,"icon":251},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":253,"path":254,"stem":255,"package":63,"category":135,"icon":256},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":258,"path":259,"stem":260,"package":63,"category":64,"icon":261},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":263,"path":264,"stem":265,"package":63,"category":135,"icon":266},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":268,"path":269,"stem":270,"package":63,"category":135,"icon":271},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":273,"path":274,"stem":275,"package":63,"category":109,"icon":276},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":278,"path":279,"stem":280,"package":63,"category":64,"icon":169},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":282,"path":283,"stem":284,"package":63,"category":109,"icon":154},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":286,"path":287,"stem":288,"package":63,"category":77,"icon":208},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":290,"path":291,"stem":292,"package":63,"category":109,"icon":276},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":294,"path":295,"stem":296,"package":63,"category":109,"icon":169},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":298,"path":299,"stem":300,"package":63,"category":77,"icon":301},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":303,"path":304,"stem":305,"children":306,"package":11,"category":11,"icon":308},"Theming","\u002Ftheming","4.theming\u002F1.index",[307,309,313,318,323],{"title":303,"path":304,"stem":305,"package":11,"category":11,"icon":308},"i-lucide-palette",{"title":310,"path":311,"stem":312,"package":11,"category":11,"icon":251},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":314,"path":315,"stem":316,"package":11,"category":11,"icon":317},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":319,"path":320,"stem":321,"package":11,"category":11,"icon":322},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":324,"path":325,"stem":326,"package":11,"category":11,"icon":327},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":329,"path":330,"stem":331,"package":11,"category":11,"icon":332},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":334,"path":335,"stem":336,"package":11,"category":11,"icon":337},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":339,"path":340,"stem":341,"children":342,"package":11,"category":11,"icon":344},"Composables","\u002Fcomposables","7.composables\u002F1.index",[343,345,350,355,360,365,369,374,379,384,388,393,397,401,406,411],{"title":339,"path":340,"stem":341,"package":11,"category":11,"icon":344},"i-lucide-square-function",{"title":346,"path":347,"stem":348,"package":11,"category":11,"icon":349},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":351,"path":352,"stem":353,"package":11,"category":11,"icon":354},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":356,"path":357,"stem":358,"package":11,"category":11,"icon":359},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":361,"path":362,"stem":363,"package":11,"category":11,"icon":364},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":366,"path":367,"stem":368,"package":11,"category":11,"icon":83},"useSafeArea","\u002Fcomposables\u002Fuse-safe-area","7.composables\u002F15.use-safe-area",{"title":370,"path":371,"stem":372,"package":11,"category":11,"icon":373},"useGlobalEvent","\u002Fcomposables\u002Fuse-global-event","7.composables\u002F16.use-global-event","i-lucide-radio",{"title":375,"path":376,"stem":377,"package":11,"category":11,"icon":378},"getViewportSize","\u002Fcomposables\u002Fget-viewport-size","7.composables\u002F17.get-viewport-size","i-lucide-scaling",{"title":380,"path":381,"stem":382,"package":11,"category":11,"icon":383},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":385,"path":386,"stem":387,"package":11,"category":11,"icon":322},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":389,"path":390,"stem":391,"package":11,"category":11,"icon":392},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":394,"path":395,"stem":396,"package":11,"category":11,"icon":141},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":398,"path":399,"stem":400,"package":11,"category":11,"icon":337},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":402,"path":403,"stem":404,"package":11,"category":11,"icon":405},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":407,"path":408,"stem":409,"package":11,"category":11,"icon":410},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":412,"path":413,"stem":414,"package":11,"category":11,"icon":415},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":417,"path":418,"stem":419,"children":420,"package":11,"category":11,"icon":422},"Guides","\u002Fguides","8.guides\u002F1.index",[421,423,427,432,436,441,446,451,455,460,464,469],{"title":417,"path":418,"stem":419,"package":11,"category":11,"icon":422},"i-lucide-book-open",{"title":424,"path":425,"stem":426,"package":11,"category":11,"icon":349},"Instant first frame","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":428,"path":429,"stem":430,"package":11,"category":11,"icon":431},"Why Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":433,"path":434,"stem":435,"package":11,"category":11,"icon":22},"Sparkling","\u002Fguides\u002Fsparkling","8.guides\u002F12.sparkling",{"title":437,"path":438,"stem":439,"package":11,"category":11,"icon":440},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":442,"path":443,"stem":444,"package":11,"category":11,"icon":445},"Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":447,"path":448,"stem":449,"package":11,"category":11,"icon":450},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":452,"path":453,"stem":454,"package":11,"category":11,"icon":83},"Testing on device","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":456,"path":457,"stem":458,"package":11,"category":11,"icon":459},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":461,"path":462,"stem":463,"package":11,"category":11,"icon":27},"rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":465,"path":466,"stem":467,"package":11,"category":11,"icon":468},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":470,"path":471,"stem":472,"package":11,"category":11,"icon":473},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":475,"title":138,"body":476,"category":77,"description":1335,"extension":1336,"links":1337,"meta":1343,"navigation":1344,"package":63,"path":139,"seo":1345,"stem":140,"__hash__":1346},"docs\u002F3.components\u002Fdrawer.md",{"type":477,"value":478,"toc":1320},"minimark",[479,484,506,511,526,530,543,545,552,571,736,741,752,755,759,770,963,967,1070,1074,1077,1081,1084,1088,1091,1095,1105,1230,1240,1243,1250,1253,1257,1283,1287,1316],[480,481,483],"h2",{"id":482},"overview","Overview",[485,486,487,491,492,495,496,495,499,495,502,505],"p",{},[488,489,490],"code",{},"VyDrawer"," presents a panel that slides in from any viewport edge and settles at a snap point. It supports drag-to-dismiss, a drag handle, an optional backdrop, multiple snap points, keyboard-aware footers, and controlled or uncontrolled open state. The default slot carries the trigger, then ",[488,493,494],{},"#content"," \u002F ",[488,497,498],{},"#header",[488,500,501],{},"#body",[488,503,504],{},"#footer"," slots shape the panel.",[507,508],"component-code",{"height":509,"name":510},"480px","drawer-example",[512,513,514],"callout",{"icon":44},[485,515,516,517,522,523,525],{},"Built on the headless ",[518,519,520],"a",{"href":241},[488,521,240],{}," primitive from ",[488,524,41],{},". Drop down to it when you need full control over the snap physics and markup.",[480,527,529],{"id":528},"usage","Usage",[485,531,532,533,536,537,539,540,542],{},"Use a ",[488,534,535],{},"VyButton"," — or any component — in the default slot of the ",[488,538,490],{},". Then use the ",[488,541,494],{}," slot to add the content displayed when the drawer opens.",[507,544],{"height":509,"name":510},[485,546,547,548,551],{},"The default slot is wrapped in the core ",[488,549,550],{},"SheetTrigger","; tapping it opens the drawer. Do not also set the open state from a tap handler on the slotted child.",[485,553,554,555,557,558,560,561,563,564,560,567,570],{},"Use the ",[488,556,498],{},", ",[488,559,501],{}," and ",[488,562,504],{}," slots to customize the drawer's content. ",[488,565,566],{},"title",[488,568,569],{},"description"," populate the built-in header.",[572,573,578],"pre",{"className":574,"code":575,"language":576,"meta":577,"style":577},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CVyDrawer\n  v-model:open=\"open\"\n  title=\"Edit profile\"\n  description=\"Make changes to your profile here.\"\n>\n  \u003CVyButton label=\"Open drawer\" \u002F>\n\n  \u003Ctemplate #body>\n    \u003Cview class=\"flex flex-col gap-3 p-4\">\n      \u003C!-- drawer body -->\n    \u003C\u002Fview>\n  \u003C\u002Ftemplate>\n\n  \u003Ctemplate #footer=\"{ close }\">\n    \u003CVyButton color=\"neutral\" variant=\"ghost\" label=\"Cancel\" @tap=\"close\" \u002F>\n    \u003CVyButton label=\"Save\" @tap=\"close\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FVyDrawer>\n","vue","",[488,579,580,593,618,634,649,655,661,668,674,680,686,692,698,703,709,715,721,726],{"__ignoreMap":577},[581,582,585,589],"span",{"class":583,"line":584},"line",1,[581,586,588],{"class":587},"sMK4o","\u003C",[581,590,592],{"class":591},"swJcz","VyDrawer\n",[581,594,596,600,603,606,609,612,615],{"class":583,"line":595},2,[581,597,599],{"class":598},"spNyl","  v-model",[581,601,602],{"class":587},":",[581,604,605],{"class":598},"open",[581,607,608],{"class":587},"=",[581,610,611],{"class":587},"\"",[581,613,605],{"class":614},"sTEyZ",[581,616,617],{"class":587},"\"\n",[581,619,621,624,626,628,632],{"class":583,"line":620},3,[581,622,623],{"class":598},"  title",[581,625,608],{"class":587},[581,627,611],{"class":587},[581,629,631],{"class":630},"sfazB","Edit profile",[581,633,617],{"class":587},[581,635,637,640,642,644,647],{"class":583,"line":636},4,[581,638,639],{"class":598},"  description",[581,641,608],{"class":587},[581,643,611],{"class":587},[581,645,646],{"class":630},"Make changes to your profile here.",[581,648,617],{"class":587},[581,650,652],{"class":583,"line":651},5,[581,653,654],{"class":587},">\n",[581,656,658],{"class":583,"line":657},6,[581,659,660],{"class":614},"  \u003CVyButton label=\"Open drawer\" \u002F>\n",[581,662,664],{"class":583,"line":663},7,[581,665,667],{"emptyLinePlaceholder":666},true,"\n",[581,669,671],{"class":583,"line":670},8,[581,672,673],{"class":614},"  \u003Ctemplate #body>\n",[581,675,677],{"class":583,"line":676},9,[581,678,679],{"class":614},"    \u003Cview class=\"flex flex-col gap-3 p-4\">\n",[581,681,683],{"class":583,"line":682},10,[581,684,685],{"class":614},"      \u003C!-- drawer body -->\n",[581,687,689],{"class":583,"line":688},11,[581,690,691],{"class":614},"    \u003C\u002Fview>\n",[581,693,695],{"class":583,"line":694},12,[581,696,697],{"class":614},"  \u003C\u002Ftemplate>\n",[581,699,701],{"class":583,"line":700},13,[581,702,667],{"emptyLinePlaceholder":666},[581,704,706],{"class":583,"line":705},14,[581,707,708],{"class":614},"  \u003Ctemplate #footer=\"{ close }\">\n",[581,710,712],{"class":583,"line":711},15,[581,713,714],{"class":614},"    \u003CVyButton color=\"neutral\" variant=\"ghost\" label=\"Cancel\" @tap=\"close\" \u002F>\n",[581,716,718],{"class":583,"line":717},16,[581,719,720],{"class":614},"    \u003CVyButton label=\"Save\" @tap=\"close\" \u002F>\n",[581,722,724],{"class":583,"line":723},17,[581,725,697],{"class":614},[581,727,729,732,734],{"class":583,"line":728},18,[581,730,731],{"class":587},"\u003C\u002F",[581,733,490],{"class":591},[581,735,654],{"class":587},[737,738,740],"h3",{"id":739},"directions","Directions",[485,742,743,744,747,748,751],{},"Use ",[488,745,746],{},"side"," to control which edge the drawer slides in from. It defaults to ",[488,749,750],{},"bottom",".",[507,753],{"height":509,"name":754},"drawer-directions",[737,756,758],{"id":757},"controlling-open-state","Controlling open state",[485,760,761,762,765,766,769],{},"Bind ",[488,763,764],{},"v-model:open"," to control the drawer. When uncontrolled, ",[488,767,768],{},"defaultOpen"," seeds the initial state.",[572,771,773],{"className":574,"code":772,"language":576,"meta":577,"style":577},"\u003Cscript setup lang=\"ts\">\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyDrawer v-model:open=\"open\" title=\"Notifications\">\n    \u003CVyButton label=\"Open\" \u002F>\n\n    \u003Ctemplate #body>\n      \u003CPlaceholder class=\"h-48 m-4\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVyDrawer>\n\u003C\u002Ftemplate>\n",[488,774,775,799,823,831,835,844,876,898,902,916,937,946,955],{"__ignoreMap":577},[581,776,777,779,782,785,788,790,792,795,797],{"class":583,"line":584},[581,778,588],{"class":587},[581,780,781],{"class":591},"script",[581,783,784],{"class":598}," setup",[581,786,787],{"class":598}," lang",[581,789,608],{"class":587},[581,791,611],{"class":587},[581,793,794],{"class":630},"ts",[581,796,611],{"class":587},[581,798,654],{"class":587},[581,800,801,804,807,809,813,816,820],{"class":583,"line":595},[581,802,803],{"class":598},"const",[581,805,806],{"class":614}," open ",[581,808,608],{"class":587},[581,810,812],{"class":811},"s2Zo4"," ref",[581,814,815],{"class":614},"(",[581,817,819],{"class":818},"sfNiH","false",[581,821,822],{"class":614},")\n",[581,824,825,827,829],{"class":583,"line":620},[581,826,731],{"class":587},[581,828,781],{"class":591},[581,830,654],{"class":587},[581,832,833],{"class":583,"line":636},[581,834,667],{"emptyLinePlaceholder":666},[581,836,837,839,842],{"class":583,"line":651},[581,838,588],{"class":587},[581,840,841],{"class":591},"template",[581,843,654],{"class":587},[581,845,846,849,851,854,856,858,860,862,865,867,869,872,874],{"class":583,"line":657},[581,847,848],{"class":587},"  \u003C",[581,850,490],{"class":591},[581,852,853],{"class":598}," v-model:open",[581,855,608],{"class":587},[581,857,611],{"class":587},[581,859,605],{"class":630},[581,861,611],{"class":587},[581,863,864],{"class":598}," title",[581,866,608],{"class":587},[581,868,611],{"class":587},[581,870,871],{"class":630},"Notifications",[581,873,611],{"class":587},[581,875,654],{"class":587},[581,877,878,881,883,886,888,890,893,895],{"class":583,"line":663},[581,879,880],{"class":587},"    \u003C",[581,882,535],{"class":591},[581,884,885],{"class":598}," label",[581,887,608],{"class":587},[581,889,611],{"class":587},[581,891,892],{"class":630},"Open",[581,894,611],{"class":587},[581,896,897],{"class":587}," \u002F>\n",[581,899,900],{"class":583,"line":670},[581,901,667],{"emptyLinePlaceholder":666},[581,903,904,906,908,911,914],{"class":583,"line":676},[581,905,880],{"class":587},[581,907,841],{"class":591},[581,909,910],{"class":587}," #",[581,912,913],{"class":598},"body",[581,915,654],{"class":587},[581,917,918,921,923,926,928,930,933,935],{"class":583,"line":682},[581,919,920],{"class":587},"      \u003C",[581,922,200],{"class":591},[581,924,925],{"class":598}," class",[581,927,608],{"class":587},[581,929,611],{"class":587},[581,931,932],{"class":630},"h-48 m-4",[581,934,611],{"class":587},[581,936,897],{"class":587},[581,938,939,942,944],{"class":583,"line":688},[581,940,941],{"class":587},"    \u003C\u002F",[581,943,841],{"class":591},[581,945,654],{"class":587},[581,947,948,951,953],{"class":583,"line":694},[581,949,950],{"class":587},"  \u003C\u002F",[581,952,490],{"class":591},[581,954,654],{"class":587},[581,956,957,959,961],{"class":583,"line":700},[581,958,731],{"class":587},[581,960,841],{"class":591},[581,962,654],{"class":587},[480,964,966],{"id":965},"features-and-behavior","Features and behavior",[968,969,970,980,989,1009,1019,1029,1047,1053],"ul",{},[971,972,761,973,975,976,979],"li",{},[488,974,764],{}," to control the drawer; ",[488,977,978],{},"update:open"," is emitted on every open-state change.",[971,981,982,984,985,988],{},[488,983,768],{}," initializes uncontrolled open state (now honored by the underlying ",[488,986,987],{},"SheetRoot",").",[971,990,991,993,994,557,997,557,1000,1002,1003,1006,1007,751],{},[488,992,746],{}," picks the edge: ",[488,995,996],{},"top",[488,998,999],{},"right",[488,1001,750],{},", or ",[488,1004,1005],{},"left","; default ",[488,1008,750],{},[971,1010,1011,1014,1015,1018],{},[488,1012,1013],{},"overlay"," toggles the dimmed backdrop; ",[488,1016,1017],{},"dismissible"," controls both backdrop dismissal and drag-to-close.",[971,1020,1021,1024,1025,1028],{},[488,1022,1023],{},"handle"," shows the drag-handle pill; ",[488,1026,1027],{},"handleOnly"," restricts dragging to the handle.",[971,1030,1031,1034,1035,1038,1039,1042,1043,1046],{},[488,1032,1033],{},"snapPoints"," are 0 → 1 fractions of the viewport on the slide axis. Defaults to ",[488,1036,1037],{},"[0.75]"," (a three-quarter-height bottom sheet). Pass ",[488,1040,1041],{},"[1]"," for full-screen or e.g. ",[488,1044,1045],{},"[0.4, 0.9]"," for a resizable sheet.",[971,1048,1049,1052],{},[488,1050,1051],{},"keyboardAware"," lifts the footer above the on-screen keyboard when a field inside it is focused.",[971,1054,1055,1056,557,1058,557,1060,1062,1063,1065,1066,1069],{},"The ",[488,1057,494],{},[488,1059,498],{},[488,1061,501],{},", and ",[488,1064,504],{}," slots receive a ",[488,1067,1068],{},"close()"," helper for programmatic dismissal.",[480,1071,1073],{"id":1072},"props","Props",[1075,1076],"component-props",{"name":138},[480,1078,1080],{"id":1079},"emits","Emits",[1082,1083],"component-emits",{"name":138},[480,1085,1087],{"id":1086},"slots","Slots",[1089,1090],"component-slots",{"name":138},[480,1092,1094],{"id":1093},"styling-and-theming","Styling and theming",[485,1096,1097,1098,1101,1102,751],{},"Override globally through ",[488,1099,1100],{},"appConfig.ui.drawer"," or locally through ",[488,1103,1104],{},"ui",[1106,1107,1108,1121],"table",{},[1109,1110,1111],"thead",{},[1112,1113,1114,1118],"tr",{},[1115,1116,1117],"th",{},"UI slot",[1115,1119,1120],{},"Purpose",[1122,1123,1124,1134,1144,1153,1163,1173,1183,1192,1202,1211,1220],"tbody",{},[1112,1125,1126,1131],{},[1127,1128,1129],"td",{},[488,1130,1013],{},[1127,1132,1133],{},"Full-screen backdrop.",[1112,1135,1136,1141],{},[1127,1137,1138],{},[488,1139,1140],{},"content",[1127,1142,1143],{},"Sliding panel and edge dimensions.",[1112,1145,1146,1150],{},[1127,1147,1148],{},[488,1149,1023],{},[1127,1151,1152],{},"Drag-handle pill.",[1112,1154,1155,1160],{},[1127,1156,1157],{},[488,1158,1159],{},"scaffold",[1127,1161,1162],{},"Column wrapper for header\u002Fbody\u002Ffooter.",[1112,1164,1165,1170],{},[1127,1166,1167],{},[488,1168,1169],{},"header",[1127,1171,1172],{},"Header row and spacing.",[1112,1174,1175,1180],{},[1127,1176,1177],{},[488,1178,1179],{},"wrapper",[1127,1181,1182],{},"Title and description wrapper.",[1112,1184,1185,1189],{},[1127,1186,1187],{},[488,1188,913],{},[1127,1190,1191],{},"Scrollable main region.",[1112,1193,1194,1199],{},[1127,1195,1196],{},[488,1197,1198],{},"footer",[1127,1200,1201],{},"Bottom action row.",[1112,1203,1204,1208],{},[1127,1205,1206],{},[488,1207,566],{},[1127,1209,1210],{},"Built-in title typography.",[1112,1212,1213,1217],{},[1127,1214,1215],{},[488,1216,569],{},[1127,1218,1219],{},"Built-in supporting text.",[1112,1221,1222,1227],{},[1127,1223,1224],{},[488,1225,1226],{},"close",[1127,1228,1229],{},"(Reserved) built-in close-button positioning.",[485,1231,1232,1233,1235,1236,1239],{},"Variants are ",[488,1234,746],{}," (edge placement and dimensions) and ",[488,1237,1238],{},"transition",". Open\u002Fclose motion is driven by core's Presence keyframes, so the slide stays native-smooth.",[480,1241,329],{"id":1242},"accessibility",[485,1244,1245,1246,1249],{},"The trigger exposes native button semantics and announces collapsed or expanded state. Provide an ",[488,1247,1248],{},"accessibility-label"," on icon-only triggers.",[485,1251,1252],{},"Lynx has no DOM focus trap and hardware Escape handling is not currently wired. Test focus order, background isolation, and dismissal with VoiceOver and TalkBack on each target platform.",[480,1254,1256],{"id":1255},"platform-notes","Platform notes",[968,1258,1259,1262,1273],{},[971,1260,1261],{},"Drag tracking and snap motion run on the main thread (MTS) for native-smooth tracking.",[971,1263,1055,1264,1266,1267,1270,1271,988],{},[488,1265,768],{}," flag — previously dead because the panel was always treated as controlled — is now honored (see ",[488,1268,1269],{},"useStandardVModel"," in ",[488,1272,41],{},[971,1274,743,1275,1278,1279,1282],{},[488,1276,1277],{},"\u003CVyDrawer :snap-points=\"[1]\">"," for a full-screen sheet, or ",[488,1280,1281],{},"VyModal"," for a centered blocking dialog.",[480,1284,1286],{"id":1285},"related-components","Related components",[968,1288,1289,1295,1306],{},[971,1290,1291,1282],{},[518,1292,1293],{"href":182},[488,1294,181],{},[971,1296,1297,1301,1302,1305],{},[518,1298,1299],{"href":299},[488,1300,298],{}," for a ",[488,1303,1304],{},"fitContent"," sheet that hugs its content.",[971,1307,1308,1312,1313,1315],{},[518,1309,1310],{"href":241},[488,1311,240],{}," is the headless ",[488,1314,41],{}," primitive underneath.",[1317,1318,1319],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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}",{"title":577,"searchDepth":584,"depth":595,"links":1321},[1322,1323,1327,1328,1329,1330,1331,1332,1333,1334],{"id":482,"depth":595,"text":483},{"id":528,"depth":595,"text":529,"children":1324},[1325,1326],{"id":739,"depth":620,"text":740},{"id":757,"depth":620,"text":758},{"id":965,"depth":595,"text":966},{"id":1072,"depth":595,"text":1073},{"id":1079,"depth":595,"text":1080},{"id":1086,"depth":595,"text":1087},{"id":1093,"depth":595,"text":1094},{"id":1242,"depth":595,"text":329},{"id":1255,"depth":595,"text":1256},{"id":1285,"depth":595,"text":1286},"A drawer that smoothly slides in & out of the screen.","md",[1338],{"label":1339,"icon":1340,"to":1341,"target":1342},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FDrawer.vue","_blank",{},{"icon":141},{"title":138,"description":1335},"2tAwtyAvCdw0ff3TNydo13Lo2YeES52SzoVhFj2s9eo",[1348,1350],{"title":132,"path":133,"stem":134,"description":1349,"icon":-1,"children":-1,"navigation":-1},"Headless 2D pan-gesture primitive with axis locking, bounds, momentum, and reset.",{"title":109,"path":143,"stem":144,"description":1351,"icon":-1,"children":-1,"navigation":-1},"A form container that tracks values, runs validators, and emits submit.",1787472429605]