[{"data":1,"prerenderedAt":708},["ShallowReactive",2],{"navigation":3,"/examples/animation":272,"/examples/animation-surround":703},[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":44,"body":274,"description":696,"extension":697,"links":698,"meta":699,"navigation":700,"path":234,"seo":701,"stem":235,"__hash__":702},"docs/08.examples/09.animation.md",{"type":275,"value":276,"toc":692},"minimark",[277,285,290,494,621,625,688],[278,279,281],"div",{"id":280},"animation-description",[282,283,284],"p",{},"Borda supports four animation effects for tooltip enter/exit transitions. Each effect can be applied independently to enter and exit.",[286,287,289],"h2",{"id":288},"fade","Fade",[278,291,293,300,482,486],{"id":292},"fade-demo",[294,295,296],"borda-container",{},[297,298],"borda-component",{":config":299},"{\"steps\":[{\"target\":\"#page-header\",\"title\":\"Page header\",\"description\":\"Every page starts with a header — the spotlight draws attention to it.\",\"placement\":\"bottom-start\"},{\"target\":\"#animation-description\",\"title\":\"Description\",\"description\":\"Four animation effects — fade, scale, slide, and none. Each applied independently.\",\"placement\":\"bottom-start\"},{\"target\":\"#fade\",\"title\":\"Fade section\",\"description\":\"The fade effect transitions opacity from 0 to 1. enterDuration 200ms, exitDuration 150ms.\",\"placement\":\"middle-end\"},{\"target\":\"#fade-code\",\"title\":\"Code\",\"description\":\"Set enter and exit to AnimationEffect.FADE with independent durations.\",\"placement\":\"top-end\"}],\"scroll\":{\"block\":\"center\",\"duration\":400},\"animation\":{\"isEnabled\":true,\"tooltip\":{\"enter\":\"fade\",\"exit\":\"fade\",\"enterDuration\":200,\"exitDuration\":150}}}",[278,301,303],{"id":302},"fade-code",[304,305,310],"pre",{"className":306,"code":307,"language":308,"meta":309,"style":309},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await borda.mount({\n  steps: [...],\n  animation: {\n    isEnabled: true,\n    tooltip: {\n      enter: AnimationEffect.FADE,\n      exit: AnimationEffect.FADE,\n      enterDuration: 200,\n      exitDuration: 150,\n    },\n  },\n});\n","ts","",[311,312,313,340,362,373,387,397,415,431,445,458,464,470],"code",{"__ignoreMap":309},[314,315,318,322,326,330,334,337],"span",{"class":316,"line":317},"line",1,[314,319,321],{"class":320},"s7zQu","await",[314,323,325],{"class":324},"sTEyZ"," borda",[314,327,329],{"class":328},"sMK4o",".",[314,331,333],{"class":332},"s2Zo4","mount",[314,335,336],{"class":324},"(",[314,338,339],{"class":328},"{\n",[314,341,343,347,350,353,356,359],{"class":316,"line":342},2,[314,344,346],{"class":345},"swJcz","  steps",[314,348,349],{"class":328},":",[314,351,352],{"class":324}," [",[314,354,355],{"class":328},"...",[314,357,358],{"class":324},"]",[314,360,361],{"class":328},",\n",[314,363,365,368,370],{"class":316,"line":364},3,[314,366,367],{"class":345},"  animation",[314,369,349],{"class":328},[314,371,372],{"class":328}," {\n",[314,374,376,379,381,385],{"class":316,"line":375},4,[314,377,378],{"class":345},"    isEnabled",[314,380,349],{"class":328},[314,382,384],{"class":383},"sfNiH"," true",[314,386,361],{"class":328},[314,388,390,393,395],{"class":316,"line":389},5,[314,391,392],{"class":345},"    tooltip",[314,394,349],{"class":328},[314,396,372],{"class":328},[314,398,400,403,405,408,410,413],{"class":316,"line":399},6,[314,401,402],{"class":345},"      enter",[314,404,349],{"class":328},[314,406,407],{"class":324}," AnimationEffect",[314,409,329],{"class":328},[314,411,412],{"class":324},"FADE",[314,414,361],{"class":328},[314,416,418,421,423,425,427,429],{"class":316,"line":417},7,[314,419,420],{"class":345},"      exit",[314,422,349],{"class":328},[314,424,407],{"class":324},[314,426,329],{"class":328},[314,428,412],{"class":324},[314,430,361],{"class":328},[314,432,434,437,439,443],{"class":316,"line":433},8,[314,435,436],{"class":345},"      enterDuration",[314,438,349],{"class":328},[314,440,442],{"class":441},"sbssI"," 200",[314,444,361],{"class":328},[314,446,448,451,453,456],{"class":316,"line":447},9,[314,449,450],{"class":345},"      exitDuration",[314,452,349],{"class":328},[314,454,455],{"class":441}," 150",[314,457,361],{"class":328},[314,459,461],{"class":316,"line":460},10,[314,462,463],{"class":328},"    },\n",[314,465,467],{"class":316,"line":466},11,[314,468,469],{"class":328},"  },\n",[314,471,473,476,479],{"class":316,"line":472},12,[314,474,475],{"class":328},"}",[314,477,478],{"class":324},")",[314,480,481],{"class":328},";\n",[286,483,485],{"id":484},"scale","Scale",[278,487,489],{"id":488},"scale-demo",[294,490,491],{},[297,492],{":config":493},"{\"steps\":[{\"target\":\"#scale\",\"title\":\"Scale section\",\"description\":\"The tooltip scales from 0 to full size, anchored at its center.\",\"placement\":\"bottom-start\"},{\"target\":\"#scale-code\",\"title\":\"Code\",\"description\":\"Set enter and exit to AnimationEffect.SCALE for a zoom effect.\",\"placement\":\"top-end\"}],\"scroll\":{\"block\":\"center\",\"duration\":400},\"animation\":{\"isEnabled\":true,\"tooltip\":{\"enter\":\"scale\",\"exit\":\"scale\",\"enterDuration\":200,\"exitDuration\":150}}}",[278,495,497],{"id":496},"scale-code",[304,498,500],{"className":306,"code":499,"language":308,"meta":309,"style":309},"await borda.mount({\n  steps: [...],\n  animation: {\n    isEnabled: true,\n    tooltip: {\n      enter: AnimationEffect.SCALE,\n      exit: AnimationEffect.SCALE,\n      enterDuration: 200,\n      exitDuration: 150,\n    },\n  },\n});\n",[311,501,502,516,530,538,548,556,571,585,595,605,609,613],{"__ignoreMap":309},[314,503,504,506,508,510,512,514],{"class":316,"line":317},[314,505,321],{"class":320},[314,507,325],{"class":324},[314,509,329],{"class":328},[314,511,333],{"class":332},[314,513,336],{"class":324},[314,515,339],{"class":328},[314,517,518,520,522,524,526,528],{"class":316,"line":342},[314,519,346],{"class":345},[314,521,349],{"class":328},[314,523,352],{"class":324},[314,525,355],{"class":328},[314,527,358],{"class":324},[314,529,361],{"class":328},[314,531,532,534,536],{"class":316,"line":364},[314,533,367],{"class":345},[314,535,349],{"class":328},[314,537,372],{"class":328},[314,539,540,542,544,546],{"class":316,"line":375},[314,541,378],{"class":345},[314,543,349],{"class":328},[314,545,384],{"class":383},[314,547,361],{"class":328},[314,549,550,552,554],{"class":316,"line":389},[314,551,392],{"class":345},[314,553,349],{"class":328},[314,555,372],{"class":328},[314,557,558,560,562,564,566,569],{"class":316,"line":399},[314,559,402],{"class":345},[314,561,349],{"class":328},[314,563,407],{"class":324},[314,565,329],{"class":328},[314,567,568],{"class":324},"SCALE",[314,570,361],{"class":328},[314,572,573,575,577,579,581,583],{"class":316,"line":417},[314,574,420],{"class":345},[314,576,349],{"class":328},[314,578,407],{"class":324},[314,580,329],{"class":328},[314,582,568],{"class":324},[314,584,361],{"class":328},[314,586,587,589,591,593],{"class":316,"line":433},[314,588,436],{"class":345},[314,590,349],{"class":328},[314,592,442],{"class":441},[314,594,361],{"class":328},[314,596,597,599,601,603],{"class":316,"line":447},[314,598,450],{"class":345},[314,600,349],{"class":328},[314,602,455],{"class":441},[314,604,361],{"class":328},[314,606,607],{"class":316,"line":460},[314,608,463],{"class":328},[314,610,611],{"class":316,"line":466},[314,612,469],{"class":328},[314,614,615,617,619],{"class":316,"line":472},[314,616,475],{"class":328},[314,618,478],{"class":324},[314,620,481],{"class":328},[286,622,624],{"id":623},"no-animation","No animation",[278,626,628,633],{"id":627},"no-animation-demo",[294,629,630],{},[297,631],{":config":632},"{\"steps\":[{\"target\":\"#no-animation\",\"title\":\"No animation\",\"description\":\"The tooltip snaps to each position with zero transition time.\",\"placement\":\"bottom-start\"},{\"target\":\"#no-animation-code\",\"title\":\"Code\",\"description\":{\"Set animation\":\"false globally to disable all animations at once.\",\"placement\":\"top-end\"}}],\"scroll\":{\"block\":\"center\",\"duration\":400},\"animation\":false}",[278,634,636],{"id":635},"no-animation-code",[304,637,639],{"className":306,"code":638,"language":308,"meta":309,"style":309},"await borda.mount({\n  steps: [...],\n  animation: false,\n});\n",[311,640,641,655,669,680],{"__ignoreMap":309},[314,642,643,645,647,649,651,653],{"class":316,"line":317},[314,644,321],{"class":320},[314,646,325],{"class":324},[314,648,329],{"class":328},[314,650,333],{"class":332},[314,652,336],{"class":324},[314,654,339],{"class":328},[314,656,657,659,661,663,665,667],{"class":316,"line":342},[314,658,346],{"class":345},[314,660,349],{"class":328},[314,662,352],{"class":324},[314,664,355],{"class":328},[314,666,358],{"class":324},[314,668,361],{"class":328},[314,670,671,673,675,678],{"class":316,"line":364},[314,672,367],{"class":345},[314,674,349],{"class":328},[314,676,677],{"class":383}," false",[314,679,361],{"class":328},[314,681,682,684,686],{"class":316,"line":375},[314,683,475],{"class":328},[314,685,478],{"class":324},[314,687,481],{"class":328},[689,690,691],"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 .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}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);}",{"title":309,"searchDepth":317,"depth":342,"links":693},[694,695],{"id":288,"depth":342,"text":289},{"id":623,"depth":342,"text":624},"Tooltip enter/exit effects — fade, scale, slide, or none.","md",null,{},true,{"title":44,"description":696},"HSGL2NLHclb_Mp8--SEsOoNMtuKzPj7dLFmIqJ_cXcA",[704,706],{"title":230,"path":231,"stem":232,"description":705,"children":-1},"Let users dismiss the onboarding permanently with a persisted skip flag.",{"title":237,"path":238,"stem":239,"description":707,"children":-1},"How the tooltip moves between steps — fade or glide.",1784550682615]