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