[{"data":1,"prerenderedAt":870},["ShallowReactive",2],{"navigation":3,"/features/highlight":272,"/features/highlight-surround":865},[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":859,"extension":860,"links":861,"meta":862,"navigation":346,"path":114,"seo":863,"stem":115,"__hash__":864},"docs/04.features/4.highlight.md",{"type":275,"value":276,"toc":854},"minimark",[277,286,290,503,506,510,513,707,711,714,850],[278,279,280,281,285],"p",{},"The ",[282,283,284],"code",{},"highlight()"," method spotlights a single element by mounting a one-step tour through the factory. It accepts the same step data as a regular tour step, plus optional top-level config.",[287,288,193],"h2",{"id":289},"usage",[291,292,297],"pre",{"className":293,"code":294,"language":295,"meta":296,"style":296},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useBorda, ComponentPlacement } from '@retoo/borda';\n\nimport '@retoo/borda/styles';\n\nconst borda = useBorda();\n\nconst instance = await borda.highlight({\n  target: '#important-button',\n  title: 'Try this',\n  description: 'This is the main action button.',\n  placement: ComponentPlacement.BOTTOM_CENTER,\n});\n","ts","",[282,298,299,341,348,362,367,388,393,421,441,458,475,492],{"__ignoreMap":296},[300,301,304,308,312,316,319,322,325,328,331,335,338],"span",{"class":302,"line":303},"line",1,[300,305,307],{"class":306},"s7zQu","import",[300,309,311],{"class":310},"sMK4o"," {",[300,313,315],{"class":314},"sTEyZ"," useBorda",[300,317,318],{"class":310},",",[300,320,321],{"class":314}," ComponentPlacement",[300,323,324],{"class":310}," }",[300,326,327],{"class":306}," from",[300,329,330],{"class":310}," '",[300,332,334],{"class":333},"sfazB","@retoo/borda",[300,336,337],{"class":310},"'",[300,339,340],{"class":310},";\n",[300,342,344],{"class":302,"line":343},2,[300,345,347],{"emptyLinePlaceholder":346},true,"\n",[300,349,351,353,355,358,360],{"class":302,"line":350},3,[300,352,307],{"class":306},[300,354,330],{"class":310},[300,356,357],{"class":333},"@retoo/borda/styles",[300,359,337],{"class":310},[300,361,340],{"class":310},[300,363,365],{"class":302,"line":364},4,[300,366,347],{"emptyLinePlaceholder":346},[300,368,370,374,377,380,383,386],{"class":302,"line":369},5,[300,371,373],{"class":372},"spNyl","const",[300,375,376],{"class":314}," borda ",[300,378,379],{"class":310},"=",[300,381,315],{"class":382},"s2Zo4",[300,384,385],{"class":314},"()",[300,387,340],{"class":310},[300,389,391],{"class":302,"line":390},6,[300,392,347],{"emptyLinePlaceholder":346},[300,394,396,398,401,403,406,409,412,415,418],{"class":302,"line":395},7,[300,397,373],{"class":372},[300,399,400],{"class":314}," instance ",[300,402,379],{"class":310},[300,404,405],{"class":306}," await",[300,407,408],{"class":314}," borda",[300,410,411],{"class":310},".",[300,413,414],{"class":382},"highlight",[300,416,417],{"class":314},"(",[300,419,420],{"class":310},"{\n",[300,422,424,428,431,433,436,438],{"class":302,"line":423},8,[300,425,427],{"class":426},"swJcz","  target",[300,429,430],{"class":310},":",[300,432,330],{"class":310},[300,434,435],{"class":333},"#important-button",[300,437,337],{"class":310},[300,439,440],{"class":310},",\n",[300,442,444,447,449,451,454,456],{"class":302,"line":443},9,[300,445,446],{"class":426},"  title",[300,448,430],{"class":310},[300,450,330],{"class":310},[300,452,453],{"class":333},"Try this",[300,455,337],{"class":310},[300,457,440],{"class":310},[300,459,461,464,466,468,471,473],{"class":302,"line":460},10,[300,462,463],{"class":426},"  description",[300,465,430],{"class":310},[300,467,330],{"class":310},[300,469,470],{"class":333},"This is the main action button.",[300,472,337],{"class":310},[300,474,440],{"class":310},[300,476,478,481,483,485,487,490],{"class":302,"line":477},11,[300,479,480],{"class":426},"  placement",[300,482,430],{"class":310},[300,484,321],{"class":314},[300,486,411],{"class":310},[300,488,489],{"class":314},"BOTTOM_CENTER",[300,491,440],{"class":310},[300,493,495,498,501],{"class":302,"line":494},12,[300,496,497],{"class":310},"}",[300,499,500],{"class":314},")",[300,502,340],{"class":310},[278,504,505],{},"The returned instance is identical to a regular tour instance — you can listen to events, control visibility, and unmount it the same way.",[287,507,509],{"id":508},"with-config","With config",[278,511,512],{},"Pass a second argument to customize the widget appearance:",[291,514,516],{"className":293,"code":515,"language":295,"meta":296,"style":296},"const instance = await borda.highlight(\n  {\n    target: '#element',\n    title: 'Title',\n    description: 'Description',\n    placement: ComponentPlacement.BOTTOM_CENTER,\n  },\n  {\n    closeButton: false,\n    tourButtons: false,\n    tourProgress: false,\n    animation: {\n      tooltip: {\n        enterDuration: 300,\n      },\n    },\n  },\n);\n",[282,517,518,537,542,558,574,590,605,610,614,627,638,649,659,669,683,689,695,700],{"__ignoreMap":296},[300,519,520,522,524,526,528,530,532,534],{"class":302,"line":303},[300,521,373],{"class":372},[300,523,400],{"class":314},[300,525,379],{"class":310},[300,527,405],{"class":306},[300,529,408],{"class":314},[300,531,411],{"class":310},[300,533,414],{"class":382},[300,535,536],{"class":314},"(\n",[300,538,539],{"class":302,"line":343},[300,540,541],{"class":310},"  {\n",[300,543,544,547,549,551,554,556],{"class":302,"line":350},[300,545,546],{"class":426},"    target",[300,548,430],{"class":310},[300,550,330],{"class":310},[300,552,553],{"class":333},"#element",[300,555,337],{"class":310},[300,557,440],{"class":310},[300,559,560,563,565,567,570,572],{"class":302,"line":364},[300,561,562],{"class":426},"    title",[300,564,430],{"class":310},[300,566,330],{"class":310},[300,568,569],{"class":333},"Title",[300,571,337],{"class":310},[300,573,440],{"class":310},[300,575,576,579,581,583,586,588],{"class":302,"line":369},[300,577,578],{"class":426},"    description",[300,580,430],{"class":310},[300,582,330],{"class":310},[300,584,585],{"class":333},"Description",[300,587,337],{"class":310},[300,589,440],{"class":310},[300,591,592,595,597,599,601,603],{"class":302,"line":390},[300,593,594],{"class":426},"    placement",[300,596,430],{"class":310},[300,598,321],{"class":314},[300,600,411],{"class":310},[300,602,489],{"class":314},[300,604,440],{"class":310},[300,606,607],{"class":302,"line":395},[300,608,609],{"class":310},"  },\n",[300,611,612],{"class":302,"line":423},[300,613,541],{"class":310},[300,615,616,619,621,625],{"class":302,"line":443},[300,617,618],{"class":426},"    closeButton",[300,620,430],{"class":310},[300,622,624],{"class":623},"sfNiH"," false",[300,626,440],{"class":310},[300,628,629,632,634,636],{"class":302,"line":460},[300,630,631],{"class":426},"    tourButtons",[300,633,430],{"class":310},[300,635,624],{"class":623},[300,637,440],{"class":310},[300,639,640,643,645,647],{"class":302,"line":477},[300,641,642],{"class":426},"    tourProgress",[300,644,430],{"class":310},[300,646,624],{"class":623},[300,648,440],{"class":310},[300,650,651,654,656],{"class":302,"line":494},[300,652,653],{"class":426},"    animation",[300,655,430],{"class":310},[300,657,658],{"class":310}," {\n",[300,660,662,665,667],{"class":302,"line":661},13,[300,663,664],{"class":426},"      tooltip",[300,666,430],{"class":310},[300,668,658],{"class":310},[300,670,672,675,677,681],{"class":302,"line":671},14,[300,673,674],{"class":426},"        enterDuration",[300,676,430],{"class":310},[300,678,680],{"class":679},"sbssI"," 300",[300,682,440],{"class":310},[300,684,686],{"class":302,"line":685},15,[300,687,688],{"class":310},"      },\n",[300,690,692],{"class":302,"line":691},16,[300,693,694],{"class":310},"    },\n",[300,696,698],{"class":302,"line":697},17,[300,699,609],{"class":310},[300,701,703,705],{"class":302,"line":702},18,[300,704,500],{"class":314},[300,706,340],{"class":310},[287,708,710],{"id":709},"target","Target",[278,712,713],{},"Pass a third argument to specify the mount target:",[291,715,717],{"className":293,"code":716,"language":295,"meta":296,"style":296},"const container = document.getElementById('widget-root');\n\nconst instance = await borda.highlight(\n  { target: '#el', title: 'Title', description: 'Text', placement: 'bottom-center' },\n  {},\n  container,\n);\n",[282,718,719,749,753,771,832,837,844],{"__ignoreMap":296},[300,720,721,723,726,728,731,733,736,738,740,743,745,747],{"class":302,"line":303},[300,722,373],{"class":372},[300,724,725],{"class":314}," container ",[300,727,379],{"class":310},[300,729,730],{"class":314}," document",[300,732,411],{"class":310},[300,734,735],{"class":382},"getElementById",[300,737,417],{"class":314},[300,739,337],{"class":310},[300,741,742],{"class":333},"widget-root",[300,744,337],{"class":310},[300,746,500],{"class":314},[300,748,340],{"class":310},[300,750,751],{"class":302,"line":343},[300,752,347],{"emptyLinePlaceholder":346},[300,754,755,757,759,761,763,765,767,769],{"class":302,"line":350},[300,756,373],{"class":372},[300,758,400],{"class":314},[300,760,379],{"class":310},[300,762,405],{"class":306},[300,764,408],{"class":314},[300,766,411],{"class":310},[300,768,414],{"class":382},[300,770,536],{"class":314},[300,772,773,776,779,781,783,786,788,790,793,795,797,799,801,803,806,808,810,813,815,817,820,822,824,827,829],{"class":302,"line":364},[300,774,775],{"class":310},"  {",[300,777,778],{"class":426}," target",[300,780,430],{"class":310},[300,782,330],{"class":310},[300,784,785],{"class":333},"#el",[300,787,337],{"class":310},[300,789,318],{"class":310},[300,791,792],{"class":426}," title",[300,794,430],{"class":310},[300,796,330],{"class":310},[300,798,569],{"class":333},[300,800,337],{"class":310},[300,802,318],{"class":310},[300,804,805],{"class":426}," description",[300,807,430],{"class":310},[300,809,330],{"class":310},[300,811,812],{"class":333},"Text",[300,814,337],{"class":310},[300,816,318],{"class":310},[300,818,819],{"class":426}," placement",[300,821,430],{"class":310},[300,823,330],{"class":310},[300,825,826],{"class":333},"bottom-center",[300,828,337],{"class":310},[300,830,831],{"class":310}," },\n",[300,833,834],{"class":302,"line":369},[300,835,836],{"class":310},"  {},\n",[300,838,839,842],{"class":302,"line":390},[300,840,841],{"class":314},"  container",[300,843,440],{"class":310},[300,845,846,848],{"class":302,"line":395},[300,847,500],{"class":314},[300,849,340],{"class":310},[851,852,853],"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 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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":296,"searchDepth":303,"depth":343,"links":855},[856,857,858],{"id":289,"depth":343,"text":193},{"id":508,"depth":343,"text":509},{"id":709,"depth":343,"text":710},"Spotlight a single element without running a full tour.","md",null,{},{"title":113,"description":859},"DCjcfJxrJ6hDgh4JXVbNgVGE49lt3k57MPUBeu0ZNe4",[866,868],{"title":109,"path":110,"stem":111,"description":867,"children":-1},"Navigate the tour with ArrowRight, ArrowLeft, and Escape keys.",{"title":117,"path":118,"stem":119,"description":869,"children":-1},"Layered config overrides for responsive breakpoints and per-step customization.",1784550678359]