[{"data":1,"prerenderedAt":992},["ShallowReactive",2],{"navigation":3,"/custom-element/events":272,"/custom-element/events-surround":987},[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":197,"body":274,"description":981,"extension":982,"links":983,"meta":984,"navigation":379,"path":198,"seo":985,"stem":199,"__hash__":986},"docs/07.custom-element/3.events.md",{"type":275,"value":276,"toc":975},"minimark",[277,294,315,320,649,653,660,757,761,949,953,971],[278,279,280,281,285,286,289,290,293],"p",{},"The custom element dispatches all ",[282,283,284],"code",{},"BordaEvent"," values as standard ",[282,287,288],{},"CustomEvent"," instances on the DOM element itself. Both bubble and cross shadow DOM boundaries (",[282,291,292],{},"composed: true",").",[278,295,296,297,299,300,303,304,303,307,310,311,314],{},"Events fire with the same names as the ",[282,298,284],{}," enum values — ",[282,301,302],{},"tour:start",", ",[282,305,306],{},"tour:finish",[282,308,309],{},"close:click",", and so on. The ",[282,312,313],{},"event.detail"," payload matches the data emitted on the internal event bus.",[316,317,319],"h2",{"id":318},"listening","Listening",[321,322,327],"pre",{"className":323,"code":324,"language":325,"meta":326,"style":326},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const widget = document.querySelector('borda-tour-widget');\n\nwidget.addEventListener('tour:start', () => {\n  console.log('Onboarding started');\n});\n\nwidget.addEventListener('tour:finish', () => {\n  console.log('Onboarding completed');\n});\n\nwidget.addEventListener('tour:step-change', (event) => {\n  console.log('Step changed', event.detail);\n});\n\nwidget.addEventListener('tour:close', () => {\n  console.log('Onboarding dismissed');\n});\n","ts","",[282,328,329,374,381,412,437,447,452,477,499,508,513,546,578,587,592,618,640],{"__ignoreMap":326},[330,331,334,338,342,346,349,352,356,359,362,366,368,371],"span",{"class":332,"line":333},"line",1,[330,335,337],{"class":336},"spNyl","const",[330,339,341],{"class":340},"sTEyZ"," widget ",[330,343,345],{"class":344},"sMK4o","=",[330,347,348],{"class":340}," document",[330,350,351],{"class":344},".",[330,353,355],{"class":354},"s2Zo4","querySelector",[330,357,358],{"class":340},"(",[330,360,361],{"class":344},"'",[330,363,365],{"class":364},"sfazB","borda-tour-widget",[330,367,361],{"class":344},[330,369,370],{"class":340},")",[330,372,373],{"class":344},";\n",[330,375,377],{"class":332,"line":376},2,[330,378,380],{"emptyLinePlaceholder":379},true,"\n",[330,382,384,387,389,392,394,396,398,400,403,406,409],{"class":332,"line":383},3,[330,385,386],{"class":340},"widget",[330,388,351],{"class":344},[330,390,391],{"class":354},"addEventListener",[330,393,358],{"class":340},[330,395,361],{"class":344},[330,397,302],{"class":364},[330,399,361],{"class":344},[330,401,402],{"class":344},",",[330,404,405],{"class":344}," ()",[330,407,408],{"class":336}," =>",[330,410,411],{"class":344}," {\n",[330,413,415,418,420,423,426,428,431,433,435],{"class":332,"line":414},4,[330,416,417],{"class":340},"  console",[330,419,351],{"class":344},[330,421,422],{"class":354},"log",[330,424,358],{"class":425},"swJcz",[330,427,361],{"class":344},[330,429,430],{"class":364},"Onboarding started",[330,432,361],{"class":344},[330,434,370],{"class":425},[330,436,373],{"class":344},[330,438,440,443,445],{"class":332,"line":439},5,[330,441,442],{"class":344},"}",[330,444,370],{"class":340},[330,446,373],{"class":344},[330,448,450],{"class":332,"line":449},6,[330,451,380],{"emptyLinePlaceholder":379},[330,453,455,457,459,461,463,465,467,469,471,473,475],{"class":332,"line":454},7,[330,456,386],{"class":340},[330,458,351],{"class":344},[330,460,391],{"class":354},[330,462,358],{"class":340},[330,464,361],{"class":344},[330,466,306],{"class":364},[330,468,361],{"class":344},[330,470,402],{"class":344},[330,472,405],{"class":344},[330,474,408],{"class":336},[330,476,411],{"class":344},[330,478,480,482,484,486,488,490,493,495,497],{"class":332,"line":479},8,[330,481,417],{"class":340},[330,483,351],{"class":344},[330,485,422],{"class":354},[330,487,358],{"class":425},[330,489,361],{"class":344},[330,491,492],{"class":364},"Onboarding completed",[330,494,361],{"class":344},[330,496,370],{"class":425},[330,498,373],{"class":344},[330,500,502,504,506],{"class":332,"line":501},9,[330,503,442],{"class":344},[330,505,370],{"class":340},[330,507,373],{"class":344},[330,509,511],{"class":332,"line":510},10,[330,512,380],{"emptyLinePlaceholder":379},[330,514,516,518,520,522,524,526,529,531,533,536,540,542,544],{"class":332,"line":515},11,[330,517,386],{"class":340},[330,519,351],{"class":344},[330,521,391],{"class":354},[330,523,358],{"class":340},[330,525,361],{"class":344},[330,527,528],{"class":364},"tour:step-change",[330,530,361],{"class":344},[330,532,402],{"class":344},[330,534,535],{"class":344}," (",[330,537,539],{"class":538},"sHdIc","event",[330,541,370],{"class":344},[330,543,408],{"class":336},[330,545,411],{"class":344},[330,547,549,551,553,555,557,559,562,564,566,569,571,574,576],{"class":332,"line":548},12,[330,550,417],{"class":340},[330,552,351],{"class":344},[330,554,422],{"class":354},[330,556,358],{"class":425},[330,558,361],{"class":344},[330,560,561],{"class":364},"Step changed",[330,563,361],{"class":344},[330,565,402],{"class":344},[330,567,568],{"class":340}," event",[330,570,351],{"class":344},[330,572,573],{"class":340},"detail",[330,575,370],{"class":425},[330,577,373],{"class":344},[330,579,581,583,585],{"class":332,"line":580},13,[330,582,442],{"class":344},[330,584,370],{"class":340},[330,586,373],{"class":344},[330,588,590],{"class":332,"line":589},14,[330,591,380],{"emptyLinePlaceholder":379},[330,593,595,597,599,601,603,605,608,610,612,614,616],{"class":332,"line":594},15,[330,596,386],{"class":340},[330,598,351],{"class":344},[330,600,391],{"class":354},[330,602,358],{"class":340},[330,604,361],{"class":344},[330,606,607],{"class":364},"tour:close",[330,609,361],{"class":344},[330,611,402],{"class":344},[330,613,405],{"class":344},[330,615,408],{"class":336},[330,617,411],{"class":344},[330,619,621,623,625,627,629,631,634,636,638],{"class":332,"line":620},16,[330,622,417],{"class":340},[330,624,351],{"class":344},[330,626,422],{"class":354},[330,628,358],{"class":425},[330,630,361],{"class":344},[330,632,633],{"class":364},"Onboarding dismissed",[330,635,361],{"class":344},[330,637,370],{"class":425},[330,639,373],{"class":344},[330,641,643,645,647],{"class":332,"line":642},17,[330,644,442],{"class":344},[330,646,370],{"class":340},[330,648,373],{"class":344},[316,650,652],{"id":651},"removing-listeners","Removing listeners",[278,654,655,656,659],{},"Use standard ",[282,657,658],{},"removeEventListener"," — pass the same handler reference:",[321,661,663],{"className":323,"code":662,"language":325,"meta":326,"style":326},"const handler = () => console.log('finished');\n\nwidget.addEventListener('tour:finish', handler);\n\n// Later\nwidget.removeEventListener('tour:finish', handler);\n",[282,664,665,698,702,725,729,735],{"__ignoreMap":326},[330,666,667,669,672,674,676,678,681,683,685,687,689,692,694,696],{"class":332,"line":333},[330,668,337],{"class":336},[330,670,671],{"class":340}," handler ",[330,673,345],{"class":344},[330,675,405],{"class":344},[330,677,408],{"class":336},[330,679,680],{"class":340}," console",[330,682,351],{"class":344},[330,684,422],{"class":354},[330,686,358],{"class":340},[330,688,361],{"class":344},[330,690,691],{"class":364},"finished",[330,693,361],{"class":344},[330,695,370],{"class":340},[330,697,373],{"class":344},[330,699,700],{"class":332,"line":376},[330,701,380],{"emptyLinePlaceholder":379},[330,703,704,706,708,710,712,714,716,718,720,723],{"class":332,"line":383},[330,705,386],{"class":340},[330,707,351],{"class":344},[330,709,391],{"class":354},[330,711,358],{"class":340},[330,713,361],{"class":344},[330,715,306],{"class":364},[330,717,361],{"class":344},[330,719,402],{"class":344},[330,721,722],{"class":340}," handler)",[330,724,373],{"class":344},[330,726,727],{"class":332,"line":414},[330,728,380],{"emptyLinePlaceholder":379},[330,730,731],{"class":332,"line":439},[330,732,734],{"class":733},"sHwdD","// Later\n",[330,736,737,739,741,743,745,747,749,751,753,755],{"class":332,"line":449},[330,738,386],{"class":340},[330,740,351],{"class":344},[330,742,658],{"class":354},[330,744,358],{"class":340},[330,746,361],{"class":344},[330,748,306],{"class":364},[330,750,361],{"class":344},[330,752,402],{"class":344},[330,754,722],{"class":340},[330,756,373],{"class":344},[316,758,760],{"id":759},"event-summary","Event summary",[762,763,764,781],"table",{},[765,766,767],"thead",{},[768,769,770,774,777],"tr",{},[771,772,773],"th",{},"Event",[771,775,776],{},"Fires when",[771,778,779],{},[282,780,313],{},[782,783,784,797,808,819,831,843,854,865,877,889,901,913,925,937],"tbody",{},[768,785,786,791,794],{},[787,788,789],"td",{},[282,790,302],{},[787,792,793],{},"Tour initialises on mount",[787,795,796],{},"—",[768,798,799,803,806],{},[787,800,801],{},[282,802,306],{},[787,804,805],{},"Last step is completed",[787,807,796],{},[768,809,810,814,817],{},[787,811,812],{},[282,813,607],{},[787,815,816],{},"Tour is dismissed before completion",[787,818,796],{},[768,820,821,826,829],{},[787,822,823],{},[282,824,825],{},"tour:next",[787,827,828],{},"User advances to the next step",[787,830,796],{},[768,832,833,838,841],{},[787,834,835],{},[282,836,837],{},"tour:prev",[787,839,840],{},"User navigates to the previous step",[787,842,796],{},[768,844,845,849,852],{},[787,846,847],{},[282,848,528],{},[787,850,851],{},"Active step changes",[787,853,796],{},[768,855,856,860,863],{},[787,857,858],{},[282,859,309],{},[787,861,862],{},"Close button is clicked",[787,864,796],{},[768,866,867,872,875],{},[787,868,869],{},[282,870,871],{},"overlay:click",[787,873,874],{},"Overlay backdrop is clicked",[787,876,796],{},[768,878,879,884,887],{},[787,880,881],{},[282,882,883],{},"skip:change",[787,885,886],{},"Skip checkbox changes",[787,888,796],{},[768,890,891,896,899],{},[787,892,893],{},[282,894,895],{},"skip:clear",[787,897,898],{},"Skip state is cleared",[787,900,796],{},[768,902,903,908,911],{},[787,904,905],{},[282,906,907],{},"visibility:show",[787,909,910],{},"Widget becomes visible",[787,912,796],{},[768,914,915,920,923],{},[787,916,917],{},[282,918,919],{},"visibility:hide",[787,921,922],{},"Widget becomes hidden",[787,924,796],{},[768,926,927,932,935],{},[787,928,929],{},[282,930,931],{},"keyboard:next",[787,933,934],{},"ArrowRight is pressed",[787,936,796],{},[768,938,939,944,947],{},[787,940,941],{},[282,942,943],{},"keyboard:prev",[787,945,946],{},"ArrowLeft is pressed",[787,948,796],{},[316,950,952],{"id":951},"notes","Notes",[954,955,956,960,968],"ul",{},[957,958,959],"li",{},"Events bubble and are composed, so they cross shadow DOM boundaries.",[957,961,655,962,964,965,967],{},[282,963,391],{}," / ",[282,966,658],{}," — no custom API needed.",[957,969,970],{},"All handlers are automatically cleaned up when the element is removed from the DOM.",[972,973,974],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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 .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}",{"title":326,"searchDepth":333,"depth":376,"links":976},[977,978,979,980],{"id":318,"depth":376,"text":319},{"id":651,"depth":376,"text":652},{"id":759,"depth":376,"text":760},{"id":951,"depth":376,"text":952},"Listen to tour and widget events on the custom element via addEventListener.","md",null,{},{"title":197,"description":981},"Bu8qePF59ccCMxeuo3_yD2TUeQKsHFmwFbsU674_FNo",[988,990],{"title":193,"path":194,"stem":195,"description":989,"children":-1},"Use the custom element in HTML with attributes and properties.",{"title":206,"path":207,"stem":208,"description":991,"children":-1},"Every BordaConfig option in one live control panel — steps, widget size, components, animation, and scroll.",1784550680326]