[{"data":1,"prerenderedAt":1394},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fkeyboard-aware":460,"\u002Fcomponents\u002Fkeyboard-aware-surround":1389},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,437,441,446,450,455],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Why use Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":433,"path":434,"stem":435,"package":11,"icon":436},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":438,"path":439,"stem":440,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":442,"path":443,"stem":444,"package":11,"icon":445},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":447,"path":448,"stem":449,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":461,"title":164,"body":462,"description":1383,"extension":1384,"links":11,"meta":1385,"navigation":1386,"package":63,"path":165,"seo":1387,"stem":166,"__hash__":1388},"docs\u002F3.components\u002Fkeyboard-aware.md",{"type":463,"value":464,"toc":1366},"minimark",[465,470,493,513,530,535,539,738,745,828,834,880,884,911,914,918,924,1048,1053,1164,1169,1234,1238,1243,1280,1284,1287,1290,1304,1308,1336,1340,1362],[466,467,469],"h2",{"id":468},"overview","Overview",[471,472,473,474,477,478,480,481,484,485,488,489,492],"p",{},"The keyboard-aware primitives coordinate focused inputs with a movable or scrollable container. ",[475,476,46],"code",{}," re-exports the three ",[475,479,41],{}," primitives as ",[475,482,483],{},"VyKeyboardAwareRoot",", ",[475,486,487],{},"VyKeyboardAwareResponder",", and ",[475,490,491],{},"VyKeyboardAwareTrigger",".",[471,494,495,496,501,502,508,509,512],{},"Use them for drawers, forms, chat composers, and other layouts where the iOS or Android keyboard can cover the focused control. ",[497,498,499],"a",{"href":298},[475,500,297],{}," and ",[497,503,505],{"href":504},"\u002Fcomponents\u002Fdrawer",[475,506,507],{},"Drawer"," wire them up for you through their ",[475,510,511],{},"keyboard-aware"," prop.",[471,514,515,516,519,520,523,524,526,527,492],{},"Inputs register themselves: any ",[475,517,518],{},"VyInput"," or ",[475,521,522],{},"VyTextarea"," rendered under a root reports focus, blur, and keyboard height automatically. A ",[475,525,491],{}," wrap is only needed to group several inputs into one measured region or to add an ",[475,528,529],{},"offset",[531,532],"component-code",{"height":533,"name":534},"160px","keyboard-aware-example",[466,536,538],{"id":537},"usage","Usage",[540,541,546],"pre",{"className":542,"code":543,"language":544,"meta":545,"style":545},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { VyInput } from '@vyui\u002Fkit\u002Finput'\nimport { VyKeyboardAwareResponder, VyKeyboardAwareRoot } from '@vyui\u002Fkit\u002Fkeyboard-aware'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyKeyboardAwareRoot>\n    \u003CVyKeyboardAwareResponder>\n      \u003CVyInput placeholder=\"Message\" \u002F>\n    \u003C\u002FVyKeyboardAwareResponder>\n  \u003C\u002FVyKeyboardAwareRoot>\n\u003C\u002Ftemplate>\n","vue","",[475,547,548,583,612,639,649,656,666,676,686,709,719,729],{"__ignoreMap":545},[549,550,553,557,561,565,568,571,574,578,580],"span",{"class":551,"line":552},"line",1,[549,554,556],{"class":555},"sMK4o","\u003C",[549,558,560],{"class":559},"swJcz","script",[549,562,564],{"class":563},"spNyl"," setup",[549,566,567],{"class":563}," lang",[549,569,570],{"class":555},"=",[549,572,573],{"class":555},"\"",[549,575,577],{"class":576},"sfazB","ts",[549,579,573],{"class":555},[549,581,582],{"class":555},">\n",[549,584,586,590,593,597,600,603,606,609],{"class":551,"line":585},2,[549,587,589],{"class":588},"s7zQu","import",[549,591,592],{"class":555}," {",[549,594,596],{"class":595},"sTEyZ"," VyInput",[549,598,599],{"class":555}," }",[549,601,602],{"class":588}," from",[549,604,605],{"class":555}," '",[549,607,608],{"class":576},"@vyui\u002Fkit\u002Finput",[549,610,611],{"class":555},"'\n",[549,613,615,617,619,622,625,628,630,632,634,637],{"class":551,"line":614},3,[549,616,589],{"class":588},[549,618,592],{"class":555},[549,620,621],{"class":595}," VyKeyboardAwareResponder",[549,623,624],{"class":555},",",[549,626,627],{"class":595}," VyKeyboardAwareRoot",[549,629,599],{"class":555},[549,631,602],{"class":588},[549,633,605],{"class":555},[549,635,636],{"class":576},"@vyui\u002Fkit\u002Fkeyboard-aware",[549,638,611],{"class":555},[549,640,642,645,647],{"class":551,"line":641},4,[549,643,644],{"class":555},"\u003C\u002F",[549,646,560],{"class":559},[549,648,582],{"class":555},[549,650,652],{"class":551,"line":651},5,[549,653,655],{"emptyLinePlaceholder":654},true,"\n",[549,657,659,661,664],{"class":551,"line":658},6,[549,660,556],{"class":555},[549,662,663],{"class":559},"template",[549,665,582],{"class":555},[549,667,669,672,674],{"class":551,"line":668},7,[549,670,671],{"class":555},"  \u003C",[549,673,483],{"class":559},[549,675,582],{"class":555},[549,677,679,682,684],{"class":551,"line":678},8,[549,680,681],{"class":555},"    \u003C",[549,683,487],{"class":559},[549,685,582],{"class":555},[549,687,689,692,694,697,699,701,704,706],{"class":551,"line":688},9,[549,690,691],{"class":555},"      \u003C",[549,693,518],{"class":559},[549,695,696],{"class":563}," placeholder",[549,698,570],{"class":555},[549,700,573],{"class":555},[549,702,703],{"class":576},"Message",[549,705,573],{"class":555},[549,707,708],{"class":555}," \u002F>\n",[549,710,712,715,717],{"class":551,"line":711},10,[549,713,714],{"class":555},"    \u003C\u002F",[549,716,487],{"class":559},[549,718,582],{"class":555},[549,720,722,725,727],{"class":551,"line":721},11,[549,723,724],{"class":555},"  \u003C\u002F",[549,726,483],{"class":559},[549,728,582],{"class":555},[549,730,732,734,736],{"class":551,"line":731},12,[549,733,644],{"class":555},[549,735,663],{"class":559},[549,737,582],{"class":555},[471,739,740,741,744],{},"For a long form, use the responder's scroll-view mode. The scroll region only scrolls once its height is bounded — pass the cap through ",[475,742,743],{},"scroll-view-class",":",[540,746,748],{"className":542,"code":747,"language":544,"meta":545,"style":545},"\u003CVyKeyboardAwareRoot>\n  \u003CVyKeyboardAwareResponder\n    mode=\"scroll-view\"\n    scrollview-id=\"profile-form\"\n    scroll-view-class=\"max-h-96\"\n  >\n    \u003CVyInput\n      v-for=\"field in fields\"\n      :key=\"field.name\"\n      v-model=\"field.value\"\n      :placeholder=\"field.label\"\n    \u002F>\n  \u003C\u002FVyKeyboardAwareResponder>\n\u003C\u002FVyKeyboardAwareRoot>\n",[475,749,750,758,763,768,773,778,783,788,793,798,803,808,813,819],{"__ignoreMap":545},[549,751,752,754,756],{"class":551,"line":552},[549,753,556],{"class":555},[549,755,483],{"class":559},[549,757,582],{"class":555},[549,759,760],{"class":551,"line":585},[549,761,762],{"class":595},"  \u003CVyKeyboardAwareResponder\n",[549,764,765],{"class":551,"line":614},[549,766,767],{"class":595},"    mode=\"scroll-view\"\n",[549,769,770],{"class":551,"line":641},[549,771,772],{"class":595},"    scrollview-id=\"profile-form\"\n",[549,774,775],{"class":551,"line":651},[549,776,777],{"class":595},"    scroll-view-class=\"max-h-96\"\n",[549,779,780],{"class":551,"line":658},[549,781,782],{"class":595},"  >\n",[549,784,785],{"class":551,"line":668},[549,786,787],{"class":595},"    \u003CVyInput\n",[549,789,790],{"class":551,"line":678},[549,791,792],{"class":595},"      v-for=\"field in fields\"\n",[549,794,795],{"class":551,"line":688},[549,796,797],{"class":595},"      :key=\"field.name\"\n",[549,799,800],{"class":551,"line":711},[549,801,802],{"class":595},"      v-model=\"field.value\"\n",[549,804,805],{"class":551,"line":721},[549,806,807],{"class":595},"      :placeholder=\"field.label\"\n",[549,809,810],{"class":551,"line":731},[549,811,812],{"class":595},"    \u002F>\n",[549,814,816],{"class":551,"line":815},13,[549,817,818],{"class":595},"  \u003C\u002FVyKeyboardAwareResponder>\n",[549,820,822,824,826],{"class":551,"line":821},14,[549,823,644],{"class":555},[549,825,483],{"class":559},[549,827,582],{"class":555},[471,829,830,831,833],{},"Wrap a region in ",[475,832,491],{}," when several inputs should be measured as one block (a composer bar with attachments, say) or when the region needs extra clearance:",[540,835,837],{"className":542,"code":836,"language":544,"meta":545,"style":545},"\u003CVyKeyboardAwareTrigger :offset=\"16\">\n  \u003CVyInput placeholder=\"Message\" \u002F>\n  \u003CVyButton label=\"Send\" \u002F>\n\u003C\u002FVyKeyboardAwareTrigger>\n",[475,838,839,862,867,872],{"__ignoreMap":545},[549,840,841,843,845,848,850,852,854,858,860],{"class":551,"line":552},[549,842,556],{"class":555},[549,844,491],{"class":559},[549,846,847],{"class":555}," :",[549,849,529],{"class":563},[549,851,570],{"class":555},[549,853,573],{"class":555},[549,855,857],{"class":856},"sbssI","16",[549,859,573],{"class":555},[549,861,582],{"class":555},[549,863,864],{"class":551,"line":585},[549,865,866],{"class":595},"  \u003CVyInput placeholder=\"Message\" \u002F>\n",[549,868,869],{"class":551,"line":614},[549,870,871],{"class":595},"  \u003CVyButton label=\"Send\" \u002F>\n",[549,873,874,876,878],{"class":551,"line":641},[549,875,644],{"class":555},[549,877,491],{"class":559},[549,879,582],{"class":555},[466,881,883],{"id":882},"composition","Composition",[885,886,887,893,906],"ul",{},[888,889,890,892],"li",{},[475,891,483],{}," tracks the focused input (or trigger) and the keyboard height, and drives the responder.",[888,894,895,897,898,901,902,905],{},[475,896,487],{}," owns the surface that moves (",[475,899,900],{},"view"," mode) or scrolls (",[475,903,904],{},"scroll-view"," mode).",[888,907,908,910],{},[475,909,491],{}," optionally groups a focusable region and reports focus, blur, and layout changes for the block as a whole; bare inputs report for themselves.",[471,912,913],{},"The primitives render as normal wrappers when used outside a root, but no keyboard avoidance occurs.",[466,915,917],{"id":916},"props","Props",[919,920,922],"h3",{"id":921},"vykeyboardawareroot",[475,923,483],{},[925,926,927,946],"table",{},[928,929,930],"thead",{},[931,932,933,937,940,943],"tr",{},[934,935,936],"th",{},"Prop",[934,938,939],{},"Type",[934,941,942],{},"Default",[934,944,945],{},"Description",[947,948,949,970,992,1010,1030],"tbody",{},[931,950,951,957,962,967],{},[952,953,954],"td",{},[475,955,956],{},"forceAttach",[952,958,959],{},[475,960,961],{},"boolean",[952,963,964],{},[475,965,966],{},"false",[952,968,969],{},"Keeps translating the responder toward the keyboard even when the trigger is already visible.",[931,971,972,976,981,986],{},[952,973,974],{},[475,975,529],{},[952,977,978],{},[475,979,980],{},"number",[952,982,983],{},[475,984,985],{},"0",[952,987,988,989,991],{},"Extra clearance in px between a self-registered input and the keyboard top. Regions wrapped in a trigger use the trigger's own ",[475,990,529],{}," instead.",[931,993,994,999,1003,1007],{},[952,995,996],{},[475,997,998],{},"androidStatusBarPlusBottomBarHeight",[952,1000,1001],{},[475,1002,980],{},[952,1004,1005],{},[475,1006,985],{},[952,1008,1009],{},"Corrects Android measurements for system bars, in pixels.",[931,1011,1012,1017,1022,1027],{},[952,1013,1014],{},[475,1015,1016],{},"as",[952,1018,1019],{},[475,1020,1021],{},"AsTag",[952,1023,1024],{},[475,1025,1026],{},"'view'",[952,1028,1029],{},"Underlying Lynx element.",[931,1031,1032,1037,1041,1045],{},[952,1033,1034],{},[475,1035,1036],{},"asChild",[952,1038,1039],{},[475,1040,961],{},[952,1042,1043],{},[475,1044,966],{},[952,1046,1047],{},"Merges behavior into the single child element.",[919,1049,1051],{"id":1050},"vykeyboardawareresponder",[475,1052,487],{},[925,1054,1055,1067],{},[928,1056,1057],{},[931,1058,1059,1061,1063,1065],{},[934,1060,936],{},[934,1062,939],{},[934,1064,942],{},[934,1066,945],{},[947,1068,1069,1088,1108,1130,1147],{},[931,1070,1071,1076,1081,1085],{},[952,1072,1073],{},[475,1074,1075],{},"mode",[952,1077,1078],{},[475,1079,1080],{},"'view' | 'scroll-view'",[952,1082,1083],{},[475,1084,1026],{},[952,1086,1087],{},"Translates a static view or scrolls a native scroll view.",[931,1089,1090,1095,1100,1105],{},[952,1091,1092],{},[475,1093,1094],{},"scrollviewId",[952,1096,1097],{},[475,1098,1099],{},"string",[952,1101,1102],{},[475,1103,1104],{},"'scrollview'",[952,1106,1107],{},"Native scroll-view identifier used by the root. Make it unique when several scroll-mode responders can be on screen.",[931,1109,1110,1115,1120,1123],{},[952,1111,1112],{},[475,1113,1114],{},"scrollViewClass",[952,1116,1117],{},[475,1118,1119],{},"any",[952,1121,1122],{},"—",[952,1124,1125,1126,1129],{},"Class applied to the inner ",[475,1127,1128],{},"\u003Cscroll-view>"," in scroll-view mode. Put the height cap here — the region only scrolls once bounded.",[931,1131,1132,1136,1140,1144],{},[952,1133,1134],{},[475,1135,1016],{},[952,1137,1138],{},[475,1139,1021],{},[952,1141,1142],{},[475,1143,1026],{},[952,1145,1146],{},"Underlying element in view mode.",[931,1148,1149,1153,1157,1161],{},[952,1150,1151],{},[475,1152,1036],{},[952,1154,1155],{},[475,1156,961],{},[952,1158,1159],{},[475,1160,966],{},[952,1162,1163],{},"Merges behavior into the single child element in view mode.",[919,1165,1167],{"id":1166},"vykeyboardawaretrigger",[475,1168,491],{},[925,1170,1171,1183],{},[928,1172,1173],{},[931,1174,1175,1177,1179,1181],{},[934,1176,936],{},[934,1178,939],{},[934,1180,942],{},[934,1182,945],{},[947,1184,1185,1202,1218],{},[931,1186,1187,1191,1195,1199],{},[952,1188,1189],{},[475,1190,529],{},[952,1192,1193],{},[475,1194,980],{},[952,1196,1197],{},[475,1198,985],{},[952,1200,1201],{},"Extra space between the focused region and keyboard, in pixels.",[931,1203,1204,1208,1212,1216],{},[952,1205,1206],{},[475,1207,1016],{},[952,1209,1210],{},[475,1211,1021],{},[952,1213,1214],{},[475,1215,1026],{},[952,1217,1029],{},[931,1219,1220,1224,1228,1232],{},[952,1221,1222],{},[475,1223,1036],{},[952,1225,1226],{},[475,1227,961],{},[952,1229,1230],{},[475,1231,966],{},[952,1233,1047],{},[466,1235,1237],{"id":1236},"emits","Emits",[919,1239,1241],{"id":1240},"vykeyboardawareroot-1",[475,1242,483],{},[925,1244,1245,1257],{},[928,1246,1247],{},[931,1248,1249,1252,1255],{},[934,1250,1251],{},"Event",[934,1253,1254],{},"Payload",[934,1256,945],{},[947,1258,1259],{},[931,1260,1261,1266,1270],{},[952,1262,1263],{},[475,1264,1265],{},"keyboardHeightChange",[952,1267,1268],{},[475,1269,980],{},[952,1271,1272,1273,1275,1276,1279],{},"Fires whenever the tracked keyboard height changes, in px (",[475,1274,985],{}," = hidden). Lets wrappers react without their own listener — ",[475,1277,1278],{},"VyTray"," uses it to drive its panel rise.",[466,1281,1283],{"id":1282},"slots","Slots",[471,1285,1286],{},"All three primitives expose a single default slot. Place one responder inside the root; inputs anywhere under the root register themselves, and triggers are only needed for grouped regions or offsets.",[466,1288,328],{"id":1289},"accessibility",[885,1291,1292,1295,1298,1301],{},[888,1293,1294],{},"Keep visible labels associated with each input; keyboard avoidance does not provide labeling.",[888,1296,1297],{},"Preserve a predictable focus order when a responder contains multiple triggers.",[888,1299,1300],{},"Avoid large offsets that move surrounding context entirely off-screen.",[888,1302,1303],{},"Test hardware-keyboard and screen-reader navigation separately because no on-screen keyboard may appear.",[466,1305,1307],{"id":1306},"platform-notes","Platform notes",[885,1309,1310,1327,1333],{},[888,1311,1312,1313,1316,1317,1319,1320,1322,1323,1326],{},"The keyboard signal is the focused input's per-element ",[475,1314,1315],{},"keyboard"," event, normalized by ",[475,1318,518],{}," \u002F ",[475,1321,522],{}," and piped up to the root automatically. The global Lynx ",[475,1324,1325],{},"keyboardstatuschanged"," event is kept as a fallback but is not delivered to the vue-lynx background runtime, so an input (or a component built on one) must be focused inside the root for avoidance to engage.",[888,1328,1329,1330,1332],{},"Android layouts may need ",[475,1331,998],{}," when native bounds omit system bars.",[888,1334,1335],{},"On the web, there is no equivalent native keyboard event. The wrappers remain in place and the responder does not translate.",[466,1337,1339],{"id":1338},"related-components","Related components",[885,1341,1342,1346,1350,1354,1358],{},[888,1343,1344],{},[497,1345,145],{"href":146},[888,1347,1348],{},[497,1349,281],{"href":282},[888,1351,1352],{},[497,1353,297],{"href":298},[888,1355,1356],{},[497,1357,507],{"href":504},[888,1359,1360],{},[497,1361,136],{"href":137},[1363,1364,1365],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":545,"searchDepth":552,"depth":585,"links":1367},[1368,1369,1370,1371,1376,1379,1380,1381,1382],{"id":468,"depth":585,"text":469},{"id":537,"depth":585,"text":538},{"id":882,"depth":585,"text":883},{"id":916,"depth":585,"text":917,"children":1372},[1373,1374,1375],{"id":921,"depth":614,"text":483},{"id":1050,"depth":614,"text":487},{"id":1166,"depth":614,"text":491},{"id":1236,"depth":585,"text":1237,"children":1377},[1378],{"id":1240,"depth":614,"text":483},{"id":1282,"depth":585,"text":1283},{"id":1289,"depth":585,"text":328},{"id":1306,"depth":585,"text":1307},{"id":1338,"depth":585,"text":1339},"Keep focused form controls visible above the native on-screen keyboard.","md",{},{"icon":167},{"title":164,"description":1383},"sRcbiJ95RG-mQytsIhNUYa46fmSNq5r7dRHRmkhPKOE",[1390,1392],{"title":159,"path":160,"stem":161,"description":1391,"icon":-1,"children":-1,"navigation":-1},"Position multiple companion islands as one floating or inline layout.",{"title":169,"path":170,"stem":171,"description":1393,"icon":-1,"children":-1,"navigation":-1},"Render visible text for a form control.",1785060135400]