[{"data":1,"prerenderedAt":844},["ShallowReactive",2],{"navigation":3,"/features/visibility":272,"/features/visibility-surround":839},[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":101,"body":274,"description":833,"extension":834,"links":835,"meta":836,"navigation":603,"path":102,"seo":837,"stem":103,"__hash__":838},"docs/04.features/1.visibility.md",{"type":275,"value":276,"toc":828},"minimark",[277,285,290,355,550,564,568,650,653,656,824],[278,279,281],"div",{"id":280},"visibility-description",[282,283,284],"p",{},"Visibility controls whether the widget is shown or hidden. It supports an initial hidden state and CSS-animated transitions. The widget can be toggled at runtime through the visibility API.",[286,287,289],"h2",{"id":288},"config","Config",[291,292,293,312],"table",{},[294,295,296],"thead",{},[297,298,299,303,306,309],"tr",{},[300,301,302],"th",{},"Property",[300,304,305],{},"Type",[300,307,308],{},"Default",[300,310,311],{},"Description",[313,314,315,337],"tbody",{},[297,316,317,324,329,334],{},[318,319,320],"td",{},[321,322,323],"code",{},"isHidden",[318,325,326],{},[321,327,328],{},"boolean",[318,330,331],{},[321,332,333],{},"false",[318,335,336],{},"Start the widget in a hidden state",[297,338,339,344,348,352],{},[318,340,341],{},[321,342,343],{},"isAnimated",[318,345,346],{},[321,347,328],{},[318,349,350],{},[321,351,333],{},[318,353,354],{},"Enable CSS animations for show/hide transitions",[356,357,362],"pre",{"className":358,"code":359,"language":360,"meta":361,"style":361},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await borda.mount({\n  steps: [\n    {\n      target: '#element',\n      title: 'Title',\n      description: 'Description',\n      placement: 'bottom-center',\n    },\n  ],\n  visibility: {\n    isHidden: true,\n    isAnimated: true,\n  },\n});\n","ts","",[321,363,364,391,404,410,431,448,464,481,487,495,506,520,532,538],{"__ignoreMap":361},[365,366,369,373,377,381,385,388],"span",{"class":367,"line":368},"line",1,[365,370,372],{"class":371},"s7zQu","await",[365,374,376],{"class":375},"sTEyZ"," borda",[365,378,380],{"class":379},"sMK4o",".",[365,382,384],{"class":383},"s2Zo4","mount",[365,386,387],{"class":375},"(",[365,389,390],{"class":379},"{\n",[365,392,394,398,401],{"class":367,"line":393},2,[365,395,397],{"class":396},"swJcz","  steps",[365,399,400],{"class":379},":",[365,402,403],{"class":375}," [\n",[365,405,407],{"class":367,"line":406},3,[365,408,409],{"class":379},"    {\n",[365,411,413,416,418,421,425,428],{"class":367,"line":412},4,[365,414,415],{"class":396},"      target",[365,417,400],{"class":379},[365,419,420],{"class":379}," '",[365,422,424],{"class":423},"sfazB","#element",[365,426,427],{"class":379},"'",[365,429,430],{"class":379},",\n",[365,432,434,437,439,441,444,446],{"class":367,"line":433},5,[365,435,436],{"class":396},"      title",[365,438,400],{"class":379},[365,440,420],{"class":379},[365,442,443],{"class":423},"Title",[365,445,427],{"class":379},[365,447,430],{"class":379},[365,449,451,454,456,458,460,462],{"class":367,"line":450},6,[365,452,453],{"class":396},"      description",[365,455,400],{"class":379},[365,457,420],{"class":379},[365,459,311],{"class":423},[365,461,427],{"class":379},[365,463,430],{"class":379},[365,465,467,470,472,474,477,479],{"class":367,"line":466},7,[365,468,469],{"class":396},"      placement",[365,471,400],{"class":379},[365,473,420],{"class":379},[365,475,476],{"class":423},"bottom-center",[365,478,427],{"class":379},[365,480,430],{"class":379},[365,482,484],{"class":367,"line":483},8,[365,485,486],{"class":379},"    },\n",[365,488,490,493],{"class":367,"line":489},9,[365,491,492],{"class":375},"  ]",[365,494,430],{"class":379},[365,496,498,501,503],{"class":367,"line":497},10,[365,499,500],{"class":396},"  visibility",[365,502,400],{"class":379},[365,504,505],{"class":379}," {\n",[365,507,509,512,514,518],{"class":367,"line":508},11,[365,510,511],{"class":396},"    isHidden",[365,513,400],{"class":379},[365,515,517],{"class":516},"sfNiH"," true",[365,519,430],{"class":379},[365,521,523,526,528,530],{"class":367,"line":522},12,[365,524,525],{"class":396},"    isAnimated",[365,527,400],{"class":379},[365,529,517],{"class":516},[365,531,430],{"class":379},[365,533,535],{"class":367,"line":534},13,[365,536,537],{"class":379},"  },\n",[365,539,541,544,547],{"class":367,"line":540},14,[365,542,543],{"class":379},"}",[365,545,546],{"class":375},")",[365,548,549],{"class":379},";\n",[282,551,552,553,555,556,559,560,563],{},"When ",[321,554,323],{}," is ",[321,557,558],{},"true",", the widget mounts but remains invisible until ",[321,561,562],{},"show()"," is called.",[286,565,567],{"id":566},"runtime-api","Runtime API",[356,569,571],{"className":358,"code":570,"language":360,"meta":361,"style":361},"// Show the widget\ninstance.visibility.show();\n\n// Hide the widget\ninstance.visibility.hide();\n\n// Check current state\ninstance.visibility.isHidden;\n",[321,572,573,579,599,605,610,627,631,636],{"__ignoreMap":361},[365,574,575],{"class":367,"line":368},[365,576,578],{"class":577},"sHwdD","// Show the widget\n",[365,580,581,584,586,589,591,594,597],{"class":367,"line":393},[365,582,583],{"class":375},"instance",[365,585,380],{"class":379},[365,587,588],{"class":375},"visibility",[365,590,380],{"class":379},[365,592,593],{"class":383},"show",[365,595,596],{"class":375},"()",[365,598,549],{"class":379},[365,600,601],{"class":367,"line":406},[365,602,604],{"emptyLinePlaceholder":603},true,"\n",[365,606,607],{"class":367,"line":412},[365,608,609],{"class":577},"// Hide the widget\n",[365,611,612,614,616,618,620,623,625],{"class":367,"line":433},[365,613,583],{"class":375},[365,615,380],{"class":379},[365,617,588],{"class":375},[365,619,380],{"class":379},[365,621,622],{"class":383},"hide",[365,624,596],{"class":375},[365,626,549],{"class":379},[365,628,629],{"class":367,"line":450},[365,630,604],{"emptyLinePlaceholder":603},[365,632,633],{"class":367,"line":466},[365,634,635],{"class":577},"// Check current state\n",[365,637,638,640,642,644,646,648],{"class":367,"line":483},[365,639,583],{"class":375},[365,641,380],{"class":379},[365,643,588],{"class":375},[365,645,380],{"class":379},[365,647,323],{"class":375},[365,649,549],{"class":379},[286,651,162],{"id":652},"events",[282,654,655],{},"Visibility changes emit events through the event bus:",[356,657,659],{"className":358,"code":658,"language":360,"meta":361,"style":361},"import { BordaEvent } from '@retoo/borda';\n\ninstance.api.events.on(BordaEvent.ON_VISIBILITY_SHOW, () => {\n  console.log('Widget is now visible');\n});\n\ninstance.api.events.on(BordaEvent.ON_VISIBILITY_HIDE, () => {\n  console.log('Widget is now hidden');\n});\n",[321,660,661,687,691,729,752,760,764,795,816],{"__ignoreMap":361},[365,662,663,666,669,672,675,678,680,683,685],{"class":367,"line":368},[365,664,665],{"class":371},"import",[365,667,668],{"class":379}," {",[365,670,671],{"class":375}," BordaEvent",[365,673,674],{"class":379}," }",[365,676,677],{"class":371}," from",[365,679,420],{"class":379},[365,681,682],{"class":423},"@retoo/borda",[365,684,427],{"class":379},[365,686,549],{"class":379},[365,688,689],{"class":367,"line":393},[365,690,604],{"emptyLinePlaceholder":603},[365,692,693,695,697,700,702,704,706,709,712,714,717,720,723,727],{"class":367,"line":406},[365,694,583],{"class":375},[365,696,380],{"class":379},[365,698,699],{"class":375},"api",[365,701,380],{"class":379},[365,703,652],{"class":375},[365,705,380],{"class":379},[365,707,708],{"class":383},"on",[365,710,711],{"class":375},"(BordaEvent",[365,713,380],{"class":379},[365,715,716],{"class":375},"ON_VISIBILITY_SHOW",[365,718,719],{"class":379},",",[365,721,722],{"class":379}," ()",[365,724,726],{"class":725},"spNyl"," =>",[365,728,505],{"class":379},[365,730,731,734,736,739,741,743,746,748,750],{"class":367,"line":412},[365,732,733],{"class":375},"  console",[365,735,380],{"class":379},[365,737,738],{"class":383},"log",[365,740,387],{"class":396},[365,742,427],{"class":379},[365,744,745],{"class":423},"Widget is now visible",[365,747,427],{"class":379},[365,749,546],{"class":396},[365,751,549],{"class":379},[365,753,754,756,758],{"class":367,"line":433},[365,755,543],{"class":379},[365,757,546],{"class":375},[365,759,549],{"class":379},[365,761,762],{"class":367,"line":450},[365,763,604],{"emptyLinePlaceholder":603},[365,765,766,768,770,772,774,776,778,780,782,784,787,789,791,793],{"class":367,"line":466},[365,767,583],{"class":375},[365,769,380],{"class":379},[365,771,699],{"class":375},[365,773,380],{"class":379},[365,775,652],{"class":375},[365,777,380],{"class":379},[365,779,708],{"class":383},[365,781,711],{"class":375},[365,783,380],{"class":379},[365,785,786],{"class":375},"ON_VISIBILITY_HIDE",[365,788,719],{"class":379},[365,790,722],{"class":379},[365,792,726],{"class":725},[365,794,505],{"class":379},[365,796,797,799,801,803,805,807,810,812,814],{"class":367,"line":483},[365,798,733],{"class":375},[365,800,380],{"class":379},[365,802,738],{"class":383},[365,804,387],{"class":396},[365,806,427],{"class":379},[365,808,809],{"class":423},"Widget is now hidden",[365,811,427],{"class":379},[365,813,546],{"class":396},[365,815,549],{"class":379},[365,817,818,820,822],{"class":367,"line":489},[365,819,543],{"class":379},[365,821,546],{"class":375},[365,823,549],{"class":379},[825,826,827],"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 .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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":361,"searchDepth":368,"depth":393,"links":829},[830,831,832],{"id":288,"depth":393,"text":289},{"id":566,"depth":393,"text":567},{"id":652,"depth":393,"text":162},"Show and hide the widget with optional CSS transitions.","md",null,{},{"title":101,"description":833},"rae0absJ99PbxIkAD-kFEBzVbT2LmM5_bDTDGixkono",[840,842],{"title":92,"path":93,"stem":94,"description":841,"children":-1},"Button that dismisses the tour before completion.",{"title":105,"path":106,"stem":107,"description":843,"children":-1},"Apply different component configs at different viewport widths.",1784550670486]