[{"data":1,"prerenderedAt":1071},["ShallowReactive",2],{"navigation":3,"\u002Faccessibility":60,"\u002Faccessibility-surround":1066},[4,23,40,45,50,55],{"title":5,"path":6,"stem":7,"children":8,"icon":22},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,12,17],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles","i-lucide-rocket",{"title":24,"icon":25,"path":26,"stem":27,"children":28,"page":39},"Packages","i-lucide-package","\u002Fpackages","2.packages",[29,34],{"title":30,"path":31,"stem":32,"icon":33},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":35,"path":36,"stem":37,"icon":38},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":41,"path":42,"stem":43,"icon":44},"Theming","\u002Ftheming","3.theming","i-lucide-palette",{"title":46,"path":47,"stem":48,"icon":49},"Accessibility","\u002Faccessibility","4.accessibility","i-lucide-accessibility",{"title":51,"path":52,"stem":53,"icon":54},"i18n","\u002Fi18n","5.i18n","i-lucide-languages",{"title":56,"path":57,"stem":58,"icon":59},"Roadmap","\u002Froadmap","6.roadmap","i-lucide-map",{"id":61,"title":46,"body":62,"description":1059,"extension":1060,"links":1061,"meta":1062,"navigation":1063,"path":47,"seo":1064,"stem":48,"__hash__":1065},"docs\u002F4.accessibility.md",{"type":63,"value":64,"toc":1050},"minimark",[65,69,74,84,412,416,427,530,539,543,574,578,588,845,851,856,1017,1031,1035,1046],[66,67,68],"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.",[70,71,73],"h2",{"id":72},"what-you-get-for-free","What you get for free",[66,75,76,77,80,81,83],{},"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 ",[78,79,30],"code",{}," primitives or the styled ",[78,82,35],{}," components:",[85,86,87,292],"code-group",{},[88,89,94],"pre",{"className":90,"code":91,"filename":30,"language":92,"meta":93,"style":93},"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","",[78,95,96,116,151,171,178,203,213,218,228,252,273,283],{"__ignoreMap":93},[97,98,101,105,109,113],"span",{"class":99,"line":100},"line",1,[97,102,104],{"class":103},"sMK4o","\u003C",[97,106,108],{"class":107},"swJcz","script",[97,110,112],{"class":111},"spNyl"," setup",[97,114,115],{"class":103},">\n",[97,117,119,123,126,130,133,136,139,142,145,148],{"class":99,"line":118},2,[97,120,122],{"class":121},"s7zQu","import",[97,124,125],{"class":103}," {",[97,127,129],{"class":128},"sTEyZ"," CheckboxRoot",[97,131,132],{"class":103},",",[97,134,135],{"class":128}," CheckboxIndicator",[97,137,138],{"class":103}," }",[97,140,141],{"class":121}," from",[97,143,144],{"class":103}," '",[97,146,30],{"class":147},"sfazB",[97,149,150],{"class":103},"'\n",[97,152,154,156,158,161,163,165,167,169],{"class":99,"line":153},3,[97,155,122],{"class":121},[97,157,125],{"class":103},[97,159,160],{"class":128}," ref",[97,162,138],{"class":103},[97,164,141],{"class":121},[97,166,144],{"class":103},[97,168,92],{"class":147},[97,170,150],{"class":103},[97,172,174],{"class":99,"line":173},4,[97,175,177],{"emptyLinePlaceholder":176},true,"\n",[97,179,181,184,187,190,193,196,200],{"class":99,"line":180},5,[97,182,183],{"class":111},"const",[97,185,186],{"class":128}," checked ",[97,188,189],{"class":103},"=",[97,191,160],{"class":192},"s2Zo4",[97,194,195],{"class":128},"(",[97,197,199],{"class":198},"sfNiH","false",[97,201,202],{"class":128},")\n",[97,204,206,209,211],{"class":99,"line":205},6,[97,207,208],{"class":103},"\u003C\u002F",[97,210,108],{"class":107},[97,212,115],{"class":103},[97,214,216],{"class":99,"line":215},7,[97,217,177],{"emptyLinePlaceholder":176},[97,219,221,223,226],{"class":99,"line":220},8,[97,222,104],{"class":103},[97,224,225],{"class":107},"template",[97,227,115],{"class":103},[97,229,231,234,237,240,242,245,248,250],{"class":99,"line":230},9,[97,232,233],{"class":103},"  \u003C",[97,235,236],{"class":107},"CheckboxRoot",[97,238,239],{"class":111}," v-model",[97,241,189],{"class":103},[97,243,244],{"class":103},"\"",[97,246,247],{"class":147},"checked",[97,249,244],{"class":103},[97,251,115],{"class":103},[97,253,255,258,261,264,267,269,271],{"class":99,"line":254},10,[97,256,257],{"class":103},"    \u003C",[97,259,260],{"class":107},"CheckboxIndicator",[97,262,263],{"class":103},">",[97,265,266],{"class":128},"✓",[97,268,208],{"class":103},[97,270,260],{"class":107},[97,272,115],{"class":103},[97,274,276,279,281],{"class":99,"line":275},11,[97,277,278],{"class":103},"  \u003C\u002F",[97,280,236],{"class":107},[97,282,115],{"class":103},[97,284,286,288,290],{"class":99,"line":285},12,[97,287,208],{"class":103},[97,289,225],{"class":107},[97,291,115],{"class":103},[88,293,295],{"className":90,"code":294,"filename":35,"language":92,"meta":93,"style":93},"\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",[78,296,297,307,326,344,348,364,372,376,384,404],{"__ignoreMap":93},[97,298,299,301,303,305],{"class":99,"line":100},[97,300,104],{"class":103},[97,302,108],{"class":107},[97,304,112],{"class":111},[97,306,115],{"class":103},[97,308,309,311,313,316,318,320,322,324],{"class":99,"line":118},[97,310,122],{"class":121},[97,312,125],{"class":103},[97,314,315],{"class":128}," VyCheckbox",[97,317,138],{"class":103},[97,319,141],{"class":121},[97,321,144],{"class":103},[97,323,35],{"class":147},[97,325,150],{"class":103},[97,327,328,330,332,334,336,338,340,342],{"class":99,"line":153},[97,329,122],{"class":121},[97,331,125],{"class":103},[97,333,160],{"class":128},[97,335,138],{"class":103},[97,337,141],{"class":121},[97,339,144],{"class":103},[97,341,92],{"class":147},[97,343,150],{"class":103},[97,345,346],{"class":99,"line":173},[97,347,177],{"emptyLinePlaceholder":176},[97,349,350,352,354,356,358,360,362],{"class":99,"line":180},[97,351,183],{"class":111},[97,353,186],{"class":128},[97,355,189],{"class":103},[97,357,160],{"class":192},[97,359,195],{"class":128},[97,361,199],{"class":198},[97,363,202],{"class":128},[97,365,366,368,370],{"class":99,"line":205},[97,367,208],{"class":103},[97,369,108],{"class":107},[97,371,115],{"class":103},[97,373,374],{"class":99,"line":215},[97,375,177],{"emptyLinePlaceholder":176},[97,377,378,380,382],{"class":99,"line":220},[97,379,104],{"class":103},[97,381,225],{"class":107},[97,383,115],{"class":103},[97,385,386,388,391,393,395,397,399,401],{"class":99,"line":230},[97,387,233],{"class":103},[97,389,390],{"class":107},"VyCheckbox",[97,392,239],{"class":111},[97,394,189],{"class":103},[97,396,244],{"class":103},[97,398,247],{"class":147},[97,400,244],{"class":103},[97,402,403],{"class":103}," \u002F>\n",[97,405,406,408,410],{"class":99,"line":254},[97,407,208],{"class":103},[97,409,225],{"class":107},[97,411,115],{"class":103},[70,413,415],{"id":414},"add-a-label-to-controls-without-visible-text","Add a label to controls without visible text",[66,417,418,419,422,423,426],{},"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 ",[78,420,421],{},"accessibility-label"," (Lynx's equivalent of ",[78,424,425],{},"aria-label",") so screen readers announce something meaningful:",[88,428,430],{"className":90,"code":429,"language":92,"meta":93,"style":93},"\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",[78,431,432,440,446,467,488,496,500,505,522],{"__ignoreMap":93},[97,433,434,436,438],{"class":99,"line":100},[97,435,104],{"class":103},[97,437,225],{"class":107},[97,439,115],{"class":103},[97,441,442],{"class":99,"line":118},[97,443,445],{"class":444},"sHwdD","  \u003C!-- icon-only controls need a label -->\n",[97,447,448,450,453,456,458,460,463,465],{"class":99,"line":153},[97,449,233],{"class":103},[97,451,452],{"class":107},"VyButton",[97,454,455],{"class":111}," accessibility-label",[97,457,189],{"class":103},[97,459,244],{"class":103},[97,461,462],{"class":147},"Add to favorites",[97,464,244],{"class":103},[97,466,115],{"class":103},[97,468,469,471,474,477,479,481,484,486],{"class":99,"line":173},[97,470,257],{"class":103},[97,472,473],{"class":107},"Icon",[97,475,476],{"class":111}," name",[97,478,189],{"class":103},[97,480,244],{"class":103},[97,482,483],{"class":147},"heart",[97,485,244],{"class":103},[97,487,403],{"class":103},[97,489,490,492,494],{"class":99,"line":180},[97,491,278],{"class":103},[97,493,452],{"class":107},[97,495,115],{"class":103},[97,497,498],{"class":99,"line":205},[97,499,177],{"emptyLinePlaceholder":176},[97,501,502],{"class":99,"line":215},[97,503,504],{"class":444},"  \u003C!-- a button with text is announced from that text — no label needed -->\n",[97,506,507,509,511,513,516,518,520],{"class":99,"line":220},[97,508,233],{"class":103},[97,510,452],{"class":107},[97,512,263],{"class":103},[97,514,515],{"class":128},"Save changes",[97,517,208],{"class":103},[97,519,452],{"class":107},[97,521,115],{"class":103},[97,523,524,526,528],{"class":99,"line":230},[97,525,208],{"class":103},[97,527,225],{"class":107},[97,529,115],{"class":103},[531,532,533],"note",{},[66,534,535,536,538],{},"Built-in icon controls already set a sensible default — close buttons announce \"Close\", pagination announces \"Next Page\", and so on. Pass ",[78,537,421],{}," only when you want a more specific name.",[70,540,542],{"id":541},"why-lynx-is-different-from-the-web","Why Lynx is different from the web",[66,544,545,546,549,550,553,554,549,557,560,561,569,570,573],{},"On the web, ",[78,547,548],{},"\u003Cbutton>"," and ",[78,551,552],{},"\u003Cinput type=\"checkbox\">"," get their accessibility from the browser, and you only reach for ARIA on custom widgets. Lynx renders to native ",[78,555,556],{},"\u003Cview>",[78,558,559],{},"\u003Ctext>"," — generic boxes with no built-in roles — so accessibility has to be attached explicitly. Vy UI does that for you. Note that Lynx ",[562,563,564,565,568],"strong",{},"ignores web ",[78,566,567],{},"aria-*"," attributes","; native accessibility uses ",[78,571,572],{},"accessibility-*"," props instead, which the components handle.",[70,575,577],{"id":576},"building-your-own-component","Building your own component",[66,579,580,581,583,584,587],{},"If you compose your own primitive on top of ",[78,582,30],{},", use the ",[78,585,586],{},"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:",[88,589,591],{"className":90,"code":590,"language":92,"meta":93,"style":93},"\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",[78,592,593,603,622,640,644,660,664,689,708,745,753,761,765,774,808,827,836],{"__ignoreMap":93},[97,594,595,597,599,601],{"class":99,"line":100},[97,596,104],{"class":103},[97,598,108],{"class":107},[97,600,112],{"class":111},[97,602,115],{"class":103},[97,604,605,607,609,612,614,616,618,620],{"class":99,"line":118},[97,606,122],{"class":121},[97,608,125],{"class":103},[97,610,611],{"class":128}," useA11y",[97,613,138],{"class":103},[97,615,141],{"class":121},[97,617,144],{"class":103},[97,619,30],{"class":147},[97,621,150],{"class":103},[97,623,624,626,628,630,632,634,636,638],{"class":99,"line":153},[97,625,122],{"class":121},[97,627,125],{"class":103},[97,629,160],{"class":128},[97,631,138],{"class":103},[97,633,141],{"class":121},[97,635,144],{"class":103},[97,637,92],{"class":147},[97,639,150],{"class":103},[97,641,642],{"class":99,"line":173},[97,643,177],{"emptyLinePlaceholder":176},[97,645,646,648,650,652,654,656,658],{"class":99,"line":180},[97,647,183],{"class":111},[97,649,186],{"class":128},[97,651,189],{"class":103},[97,653,160],{"class":192},[97,655,195],{"class":128},[97,657,199],{"class":198},[97,659,202],{"class":128},[97,661,662],{"class":99,"line":205},[97,663,177],{"emptyLinePlaceholder":176},[97,665,666,668,671,673,675,677,680,683,686],{"class":99,"line":215},[97,667,183],{"class":111},[97,669,670],{"class":128}," a11y ",[97,672,189],{"class":103},[97,674,611],{"class":192},[97,676,195],{"class":128},[97,678,679],{"class":103},"()",[97,681,682],{"class":111}," =>",[97,684,685],{"class":128}," (",[97,687,688],{"class":103},"{\n",[97,690,691,694,697,699,702,705],{"class":99,"line":220},[97,692,693],{"class":107},"  role",[97,695,696],{"class":103},":",[97,698,144],{"class":103},[97,700,701],{"class":147},"checkbox",[97,703,704],{"class":103},"'",[97,706,707],{"class":103},",\n",[97,709,710,713,715,718,721,724,727,729,731,733,736,738,741,743],{"class":99,"line":230},[97,711,712],{"class":107},"  state",[97,714,696],{"class":103},[97,716,717],{"class":128}," checked",[97,719,720],{"class":103},".",[97,722,723],{"class":128},"value ",[97,725,726],{"class":103},"?",[97,728,144],{"class":103},[97,730,247],{"class":147},[97,732,704],{"class":103},[97,734,735],{"class":103}," :",[97,737,144],{"class":103},[97,739,740],{"class":147},"unchecked",[97,742,704],{"class":103},[97,744,707],{"class":103},[97,746,747,750],{"class":99,"line":254},[97,748,749],{"class":103},"}",[97,751,752],{"class":128},"))\n",[97,754,755,757,759],{"class":99,"line":275},[97,756,208],{"class":103},[97,758,108],{"class":107},[97,760,115],{"class":103},[97,762,763],{"class":99,"line":285},[97,764,177],{"emptyLinePlaceholder":176},[97,766,768,770,772],{"class":99,"line":767},13,[97,769,104],{"class":103},[97,771,225],{"class":107},[97,773,115],{"class":103},[97,775,777,779,782,785,787,789,792,794,797,799,801,804,806],{"class":99,"line":776},14,[97,778,233],{"class":103},[97,780,781],{"class":107},"view",[97,783,784],{"class":111}," v-bind",[97,786,189],{"class":103},[97,788,244],{"class":103},[97,790,791],{"class":147},"a11y",[97,793,244],{"class":103},[97,795,796],{"class":111}," @tap",[97,798,189],{"class":103},[97,800,244],{"class":103},[97,802,803],{"class":147},"checked = !checked",[97,805,244],{"class":103},[97,807,115],{"class":103},[97,809,811,813,816,818,821,823,825],{"class":99,"line":810},15,[97,812,257],{"class":103},[97,814,815],{"class":107},"text",[97,817,263],{"class":103},[97,819,820],{"class":128},"Wifi",[97,822,208],{"class":103},[97,824,815],{"class":107},[97,826,115],{"class":103},[97,828,830,832,834],{"class":99,"line":829},16,[97,831,278],{"class":103},[97,833,781],{"class":107},[97,835,115],{"class":103},[97,837,839,841,843],{"class":99,"line":838},17,[97,840,208],{"class":103},[97,842,225],{"class":107},[97,844,115],{"class":103},[66,846,847,848,850],{},"It's reactive: when ",[78,849,247],{}," changes, the announced state updates automatically.",[852,853,855],"h3",{"id":854},"descriptor-reference","Descriptor reference",[857,858,859,875],"table",{},[860,861,862],"thead",{},[863,864,865,869,872],"tr",{},[866,867,868],"th",{},"Field",[866,870,871],{},"What it does",[866,873,874],{},"Example",[876,877,878,913,928,952,973,989,1003],"tbody",{},[863,879,880,886,889],{},[881,882,883],"td",{},[78,884,885],{},"role",[881,887,888],{},"The kind of control",[881,890,891,894,895,894,898,894,901,894,904,894,907,894,910],{},[78,892,893],{},"'button'",", ",[78,896,897],{},"'checkbox'",[78,899,900],{},"'switch'",[78,902,903],{},"'tab'",[78,905,906],{},"'slider'",[78,908,909],{},"'heading'",[78,911,912],{},"'dialog'",[863,914,915,920,923],{},[881,916,917],{},[78,918,919],{},"label",[881,921,922],{},"Spoken name (for controls without text)",[881,924,925],{},[78,926,927],{},"'Add to favorites'",[863,929,930,935,938],{},[881,931,932],{},[78,933,934],{},"state",[881,936,937],{},"Spoken state",[881,939,940,894,943,894,946,894,949],{},[78,941,942],{},"'checked'",[78,944,945],{},"'expanded'",[78,947,948],{},"'on'",[78,950,951],{},"'pressed'",[863,953,954,959,968],{},[881,955,956],{},[78,957,958],{},"selected",[881,960,961,962,965,966],{},"For tabs\u002Foptions — announces \"selected\" when ",[78,963,964],{},"true",", nothing when ",[78,967,199],{},[881,969,970],{},[78,971,972],{},"isActive",[863,974,975,980,983],{},[881,976,977],{},[78,978,979],{},"value",[881,981,982],{},"A range value",[881,984,985,988],{},[78,986,987],{},"{ now: 30, max: 100 }"," → \"30 of 100\"",[863,990,991,996,999],{},[881,992,993],{},[78,994,995],{},"disabled",[881,997,998],{},"Marks the control unavailable",[881,1000,1001],{},[78,1002,964],{},[863,1004,1005,1010,1013],{},[881,1006,1007],{},[78,1008,1009],{},"exclusiveFocus",[881,1011,1012],{},"Traps screen-reader focus inside (modals)",[881,1014,1015],{},[78,1016,964],{},[531,1018,1019],{},[66,1020,1021,1022,1024,1025,1027,1028,1030],{},"Lynx allows one role per element, so a ",[78,1023,995],{}," control announces \"disabled\" rather than its usual role. For tabs and options, pass ",[78,1026,958],{}," (not a ",[78,1029,934],{}," string) — selected items announce \"selected\" and unselected ones stay quiet, which is how a screen reader expects a list to behave.",[70,1032,1034],{"id":1033},"on-the-roadmap","On the roadmap",[66,1036,1037,1038,1041,1042,720],{},"Spoken announcements for transient UI like toasts, moving focus into a dialog when it opens, and an ARIA layer for the Lynx ",[562,1039,1040],{},"web"," target are in progress — see the ",[1043,1044,1045],"a",{"href":57},"roadmap",[1047,1048,1049],"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":93,"searchDepth":100,"depth":118,"links":1051},[1052,1053,1054,1055,1058],{"id":72,"depth":118,"text":73},{"id":414,"depth":118,"text":415},{"id":541,"depth":118,"text":542},{"id":576,"depth":118,"text":577,"children":1056},[1057],{"id":854,"depth":153,"text":855},{"id":1033,"depth":118,"text":1034},"Vy UI components ship with native Lynx accessibility built in — what you get for free and the one thing you add.","md",null,{},{"icon":49},{"title":46,"description":1059},"58LvtHAXFmrvhOYmIlC3D_TOS4HDhTwtt60olVaO-f4",[1067,1069],{"title":41,"path":42,"stem":43,"description":1068,"icon":44,"children":-1},"Override any Vy UI component slot, variant, or default via Tailwind Variants — full theme control without fighting the library.",{"title":51,"path":52,"stem":53,"description":1070,"icon":54,"children":-1},"How Vy UI plans to handle internationalization on Lynx — locale-aware text, formatting, and RTL. Forward-looking; not shipped yet.",1780388088855]