[{"data":1,"prerenderedAt":3045},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Fdrawer":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":44,"body":135,"description":3039,"extension":3040,"meta":3041,"navigation":494,"path":43,"section":11,"seo":3042,"stem":3043,"__hash__":3044},"pkg\u002Fpkg\u002Fdrawer.md",{"type":136,"value":137,"toc":3002},"minimark",[138,142,145,150,161,165,315,330,337,340,344,349,352,429,439,578,580,584,609,628,630,634,649,652,655,659,680,740,743,815,822,825,829,842,858,893,896,900,925,928,932,947,950,954,957,960,964,973,976,980,983,986,990,1003,1006,1010,1020,1207,1213,1216,1220,1231,1240,1343,1353,1457,1476,1631,1634,1638,1642,1648,1891,1936,1940,1943,1947,1956,1959,1966,1970,1976,2062,2094,2098,2101,2148,2152,2165,2169,2183,2218,2278,2282,2295,2326,2381,2385,2388,2459,2463,2481,2538,2648,2735,2739,2751,2754,2760,2791,2794,2800,2804,2814,2846,2867,2871,2880,2939,2998],[139,140,141],"p",{},"A panel that slides in from the edge of the screen. The trigger and close match Button. The popup has no stroke, and the open edge is rounded. The title is Light and the description is Regular.",[143,144],"base-drawer-demo",{},[146,147,149],"h2",{"id":148},"usage-guidelines","Usage guidelines",[151,152,153],"ul",{},[154,155,156,160],"li",{},[157,158,159],"strong",{},"Drawer extends Dialog."," It adds gesture support, snap points, and indent effects. If you don’t need those, use Dialog. A panel that slides in from the edge and doesn’t need gestures is a positioned Dialog.",[146,162,164],{"id":163},"anatomy","Anatomy",[166,167,172],"pre",{"className":168,"code":169,"language":170,"meta":171,"style":171},"language-vue shiki shiki-themes github-light github-dark","\u003CUiDrawerProvider>\n  \u003CUiDrawerIndentBackground \u002F>\n  \u003CUiDrawerIndent>\n    \u003CUiDrawerRoot>\n      \u003CUiDrawerTrigger \u002F>\n      \u003CUiDrawerSwipeArea \u002F>\n      \u003CUiDrawerPortal>\n        \u003CUiDrawerBackdrop \u002F>\n        \u003CUiDrawerViewport>\n          \u003CUiDrawerPopup>\n            \u003CUiDrawerContent>\n              \u003CUiDrawerTitle \u002F>\n              \u003CUiDrawerDescription \u002F>\n              \u003CUiDrawerClose \u002F>\n            \u003C\u002FUiDrawerContent>\n          \u003C\u002FUiDrawerPopup>\n        \u003C\u002FUiDrawerViewport>\n      \u003C\u002FUiDrawerPortal>\n    \u003C\u002FUiDrawerRoot>\n  \u003C\u002FUiDrawerIndent>\n\u003C\u002FUiDrawerProvider>\n","vue","",[173,174,175,191,197,203,209,215,221,227,233,239,245,251,257,263,269,275,281,287,293,299,305],"code",{"__ignoreMap":171},[176,177,180,184,188],"span",{"class":178,"line":179},"line",1,[176,181,183],{"class":182},"sVt8B","\u003C",[176,185,187],{"class":186},"s9eBZ","UiDrawerProvider",[176,189,190],{"class":182},">\n",[176,192,194],{"class":178,"line":193},2,[176,195,196],{"class":182},"  \u003CUiDrawerIndentBackground \u002F>\n",[176,198,200],{"class":178,"line":199},3,[176,201,202],{"class":182},"  \u003CUiDrawerIndent>\n",[176,204,206],{"class":178,"line":205},4,[176,207,208],{"class":182},"    \u003CUiDrawerRoot>\n",[176,210,212],{"class":178,"line":211},5,[176,213,214],{"class":182},"      \u003CUiDrawerTrigger \u002F>\n",[176,216,218],{"class":178,"line":217},6,[176,219,220],{"class":182},"      \u003CUiDrawerSwipeArea \u002F>\n",[176,222,224],{"class":178,"line":223},7,[176,225,226],{"class":182},"      \u003CUiDrawerPortal>\n",[176,228,230],{"class":178,"line":229},8,[176,231,232],{"class":182},"        \u003CUiDrawerBackdrop \u002F>\n",[176,234,236],{"class":178,"line":235},9,[176,237,238],{"class":182},"        \u003CUiDrawerViewport>\n",[176,240,242],{"class":178,"line":241},10,[176,243,244],{"class":182},"          \u003CUiDrawerPopup>\n",[176,246,248],{"class":178,"line":247},11,[176,249,250],{"class":182},"            \u003CUiDrawerContent>\n",[176,252,254],{"class":178,"line":253},12,[176,255,256],{"class":182},"              \u003CUiDrawerTitle \u002F>\n",[176,258,260],{"class":178,"line":259},13,[176,261,262],{"class":182},"              \u003CUiDrawerDescription \u002F>\n",[176,264,266],{"class":178,"line":265},14,[176,267,268],{"class":182},"              \u003CUiDrawerClose \u002F>\n",[176,270,272],{"class":178,"line":271},15,[176,273,274],{"class":182},"            \u003C\u002FUiDrawerContent>\n",[176,276,278],{"class":178,"line":277},16,[176,279,280],{"class":182},"          \u003C\u002FUiDrawerPopup>\n",[176,282,284],{"class":178,"line":283},17,[176,285,286],{"class":182},"        \u003C\u002FUiDrawerViewport>\n",[176,288,290],{"class":178,"line":289},18,[176,291,292],{"class":182},"      \u003C\u002FUiDrawerPortal>\n",[176,294,296],{"class":178,"line":295},19,[176,297,298],{"class":182},"    \u003C\u002FUiDrawerRoot>\n",[176,300,302],{"class":178,"line":301},20,[176,303,304],{"class":182},"  \u003C\u002FUiDrawerIndent>\n",[176,306,308,311,313],{"class":178,"line":307},21,[176,309,310],{"class":182},"\u003C\u002F",[176,312,187],{"class":186},[176,314,190],{"class":182},[139,316,317,318,321,322,325,326,329],{},"Drawer supports swipe gestures to dismiss. Set ",[173,319,320],{},"swipeDirection"," to control which direction dismisses the drawer. ",[173,323,324],{},"UiDrawerContent"," allows text selection of its children without swipe interference when using a mouse. Add ",[173,327,328],{},"data-swipe-ignore"," to a descendant to skip swipe dismissal for all input types.",[139,331,332,333,336],{},"Use ",[173,334,335],{},"UiDrawerVirtualKeyboardProvider"," when a bottom sheet contains form fields and you want the sheet to react to software keyboards. Drawers without this provider are unaffected.",[139,338,339],{},"No drop-shadow and no border. The open edge is rounded.",[146,341,343],{"id":342},"examples","Examples",[345,346,348],"h3",{"id":347},"state","State",[139,350,351],{},"By default, Drawer is an uncontrolled component that manages its own state.",[166,353,355],{"className":168,"code":354,"language":170,"meta":171,"style":171},"\u003CUiDrawerRoot>\n  \u003CUiDrawerTrigger>Open\u003C\u002FUiDrawerTrigger>\n  \u003CUiDrawerPortal>\n    \u003CUiDrawerViewport>\n      \u003CUiDrawerPopup>\n        \u003CUiDrawerContent>\n          \u003CUiDrawerTitle>Example drawer\u003C\u002FUiDrawerTitle>\n          \u003CUiDrawerClose>Close\u003C\u002FUiDrawerClose>\n        \u003C\u002FUiDrawerContent>\n      \u003C\u002FUiDrawerPopup>\n    \u003C\u002FUiDrawerViewport>\n  \u003C\u002FUiDrawerPortal>\n\u003C\u002FUiDrawerRoot>\n",[173,356,357,366,371,376,381,386,391,396,401,406,411,416,421],{"__ignoreMap":171},[176,358,359,361,364],{"class":178,"line":179},[176,360,183],{"class":182},[176,362,363],{"class":186},"UiDrawerRoot",[176,365,190],{"class":182},[176,367,368],{"class":178,"line":193},[176,369,370],{"class":182},"  \u003CUiDrawerTrigger>Open\u003C\u002FUiDrawerTrigger>\n",[176,372,373],{"class":178,"line":199},[176,374,375],{"class":182},"  \u003CUiDrawerPortal>\n",[176,377,378],{"class":178,"line":205},[176,379,380],{"class":182},"    \u003CUiDrawerViewport>\n",[176,382,383],{"class":178,"line":211},[176,384,385],{"class":182},"      \u003CUiDrawerPopup>\n",[176,387,388],{"class":178,"line":217},[176,389,390],{"class":182},"        \u003CUiDrawerContent>\n",[176,392,393],{"class":178,"line":223},[176,394,395],{"class":182},"          \u003CUiDrawerTitle>Example drawer\u003C\u002FUiDrawerTitle>\n",[176,397,398],{"class":178,"line":229},[176,399,400],{"class":182},"          \u003CUiDrawerClose>Close\u003C\u002FUiDrawerClose>\n",[176,402,403],{"class":178,"line":235},[176,404,405],{"class":182},"        \u003C\u002FUiDrawerContent>\n",[176,407,408],{"class":178,"line":241},[176,409,410],{"class":182},"      \u003C\u002FUiDrawerPopup>\n",[176,412,413],{"class":178,"line":247},[176,414,415],{"class":182},"    \u003C\u002FUiDrawerViewport>\n",[176,417,418],{"class":178,"line":253},[176,419,420],{"class":182},"  \u003C\u002FUiDrawerPortal>\n",[176,422,423,425,427],{"class":178,"line":259},[176,424,310],{"class":182},[176,426,363],{"class":186},[176,428,190],{"class":182},[139,430,332,431,434,435,438],{},[173,432,433],{},"open"," \u002F ",[173,436,437],{},"v-model:open"," if you need to access or control the state. For example, close it after a form submits, or open it from another place in the app.",[166,440,442],{"className":168,"code":441,"language":170,"meta":171,"style":171},"\u003Cscript setup>\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiDrawerRoot v-model:open=\"open\" swipe-direction=\"right\">\n    \u003CUiDrawerTrigger>Open\u003C\u002FUiDrawerTrigger>\n    …\n  \u003C\u002FUiDrawerRoot>\n\u003C\u002Ftemplate>\n",[173,443,444,457,482,490,496,505,541,556,561,570],{"__ignoreMap":171},[176,445,446,448,451,455],{"class":178,"line":179},[176,447,183],{"class":182},[176,449,450],{"class":186},"script",[176,452,454],{"class":453},"sScJk"," setup",[176,456,190],{"class":182},[176,458,459,463,467,470,473,476,479],{"class":178,"line":193},[176,460,462],{"class":461},"szBVR","const",[176,464,466],{"class":465},"sj4cs"," open",[176,468,469],{"class":461}," =",[176,471,472],{"class":453}," ref",[176,474,475],{"class":182},"(",[176,477,478],{"class":465},"false",[176,480,481],{"class":182},")\n",[176,483,484,486,488],{"class":178,"line":199},[176,485,310],{"class":182},[176,487,450],{"class":186},[176,489,190],{"class":182},[176,491,492],{"class":178,"line":205},[176,493,495],{"emptyLinePlaceholder":494},true,"\n",[176,497,498,500,503],{"class":178,"line":211},[176,499,183],{"class":182},[176,501,502],{"class":186},"template",[176,504,190],{"class":182},[176,506,507,510,512,515,518,520,523,527,529,531,534,536,539],{"class":178,"line":217},[176,508,509],{"class":182},"  \u003C",[176,511,363],{"class":186},[176,513,514],{"class":453}," v-model",[176,516,517],{"class":182},":",[176,519,433],{"class":453},[176,521,522],{"class":182},"=",[176,524,526],{"class":525},"sZZnC","\"",[176,528,433],{"class":182},[176,530,526],{"class":525},[176,532,533],{"class":453}," swipe-direction",[176,535,522],{"class":182},[176,537,538],{"class":525},"\"right\"",[176,540,190],{"class":182},[176,542,543,546,549,552,554],{"class":178,"line":223},[176,544,545],{"class":182},"    \u003C",[176,547,548],{"class":186},"UiDrawerTrigger",[176,550,551],{"class":182},">Open\u003C\u002F",[176,553,548],{"class":186},[176,555,190],{"class":182},[176,557,558],{"class":178,"line":229},[176,559,560],{"class":182},"    …\n",[176,562,563,566,568],{"class":178,"line":235},[176,564,565],{"class":182},"  \u003C\u002F",[176,567,363],{"class":186},[176,569,190],{"class":182},[176,571,572,574,576],{"class":178,"line":241},[176,573,310],{"class":182},[176,575,502],{"class":186},[176,577,190],{"class":182},[143,579],{"variant":347},[345,581,583],{"id":582},"position","Position",[139,585,586,587,589,590,593,594,597,598,601,602,604,605,608],{},"Positioning is handled by your styles. ",[173,588,320],{}," defaults to ",[173,591,592],{},"\"down\""," for bottom sheets. Use ",[173,595,596],{},"\"up\"",", ",[173,599,600],{},"\"left\"",", or ",[173,603,538],{}," for other drawer positions. The hero demo above is a right side sheet (",[173,606,607],{},"swipeDirection=\"right\"","). This example is the default bottom sheet.",[166,610,612],{"className":168,"code":611,"language":170,"meta":171,"style":171},"\u003CUiDrawerRoot swipe-direction=\"right\">\n",[173,613,614],{"__ignoreMap":171},[176,615,616,618,620,622,624,626],{"class":178,"line":179},[176,617,183],{"class":182},[176,619,363],{"class":186},[176,621,533],{"class":453},[176,623,522],{"class":182},[176,625,538],{"class":525},[176,627,190],{"class":182},[143,629],{"variant":582},[345,631,633],{"id":632},"nested-drawers","Nested drawers",[139,635,636,637,640,641,644,645,648],{},"You can nest drawers within one another. Use ",[173,638,639],{},"[data-nested-drawer-open]"," and ",[173,642,643],{},"var(--nested-drawers)"," to style the parent. Child backdrops are not rendered, so the parent stays visible behind the one on top. The parent popup scales with ",[173,646,647],{},"calc(1 - 0.05 * var(--nested-drawers))",".",[139,650,651],{},"This demo stacks nested drawers so the frontmost sheet stays anchored to the bottom while the ones behind it are scaled down.",[143,653],{"variant":654},"nested",[345,656,658],{"id":657},"snap-points","Snap points",[139,660,332,661,664,665,640,668,671,672,675,676,679],{},[173,662,663],{},"snapPoints"," to snap a bottom sheet to preset heights. Numbers between 0 and 1 represent fractions of the viewport height, and numbers greater than 1 are treated as pixel values. String values support ",[173,666,667],{},"px",[173,669,670],{},"rem"," units (for example, ",[173,673,674],{},"'148px'"," or ",[173,677,678],{},"'30rem'",").",[166,681,683],{"className":168,"code":682,"language":170,"meta":171,"style":171},"const snapPoints = ['148px', 1]\n\n\u003CUiDrawerRoot\n  :snap-points=\"snapPoints\"\n  v-model:snap-point=\"snapPoint\"\n>\n",[173,684,685,690,694,701,717,736],{"__ignoreMap":171},[176,686,687],{"class":178,"line":179},[176,688,689],{"class":182},"const snapPoints = ['148px', 1]\n",[176,691,692],{"class":178,"line":193},[176,693,495],{"emptyLinePlaceholder":494},[176,695,696,698],{"class":178,"line":199},[176,697,183],{"class":182},[176,699,700],{"class":186},"UiDrawerRoot\n",[176,702,703,706,708,710,712,714],{"class":178,"line":205},[176,704,705],{"class":182},"  :",[176,707,657],{"class":453},[176,709,522],{"class":182},[176,711,526],{"class":525},[176,713,663],{"class":182},[176,715,716],{"class":525},"\"\n",[176,718,719,722,724,727,729,731,734],{"class":178,"line":211},[176,720,721],{"class":453},"  v-model",[176,723,517],{"class":182},[176,725,726],{"class":453},"snap-point",[176,728,522],{"class":182},[176,730,526],{"class":525},[176,732,733],{"class":182},"snapPoint",[176,735,716],{"class":525},[176,737,738],{"class":178,"line":217},[176,739,190],{"class":182},[139,741,742],{},"Apply the snap point offset in your styles when using vertical drawers:",[166,744,748],{"className":745,"code":746,"language":747,"meta":171,"style":171},"language-css shiki shiki-themes github-light github-dark",".popup {\n  transform: translateY(\n    calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))\n  );\n}\n","css",[173,749,750,758,772,805,810],{"__ignoreMap":171},[176,751,752,755],{"class":178,"line":179},[176,753,754],{"class":453},".popup",[176,756,757],{"class":182}," {\n",[176,759,760,763,766,769],{"class":178,"line":193},[176,761,762],{"class":465},"  transform",[176,764,765],{"class":182},": ",[176,767,768],{"class":465},"translateY",[176,770,771],{"class":182},"(\n",[176,773,774,777,779,782,784,788,791,794,797,799,802],{"class":178,"line":199},[176,775,776],{"class":465},"    calc",[176,778,475],{"class":182},[176,780,781],{"class":465},"var",[176,783,475],{"class":182},[176,785,787],{"class":786},"s4XuR","--drawer-snap-point-offset",[176,789,790],{"class":182},") ",[176,792,793],{"class":461},"+",[176,795,796],{"class":465}," var",[176,798,475],{"class":182},[176,800,801],{"class":786},"--drawer-swipe-movement-y",[176,803,804],{"class":182},"))\n",[176,806,807],{"class":178,"line":205},[176,808,809],{"class":182},"  );\n",[176,811,812],{"class":178,"line":211},[176,813,814],{"class":182},"}\n",[139,816,817,818,821],{},"By default, the drawer can skip snap points when swiping quickly. Set ",[173,819,820],{},"snapToSequentialPoints"," so drag distance (not velocity) chooses the next point.",[143,823],{"variant":824},"snap",[345,826,828],{"id":827},"virtual-keyboard-aware","Virtual keyboard aware",[139,830,831,832,834,835,838,839,648],{},"Wrap a bottom sheet in ",[173,833,335],{}," to make it react to software keyboards when it contains form controls. The provider sets ",[173,836,837],{},"--drawer-keyboard-inset"," from ",[173,840,841],{},"visualViewport",[151,843,844,847],{},[154,845,846],{},"Keep the popup frame stable: place header and footer content outside a scrollable body.",[154,848,849,850,853,854,857],{},"Lift a pinned footer input with ",[173,851,852],{},"padding-bottom: var(--drawer-keyboard-inset, 0px)",". Always include the ",[173,855,856],{},"0px"," fallback — the variable is only set while a keyboard is aligned.",[166,859,861],{"className":168,"code":860,"language":170,"meta":171,"style":171},"\u003CUiDrawerRoot>\n  \u003CUiDrawerVirtualKeyboardProvider>\n    …\n  \u003C\u002FUiDrawerVirtualKeyboardProvider>\n\u003C\u002FUiDrawerRoot>\n",[173,862,863,871,876,880,885],{"__ignoreMap":171},[176,864,865,867,869],{"class":178,"line":179},[176,866,183],{"class":182},[176,868,363],{"class":186},[176,870,190],{"class":182},[176,872,873],{"class":178,"line":193},[176,874,875],{"class":182},"  \u003CUiDrawerVirtualKeyboardProvider>\n",[176,877,878],{"class":178,"line":199},[176,879,560],{"class":182},[176,881,882],{"class":178,"line":205},[176,883,884],{"class":182},"  \u003C\u002FUiDrawerVirtualKeyboardProvider>\n",[176,886,887,889,891],{"class":178,"line":211},[176,888,310],{"class":182},[176,890,363],{"class":186},[176,892,190],{"class":182},[143,894],{"variant":895},"keyboard",[345,897,899],{"id":898},"indent-effect","Indent effect",[139,901,902,903,905,906,909,910,913,914,916,917,920,921,924],{},"Scale the background down when any drawer opens by wrapping the tree in ",[173,904,187],{}," and placing ",[173,907,908],{},"UiDrawerIndentBackground"," + ",[173,911,912],{},"UiDrawerIndent"," around the page. Any ",[173,915,363],{}," within the provider notifies it when it opens, which activates the indent parts (",[173,918,919],{},"[data-active]","). Portal into the framed container with ",[173,922,923],{},"to"," so the overlay is clipped to the demo.",[143,926],{"variant":927},"indent",[345,929,931],{"id":930},"non-modal","Non-modal",[139,933,934,935,938,939,942,943,946],{},"Set ",[173,936,937],{},"modal={false}"," (",[173,940,941],{},":modal=\"false\"",") to opt out of focus trapping and page scroll lock. Combine with ",[173,944,945],{},"disablePointerDismissal"," to keep the drawer open on outside clicks. There is no backdrop; Close, Escape, or swipe still dismiss.",[143,948],{"variant":949},"nonModal",[345,951,953],{"id":952},"mobile-navigation","Mobile navigation",[139,955,956],{},"You can build a full-screen mobile navigation sheet using Drawer parts, including flick-to-dismiss from the top. Scroll Area keeps a long component list inside the sheet.",[143,958],{"variant":959},"mobileNav",[345,961,963],{"id":962},"swipe-to-open","Swipe to open",[139,965,966,967,970,971,648],{},"Place ",[173,968,969],{},"UiDrawerSwipeArea"," along the edge of the viewport to enable swipe-to-open. The swipe direction defaults to the opposite of Root ",[173,972,320],{},[143,974],{"variant":975},"swipeOpen",[345,977,979],{"id":978},"close-confirmation","Close confirmation",[139,981,982],{},"Nest an Alert Dialog inside a controlled Drawer. If the parent would close while the textarea has text, keep the drawer open and show the alert instead. Shown on backdrop click, Escape, Close, or a dismiss swipe.",[143,984],{"variant":985},"confirm",[345,987,989],{"id":988},"action-sheet-with-separate-destructive-action","Action sheet with separate destructive action",[139,991,992,993,434,996,999,1000,648],{},"An action sheet with a grouped list of actions plus a separate destructive action. Filled actions use ",[173,994,995],{},".cta",[173,997,998],{},"data-cta"," — never ",[173,1001,1002],{},"$red",[143,1004],{"variant":1005},"actionSheet",[345,1007,1009],{"id":1008},"detached-triggers","Detached triggers",[139,1011,1012,1013,1015,1016,1019],{},"For a one-off, put ",[173,1014,548],{}," inside Root. When that is impractical, create a handle with ",[173,1017,1018],{},"createDrawerHandle()"," and pass it to both the trigger and the root.",[166,1021,1023],{"className":168,"code":1022,"language":170,"meta":171,"style":171},"\u003Cscript setup>\nimport { createDrawerHandle } from '~\u002Flib\u002Fui\u002Fdrawer'\n\nconst demoDrawer = createDrawerHandle\u003C{ title: string }>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiDrawerTrigger :handle=\"demoDrawer\" :payload=\"{ title: 'Profile' }\">\n    Profile\n  \u003C\u002FUiDrawerTrigger>\n  \u003CUiDrawerRoot v-slot=\"{ payload }\" :handle=\"demoDrawer\">\n    …\n  \u003C\u002FUiDrawerRoot>\n\u003C\u002Ftemplate>\n",[173,1024,1025,1035,1049,1053,1079,1087,1091,1099,1142,1147,1155,1187,1191,1199],{"__ignoreMap":171},[176,1026,1027,1029,1031,1033],{"class":178,"line":179},[176,1028,183],{"class":182},[176,1030,450],{"class":186},[176,1032,454],{"class":453},[176,1034,190],{"class":182},[176,1036,1037,1040,1043,1046],{"class":178,"line":193},[176,1038,1039],{"class":461},"import",[176,1041,1042],{"class":182}," { createDrawerHandle } ",[176,1044,1045],{"class":461},"from",[176,1047,1048],{"class":525}," '~\u002Flib\u002Fui\u002Fdrawer'\n",[176,1050,1051],{"class":178,"line":199},[176,1052,495],{"emptyLinePlaceholder":494},[176,1054,1055,1057,1060,1062,1065,1068,1071,1073,1076],{"class":178,"line":205},[176,1056,462],{"class":461},[176,1058,1059],{"class":465}," demoDrawer",[176,1061,469],{"class":461},[176,1063,1064],{"class":453}," createDrawerHandle",[176,1066,1067],{"class":182},"\u003C{ ",[176,1069,1070],{"class":786},"title",[176,1072,517],{"class":461},[176,1074,1075],{"class":465}," string",[176,1077,1078],{"class":182}," }>()\n",[176,1080,1081,1083,1085],{"class":178,"line":211},[176,1082,310],{"class":182},[176,1084,450],{"class":186},[176,1086,190],{"class":182},[176,1088,1089],{"class":178,"line":217},[176,1090,495],{"emptyLinePlaceholder":494},[176,1092,1093,1095,1097],{"class":178,"line":223},[176,1094,183],{"class":182},[176,1096,502],{"class":186},[176,1098,190],{"class":182},[176,1100,1101,1103,1105,1108,1111,1113,1115,1118,1120,1122,1125,1127,1129,1132,1135,1138,1140],{"class":178,"line":229},[176,1102,509],{"class":182},[176,1104,548],{"class":186},[176,1106,1107],{"class":182}," :",[176,1109,1110],{"class":453},"handle",[176,1112,522],{"class":182},[176,1114,526],{"class":525},[176,1116,1117],{"class":182},"demoDrawer",[176,1119,526],{"class":525},[176,1121,1107],{"class":182},[176,1123,1124],{"class":453},"payload",[176,1126,522],{"class":182},[176,1128,526],{"class":525},[176,1130,1131],{"class":182},"{ title: ",[176,1133,1134],{"class":525},"'Profile'",[176,1136,1137],{"class":182}," }",[176,1139,526],{"class":525},[176,1141,190],{"class":182},[176,1143,1144],{"class":178,"line":235},[176,1145,1146],{"class":182},"    Profile\n",[176,1148,1149,1151,1153],{"class":178,"line":241},[176,1150,565],{"class":182},[176,1152,548],{"class":186},[176,1154,190],{"class":182},[176,1156,1157,1159,1161,1164,1166,1168,1171,1173,1175,1177,1179,1181,1183,1185],{"class":178,"line":247},[176,1158,509],{"class":182},[176,1160,363],{"class":186},[176,1162,1163],{"class":453}," v-slot",[176,1165,522],{"class":182},[176,1167,526],{"class":525},[176,1169,1170],{"class":182},"{ payload }",[176,1172,526],{"class":525},[176,1174,1107],{"class":182},[176,1176,1110],{"class":453},[176,1178,522],{"class":182},[176,1180,526],{"class":525},[176,1182,1117],{"class":182},[176,1184,526],{"class":525},[176,1186,190],{"class":182},[176,1188,1189],{"class":178,"line":253},[176,1190,560],{"class":182},[176,1192,1193,1195,1197],{"class":178,"line":259},[176,1194,565],{"class":182},[176,1196,363],{"class":186},[176,1198,190],{"class":182},[176,1200,1201,1203,1205],{"class":178,"line":265},[176,1202,310],{"class":182},[176,1204,502],{"class":186},[176,1206,190],{"class":182},[139,1208,1209,1210,1212],{},"The drawer can render different content depending on which trigger opened it. Pass ",[173,1211,1124],{}," on the trigger and read it from Root’s default slot.",[143,1214],{"variant":1215},"detached",[345,1217,1219],{"id":1218},"stacking-and-animations","Stacking and animations",[139,1221,1222,1223,1226,1227,1230],{},"Use CSS transitions to animate opening, closing, swipe, and nested stacking. ",[173,1224,1225],{},"data-starting-style"," is applied when a drawer starts to open, and ",[173,1228,1229],{},"data-ending-style"," when it starts to close.",[139,1232,1233,1236,1237,648],{},[173,1234,1235],{},"--nested-drawers"," is the stack depth. The frontmost drawer has index ",[173,1238,1239],{},"0",[166,1241,1243],{"className":745,"code":1242,"language":747,"meta":171,"style":171},".popup {\n  --stack-step: 0.05;\n  --stack-scale: calc(1 - (var(--nested-drawers) * var(--stack-step)));\n  transform: translateY(var(--drawer-swipe-movement-y)) scale(var(--stack-scale));\n}\n",[173,1244,1245,1251,1264,1305,1339],{"__ignoreMap":171},[176,1246,1247,1249],{"class":178,"line":179},[176,1248,754],{"class":453},[176,1250,757],{"class":182},[176,1252,1253,1256,1258,1261],{"class":178,"line":193},[176,1254,1255],{"class":786},"  --stack-step",[176,1257,765],{"class":182},[176,1259,1260],{"class":465},"0.05",[176,1262,1263],{"class":182},";\n",[176,1265,1266,1269,1271,1274,1276,1279,1282,1284,1286,1288,1290,1292,1295,1297,1299,1302],{"class":178,"line":199},[176,1267,1268],{"class":786},"  --stack-scale",[176,1270,765],{"class":182},[176,1272,1273],{"class":465},"calc",[176,1275,475],{"class":182},[176,1277,1278],{"class":465},"1",[176,1280,1281],{"class":461}," -",[176,1283,938],{"class":182},[176,1285,781],{"class":465},[176,1287,475],{"class":182},[176,1289,1235],{"class":786},[176,1291,790],{"class":182},[176,1293,1294],{"class":461},"*",[176,1296,796],{"class":465},[176,1298,475],{"class":182},[176,1300,1301],{"class":786},"--stack-step",[176,1303,1304],{"class":182},")));\n",[176,1306,1307,1309,1311,1313,1315,1317,1319,1321,1324,1327,1329,1331,1333,1336],{"class":178,"line":205},[176,1308,762],{"class":465},[176,1310,765],{"class":182},[176,1312,768],{"class":465},[176,1314,475],{"class":182},[176,1316,781],{"class":465},[176,1318,475],{"class":182},[176,1320,801],{"class":786},[176,1322,1323],{"class":182},")) ",[176,1325,1326],{"class":465},"scale",[176,1328,475],{"class":182},[176,1330,781],{"class":465},[176,1332,475],{"class":182},[176,1334,1335],{"class":786},"--stack-scale",[176,1337,1338],{"class":182},"));\n",[176,1340,1341],{"class":178,"line":211},[176,1342,814],{"class":182},[139,1344,1345,1348,1349,1352],{},[173,1346,1347],{},"data-nested-drawer-open"," marks drawers behind the frontmost one. Pair it with ",[173,1350,1351],{},"data-nested-drawer-swiping"," to show parent content again while the child is being swiped.",[166,1354,1356],{"className":745,"code":1355,"language":747,"meta":171,"style":171},".content {\n  transition: opacity 300ms;\n}\n\n.popup[data-nested-drawer-open] .content {\n  opacity: 0;\n}\n\n.popup[data-nested-drawer-open][data-nested-drawer-swiping] .content {\n  opacity: 1;\n}\n",[173,1357,1358,1365,1381,1385,1389,1405,1416,1420,1424,1443,1453],{"__ignoreMap":171},[176,1359,1360,1363],{"class":178,"line":179},[176,1361,1362],{"class":453},".content",[176,1364,757],{"class":182},[176,1366,1367,1370,1373,1376,1379],{"class":178,"line":193},[176,1368,1369],{"class":465},"  transition",[176,1371,1372],{"class":182},": opacity ",[176,1374,1375],{"class":465},"300",[176,1377,1378],{"class":461},"ms",[176,1380,1263],{"class":182},[176,1382,1383],{"class":178,"line":199},[176,1384,814],{"class":182},[176,1386,1387],{"class":178,"line":205},[176,1388,495],{"emptyLinePlaceholder":494},[176,1390,1391,1393,1396,1398,1401,1403],{"class":178,"line":211},[176,1392,754],{"class":453},[176,1394,1395],{"class":182},"[",[176,1397,1347],{"class":453},[176,1399,1400],{"class":182},"] ",[176,1402,1362],{"class":453},[176,1404,757],{"class":182},[176,1406,1407,1410,1412,1414],{"class":178,"line":217},[176,1408,1409],{"class":465},"  opacity",[176,1411,765],{"class":182},[176,1413,1239],{"class":465},[176,1415,1263],{"class":182},[176,1417,1418],{"class":178,"line":223},[176,1419,814],{"class":182},[176,1421,1422],{"class":178,"line":229},[176,1423,495],{"emptyLinePlaceholder":494},[176,1425,1426,1428,1430,1432,1435,1437,1439,1441],{"class":178,"line":235},[176,1427,754],{"class":453},[176,1429,1395],{"class":182},[176,1431,1347],{"class":453},[176,1433,1434],{"class":182},"][",[176,1436,1351],{"class":453},[176,1438,1400],{"class":182},[176,1440,1362],{"class":453},[176,1442,757],{"class":182},[176,1444,1445,1447,1449,1451],{"class":178,"line":241},[176,1446,1409],{"class":465},[176,1448,765],{"class":182},[176,1450,1278],{"class":465},[176,1452,1263],{"class":182},[176,1454,1455],{"class":178,"line":247},[176,1456,814],{"class":182},[139,1458,1459,597,1462,1464,1465,1467,1468,1471,1472,1475],{},[173,1460,1461],{},"--drawer-swipe-movement-x",[173,1463,801],{},", and ",[173,1466,787],{}," offset the popup while dragging. ",[173,1469,1470],{},"--drawer-swipe-progress"," fades the backdrop; ",[173,1473,1474],{},"--drawer-swipe-strength"," can scale the release duration.",[166,1477,1479],{"className":745,"code":1478,"language":747,"meta":171,"style":171},".backdrop {\n  --backdrop-opacity: 0.2;\n  opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));\n}\n\n.popup[data-ending-style][data-swipe-direction='right'] {\n  transform: translateX(100%);\n}\n\n.popup[data-ending-style][data-swipe-direction='down'] {\n  transform: translateY(100%);\n}\n",[173,1480,1481,1488,1500,1535,1539,1543,1564,1584,1588,1592,1611,1627],{"__ignoreMap":171},[176,1482,1483,1486],{"class":178,"line":179},[176,1484,1485],{"class":453},".backdrop",[176,1487,757],{"class":182},[176,1489,1490,1493,1495,1498],{"class":178,"line":193},[176,1491,1492],{"class":786},"  --backdrop-opacity",[176,1494,765],{"class":182},[176,1496,1497],{"class":465},"0.2",[176,1499,1263],{"class":182},[176,1501,1502,1504,1506,1508,1510,1512,1514,1517,1519,1521,1523,1525,1527,1529,1531,1533],{"class":178,"line":199},[176,1503,1409],{"class":465},[176,1505,765],{"class":182},[176,1507,1273],{"class":465},[176,1509,475],{"class":182},[176,1511,781],{"class":465},[176,1513,475],{"class":182},[176,1515,1516],{"class":786},"--backdrop-opacity",[176,1518,790],{"class":182},[176,1520,1294],{"class":461},[176,1522,938],{"class":182},[176,1524,1278],{"class":465},[176,1526,1281],{"class":461},[176,1528,796],{"class":465},[176,1530,475],{"class":182},[176,1532,1470],{"class":786},[176,1534,1304],{"class":182},[176,1536,1537],{"class":178,"line":205},[176,1538,814],{"class":182},[176,1540,1541],{"class":178,"line":211},[176,1542,495],{"emptyLinePlaceholder":494},[176,1544,1545,1547,1549,1551,1553,1556,1558,1561],{"class":178,"line":217},[176,1546,754],{"class":453},[176,1548,1395],{"class":182},[176,1550,1229],{"class":453},[176,1552,1434],{"class":182},[176,1554,1555],{"class":453},"data-swipe-direction",[176,1557,522],{"class":461},[176,1559,1560],{"class":525},"'right'",[176,1562,1563],{"class":182},"] {\n",[176,1565,1566,1568,1570,1573,1575,1578,1581],{"class":178,"line":223},[176,1567,762],{"class":465},[176,1569,765],{"class":182},[176,1571,1572],{"class":465},"translateX",[176,1574,475],{"class":182},[176,1576,1577],{"class":465},"100",[176,1579,1580],{"class":461},"%",[176,1582,1583],{"class":182},");\n",[176,1585,1586],{"class":178,"line":229},[176,1587,814],{"class":182},[176,1589,1590],{"class":178,"line":235},[176,1591,495],{"emptyLinePlaceholder":494},[176,1593,1594,1596,1598,1600,1602,1604,1606,1609],{"class":178,"line":241},[176,1595,754],{"class":453},[176,1597,1395],{"class":182},[176,1599,1229],{"class":453},[176,1601,1434],{"class":182},[176,1603,1555],{"class":453},[176,1605,522],{"class":461},[176,1607,1608],{"class":525},"'down'",[176,1610,1563],{"class":182},[176,1612,1613,1615,1617,1619,1621,1623,1625],{"class":178,"line":247},[176,1614,762],{"class":465},[176,1616,765],{"class":182},[176,1618,768],{"class":465},[176,1620,475],{"class":182},[176,1622,1577],{"class":465},[176,1624,1580],{"class":461},[176,1626,1583],{"class":182},[176,1628,1629],{"class":178,"line":253},[176,1630,814],{"class":182},[139,1632,1633],{},"The nested-drawers demo above uses this stacking.",[146,1635,1637],{"id":1636},"api-reference","API reference",[345,1639,1641],{"id":1640},"root","Root",[139,1643,1644,1645,648],{},"Groups all parts of the drawer. Renders nothing of its own. Default slot receives ",[173,1646,1647],{},"{ payload, triggerId }",[1649,1650,1651,1670],"table",{},[1652,1653,1654],"thead",{},[1655,1656,1657,1661,1664,1667],"tr",{},[1658,1659,1660],"th",{},"Prop",[1658,1662,1663],{},"Type",[1658,1665,1666],{},"Default",[1658,1668,1669],{},"Description",[1671,1672,1673,1698,1716,1734,1751,1768,1792,1810,1838,1856,1874],"tbody",{},[1655,1674,1675,1681,1686,1690],{},[1676,1677,1678],"td",{},[173,1679,1680],{},"defaultOpen",[1676,1682,1683],{},[173,1684,1685],{},"boolean",[1676,1687,1688],{},[173,1689,478],{},[1676,1691,1692,1693,434,1695,1697],{},"Uncontrolled initial open. Use ",[173,1694,433],{},[173,1696,437],{}," for a controlled drawer.",[1655,1699,1700,1704,1708,1711],{},[1676,1701,1702],{},[173,1703,433],{},[1676,1705,1706],{},[173,1707,1685],{},[1676,1709,1710],{},"—",[1676,1712,1713,1714,679],{},"Controlled open state (",[173,1715,437],{},[1655,1717,1718,1722,1727,1729],{},[1676,1719,1720],{},[173,1721,1110],{},[1676,1723,1724],{},[173,1725,1726],{},"BaseDrawerHandle",[1676,1728,1710],{},[1676,1730,1731,1732,648],{},"Links detached triggers. Create with ",[173,1733,1018],{},[1655,1735,1736,1741,1746,1748],{},[1676,1737,1738],{},[173,1739,1740],{},"triggerId",[1676,1742,1743],{},[173,1744,1745],{},"string | null",[1676,1747,1710],{},[1676,1749,1750],{},"Active trigger id in controlled mode.",[1655,1752,1753,1757,1761,1765],{},[1676,1754,1755],{},[173,1756,945],{},[1676,1758,1759],{},[173,1760,1685],{},[1676,1762,1763],{},[173,1764,478],{},[1676,1766,1767],{},"Do not close on backdrop (outside) press. Escape and Close still work.",[1655,1769,1770,1775,1779,1784],{},[1676,1771,1772],{},[173,1773,1774],{},"modal",[1676,1776,1777],{},[173,1778,1685],{},[1676,1780,1781],{},[173,1782,1783],{},"true",[1676,1785,1786,1788,1789,1791],{},[173,1787,1783],{}," traps focus and locks page scroll. ",[173,1790,478],{}," allows interaction with the rest of the page.",[1655,1793,1794,1798,1803,1807],{},[1676,1795,1796],{},[173,1797,320],{},[1676,1799,1800],{},[173,1801,1802],{},"'up' | 'down' | 'left' | 'right'",[1676,1804,1805],{},[173,1806,1608],{},[1676,1808,1809],{},"Edge the drawer sits on, and the direction used to dismiss.",[1655,1811,1812,1816,1821,1823],{},[1676,1813,1814],{},[173,1815,663],{},[1676,1817,1818],{},[173,1819,1820],{},"Array\u003Cnumber | string>",[1676,1822,1710],{},[1676,1824,1825,1826,1829,1830,1833,1834,434,1836,648],{},"Snap heights. ",[173,1827,1828],{},"0–1"," = viewport fraction; ",[173,1831,1832],{},">1"," = pixels; strings in ",[173,1835,667],{},[173,1837,670],{},[1655,1839,1840,1845,1850,1853],{},[1676,1841,1842],{},[173,1843,1844],{},"defaultSnapPoint",[1676,1846,1847],{},[173,1848,1849],{},"number | string | null",[1676,1851,1852],{},"first point",[1676,1854,1855],{},"Uncontrolled initial snap.",[1655,1857,1858,1862,1866,1868],{},[1676,1859,1860],{},[173,1861,733],{},[1676,1863,1864],{},[173,1865,1849],{},[1676,1867,1710],{},[1676,1869,1870,1871,679],{},"Controlled snap (",[173,1872,1873],{},"v-model:snap-point",[1655,1875,1876,1880,1884,1888],{},[1676,1877,1878],{},[173,1879,820],{},[1676,1881,1882],{},[173,1883,1685],{},[1676,1885,1886],{},[173,1887,478],{},[1676,1889,1890],{},"Choose the next snap by drag distance instead of nearest point.",[1649,1892,1893,1904],{},[1652,1894,1895],{},[1655,1896,1897,1900,1902],{},[1658,1898,1899],{},"Event",[1658,1901,1663],{},[1658,1903,1669],{},[1671,1905,1906,1921],{},[1655,1907,1908,1913,1918],{},[1676,1909,1910],{},[173,1911,1912],{},"@update:open",[1676,1914,1915],{},[173,1916,1917],{},"(open: boolean) => void",[1676,1919,1920],{},"Emitted when the drawer opens or closes.",[1655,1922,1923,1928,1933],{},[1676,1924,1925],{},[173,1926,1927],{},"@update:snapPoint",[1676,1929,1930],{},[173,1931,1932],{},"(point: number | string | null) => void",[1676,1934,1935],{},"Emitted when the active snap point changes.",[345,1937,1939],{"id":1938},"provider","Provider",[139,1941,1942],{},"Coordinates indent \u002F background effects for every drawer under it. Renders nothing of its own.",[345,1944,1946],{"id":1945},"indentbackground","IndentBackground",[139,1948,1949,1950,1952,1953,1955],{},"Layer behind ",[173,1951,912],{},". Receives ",[173,1954,919],{}," while any descendant drawer is open.",[345,1957,1958],{"id":927},"Indent",[139,1960,1961,1962,597,1964,679],{},"Scales its children while a descendant drawer is open (",[173,1963,919],{},[173,1965,1470],{},[345,1967,1969],{"id":1968},"trigger","Trigger",[139,1971,1972,1973,648],{},"Button that opens the drawer. Renders a ",[173,1974,1975],{},"\u003Cbutton>",[1649,1977,1978,1990],{},[1652,1979,1980],{},[1655,1981,1982,1984,1986,1988],{},[1658,1983,1660],{},[1658,1985,1663],{},[1658,1987,1666],{},[1658,1989,1669],{},[1671,1991,1992,2011,2026,2042],{},[1655,1993,1994,1999,2003,2005],{},[1676,1995,1996],{},[173,1997,1998],{},"disabled",[1676,2000,2001],{},[173,2002,1685],{},[1676,2004,1710],{},[1676,2006,2007,2008,648],{},"Ignore presses. Sets ",[173,2009,2010],{},"data-disabled",[1655,2012,2013,2017,2021,2023],{},[1676,2014,2015],{},[173,2016,1110],{},[1676,2018,2019],{},[173,2020,1726],{},[1676,2022,1710],{},[1676,2024,2025],{},"Detached handle. Required when the trigger is outside Root.",[1655,2027,2028,2032,2037,2039],{},[1676,2029,2030],{},[173,2031,1124],{},[1676,2033,2034],{},[173,2035,2036],{},"unknown",[1676,2038,1710],{},[1676,2040,2041],{},"Value exposed on Root’s slot when this trigger opens the drawer.",[1655,2043,2044,2049,2054,2057],{},[1676,2045,2046],{},[173,2047,2048],{},"id",[1676,2050,2051],{},[173,2052,2053],{},"string",[1676,2055,2056],{},"generated",[1676,2058,2059,2060,648],{},"Trigger id. Used with Root ",[173,2061,1740],{},[1649,2063,2064,2073],{},[1652,2065,2066],{},[1655,2067,2068,2071],{},[1658,2069,2070],{},"Attribute",[1658,2072,1669],{},[1671,2074,2075,2085],{},[1655,2076,2077,2082],{},[1676,2078,2079],{},[173,2080,2081],{},"data-popup-open",[1676,2083,2084],{},"Present when this trigger’s drawer is open.",[1655,2086,2087,2091],{},[1676,2088,2089],{},[173,2090,2010],{},[1676,2092,2093],{},"Present when the trigger is disabled.",[345,2095,2097],{"id":2096},"swipearea","SwipeArea",[139,2099,2100],{},"Edge hit target that opens the drawer when dragged.",[1649,2102,2103,2115],{},[1652,2104,2105],{},[1655,2106,2107,2109,2111,2113],{},[1658,2108,1660],{},[1658,2110,1663],{},[1658,2112,1666],{},[1658,2114,1669],{},[1671,2116,2117,2133],{},[1655,2118,2119,2123,2127,2130],{},[1676,2120,2121],{},[173,2122,320],{},[1676,2124,2125],{},[173,2126,1802],{},[1676,2128,2129],{},"opposite of Root",[1676,2131,2132],{},"Direction of the open gesture.",[1655,2134,2135,2139,2143,2145],{},[1676,2136,2137],{},[173,2138,1998],{},[1676,2140,2141],{},[173,2142,1685],{},[1676,2144,1710],{},[1676,2146,2147],{},"Ignore presses.",[345,2149,2151],{"id":2150},"virtualkeyboardprovider","VirtualKeyboardProvider",[139,2153,2154,2155,2157,2158,2160,2161,2164],{},"Watches ",[173,2156,841],{}," and exposes ",[173,2159,837],{}," (and ",[173,2162,2163],{},"keyboardInset"," on Root) while a software keyboard is open.",[345,2166,2168],{"id":2167},"portal","Portal",[139,2170,2171,2172,2175,2176,2179,2180,2182],{},"Teleports to ",[173,2173,2174],{},"body"," while the overlay is present (",[173,2177,2178],{},"useCssPresence","). Pass ",[173,2181,923],{}," to portal into a container (indent \u002F swipe demos).",[1649,2184,2185,2197],{},[1652,2186,2187],{},[1655,2188,2189,2191,2193,2195],{},[1658,2190,1660],{},[1658,2192,1663],{},[1658,2194,1666],{},[1658,2196,1669],{},[1671,2198,2199],{},[1655,2200,2201,2205,2210,2215],{},[1676,2202,2203],{},[173,2204,923],{},[1676,2206,2207],{},[173,2208,2209],{},"string | HTMLElement",[1676,2211,2212],{},[173,2213,2214],{},"'body'",[1676,2216,2217],{},"Teleport target.",[1649,2219,2220,2228],{},[1652,2221,2222],{},[1655,2223,2224,2226],{},[1658,2225,2070],{},[1658,2227,1669],{},[1671,2229,2230,2240,2250,2260,2269],{},[1655,2231,2232,2237],{},[1676,2233,2234],{},[173,2235,2236],{},"data-open",[1676,2238,2239],{},"Present when the drawer is open.",[1655,2241,2242,2247],{},[1676,2243,2244],{},[173,2245,2246],{},"data-closed",[1676,2248,2249],{},"Present while present but not open (exit transition).",[1655,2251,2252,2257],{},[1676,2253,2254],{},[173,2255,2256],{},"data-nested",[1676,2258,2259],{},"Present when nested in another overlay.",[1655,2261,2262,2266],{},[1676,2263,2264],{},[173,2265,1225],{},[1676,2267,2268],{},"Present while animating in.",[1655,2270,2271,2275],{},[1676,2272,2273],{},[173,2274,1229],{},[1676,2276,2277],{},"Present while animating out.",[345,2279,2281],{"id":2280},"backdrop","Backdrop",[139,2283,2284,2285,2287,2288,2291,2292,648],{},"Covers the viewport. Click dismisses unless Root ",[173,2286,945],{}," is set. Nested drawers skip rendering the child backdrop unless ",[173,2289,2290],{},"forceRender"," is set. Opacity is ",[173,2293,2294],{},"0.2 × (1 - --drawer-swipe-progress)",[1649,2296,2297,2309],{},[1652,2298,2299],{},[1655,2300,2301,2303,2305,2307],{},[1658,2302,1660],{},[1658,2304,1663],{},[1658,2306,1666],{},[1658,2308,1669],{},[1671,2310,2311],{},[1655,2312,2313,2317,2321,2323],{},[1676,2314,2315],{},[173,2316,2290],{},[1676,2318,2319],{},[173,2320,1685],{},[1676,2322,1710],{},[1676,2324,2325],{},"Render even when nested.",[1649,2327,2328,2336],{},[1652,2329,2330],{},[1655,2331,2332,2334],{},[1658,2333,2070],{},[1658,2335,1669],{},[1671,2337,2338,2346,2355,2363,2371],{},[1655,2339,2340,2344],{},[1676,2341,2342],{},[173,2343,2236],{},[1676,2345,2239],{},[1655,2347,2348,2352],{},[1676,2349,2350],{},[173,2351,2246],{},[1676,2353,2354],{},"Present when the drawer is closed.",[1655,2356,2357,2361],{},[1676,2358,2359],{},[173,2360,1225],{},[1676,2362,2268],{},[1655,2364,2365,2369],{},[1676,2366,2367],{},[173,2368,1229],{},[1676,2370,2277],{},[1655,2372,2373,2378],{},[1676,2374,2375],{},[173,2376,2377],{},"data-swiping",[1676,2379,2380],{},"Present while the popup is being dragged.",[345,2382,2384],{"id":2383},"viewport","Viewport",[139,2386,2387],{},"Pins the popup to the swipe edge.",[1649,2389,2390,2398],{},[1652,2391,2392],{},[1655,2393,2394,2396],{},[1658,2395,2070],{},[1658,2397,1669],{},[1671,2399,2400,2408,2416,2424,2433,2441,2449],{},[1655,2401,2402,2406],{},[1676,2403,2404],{},[173,2405,2236],{},[1676,2407,2239],{},[1655,2409,2410,2414],{},[1676,2411,2412],{},[173,2413,2246],{},[1676,2415,2354],{},[1655,2417,2418,2422],{},[1676,2419,2420],{},[173,2421,2256],{},[1676,2423,2259],{},[1655,2425,2426,2430],{},[1676,2427,2428],{},[173,2429,1347],{},[1676,2431,2432],{},"Present when a nested drawer is open.",[1655,2434,2435,2439],{},[1676,2436,2437],{},[173,2438,1225],{},[1676,2440,2268],{},[1655,2442,2443,2447],{},[1676,2444,2445],{},[173,2446,1229],{},[1676,2448,2277],{},[1655,2450,2451,2455],{},[1676,2452,2453],{},[173,2454,1555],{},[1676,2456,2457,648],{},[173,2458,1802],{},[345,2460,2462],{"id":2461},"popup","Popup",[139,2464,2465,2468,2469,2471,2472,434,2474,2476,2477,2480],{},[173,2466,2467],{},"role=\"dialog\"",". Escape closes. Focus stays inside until close when ",[173,2470,1774],{}," is true. Enter and leave use ",[173,2473,1225],{},[173,2475,1229],{}," (450ms ",[173,2478,2479],{},"cubic-bezier(0.32, 0.72, 0, 1)","). Drag in the swipe direction to dismiss. No animation library. No drop-shadow.",[1649,2482,2483,2495],{},[1652,2484,2485],{},[1655,2486,2487,2489,2491,2493],{},[1658,2488,1660],{},[1658,2490,1663],{},[1658,2492,1666],{},[1658,2494,1669],{},[1671,2496,2497,2518],{},[1655,2498,2499,2504,2509,2512],{},[1676,2500,2501],{},[173,2502,2503],{},"initialFocus",[1676,2505,2506],{},[173,2507,2508],{},"HTMLElement | false | null",[1676,2510,2511],{},"first tabbable",[1676,2513,2514,2515,2517],{},"Element to focus on open. ",[173,2516,478],{}," skips moving focus.",[1655,2519,2520,2525,2529,2532],{},[1676,2521,2522],{},[173,2523,2524],{},"finalFocus",[1676,2526,2527],{},[173,2528,2508],{},[1676,2530,2531],{},"previous element",[1676,2533,2534,2535,2537],{},"Element to focus on close. ",[173,2536,478],{}," skips restoring focus.",[1649,2539,2540,2548],{},[1652,2541,2542],{},[1655,2543,2544,2546],{},[1658,2545,2070],{},[1658,2547,1669],{},[1671,2549,2550,2558,2566,2574,2582,2591,2599,2607,2617,2626,2636],{},[1655,2551,2552,2556],{},[1676,2553,2554],{},[173,2555,2236],{},[1676,2557,2239],{},[1655,2559,2560,2564],{},[1676,2561,2562],{},[173,2563,2246],{},[1676,2565,2354],{},[1655,2567,2568,2572],{},[1676,2569,2570],{},[173,2571,2256],{},[1676,2573,2259],{},[1655,2575,2576,2580],{},[1676,2577,2578],{},[173,2579,1347],{},[1676,2581,2432],{},[1655,2583,2584,2588],{},[1676,2585,2586],{},[173,2587,1351],{},[1676,2589,2590],{},"Present while a nested drawer is being dragged.",[1655,2592,2593,2597],{},[1676,2594,2595],{},[173,2596,1225],{},[1676,2598,2268],{},[1655,2600,2601,2605],{},[1676,2602,2603],{},[173,2604,1229],{},[1676,2606,2277],{},[1655,2608,2609,2613],{},[1676,2610,2611],{},[173,2612,1555],{},[1676,2614,2615,648],{},[173,2616,1802],{},[1655,2618,2619,2623],{},[1676,2620,2621],{},[173,2622,2377],{},[1676,2624,2625],{},"Present while this popup is being dragged.",[1655,2627,2628,2633],{},[1676,2629,2630],{},[173,2631,2632],{},"data-expanded",[1676,2634,2635],{},"Present when the active snap is near full height.",[1655,2637,2638,2643],{},[1676,2639,2640],{},[173,2641,2642],{},"data-has-snap",[1676,2644,2645,2646,648],{},"Present when Root has ",[173,2647,663],{},[1649,2649,2650,2659],{},[1652,2651,2652],{},[1655,2653,2654,2657],{},[1658,2655,2656],{},"Variable",[1658,2658,1669],{},[1671,2660,2661,2670,2681,2692,2701,2713,2725],{},[1655,2662,2663,2667],{},[1676,2664,2665],{},[173,2666,1235],{},[1676,2668,2669],{},"How many drawers are nested inside this one.",[1655,2671,2672,2678],{},[1676,2673,2674,434,2676],{},[173,2675,1461],{},[173,2677,801],{},[1676,2679,2680],{},"Drag offset in px.",[1655,2682,2683,2687],{},[1676,2684,2685],{},[173,2686,1470],{},[1676,2688,2689,2691],{},[173,2690,1828],{}," how far the dismiss swipe has traveled.",[1655,2693,2694,2698],{},[1676,2695,2696],{},[173,2697,1474],{},[1676,2699,2700],{},"Release duration multiplier.",[1655,2702,2703,2707],{},[1676,2704,2705],{},[173,2706,787],{},[1676,2708,2709,2710,2712],{},"Extra ",[173,2711,768],{}," for the active snap.",[1655,2714,2715,2719],{},[1676,2716,2717],{},[173,2718,837],{},[1676,2720,2721,2722,2724],{},"Software keyboard overlap, with a ",[173,2723,856],{}," fallback.",[1655,2726,2727,2732],{},[1676,2728,2729],{},[173,2730,2731],{},"--drawer-height",[1676,2733,2734],{},"Measured popup height.",[345,2736,2738],{"id":2737},"content","Content",[139,2740,2741,2742,2744,2745,2747,2748,648],{},"Scrollable body. Mark a child with ",[173,2743,328],{}," to skip swipe there. Fades out when ",[173,2746,639],{}," unless ",[173,2749,2750],{},"[data-nested-drawer-swiping]",[345,2752,2753],{"id":1070},"Title",[139,2755,2756,2757,648],{},"Heading that labels the drawer. Renders an ",[173,2758,2759],{},"\u003Ch2>",[1649,2761,2762,2774],{},[1652,2763,2764],{},[1655,2765,2766,2768,2770,2772],{},[1658,2767,1660],{},[1658,2769,1663],{},[1658,2771,1666],{},[1658,2773,1669],{},[1671,2775,2776],{},[1655,2777,2778,2782,2786,2788],{},[1676,2779,2780],{},[173,2781,2048],{},[1676,2783,2784],{},[173,2785,2053],{},[1676,2787,2056],{},[1676,2789,2790],{},"Override the label id used by the popup.",[345,2792,1669],{"id":2793},"description",[139,2795,2796,2797,648],{},"Supporting text. Renders a ",[173,2798,2799],{},"\u003Cp>",[345,2801,2803],{"id":2802},"close","Close",[139,2805,2806,2807,2809,2810,2813],{},"Button that sets open to ",[173,2808,478],{},". Add ",[173,2811,2812],{},"class=\"cta\""," for a filled action.",[1649,2815,2816,2828],{},[1652,2817,2818],{},[1655,2819,2820,2822,2824,2826],{},[1658,2821,1660],{},[1658,2823,1663],{},[1658,2825,1666],{},[1658,2827,1669],{},[1671,2829,2830],{},[1655,2831,2832,2836,2840,2842],{},[1676,2833,2834],{},[173,2835,1998],{},[1676,2837,2838],{},[173,2839,1685],{},[1676,2841,1710],{},[1676,2843,2007,2844,648],{},[173,2845,2010],{},[1649,2847,2848,2856],{},[1652,2849,2850],{},[1655,2851,2852,2854],{},[1658,2853,2070],{},[1658,2855,1669],{},[1671,2857,2858],{},[1655,2859,2860,2864],{},[1676,2861,2862],{},[173,2863,2010],{},[1676,2865,2866],{},"Present when the button is disabled.",[345,2868,2870],{"id":2869},"createdrawerhandle","createDrawerHandle",[139,2872,2873,2874,2876,2877,2879],{},"Creates a handle that connects ",[173,2875,363],{}," with detached ",[173,2878,548],{}," components.",[166,2881,2885],{"className":2882,"code":2883,"language":2884,"meta":171,"style":171},"language-ts shiki shiki-themes github-light github-dark","const handle = createDrawerHandle\u003C{ title: string }>()\nhandle.show({ title: 'Profile' }, 'drawer-trigger-1')\nhandle.hide()\n","ts",[173,2886,2887,2908,2929],{"__ignoreMap":171},[176,2888,2889,2891,2894,2896,2898,2900,2902,2904,2906],{"class":178,"line":179},[176,2890,462],{"class":461},[176,2892,2893],{"class":465}," handle",[176,2895,469],{"class":461},[176,2897,1064],{"class":453},[176,2899,1067],{"class":182},[176,2901,1070],{"class":786},[176,2903,517],{"class":461},[176,2905,1075],{"class":465},[176,2907,1078],{"class":182},[176,2909,2910,2913,2916,2919,2921,2924,2927],{"class":178,"line":193},[176,2911,2912],{"class":182},"handle.",[176,2914,2915],{"class":453},"show",[176,2917,2918],{"class":182},"({ title: ",[176,2920,1134],{"class":525},[176,2922,2923],{"class":182}," }, ",[176,2925,2926],{"class":525},"'drawer-trigger-1'",[176,2928,481],{"class":182},[176,2930,2931,2933,2936],{"class":178,"line":199},[176,2932,2912],{"class":182},[176,2934,2935],{"class":453},"hide",[176,2937,2938],{"class":182},"()\n",[1649,2940,2941,2949],{},[1652,2942,2943],{},[1655,2944,2945,2947],{},[1658,2946,47],{},[1658,2948,1669],{},[1671,2950,2951,2960,2969,2978,2988],{},[1655,2952,2953,2957],{},[1676,2954,2955],{},[173,2956,433],{},[1676,2958,2959],{},"Ref of whether the drawer is open.",[1655,2961,2962,2966],{},[1676,2963,2964],{},[173,2965,1124],{},[1676,2967,2968],{},"Ref of the active trigger payload.",[1655,2970,2971,2975],{},[1676,2972,2973],{},[173,2974,1740],{},[1676,2976,2977],{},"Ref of the active trigger id.",[1655,2979,2980,2985],{},[1676,2981,2982],{},[173,2983,2984],{},"show(payload?, triggerId?)",[1676,2986,2987],{},"Open the drawer.",[1655,2989,2990,2995],{},[1676,2991,2992],{},[173,2993,2994],{},"hide()",[1676,2996,2997],{},"Close the drawer.",[2999,3000,3001],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":171,"searchDepth":193,"depth":193,"links":3003},[3004,3005,3006,3021],{"id":148,"depth":193,"text":149},{"id":163,"depth":193,"text":164},{"id":342,"depth":193,"text":343,"children":3007},[3008,3009,3010,3011,3012,3013,3014,3015,3016,3017,3018,3019,3020],{"id":347,"depth":199,"text":348},{"id":582,"depth":199,"text":583},{"id":632,"depth":199,"text":633},{"id":657,"depth":199,"text":658},{"id":827,"depth":199,"text":828},{"id":898,"depth":199,"text":899},{"id":930,"depth":199,"text":931},{"id":952,"depth":199,"text":953},{"id":962,"depth":199,"text":963},{"id":978,"depth":199,"text":979},{"id":988,"depth":199,"text":989},{"id":1008,"depth":199,"text":1009},{"id":1218,"depth":199,"text":1219},{"id":1636,"depth":193,"text":1637,"children":3022},[3023,3024,3025,3026,3027,3028,3029,3030,3031,3032,3033,3034,3035,3036,3037,3038],{"id":1640,"depth":199,"text":1641},{"id":1938,"depth":199,"text":1939},{"id":1945,"depth":199,"text":1946},{"id":927,"depth":199,"text":1958},{"id":1968,"depth":199,"text":1969},{"id":2096,"depth":199,"text":2097},{"id":2150,"depth":199,"text":2151},{"id":2167,"depth":199,"text":2168},{"id":2280,"depth":199,"text":2281},{"id":2383,"depth":199,"text":2384},{"id":2461,"depth":199,"text":2462},{"id":2737,"depth":199,"text":2738},{"id":1070,"depth":199,"text":2753},{"id":2793,"depth":199,"text":1669},{"id":2802,"depth":199,"text":2803},{"id":2869,"depth":199,"text":2870},"A panel that slides in from the edge of the screen","md",{},{"title":44,"description":3039},"pkg\u002Fdrawer","5vyQZoTLdG-6u2_lWE9rrDeThzE_BURvzIagQjl3Pmk",1791043754656]