[{"data":1,"prerenderedAt":663},["ShallowReactive",2],{"navigation":3,"/features/responsive":272,"/features/responsive-surround":658},[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":105,"body":274,"description":651,"extension":652,"links":653,"meta":654,"navigation":655,"path":106,"seo":656,"stem":107,"__hash__":657},"docs/04.features/2.responsive.md",{"type":275,"value":276,"toc":646},"minimark",[277,286,291,298,583,586,590,609,613,616,642],[278,279,280,281,285],"p",{},"Responsive breakpoints let you apply different component overrides at different viewport widths. Borda listens to ",[282,283,284],"code",{},"matchMedia"," changes and applies the matching breakpoint's config as a named override layer.",[287,288,290],"h2",{"id":289},"config","Config",[278,292,293,294,297],{},"The ",[282,295,296],{},"responsive"," key maps breakpoint widths (in pixels) to partial config overrides:",[299,300,305],"pre",{"className":301,"code":302,"language":303,"meta":304,"style":304},"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  responsive: {\n    480: {\n      tourTooltip: {\n        padding: 8,\n      },\n      tourButtons: {\n        skip: false,\n      },\n    },\n    768: {\n      tourTooltip: {\n        padding: 16,\n      },\n    },\n  },\n});\n","ts","",[282,306,307,334,347,353,374,391,408,425,431,439,450,461,471,484,490,500,514,519,524,534,543,555,560,565,571],{"__ignoreMap":304},[308,309,312,316,320,324,328,331],"span",{"class":310,"line":311},"line",1,[308,313,315],{"class":314},"s7zQu","await",[308,317,319],{"class":318},"sTEyZ"," borda",[308,321,323],{"class":322},"sMK4o",".",[308,325,327],{"class":326},"s2Zo4","mount",[308,329,330],{"class":318},"(",[308,332,333],{"class":322},"{\n",[308,335,337,341,344],{"class":310,"line":336},2,[308,338,340],{"class":339},"swJcz","  steps",[308,342,343],{"class":322},":",[308,345,346],{"class":318}," [\n",[308,348,350],{"class":310,"line":349},3,[308,351,352],{"class":322},"    {\n",[308,354,356,359,361,364,368,371],{"class":310,"line":355},4,[308,357,358],{"class":339},"      target",[308,360,343],{"class":322},[308,362,363],{"class":322}," '",[308,365,367],{"class":366},"sfazB","#element",[308,369,370],{"class":322},"'",[308,372,373],{"class":322},",\n",[308,375,377,380,382,384,387,389],{"class":310,"line":376},5,[308,378,379],{"class":339},"      title",[308,381,343],{"class":322},[308,383,363],{"class":322},[308,385,386],{"class":366},"Title",[308,388,370],{"class":322},[308,390,373],{"class":322},[308,392,394,397,399,401,404,406],{"class":310,"line":393},6,[308,395,396],{"class":339},"      description",[308,398,343],{"class":322},[308,400,363],{"class":322},[308,402,403],{"class":366},"Description",[308,405,370],{"class":322},[308,407,373],{"class":322},[308,409,411,414,416,418,421,423],{"class":310,"line":410},7,[308,412,413],{"class":339},"      placement",[308,415,343],{"class":322},[308,417,363],{"class":322},[308,419,420],{"class":366},"bottom-center",[308,422,370],{"class":322},[308,424,373],{"class":322},[308,426,428],{"class":310,"line":427},8,[308,429,430],{"class":322},"    },\n",[308,432,434,437],{"class":310,"line":433},9,[308,435,436],{"class":318},"  ]",[308,438,373],{"class":322},[308,440,442,445,447],{"class":310,"line":441},10,[308,443,444],{"class":339},"  responsive",[308,446,343],{"class":322},[308,448,449],{"class":322}," {\n",[308,451,453,457,459],{"class":310,"line":452},11,[308,454,456],{"class":455},"sbssI","    480",[308,458,343],{"class":322},[308,460,449],{"class":322},[308,462,464,467,469],{"class":310,"line":463},12,[308,465,466],{"class":339},"      tourTooltip",[308,468,343],{"class":322},[308,470,449],{"class":322},[308,472,474,477,479,482],{"class":310,"line":473},13,[308,475,476],{"class":339},"        padding",[308,478,343],{"class":322},[308,480,481],{"class":455}," 8",[308,483,373],{"class":322},[308,485,487],{"class":310,"line":486},14,[308,488,489],{"class":322},"      },\n",[308,491,493,496,498],{"class":310,"line":492},15,[308,494,495],{"class":339},"      tourButtons",[308,497,343],{"class":322},[308,499,449],{"class":322},[308,501,503,506,508,512],{"class":310,"line":502},16,[308,504,505],{"class":339},"        skip",[308,507,343],{"class":322},[308,509,511],{"class":510},"sfNiH"," false",[308,513,373],{"class":322},[308,515,517],{"class":310,"line":516},17,[308,518,489],{"class":322},[308,520,522],{"class":310,"line":521},18,[308,523,430],{"class":322},[308,525,527,530,532],{"class":310,"line":526},19,[308,528,529],{"class":455},"    768",[308,531,343],{"class":322},[308,533,449],{"class":322},[308,535,537,539,541],{"class":310,"line":536},20,[308,538,466],{"class":339},[308,540,343],{"class":322},[308,542,449],{"class":322},[308,544,546,548,550,553],{"class":310,"line":545},21,[308,547,476],{"class":339},[308,549,343],{"class":322},[308,551,552],{"class":455}," 16",[308,554,373],{"class":322},[308,556,558],{"class":310,"line":557},22,[308,559,489],{"class":322},[308,561,563],{"class":310,"line":562},23,[308,564,430],{"class":322},[308,566,568],{"class":310,"line":567},24,[308,569,570],{"class":322},"  },\n",[308,572,574,577,580],{"class":310,"line":573},25,[308,575,576],{"class":322},"}",[308,578,579],{"class":318},")",[308,581,582],{"class":322},";\n",[278,584,585],{},"When the viewport width matches a breakpoint, its overrides are merged on top of the base config. Multiple breakpoints can be active simultaneously — they stack in ascending order.",[287,587,589],{"id":588},"how-it-works","How it works",[591,592,593,600,603,606],"ol",{},[594,595,596,597,599],"li",{},"Borda creates ",[282,598,284],{}," listeners for each breakpoint key.",[594,601,602],{},"When a breakpoint matches, its overrides are applied as a named layer in the overrides system.",[594,604,605],{},"When the viewport changes, the previous breakpoint's overrides are removed and the new ones applied.",[594,607,608],{},"The widget re-renders reactively without remounting.",[287,610,612],{"id":611},"runtime-api","Runtime API",[278,614,615],{},"Read the currently active breakpoint:",[299,617,619],{"className":301,"code":618,"language":303,"meta":304,"style":304},"instance.responsive.activeBreakpoint; // e.g. 768, or null if none matched\n",[282,620,621],{"__ignoreMap":304},[308,622,623,626,628,630,632,635,638],{"class":310,"line":311},[308,624,625],{"class":318},"instance",[308,627,323],{"class":322},[308,629,296],{"class":318},[308,631,323],{"class":322},[308,633,634],{"class":318},"activeBreakpoint",[308,636,637],{"class":322},";",[308,639,641],{"class":640},"sHwdD"," // e.g. 768, or null if none matched\n",[643,644,645],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":304,"searchDepth":311,"depth":336,"links":647},[648,649,650],{"id":289,"depth":336,"text":290},{"id":588,"depth":336,"text":589},{"id":611,"depth":336,"text":612},"Apply different component configs at different viewport widths.","md",null,{},true,{"title":105,"description":651},"Cg6qlL_vGXe03-us1IpxTBjkjMzpst-vwCAKEx6arJo",[659,661],{"title":101,"path":102,"stem":103,"description":660,"children":-1},"Show and hide the widget with optional CSS transitions.",{"title":109,"path":110,"stem":111,"description":662,"children":-1},"Navigate the tour with ArrowRight, ArrowLeft, and Escape keys.",1784550677827]