[{"data":1,"prerenderedAt":676},["ShallowReactive",2],{"navigation":3,"/custom-element/usage":272,"/custom-element/usage-surround":671},[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":193,"body":274,"description":665,"extension":666,"links":667,"meta":668,"navigation":380,"path":194,"seo":669,"stem":195,"__hash__":670},"docs/07.custom-element/2.usage.md",{"type":275,"value":276,"toc":660},"minimark",[277,286,291,321,325,328,506,510,513,656],[278,279,280,281,285],"p",{},"After registration, use ",[282,283,284],"code",{},"\u003Cborda-tour-widget>"," like any HTML element. Pass configuration through attributes or JavaScript properties.",[287,288,290],"h2",{"id":289},"html-attributes","HTML attributes",[292,293,298],"pre",{"className":294,"code":295,"language":296,"meta":297,"style":297},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cborda-tour-widget>\u003C/borda-tour-widget>\n","html","",[282,299,300],{"__ignoreMap":297},[301,302,305,309,313,316,318],"span",{"class":303,"line":304},"line",1,[301,306,308],{"class":307},"sMK4o","\u003C",[301,310,312],{"class":311},"swJcz","borda-tour-widget",[301,314,315],{"class":307},">\u003C/",[301,317,312],{"class":311},[301,319,320],{"class":307},">\n",[287,322,324],{"id":323},"javascript-properties","JavaScript properties",[278,326,327],{},"Set the config programmatically after the element is in the DOM:",[292,329,333],{"className":330,"code":331,"language":332,"meta":297,"style":297},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const widget = document.querySelector('borda-tour-widget');\n\nwidget.config = {\n  steps: [\n    {\n      target: '#sidebar',\n      title: 'Navigation',\n      description: 'Browse sections here.',\n      placement: 'middle-end',\n    },\n  ],\n};\n","ts",[282,334,335,375,382,398,410,416,435,452,469,486,492,500],{"__ignoreMap":297},[301,336,337,341,345,348,351,354,358,361,364,367,369,372],{"class":303,"line":304},[301,338,340],{"class":339},"spNyl","const",[301,342,344],{"class":343},"sTEyZ"," widget ",[301,346,347],{"class":307},"=",[301,349,350],{"class":343}," document",[301,352,353],{"class":307},".",[301,355,357],{"class":356},"s2Zo4","querySelector",[301,359,360],{"class":343},"(",[301,362,363],{"class":307},"'",[301,365,312],{"class":366},"sfazB",[301,368,363],{"class":307},[301,370,371],{"class":343},")",[301,373,374],{"class":307},";\n",[301,376,378],{"class":303,"line":377},2,[301,379,381],{"emptyLinePlaceholder":380},true,"\n",[301,383,385,388,390,393,395],{"class":303,"line":384},3,[301,386,387],{"class":343},"widget",[301,389,353],{"class":307},[301,391,392],{"class":343},"config ",[301,394,347],{"class":307},[301,396,397],{"class":307}," {\n",[301,399,401,404,407],{"class":303,"line":400},4,[301,402,403],{"class":311},"  steps",[301,405,406],{"class":307},":",[301,408,409],{"class":343}," [\n",[301,411,413],{"class":303,"line":412},5,[301,414,415],{"class":307},"    {\n",[301,417,419,422,424,427,430,432],{"class":303,"line":418},6,[301,420,421],{"class":311},"      target",[301,423,406],{"class":307},[301,425,426],{"class":307}," '",[301,428,429],{"class":366},"#sidebar",[301,431,363],{"class":307},[301,433,434],{"class":307},",\n",[301,436,438,441,443,445,448,450],{"class":303,"line":437},7,[301,439,440],{"class":311},"      title",[301,442,406],{"class":307},[301,444,426],{"class":307},[301,446,447],{"class":366},"Navigation",[301,449,363],{"class":307},[301,451,434],{"class":307},[301,453,455,458,460,462,465,467],{"class":303,"line":454},8,[301,456,457],{"class":311},"      description",[301,459,406],{"class":307},[301,461,426],{"class":307},[301,463,464],{"class":366},"Browse sections here.",[301,466,363],{"class":307},[301,468,434],{"class":307},[301,470,472,475,477,479,482,484],{"class":303,"line":471},9,[301,473,474],{"class":311},"      placement",[301,476,406],{"class":307},[301,478,426],{"class":307},[301,480,481],{"class":366},"middle-end",[301,483,363],{"class":307},[301,485,434],{"class":307},[301,487,489],{"class":303,"line":488},10,[301,490,491],{"class":307},"    },\n",[301,493,495,498],{"class":303,"line":494},11,[301,496,497],{"class":343},"  ]",[301,499,434],{"class":307},[301,501,503],{"class":303,"line":502},12,[301,504,505],{"class":307},"};\n",[287,507,509],{"id":508},"framework-integration","Framework integration",[278,511,512],{},"The custom element works in any framework — React, Vue, Angular, Svelte, or vanilla HTML:",[292,514,516],{"className":294,"code":515,"language":296,"meta":297,"style":297},"\u003C!-- Vue -->\n\u003Cborda-tour-widget :config=\"tourConfig\" />\n\n\u003C!-- React -->\n\u003Cborda-tour-widget config={tourConfig} />\n\n\u003C!-- Vanilla HTML -->\n\u003Cscript>\n  const el = document.querySelector('borda-tour-widget');\n  el.config = { steps: [...] };\n\u003C/script>\n",[282,517,518,524,546,550,555,571,575,580,589,617,647],{"__ignoreMap":297},[301,519,520],{"class":303,"line":304},[301,521,523],{"class":522},"sHwdD","\u003C!-- Vue -->\n",[301,525,526,528,530,533,535,538,541,543],{"class":303,"line":377},[301,527,308],{"class":307},[301,529,312],{"class":311},[301,531,532],{"class":339}," :config",[301,534,347],{"class":307},[301,536,537],{"class":307},"\"",[301,539,540],{"class":366},"tourConfig",[301,542,537],{"class":307},[301,544,545],{"class":307}," />\n",[301,547,548],{"class":303,"line":384},[301,549,381],{"emptyLinePlaceholder":380},[301,551,552],{"class":303,"line":400},[301,553,554],{"class":522},"\u003C!-- React -->\n",[301,556,557,559,561,564,566,569],{"class":303,"line":412},[301,558,308],{"class":307},[301,560,312],{"class":311},[301,562,563],{"class":339}," config",[301,565,347],{"class":307},[301,567,568],{"class":366},"{tourConfig}",[301,570,545],{"class":307},[301,572,573],{"class":303,"line":418},[301,574,381],{"emptyLinePlaceholder":380},[301,576,577],{"class":303,"line":437},[301,578,579],{"class":522},"\u003C!-- Vanilla HTML -->\n",[301,581,582,584,587],{"class":303,"line":454},[301,583,308],{"class":307},[301,585,586],{"class":311},"script",[301,588,320],{"class":307},[301,590,591,594,597,599,601,603,605,607,609,611,613,615],{"class":303,"line":471},[301,592,593],{"class":339},"  const",[301,595,596],{"class":343}," el ",[301,598,347],{"class":307},[301,600,350],{"class":343},[301,602,353],{"class":307},[301,604,357],{"class":356},[301,606,360],{"class":343},[301,608,363],{"class":307},[301,610,312],{"class":366},[301,612,363],{"class":307},[301,614,371],{"class":343},[301,616,374],{"class":307},[301,618,619,622,624,626,628,631,634,636,639,642,645],{"class":303,"line":488},[301,620,621],{"class":343},"  el",[301,623,353],{"class":307},[301,625,392],{"class":343},[301,627,347],{"class":307},[301,629,630],{"class":307}," {",[301,632,633],{"class":311}," steps",[301,635,406],{"class":307},[301,637,638],{"class":343}," [",[301,640,641],{"class":307},"...",[301,643,644],{"class":343},"] ",[301,646,505],{"class":307},[301,648,649,652,654],{"class":303,"line":494},[301,650,651],{"class":307},"\u003C/",[301,653,586],{"class":311},[301,655,320],{"class":307},[657,658,659],"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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":297,"searchDepth":304,"depth":377,"links":661},[662,663,664],{"id":289,"depth":377,"text":290},{"id":323,"depth":377,"text":324},{"id":508,"depth":377,"text":509},"Use the custom element in HTML with attributes and properties.","md",null,{},{"title":193,"description":665},"oAlDVHTkw7qxxJFbkpFviYziOR7UTQOx74jBbpUW9zs",[672,674],{"title":189,"path":190,"stem":191,"description":673,"children":-1},"Register the custom element with defineBordaElement() and connect styles.",{"title":197,"path":198,"stem":199,"description":675,"children":-1},"Listen to tour and widget events on the custom element via addEventListener.",1784550680190]