[{"data":1,"prerenderedAt":763},["ShallowReactive",2],{"navigation":3,"/api-reference/use-highlight":272,"/api-reference/use-highlight-surround":758},[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":134,"body":274,"description":752,"extension":753,"links":754,"meta":755,"navigation":387,"path":135,"seo":756,"stem":136,"__hash__":757},"docs/05.api-reference/3.use-highlight.md",{"type":275,"value":276,"toc":746},"minimark",[277,290,335,342,346,551,555,637,641,651,655,742],[278,279,280,281,285,286,289],"p",{},"The ",[282,283,284],"code",{},"useBordaHighlight"," hook provides the ",[282,287,288],{},"highlight()"," shortcut — spotlights a single element by mounting a one-step tour through the factory.",[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 { useBordaHighlight } from '@retoo/borda';\n","ts","",[282,298,299],{"__ignoreMap":296},[300,301,304,308,312,316,319,322,325,329,332],"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"," useBordaHighlight",[300,317,318],{"class":310}," }",[300,320,321],{"class":306}," from",[300,323,324],{"class":310}," '",[300,326,328],{"class":327},"sfazB","@retoo/borda",[300,330,331],{"class":310},"'",[300,333,334],{"class":310},";\n",[278,336,337,338,341],{},"In most cases, you don't need this hook directly — use ",[282,339,340],{},"borda.highlight()"," instead, which calls it internally.",[343,344,193],"h2",{"id":345},"usage",[291,347,349],{"className":293,"code":348,"language":295,"meta":296,"style":296},"import { useBorda, useBordaHighlight, ComponentPlacement } from '@retoo/borda';\n\nimport '@retoo/borda/styles';\n\nconst borda = useBorda();\n\n// Equivalent to borda.highlight(...)\nconst instance = await borda.highlight({\n  target: '#important-button',\n  title: 'Try this',\n  description: 'This is the main action.',\n  placement: ComponentPlacement.BOTTOM_CENTER,\n});\n",[282,350,351,382,389,403,408,429,434,441,469,489,506,523,540],{"__ignoreMap":296},[300,352,353,355,357,360,363,365,367,370,372,374,376,378,380],{"class":302,"line":303},[300,354,307],{"class":306},[300,356,311],{"class":310},[300,358,359],{"class":314}," useBorda",[300,361,362],{"class":310},",",[300,364,315],{"class":314},[300,366,362],{"class":310},[300,368,369],{"class":314}," ComponentPlacement",[300,371,318],{"class":310},[300,373,321],{"class":306},[300,375,324],{"class":310},[300,377,328],{"class":327},[300,379,331],{"class":310},[300,381,334],{"class":310},[300,383,385],{"class":302,"line":384},2,[300,386,388],{"emptyLinePlaceholder":387},true,"\n",[300,390,392,394,396,399,401],{"class":302,"line":391},3,[300,393,307],{"class":306},[300,395,324],{"class":310},[300,397,398],{"class":327},"@retoo/borda/styles",[300,400,331],{"class":310},[300,402,334],{"class":310},[300,404,406],{"class":302,"line":405},4,[300,407,388],{"emptyLinePlaceholder":387},[300,409,411,415,418,421,424,427],{"class":302,"line":410},5,[300,412,414],{"class":413},"spNyl","const",[300,416,417],{"class":314}," borda ",[300,419,420],{"class":310},"=",[300,422,359],{"class":423},"s2Zo4",[300,425,426],{"class":314},"()",[300,428,334],{"class":310},[300,430,432],{"class":302,"line":431},6,[300,433,388],{"emptyLinePlaceholder":387},[300,435,437],{"class":302,"line":436},7,[300,438,440],{"class":439},"sHwdD","// Equivalent to borda.highlight(...)\n",[300,442,444,446,449,451,454,457,460,463,466],{"class":302,"line":443},8,[300,445,414],{"class":413},[300,447,448],{"class":314}," instance ",[300,450,420],{"class":310},[300,452,453],{"class":306}," await",[300,455,456],{"class":314}," borda",[300,458,459],{"class":310},".",[300,461,462],{"class":423},"highlight",[300,464,465],{"class":314},"(",[300,467,468],{"class":310},"{\n",[300,470,472,476,479,481,484,486],{"class":302,"line":471},9,[300,473,475],{"class":474},"swJcz","  target",[300,477,478],{"class":310},":",[300,480,324],{"class":310},[300,482,483],{"class":327},"#important-button",[300,485,331],{"class":310},[300,487,488],{"class":310},",\n",[300,490,492,495,497,499,502,504],{"class":302,"line":491},10,[300,493,494],{"class":474},"  title",[300,496,478],{"class":310},[300,498,324],{"class":310},[300,500,501],{"class":327},"Try this",[300,503,331],{"class":310},[300,505,488],{"class":310},[300,507,509,512,514,516,519,521],{"class":302,"line":508},11,[300,510,511],{"class":474},"  description",[300,513,478],{"class":310},[300,515,324],{"class":310},[300,517,518],{"class":327},"This is the main action.",[300,520,331],{"class":310},[300,522,488],{"class":310},[300,524,526,529,531,533,535,538],{"class":302,"line":525},12,[300,527,528],{"class":474},"  placement",[300,530,478],{"class":310},[300,532,369],{"class":314},[300,534,459],{"class":310},[300,536,537],{"class":314},"BOTTOM_CENTER",[300,539,488],{"class":310},[300,541,543,546,549],{"class":302,"line":542},13,[300,544,545],{"class":310},"}",[300,547,548],{"class":314},")",[300,550,334],{"class":310},[343,552,554],{"id":553},"parameters","Parameters",[556,557,558,574],"table",{},[559,560,561],"thead",{},[562,563,564,568,571],"tr",{},[565,566,567],"th",{},"Parameter",[565,569,570],{},"Type",[565,572,573],{},"Description",[575,576,577,593,615],"tbody",{},[562,578,579,585,590],{},[580,581,582],"td",{},[282,583,584],{},"step",[580,586,587],{},[282,588,589],{},"BordaStepConfig",[580,591,592],{},"Step definition (target, title, description, placement, etc.)",[562,594,595,600,605],{},[580,596,597],{},[282,598,599],{},"config",[580,601,602],{},[282,603,604],{},"BordaHighlightConfig",[580,606,607,608,611,612,548],{},"Optional top-level config (same as ",[282,609,610],{},"BordaConfig"," without ",[282,613,614],{},"steps",[562,616,617,622,627],{},[580,618,619],{},[282,620,621],{},"target",[580,623,624],{},[282,625,626],{},"BordaTarget",[580,628,629,630,633,634],{},"Optional mount target — ",[282,631,632],{},"HTMLElement"," or ",[282,635,636],{},"ShadowRoot",[343,638,640],{"id":639},"returns","Returns",[278,642,643,644,647,648,459],{},"Returns a ",[282,645,646],{},"Promise\u003CBordaInstance>"," — the same instance object as ",[282,649,650],{},"mount()",[343,652,654],{"id":653},"interface","Interface",[291,656,658],{"className":293,"code":657,"language":295,"meta":296,"style":296},"interface UseBordaHighlightReturns {\n  highlight: (\n    step: BordaStepConfig,\n    config?: BordaHighlightConfig,\n    target?: BordaTarget\n  ) => Promise\u003CBordaInstance>;\n}\n",[282,659,660,671,681,694,707,717,737],{"__ignoreMap":296},[300,661,662,664,668],{"class":302,"line":303},[300,663,653],{"class":413},[300,665,667],{"class":666},"sBMFI"," UseBordaHighlightReturns",[300,669,670],{"class":310}," {\n",[300,672,673,676,678],{"class":302,"line":384},[300,674,675],{"class":474},"  highlight",[300,677,478],{"class":310},[300,679,680],{"class":314}," (\n",[300,682,683,687,689,692],{"class":302,"line":391},[300,684,686],{"class":685},"sHdIc","    step",[300,688,478],{"class":310},[300,690,691],{"class":666}," BordaStepConfig",[300,693,488],{"class":310},[300,695,696,699,702,705],{"class":302,"line":405},[300,697,698],{"class":685},"    config",[300,700,701],{"class":310},"?:",[300,703,704],{"class":666}," BordaHighlightConfig",[300,706,488],{"class":310},[300,708,709,712,714],{"class":302,"line":410},[300,710,711],{"class":685},"    target",[300,713,701],{"class":310},[300,715,716],{"class":666}," BordaTarget\n",[300,718,719,722,725,728,731,734],{"class":302,"line":431},[300,720,721],{"class":314},"  ) ",[300,723,724],{"class":413},"=>",[300,726,727],{"class":666}," Promise",[300,729,730],{"class":310},"\u003C",[300,732,733],{"class":666},"BordaInstance",[300,735,736],{"class":310},">;\n",[300,738,739],{"class":302,"line":436},[300,740,741],{"class":310},"}\n",[743,744,745],"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}",{"title":296,"searchDepth":303,"depth":384,"links":747},[748,749,750,751],{"id":345,"depth":384,"text":193},{"id":553,"depth":384,"text":554},{"id":639,"depth":384,"text":640},{"id":653,"depth":384,"text":654},"Spotlight a single element without running a full tour.","md",null,{},{"title":134,"description":752},"L1dDG6cfpFmcigwbZoONuKqqh8V1QTW_gpaeuNAMGUM",[759,761],{"title":130,"path":131,"stem":132,"description":760,"children":-1},"Reactive config store with get, set, and merge methods.",{"title":138,"path":139,"stem":140,"description":762,"children":-1},"The object returned by mount() — API, config, responsive, scroll, animation, skip, visibility.",1784550678753]