[{"data":1,"prerenderedAt":1699},["ShallowReactive",2],{"navigation":3,"\u002Ftheming":313,"\u002Ftheming-surround":1694},[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":294,"body":315,"description":1688,"extension":1689,"links":11,"meta":1690,"navigation":1691,"package":11,"path":295,"seo":1692,"stem":296,"__hash__":1693},"docs\u002F4.theming.md",{"type":316,"value":317,"toc":1676},"minimark",[318,333,338,349,353,359,526,530,537,704,708,714,719,722,831,835,838,1040,1047,1051,1057,1473,1489,1493,1500,1544,1548,1551,1672],[319,320,321,324,325,332],"p",{},[322,323,36],"code",{}," ships a real theme system today — every styled component has its own theme file backed by ",[326,327,331],"a",{"href":328,"rel":329},"https:\u002F\u002Fwww.tailwind-variants.org",[330],"nofollow","Tailwind Variants",", and the whole thing is overridable at runtime.",[334,335,337],"h2",{"id":336},"per-component-themes","Per-component themes",[319,339,340,341,344,345,348],{},"Each ",[322,342,343],{},"Vy*"," component reads a theme file under ",[322,346,347],{},"packages\u002Fkit\u002Fsrc\u002Ftheme",". Override slots, variants, and defaults without forking the source.",[334,350,352],{"id":351},"createtv-tv","createTv + tv",[319,354,355,356,358],{},"Re-exported from ",[322,357,36],{}," so you can compose your own variants on top, with the same DX as Nuxt UI or shadcn.",[360,361,366],"pre",{"className":362,"code":363,"language":364,"meta":365,"style":365},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { tv } from '@vyui\u002Fkit'\n\nconst button = tv({\n  base: 'inline-flex items-center justify-center rounded-md',\n  variants: {\n    color: {\n      primary: 'bg-primary text-inverted',\n      neutral: 'bg-elevated text-default',\n    },\n  },\n})\n","ts","",[322,367,368,400,407,429,450,461,471,488,505,511,517],{"__ignoreMap":365},[369,370,373,377,381,385,388,391,394,397],"span",{"class":371,"line":372},"line",1,[369,374,376],{"class":375},"s7zQu","import",[369,378,380],{"class":379},"sMK4o"," {",[369,382,384],{"class":383},"sTEyZ"," tv",[369,386,387],{"class":379}," }",[369,389,390],{"class":375}," from",[369,392,393],{"class":379}," '",[369,395,36],{"class":396},"sfazB",[369,398,399],{"class":379},"'\n",[369,401,403],{"class":371,"line":402},2,[369,404,406],{"emptyLinePlaceholder":405},true,"\n",[369,408,410,414,417,420,423,426],{"class":371,"line":409},3,[369,411,413],{"class":412},"spNyl","const",[369,415,416],{"class":383}," button ",[369,418,419],{"class":379},"=",[369,421,384],{"class":422},"s2Zo4",[369,424,425],{"class":383},"(",[369,427,428],{"class":379},"{\n",[369,430,432,436,439,441,444,447],{"class":371,"line":431},4,[369,433,435],{"class":434},"swJcz","  base",[369,437,438],{"class":379},":",[369,440,393],{"class":379},[369,442,443],{"class":396},"inline-flex items-center justify-center rounded-md",[369,445,446],{"class":379},"'",[369,448,449],{"class":379},",\n",[369,451,453,456,458],{"class":371,"line":452},5,[369,454,455],{"class":434},"  variants",[369,457,438],{"class":379},[369,459,460],{"class":379}," {\n",[369,462,464,467,469],{"class":371,"line":463},6,[369,465,466],{"class":434},"    color",[369,468,438],{"class":379},[369,470,460],{"class":379},[369,472,474,477,479,481,484,486],{"class":371,"line":473},7,[369,475,476],{"class":434},"      primary",[369,478,438],{"class":379},[369,480,393],{"class":379},[369,482,483],{"class":396},"bg-primary text-inverted",[369,485,446],{"class":379},[369,487,449],{"class":379},[369,489,491,494,496,498,501,503],{"class":371,"line":490},8,[369,492,493],{"class":434},"      neutral",[369,495,438],{"class":379},[369,497,393],{"class":379},[369,499,500],{"class":396},"bg-elevated text-default",[369,502,446],{"class":379},[369,504,449],{"class":379},[369,506,508],{"class":371,"line":507},9,[369,509,510],{"class":379},"    },\n",[369,512,514],{"class":371,"line":513},10,[369,515,516],{"class":379},"  },\n",[369,518,520,523],{"class":371,"line":519},11,[369,521,522],{"class":379},"}",[369,524,525],{"class":383},")\n",[334,527,529],{"id":528},"runtime-app-config","Runtime app config",[319,531,532,533,536],{},"Pass overrides to the ",[322,534,535],{},"VyUI"," plugin at mount time. No build step. Theme keys are deep-merged into the defaults.",[360,538,540],{"className":362,"code":539,"language":364,"meta":365,"style":365},"import { createApp } from '@lynx-js\u002Fvue'\nimport { VyUI } from '@vyui\u002Fkit'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App)\n  .use(VyUI, {\n    ui: {\n      button: {\n        defaultVariants: { color: 'primary' },\n      },\n    },\n  })\n  .mount('#app')\n",[322,541,542,562,581,598,602,610,626,635,644,668,673,677,685],{"__ignoreMap":365},[369,543,544,546,548,551,553,555,557,560],{"class":371,"line":372},[369,545,376],{"class":375},[369,547,380],{"class":379},[369,549,550],{"class":383}," createApp",[369,552,387],{"class":379},[369,554,390],{"class":375},[369,556,393],{"class":379},[369,558,559],{"class":396},"@lynx-js\u002Fvue",[369,561,399],{"class":379},[369,563,564,566,568,571,573,575,577,579],{"class":371,"line":402},[369,565,376],{"class":375},[369,567,380],{"class":379},[369,569,570],{"class":383}," VyUI",[369,572,387],{"class":379},[369,574,390],{"class":375},[369,576,393],{"class":379},[369,578,36],{"class":396},[369,580,399],{"class":379},[369,582,583,585,588,591,593,596],{"class":371,"line":409},[369,584,376],{"class":375},[369,586,587],{"class":383}," App ",[369,589,590],{"class":375},"from",[369,592,393],{"class":379},[369,594,595],{"class":396},".\u002FApp.vue",[369,597,399],{"class":379},[369,599,600],{"class":371,"line":431},[369,601,406],{"emptyLinePlaceholder":405},[369,603,604,607],{"class":371,"line":452},[369,605,606],{"class":422},"createApp",[369,608,609],{"class":383},"(App)\n",[369,611,612,615,618,621,624],{"class":371,"line":463},[369,613,614],{"class":379},"  .",[369,616,617],{"class":422},"use",[369,619,620],{"class":383},"(VyUI",[369,622,623],{"class":379},",",[369,625,460],{"class":379},[369,627,628,631,633],{"class":371,"line":473},[369,629,630],{"class":434},"    ui",[369,632,438],{"class":379},[369,634,460],{"class":379},[369,636,637,640,642],{"class":371,"line":490},[369,638,639],{"class":434},"      button",[369,641,438],{"class":379},[369,643,460],{"class":379},[369,645,646,649,651,653,656,658,660,663,665],{"class":371,"line":507},[369,647,648],{"class":434},"        defaultVariants",[369,650,438],{"class":379},[369,652,380],{"class":379},[369,654,655],{"class":434}," color",[369,657,438],{"class":379},[369,659,393],{"class":379},[369,661,662],{"class":396},"primary",[369,664,446],{"class":379},[369,666,667],{"class":379}," },\n",[369,669,670],{"class":371,"line":513},[369,671,672],{"class":379},"      },\n",[369,674,675],{"class":371,"line":519},[369,676,510],{"class":379},[369,678,680,683],{"class":371,"line":679},12,[369,681,682],{"class":379},"  }",[369,684,525],{"class":383},[369,686,688,690,693,695,697,700,702],{"class":371,"line":687},13,[369,689,614],{"class":379},[369,691,692],{"class":422},"mount",[369,694,425],{"class":383},[369,696,446],{"class":379},[369,698,699],{"class":396},"#app",[369,701,446],{"class":379},[369,703,525],{"class":383},[334,705,707],{"id":706},"fonts","Fonts",[319,709,710,711,713],{},"Vy UI does not ship or load a font for you. ",[322,712,36],{}," stays font-agnostic, and the Vue-Lynx app owns font registration, Tailwind font utilities, and any component-level typography overrides.",[715,716,718],"h3",{"id":717},"_1-load-app-css","1. Load app CSS",[319,720,721],{},"Import the app stylesheet from the Vue-Lynx entry file. This is where Tailwind and app-owned font rules live.",[360,723,726],{"className":362,"code":724,"filename":725,"language":364,"meta":365,"style":365},"import { createApp } from 'vue-lynx'\nimport { VyUI } from '@vyui\u002Fkit'\nimport App from '.\u002FApp.vue'\nimport '.\u002Findex.css'\n\nconst app = createApp(App)\napp.use(VyUI)\napp.mount()\n","src\u002Findex.ts",[322,727,728,747,765,779,790,794,807,820],{"__ignoreMap":365},[369,729,730,732,734,736,738,740,742,745],{"class":371,"line":372},[369,731,376],{"class":375},[369,733,380],{"class":379},[369,735,550],{"class":383},[369,737,387],{"class":379},[369,739,390],{"class":375},[369,741,393],{"class":379},[369,743,744],{"class":396},"vue-lynx",[369,746,399],{"class":379},[369,748,749,751,753,755,757,759,761,763],{"class":371,"line":402},[369,750,376],{"class":375},[369,752,380],{"class":379},[369,754,570],{"class":383},[369,756,387],{"class":379},[369,758,390],{"class":375},[369,760,393],{"class":379},[369,762,36],{"class":396},[369,764,399],{"class":379},[369,766,767,769,771,773,775,777],{"class":371,"line":409},[369,768,376],{"class":375},[369,770,587],{"class":383},[369,772,590],{"class":375},[369,774,393],{"class":379},[369,776,595],{"class":396},[369,778,399],{"class":379},[369,780,781,783,785,788],{"class":371,"line":431},[369,782,376],{"class":375},[369,784,393],{"class":379},[369,786,787],{"class":396},".\u002Findex.css",[369,789,399],{"class":379},[369,791,792],{"class":371,"line":452},[369,793,406],{"emptyLinePlaceholder":405},[369,795,796,798,801,803,805],{"class":371,"line":463},[369,797,413],{"class":412},[369,799,800],{"class":383}," app ",[369,802,419],{"class":379},[369,804,550],{"class":422},[369,806,609],{"class":383},[369,808,809,812,815,817],{"class":371,"line":473},[369,810,811],{"class":383},"app",[369,813,814],{"class":379},".",[369,816,617],{"class":422},[369,818,819],{"class":383},"(VyUI)\n",[369,821,822,824,826,828],{"class":371,"line":490},[369,823,811],{"class":383},[369,825,814],{"class":379},[369,827,692],{"class":422},[369,829,830],{"class":383},"()\n",[715,832,834],{"id":833},"_2-define-the-font-in-css","2. Define the font in CSS",[319,836,837],{},"Load the font in the app stylesheet when the target supports CSS font loading. Keep the family name stable, because Tailwind utilities and theme overrides reference this name.",[360,839,844],{"className":840,"code":841,"filename":842,"language":843,"meta":365,"style":365},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@tailwind base;\n@tailwind utilities;\n\n@import '@vyui\u002Fkit\u002Fstyle.css';\n\n@font-face {\n  font-family: 'Brand Sans';\n  src: url('\u002Ffonts\u002Fbrand-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n}\n\n@font-face {\n  font-family: 'Brand Sans';\n  src: url('\u002Ffonts\u002Fbrand-sans-semibold.woff2') format('woff2');\n  font-weight: 600;\n}\n","src\u002Findex.css","css",[322,845,846,857,866,870,884,888,895,912,949,962,967,971,977,991,1023,1035],{"__ignoreMap":365},[369,847,848,851,854],{"class":371,"line":372},[369,849,850],{"class":375},"@tailwind",[369,852,853],{"class":383}," base",[369,855,856],{"class":379},";\n",[369,858,859,861,864],{"class":371,"line":402},[369,860,850],{"class":375},[369,862,863],{"class":383}," utilities",[369,865,856],{"class":379},[369,867,868],{"class":371,"line":409},[369,869,406],{"emptyLinePlaceholder":405},[369,871,872,875,877,880,882],{"class":371,"line":431},[369,873,874],{"class":375},"@import",[369,876,393],{"class":379},[369,878,879],{"class":396},"@vyui\u002Fkit\u002Fstyle.css",[369,881,446],{"class":379},[369,883,856],{"class":379},[369,885,886],{"class":371,"line":452},[369,887,406],{"emptyLinePlaceholder":405},[369,889,890,893],{"class":371,"line":463},[369,891,892],{"class":375},"@font-face",[369,894,460],{"class":379},[369,896,897,901,903,905,908,910],{"class":371,"line":473},[369,898,900],{"class":899},"sqsOY","  font-family",[369,902,438],{"class":379},[369,904,393],{"class":379},[369,906,907],{"class":396},"Brand Sans",[369,909,446],{"class":379},[369,911,856],{"class":379},[369,913,914,917,919,922,924,926,929,931,934,937,939,941,944,946],{"class":371,"line":490},[369,915,916],{"class":899},"  src",[369,918,438],{"class":379},[369,920,921],{"class":422}," url",[369,923,425],{"class":379},[369,925,446],{"class":379},[369,927,928],{"class":396},"\u002Ffonts\u002Fbrand-sans-regular.woff2",[369,930,446],{"class":379},[369,932,933],{"class":379},")",[369,935,936],{"class":422}," format",[369,938,425],{"class":379},[369,940,446],{"class":379},[369,942,943],{"class":396},"woff2",[369,945,446],{"class":379},[369,947,948],{"class":379},");\n",[369,950,951,954,956,960],{"class":371,"line":507},[369,952,953],{"class":899},"  font-weight",[369,955,438],{"class":379},[369,957,959],{"class":958},"sbssI"," 400",[369,961,856],{"class":379},[369,963,964],{"class":371,"line":513},[369,965,966],{"class":379},"}\n",[369,968,969],{"class":371,"line":519},[369,970,406],{"emptyLinePlaceholder":405},[369,972,973,975],{"class":371,"line":679},[369,974,892],{"class":375},[369,976,460],{"class":379},[369,978,979,981,983,985,987,989],{"class":371,"line":687},[369,980,900],{"class":899},[369,982,438],{"class":379},[369,984,393],{"class":379},[369,986,907],{"class":396},[369,988,446],{"class":379},[369,990,856],{"class":379},[369,992,994,996,998,1000,1002,1004,1007,1009,1011,1013,1015,1017,1019,1021],{"class":371,"line":993},14,[369,995,916],{"class":899},[369,997,438],{"class":379},[369,999,921],{"class":422},[369,1001,425],{"class":379},[369,1003,446],{"class":379},[369,1005,1006],{"class":396},"\u002Ffonts\u002Fbrand-sans-semibold.woff2",[369,1008,446],{"class":379},[369,1010,933],{"class":379},[369,1012,936],{"class":422},[369,1014,425],{"class":379},[369,1016,446],{"class":379},[369,1018,943],{"class":396},[369,1020,446],{"class":379},[369,1022,948],{"class":379},[369,1024,1026,1028,1030,1033],{"class":371,"line":1025},15,[369,1027,953],{"class":899},[369,1029,438],{"class":379},[369,1031,1032],{"class":958}," 600",[369,1034,856],{"class":379},[369,1036,1038],{"class":371,"line":1037},16,[369,1039,966],{"class":379},[319,1041,1042,1043,1046],{},"For native Lynx targets, use the font registration mechanism required by the host app or platform, then keep the same ",[322,1044,1045],{},"font-family"," name in Tailwind and component classes.",[715,1048,1050],{"id":1049},"_3-add-tailwind-font-utilities","3. Add Tailwind font utilities",[319,1052,1053,1054,814],{},"Extend the Vue-Lynx Tailwind config. Keep the Lynx preset first and the Vy UI preset second; add fonts under ",[322,1055,1056],{},"theme.extend.fontFamily",[360,1058,1061],{"className":362,"code":1059,"filename":1060,"language":364,"meta":365,"style":365},"import type { Config } from 'tailwindcss'\nimport { createLynxPreset } from '@lynx-js\u002Ftailwind-preset'\nimport vyuiPreset, { VYUI_UI_STATES } from '@vyui\u002Fkit\u002Ftailwind'\n\nconst lynxPreset = createLynxPreset({\n  lynxUIPlugins: {\n    uiVariants: {\n      prefixes: defaults => ({\n        ...defaults,\n        ui: [...defaults.ui, ...VYUI_UI_STATES],\n      }),\n    },\n  },\n})\n\nconst config: Config = {\n  content: [\n    '.\u002Fsrc\u002F**\u002F*.{vue,js,ts}',\n    '..\u002F..\u002F..\u002Fpackages\u002Fkit\u002Fsrc\u002F**\u002F*.{vue,js,ts}',\n    '..\u002F..\u002F..\u002Fpackages\u002Fcore\u002Fsrc\u002F**\u002F*.{vue,js,ts}',\n  ],\n  presets: [\n    lynxPreset,\n    vyuiPreset as Config,\n  ],\n  theme: {\n    extend: {\n      fontFamily: {\n        sans: ['Brand Sans'],\n        display: ['Brand Sans'],\n      },\n    },\n  },\n}\n\nexport default config\n","tailwind.config.ts",[322,1062,1063,1086,1106,1131,1135,1150,1159,1168,1187,1197,1227,1236,1240,1244,1250,1254,1271,1282,1295,1307,1319,1327,1337,1345,1358,1365,1375,1385,1395,1416,1436,1441,1446,1451,1456,1461],{"__ignoreMap":365},[369,1064,1065,1067,1070,1072,1075,1077,1079,1081,1084],{"class":371,"line":372},[369,1066,376],{"class":375},[369,1068,1069],{"class":375}," type",[369,1071,380],{"class":379},[369,1073,1074],{"class":383}," Config",[369,1076,387],{"class":379},[369,1078,390],{"class":375},[369,1080,393],{"class":379},[369,1082,1083],{"class":396},"tailwindcss",[369,1085,399],{"class":379},[369,1087,1088,1090,1092,1095,1097,1099,1101,1104],{"class":371,"line":402},[369,1089,376],{"class":375},[369,1091,380],{"class":379},[369,1093,1094],{"class":383}," createLynxPreset",[369,1096,387],{"class":379},[369,1098,390],{"class":375},[369,1100,393],{"class":379},[369,1102,1103],{"class":396},"@lynx-js\u002Ftailwind-preset",[369,1105,399],{"class":379},[369,1107,1108,1110,1113,1115,1117,1120,1122,1124,1126,1129],{"class":371,"line":409},[369,1109,376],{"class":375},[369,1111,1112],{"class":383}," vyuiPreset",[369,1114,623],{"class":379},[369,1116,380],{"class":379},[369,1118,1119],{"class":383}," VYUI_UI_STATES",[369,1121,387],{"class":379},[369,1123,390],{"class":375},[369,1125,393],{"class":379},[369,1127,1128],{"class":396},"@vyui\u002Fkit\u002Ftailwind",[369,1130,399],{"class":379},[369,1132,1133],{"class":371,"line":431},[369,1134,406],{"emptyLinePlaceholder":405},[369,1136,1137,1139,1142,1144,1146,1148],{"class":371,"line":452},[369,1138,413],{"class":412},[369,1140,1141],{"class":383}," lynxPreset ",[369,1143,419],{"class":379},[369,1145,1094],{"class":422},[369,1147,425],{"class":383},[369,1149,428],{"class":379},[369,1151,1152,1155,1157],{"class":371,"line":463},[369,1153,1154],{"class":434},"  lynxUIPlugins",[369,1156,438],{"class":379},[369,1158,460],{"class":379},[369,1160,1161,1164,1166],{"class":371,"line":473},[369,1162,1163],{"class":434},"    uiVariants",[369,1165,438],{"class":379},[369,1167,460],{"class":379},[369,1169,1170,1173,1175,1179,1182,1185],{"class":371,"line":490},[369,1171,1172],{"class":422},"      prefixes",[369,1174,438],{"class":379},[369,1176,1178],{"class":1177},"sHdIc"," defaults",[369,1180,1181],{"class":412}," =>",[369,1183,1184],{"class":383}," (",[369,1186,428],{"class":379},[369,1188,1189,1192,1195],{"class":371,"line":507},[369,1190,1191],{"class":379},"        ...",[369,1193,1194],{"class":383},"defaults",[369,1196,449],{"class":379},[369,1198,1199,1202,1204,1207,1210,1212,1214,1217,1219,1222,1225],{"class":371,"line":513},[369,1200,1201],{"class":434},"        ui",[369,1203,438],{"class":379},[369,1205,1206],{"class":383}," [",[369,1208,1209],{"class":379},"...",[369,1211,1194],{"class":383},[369,1213,814],{"class":379},[369,1215,1216],{"class":383},"ui",[369,1218,623],{"class":379},[369,1220,1221],{"class":379}," ...",[369,1223,1224],{"class":383},"VYUI_UI_STATES]",[369,1226,449],{"class":379},[369,1228,1229,1232,1234],{"class":371,"line":519},[369,1230,1231],{"class":379},"      }",[369,1233,933],{"class":383},[369,1235,449],{"class":379},[369,1237,1238],{"class":371,"line":679},[369,1239,510],{"class":379},[369,1241,1242],{"class":371,"line":687},[369,1243,516],{"class":379},[369,1245,1246,1248],{"class":371,"line":993},[369,1247,522],{"class":379},[369,1249,525],{"class":383},[369,1251,1252],{"class":371,"line":1025},[369,1253,406],{"emptyLinePlaceholder":405},[369,1255,1256,1258,1261,1263,1266,1269],{"class":371,"line":1037},[369,1257,413],{"class":412},[369,1259,1260],{"class":383}," config",[369,1262,438],{"class":379},[369,1264,1074],{"class":1265},"sBMFI",[369,1267,1268],{"class":379}," =",[369,1270,460],{"class":379},[369,1272,1274,1277,1279],{"class":371,"line":1273},17,[369,1275,1276],{"class":434},"  content",[369,1278,438],{"class":379},[369,1280,1281],{"class":383}," [\n",[369,1283,1285,1288,1291,1293],{"class":371,"line":1284},18,[369,1286,1287],{"class":379},"    '",[369,1289,1290],{"class":396},".\u002Fsrc\u002F**\u002F*.{vue,js,ts}",[369,1292,446],{"class":379},[369,1294,449],{"class":379},[369,1296,1298,1300,1303,1305],{"class":371,"line":1297},19,[369,1299,1287],{"class":379},[369,1301,1302],{"class":396},"..\u002F..\u002F..\u002Fpackages\u002Fkit\u002Fsrc\u002F**\u002F*.{vue,js,ts}",[369,1304,446],{"class":379},[369,1306,449],{"class":379},[369,1308,1310,1312,1315,1317],{"class":371,"line":1309},20,[369,1311,1287],{"class":379},[369,1313,1314],{"class":396},"..\u002F..\u002F..\u002Fpackages\u002Fcore\u002Fsrc\u002F**\u002F*.{vue,js,ts}",[369,1316,446],{"class":379},[369,1318,449],{"class":379},[369,1320,1322,1325],{"class":371,"line":1321},21,[369,1323,1324],{"class":383},"  ]",[369,1326,449],{"class":379},[369,1328,1330,1333,1335],{"class":371,"line":1329},22,[369,1331,1332],{"class":434},"  presets",[369,1334,438],{"class":379},[369,1336,1281],{"class":383},[369,1338,1340,1343],{"class":371,"line":1339},23,[369,1341,1342],{"class":383},"    lynxPreset",[369,1344,449],{"class":379},[369,1346,1348,1351,1354,1356],{"class":371,"line":1347},24,[369,1349,1350],{"class":383},"    vyuiPreset ",[369,1352,1353],{"class":375},"as",[369,1355,1074],{"class":1265},[369,1357,449],{"class":379},[369,1359,1361,1363],{"class":371,"line":1360},25,[369,1362,1324],{"class":383},[369,1364,449],{"class":379},[369,1366,1368,1371,1373],{"class":371,"line":1367},26,[369,1369,1370],{"class":434},"  theme",[369,1372,438],{"class":379},[369,1374,460],{"class":379},[369,1376,1378,1381,1383],{"class":371,"line":1377},27,[369,1379,1380],{"class":434},"    extend",[369,1382,438],{"class":379},[369,1384,460],{"class":379},[369,1386,1388,1391,1393],{"class":371,"line":1387},28,[369,1389,1390],{"class":434},"      fontFamily",[369,1392,438],{"class":379},[369,1394,460],{"class":379},[369,1396,1398,1401,1403,1405,1407,1409,1411,1414],{"class":371,"line":1397},29,[369,1399,1400],{"class":434},"        sans",[369,1402,438],{"class":379},[369,1404,1206],{"class":383},[369,1406,446],{"class":379},[369,1408,907],{"class":396},[369,1410,446],{"class":379},[369,1412,1413],{"class":383},"]",[369,1415,449],{"class":379},[369,1417,1419,1422,1424,1426,1428,1430,1432,1434],{"class":371,"line":1418},30,[369,1420,1421],{"class":434},"        display",[369,1423,438],{"class":379},[369,1425,1206],{"class":383},[369,1427,446],{"class":379},[369,1429,907],{"class":396},[369,1431,446],{"class":379},[369,1433,1413],{"class":383},[369,1435,449],{"class":379},[369,1437,1439],{"class":371,"line":1438},31,[369,1440,672],{"class":379},[369,1442,1444],{"class":371,"line":1443},32,[369,1445,510],{"class":379},[369,1447,1449],{"class":371,"line":1448},33,[369,1450,516],{"class":379},[369,1452,1454],{"class":371,"line":1453},34,[369,1455,966],{"class":379},[369,1457,1459],{"class":371,"line":1458},35,[369,1460,406],{"emptyLinePlaceholder":405},[369,1462,1464,1467,1470],{"class":371,"line":1463},36,[369,1465,1466],{"class":375},"export",[369,1468,1469],{"class":375}," default",[369,1471,1472],{"class":383}," config\n",[319,1474,1475,1476,1479,1480,1483,1484,1486,1487,814],{},"If the app was created with ",[322,1477,1478],{},"vyui init",", import the copied preset from ",[322,1481,1482],{},".\u002Fsrc\u002Flib\u002Fvyui\u002Fvyui-preset.js"," instead of ",[322,1485,1128],{},", matching the generated ",[322,1488,1060],{},[715,1490,1492],{"id":1491},"_4-use-fonts-in-app-markup","4. Use fonts in app markup",[319,1494,1495,1496,1499],{},"Use Tailwind font utilities on Lynx ",[322,1497,1498],{},"text"," nodes. Font family does not reliably cascade across every Lynx target, so put the utility on the text element or on the component slot that renders text.",[360,1501,1505],{"className":1502,"code":1503,"language":1504,"meta":365,"style":365},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctext class=\"font-display text-2xl font-semibold\">\n  Account settings\n\u003C\u002Ftext>\n","vue",[322,1506,1507,1530,1535],{"__ignoreMap":365},[369,1508,1509,1512,1514,1517,1519,1522,1525,1527],{"class":371,"line":372},[369,1510,1511],{"class":379},"\u003C",[369,1513,1498],{"class":434},[369,1515,1516],{"class":412}," class",[369,1518,419],{"class":379},[369,1520,1521],{"class":379},"\"",[369,1523,1524],{"class":396},"font-display text-2xl font-semibold",[369,1526,1521],{"class":379},[369,1528,1529],{"class":379},">\n",[369,1531,1532],{"class":371,"line":402},[369,1533,1534],{"class":383},"  Account settings\n",[369,1536,1537,1540,1542],{"class":371,"line":409},[369,1538,1539],{"class":379},"\u003C\u002F",[369,1541,1498],{"class":434},[369,1543,1529],{"class":379},[715,1545,1547],{"id":1546},"_5-override-vy-ui-component-typography","5. Override Vy UI component typography",[319,1549,1550],{},"Use app config when a font should apply to a whole Vy UI component slot. Theme keys are deep-merged into the kit defaults.",[360,1552,1554],{"className":362,"code":1553,"filename":725,"language":364,"meta":365,"style":365},"app.use(VyUI, {\n  ui: {\n    button: {\n      slots: {\n        label: 'font-sans',\n      },\n    },\n    modal: {\n      slots: {\n        title: 'font-display font-semibold',\n      },\n    },\n  },\n})\n",[322,1555,1556,1570,1579,1588,1597,1613,1617,1621,1630,1638,1654,1658,1662,1666],{"__ignoreMap":365},[369,1557,1558,1560,1562,1564,1566,1568],{"class":371,"line":372},[369,1559,811],{"class":383},[369,1561,814],{"class":379},[369,1563,617],{"class":422},[369,1565,620],{"class":383},[369,1567,623],{"class":379},[369,1569,460],{"class":379},[369,1571,1572,1575,1577],{"class":371,"line":402},[369,1573,1574],{"class":434},"  ui",[369,1576,438],{"class":379},[369,1578,460],{"class":379},[369,1580,1581,1584,1586],{"class":371,"line":409},[369,1582,1583],{"class":434},"    button",[369,1585,438],{"class":379},[369,1587,460],{"class":379},[369,1589,1590,1593,1595],{"class":371,"line":431},[369,1591,1592],{"class":434},"      slots",[369,1594,438],{"class":379},[369,1596,460],{"class":379},[369,1598,1599,1602,1604,1606,1609,1611],{"class":371,"line":452},[369,1600,1601],{"class":434},"        label",[369,1603,438],{"class":379},[369,1605,393],{"class":379},[369,1607,1608],{"class":396},"font-sans",[369,1610,446],{"class":379},[369,1612,449],{"class":379},[369,1614,1615],{"class":371,"line":463},[369,1616,672],{"class":379},[369,1618,1619],{"class":371,"line":473},[369,1620,510],{"class":379},[369,1622,1623,1626,1628],{"class":371,"line":490},[369,1624,1625],{"class":434},"    modal",[369,1627,438],{"class":379},[369,1629,460],{"class":379},[369,1631,1632,1634,1636],{"class":371,"line":507},[369,1633,1592],{"class":434},[369,1635,438],{"class":379},[369,1637,460],{"class":379},[369,1639,1640,1643,1645,1647,1650,1652],{"class":371,"line":513},[369,1641,1642],{"class":434},"        title",[369,1644,438],{"class":379},[369,1646,393],{"class":379},[369,1648,1649],{"class":396},"font-display font-semibold",[369,1651,446],{"class":379},[369,1653,449],{"class":379},[369,1655,1656],{"class":371,"line":519},[369,1657,672],{"class":379},[369,1659,1660],{"class":371,"line":679},[369,1661,510],{"class":379},[369,1663,1664],{"class":371,"line":687},[369,1665,516],{"class":379},[369,1667,1668,1670],{"class":371,"line":993},[369,1669,522],{"class":379},[369,1671,525],{"class":383},[1673,1674,1675],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":365,"searchDepth":372,"depth":402,"links":1677},[1678,1679,1680,1681],{"id":336,"depth":402,"text":337},{"id":351,"depth":402,"text":352},{"id":528,"depth":402,"text":529},{"id":706,"depth":402,"text":707,"children":1682},[1683,1684,1685,1686,1687],{"id":717,"depth":409,"text":718},{"id":833,"depth":409,"text":834},{"id":1049,"depth":409,"text":1050},{"id":1491,"depth":409,"text":1492},{"id":1546,"depth":409,"text":1547},"Override any Vy UI component slot, variant, or default via Tailwind Variants — full theme control without fighting the library.","md",{},{"icon":297},{"title":294,"description":1688},"JGm_Y4U0C3-hqoCDIbl1w4NhkiovaUK0zo0L0XMKA9Y",[1695,1697],{"title":289,"path":290,"stem":291,"description":1696,"icon":-1,"children":-1,"navigation":-1},"A morphing multi-view bottom sheet that grows to fit each view.",{"title":299,"path":300,"stem":301,"description":1698,"icon":-1,"children":-1,"navigation":-1},"Vy UI components ship with native Lynx accessibility built in — what you get for free and the one thing you add.",1783464064465]