[{"data":1,"prerenderedAt":869},["ShallowReactive",2],{"navigation":3,"/examples/skip":272,"/examples/skip-surround":864},[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":230,"body":274,"description":858,"extension":859,"links":860,"meta":861,"navigation":394,"path":231,"seo":862,"stem":232,"__hash__":863},"docs/08.examples/08.skip.md",{"type":275,"value":276,"toc":854},"minimark",[277,285,290,324,331,334,793,850],[278,279,281],"div",{"id":280},"skip-description",[282,283,284],"p",{},"A common onboarding pattern: show the tour once, let users opt out, and don't bother them again. Borda handles this out of the box with a \"Don't show again\" checkbox and localStorage persistence.",[286,287,289],"h2",{"id":288},"how-it-works","How it works",[278,291,293,321],{"id":292},"how-it-works-content",[294,295,296,305,312,318],"ol",{},[297,298,299,300,304],"li",{},"Borda checks ",[301,302,303],"code",{},"localStorage"," for the skip flag under the configured key.",[297,306,307,308,311],{},"If the flag is set, ",[301,309,310],{},"borda.mount()"," still works — but your app can skip calling it entirely.",[297,313,314,315,317],{},"When the user checks \"Don't show again\", the flag is written to ",[301,316,303],{}," automatically.",[297,319,320],{},"On the next visit, your app reads the flag and skips the onboarding.",[282,322,323],{},"The skip state is managed by Borda — you only need to wrap the mount call in a check.",[325,326,327],"borda-container",{},[328,329],"borda-component",{":config":330},"{\"steps\":[{\"target\":\"#page-header\",\"title\":\"Page header\",\"description\":\"Every page starts with a header — the spotlight draws attention to it.\",\"placement\":\"bottom-start\"},{\"target\":\"#skip-description\",\"title\":\"Description\",\"description\":\"Borda handles this out of the box — a checkbox, localStorage persistence, and a simple API.\",\"placement\":\"bottom-start\"},{\"target\":\"#how-it-works\",\"title\":\"How it works\",\"description\":\"Borda checks localStorage for the skip flag. When checked, the flag is written automatically.\",\"placement\":\"middle-end\"},{\"target\":\"#how-it-works-content\",\"title\":\"Four steps\",\"description\":\"The skip flow has four steps — check, mount, check box, and read flag on next visit.\",\"placement\":\"middle-start\"},{\"target\":\"#code\",\"title\":\"Code section\",\"description\":\"The code shows the full pattern — check localStorage, configure storageKey, clear with API.\",\"placement\":\"top-end\"}],\"skip\":{\"storageKey\":\"my-app-onboarding\"},\"tourSkip\":{\"label\":\"Do not show this again\"}}",[286,332,333],{"id":301},"Code",[278,335,337],{"id":336},"code-block",[338,339,345],"pre",{"className":340,"code":341,"filename":342,"language":343,"meta":344,"style":344},"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 isSkipped = localStorage.getItem('my-app-onboarding') === 'true';\n\nif (!isSkipped) {\n  const instance = await borda.mount({\n    steps: [\n      {\n        target: '#page-header',\n        title: 'Welcome!',\n        description: 'This tour will help you get started.',\n        placement: ComponentPlacement.BOTTOM_START,\n      },\n      {\n        target: '#page-content',\n        title: 'Documentation',\n        description: 'Read through the guides to learn how Borda works.',\n        placement: ComponentPlacement.MIDDLE_END,\n      },\n    ],\n    skip: {\n      storageKey: 'my-app-onboarding',\n    },\n    tourSkip: {\n      label: 'Do not show this again',\n    },\n  });\n}\n","main.ts","ts","",[301,346,347,389,396,410,415,436,441,485,490,508,536,548,554,572,589,606,623,629,634,650,666,682,698,703,711,722,738,744,754,771,776,787],{"__ignoreMap":344},[348,349,352,356,360,364,367,370,373,376,379,383,386],"span",{"class":350,"line":351},"line",1,[348,353,355],{"class":354},"s7zQu","import",[348,357,359],{"class":358},"sMK4o"," {",[348,361,363],{"class":362},"sTEyZ"," useBorda",[348,365,366],{"class":358},",",[348,368,369],{"class":362}," ComponentPlacement",[348,371,372],{"class":358}," }",[348,374,375],{"class":354}," from",[348,377,378],{"class":358}," '",[348,380,382],{"class":381},"sfazB","@retoo/borda",[348,384,385],{"class":358},"'",[348,387,388],{"class":358},";\n",[348,390,392],{"class":350,"line":391},2,[348,393,395],{"emptyLinePlaceholder":394},true,"\n",[348,397,399,401,403,406,408],{"class":350,"line":398},3,[348,400,355],{"class":354},[348,402,378],{"class":358},[348,404,405],{"class":381},"@retoo/borda/styles",[348,407,385],{"class":358},[348,409,388],{"class":358},[348,411,413],{"class":350,"line":412},4,[348,414,395],{"emptyLinePlaceholder":394},[348,416,418,422,425,428,431,434],{"class":350,"line":417},5,[348,419,421],{"class":420},"spNyl","const",[348,423,424],{"class":362}," borda ",[348,426,427],{"class":358},"=",[348,429,363],{"class":430},"s2Zo4",[348,432,433],{"class":362},"()",[348,435,388],{"class":358},[348,437,439],{"class":350,"line":438},6,[348,440,395],{"emptyLinePlaceholder":394},[348,442,444,446,449,451,454,457,460,463,465,468,470,473,476,478,481,483],{"class":350,"line":443},7,[348,445,421],{"class":420},[348,447,448],{"class":362}," isSkipped ",[348,450,427],{"class":358},[348,452,453],{"class":362}," localStorage",[348,455,456],{"class":358},".",[348,458,459],{"class":430},"getItem",[348,461,462],{"class":362},"(",[348,464,385],{"class":358},[348,466,467],{"class":381},"my-app-onboarding",[348,469,385],{"class":358},[348,471,472],{"class":362},") ",[348,474,475],{"class":358},"===",[348,477,378],{"class":358},[348,479,480],{"class":381},"true",[348,482,385],{"class":358},[348,484,388],{"class":358},[348,486,488],{"class":350,"line":487},8,[348,489,395],{"emptyLinePlaceholder":394},[348,491,493,496,499,502,505],{"class":350,"line":492},9,[348,494,495],{"class":354},"if",[348,497,498],{"class":362}," (",[348,500,501],{"class":358},"!",[348,503,504],{"class":362},"isSkipped) ",[348,506,507],{"class":358},"{\n",[348,509,511,514,517,520,523,526,528,531,534],{"class":350,"line":510},10,[348,512,513],{"class":420},"  const",[348,515,516],{"class":362}," instance",[348,518,519],{"class":358}," =",[348,521,522],{"class":354}," await",[348,524,525],{"class":362}," borda",[348,527,456],{"class":358},[348,529,530],{"class":430},"mount",[348,532,462],{"class":533},"swJcz",[348,535,507],{"class":358},[348,537,539,542,545],{"class":350,"line":538},11,[348,540,541],{"class":533},"    steps",[348,543,544],{"class":358},":",[348,546,547],{"class":533}," [\n",[348,549,551],{"class":350,"line":550},12,[348,552,553],{"class":358},"      {\n",[348,555,557,560,562,564,567,569],{"class":350,"line":556},13,[348,558,559],{"class":533},"        target",[348,561,544],{"class":358},[348,563,378],{"class":358},[348,565,566],{"class":381},"#page-header",[348,568,385],{"class":358},[348,570,571],{"class":358},",\n",[348,573,575,578,580,582,585,587],{"class":350,"line":574},14,[348,576,577],{"class":533},"        title",[348,579,544],{"class":358},[348,581,378],{"class":358},[348,583,584],{"class":381},"Welcome!",[348,586,385],{"class":358},[348,588,571],{"class":358},[348,590,592,595,597,599,602,604],{"class":350,"line":591},15,[348,593,594],{"class":533},"        description",[348,596,544],{"class":358},[348,598,378],{"class":358},[348,600,601],{"class":381},"This tour will help you get started.",[348,603,385],{"class":358},[348,605,571],{"class":358},[348,607,609,612,614,616,618,621],{"class":350,"line":608},16,[348,610,611],{"class":533},"        placement",[348,613,544],{"class":358},[348,615,369],{"class":362},[348,617,456],{"class":358},[348,619,620],{"class":362},"BOTTOM_START",[348,622,571],{"class":358},[348,624,626],{"class":350,"line":625},17,[348,627,628],{"class":358},"      },\n",[348,630,632],{"class":350,"line":631},18,[348,633,553],{"class":358},[348,635,637,639,641,643,646,648],{"class":350,"line":636},19,[348,638,559],{"class":533},[348,640,544],{"class":358},[348,642,378],{"class":358},[348,644,645],{"class":381},"#page-content",[348,647,385],{"class":358},[348,649,571],{"class":358},[348,651,653,655,657,659,662,664],{"class":350,"line":652},20,[348,654,577],{"class":533},[348,656,544],{"class":358},[348,658,378],{"class":358},[348,660,661],{"class":381},"Documentation",[348,663,385],{"class":358},[348,665,571],{"class":358},[348,667,669,671,673,675,678,680],{"class":350,"line":668},21,[348,670,594],{"class":533},[348,672,544],{"class":358},[348,674,378],{"class":358},[348,676,677],{"class":381},"Read through the guides to learn how Borda works.",[348,679,385],{"class":358},[348,681,571],{"class":358},[348,683,685,687,689,691,693,696],{"class":350,"line":684},22,[348,686,611],{"class":533},[348,688,544],{"class":358},[348,690,369],{"class":362},[348,692,456],{"class":358},[348,694,695],{"class":362},"MIDDLE_END",[348,697,571],{"class":358},[348,699,701],{"class":350,"line":700},23,[348,702,628],{"class":358},[348,704,706,709],{"class":350,"line":705},24,[348,707,708],{"class":533},"    ]",[348,710,571],{"class":358},[348,712,714,717,719],{"class":350,"line":713},25,[348,715,716],{"class":533},"    skip",[348,718,544],{"class":358},[348,720,721],{"class":358}," {\n",[348,723,725,728,730,732,734,736],{"class":350,"line":724},26,[348,726,727],{"class":533},"      storageKey",[348,729,544],{"class":358},[348,731,378],{"class":358},[348,733,467],{"class":381},[348,735,385],{"class":358},[348,737,571],{"class":358},[348,739,741],{"class":350,"line":740},27,[348,742,743],{"class":358},"    },\n",[348,745,747,750,752],{"class":350,"line":746},28,[348,748,749],{"class":533},"    tourSkip",[348,751,544],{"class":358},[348,753,721],{"class":358},[348,755,757,760,762,764,767,769],{"class":350,"line":756},29,[348,758,759],{"class":533},"      label",[348,761,544],{"class":358},[348,763,378],{"class":358},[348,765,766],{"class":381},"Do not show this again",[348,768,385],{"class":358},[348,770,571],{"class":358},[348,772,774],{"class":350,"line":773},30,[348,775,743],{"class":358},[348,777,779,782,785],{"class":350,"line":778},31,[348,780,781],{"class":358},"  }",[348,783,784],{"class":533},")",[348,786,388],{"class":358},[348,788,790],{"class":350,"line":789},32,[348,791,792],{"class":358},"}\n",[278,794,796,799],{"id":795},"clearing-code",[282,797,798],{},"Clearing the skip state:",[338,800,802],{"className":340,"code":801,"language":343,"meta":344,"style":344},"localStorage.removeItem('my-app-onboarding');\n// or\ninstance.skip.clear();\n",[301,803,804,825,831],{"__ignoreMap":344},[348,805,806,808,810,813,815,817,819,821,823],{"class":350,"line":351},[348,807,303],{"class":362},[348,809,456],{"class":358},[348,811,812],{"class":430},"removeItem",[348,814,462],{"class":362},[348,816,385],{"class":358},[348,818,467],{"class":381},[348,820,385],{"class":358},[348,822,784],{"class":362},[348,824,388],{"class":358},[348,826,827],{"class":350,"line":391},[348,828,830],{"class":829},"sHwdD","// or\n",[348,832,833,836,838,841,843,846,848],{"class":350,"line":398},[348,834,835],{"class":362},"instance",[348,837,456],{"class":358},[348,839,840],{"class":362},"skip",[348,842,456],{"class":358},[348,844,845],{"class":430},"clear",[348,847,433],{"class":362},[348,849,388],{"class":358},[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 .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":344,"searchDepth":351,"depth":391,"links":855},[856,857],{"id":288,"depth":391,"text":289},{"id":301,"depth":391,"text":333},"Let users dismiss the onboarding permanently with a persisted skip flag.","md",null,{},{"title":230,"description":858},"jFSMi9Umq5N-AnjrKx5lCdEAjXVKWEaXCznLUZXZFro",[865,867],{"title":109,"path":227,"stem":228,"description":866,"children":-1},"Enable or disable keyboard navigation — ArrowRight, ArrowLeft, Escape.",{"title":44,"path":234,"stem":235,"description":868,"children":-1},"Tooltip enter/exit effects — fade, scale, slide, or none.",1784550682591]