[{"data":1,"prerenderedAt":858},["ShallowReactive",2],{"navigation":3,"/accessibility/overview":246,"/accessibility/overview-surround":855},[4,22,55,88,105,138,159,180,217,238],{"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],{"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},"Shape","/configuration/shape","02.configuration/3.shape",{"title":40,"path":41,"stem":42},"Positioning","/configuration/positioning","02.configuration/4.positioning",{"title":44,"path":45,"stem":46},"Placement","/configuration/placement","02.configuration/5.placement",{"title":48,"path":49,"stem":50},"Video","/configuration/video","02.configuration/6.video",{"title":52,"path":53,"stem":54},"Styles","/configuration/styles","02.configuration/7.styles",{"title":56,"path":57,"stem":58,"children":59,"page":6},"Components","/components","03.components",[60,64,68,72,76,80,84],{"title":61,"path":62,"stem":63},"Container","/components/container","03.components/1.container",{"title":65,"path":66,"stem":67},"Close Button","/components/close-button","03.components/2.close-button",{"title":69,"path":70,"stem":71},"CTA Button","/components/cta-button","03.components/3.cta-button",{"title":73,"path":74,"stem":75},"Video Controls","/components/video-controls","03.components/4.video-controls",{"title":77,"path":78,"stem":79},"Video Loader","/components/video-loader","03.components/5.video-loader",{"title":81,"path":82,"stem":83},"Video Progress","/components/video-progress","03.components/6.video-progress",{"title":85,"path":86,"stem":87},"Video Volume","/components/video-volume","03.components/7.video-volume",{"title":89,"path":90,"stem":91,"children":92,"page":6},"Features","/features","04.features",[93,97,101],{"title":94,"path":95,"stem":96},"Preview","/features/preview","04.features/1.preview",{"title":98,"path":99,"stem":100},"Visibility","/features/visibility","04.features/2.visibility",{"title":102,"path":103,"stem":104},"Responsive","/features/responsive","04.features/3.responsive",{"title":106,"path":107,"stem":108,"children":109,"page":6},"API Reference","/api-reference","05.api-reference",[110,114,118,122,126,130,134],{"title":111,"path":112,"stem":113},"useScena","/api-reference/use-scena","05.api-reference/1.use-scena",{"title":115,"path":116,"stem":117},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":119,"path":120,"stem":121},"Scena Instance","/api-reference/scena-instance","05.api-reference/3.scena-instance",{"title":123,"path":124,"stem":125},"Video Controller","/api-reference/video-controller","05.api-reference/4.video-controller",{"title":127,"path":128,"stem":129},"Video State","/api-reference/video-state","05.api-reference/5.video-state",{"title":131,"path":132,"stem":133},"Visibility API","/api-reference/visibility-api","05.api-reference/6.visibility-api",{"title":135,"path":136,"stem":137},"Preview API","/api-reference/preview-api","05.api-reference/7.preview-api",{"title":139,"path":140,"stem":141,"children":142,"page":6},"Events","/events","06.events",[143,147,151,155],{"title":144,"path":145,"stem":146},"Widget Events","/events/widget-events","06.events/1.widget-events",{"title":148,"path":149,"stem":150},"Video Events","/events/video-events","06.events/2.video-events",{"title":152,"path":153,"stem":154},"Feature Events","/events/feature-events","06.events/3.feature-events",{"title":156,"path":157,"stem":158},"Click Events","/events/click-events","06.events/4.click-events",{"title":160,"path":161,"stem":162,"children":163,"page":6},"Custom Element","/custom-element","07.custom-element",[164,168,172,176],{"title":165,"path":166,"stem":167},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":169,"path":170,"stem":171},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":173,"path":174,"stem":175},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":177,"path":178,"stem":179},"Integration","/custom-element/integration","07.custom-element/4.integration",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Examples","/examples","08.examples",[185,189,193,197,201,205,209,213],{"title":186,"path":187,"stem":188},"Basic Setup","/examples/basic-setup","08.examples/1.basic-setup",{"title":190,"path":191,"stem":192},"Custom Styling","/examples/custom-styling","08.examples/2.custom-styling",{"title":194,"path":195,"stem":196},"Responsive Widget","/examples/responsive-widget","08.examples/3.responsive-widget",{"title":198,"path":199,"stem":200},"Custom Controls","/examples/custom-controls","08.examples/4.custom-controls",{"title":202,"path":203,"stem":204},"Viewport Mount","/examples/viewport-mount","08.examples/5.viewport-mount",{"title":206,"path":207,"stem":208},"Timed Overlay","/examples/timed-overlay","08.examples/6.timed-overlay",{"title":210,"path":211,"stem":212},"Loop Segment","/examples/loop-segment","08.examples/7.loop-segment",{"title":214,"path":215,"stem":216},"Heatmap Data","/examples/heatmap-data","08.examples/8.heatmap-data",{"title":218,"path":219,"stem":220,"children":221,"page":6},"Distribution","/distribution","09.distribution",[222,226,230,234],{"title":223,"path":224,"stem":225},"Formats","/distribution/formats","09.distribution/1.formats",{"title":227,"path":228,"stem":229},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":231,"path":232,"stem":233},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":235,"path":236,"stem":237},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"title":239,"path":240,"stem":241,"children":242,"page":6},"Accessibility","/accessibility","10.accessibility",[243],{"title":28,"path":244,"stem":245},"/accessibility/overview","10.accessibility/1.overview",{"id":247,"title":28,"body":248,"description":848,"extension":849,"links":850,"meta":851,"navigation":852,"path":244,"seo":853,"stem":245,"__hash__":854},"docs/10.accessibility/1.overview.md",{"type":249,"value":250,"toc":843},"minimark",[251,255,260,361,372,471,478,482,490,493,497,528,535,701,707,821,839],[252,253,254],"p",{},"Scena is accessible out of the box: every interactive element is keyboard-operable, exposes ARIA roles and attributes, and keeps a visible focus indicator. No extra configuration is required.",[256,257,259],"h2",{"id":258},"keyboard-navigation","Keyboard navigation",[261,262,263,279],"table",{},[264,265,266],"thead",{},[267,268,269,273,276],"tr",{},[270,271,272],"th",{},"Element",[270,274,275],{},"Keys",[270,277,278],{},"Action",[280,281,282,301,317,332,347],"tbody",{},[267,283,284,288,298],{},[285,286,287],"td",{},"Video container (preview)",[285,289,290,294,295],{},[291,292,293],"code",{},"Enter"," / ",[291,296,297],{},"Space",[285,299,300],{},"Expand the widget",[267,302,303,306,314],{},[285,304,305],{},"Progress bar",[285,307,308,294,311],{},[291,309,310],{},"ArrowLeft",[291,312,313],{},"ArrowDown",[285,315,316],{},"Seek backward",[267,318,319,321,329],{},[285,320,305],{},[285,322,323,294,326],{},[291,324,325],{},"ArrowRight",[291,327,328],{},"ArrowUp",[285,330,331],{},"Seek forward",[267,333,334,336,344],{},[285,335,305],{},[285,337,338,294,341],{},[291,339,340],{},"Home",[291,342,343],{},"End",[285,345,346],{},"Jump to start / end",[267,348,349,352,358],{},[285,350,351],{},"Control buttons",[285,353,354,294,356],{},[291,355,293],{},[291,357,297],{},[285,359,360],{},"Activate (play, pause, mute, close, CTA)",[252,362,363,364,367,368,371],{},"The seek step is a fraction of the video duration, ",[291,365,366],{},"0.05"," (5%) by default. Configure it via the ",[291,369,370],{},"step"," prop of the progress component:",[373,374,379],"pre",{"className":375,"code":376,"language":377,"meta":378,"style":378},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const scena = useScena({\n  config: {\n    videoProgress: {\n      step: 0.1 // seek 10% per keypress\n    }\n  }\n});\n","ts","",[291,380,381,408,421,431,447,453,459],{"__ignoreMap":378},[382,383,386,390,394,398,402,405],"span",{"class":384,"line":385},"line",1,[382,387,389],{"class":388},"spNyl","const",[382,391,393],{"class":392},"sTEyZ"," scena ",[382,395,397],{"class":396},"sMK4o","=",[382,399,401],{"class":400},"s2Zo4"," useScena",[382,403,404],{"class":392},"(",[382,406,407],{"class":396},"{\n",[382,409,411,415,418],{"class":384,"line":410},2,[382,412,414],{"class":413},"swJcz","  config",[382,416,417],{"class":396},":",[382,419,420],{"class":396}," {\n",[382,422,424,427,429],{"class":384,"line":423},3,[382,425,426],{"class":413},"    videoProgress",[382,428,417],{"class":396},[382,430,420],{"class":396},[382,432,434,437,439,443],{"class":384,"line":433},4,[382,435,436],{"class":413},"      step",[382,438,417],{"class":396},[382,440,442],{"class":441},"sbssI"," 0.1",[382,444,446],{"class":445},"sHwdD"," // seek 10% per keypress\n",[382,448,450],{"class":384,"line":449},5,[382,451,452],{"class":396},"    }\n",[382,454,456],{"class":384,"line":455},6,[382,457,458],{"class":396},"  }\n",[382,460,462,465,468],{"class":384,"line":461},7,[382,463,464],{"class":396},"}",[382,466,467],{"class":392},")",[382,469,470],{"class":396},";\n",[252,472,473,474,477],{},"Video controls and volume buttons appear on ",[291,475,476],{},":focus-within"," as well as on hover, so keyboard users always see which control is focused.",[256,479,481],{"id":480},"focus-management","Focus management",[252,483,484,485,489],{},"In ",[486,487,488],"a",{"href":95},"preview mode"," the collapsed widget acts as a single button: the container is the only tab stop and its inner controls are skipped, so keyboard users don't tab through invisible elements.",[252,491,492],{},"When the widget expands, focus moves to the first available control — progress bar, then play/pause, then volume — depending on which components are enabled. When it collapses while focus is inside, focus returns to the container instead of being lost to the page.",[256,494,496],{"id":495},"screen-readers","Screen readers",[252,498,499,500,503,504,507,508,511,512,515,516,519,520,523,524,527],{},"The container exposes ",[291,501,502],{},"role=\"button\"",", and the progress bar exposes ",[291,505,506],{},"role=\"slider\""," with ",[291,509,510],{},"aria-valuemin",", ",[291,513,514],{},"aria-valuemax",", and ",[291,517,518],{},"aria-valuenow",". The current position is announced as human-readable time via ",[291,521,522],{},"aria-valuetext"," — for example ",[291,525,526],{},"1:25 / 3:40"," — instead of raw percentages.",[252,529,530,531,534],{},"Every interactive component accepts an ",[291,532,533],{},"aria"," prop to override or extend its attributes:",[373,536,538],{"className":375,"code":537,"language":377,"meta":378,"style":378},"const scena = useScena({\n  config: {\n    videoContainer: {\n      aria: {\n        ariaLabel: 'Watch product demo'\n      }\n    },\n    videoControls: {\n      aria: {\n        play: { ariaLabel: 'Play demo video' },\n        pause: { ariaLabel: 'Pause demo video' }\n      }\n    }\n  }\n});\n",[291,539,540,554,562,571,580,597,602,607,617,626,653,677,682,687,692],{"__ignoreMap":378},[382,541,542,544,546,548,550,552],{"class":384,"line":385},[382,543,389],{"class":388},[382,545,393],{"class":392},[382,547,397],{"class":396},[382,549,401],{"class":400},[382,551,404],{"class":392},[382,553,407],{"class":396},[382,555,556,558,560],{"class":384,"line":410},[382,557,414],{"class":413},[382,559,417],{"class":396},[382,561,420],{"class":396},[382,563,564,567,569],{"class":384,"line":423},[382,565,566],{"class":413},"    videoContainer",[382,568,417],{"class":396},[382,570,420],{"class":396},[382,572,573,576,578],{"class":384,"line":433},[382,574,575],{"class":413},"      aria",[382,577,417],{"class":396},[382,579,420],{"class":396},[382,581,582,585,587,590,594],{"class":384,"line":449},[382,583,584],{"class":413},"        ariaLabel",[382,586,417],{"class":396},[382,588,589],{"class":396}," '",[382,591,593],{"class":592},"sfazB","Watch product demo",[382,595,596],{"class":396},"'\n",[382,598,599],{"class":384,"line":455},[382,600,601],{"class":396},"      }\n",[382,603,604],{"class":384,"line":461},[382,605,606],{"class":396},"    },\n",[382,608,610,613,615],{"class":384,"line":609},8,[382,611,612],{"class":413},"    videoControls",[382,614,417],{"class":396},[382,616,420],{"class":396},[382,618,620,622,624],{"class":384,"line":619},9,[382,621,575],{"class":413},[382,623,417],{"class":396},[382,625,420],{"class":396},[382,627,629,632,634,637,640,642,644,647,650],{"class":384,"line":628},10,[382,630,631],{"class":413},"        play",[382,633,417],{"class":396},[382,635,636],{"class":396}," {",[382,638,639],{"class":413}," ariaLabel",[382,641,417],{"class":396},[382,643,589],{"class":396},[382,645,646],{"class":592},"Play demo video",[382,648,649],{"class":396},"'",[382,651,652],{"class":396}," },\n",[382,654,656,659,661,663,665,667,669,672,674],{"class":384,"line":655},11,[382,657,658],{"class":413},"        pause",[382,660,417],{"class":396},[382,662,636],{"class":396},[382,664,639],{"class":413},[382,666,417],{"class":396},[382,668,589],{"class":396},[382,670,671],{"class":592},"Pause demo video",[382,673,649],{"class":396},[382,675,676],{"class":396}," }\n",[382,678,680],{"class":384,"line":679},12,[382,681,601],{"class":396},[382,683,685],{"class":384,"line":684},13,[382,686,452],{"class":396},[382,688,690],{"class":384,"line":689},14,[382,691,458],{"class":396},[382,693,695,697,699],{"class":384,"line":694},15,[382,696,464],{"class":396},[382,698,467],{"class":392},[382,700,470],{"class":396},[252,702,703,704,417],{},"The available attributes are defined by ",[291,705,706],{},"ComponentAriaProps",[373,708,710],{"className":375,"code":709,"language":377,"meta":378,"style":378},"interface ComponentAriaProps {\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  ariaDisabled?: boolean;\n  ariaExpanded?: boolean;\n  ariaControls?: string;\n  ariaPressed?: ComponentAriaPressed;\n  ariaHaspopup?: ComponentAriaHaspopup;\n}\n",[291,711,712,723,736,747,758,770,781,792,804,816],{"__ignoreMap":378},[382,713,714,717,721],{"class":384,"line":385},[382,715,716],{"class":388},"interface",[382,718,720],{"class":719},"sBMFI"," ComponentAriaProps",[382,722,420],{"class":396},[382,724,725,728,731,734],{"class":384,"line":410},[382,726,727],{"class":413},"  ariaLabel",[382,729,730],{"class":396},"?:",[382,732,733],{"class":719}," string",[382,735,470],{"class":396},[382,737,738,741,743,745],{"class":384,"line":423},[382,739,740],{"class":413},"  ariaLabelledby",[382,742,730],{"class":396},[382,744,733],{"class":719},[382,746,470],{"class":396},[382,748,749,752,754,756],{"class":384,"line":433},[382,750,751],{"class":413},"  ariaDescribedby",[382,753,730],{"class":396},[382,755,733],{"class":719},[382,757,470],{"class":396},[382,759,760,763,765,768],{"class":384,"line":449},[382,761,762],{"class":413},"  ariaDisabled",[382,764,730],{"class":396},[382,766,767],{"class":719}," boolean",[382,769,470],{"class":396},[382,771,772,775,777,779],{"class":384,"line":455},[382,773,774],{"class":413},"  ariaExpanded",[382,776,730],{"class":396},[382,778,767],{"class":719},[382,780,470],{"class":396},[382,782,783,786,788,790],{"class":384,"line":461},[382,784,785],{"class":413},"  ariaControls",[382,787,730],{"class":396},[382,789,733],{"class":719},[382,791,470],{"class":396},[382,793,794,797,799,802],{"class":384,"line":609},[382,795,796],{"class":413},"  ariaPressed",[382,798,730],{"class":396},[382,800,801],{"class":719}," ComponentAriaPressed",[382,803,470],{"class":396},[382,805,806,809,811,814],{"class":384,"line":619},[382,807,808],{"class":413},"  ariaHaspopup",[382,810,730],{"class":396},[382,812,813],{"class":719}," ComponentAriaHaspopup",[382,815,470],{"class":396},[382,817,818],{"class":384,"line":628},[382,819,820],{"class":396},"}\n",[252,822,823,824,827,828,830,831,834,835,838],{},"See the ",[486,825,826],{"href":62},"component pages"," for the ",[291,829,533],{}," shape each component accepts — ",[291,832,833],{},"videoControls"," and ",[291,836,837],{},"videoVolume"," take per-button overrides.",[840,841,842],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":378,"searchDepth":385,"depth":410,"links":844},[845,846,847],{"id":258,"depth":410,"text":259},{"id":480,"depth":410,"text":481},{"id":495,"depth":410,"text":496},"Keyboard navigation, focus management, and screen reader support built into the widget.","md",null,{},true,{"title":28,"description":848},"77RxxofOOTTAE0Cb5Pe56LZOzwFVqkl6MfVNLal41Ik",[856,850],{"title":235,"path":236,"stem":237,"description":857,"children":-1},"Type declarations, exported interfaces, and TypeScript integration.",1782087690202]