[{"data":1,"prerenderedAt":976},["ShallowReactive",2],{"navigation":3,"/components/overlay":272,"/components/overlay-surround":971},[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":69,"body":274,"description":964,"extension":965,"links":966,"meta":967,"navigation":968,"path":70,"seo":969,"stem":71,"__hash__":970},"docs/03.components/2.overlay.md",{"type":275,"value":276,"toc":958},"minimark",[277,286,291,445,667,671,726,730,836,840,954],[278,279,280,281,285],"p",{},"The tour overlay renders a full-screen SVG backdrop with a cutout around the target element. It draws attention to the active step and dims the rest of the page. Pass ",[282,283,284],"code",{},"false"," to disable.",[287,288,290],"h2",{"id":289},"config","Config",[292,293,294,313],"table",{},[295,296,297],"thead",{},[298,299,300,304,307,310],"tr",{},[301,302,303],"th",{},"Property",[301,305,306],{},"Type",[301,308,309],{},"Default",[301,311,312],{},"Description",[314,315,316,337,355,375,393,411,428],"tbody",{},[298,317,318,324,329,334],{},[319,320,321],"td",{},[282,322,323],{},"padding",[319,325,326],{},[282,327,328],{},"number",[319,330,331],{},[282,332,333],{},"8",[319,335,336],{},"Pixels the cutout extends beyond the target",[298,338,339,344,348,352],{},[319,340,341],{},[282,342,343],{},"borderRadius",[319,345,346],{},[282,347,328],{},[319,349,350],{},[282,351,333],{},[319,353,354],{},"Corner radius of the cutout in pixels",[298,356,357,362,367,372],{},[319,358,359],{},[282,360,361],{},"isAnimated",[319,363,364],{},[282,365,366],{},"boolean",[319,368,369],{},[282,370,371],{},"true",[319,373,374],{},"Whether the spotlight animates between steps",[298,376,377,382,386,390],{},[319,378,379],{},[282,380,381],{},"hasCloseOnBackdropClick",[319,383,384],{},[282,385,366],{},[319,387,388],{},[282,389,371],{},[319,391,392],{},"Close the tour when clicking outside the target",[298,394,395,400,405,408],{},[319,396,397],{},[282,398,399],{},"aria",[319,401,402],{},[282,403,404],{},"Partial\u003CComponentAriaProps>",[319,406,407],{},"—",[319,409,410],{},"ARIA attributes",[298,412,413,418,423,425],{},[319,414,415],{},[282,416,417],{},"customClasses",[319,419,420],{},[282,421,422],{},"Partial\u003CBordaTourOverlayComponentClasses>",[319,424,407],{},[319,426,427],{},"Custom CSS classes",[298,429,430,435,440,442],{},[319,431,432],{},[282,433,434],{},"customStyles",[319,436,437],{},[282,438,439],{},"Partial\u003CBordaTourOverlayComponentStyles>",[319,441,407],{},[319,443,444],{},"Custom inline styles",[446,447,452],"pre",{"className":448,"code":449,"language":450,"meta":451,"style":451},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await borda.mount({\n  steps: [\n    {\n      target: '#sidebar',\n      title: 'Navigation',\n      description: 'Browse sections here.',\n      placement: 'middle-end',\n    },\n  ],\n  tourOverlay: {\n    padding: 12,\n    borderRadius: 12,\n    isAnimated: true,\n    hasCloseOnBackdropClick: true,\n  },\n});\n","ts","",[282,453,454,481,494,500,521,538,555,572,578,586,597,611,623,637,649,655],{"__ignoreMap":451},[455,456,459,463,467,471,475,478],"span",{"class":457,"line":458},"line",1,[455,460,462],{"class":461},"s7zQu","await",[455,464,466],{"class":465},"sTEyZ"," borda",[455,468,470],{"class":469},"sMK4o",".",[455,472,474],{"class":473},"s2Zo4","mount",[455,476,477],{"class":465},"(",[455,479,480],{"class":469},"{\n",[455,482,484,488,491],{"class":457,"line":483},2,[455,485,487],{"class":486},"swJcz","  steps",[455,489,490],{"class":469},":",[455,492,493],{"class":465}," [\n",[455,495,497],{"class":457,"line":496},3,[455,498,499],{"class":469},"    {\n",[455,501,503,506,508,511,515,518],{"class":457,"line":502},4,[455,504,505],{"class":486},"      target",[455,507,490],{"class":469},[455,509,510],{"class":469}," '",[455,512,514],{"class":513},"sfazB","#sidebar",[455,516,517],{"class":469},"'",[455,519,520],{"class":469},",\n",[455,522,524,527,529,531,534,536],{"class":457,"line":523},5,[455,525,526],{"class":486},"      title",[455,528,490],{"class":469},[455,530,510],{"class":469},[455,532,533],{"class":513},"Navigation",[455,535,517],{"class":469},[455,537,520],{"class":469},[455,539,541,544,546,548,551,553],{"class":457,"line":540},6,[455,542,543],{"class":486},"      description",[455,545,490],{"class":469},[455,547,510],{"class":469},[455,549,550],{"class":513},"Browse sections here.",[455,552,517],{"class":469},[455,554,520],{"class":469},[455,556,558,561,563,565,568,570],{"class":457,"line":557},7,[455,559,560],{"class":486},"      placement",[455,562,490],{"class":469},[455,564,510],{"class":469},[455,566,567],{"class":513},"middle-end",[455,569,517],{"class":469},[455,571,520],{"class":469},[455,573,575],{"class":457,"line":574},8,[455,576,577],{"class":469},"    },\n",[455,579,581,584],{"class":457,"line":580},9,[455,582,583],{"class":465},"  ]",[455,585,520],{"class":469},[455,587,589,592,594],{"class":457,"line":588},10,[455,590,591],{"class":486},"  tourOverlay",[455,593,490],{"class":469},[455,595,596],{"class":469}," {\n",[455,598,600,603,605,609],{"class":457,"line":599},11,[455,601,602],{"class":486},"    padding",[455,604,490],{"class":469},[455,606,608],{"class":607},"sbssI"," 12",[455,610,520],{"class":469},[455,612,614,617,619,621],{"class":457,"line":613},12,[455,615,616],{"class":486},"    borderRadius",[455,618,490],{"class":469},[455,620,608],{"class":607},[455,622,520],{"class":469},[455,624,626,629,631,635],{"class":457,"line":625},13,[455,627,628],{"class":486},"    isAnimated",[455,630,490],{"class":469},[455,632,634],{"class":633},"sfNiH"," true",[455,636,520],{"class":469},[455,638,640,643,645,647],{"class":457,"line":639},14,[455,641,642],{"class":486},"    hasCloseOnBackdropClick",[455,644,490],{"class":469},[455,646,634],{"class":633},[455,648,520],{"class":469},[455,650,652],{"class":457,"line":651},15,[455,653,654],{"class":469},"  },\n",[455,656,658,661,664],{"class":457,"line":657},16,[455,659,660],{"class":469},"}",[455,662,663],{"class":465},")",[455,665,666],{"class":469},";\n",[287,668,670],{"id":669},"disabling","Disabling",[446,672,674],{"className":448,"code":673,"language":450,"meta":451,"style":451},"await borda.mount({\n  steps: [...],\n  tourOverlay: false,\n});\n",[282,675,676,690,707,718],{"__ignoreMap":451},[455,677,678,680,682,684,686,688],{"class":457,"line":458},[455,679,462],{"class":461},[455,681,466],{"class":465},[455,683,470],{"class":469},[455,685,474],{"class":473},[455,687,477],{"class":465},[455,689,480],{"class":469},[455,691,692,694,696,699,702,705],{"class":457,"line":483},[455,693,487],{"class":486},[455,695,490],{"class":469},[455,697,698],{"class":465}," [",[455,700,701],{"class":469},"...",[455,703,704],{"class":465},"]",[455,706,520],{"class":469},[455,708,709,711,713,716],{"class":457,"line":496},[455,710,591],{"class":486},[455,712,490],{"class":469},[455,714,715],{"class":633}," false",[455,717,520],{"class":469},[455,719,720,722,724],{"class":457,"line":502},[455,721,660],{"class":469},[455,723,663],{"class":465},[455,725,666],{"class":469},[287,727,729],{"id":728},"customization","Customization",[446,731,733],{"className":448,"code":732,"language":450,"meta":451,"style":451},"tourOverlay: {\n  customClasses: {\n    root: 'my-overlay',\n    backdrop: 'opacity-50',\n  },\n  customStyles: {\n    backdrop: {\n      fill: 'rgba(0, 0, 0, 0.7)',\n    },\n  },\n}\n",[282,734,735,745,754,770,786,790,799,807,823,827,831],{"__ignoreMap":451},[455,736,737,741,743],{"class":457,"line":458},[455,738,740],{"class":739},"sBMFI","tourOverlay",[455,742,490],{"class":469},[455,744,596],{"class":469},[455,746,747,750,752],{"class":457,"line":483},[455,748,749],{"class":739},"  customClasses",[455,751,490],{"class":469},[455,753,596],{"class":469},[455,755,756,759,761,763,766,768],{"class":457,"line":496},[455,757,758],{"class":739},"    root",[455,760,490],{"class":469},[455,762,510],{"class":469},[455,764,765],{"class":513},"my-overlay",[455,767,517],{"class":469},[455,769,520],{"class":469},[455,771,772,775,777,779,782,784],{"class":457,"line":502},[455,773,774],{"class":739},"    backdrop",[455,776,490],{"class":469},[455,778,510],{"class":469},[455,780,781],{"class":513},"opacity-50",[455,783,517],{"class":469},[455,785,520],{"class":469},[455,787,788],{"class":457,"line":523},[455,789,654],{"class":469},[455,791,792,795,797],{"class":457,"line":540},[455,793,794],{"class":739},"  customStyles",[455,796,490],{"class":469},[455,798,596],{"class":469},[455,800,801,803,805],{"class":457,"line":557},[455,802,774],{"class":739},[455,804,490],{"class":469},[455,806,596],{"class":469},[455,808,809,812,814,816,819,821],{"class":457,"line":574},[455,810,811],{"class":739},"      fill",[455,813,490],{"class":469},[455,815,510],{"class":469},[455,817,818],{"class":513},"rgba(0, 0, 0, 0.7)",[455,820,517],{"class":469},[455,822,520],{"class":469},[455,824,825],{"class":457,"line":580},[455,826,577],{"class":469},[455,828,829],{"class":457,"line":588},[455,830,654],{"class":469},[455,832,833],{"class":457,"line":599},[455,834,835],{"class":469},"}\n",[287,837,839],{"id":838},"interface","Interface",[446,841,843],{"className":448,"code":842,"language":450,"meta":451,"style":451},"interface BordaTourOverlayProps {\n  padding: number;\n  borderRadius: number;\n  isAnimated: boolean;\n  hasCloseOnBackdropClick: boolean;\n  aria: Partial\u003CComponentAriaProps>;\n  customClasses: Partial\u003CBordaTourOverlayComponentClasses>;\n  customStyles: Partial\u003CBordaTourOverlayComponentStyles>;\n}\n",[282,844,845,855,867,878,890,901,920,935,950],{"__ignoreMap":451},[455,846,847,850,853],{"class":457,"line":458},[455,848,838],{"class":849},"spNyl",[455,851,852],{"class":739}," BordaTourOverlayProps",[455,854,596],{"class":469},[455,856,857,860,862,865],{"class":457,"line":483},[455,858,859],{"class":486},"  padding",[455,861,490],{"class":469},[455,863,864],{"class":739}," number",[455,866,666],{"class":469},[455,868,869,872,874,876],{"class":457,"line":496},[455,870,871],{"class":486},"  borderRadius",[455,873,490],{"class":469},[455,875,864],{"class":739},[455,877,666],{"class":469},[455,879,880,883,885,888],{"class":457,"line":502},[455,881,882],{"class":486},"  isAnimated",[455,884,490],{"class":469},[455,886,887],{"class":739}," boolean",[455,889,666],{"class":469},[455,891,892,895,897,899],{"class":457,"line":523},[455,893,894],{"class":486},"  hasCloseOnBackdropClick",[455,896,490],{"class":469},[455,898,887],{"class":739},[455,900,666],{"class":469},[455,902,903,906,908,911,914,917],{"class":457,"line":540},[455,904,905],{"class":486},"  aria",[455,907,490],{"class":469},[455,909,910],{"class":739}," Partial",[455,912,913],{"class":469},"\u003C",[455,915,916],{"class":739},"ComponentAriaProps",[455,918,919],{"class":469},">;\n",[455,921,922,924,926,928,930,933],{"class":457,"line":557},[455,923,749],{"class":486},[455,925,490],{"class":469},[455,927,910],{"class":739},[455,929,913],{"class":469},[455,931,932],{"class":739},"BordaTourOverlayComponentClasses",[455,934,919],{"class":469},[455,936,937,939,941,943,945,948],{"class":457,"line":574},[455,938,794],{"class":486},[455,940,490],{"class":469},[455,942,910],{"class":739},[455,944,913],{"class":469},[455,946,947],{"class":739},"BordaTourOverlayComponentStyles",[455,949,919],{"class":469},[455,951,952],{"class":457,"line":580},[455,953,835],{"class":469},[955,956,957],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":451,"searchDepth":458,"depth":483,"links":959},[960,961,962,963],{"id":289,"depth":483,"text":290},{"id":669,"depth":483,"text":670},{"id":728,"depth":483,"text":729},{"id":838,"depth":483,"text":839},"Spotlight overlay that highlights the target element with a cutout.","md",null,{},true,{"title":69,"description":964},"mgSc0frVewpjmn8si02xyhZKRcb4RRQL_51WQ1h4P8g",[972,974],{"title":65,"path":66,"stem":67,"description":973,"children":-1},"The root wrapper that hosts the tour widget.",{"title":73,"path":74,"stem":75,"description":975,"children":-1},"Positioned tooltip with title, description, arrow, and auto-flip placement.",1784550676809]