[{"data":1,"prerenderedAt":1322},["ShallowReactive",2],{"navigation":3,"\u002Faccessibility":313,"\u002Faccessibility-surround":1317},[4,24,41,48,293,298,303,308],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":23},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles","i-lucide-rocket",{"title":25,"package":11,"icon":26,"path":27,"stem":28,"children":29,"page":40},"Packages","i-lucide-package","\u002Fpackages","2.packages",[30,35],{"title":31,"path":32,"stem":33,"package":11,"icon":34},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":36,"path":37,"stem":38,"package":11,"icon":39},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":42,"path":43,"stem":44,"children":45,"package":11,"icon":47},"CLI","\u002Fcli","3.cli\u002F1.index",[46],{"title":42,"path":43,"stem":44,"package":11,"icon":47},"i-lucide-terminal",{"title":49,"package":11,"icon":50,"path":51,"stem":52,"children":53},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[54,56,62,67,72,77,82,87,92,97,102,107,112,117,122,127,132,136,141,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,220,225,230,234,238,243,248,253,258,263,268,272,276,280,284,288],{"title":49,"path":51,"stem":55,"package":11,"icon":50},"3.components\u002Findex",{"title":57,"path":58,"stem":59,"package":60,"icon":61},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":63,"path":64,"stem":65,"package":60,"icon":66},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":68,"path":69,"stem":70,"package":60,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":78,"path":79,"stem":80,"package":60,"icon":81},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":83,"path":84,"stem":85,"package":60,"icon":86},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":88,"path":89,"stem":90,"package":60,"icon":91},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":93,"path":94,"stem":95,"package":60,"icon":96},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":98,"path":99,"stem":100,"package":60,"icon":101},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":103,"path":104,"stem":105,"package":60,"icon":106},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":108,"path":109,"stem":110,"package":60,"icon":111},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":113,"path":114,"stem":115,"package":76,"icon":116},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":118,"path":119,"stem":120,"package":76,"icon":121},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":123,"path":124,"stem":125,"package":76,"icon":126},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":128,"path":129,"stem":130,"package":60,"icon":131},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":133,"path":134,"stem":135,"package":76,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":137,"path":138,"stem":139,"package":60,"icon":140},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":142,"path":143,"stem":144,"package":60,"icon":66},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":146,"path":147,"stem":148,"package":60,"icon":149},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":151,"path":152,"stem":153,"package":60,"icon":154},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":156,"path":157,"stem":158,"package":60,"icon":159},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":161,"path":162,"stem":163,"package":60,"icon":164},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":166,"path":167,"stem":168,"package":60,"icon":169},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":171,"path":172,"stem":173,"package":76,"icon":174},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":176,"path":177,"stem":178,"package":60,"icon":179},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":181,"path":182,"stem":183,"package":76,"icon":184},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":186,"path":187,"stem":188,"package":60,"icon":189},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":191,"path":192,"stem":193,"package":60,"icon":194},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":196,"path":197,"stem":198,"package":60,"icon":199},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":201,"path":202,"stem":203,"package":60,"icon":204},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":206,"path":207,"stem":208,"package":60,"icon":209},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":211,"path":212,"stem":213,"package":60,"icon":214},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":216,"path":217,"stem":218,"package":76,"icon":219},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":221,"path":222,"stem":223,"package":60,"icon":224},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":226,"path":227,"stem":228,"package":60,"icon":229},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":231,"path":232,"stem":233,"package":76,"icon":66},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":235,"path":236,"stem":237,"package":60,"icon":154},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":239,"path":240,"stem":241,"package":60,"icon":242},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":244,"path":245,"stem":246,"package":60,"icon":247},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":249,"path":250,"stem":251,"package":60,"icon":252},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":254,"path":255,"stem":256,"package":60,"icon":257},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":259,"path":260,"stem":261,"package":60,"icon":262},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":264,"path":265,"stem":266,"package":60,"icon":267},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":269,"path":270,"stem":271,"package":60,"icon":154},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":273,"path":274,"stem":275,"package":60,"icon":140},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":277,"path":278,"stem":279,"package":60,"icon":199},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":281,"path":282,"stem":283,"package":60,"icon":267},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":285,"path":286,"stem":287,"package":60,"icon":154},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":289,"path":290,"stem":291,"package":60,"icon":292},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":294,"path":295,"stem":296,"package":11,"icon":297},"Theming","\u002Ftheming","4.theming","i-lucide-palette",{"title":299,"path":300,"stem":301,"package":11,"icon":302},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":304,"path":305,"stem":306,"package":11,"icon":307},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":309,"path":310,"stem":311,"package":11,"icon":312},"Roadmap","\u002Froadmap","7.roadmap","i-lucide-map",{"id":314,"title":299,"body":315,"description":1311,"extension":1312,"links":11,"meta":1313,"navigation":1314,"package":11,"path":300,"seo":1315,"stem":301,"__hash__":1316},"docs\u002F5.accessibility.md",{"type":316,"value":317,"toc":1302},"minimark",[318,322,327,337,665,669,680,782,791,795,826,830,840,1097,1103,1108,1269,1283,1287,1298],[319,320,321],"p",{},"Vy UI components are accessible by default. Roles, state (checked, expanded, selected…), and focusability are wired into every component for Lynx's native screen readers — VoiceOver on iOS and TalkBack on Android. The one thing a component can't infer is a name for a control with no visible text, so that's the main thing you add.",[323,324,326],"h2",{"id":325},"what-you-get-for-free","What you get for free",[319,328,329,330,333,334,336],{},"Drop a component in and the native accessibility data is already on the element. State stays in sync automatically — a checkbox announces \"checked\" \u002F \"unchecked\" as it toggles, an accordion \"expanded\" \u002F \"collapsed\", a slider its value. This is true whether you use the headless ",[331,332,31],"code",{}," primitives or the styled ",[331,335,36],{}," components:",[338,339,340,545],"code-group",{},[341,342,347],"pre",{"className":343,"code":344,"filename":31,"language":345,"meta":346,"style":346},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { CheckboxRoot, CheckboxIndicator } from '@vyui\u002Fcore'\nimport { ref } from 'vue'\n\nconst checked = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCheckboxRoot v-model=\"checked\">\n    \u003CCheckboxIndicator>✓\u003C\u002FCheckboxIndicator>\n  \u003C\u002FCheckboxRoot>\n\u003C\u002Ftemplate>\n","vue","",[331,348,349,369,404,424,431,456,466,471,481,505,526,536],{"__ignoreMap":346},[350,351,354,358,362,366],"span",{"class":352,"line":353},"line",1,[350,355,357],{"class":356},"sMK4o","\u003C",[350,359,361],{"class":360},"swJcz","script",[350,363,365],{"class":364},"spNyl"," setup",[350,367,368],{"class":356},">\n",[350,370,372,376,379,383,386,389,392,395,398,401],{"class":352,"line":371},2,[350,373,375],{"class":374},"s7zQu","import",[350,377,378],{"class":356}," {",[350,380,382],{"class":381},"sTEyZ"," CheckboxRoot",[350,384,385],{"class":356},",",[350,387,388],{"class":381}," CheckboxIndicator",[350,390,391],{"class":356}," }",[350,393,394],{"class":374}," from",[350,396,397],{"class":356}," '",[350,399,31],{"class":400},"sfazB",[350,402,403],{"class":356},"'\n",[350,405,407,409,411,414,416,418,420,422],{"class":352,"line":406},3,[350,408,375],{"class":374},[350,410,378],{"class":356},[350,412,413],{"class":381}," ref",[350,415,391],{"class":356},[350,417,394],{"class":374},[350,419,397],{"class":356},[350,421,345],{"class":400},[350,423,403],{"class":356},[350,425,427],{"class":352,"line":426},4,[350,428,430],{"emptyLinePlaceholder":429},true,"\n",[350,432,434,437,440,443,446,449,453],{"class":352,"line":433},5,[350,435,436],{"class":364},"const",[350,438,439],{"class":381}," checked ",[350,441,442],{"class":356},"=",[350,444,413],{"class":445},"s2Zo4",[350,447,448],{"class":381},"(",[350,450,452],{"class":451},"sfNiH","false",[350,454,455],{"class":381},")\n",[350,457,459,462,464],{"class":352,"line":458},6,[350,460,461],{"class":356},"\u003C\u002F",[350,463,361],{"class":360},[350,465,368],{"class":356},[350,467,469],{"class":352,"line":468},7,[350,470,430],{"emptyLinePlaceholder":429},[350,472,474,476,479],{"class":352,"line":473},8,[350,475,357],{"class":356},[350,477,478],{"class":360},"template",[350,480,368],{"class":356},[350,482,484,487,490,493,495,498,501,503],{"class":352,"line":483},9,[350,485,486],{"class":356},"  \u003C",[350,488,489],{"class":360},"CheckboxRoot",[350,491,492],{"class":364}," v-model",[350,494,442],{"class":356},[350,496,497],{"class":356},"\"",[350,499,500],{"class":400},"checked",[350,502,497],{"class":356},[350,504,368],{"class":356},[350,506,508,511,514,517,520,522,524],{"class":352,"line":507},10,[350,509,510],{"class":356},"    \u003C",[350,512,513],{"class":360},"CheckboxIndicator",[350,515,516],{"class":356},">",[350,518,519],{"class":381},"✓",[350,521,461],{"class":356},[350,523,513],{"class":360},[350,525,368],{"class":356},[350,527,529,532,534],{"class":352,"line":528},11,[350,530,531],{"class":356},"  \u003C\u002F",[350,533,489],{"class":360},[350,535,368],{"class":356},[350,537,539,541,543],{"class":352,"line":538},12,[350,540,461],{"class":356},[350,542,478],{"class":360},[350,544,368],{"class":356},[341,546,548],{"className":343,"code":547,"filename":36,"language":345,"meta":346,"style":346},"\u003Cscript setup>\nimport { VyCheckbox } from '@vyui\u002Fkit'\nimport { ref } from 'vue'\n\nconst checked = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyCheckbox v-model=\"checked\" \u002F>\n\u003C\u002Ftemplate>\n",[331,549,550,560,579,597,601,617,625,629,637,657],{"__ignoreMap":346},[350,551,552,554,556,558],{"class":352,"line":353},[350,553,357],{"class":356},[350,555,361],{"class":360},[350,557,365],{"class":364},[350,559,368],{"class":356},[350,561,562,564,566,569,571,573,575,577],{"class":352,"line":371},[350,563,375],{"class":374},[350,565,378],{"class":356},[350,567,568],{"class":381}," VyCheckbox",[350,570,391],{"class":356},[350,572,394],{"class":374},[350,574,397],{"class":356},[350,576,36],{"class":400},[350,578,403],{"class":356},[350,580,581,583,585,587,589,591,593,595],{"class":352,"line":406},[350,582,375],{"class":374},[350,584,378],{"class":356},[350,586,413],{"class":381},[350,588,391],{"class":356},[350,590,394],{"class":374},[350,592,397],{"class":356},[350,594,345],{"class":400},[350,596,403],{"class":356},[350,598,599],{"class":352,"line":426},[350,600,430],{"emptyLinePlaceholder":429},[350,602,603,605,607,609,611,613,615],{"class":352,"line":433},[350,604,436],{"class":364},[350,606,439],{"class":381},[350,608,442],{"class":356},[350,610,413],{"class":445},[350,612,448],{"class":381},[350,614,452],{"class":451},[350,616,455],{"class":381},[350,618,619,621,623],{"class":352,"line":458},[350,620,461],{"class":356},[350,622,361],{"class":360},[350,624,368],{"class":356},[350,626,627],{"class":352,"line":468},[350,628,430],{"emptyLinePlaceholder":429},[350,630,631,633,635],{"class":352,"line":473},[350,632,357],{"class":356},[350,634,478],{"class":360},[350,636,368],{"class":356},[350,638,639,641,644,646,648,650,652,654],{"class":352,"line":483},[350,640,486],{"class":356},[350,642,643],{"class":360},"VyCheckbox",[350,645,492],{"class":364},[350,647,442],{"class":356},[350,649,497],{"class":356},[350,651,500],{"class":400},[350,653,497],{"class":356},[350,655,656],{"class":356}," \u002F>\n",[350,658,659,661,663],{"class":352,"line":507},[350,660,461],{"class":356},[350,662,478],{"class":360},[350,664,368],{"class":356},[323,666,668],{"id":667},"add-a-label-to-controls-without-visible-text","Add a label to controls without visible text",[319,670,671,672,675,676,679],{},"A component can't guess a name for a control that has no text — an icon-only button, an avatar, a close \"×\". Give those an ",[331,673,674],{},"accessibility-label"," (Lynx's equivalent of ",[331,677,678],{},"aria-label",") so screen readers announce something meaningful:",[341,681,683],{"className":343,"code":682,"language":345,"meta":346,"style":346},"\u003Ctemplate>\n  \u003C!-- icon-only controls need a label -->\n  \u003CVyButton accessibility-label=\"Add to favorites\">\n    \u003CIcon name=\"heart\" \u002F>\n  \u003C\u002FVyButton>\n\n  \u003C!-- a button with text is announced from that text — no label needed -->\n  \u003CVyButton>Save changes\u003C\u002FVyButton>\n\u003C\u002Ftemplate>\n",[331,684,685,693,699,720,740,748,752,757,774],{"__ignoreMap":346},[350,686,687,689,691],{"class":352,"line":353},[350,688,357],{"class":356},[350,690,478],{"class":360},[350,692,368],{"class":356},[350,694,695],{"class":352,"line":371},[350,696,698],{"class":697},"sHwdD","  \u003C!-- icon-only controls need a label -->\n",[350,700,701,703,706,709,711,713,716,718],{"class":352,"line":406},[350,702,486],{"class":356},[350,704,705],{"class":360},"VyButton",[350,707,708],{"class":364}," accessibility-label",[350,710,442],{"class":356},[350,712,497],{"class":356},[350,714,715],{"class":400},"Add to favorites",[350,717,497],{"class":356},[350,719,368],{"class":356},[350,721,722,724,726,729,731,733,736,738],{"class":352,"line":426},[350,723,510],{"class":356},[350,725,133],{"class":360},[350,727,728],{"class":364}," name",[350,730,442],{"class":356},[350,732,497],{"class":356},[350,734,735],{"class":400},"heart",[350,737,497],{"class":356},[350,739,656],{"class":356},[350,741,742,744,746],{"class":352,"line":433},[350,743,531],{"class":356},[350,745,705],{"class":360},[350,747,368],{"class":356},[350,749,750],{"class":352,"line":458},[350,751,430],{"emptyLinePlaceholder":429},[350,753,754],{"class":352,"line":468},[350,755,756],{"class":697},"  \u003C!-- a button with text is announced from that text — no label needed -->\n",[350,758,759,761,763,765,768,770,772],{"class":352,"line":473},[350,760,486],{"class":356},[350,762,705],{"class":360},[350,764,516],{"class":356},[350,766,767],{"class":381},"Save changes",[350,769,461],{"class":356},[350,771,705],{"class":360},[350,773,368],{"class":356},[350,775,776,778,780],{"class":352,"line":483},[350,777,461],{"class":356},[350,779,478],{"class":360},[350,781,368],{"class":356},[783,784,785],"note",{},[319,786,787,788,790],{},"Built-in icon controls already set a sensible default — close buttons announce \"Close\", pagination announces \"Next Page\", and so on. Pass ",[331,789,674],{}," only when you want a more specific name.",[323,792,794],{"id":793},"why-lynx-is-different-from-the-web","Why Lynx is different from the web",[319,796,797,798,801,802,805,806,801,809,812,813,821,822,825],{},"On the web, ",[331,799,800],{},"\u003Cbutton>"," and ",[331,803,804],{},"\u003Cinput type=\"checkbox\">"," get their accessibility from the browser, and you only reach for ARIA on custom widgets. Lynx renders to native ",[331,807,808],{},"\u003Cview>",[331,810,811],{},"\u003Ctext>"," — generic boxes with no built-in roles — so accessibility has to be attached explicitly. Vy UI does that for you. Note that Lynx ",[814,815,816,817,820],"strong",{},"ignores web ",[331,818,819],{},"aria-*"," attributes","; native accessibility uses ",[331,823,824],{},"accessibility-*"," props instead, which the components handle.",[323,827,829],{"id":828},"building-your-own-component","Building your own component",[319,831,832,833,835,836,839],{},"If you compose your own primitive on top of ",[331,834,31],{},", use the ",[331,837,838],{},"useA11y"," composable to attach native accessibility the same way the built-ins do. Pass it a descriptor and spread the result onto your root element:",[341,841,843],{"className":343,"code":842,"language":345,"meta":346,"style":346},"\u003Cscript setup>\nimport { useA11y } from '@vyui\u002Fcore'\nimport { ref } from 'vue'\n\nconst checked = ref(false)\n\nconst a11y = useA11y(() => ({\n  role: 'checkbox',\n  state: checked.value ? 'checked' : 'unchecked',\n}))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cview v-bind=\"a11y\" @tap=\"checked = !checked\">\n    \u003Ctext>Wifi\u003C\u002Ftext>\n  \u003C\u002Fview>\n\u003C\u002Ftemplate>\n",[331,844,845,855,874,892,896,912,916,941,960,997,1005,1013,1017,1026,1060,1079,1088],{"__ignoreMap":346},[350,846,847,849,851,853],{"class":352,"line":353},[350,848,357],{"class":356},[350,850,361],{"class":360},[350,852,365],{"class":364},[350,854,368],{"class":356},[350,856,857,859,861,864,866,868,870,872],{"class":352,"line":371},[350,858,375],{"class":374},[350,860,378],{"class":356},[350,862,863],{"class":381}," useA11y",[350,865,391],{"class":356},[350,867,394],{"class":374},[350,869,397],{"class":356},[350,871,31],{"class":400},[350,873,403],{"class":356},[350,875,876,878,880,882,884,886,888,890],{"class":352,"line":406},[350,877,375],{"class":374},[350,879,378],{"class":356},[350,881,413],{"class":381},[350,883,391],{"class":356},[350,885,394],{"class":374},[350,887,397],{"class":356},[350,889,345],{"class":400},[350,891,403],{"class":356},[350,893,894],{"class":352,"line":426},[350,895,430],{"emptyLinePlaceholder":429},[350,897,898,900,902,904,906,908,910],{"class":352,"line":433},[350,899,436],{"class":364},[350,901,439],{"class":381},[350,903,442],{"class":356},[350,905,413],{"class":445},[350,907,448],{"class":381},[350,909,452],{"class":451},[350,911,455],{"class":381},[350,913,914],{"class":352,"line":458},[350,915,430],{"emptyLinePlaceholder":429},[350,917,918,920,923,925,927,929,932,935,938],{"class":352,"line":468},[350,919,436],{"class":364},[350,921,922],{"class":381}," a11y ",[350,924,442],{"class":356},[350,926,863],{"class":445},[350,928,448],{"class":381},[350,930,931],{"class":356},"()",[350,933,934],{"class":364}," =>",[350,936,937],{"class":381}," (",[350,939,940],{"class":356},"{\n",[350,942,943,946,949,951,954,957],{"class":352,"line":473},[350,944,945],{"class":360},"  role",[350,947,948],{"class":356},":",[350,950,397],{"class":356},[350,952,953],{"class":400},"checkbox",[350,955,956],{"class":356},"'",[350,958,959],{"class":356},",\n",[350,961,962,965,967,970,973,976,979,981,983,985,988,990,993,995],{"class":352,"line":483},[350,963,964],{"class":360},"  state",[350,966,948],{"class":356},[350,968,969],{"class":381}," checked",[350,971,972],{"class":356},".",[350,974,975],{"class":381},"value ",[350,977,978],{"class":356},"?",[350,980,397],{"class":356},[350,982,500],{"class":400},[350,984,956],{"class":356},[350,986,987],{"class":356}," :",[350,989,397],{"class":356},[350,991,992],{"class":400},"unchecked",[350,994,956],{"class":356},[350,996,959],{"class":356},[350,998,999,1002],{"class":352,"line":507},[350,1000,1001],{"class":356},"}",[350,1003,1004],{"class":381},"))\n",[350,1006,1007,1009,1011],{"class":352,"line":528},[350,1008,461],{"class":356},[350,1010,361],{"class":360},[350,1012,368],{"class":356},[350,1014,1015],{"class":352,"line":538},[350,1016,430],{"emptyLinePlaceholder":429},[350,1018,1020,1022,1024],{"class":352,"line":1019},13,[350,1021,357],{"class":356},[350,1023,478],{"class":360},[350,1025,368],{"class":356},[350,1027,1029,1031,1034,1037,1039,1041,1044,1046,1049,1051,1053,1056,1058],{"class":352,"line":1028},14,[350,1030,486],{"class":356},[350,1032,1033],{"class":360},"view",[350,1035,1036],{"class":364}," v-bind",[350,1038,442],{"class":356},[350,1040,497],{"class":356},[350,1042,1043],{"class":400},"a11y",[350,1045,497],{"class":356},[350,1047,1048],{"class":364}," @tap",[350,1050,442],{"class":356},[350,1052,497],{"class":356},[350,1054,1055],{"class":400},"checked = !checked",[350,1057,497],{"class":356},[350,1059,368],{"class":356},[350,1061,1063,1065,1068,1070,1073,1075,1077],{"class":352,"line":1062},15,[350,1064,510],{"class":356},[350,1066,1067],{"class":360},"text",[350,1069,516],{"class":356},[350,1071,1072],{"class":381},"Wifi",[350,1074,461],{"class":356},[350,1076,1067],{"class":360},[350,1078,368],{"class":356},[350,1080,1082,1084,1086],{"class":352,"line":1081},16,[350,1083,531],{"class":356},[350,1085,1033],{"class":360},[350,1087,368],{"class":356},[350,1089,1091,1093,1095],{"class":352,"line":1090},17,[350,1092,461],{"class":356},[350,1094,478],{"class":360},[350,1096,368],{"class":356},[319,1098,1099,1100,1102],{},"It's reactive: when ",[331,1101,500],{}," changes, the announced state updates automatically.",[1104,1105,1107],"h3",{"id":1106},"descriptor-reference","Descriptor reference",[1109,1110,1111,1127],"table",{},[1112,1113,1114],"thead",{},[1115,1116,1117,1121,1124],"tr",{},[1118,1119,1120],"th",{},"Field",[1118,1122,1123],{},"What it does",[1118,1125,1126],{},"Example",[1128,1129,1130,1165,1180,1204,1225,1241,1255],"tbody",{},[1115,1131,1132,1138,1141],{},[1133,1134,1135],"td",{},[331,1136,1137],{},"role",[1133,1139,1140],{},"The kind of control",[1133,1142,1143,1146,1147,1146,1150,1146,1153,1146,1156,1146,1159,1146,1162],{},[331,1144,1145],{},"'button'",", ",[331,1148,1149],{},"'checkbox'",[331,1151,1152],{},"'switch'",[331,1154,1155],{},"'tab'",[331,1157,1158],{},"'slider'",[331,1160,1161],{},"'heading'",[331,1163,1164],{},"'dialog'",[1115,1166,1167,1172,1175],{},[1133,1168,1169],{},[331,1170,1171],{},"label",[1133,1173,1174],{},"Spoken name (for controls without text)",[1133,1176,1177],{},[331,1178,1179],{},"'Add to favorites'",[1115,1181,1182,1187,1190],{},[1133,1183,1184],{},[331,1185,1186],{},"state",[1133,1188,1189],{},"Spoken state",[1133,1191,1192,1146,1195,1146,1198,1146,1201],{},[331,1193,1194],{},"'checked'",[331,1196,1197],{},"'expanded'",[331,1199,1200],{},"'on'",[331,1202,1203],{},"'pressed'",[1115,1205,1206,1211,1220],{},[1133,1207,1208],{},[331,1209,1210],{},"selected",[1133,1212,1213,1214,1217,1218],{},"For tabs\u002Foptions — announces \"selected\" when ",[331,1215,1216],{},"true",", nothing when ",[331,1219,452],{},[1133,1221,1222],{},[331,1223,1224],{},"isActive",[1115,1226,1227,1232,1235],{},[1133,1228,1229],{},[331,1230,1231],{},"value",[1133,1233,1234],{},"A range value",[1133,1236,1237,1240],{},[331,1238,1239],{},"{ now: 30, max: 100 }"," → \"30 of 100\"",[1115,1242,1243,1248,1251],{},[1133,1244,1245],{},[331,1246,1247],{},"disabled",[1133,1249,1250],{},"Marks the control unavailable",[1133,1252,1253],{},[331,1254,1216],{},[1115,1256,1257,1262,1265],{},[1133,1258,1259],{},[331,1260,1261],{},"exclusiveFocus",[1133,1263,1264],{},"Traps screen-reader focus inside (modals)",[1133,1266,1267],{},[331,1268,1216],{},[783,1270,1271],{},[319,1272,1273,1274,1276,1277,1279,1280,1282],{},"Lynx allows one role per element, so a ",[331,1275,1247],{}," control announces \"disabled\" rather than its usual role. For tabs and options, pass ",[331,1278,1210],{}," (not a ",[331,1281,1186],{}," string) — selected items announce \"selected\" and unselected ones stay quiet, which is how a screen reader expects a list to behave.",[323,1284,1286],{"id":1285},"on-the-roadmap","On the roadmap",[319,1288,1289,1290,1293,1294,972],{},"Spoken announcements for transient UI like toasts, moving focus into a dialog when it opens, and an ARIA layer for the Lynx ",[814,1291,1292],{},"web"," target are in progress — see the ",[1295,1296,1297],"a",{"href":310},"roadmap",[1299,1300,1301],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":346,"searchDepth":353,"depth":371,"links":1303},[1304,1305,1306,1307,1310],{"id":325,"depth":371,"text":326},{"id":667,"depth":371,"text":668},{"id":793,"depth":371,"text":794},{"id":828,"depth":371,"text":829,"children":1308},[1309],{"id":1106,"depth":406,"text":1107},{"id":1285,"depth":371,"text":1286},"Vy UI components ship with native Lynx accessibility built in — what you get for free and the one thing you add.","md",{},{"icon":302},{"title":299,"description":1311},"wmjfRXVAU5EO76uHTOr5zfQ2dKBO9vx7mPEJq_hf6dw",[1318,1320],{"title":294,"path":295,"stem":296,"description":1319,"icon":-1,"children":-1,"navigation":-1},"Override any Vy UI component slot, variant, or default via Tailwind Variants — full theme control without fighting the library.",{"title":304,"path":305,"stem":306,"description":1321,"icon":-1,"children":-1,"navigation":-1},"What Vy UI ships for internationalization today, and what is still planned for locale-aware text, formatting, and RTL.",1783464066230]