[{"data":1,"prerenderedAt":748},["ShallowReactive",2],{"navigation":3,"/examples/highlight":272,"/examples/highlight-surround":743},[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":113,"body":274,"description":736,"extension":737,"links":738,"meta":739,"navigation":740,"path":218,"seo":741,"stem":219,"__hash__":742},"docs/08.examples/04.highlight.md",{"type":275,"value":276,"toc":732},"minimark",[277,290,295,302,535,539,542,547,728],[278,279,281],"div",{"id":280},"highlight-description",[282,283,284,285,289],"p",{},"Use ",[286,287,288],"code",{},"highlight()"," to draw attention to a single element. You can show a full tooltip with buttons, or just the spotlight overlay with no UI.",[291,292,294],"h2",{"id":293},"with-tooltip","With tooltip",[296,297,298],"borda-container",{},[299,300],"borda-component",{":config":301},"{\"steps\":[{\"target\":\"#with-tooltip\",\"title\":\"Single-element spotlight\",\"description\":\"Use highlight() instead of mount() when you only need to draw attention to one element.\",\"placement\":\"bottom-start\"}],\"tourProgress\":false,\"tourButtons\":{\"prev\":false,\"next\":false,\"finish\":{\"label\":\"Got it\"}}}",[278,303,305],{"id":304},"with-tooltip-code",[306,307,312],"pre",{"className":308,"code":309,"language":310,"meta":311,"style":311},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const instance = await borda.highlight(\n  {\n    target: '#element',\n    title: 'Single-element spotlight',\n    description: 'Use highlight() instead of mount() when you only need to draw attention to one element.',\n    placement: ComponentPlacement.BOTTOM_START,\n  },\n  {\n    tourProgress: false,\n    tourButtons: {\n      prev: false,\n      next: false,\n      finish: { label: 'Got it' },\n    },\n  },\n);\n","ts","",[286,313,314,348,354,377,394,411,429,435,440,454,465,477,489,515,521,526],{"__ignoreMap":311},[315,316,319,323,327,331,335,338,341,345],"span",{"class":317,"line":318},"line",1,[315,320,322],{"class":321},"spNyl","const",[315,324,326],{"class":325},"sTEyZ"," instance ",[315,328,330],{"class":329},"sMK4o","=",[315,332,334],{"class":333},"s7zQu"," await",[315,336,337],{"class":325}," borda",[315,339,340],{"class":329},".",[315,342,344],{"class":343},"s2Zo4","highlight",[315,346,347],{"class":325},"(\n",[315,349,351],{"class":317,"line":350},2,[315,352,353],{"class":329},"  {\n",[315,355,357,361,364,367,371,374],{"class":317,"line":356},3,[315,358,360],{"class":359},"swJcz","    target",[315,362,363],{"class":329},":",[315,365,366],{"class":329}," '",[315,368,370],{"class":369},"sfazB","#element",[315,372,373],{"class":329},"'",[315,375,376],{"class":329},",\n",[315,378,380,383,385,387,390,392],{"class":317,"line":379},4,[315,381,382],{"class":359},"    title",[315,384,363],{"class":329},[315,386,366],{"class":329},[315,388,389],{"class":369},"Single-element spotlight",[315,391,373],{"class":329},[315,393,376],{"class":329},[315,395,397,400,402,404,407,409],{"class":317,"line":396},5,[315,398,399],{"class":359},"    description",[315,401,363],{"class":329},[315,403,366],{"class":329},[315,405,406],{"class":369},"Use highlight() instead of mount() when you only need to draw attention to one element.",[315,408,373],{"class":329},[315,410,376],{"class":329},[315,412,414,417,419,422,424,427],{"class":317,"line":413},6,[315,415,416],{"class":359},"    placement",[315,418,363],{"class":329},[315,420,421],{"class":325}," ComponentPlacement",[315,423,340],{"class":329},[315,425,426],{"class":325},"BOTTOM_START",[315,428,376],{"class":329},[315,430,432],{"class":317,"line":431},7,[315,433,434],{"class":329},"  },\n",[315,436,438],{"class":317,"line":437},8,[315,439,353],{"class":329},[315,441,443,446,448,452],{"class":317,"line":442},9,[315,444,445],{"class":359},"    tourProgress",[315,447,363],{"class":329},[315,449,451],{"class":450},"sfNiH"," false",[315,453,376],{"class":329},[315,455,457,460,462],{"class":317,"line":456},10,[315,458,459],{"class":359},"    tourButtons",[315,461,363],{"class":329},[315,463,464],{"class":329}," {\n",[315,466,468,471,473,475],{"class":317,"line":467},11,[315,469,470],{"class":359},"      prev",[315,472,363],{"class":329},[315,474,451],{"class":450},[315,476,376],{"class":329},[315,478,480,483,485,487],{"class":317,"line":479},12,[315,481,482],{"class":359},"      next",[315,484,363],{"class":329},[315,486,451],{"class":450},[315,488,376],{"class":329},[315,490,492,495,497,500,503,505,507,510,512],{"class":317,"line":491},13,[315,493,494],{"class":359},"      finish",[315,496,363],{"class":329},[315,498,499],{"class":329}," {",[315,501,502],{"class":359}," label",[315,504,363],{"class":329},[315,506,366],{"class":329},[315,508,509],{"class":369},"Got it",[315,511,373],{"class":329},[315,513,514],{"class":329}," },\n",[315,516,518],{"class":317,"line":517},14,[315,519,520],{"class":329},"    },\n",[315,522,524],{"class":317,"line":523},15,[315,525,434],{"class":329},[315,527,529,532],{"class":317,"line":528},16,[315,530,531],{"class":325},")",[315,533,534],{"class":329},";\n",[291,536,538],{"id":537},"overlay-only","Overlay only",[282,540,541],{},"Show just the spotlight cutout with no tooltip, buttons, or close button:",[296,543,544],{},[299,545],{":config":546},"{\"steps\":[{\"target\":\"#overlay-only\",\"title\":\"\",\"description\":\"\",\"placement\":\"bottom-start\"}],\"tourOverlay\":{\"padding\":12,\"hasCloseOnBackdropClick\":true},\"tourTooltip\":false,\"tourProgress\":false,\"tourButtons\":false,\"closeButton\":false,\"tourSkip\":false}",[278,548,550],{"id":549},"overlay-only-code",[306,551,553],{"className":308,"code":552,"language":310,"meta":311,"style":311},"const instance = await borda.highlight(\n  {\n    target: '#element',\n    title: '',\n    description: '',\n    placement: ComponentPlacement.BOTTOM_START,\n  },\n  {\n    tourOverlay: { padding: 12, hasCloseOnBackdropClick: true },\n    tourTooltip: false,\n    tourProgress: false,\n    tourButtons: false,\n    closeButton: false,\n    tourSkip: false,\n  },\n);\n",[286,554,555,573,577,591,602,612,626,630,634,665,676,686,696,707,718,722],{"__ignoreMap":311},[315,556,557,559,561,563,565,567,569,571],{"class":317,"line":318},[315,558,322],{"class":321},[315,560,326],{"class":325},[315,562,330],{"class":329},[315,564,334],{"class":333},[315,566,337],{"class":325},[315,568,340],{"class":329},[315,570,344],{"class":343},[315,572,347],{"class":325},[315,574,575],{"class":317,"line":350},[315,576,353],{"class":329},[315,578,579,581,583,585,587,589],{"class":317,"line":356},[315,580,360],{"class":359},[315,582,363],{"class":329},[315,584,366],{"class":329},[315,586,370],{"class":369},[315,588,373],{"class":329},[315,590,376],{"class":329},[315,592,593,595,597,600],{"class":317,"line":379},[315,594,382],{"class":359},[315,596,363],{"class":329},[315,598,599],{"class":329}," ''",[315,601,376],{"class":329},[315,603,604,606,608,610],{"class":317,"line":396},[315,605,399],{"class":359},[315,607,363],{"class":329},[315,609,599],{"class":329},[315,611,376],{"class":329},[315,613,614,616,618,620,622,624],{"class":317,"line":413},[315,615,416],{"class":359},[315,617,363],{"class":329},[315,619,421],{"class":325},[315,621,340],{"class":329},[315,623,426],{"class":325},[315,625,376],{"class":329},[315,627,628],{"class":317,"line":431},[315,629,434],{"class":329},[315,631,632],{"class":317,"line":437},[315,633,353],{"class":329},[315,635,636,639,641,643,646,648,652,655,658,660,663],{"class":317,"line":442},[315,637,638],{"class":359},"    tourOverlay",[315,640,363],{"class":329},[315,642,499],{"class":329},[315,644,645],{"class":359}," padding",[315,647,363],{"class":329},[315,649,651],{"class":650},"sbssI"," 12",[315,653,654],{"class":329},",",[315,656,657],{"class":359}," hasCloseOnBackdropClick",[315,659,363],{"class":329},[315,661,662],{"class":450}," true",[315,664,514],{"class":329},[315,666,667,670,672,674],{"class":317,"line":456},[315,668,669],{"class":359},"    tourTooltip",[315,671,363],{"class":329},[315,673,451],{"class":450},[315,675,376],{"class":329},[315,677,678,680,682,684],{"class":317,"line":467},[315,679,445],{"class":359},[315,681,363],{"class":329},[315,683,451],{"class":450},[315,685,376],{"class":329},[315,687,688,690,692,694],{"class":317,"line":479},[315,689,459],{"class":359},[315,691,363],{"class":329},[315,693,451],{"class":450},[315,695,376],{"class":329},[315,697,698,701,703,705],{"class":317,"line":491},[315,699,700],{"class":359},"    closeButton",[315,702,363],{"class":329},[315,704,451],{"class":450},[315,706,376],{"class":329},[315,708,709,712,714,716],{"class":317,"line":517},[315,710,711],{"class":359},"    tourSkip",[315,713,363],{"class":329},[315,715,451],{"class":450},[315,717,376],{"class":329},[315,719,720],{"class":317,"line":523},[315,721,434],{"class":329},[315,723,724,726],{"class":317,"line":528},[315,725,531],{"class":325},[315,727,534],{"class":329},[729,730,731],"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":311,"searchDepth":318,"depth":350,"links":733},[734,735],{"id":293,"depth":350,"text":294},{"id":537,"depth":350,"text":538},"Spotlight a single element with or without tooltip.","md",null,{},true,{"title":113,"description":736},"afyJu_48KjObt_YO5IGhcCnptkK9DQHwbR1wtLoBt_o",[744,746],{"title":214,"path":215,"stem":216,"description":745,"children":-1},"Override tooltip title, description, and button appearance with customStyles.",{"title":105,"path":221,"stem":222,"description":747,"children":-1},"Different tour configurations at different viewport widths.",1784550681852]