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