[{"data":1,"prerenderedAt":1760},["ShallowReactive",2],{"navigation":3,"/getting-started/quick-start":272,"/getting-started/quick-start-surround":1755},[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":19,"body":274,"description":1749,"extension":1750,"links":1751,"meta":1752,"navigation":345,"path":20,"seo":1753,"stem":21,"__hash__":1754},"docs/01.getting-started/3.quick-start.md",{"type":275,"value":276,"toc":1743},"minimark",[277,282,684,688,695,825,828,957,961,968,1310,1316,1426,1430,1437,1611,1617,1728,1739],[278,279,281],"h2",{"id":280},"basic-setup","Basic setup",[283,284,285,290,294,361,365,371,396,400,419,627,631,638,679],"steps",{},[286,287,289],"h3",{"id":288},"import-borda","Import Borda",[291,292,293],"p",{},"Import the factory function and the required stylesheet:",[295,296,301],"pre",{"className":297,"code":298,"language":299,"meta":300,"style":300},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useBorda } from '@retoo/borda';\n\nimport '@retoo/borda/styles';\n","ts","",[302,303,304,340,347],"code",{"__ignoreMap":300},[305,306,309,313,317,321,324,327,330,334,337],"span",{"class":307,"line":308},"line",1,[305,310,312],{"class":311},"s7zQu","import",[305,314,316],{"class":315},"sMK4o"," {",[305,318,320],{"class":319},"sTEyZ"," useBorda",[305,322,323],{"class":315}," }",[305,325,326],{"class":311}," from",[305,328,329],{"class":315}," '",[305,331,333],{"class":332},"sfazB","@retoo/borda",[305,335,336],{"class":315},"'",[305,338,339],{"class":315},";\n",[305,341,343],{"class":307,"line":342},2,[305,344,346],{"emptyLinePlaceholder":345},true,"\n",[305,348,350,352,354,357,359],{"class":307,"line":349},3,[305,351,312],{"class":311},[305,353,329],{"class":315},[305,355,356],{"class":332},"@retoo/borda/styles",[305,358,336],{"class":315},[305,360,339],{"class":315},[286,362,364],{"id":363},"create-a-factory","Create a factory",[291,366,367,370],{},[302,368,369],{},"useBorda()"," returns a factory object that manages widget instances. One factory can create multiple independent tours:",[295,372,374],{"className":297,"code":373,"language":299,"meta":300,"style":300},"const borda = useBorda();\n",[302,375,376],{"__ignoreMap":300},[305,377,378,382,385,388,391,394],{"class":307,"line":308},[305,379,381],{"class":380},"spNyl","const",[305,383,384],{"class":319}," borda ",[305,386,387],{"class":315},"=",[305,389,320],{"class":390},"s2Zo4",[305,392,393],{"class":319},"()",[305,395,339],{"class":315},[286,397,399],{"id":398},"define-steps","Define steps",[291,401,402,403,406,407,410,411,414,415,418],{},"Each step requires a ",[302,404,405],{},"target"," (CSS selector or HTMLElement), a ",[302,408,409],{},"title",", and a ",[302,412,413],{},"description",". The ",[302,416,417],{},"placement"," controls where the tooltip appears relative to the target:",[295,420,422],{"className":297,"code":421,"language":299,"meta":300,"style":300},"import { ComponentPlacement } from '@retoo/borda';\n\nconst steps = [\n  {\n    target: '#sidebar',\n    title: 'Navigation',\n    description: 'Use the sidebar to browse different sections.',\n    placement: ComponentPlacement.MIDDLE_END,\n  },\n  {\n    target: '#search-bar',\n    title: 'Search',\n    description: 'Find anything quickly with the search bar.',\n    placement: ComponentPlacement.BOTTOM_CENTER,\n  },\n];\n",[302,423,424,445,449,461,467,487,504,521,539,545,550,566,582,598,614,619],{"__ignoreMap":300},[305,425,426,428,430,433,435,437,439,441,443],{"class":307,"line":308},[305,427,312],{"class":311},[305,429,316],{"class":315},[305,431,432],{"class":319}," ComponentPlacement",[305,434,323],{"class":315},[305,436,326],{"class":311},[305,438,329],{"class":315},[305,440,333],{"class":332},[305,442,336],{"class":315},[305,444,339],{"class":315},[305,446,447],{"class":307,"line":342},[305,448,346],{"emptyLinePlaceholder":345},[305,450,451,453,456,458],{"class":307,"line":349},[305,452,381],{"class":380},[305,454,455],{"class":319}," steps ",[305,457,387],{"class":315},[305,459,460],{"class":319}," [\n",[305,462,464],{"class":307,"line":463},4,[305,465,466],{"class":315},"  {\n",[305,468,470,474,477,479,482,484],{"class":307,"line":469},5,[305,471,473],{"class":472},"swJcz","    target",[305,475,476],{"class":315},":",[305,478,329],{"class":315},[305,480,481],{"class":332},"#sidebar",[305,483,336],{"class":315},[305,485,486],{"class":315},",\n",[305,488,490,493,495,497,500,502],{"class":307,"line":489},6,[305,491,492],{"class":472},"    title",[305,494,476],{"class":315},[305,496,329],{"class":315},[305,498,499],{"class":332},"Navigation",[305,501,336],{"class":315},[305,503,486],{"class":315},[305,505,507,510,512,514,517,519],{"class":307,"line":506},7,[305,508,509],{"class":472},"    description",[305,511,476],{"class":315},[305,513,329],{"class":315},[305,515,516],{"class":332},"Use the sidebar to browse different sections.",[305,518,336],{"class":315},[305,520,486],{"class":315},[305,522,524,527,529,531,534,537],{"class":307,"line":523},8,[305,525,526],{"class":472},"    placement",[305,528,476],{"class":315},[305,530,432],{"class":319},[305,532,533],{"class":315},".",[305,535,536],{"class":319},"MIDDLE_END",[305,538,486],{"class":315},[305,540,542],{"class":307,"line":541},9,[305,543,544],{"class":315},"  },\n",[305,546,548],{"class":307,"line":547},10,[305,549,466],{"class":315},[305,551,553,555,557,559,562,564],{"class":307,"line":552},11,[305,554,473],{"class":472},[305,556,476],{"class":315},[305,558,329],{"class":315},[305,560,561],{"class":332},"#search-bar",[305,563,336],{"class":315},[305,565,486],{"class":315},[305,567,569,571,573,575,578,580],{"class":307,"line":568},12,[305,570,492],{"class":472},[305,572,476],{"class":315},[305,574,329],{"class":315},[305,576,577],{"class":332},"Search",[305,579,336],{"class":315},[305,581,486],{"class":315},[305,583,585,587,589,591,594,596],{"class":307,"line":584},13,[305,586,509],{"class":472},[305,588,476],{"class":315},[305,590,329],{"class":315},[305,592,593],{"class":332},"Find anything quickly with the search bar.",[305,595,336],{"class":315},[305,597,486],{"class":315},[305,599,601,603,605,607,609,612],{"class":307,"line":600},14,[305,602,526],{"class":472},[305,604,476],{"class":315},[305,606,432],{"class":319},[305,608,533],{"class":315},[305,610,611],{"class":319},"BOTTOM_CENTER",[305,613,486],{"class":315},[305,615,617],{"class":307,"line":616},15,[305,618,544],{"class":315},[305,620,622,625],{"class":307,"line":621},16,[305,623,624],{"class":319},"]",[305,626,339],{"class":315},[286,628,630],{"id":629},"mount-the-tour","Mount the tour",[291,632,633,634,637],{},"Pass the steps to ",[302,635,636],{},"mount()",". The tour initializes and displays the first step:",[295,639,641],{"className":297,"code":640,"language":299,"meta":300,"style":300},"const instance = await borda.mount({ steps });\n",[302,642,643],{"__ignoreMap":300},[305,644,645,647,650,652,655,658,660,663,666,669,671,674,677],{"class":307,"line":308},[305,646,381],{"class":380},[305,648,649],{"class":319}," instance ",[305,651,387],{"class":315},[305,653,654],{"class":311}," await",[305,656,657],{"class":319}," borda",[305,659,533],{"class":315},[305,661,662],{"class":390},"mount",[305,664,665],{"class":319},"(",[305,667,668],{"class":315},"{",[305,670,455],{"class":319},[305,672,673],{"class":315},"}",[305,675,676],{"class":319},")",[305,678,339],{"class":315},[291,680,681,683],{},[302,682,636],{}," is async — it resolves after the widget is rendered and attached to the DOM.",[278,685,687],{"id":686},"controlling-the-tour","Controlling the tour",[291,689,690,691,694],{},"The ",[302,692,693],{},"instance.api.controller"," interface provides full control over the tour navigation. All methods are available immediately after mount:",[295,696,698],{"className":297,"code":697,"language":299,"meta":300,"style":300},"// Navigate between steps\nawait instance.api.controller.next();\nawait instance.api.controller.prev();\n\n// Jump to a specific step by index (0-based)\nawait instance.api.controller.changeStep(1);\n\n// Finish the tour\ninstance.api.controller.finish();\n",[302,699,700,706,733,756,760,765,794,798,803],{"__ignoreMap":300},[305,701,702],{"class":307,"line":308},[305,703,705],{"class":704},"sHwdD","// Navigate between steps\n",[305,707,708,711,714,716,719,721,724,726,729,731],{"class":307,"line":342},[305,709,710],{"class":311},"await",[305,712,713],{"class":319}," instance",[305,715,533],{"class":315},[305,717,718],{"class":319},"api",[305,720,533],{"class":315},[305,722,723],{"class":319},"controller",[305,725,533],{"class":315},[305,727,728],{"class":390},"next",[305,730,393],{"class":319},[305,732,339],{"class":315},[305,734,735,737,739,741,743,745,747,749,752,754],{"class":307,"line":349},[305,736,710],{"class":311},[305,738,713],{"class":319},[305,740,533],{"class":315},[305,742,718],{"class":319},[305,744,533],{"class":315},[305,746,723],{"class":319},[305,748,533],{"class":315},[305,750,751],{"class":390},"prev",[305,753,393],{"class":319},[305,755,339],{"class":315},[305,757,758],{"class":307,"line":463},[305,759,346],{"emptyLinePlaceholder":345},[305,761,762],{"class":307,"line":469},[305,763,764],{"class":704},"// Jump to a specific step by index (0-based)\n",[305,766,767,769,771,773,775,777,779,781,784,786,790,792],{"class":307,"line":489},[305,768,710],{"class":311},[305,770,713],{"class":319},[305,772,533],{"class":315},[305,774,718],{"class":319},[305,776,533],{"class":315},[305,778,723],{"class":319},[305,780,533],{"class":315},[305,782,783],{"class":390},"changeStep",[305,785,665],{"class":319},[305,787,789],{"class":788},"sbssI","1",[305,791,676],{"class":319},[305,793,339],{"class":315},[305,795,796],{"class":307,"line":506},[305,797,346],{"emptyLinePlaceholder":345},[305,799,800],{"class":307,"line":523},[305,801,802],{"class":704},"// Finish the tour\n",[305,804,805,808,810,812,814,816,818,821,823],{"class":307,"line":541},[305,806,807],{"class":319},"instance",[305,809,533],{"class":315},[305,811,718],{"class":319},[305,813,533],{"class":315},[305,815,723],{"class":319},[305,817,533],{"class":315},[305,819,820],{"class":390},"finish",[305,822,393],{"class":319},[305,824,339],{"class":315},[291,826,827],{},"You can also read the current tour state at any time:",[295,829,831],{"className":297,"code":830,"language":299,"meta":300,"style":300},"instance.api.controller.currentStep;      // 1-based step number\ninstance.api.controller.currentStepIndex;  // 0-based index\ninstance.api.controller.totalSteps;\ninstance.api.controller.hasNextStep;\ninstance.api.controller.hasPrevStep;\ninstance.api.controller.currentTarget;     // DOM element of current step\n",[302,832,833,856,878,897,916,935],{"__ignoreMap":300},[305,834,835,837,839,841,843,845,847,850,853],{"class":307,"line":308},[305,836,807],{"class":319},[305,838,533],{"class":315},[305,840,718],{"class":319},[305,842,533],{"class":315},[305,844,723],{"class":319},[305,846,533],{"class":315},[305,848,849],{"class":319},"currentStep",[305,851,852],{"class":315},";",[305,854,855],{"class":704},"      // 1-based step number\n",[305,857,858,860,862,864,866,868,870,873,875],{"class":307,"line":342},[305,859,807],{"class":319},[305,861,533],{"class":315},[305,863,718],{"class":319},[305,865,533],{"class":315},[305,867,723],{"class":319},[305,869,533],{"class":315},[305,871,872],{"class":319},"currentStepIndex",[305,874,852],{"class":315},[305,876,877],{"class":704},"  // 0-based index\n",[305,879,880,882,884,886,888,890,892,895],{"class":307,"line":349},[305,881,807],{"class":319},[305,883,533],{"class":315},[305,885,718],{"class":319},[305,887,533],{"class":315},[305,889,723],{"class":319},[305,891,533],{"class":315},[305,893,894],{"class":319},"totalSteps",[305,896,339],{"class":315},[305,898,899,901,903,905,907,909,911,914],{"class":307,"line":463},[305,900,807],{"class":319},[305,902,533],{"class":315},[305,904,718],{"class":319},[305,906,533],{"class":315},[305,908,723],{"class":319},[305,910,533],{"class":315},[305,912,913],{"class":319},"hasNextStep",[305,915,339],{"class":315},[305,917,918,920,922,924,926,928,930,933],{"class":307,"line":469},[305,919,807],{"class":319},[305,921,533],{"class":315},[305,923,718],{"class":319},[305,925,533],{"class":315},[305,927,723],{"class":319},[305,929,533],{"class":315},[305,931,932],{"class":319},"hasPrevStep",[305,934,339],{"class":315},[305,936,937,939,941,943,945,947,949,952,954],{"class":307,"line":489},[305,938,807],{"class":319},[305,940,533],{"class":315},[305,942,718],{"class":319},[305,944,533],{"class":315},[305,946,723],{"class":319},[305,948,533],{"class":315},[305,950,951],{"class":319},"currentTarget",[305,953,852],{"class":315},[305,955,956],{"class":704},"     // DOM element of current step\n",[278,958,960],{"id":959},"listening-to-events","Listening to events",[291,962,963,964,967],{},"Subscribe to typed events through ",[302,965,966],{},"instance.api.events"," to connect the tour with your application logic:",[295,969,972],{"className":297,"code":970,"filename":971,"language":299,"meta":300,"style":300},"import { BordaEvent } from '@retoo/borda';\n\n// Tour started\ninstance.api.events.on(BordaEvent.ON_TOUR_START, () => {\n  analytics.track('tour_started');\n});\n\n// User advanced to next step\ninstance.api.events.on(BordaEvent.ON_TOUR_NEXT, () => {\n  analytics.track('tour_step', { step: instance.api.controller.currentStep });\n});\n\n// Tour completed\ninstance.api.events.on(BordaEvent.ON_TOUR_FINISH, () => {\n  analytics.track('tour_completed');\n});\n\n// Tour dismissed before completion\ninstance.api.events.on(BordaEvent.ON_TOUR_CLOSE, () => {\n  analytics.track('tour_dismissed');\n});\n","events.ts",[302,973,974,995,999,1004,1042,1065,1073,1077,1082,1113,1159,1167,1171,1176,1207,1228,1236,1241,1247,1279,1301],{"__ignoreMap":300},[305,975,976,978,980,983,985,987,989,991,993],{"class":307,"line":308},[305,977,312],{"class":311},[305,979,316],{"class":315},[305,981,982],{"class":319}," BordaEvent",[305,984,323],{"class":315},[305,986,326],{"class":311},[305,988,329],{"class":315},[305,990,333],{"class":332},[305,992,336],{"class":315},[305,994,339],{"class":315},[305,996,997],{"class":307,"line":342},[305,998,346],{"emptyLinePlaceholder":345},[305,1000,1001],{"class":307,"line":349},[305,1002,1003],{"class":704},"// Tour started\n",[305,1005,1006,1008,1010,1012,1014,1017,1019,1022,1025,1027,1030,1033,1036,1039],{"class":307,"line":463},[305,1007,807],{"class":319},[305,1009,533],{"class":315},[305,1011,718],{"class":319},[305,1013,533],{"class":315},[305,1015,1016],{"class":319},"events",[305,1018,533],{"class":315},[305,1020,1021],{"class":390},"on",[305,1023,1024],{"class":319},"(BordaEvent",[305,1026,533],{"class":315},[305,1028,1029],{"class":319},"ON_TOUR_START",[305,1031,1032],{"class":315},",",[305,1034,1035],{"class":315}," ()",[305,1037,1038],{"class":380}," =>",[305,1040,1041],{"class":315}," {\n",[305,1043,1044,1047,1049,1052,1054,1056,1059,1061,1063],{"class":307,"line":469},[305,1045,1046],{"class":319},"  analytics",[305,1048,533],{"class":315},[305,1050,1051],{"class":390},"track",[305,1053,665],{"class":472},[305,1055,336],{"class":315},[305,1057,1058],{"class":332},"tour_started",[305,1060,336],{"class":315},[305,1062,676],{"class":472},[305,1064,339],{"class":315},[305,1066,1067,1069,1071],{"class":307,"line":489},[305,1068,673],{"class":315},[305,1070,676],{"class":319},[305,1072,339],{"class":315},[305,1074,1075],{"class":307,"line":506},[305,1076,346],{"emptyLinePlaceholder":345},[305,1078,1079],{"class":307,"line":523},[305,1080,1081],{"class":704},"// User advanced to next step\n",[305,1083,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1105,1107,1109,1111],{"class":307,"line":541},[305,1085,807],{"class":319},[305,1087,533],{"class":315},[305,1089,718],{"class":319},[305,1091,533],{"class":315},[305,1093,1016],{"class":319},[305,1095,533],{"class":315},[305,1097,1021],{"class":390},[305,1099,1024],{"class":319},[305,1101,533],{"class":315},[305,1103,1104],{"class":319},"ON_TOUR_NEXT",[305,1106,1032],{"class":315},[305,1108,1035],{"class":315},[305,1110,1038],{"class":380},[305,1112,1041],{"class":315},[305,1114,1115,1117,1119,1121,1123,1125,1128,1130,1132,1134,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157],{"class":307,"line":547},[305,1116,1046],{"class":319},[305,1118,533],{"class":315},[305,1120,1051],{"class":390},[305,1122,665],{"class":472},[305,1124,336],{"class":315},[305,1126,1127],{"class":332},"tour_step",[305,1129,336],{"class":315},[305,1131,1032],{"class":315},[305,1133,316],{"class":315},[305,1135,1136],{"class":472}," step",[305,1138,476],{"class":315},[305,1140,713],{"class":319},[305,1142,533],{"class":315},[305,1144,718],{"class":319},[305,1146,533],{"class":315},[305,1148,723],{"class":319},[305,1150,533],{"class":315},[305,1152,849],{"class":319},[305,1154,323],{"class":315},[305,1156,676],{"class":472},[305,1158,339],{"class":315},[305,1160,1161,1163,1165],{"class":307,"line":552},[305,1162,673],{"class":315},[305,1164,676],{"class":319},[305,1166,339],{"class":315},[305,1168,1169],{"class":307,"line":568},[305,1170,346],{"emptyLinePlaceholder":345},[305,1172,1173],{"class":307,"line":584},[305,1174,1175],{"class":704},"// Tour completed\n",[305,1177,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1199,1201,1203,1205],{"class":307,"line":600},[305,1179,807],{"class":319},[305,1181,533],{"class":315},[305,1183,718],{"class":319},[305,1185,533],{"class":315},[305,1187,1016],{"class":319},[305,1189,533],{"class":315},[305,1191,1021],{"class":390},[305,1193,1024],{"class":319},[305,1195,533],{"class":315},[305,1197,1198],{"class":319},"ON_TOUR_FINISH",[305,1200,1032],{"class":315},[305,1202,1035],{"class":315},[305,1204,1038],{"class":380},[305,1206,1041],{"class":315},[305,1208,1209,1211,1213,1215,1217,1219,1222,1224,1226],{"class":307,"line":616},[305,1210,1046],{"class":319},[305,1212,533],{"class":315},[305,1214,1051],{"class":390},[305,1216,665],{"class":472},[305,1218,336],{"class":315},[305,1220,1221],{"class":332},"tour_completed",[305,1223,336],{"class":315},[305,1225,676],{"class":472},[305,1227,339],{"class":315},[305,1229,1230,1232,1234],{"class":307,"line":621},[305,1231,673],{"class":315},[305,1233,676],{"class":319},[305,1235,339],{"class":315},[305,1237,1239],{"class":307,"line":1238},17,[305,1240,346],{"emptyLinePlaceholder":345},[305,1242,1244],{"class":307,"line":1243},18,[305,1245,1246],{"class":704},"// Tour dismissed before completion\n",[305,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1271,1273,1275,1277],{"class":307,"line":1249},19,[305,1251,807],{"class":319},[305,1253,533],{"class":315},[305,1255,718],{"class":319},[305,1257,533],{"class":315},[305,1259,1016],{"class":319},[305,1261,533],{"class":315},[305,1263,1021],{"class":390},[305,1265,1024],{"class":319},[305,1267,533],{"class":315},[305,1269,1270],{"class":319},"ON_TOUR_CLOSE",[305,1272,1032],{"class":315},[305,1274,1035],{"class":315},[305,1276,1038],{"class":380},[305,1278,1041],{"class":315},[305,1280,1282,1284,1286,1288,1290,1292,1295,1297,1299],{"class":307,"line":1281},20,[305,1283,1046],{"class":319},[305,1285,533],{"class":315},[305,1287,1051],{"class":390},[305,1289,665],{"class":472},[305,1291,336],{"class":315},[305,1293,1294],{"class":332},"tour_dismissed",[305,1296,336],{"class":315},[305,1298,676],{"class":472},[305,1300,339],{"class":315},[305,1302,1304,1306,1308],{"class":307,"line":1303},21,[305,1305,673],{"class":315},[305,1307,676],{"class":319},[305,1309,339],{"class":315},[291,1311,1312,1313,476],{},"To remove a specific handler, pass the same function reference to ",[302,1314,1315],{},"off()",[295,1317,1319],{"className":297,"code":1318,"language":299,"meta":300,"style":300},"const handler = () => console.log('started');\n\ninstance.api.events.on(BordaEvent.ON_TOUR_START, handler);\n\n// Later\ninstance.api.events.off(BordaEvent.ON_TOUR_START, handler);\n",[302,1320,1321,1355,1359,1388,1392,1397],{"__ignoreMap":300},[305,1322,1323,1325,1328,1330,1332,1334,1337,1339,1342,1344,1346,1349,1351,1353],{"class":307,"line":308},[305,1324,381],{"class":380},[305,1326,1327],{"class":319}," handler ",[305,1329,387],{"class":315},[305,1331,1035],{"class":315},[305,1333,1038],{"class":380},[305,1335,1336],{"class":319}," console",[305,1338,533],{"class":315},[305,1340,1341],{"class":390},"log",[305,1343,665],{"class":319},[305,1345,336],{"class":315},[305,1347,1348],{"class":332},"started",[305,1350,336],{"class":315},[305,1352,676],{"class":319},[305,1354,339],{"class":315},[305,1356,1357],{"class":307,"line":342},[305,1358,346],{"emptyLinePlaceholder":345},[305,1360,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1386],{"class":307,"line":349},[305,1362,807],{"class":319},[305,1364,533],{"class":315},[305,1366,718],{"class":319},[305,1368,533],{"class":315},[305,1370,1016],{"class":319},[305,1372,533],{"class":315},[305,1374,1021],{"class":390},[305,1376,1024],{"class":319},[305,1378,533],{"class":315},[305,1380,1029],{"class":319},[305,1382,1032],{"class":315},[305,1384,1385],{"class":319}," handler)",[305,1387,339],{"class":315},[305,1389,1390],{"class":307,"line":463},[305,1391,346],{"emptyLinePlaceholder":345},[305,1393,1394],{"class":307,"line":469},[305,1395,1396],{"class":704},"// Later\n",[305,1398,1399,1401,1403,1405,1407,1409,1411,1414,1416,1418,1420,1422,1424],{"class":307,"line":489},[305,1400,807],{"class":319},[305,1402,533],{"class":315},[305,1404,718],{"class":319},[305,1406,533],{"class":315},[305,1408,1016],{"class":319},[305,1410,533],{"class":315},[305,1412,1413],{"class":390},"off",[305,1415,1024],{"class":319},[305,1417,533],{"class":315},[305,1419,1029],{"class":319},[305,1421,1032],{"class":315},[305,1423,1385],{"class":319},[305,1425,339],{"class":315},[278,1427,1429],{"id":1428},"runtime","Runtime",[291,1431,1432,1433,1436],{},"Modify any config property after mount without recreating the widget. ",[302,1434,1435],{},"mergeConfig()"," performs a deep merge — only the fields you pass are updated:",[295,1438,1441],{"className":297,"code":1439,"filename":1440,"language":299,"meta":300,"style":300},"import { ComponentPlacement } from '@retoo/borda';\n\n// Add a new step\ninstance.config.mergeConfig({\n  steps: [\n    ...instance.config.current.steps,\n    {\n      target: '#settings',\n      title: 'Settings',\n      description: 'Customize your experience here.',\n      placement: ComponentPlacement.BOTTOM_START,\n    },\n  ],\n});\n","runtime.ts",[302,1442,1443,1463,1467,1472,1491,1500,1522,1527,1543,1559,1575,1591,1596,1603],{"__ignoreMap":300},[305,1444,1445,1447,1449,1451,1453,1455,1457,1459,1461],{"class":307,"line":308},[305,1446,312],{"class":311},[305,1448,316],{"class":315},[305,1450,432],{"class":319},[305,1452,323],{"class":315},[305,1454,326],{"class":311},[305,1456,329],{"class":315},[305,1458,333],{"class":332},[305,1460,336],{"class":315},[305,1462,339],{"class":315},[305,1464,1465],{"class":307,"line":342},[305,1466,346],{"emptyLinePlaceholder":345},[305,1468,1469],{"class":307,"line":349},[305,1470,1471],{"class":704},"// Add a new step\n",[305,1473,1474,1476,1478,1481,1483,1486,1488],{"class":307,"line":463},[305,1475,807],{"class":319},[305,1477,533],{"class":315},[305,1479,1480],{"class":319},"config",[305,1482,533],{"class":315},[305,1484,1485],{"class":390},"mergeConfig",[305,1487,665],{"class":319},[305,1489,1490],{"class":315},"{\n",[305,1492,1493,1496,1498],{"class":307,"line":469},[305,1494,1495],{"class":472},"  steps",[305,1497,476],{"class":315},[305,1499,460],{"class":319},[305,1501,1502,1505,1507,1509,1511,1513,1516,1518,1520],{"class":307,"line":489},[305,1503,1504],{"class":315},"    ...",[305,1506,807],{"class":319},[305,1508,533],{"class":315},[305,1510,1480],{"class":319},[305,1512,533],{"class":315},[305,1514,1515],{"class":319},"current",[305,1517,533],{"class":315},[305,1519,283],{"class":319},[305,1521,486],{"class":315},[305,1523,1524],{"class":307,"line":506},[305,1525,1526],{"class":315},"    {\n",[305,1528,1529,1532,1534,1536,1539,1541],{"class":307,"line":523},[305,1530,1531],{"class":472},"      target",[305,1533,476],{"class":315},[305,1535,329],{"class":315},[305,1537,1538],{"class":332},"#settings",[305,1540,336],{"class":315},[305,1542,486],{"class":315},[305,1544,1545,1548,1550,1552,1555,1557],{"class":307,"line":541},[305,1546,1547],{"class":472},"      title",[305,1549,476],{"class":315},[305,1551,329],{"class":315},[305,1553,1554],{"class":332},"Settings",[305,1556,336],{"class":315},[305,1558,486],{"class":315},[305,1560,1561,1564,1566,1568,1571,1573],{"class":307,"line":547},[305,1562,1563],{"class":472},"      description",[305,1565,476],{"class":315},[305,1567,329],{"class":315},[305,1569,1570],{"class":332},"Customize your experience here.",[305,1572,336],{"class":315},[305,1574,486],{"class":315},[305,1576,1577,1580,1582,1584,1586,1589],{"class":307,"line":552},[305,1578,1579],{"class":472},"      placement",[305,1581,476],{"class":315},[305,1583,432],{"class":319},[305,1585,533],{"class":315},[305,1587,1588],{"class":319},"BOTTOM_START",[305,1590,486],{"class":315},[305,1592,1593],{"class":307,"line":568},[305,1594,1595],{"class":315},"    },\n",[305,1597,1598,1601],{"class":307,"line":584},[305,1599,1600],{"class":319},"  ]",[305,1602,486],{"class":315},[305,1604,1605,1607,1609],{"class":307,"line":600},[305,1606,673],{"class":315},[305,1608,676],{"class":319},[305,1610,339],{"class":315},[291,1612,1613,1614,476],{},"To replace the entire config at once, use ",[302,1615,1616],{},"setConfig()",[295,1618,1620],{"className":297,"code":1619,"language":299,"meta":300,"style":300},"instance.config.setConfig({\n  steps: [\n    {\n      target: '#new-element',\n      title: 'New tour',\n      description: 'Starting fresh.',\n      placement: ComponentPlacement.BOTTOM_CENTER,\n    },\n  ],\n});\n",[302,1621,1622,1639,1647,1651,1666,1681,1696,1710,1714,1720],{"__ignoreMap":300},[305,1623,1624,1626,1628,1630,1632,1635,1637],{"class":307,"line":308},[305,1625,807],{"class":319},[305,1627,533],{"class":315},[305,1629,1480],{"class":319},[305,1631,533],{"class":315},[305,1633,1634],{"class":390},"setConfig",[305,1636,665],{"class":319},[305,1638,1490],{"class":315},[305,1640,1641,1643,1645],{"class":307,"line":342},[305,1642,1495],{"class":472},[305,1644,476],{"class":315},[305,1646,460],{"class":319},[305,1648,1649],{"class":307,"line":349},[305,1650,1526],{"class":315},[305,1652,1653,1655,1657,1659,1662,1664],{"class":307,"line":463},[305,1654,1531],{"class":472},[305,1656,476],{"class":315},[305,1658,329],{"class":315},[305,1660,1661],{"class":332},"#new-element",[305,1663,336],{"class":315},[305,1665,486],{"class":315},[305,1667,1668,1670,1672,1674,1677,1679],{"class":307,"line":469},[305,1669,1547],{"class":472},[305,1671,476],{"class":315},[305,1673,329],{"class":315},[305,1675,1676],{"class":332},"New tour",[305,1678,336],{"class":315},[305,1680,486],{"class":315},[305,1682,1683,1685,1687,1689,1692,1694],{"class":307,"line":489},[305,1684,1563],{"class":472},[305,1686,476],{"class":315},[305,1688,329],{"class":315},[305,1690,1691],{"class":332},"Starting fresh.",[305,1693,336],{"class":315},[305,1695,486],{"class":315},[305,1697,1698,1700,1702,1704,1706,1708],{"class":307,"line":506},[305,1699,1579],{"class":472},[305,1701,476],{"class":315},[305,1703,432],{"class":319},[305,1705,533],{"class":315},[305,1707,611],{"class":319},[305,1709,486],{"class":315},[305,1711,1712],{"class":307,"line":523},[305,1713,1595],{"class":315},[305,1715,1716,1718],{"class":307,"line":541},[305,1717,1600],{"class":319},[305,1719,486],{"class":315},[305,1721,1722,1724,1726],{"class":307,"line":547},[305,1723,673],{"class":315},[305,1725,676],{"class":319},[305,1727,339],{"class":315},[1729,1730,1732],"callout",{"icon":1731,"to":29},"i-lucide-arrow-right",[291,1733,1734,1735,1738],{},"For full config reference — steps, animation, scroll, skip, visibility — see the ",[1736,1737,23],"strong",{}," section.",[1740,1741,1742],"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":300,"searchDepth":308,"depth":342,"links":1744},[1745,1746,1747,1748],{"id":280,"depth":342,"text":281},{"id":686,"depth":342,"text":687},{"id":959,"depth":342,"text":960},{"id":1428,"depth":342,"text":1429},"Set up your first onboarding in under 5 minutes.","md",null,{},{"title":19,"description":1749},"MPUe-0IP5w24YWXFk5AJm-7tIPDTg6vFtw00C_EtSXY",[1756,1758],{"title":15,"path":16,"stem":17,"description":1757,"children":-1},"Install @retoo/borda via npm, pnpm, yarn, or connect via CDN.",{"title":28,"path":29,"stem":30,"description":1759,"children":-1},"Structure of BordaConfig and the principle of disabling components with false.",1784550673931]