[{"data":1,"prerenderedAt":1335},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fkeyboard-aware":406,"\u002Fcomponents\u002Fkeyboard-aware-surround":1330},[4,34,51,301,327,332,337],{"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",{"id":407,"title":164,"body":408,"description":1324,"extension":1325,"links":11,"meta":1326,"navigation":1327,"package":63,"path":165,"seo":1328,"stem":166,"__hash__":1329},"docs\u002F3.components\u002Fkeyboard-aware.md",{"type":409,"value":410,"toc":1307},"minimark",[411,416,439,459,476,481,485,681,688,769,775,821,825,852,855,859,865,989,994,1105,1110,1175,1179,1184,1221,1225,1228,1231,1245,1249,1277,1281,1303],[412,413,415],"h2",{"id":414},"overview","Overview",[417,418,419,420,423,424,426,427,430,431,434,435,438],"p",{},"The keyboard-aware primitives coordinate focused inputs with a movable or scrollable container. ",[421,422,46],"code",{}," re-exports the three ",[421,425,41],{}," primitives as ",[421,428,429],{},"VyKeyboardAwareRoot",", ",[421,432,433],{},"VyKeyboardAwareResponder",", and ",[421,436,437],{},"VyKeyboardAwareTrigger",".",[417,440,441,442,447,448,454,455,458],{},"Use them for drawers, forms, chat composers, and other layouts where the iOS or Android keyboard can cover the focused control. ",[443,444,445],"a",{"href":298},[421,446,297],{}," and ",[443,449,451],{"href":450},"\u002Fcomponents\u002Fdrawer",[421,452,453],{},"Drawer"," wire them up for you through their ",[421,456,457],{},"keyboard-aware"," prop.",[417,460,461,462,465,466,469,470,472,473,438],{},"Inputs register themselves: any ",[421,463,464],{},"VyInput"," or ",[421,467,468],{},"VyTextarea"," rendered under a root reports focus, blur, and keyboard height automatically. A ",[421,471,437],{}," wrap is only needed to group several inputs into one measured region or to add an ",[421,474,475],{},"offset",[477,478],"component-code",{"height":479,"name":480},"160px","keyboard-aware-example",[412,482,484],{"id":483},"usage","Usage",[486,487,492],"pre",{"className":488,"code":489,"language":490,"meta":491,"style":491},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport {\n  VyInput,\n  VyKeyboardAwareResponder,\n  VyKeyboardAwareRoot,\n} from '@vyui\u002Fkit'\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","",[421,493,494,529,539,549,557,565,582,592,599,609,619,629,652,662,672],{"__ignoreMap":491},[495,496,499,503,507,511,514,517,520,524,526],"span",{"class":497,"line":498},"line",1,[495,500,502],{"class":501},"sMK4o","\u003C",[495,504,506],{"class":505},"swJcz","script",[495,508,510],{"class":509},"spNyl"," setup",[495,512,513],{"class":509}," lang",[495,515,516],{"class":501},"=",[495,518,519],{"class":501},"\"",[495,521,523],{"class":522},"sfazB","ts",[495,525,519],{"class":501},[495,527,528],{"class":501},">\n",[495,530,532,536],{"class":497,"line":531},2,[495,533,535],{"class":534},"s7zQu","import",[495,537,538],{"class":501}," {\n",[495,540,542,546],{"class":497,"line":541},3,[495,543,545],{"class":544},"sTEyZ","  VyInput",[495,547,548],{"class":501},",\n",[495,550,552,555],{"class":497,"line":551},4,[495,553,554],{"class":544},"  VyKeyboardAwareResponder",[495,556,548],{"class":501},[495,558,560,563],{"class":497,"line":559},5,[495,561,562],{"class":544},"  VyKeyboardAwareRoot",[495,564,548],{"class":501},[495,566,568,571,574,577,579],{"class":497,"line":567},6,[495,569,570],{"class":501},"}",[495,572,573],{"class":534}," from",[495,575,576],{"class":501}," '",[495,578,46],{"class":522},[495,580,581],{"class":501},"'\n",[495,583,585,588,590],{"class":497,"line":584},7,[495,586,587],{"class":501},"\u003C\u002F",[495,589,506],{"class":505},[495,591,528],{"class":501},[495,593,595],{"class":497,"line":594},8,[495,596,598],{"emptyLinePlaceholder":597},true,"\n",[495,600,602,604,607],{"class":497,"line":601},9,[495,603,502],{"class":501},[495,605,606],{"class":505},"template",[495,608,528],{"class":501},[495,610,612,615,617],{"class":497,"line":611},10,[495,613,614],{"class":501},"  \u003C",[495,616,429],{"class":505},[495,618,528],{"class":501},[495,620,622,625,627],{"class":497,"line":621},11,[495,623,624],{"class":501},"    \u003C",[495,626,433],{"class":505},[495,628,528],{"class":501},[495,630,632,635,637,640,642,644,647,649],{"class":497,"line":631},12,[495,633,634],{"class":501},"      \u003C",[495,636,464],{"class":505},[495,638,639],{"class":509}," placeholder",[495,641,516],{"class":501},[495,643,519],{"class":501},[495,645,646],{"class":522},"Message",[495,648,519],{"class":501},[495,650,651],{"class":501}," \u002F>\n",[495,653,655,658,660],{"class":497,"line":654},13,[495,656,657],{"class":501},"    \u003C\u002F",[495,659,433],{"class":505},[495,661,528],{"class":501},[495,663,665,668,670],{"class":497,"line":664},14,[495,666,667],{"class":501},"  \u003C\u002F",[495,669,429],{"class":505},[495,671,528],{"class":501},[495,673,675,677,679],{"class":497,"line":674},15,[495,676,587],{"class":501},[495,678,606],{"class":505},[495,680,528],{"class":501},[417,682,683,684,687],{},"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 ",[421,685,686],{},"scroll-view-class",":",[486,689,691],{"className":488,"code":690,"language":490,"meta":491,"style":491},"\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",[421,692,693,701,706,711,716,721,726,731,736,741,746,751,756,761],{"__ignoreMap":491},[495,694,695,697,699],{"class":497,"line":498},[495,696,502],{"class":501},[495,698,429],{"class":505},[495,700,528],{"class":501},[495,702,703],{"class":497,"line":531},[495,704,705],{"class":544},"  \u003CVyKeyboardAwareResponder\n",[495,707,708],{"class":497,"line":541},[495,709,710],{"class":544},"    mode=\"scroll-view\"\n",[495,712,713],{"class":497,"line":551},[495,714,715],{"class":544},"    scrollview-id=\"profile-form\"\n",[495,717,718],{"class":497,"line":559},[495,719,720],{"class":544},"    scroll-view-class=\"max-h-96\"\n",[495,722,723],{"class":497,"line":567},[495,724,725],{"class":544},"  >\n",[495,727,728],{"class":497,"line":584},[495,729,730],{"class":544},"    \u003CVyInput\n",[495,732,733],{"class":497,"line":594},[495,734,735],{"class":544},"      v-for=\"field in fields\"\n",[495,737,738],{"class":497,"line":601},[495,739,740],{"class":544},"      :key=\"field.name\"\n",[495,742,743],{"class":497,"line":611},[495,744,745],{"class":544},"      v-model=\"field.value\"\n",[495,747,748],{"class":497,"line":621},[495,749,750],{"class":544},"      :placeholder=\"field.label\"\n",[495,752,753],{"class":497,"line":631},[495,754,755],{"class":544},"    \u002F>\n",[495,757,758],{"class":497,"line":654},[495,759,760],{"class":544},"  \u003C\u002FVyKeyboardAwareResponder>\n",[495,762,763,765,767],{"class":497,"line":664},[495,764,587],{"class":501},[495,766,429],{"class":505},[495,768,528],{"class":501},[417,770,771,772,774],{},"Wrap a region in ",[421,773,437],{}," when several inputs should be measured as one block (a composer bar with attachments, say) or when the region needs extra clearance:",[486,776,778],{"className":488,"code":777,"language":490,"meta":491,"style":491},"\u003CVyKeyboardAwareTrigger :offset=\"16\">\n  \u003CVyInput placeholder=\"Message\" \u002F>\n  \u003CVyButton label=\"Send\" \u002F>\n\u003C\u002FVyKeyboardAwareTrigger>\n",[421,779,780,803,808,813],{"__ignoreMap":491},[495,781,782,784,786,789,791,793,795,799,801],{"class":497,"line":498},[495,783,502],{"class":501},[495,785,437],{"class":505},[495,787,788],{"class":501}," :",[495,790,475],{"class":509},[495,792,516],{"class":501},[495,794,519],{"class":501},[495,796,798],{"class":797},"sbssI","16",[495,800,519],{"class":501},[495,802,528],{"class":501},[495,804,805],{"class":497,"line":531},[495,806,807],{"class":544},"  \u003CVyInput placeholder=\"Message\" \u002F>\n",[495,809,810],{"class":497,"line":541},[495,811,812],{"class":544},"  \u003CVyButton label=\"Send\" \u002F>\n",[495,814,815,817,819],{"class":497,"line":551},[495,816,587],{"class":501},[495,818,437],{"class":505},[495,820,528],{"class":501},[412,822,824],{"id":823},"composition","Composition",[826,827,828,834,847],"ul",{},[829,830,831,833],"li",{},[421,832,429],{}," tracks the focused input (or trigger) and the keyboard height, and drives the responder.",[829,835,836,838,839,842,843,846],{},[421,837,433],{}," owns the surface that moves (",[421,840,841],{},"view"," mode) or scrolls (",[421,844,845],{},"scroll-view"," mode).",[829,848,849,851],{},[421,850,437],{}," optionally groups a focusable region and reports focus, blur, and layout changes for the block as a whole; bare inputs report for themselves.",[417,853,854],{},"The primitives render as normal wrappers when used outside a root, but no keyboard avoidance occurs.",[412,856,858],{"id":857},"props","Props",[860,861,863],"h3",{"id":862},"vykeyboardawareroot",[421,864,429],{},[866,867,868,887],"table",{},[869,870,871],"thead",{},[872,873,874,878,881,884],"tr",{},[875,876,877],"th",{},"Prop",[875,879,880],{},"Type",[875,882,883],{},"Default",[875,885,886],{},"Description",[888,889,890,911,933,951,971],"tbody",{},[872,891,892,898,903,908],{},[893,894,895],"td",{},[421,896,897],{},"forceAttach",[893,899,900],{},[421,901,902],{},"boolean",[893,904,905],{},[421,906,907],{},"false",[893,909,910],{},"Keeps translating the responder toward the keyboard even when the trigger is already visible.",[872,912,913,917,922,927],{},[893,914,915],{},[421,916,475],{},[893,918,919],{},[421,920,921],{},"number",[893,923,924],{},[421,925,926],{},"0",[893,928,929,930,932],{},"Extra clearance in px between a self-registered input and the keyboard top. Regions wrapped in a trigger use the trigger's own ",[421,931,475],{}," instead.",[872,934,935,940,944,948],{},[893,936,937],{},[421,938,939],{},"androidStatusBarPlusBottomBarHeight",[893,941,942],{},[421,943,921],{},[893,945,946],{},[421,947,926],{},[893,949,950],{},"Corrects Android measurements for system bars, in pixels.",[872,952,953,958,963,968],{},[893,954,955],{},[421,956,957],{},"as",[893,959,960],{},[421,961,962],{},"AsTag",[893,964,965],{},[421,966,967],{},"'view'",[893,969,970],{},"Underlying Lynx element.",[872,972,973,978,982,986],{},[893,974,975],{},[421,976,977],{},"asChild",[893,979,980],{},[421,981,902],{},[893,983,984],{},[421,985,907],{},[893,987,988],{},"Merges behavior into the single child element.",[860,990,992],{"id":991},"vykeyboardawareresponder",[421,993,433],{},[866,995,996,1008],{},[869,997,998],{},[872,999,1000,1002,1004,1006],{},[875,1001,877],{},[875,1003,880],{},[875,1005,883],{},[875,1007,886],{},[888,1009,1010,1029,1049,1071,1088],{},[872,1011,1012,1017,1022,1026],{},[893,1013,1014],{},[421,1015,1016],{},"mode",[893,1018,1019],{},[421,1020,1021],{},"'view' | 'scroll-view'",[893,1023,1024],{},[421,1025,967],{},[893,1027,1028],{},"Translates a static view or scrolls a native scroll view.",[872,1030,1031,1036,1041,1046],{},[893,1032,1033],{},[421,1034,1035],{},"scrollviewId",[893,1037,1038],{},[421,1039,1040],{},"string",[893,1042,1043],{},[421,1044,1045],{},"'scrollview'",[893,1047,1048],{},"Native scroll-view identifier used by the root. Make it unique when several scroll-mode responders can be on screen.",[872,1050,1051,1056,1061,1064],{},[893,1052,1053],{},[421,1054,1055],{},"scrollViewClass",[893,1057,1058],{},[421,1059,1060],{},"any",[893,1062,1063],{},"—",[893,1065,1066,1067,1070],{},"Class applied to the inner ",[421,1068,1069],{},"\u003Cscroll-view>"," in scroll-view mode. Put the height cap here — the region only scrolls once bounded.",[872,1072,1073,1077,1081,1085],{},[893,1074,1075],{},[421,1076,957],{},[893,1078,1079],{},[421,1080,962],{},[893,1082,1083],{},[421,1084,967],{},[893,1086,1087],{},"Underlying element in view mode.",[872,1089,1090,1094,1098,1102],{},[893,1091,1092],{},[421,1093,977],{},[893,1095,1096],{},[421,1097,902],{},[893,1099,1100],{},[421,1101,907],{},[893,1103,1104],{},"Merges behavior into the single child element in view mode.",[860,1106,1108],{"id":1107},"vykeyboardawaretrigger",[421,1109,437],{},[866,1111,1112,1124],{},[869,1113,1114],{},[872,1115,1116,1118,1120,1122],{},[875,1117,877],{},[875,1119,880],{},[875,1121,883],{},[875,1123,886],{},[888,1125,1126,1143,1159],{},[872,1127,1128,1132,1136,1140],{},[893,1129,1130],{},[421,1131,475],{},[893,1133,1134],{},[421,1135,921],{},[893,1137,1138],{},[421,1139,926],{},[893,1141,1142],{},"Extra space between the focused region and keyboard, in pixels.",[872,1144,1145,1149,1153,1157],{},[893,1146,1147],{},[421,1148,957],{},[893,1150,1151],{},[421,1152,962],{},[893,1154,1155],{},[421,1156,967],{},[893,1158,970],{},[872,1160,1161,1165,1169,1173],{},[893,1162,1163],{},[421,1164,977],{},[893,1166,1167],{},[421,1168,902],{},[893,1170,1171],{},[421,1172,907],{},[893,1174,988],{},[412,1176,1178],{"id":1177},"emits","Emits",[860,1180,1182],{"id":1181},"vykeyboardawareroot-1",[421,1183,429],{},[866,1185,1186,1198],{},[869,1187,1188],{},[872,1189,1190,1193,1196],{},[875,1191,1192],{},"Event",[875,1194,1195],{},"Payload",[875,1197,886],{},[888,1199,1200],{},[872,1201,1202,1207,1211],{},[893,1203,1204],{},[421,1205,1206],{},"keyboardHeightChange",[893,1208,1209],{},[421,1210,921],{},[893,1212,1213,1214,1216,1217,1220],{},"Fires whenever the tracked keyboard height changes, in px (",[421,1215,926],{}," = hidden). Lets wrappers react without their own listener — ",[421,1218,1219],{},"VyTray"," uses it to drive its panel rise.",[412,1222,1224],{"id":1223},"slots","Slots",[417,1226,1227],{},"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.",[412,1229,328],{"id":1230},"accessibility",[826,1232,1233,1236,1239,1242],{},[829,1234,1235],{},"Keep visible labels associated with each input; keyboard avoidance does not provide labeling.",[829,1237,1238],{},"Preserve a predictable focus order when a responder contains multiple triggers.",[829,1240,1241],{},"Avoid large offsets that move surrounding context entirely off-screen.",[829,1243,1244],{},"Test hardware-keyboard and screen-reader navigation separately because no on-screen keyboard may appear.",[412,1246,1248],{"id":1247},"platform-notes","Platform notes",[826,1250,1251,1268,1274],{},[829,1252,1253,1254,1257,1258,1260,1261,1263,1264,1267],{},"The keyboard signal is the focused input's per-element ",[421,1255,1256],{},"keyboard"," event, normalized by ",[421,1259,464],{}," \u002F ",[421,1262,468],{}," and piped up to the root automatically. The global Lynx ",[421,1265,1266],{},"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.",[829,1269,1270,1271,1273],{},"Android layouts may need ",[421,1272,939],{}," when native bounds omit system bars.",[829,1275,1276],{},"On the web, there is no equivalent native keyboard event. The wrappers remain in place and the responder does not translate.",[412,1278,1280],{"id":1279},"related-components","Related components",[826,1282,1283,1287,1291,1295,1299],{},[829,1284,1285],{},[443,1286,145],{"href":146},[829,1288,1289],{},[443,1290,281],{"href":282},[829,1292,1293],{},[443,1294,297],{"href":298},[829,1296,1297],{},[443,1298,453],{"href":450},[829,1300,1301],{},[443,1302,136],{"href":137},[1304,1305,1306],"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":491,"searchDepth":498,"depth":531,"links":1308},[1309,1310,1311,1312,1317,1320,1321,1322,1323],{"id":414,"depth":531,"text":415},{"id":483,"depth":531,"text":484},{"id":823,"depth":531,"text":824},{"id":857,"depth":531,"text":858,"children":1313},[1314,1315,1316],{"id":862,"depth":541,"text":429},{"id":991,"depth":541,"text":433},{"id":1107,"depth":541,"text":437},{"id":1177,"depth":531,"text":1178,"children":1318},[1319],{"id":1181,"depth":541,"text":429},{"id":1223,"depth":531,"text":1224},{"id":1230,"depth":531,"text":328},{"id":1247,"depth":531,"text":1248},{"id":1279,"depth":531,"text":1280},"Keep focused form controls visible above the native on-screen keyboard.","md",{},{"icon":167},{"title":164,"description":1324},"9Ga6cnSwOWAKtx3F9T0XYTmsZ-wv0lwhMWH4ZFoP7is",[1331,1333],{"title":159,"path":160,"stem":161,"description":1332,"icon":-1,"children":-1,"navigation":-1},"Position multiple companion islands as one floating or inline layout.",{"title":169,"path":170,"stem":171,"description":1334,"icon":-1,"children":-1,"navigation":-1},"Render visible text for a form control.",1783534424742]