[{"data":1,"prerenderedAt":796},["ShallowReactive",2],{"navigation":3,"/features/keyboard":272,"/features/keyboard-surround":791},[4,22,59,95,120,161,183,200,243,264],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51,55],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Steps","/configuration/steps","02.configuration/3.steps",{"title":40,"path":41,"stem":42},"Placement","/configuration/placement","02.configuration/4.placement",{"title":44,"path":45,"stem":46},"Animation","/configuration/animation","02.configuration/5.animation",{"title":48,"path":49,"stem":50},"Scroll","/configuration/scroll","02.configuration/6.scroll",{"title":52,"path":53,"stem":54},"Skip","/configuration/skip","02.configuration/7.skip",{"title":56,"path":57,"stem":58},"Styles","/configuration/styles","02.configuration/8.styles",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Components","/components","03.components",[64,68,72,76,80,84,88,91],{"title":65,"path":66,"stem":67},"Container","/components/container","03.components/1.container",{"title":69,"path":70,"stem":71},"Overlay","/components/overlay","03.components/2.overlay",{"title":73,"path":74,"stem":75},"Tooltip","/components/tooltip","03.components/3.tooltip",{"title":77,"path":78,"stem":79},"Image","/components/image","03.components/4.image",{"title":81,"path":82,"stem":83},"Buttons","/components/buttons","03.components/5.buttons",{"title":85,"path":86,"stem":87},"Progress","/components/progress","03.components/6.progress",{"title":52,"path":89,"stem":90},"/components/skip","03.components/7.skip",{"title":92,"path":93,"stem":94},"Close Button","/components/close-button","03.components/8.close-button",{"title":96,"path":97,"stem":98,"children":99,"page":6},"Features","/features","04.features",[100,104,108,112,116],{"title":101,"path":102,"stem":103},"Visibility","/features/visibility","04.features/1.visibility",{"title":105,"path":106,"stem":107},"Responsive","/features/responsive","04.features/2.responsive",{"title":109,"path":110,"stem":111},"Keyboard","/features/keyboard","04.features/3.keyboard",{"title":113,"path":114,"stem":115},"Highlight","/features/highlight","04.features/4.highlight",{"title":117,"path":118,"stem":119},"Overrides","/features/overrides","04.features/5.overrides",{"title":121,"path":122,"stem":123,"children":124,"page":6},"API Reference","/api-reference","05.api-reference",[125,129,133,137,141,145,149,153,157],{"title":126,"path":127,"stem":128},"useBorda","/api-reference/use-borda","05.api-reference/1.use-borda",{"title":130,"path":131,"stem":132},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":134,"path":135,"stem":136},"useHighlight","/api-reference/use-highlight","05.api-reference/3.use-highlight",{"title":138,"path":139,"stem":140},"Borda Instance","/api-reference/borda-instance","05.api-reference/4.borda-instance",{"title":142,"path":143,"stem":144},"Controller API","/api-reference/controller-api","05.api-reference/5.controller-api",{"title":146,"path":147,"stem":148},"Events API","/api-reference/events-api","05.api-reference/6.events-api",{"title":150,"path":151,"stem":152},"Visibility API","/api-reference/visibility-api","05.api-reference/7.visibility-api",{"title":154,"path":155,"stem":156},"Skip API","/api-reference/skip-api","05.api-reference/8.skip-api",{"title":158,"path":159,"stem":160},"Scroll API","/api-reference/scroll-api","05.api-reference/9.scroll-api",{"title":162,"path":163,"stem":164,"children":165,"page":6},"Events","/events","06.events",[166,170,174,177,180],{"title":167,"path":168,"stem":169},"Tour","/events/tour","06.events/1.tour",{"title":171,"path":172,"stem":173},"Widget","/events/widget","06.events/2.widget",{"title":52,"path":175,"stem":176},"/events/skip","06.events/3.skip",{"title":101,"path":178,"stem":179},"/events/visibility","06.events/4.visibility",{"title":109,"path":181,"stem":182},"/events/keyboard","06.events/5.keyboard",{"title":184,"path":185,"stem":186,"children":187,"page":6},"Custom Element","/custom-element","07.custom-element",[188,192,196],{"title":189,"path":190,"stem":191},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":193,"path":194,"stem":195},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":197,"path":198,"stem":199},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":201,"path":202,"stem":203,"children":204,"page":6},"Examples","/examples","08.examples",[205,209,213,217,220,223,226,229,233,236,240],{"title":206,"path":207,"stem":208},"Basic Setup","/examples/basic-setup","08.examples/01.basic-setup",{"title":210,"path":211,"stem":212},"Multi-step","/examples/multi-step","08.examples/02.multi-step",{"title":214,"path":215,"stem":216},"Custom Styling","/examples/custom-styling","08.examples/03.custom-styling",{"title":113,"path":218,"stem":219},"/examples/highlight","08.examples/04.highlight",{"title":105,"path":221,"stem":222},"/examples/responsive","08.examples/05.responsive",{"title":117,"path":224,"stem":225},"/examples/overrides","08.examples/06.overrides",{"title":109,"path":227,"stem":228},"/examples/keyboard","08.examples/07.keyboard",{"title":230,"path":231,"stem":232},"Don't Show Again","/examples/skip","08.examples/08.skip",{"title":44,"path":234,"stem":235},"/examples/animation","08.examples/09.animation",{"title":237,"path":238,"stem":239},"Transition","/examples/transition","08.examples/10.transition",{"title":85,"path":241,"stem":242},"/examples/progress","08.examples/11.progress",{"title":244,"path":245,"stem":246,"children":247,"page":6},"Distribution","/distribution","09.distribution",[248,252,256,260],{"title":249,"path":250,"stem":251},"Formats","/distribution/formats","09.distribution/1.formats",{"title":253,"path":254,"stem":255},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":257,"path":258,"stem":259},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":261,"path":262,"stem":263},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"title":265,"path":266,"stem":267,"children":268,"page":6},"Accessibility","/accessibility","10.accessibility",[269],{"title":28,"path":270,"stem":271},"/accessibility/overview","10.accessibility/1.overview",{"id":273,"title":109,"body":274,"description":785,"extension":786,"links":787,"meta":788,"navigation":611,"path":110,"seo":789,"stem":111,"__hash__":790},"docs/04.features/3.keyboard.md",{"type":275,"value":276,"toc":779},"minimark",[277,286,291,341,345,352,536,539,570,573,576,747,751,775],[278,279,280,281,285],"p",{},"When keyboard control is enabled, Borda attaches a document-level ",[282,283,284],"code",{},"keydown"," listener that maps arrow keys and Escape to tour navigation. Enabled by default.",[287,288,290],"h2",{"id":289},"key-bindings","Key bindings",[292,293,294,307],"table",{},[295,296,297],"thead",{},[298,299,300,304],"tr",{},[301,302,303],"th",{},"Key",[301,305,306],{},"Action",[308,309,310,321,331],"tbody",{},[298,311,312,318],{},[313,314,315],"td",{},[282,316,317],{},"ArrowRight",[313,319,320],{},"Next step",[298,322,323,328],{},[313,324,325],{},[282,326,327],{},"ArrowLeft",[313,329,330],{},"Previous step",[298,332,333,338],{},[313,334,335],{},[282,336,337],{},"Escape",[313,339,340],{},"Close the tour",[287,342,344],{"id":343},"config","Config",[278,346,347,348,351],{},"Keyboard control is part of the ",[282,349,350],{},"tour"," config:",[353,354,359],"pre",{"className":355,"code":356,"language":357,"meta":358,"style":358},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await borda.mount({\n  steps: [\n    {\n      target: '#element',\n      title: 'Title',\n      description: 'Use arrow keys to navigate.',\n      placement: 'bottom-center',\n    },\n  ],\n  tour: {\n    hasKeyboardControl: true,\n  },\n});\n","ts","",[282,360,361,388,401,407,428,445,462,479,485,493,504,518,524],{"__ignoreMap":358},[362,363,366,370,374,378,382,385],"span",{"class":364,"line":365},"line",1,[362,367,369],{"class":368},"s7zQu","await",[362,371,373],{"class":372},"sTEyZ"," borda",[362,375,377],{"class":376},"sMK4o",".",[362,379,381],{"class":380},"s2Zo4","mount",[362,383,384],{"class":372},"(",[362,386,387],{"class":376},"{\n",[362,389,391,395,398],{"class":364,"line":390},2,[362,392,394],{"class":393},"swJcz","  steps",[362,396,397],{"class":376},":",[362,399,400],{"class":372}," [\n",[362,402,404],{"class":364,"line":403},3,[362,405,406],{"class":376},"    {\n",[362,408,410,413,415,418,422,425],{"class":364,"line":409},4,[362,411,412],{"class":393},"      target",[362,414,397],{"class":376},[362,416,417],{"class":376}," '",[362,419,421],{"class":420},"sfazB","#element",[362,423,424],{"class":376},"'",[362,426,427],{"class":376},",\n",[362,429,431,434,436,438,441,443],{"class":364,"line":430},5,[362,432,433],{"class":393},"      title",[362,435,397],{"class":376},[362,437,417],{"class":376},[362,439,440],{"class":420},"Title",[362,442,424],{"class":376},[362,444,427],{"class":376},[362,446,448,451,453,455,458,460],{"class":364,"line":447},6,[362,449,450],{"class":393},"      description",[362,452,397],{"class":376},[362,454,417],{"class":376},[362,456,457],{"class":420},"Use arrow keys to navigate.",[362,459,424],{"class":376},[362,461,427],{"class":376},[362,463,465,468,470,472,475,477],{"class":364,"line":464},7,[362,466,467],{"class":393},"      placement",[362,469,397],{"class":376},[362,471,417],{"class":376},[362,473,474],{"class":420},"bottom-center",[362,476,424],{"class":376},[362,478,427],{"class":376},[362,480,482],{"class":364,"line":481},8,[362,483,484],{"class":376},"    },\n",[362,486,488,491],{"class":364,"line":487},9,[362,489,490],{"class":372},"  ]",[362,492,427],{"class":376},[362,494,496,499,501],{"class":364,"line":495},10,[362,497,498],{"class":393},"  tour",[362,500,397],{"class":376},[362,502,503],{"class":376}," {\n",[362,505,507,510,512,516],{"class":364,"line":506},11,[362,508,509],{"class":393},"    hasKeyboardControl",[362,511,397],{"class":376},[362,513,515],{"class":514},"sfNiH"," true",[362,517,427],{"class":376},[362,519,521],{"class":364,"line":520},12,[362,522,523],{"class":376},"  },\n",[362,525,527,530,533],{"class":364,"line":526},13,[362,528,529],{"class":376},"}",[362,531,532],{"class":372},")",[362,534,535],{"class":376},";\n",[278,537,538],{},"Disable keyboard navigation:",[353,540,542],{"className":355,"code":541,"language":357,"meta":358,"style":358},"tour: {\n  hasKeyboardControl: false,\n}\n",[282,543,544,553,565],{"__ignoreMap":358},[362,545,546,549,551],{"class":364,"line":365},[362,547,350],{"class":548},"sBMFI",[362,550,397],{"class":376},[362,552,503],{"class":376},[362,554,555,558,560,563],{"class":364,"line":390},[362,556,557],{"class":548},"  hasKeyboardControl",[362,559,397],{"class":376},[362,561,562],{"class":514}," false",[362,564,427],{"class":376},[362,566,567],{"class":364,"line":403},[362,568,569],{"class":376},"}\n",[287,571,162],{"id":572},"events",[278,574,575],{},"Keyboard input emits dedicated events:",[353,577,579],{"className":355,"code":578,"language":357,"meta":358,"style":358},"import { BordaEvent } from '@retoo/borda';\n\ninstance.api.events.on(BordaEvent.ON_KEYBOARD_NEXT, () => {\n  console.log('ArrowRight pressed');\n});\n\ninstance.api.events.on(BordaEvent.ON_KEYBOARD_PREV, () => {\n  console.log('ArrowLeft pressed');\n});\n",[282,580,581,607,613,652,675,683,687,718,739],{"__ignoreMap":358},[362,582,583,586,589,592,595,598,600,603,605],{"class":364,"line":365},[362,584,585],{"class":368},"import",[362,587,588],{"class":376}," {",[362,590,591],{"class":372}," BordaEvent",[362,593,594],{"class":376}," }",[362,596,597],{"class":368}," from",[362,599,417],{"class":376},[362,601,602],{"class":420},"@retoo/borda",[362,604,424],{"class":376},[362,606,535],{"class":376},[362,608,609],{"class":364,"line":390},[362,610,612],{"emptyLinePlaceholder":611},true,"\n",[362,614,615,618,620,623,625,627,629,632,635,637,640,643,646,650],{"class":364,"line":403},[362,616,617],{"class":372},"instance",[362,619,377],{"class":376},[362,621,622],{"class":372},"api",[362,624,377],{"class":376},[362,626,572],{"class":372},[362,628,377],{"class":376},[362,630,631],{"class":380},"on",[362,633,634],{"class":372},"(BordaEvent",[362,636,377],{"class":376},[362,638,639],{"class":372},"ON_KEYBOARD_NEXT",[362,641,642],{"class":376},",",[362,644,645],{"class":376}," ()",[362,647,649],{"class":648},"spNyl"," =>",[362,651,503],{"class":376},[362,653,654,657,659,662,664,666,669,671,673],{"class":364,"line":409},[362,655,656],{"class":372},"  console",[362,658,377],{"class":376},[362,660,661],{"class":380},"log",[362,663,384],{"class":393},[362,665,424],{"class":376},[362,667,668],{"class":420},"ArrowRight pressed",[362,670,424],{"class":376},[362,672,532],{"class":393},[362,674,535],{"class":376},[362,676,677,679,681],{"class":364,"line":430},[362,678,529],{"class":376},[362,680,532],{"class":372},[362,682,535],{"class":376},[362,684,685],{"class":364,"line":447},[362,686,612],{"emptyLinePlaceholder":611},[362,688,689,691,693,695,697,699,701,703,705,707,710,712,714,716],{"class":364,"line":464},[362,690,617],{"class":372},[362,692,377],{"class":376},[362,694,622],{"class":372},[362,696,377],{"class":376},[362,698,572],{"class":372},[362,700,377],{"class":376},[362,702,631],{"class":380},[362,704,634],{"class":372},[362,706,377],{"class":376},[362,708,709],{"class":372},"ON_KEYBOARD_PREV",[362,711,642],{"class":376},[362,713,645],{"class":376},[362,715,649],{"class":648},[362,717,503],{"class":376},[362,719,720,722,724,726,728,730,733,735,737],{"class":364,"line":481},[362,721,656],{"class":372},[362,723,377],{"class":376},[362,725,661],{"class":380},[362,727,384],{"class":393},[362,729,424],{"class":376},[362,731,732],{"class":420},"ArrowLeft pressed",[362,734,424],{"class":376},[362,736,532],{"class":393},[362,738,535],{"class":376},[362,740,741,743,745],{"class":364,"line":487},[362,742,529],{"class":376},[362,744,532],{"class":372},[362,746,535],{"class":376},[287,748,750],{"id":749},"notes","Notes",[752,753,754,772],"ul",{},[755,756,757,758,761,762,761,765,761,768,771],"li",{},"Keypresses originating from form controls (",[282,759,760],{},"input",", ",[282,763,764],{},"textarea",[282,766,767],{},"select",[282,769,770],{},"contenteditable",") are ignored so the widget doesn't interfere with text input.",[755,773,774],{},"Keyboard listeners are automatically removed on unmount.",[776,777,778],"style",{},"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 pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":358,"searchDepth":365,"depth":390,"links":780},[781,782,783,784],{"id":289,"depth":390,"text":290},{"id":343,"depth":390,"text":344},{"id":572,"depth":390,"text":162},{"id":749,"depth":390,"text":750},"Navigate the tour with ArrowRight, ArrowLeft, and Escape keys.","md",null,{},{"title":109,"description":785},"ziPfSej_38b6ac8Pg_D27xWXy5m1pepuuimQXICyBbo",[792,794],{"title":105,"path":106,"stem":107,"description":793,"children":-1},"Apply different component configs at different viewport widths.",{"title":113,"path":114,"stem":115,"description":795,"children":-1},"Spotlight a single element without running a full tour.",1784550677849]