[{"data":1,"prerenderedAt":2702},["ShallowReactive",2],{"navigation":3,"\u002Fgetting-started\u002Finstallation":313,"\u002Fgetting-started\u002Finstallation-surround":2697},[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":14,"body":315,"description":2691,"extension":2692,"links":11,"meta":2693,"navigation":2694,"package":11,"path":15,"seo":2695,"stem":16,"__hash__":2696},"docs\u002F1.getting-started\u002F2.installation.md",{"type":316,"value":317,"toc":2677},"minimark",[318,323,328,337,423,427,431,675,681,685,766,781,785,807,1108,1112,1139,1188,1192,1207,1387,1390,1472,1510,1514,1522,1588,1604,1611,1633,1836,1909,1965,1969,1990,2093,2100,2273,2277,2280,2283,2296,2372,2375,2398,2446,2450,2473,2572,2597,2644,2667,2673],[319,320,322],"h2",{"id":321},"setup","Setup",[324,325,327],"h3",{"id":326},"add-to-a-vue-lynx-project","Add to a Vue-Lynx project",[329,330,332,333,336],"h4",{"id":331},"install-the-vyuicore-package","Install the ",[334,335,31],"code",{}," package",[338,339,340,365,379,393,408],"code-group",{},[341,342,348],"pre",{"className":343,"code":344,"filename":345,"language":346,"meta":347,"style":347},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @vyui\u002Fcore\n","pnpm","bash","",[334,349,350],{"__ignoreMap":347},[351,352,355,358,362],"span",{"class":353,"line":354},"line",1,[351,356,345],{"class":357},"sBMFI",[351,359,361],{"class":360},"sfazB"," add",[351,363,364],{"class":360}," @vyui\u002Fcore\n",[341,366,369],{"className":343,"code":367,"filename":368,"language":346,"meta":347,"style":347},"yarn add @vyui\u002Fcore\n","yarn",[334,370,371],{"__ignoreMap":347},[351,372,373,375,377],{"class":353,"line":354},[351,374,368],{"class":357},[351,376,361],{"class":360},[351,378,364],{"class":360},[341,380,383],{"className":343,"code":381,"filename":382,"language":346,"meta":347,"style":347},"bun add @vyui\u002Fcore\n","bun",[334,384,385],{"__ignoreMap":347},[351,386,387,389,391],{"class":353,"line":354},[351,388,382],{"class":357},[351,390,361],{"class":360},[351,392,364],{"class":360},[341,394,397],{"className":343,"code":395,"filename":396,"language":346,"meta":347,"style":347},"deno add npm:@vyui\u002Fcore\n","deno",[334,398,399],{"__ignoreMap":347},[351,400,401,403,405],{"class":353,"line":354},[351,402,396],{"class":357},[351,404,361],{"class":360},[351,406,407],{"class":360}," npm:@vyui\u002Fcore\n",[341,409,412],{"className":343,"code":410,"filename":411,"language":346,"meta":347,"style":347},"npm install @vyui\u002Fcore\n","npm",[334,413,414],{"__ignoreMap":347},[351,415,416,418,421],{"class":353,"line":354},[351,417,411],{"class":357},[351,419,420],{"class":360}," install",[351,422,364],{"class":360},[329,424,426],{"id":425},"use-a-primitive","Use a primitive",[428,429,430],"p",{},"Primitives are unstyled. Compose them with your own classes, tokens, or design system.",[341,432,437],{"className":433,"code":434,"filename":435,"language":436,"meta":347,"style":347},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { SliderRoot, SliderTrack, SliderRange, SliderThumb } from '@vyui\u002Fcore'\nimport { ref } from 'vue'\n\nconst value = ref(50)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSliderRoot v-model=\"value\" :max=\"100\">\n    \u003CSliderTrack>\n      \u003CSliderRange \u002F>\n    \u003C\u002FSliderTrack>\n    \u003CSliderThumb \u002F>\n  \u003C\u002FSliderRoot>\n\u003C\u002Ftemplate>\n","App.vue","vue",[334,438,439,456,500,520,527,552,562,567,577,613,624,636,646,656,666],{"__ignoreMap":347},[351,440,441,445,449,453],{"class":353,"line":354},[351,442,444],{"class":443},"sMK4o","\u003C",[351,446,448],{"class":447},"swJcz","script",[351,450,452],{"class":451},"spNyl"," setup",[351,454,455],{"class":443},">\n",[351,457,459,463,466,470,473,476,478,481,483,486,489,492,495,497],{"class":353,"line":458},2,[351,460,462],{"class":461},"s7zQu","import",[351,464,465],{"class":443}," {",[351,467,469],{"class":468},"sTEyZ"," SliderRoot",[351,471,472],{"class":443},",",[351,474,475],{"class":468}," SliderTrack",[351,477,472],{"class":443},[351,479,480],{"class":468}," SliderRange",[351,482,472],{"class":443},[351,484,485],{"class":468}," SliderThumb",[351,487,488],{"class":443}," }",[351,490,491],{"class":461}," from",[351,493,494],{"class":443}," '",[351,496,31],{"class":360},[351,498,499],{"class":443},"'\n",[351,501,503,505,507,510,512,514,516,518],{"class":353,"line":502},3,[351,504,462],{"class":461},[351,506,465],{"class":443},[351,508,509],{"class":468}," ref",[351,511,488],{"class":443},[351,513,491],{"class":461},[351,515,494],{"class":443},[351,517,436],{"class":360},[351,519,499],{"class":443},[351,521,523],{"class":353,"line":522},4,[351,524,526],{"emptyLinePlaceholder":525},true,"\n",[351,528,530,533,536,539,542,545,549],{"class":353,"line":529},5,[351,531,532],{"class":451},"const",[351,534,535],{"class":468}," value ",[351,537,538],{"class":443},"=",[351,540,509],{"class":541},"s2Zo4",[351,543,544],{"class":468},"(",[351,546,548],{"class":547},"sbssI","50",[351,550,551],{"class":468},")\n",[351,553,555,558,560],{"class":353,"line":554},6,[351,556,557],{"class":443},"\u003C\u002F",[351,559,448],{"class":447},[351,561,455],{"class":443},[351,563,565],{"class":353,"line":564},7,[351,566,526],{"emptyLinePlaceholder":525},[351,568,570,572,575],{"class":353,"line":569},8,[351,571,444],{"class":443},[351,573,574],{"class":447},"template",[351,576,455],{"class":443},[351,578,580,583,586,589,591,594,597,599,602,604,606,609,611],{"class":353,"line":579},9,[351,581,582],{"class":443},"  \u003C",[351,584,585],{"class":447},"SliderRoot",[351,587,588],{"class":451}," v-model",[351,590,538],{"class":443},[351,592,593],{"class":443},"\"",[351,595,596],{"class":360},"value",[351,598,593],{"class":443},[351,600,601],{"class":451}," :max",[351,603,538],{"class":443},[351,605,593],{"class":443},[351,607,608],{"class":360},"100",[351,610,593],{"class":443},[351,612,455],{"class":443},[351,614,616,619,622],{"class":353,"line":615},10,[351,617,618],{"class":443},"    \u003C",[351,620,621],{"class":447},"SliderTrack",[351,623,455],{"class":443},[351,625,627,630,633],{"class":353,"line":626},11,[351,628,629],{"class":443},"      \u003C",[351,631,632],{"class":447},"SliderRange",[351,634,635],{"class":443}," \u002F>\n",[351,637,639,642,644],{"class":353,"line":638},12,[351,640,641],{"class":443},"    \u003C\u002F",[351,643,621],{"class":447},[351,645,455],{"class":443},[351,647,649,651,654],{"class":353,"line":648},13,[351,650,618],{"class":443},[351,652,653],{"class":447},"SliderThumb",[351,655,635],{"class":443},[351,657,659,662,664],{"class":353,"line":658},14,[351,660,661],{"class":443},"  \u003C\u002F",[351,663,585],{"class":447},[351,665,455],{"class":443},[351,667,669,671,673],{"class":353,"line":668},15,[351,670,557],{"class":443},[351,672,574],{"class":447},[351,674,455],{"class":443},[324,676,678,679],{"id":677},"add-styled-components-with-vyuikit","Add styled components with ",[334,680,36],{},[329,682,684],{"id":683},"install-both-packages","Install both packages",[338,686,687,704,719,734,751],{},[341,688,690],{"className":343,"code":689,"filename":345,"language":346,"meta":347,"style":347},"pnpm add @vyui\u002Fcore @vyui\u002Fkit\n",[334,691,692],{"__ignoreMap":347},[351,693,694,696,698,701],{"class":353,"line":354},[351,695,345],{"class":357},[351,697,361],{"class":360},[351,699,700],{"class":360}," @vyui\u002Fcore",[351,702,703],{"class":360}," @vyui\u002Fkit\n",[341,705,707],{"className":343,"code":706,"filename":368,"language":346,"meta":347,"style":347},"yarn add @vyui\u002Fcore @vyui\u002Fkit\n",[334,708,709],{"__ignoreMap":347},[351,710,711,713,715,717],{"class":353,"line":354},[351,712,368],{"class":357},[351,714,361],{"class":360},[351,716,700],{"class":360},[351,718,703],{"class":360},[341,720,722],{"className":343,"code":721,"filename":382,"language":346,"meta":347,"style":347},"bun add @vyui\u002Fcore @vyui\u002Fkit\n",[334,723,724],{"__ignoreMap":347},[351,725,726,728,730,732],{"class":353,"line":354},[351,727,382],{"class":357},[351,729,361],{"class":360},[351,731,700],{"class":360},[351,733,703],{"class":360},[341,735,737],{"className":343,"code":736,"filename":396,"language":346,"meta":347,"style":347},"deno add npm:@vyui\u002Fcore npm:@vyui\u002Fkit\n",[334,738,739],{"__ignoreMap":347},[351,740,741,743,745,748],{"class":353,"line":354},[351,742,396],{"class":357},[351,744,361],{"class":360},[351,746,747],{"class":360}," npm:@vyui\u002Fcore",[351,749,750],{"class":360}," npm:@vyui\u002Fkit\n",[341,752,754],{"className":343,"code":753,"filename":411,"language":346,"meta":347,"style":347},"npm install @vyui\u002Fcore @vyui\u002Fkit\n",[334,755,756],{"__ignoreMap":347},[351,757,758,760,762,764],{"class":353,"line":354},[351,759,411],{"class":357},[351,761,420],{"class":360},[351,763,700],{"class":360},[351,765,703],{"class":360},[428,767,768,770,771,773,774,777,778,780],{},[334,769,36],{}," depends on ",[334,772,31],{},", but it does not re-export the full core surface. Import styled ",[334,775,776],{},"Vy*"," components from kit, and import raw primitives or utilities directly from core unless the kit docs call out a specific ",[334,779,776],{}," convenience alias.",[329,782,784],{"id":783},"configure-tailwind","Configure Tailwind",[428,786,787,789,790,793,794,797,798,801,802,806],{},[334,788,36],{}," ships its styling as a Tailwind preset. Add it alongside the Lynx preset, and feed the kit ",[334,791,792],{},"ui-*"," state markers into the Lynx preset's ",[334,795,796],{},"uiVariants"," plugin — the class-based replacements for Lynx-incompatible ",[334,799,800],{},"data-[state]"," selectors. Without this step components render ",[803,804,805],"strong",{},"unstyled",".",[341,808,813],{"className":809,"code":810,"filename":811,"language":812,"meta":347,"style":347},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { Config } from 'tailwindcss'\nimport { createLynxPreset } from '@lynx-js\u002Ftailwind-preset'\nimport { createVyuiPreset, VYUI_UI_STATES } from '@vyui\u002Fkit\u002Ftailwind'\n\nconst lynxPreset = createLynxPreset({\n  lynxUIPlugins: {\n    uiVariants: {\n      prefixes: defaults => ({ ...defaults, ui: [...defaults.ui, ...VYUI_UI_STATES] }),\n    },\n  },\n})\n\nexport default {\n  \u002F\u002F Scan the kit + core component sources so their utility classes aren't purged.\n  content: [\n    '.\u002Fsrc\u002F**\u002F*.{vue,js,ts}',\n    '.\u002Fnode_modules\u002F@vyui\u002Fkit\u002Fdist\u002F**\u002F*.js',\n    '.\u002Fnode_modules\u002F@vyui\u002Fcore\u002Fdist\u002F**\u002F*.js',\n  ],\n  presets: [lynxPreset, createVyuiPreset()],\n} satisfies Config\n","tailwind.config.ts","ts",[334,814,815,838,858,883,887,903,914,923,985,990,995,1001,1005,1015,1021,1031,1045,1057,1069,1077,1097],{"__ignoreMap":347},[351,816,817,819,822,824,827,829,831,833,836],{"class":353,"line":354},[351,818,462],{"class":461},[351,820,821],{"class":461}," type",[351,823,465],{"class":443},[351,825,826],{"class":468}," Config",[351,828,488],{"class":443},[351,830,491],{"class":461},[351,832,494],{"class":443},[351,834,835],{"class":360},"tailwindcss",[351,837,499],{"class":443},[351,839,840,842,844,847,849,851,853,856],{"class":353,"line":458},[351,841,462],{"class":461},[351,843,465],{"class":443},[351,845,846],{"class":468}," createLynxPreset",[351,848,488],{"class":443},[351,850,491],{"class":461},[351,852,494],{"class":443},[351,854,855],{"class":360},"@lynx-js\u002Ftailwind-preset",[351,857,499],{"class":443},[351,859,860,862,864,867,869,872,874,876,878,881],{"class":353,"line":502},[351,861,462],{"class":461},[351,863,465],{"class":443},[351,865,866],{"class":468}," createVyuiPreset",[351,868,472],{"class":443},[351,870,871],{"class":468}," VYUI_UI_STATES",[351,873,488],{"class":443},[351,875,491],{"class":461},[351,877,494],{"class":443},[351,879,880],{"class":360},"@vyui\u002Fkit\u002Ftailwind",[351,882,499],{"class":443},[351,884,885],{"class":353,"line":522},[351,886,526],{"emptyLinePlaceholder":525},[351,888,889,891,894,896,898,900],{"class":353,"line":529},[351,890,532],{"class":451},[351,892,893],{"class":468}," lynxPreset ",[351,895,538],{"class":443},[351,897,846],{"class":541},[351,899,544],{"class":468},[351,901,902],{"class":443},"{\n",[351,904,905,908,911],{"class":353,"line":554},[351,906,907],{"class":447},"  lynxUIPlugins",[351,909,910],{"class":443},":",[351,912,913],{"class":443}," {\n",[351,915,916,919,921],{"class":353,"line":564},[351,917,918],{"class":447},"    uiVariants",[351,920,910],{"class":443},[351,922,913],{"class":443},[351,924,925,928,930,934,937,940,943,946,949,951,954,956,959,962,964,966,969,971,973,976,979,982],{"class":353,"line":569},[351,926,927],{"class":541},"      prefixes",[351,929,910],{"class":443},[351,931,933],{"class":932},"sHdIc"," defaults",[351,935,936],{"class":451}," =>",[351,938,939],{"class":468}," (",[351,941,942],{"class":443},"{",[351,944,945],{"class":443}," ...",[351,947,948],{"class":468},"defaults",[351,950,472],{"class":443},[351,952,953],{"class":447}," ui",[351,955,910],{"class":443},[351,957,958],{"class":468}," [",[351,960,961],{"class":443},"...",[351,963,948],{"class":468},[351,965,806],{"class":443},[351,967,968],{"class":468},"ui",[351,970,472],{"class":443},[351,972,945],{"class":443},[351,974,975],{"class":468},"VYUI_UI_STATES] ",[351,977,978],{"class":443},"}",[351,980,981],{"class":468},")",[351,983,984],{"class":443},",\n",[351,986,987],{"class":353,"line":579},[351,988,989],{"class":443},"    },\n",[351,991,992],{"class":353,"line":615},[351,993,994],{"class":443},"  },\n",[351,996,997,999],{"class":353,"line":626},[351,998,978],{"class":443},[351,1000,551],{"class":468},[351,1002,1003],{"class":353,"line":638},[351,1004,526],{"emptyLinePlaceholder":525},[351,1006,1007,1010,1013],{"class":353,"line":648},[351,1008,1009],{"class":461},"export",[351,1011,1012],{"class":461}," default",[351,1014,913],{"class":443},[351,1016,1017],{"class":353,"line":658},[351,1018,1020],{"class":1019},"sHwdD","  \u002F\u002F Scan the kit + core component sources so their utility classes aren't purged.\n",[351,1022,1023,1026,1028],{"class":353,"line":668},[351,1024,1025],{"class":447},"  content",[351,1027,910],{"class":443},[351,1029,1030],{"class":468}," [\n",[351,1032,1034,1037,1040,1043],{"class":353,"line":1033},16,[351,1035,1036],{"class":443},"    '",[351,1038,1039],{"class":360},".\u002Fsrc\u002F**\u002F*.{vue,js,ts}",[351,1041,1042],{"class":443},"'",[351,1044,984],{"class":443},[351,1046,1048,1050,1053,1055],{"class":353,"line":1047},17,[351,1049,1036],{"class":443},[351,1051,1052],{"class":360},".\u002Fnode_modules\u002F@vyui\u002Fkit\u002Fdist\u002F**\u002F*.js",[351,1054,1042],{"class":443},[351,1056,984],{"class":443},[351,1058,1060,1062,1065,1067],{"class":353,"line":1059},18,[351,1061,1036],{"class":443},[351,1063,1064],{"class":360},".\u002Fnode_modules\u002F@vyui\u002Fcore\u002Fdist\u002F**\u002F*.js",[351,1066,1042],{"class":443},[351,1068,984],{"class":443},[351,1070,1072,1075],{"class":353,"line":1071},19,[351,1073,1074],{"class":468},"  ]",[351,1076,984],{"class":443},[351,1078,1080,1083,1085,1088,1090,1092,1095],{"class":353,"line":1079},20,[351,1081,1082],{"class":447},"  presets",[351,1084,910],{"class":443},[351,1086,1087],{"class":468}," [lynxPreset",[351,1089,472],{"class":443},[351,1091,866],{"class":541},[351,1093,1094],{"class":468},"()]",[351,1096,984],{"class":443},[351,1098,1100,1102,1105],{"class":353,"line":1099},21,[351,1101,978],{"class":443},[351,1103,1104],{"class":461}," satisfies",[351,1106,1107],{"class":357}," Config\n",[329,1109,1111],{"id":1110},"import-the-theme-stylesheet","Import the theme stylesheet",[428,1113,1114,1117,1118,1121,1122,1125,1126,1129,1130,1133,1134,1138],{},[334,1115,1116],{},"@vyui\u002Fkit\u002Fstyle.css"," defines the default design tokens using Tailwind ",[334,1119,1120],{},"theme()"," calls, so pull it in ",[803,1123,1124],{},"through"," your Tailwind pipeline with a CSS ",[334,1127,1128],{},"@import"," — not a plain JS import. Put any ",[334,1131,1132],{},"--ui-color-*"," overrides ",[1135,1136,1137],"em",{},"after"," it.",[341,1140,1145],{"className":1141,"code":1142,"filename":1143,"language":1144,"meta":347,"style":347},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@tailwind base;\n@tailwind utilities;\n\n\u002F* @vyui\u002Fkit default theme tokens — overrides go below this line. *\u002F\n@import '@vyui\u002Fkit\u002Fstyle.css';\n","src\u002Findex.css","css",[334,1146,1147,1158,1167,1171,1176],{"__ignoreMap":347},[351,1148,1149,1152,1155],{"class":353,"line":354},[351,1150,1151],{"class":461},"@tailwind",[351,1153,1154],{"class":468}," base",[351,1156,1157],{"class":443},";\n",[351,1159,1160,1162,1165],{"class":353,"line":458},[351,1161,1151],{"class":461},[351,1163,1164],{"class":468}," utilities",[351,1166,1157],{"class":443},[351,1168,1169],{"class":353,"line":502},[351,1170,526],{"emptyLinePlaceholder":525},[351,1172,1173],{"class":353,"line":522},[351,1174,1175],{"class":1019},"\u002F* @vyui\u002Fkit default theme tokens — overrides go below this line. *\u002F\n",[351,1177,1178,1180,1182,1184,1186],{"class":353,"line":529},[351,1179,1128],{"class":461},[351,1181,494],{"class":443},[351,1183,1116],{"class":360},[351,1185,1042],{"class":443},[351,1187,1157],{"class":443},[329,1189,1191],{"id":1190},"register-vy-ui","Register Vy UI",[428,1193,1194,1195,1198,1199,1202,1203,1206],{},"Vy UI needs its theme config provided once at your app entry. On Vue-Lynx — the primary target — do this with ",[334,1196,1197],{},"provideVyUI"," and import components by name where you use them, so the bundler only pulls what you reference. Kit's defaults use ",[334,1200,1201],{},"lucide"," icons, so register that set up front, and install the ",[334,1204,1205],{},"Intl"," polyfill for Lynx's PrimJS engine.",[341,1208,1211],{"className":809,"code":1209,"filename":1210,"language":812,"meta":347,"style":347},"import { createApp } from 'vue-lynx'\nimport { installIntlPolyfill, registerIconSet } from '@vyui\u002Fcore'\nimport { provideVyUI } from '@vyui\u002Fkit'\nimport lucide from '@iconify-json\u002Flucide\u002Ficons.json'\nimport App from '.\u002FApp.vue'\nimport '.\u002Findex.css'\n\ninstallIntlPolyfill()\nregisterIconSet('lucide', lucide)\n\nconst app = createApp(App)\nprovideVyUI(app)\napp.mount()\n","src\u002Findex.ts",[334,1212,1213,1233,1257,1276,1293,1309,1320,1324,1332,1350,1354,1368,1375],{"__ignoreMap":347},[351,1214,1215,1217,1219,1222,1224,1226,1228,1231],{"class":353,"line":354},[351,1216,462],{"class":461},[351,1218,465],{"class":443},[351,1220,1221],{"class":468}," createApp",[351,1223,488],{"class":443},[351,1225,491],{"class":461},[351,1227,494],{"class":443},[351,1229,1230],{"class":360},"vue-lynx",[351,1232,499],{"class":443},[351,1234,1235,1237,1239,1242,1244,1247,1249,1251,1253,1255],{"class":353,"line":458},[351,1236,462],{"class":461},[351,1238,465],{"class":443},[351,1240,1241],{"class":468}," installIntlPolyfill",[351,1243,472],{"class":443},[351,1245,1246],{"class":468}," registerIconSet",[351,1248,488],{"class":443},[351,1250,491],{"class":461},[351,1252,494],{"class":443},[351,1254,31],{"class":360},[351,1256,499],{"class":443},[351,1258,1259,1261,1263,1266,1268,1270,1272,1274],{"class":353,"line":502},[351,1260,462],{"class":461},[351,1262,465],{"class":443},[351,1264,1265],{"class":468}," provideVyUI",[351,1267,488],{"class":443},[351,1269,491],{"class":461},[351,1271,494],{"class":443},[351,1273,36],{"class":360},[351,1275,499],{"class":443},[351,1277,1278,1280,1283,1286,1288,1291],{"class":353,"line":522},[351,1279,462],{"class":461},[351,1281,1282],{"class":468}," lucide ",[351,1284,1285],{"class":461},"from",[351,1287,494],{"class":443},[351,1289,1290],{"class":360},"@iconify-json\u002Flucide\u002Ficons.json",[351,1292,499],{"class":443},[351,1294,1295,1297,1300,1302,1304,1307],{"class":353,"line":529},[351,1296,462],{"class":461},[351,1298,1299],{"class":468}," App ",[351,1301,1285],{"class":461},[351,1303,494],{"class":443},[351,1305,1306],{"class":360},".\u002FApp.vue",[351,1308,499],{"class":443},[351,1310,1311,1313,1315,1318],{"class":353,"line":554},[351,1312,462],{"class":461},[351,1314,494],{"class":443},[351,1316,1317],{"class":360},".\u002Findex.css",[351,1319,499],{"class":443},[351,1321,1322],{"class":353,"line":564},[351,1323,526],{"emptyLinePlaceholder":525},[351,1325,1326,1329],{"class":353,"line":569},[351,1327,1328],{"class":541},"installIntlPolyfill",[351,1330,1331],{"class":468},"()\n",[351,1333,1334,1337,1339,1341,1343,1345,1347],{"class":353,"line":579},[351,1335,1336],{"class":541},"registerIconSet",[351,1338,544],{"class":468},[351,1340,1042],{"class":443},[351,1342,1201],{"class":360},[351,1344,1042],{"class":443},[351,1346,472],{"class":443},[351,1348,1349],{"class":468}," lucide)\n",[351,1351,1352],{"class":353,"line":615},[351,1353,526],{"emptyLinePlaceholder":525},[351,1355,1356,1358,1361,1363,1365],{"class":353,"line":626},[351,1357,532],{"class":451},[351,1359,1360],{"class":468}," app ",[351,1362,538],{"class":443},[351,1364,1221],{"class":541},[351,1366,1367],{"class":468},"(App)\n",[351,1369,1370,1372],{"class":353,"line":638},[351,1371,1197],{"class":541},[351,1373,1374],{"class":468},"(app)\n",[351,1376,1377,1380,1382,1385],{"class":353,"line":648},[351,1378,1379],{"class":468},"app",[351,1381,806],{"class":443},[351,1383,1384],{"class":541},"mount",[351,1386,1331],{"class":468},[428,1388,1389],{},"Then import components where you use them:",[341,1391,1394],{"className":433,"code":1392,"filename":1393,"language":436,"meta":347,"style":347},"\u003Cscript setup>\nimport { VyButton } from '@vyui\u002Fkit'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyButton>Tap me\u003C\u002FVyButton>\n\u003C\u002Ftemplate>\n","SomeScreen.vue",[334,1395,1396,1406,1425,1433,1437,1445,1464],{"__ignoreMap":347},[351,1397,1398,1400,1402,1404],{"class":353,"line":354},[351,1399,444],{"class":443},[351,1401,448],{"class":447},[351,1403,452],{"class":451},[351,1405,455],{"class":443},[351,1407,1408,1410,1412,1415,1417,1419,1421,1423],{"class":353,"line":458},[351,1409,462],{"class":461},[351,1411,465],{"class":443},[351,1413,1414],{"class":468}," VyButton",[351,1416,488],{"class":443},[351,1418,491],{"class":461},[351,1420,494],{"class":443},[351,1422,36],{"class":360},[351,1424,499],{"class":443},[351,1426,1427,1429,1431],{"class":353,"line":502},[351,1428,557],{"class":443},[351,1430,448],{"class":447},[351,1432,455],{"class":443},[351,1434,1435],{"class":353,"line":522},[351,1436,526],{"emptyLinePlaceholder":525},[351,1438,1439,1441,1443],{"class":353,"line":529},[351,1440,444],{"class":443},[351,1442,574],{"class":447},[351,1444,455],{"class":443},[351,1446,1447,1449,1452,1455,1458,1460,1462],{"class":353,"line":554},[351,1448,582],{"class":443},[351,1450,1451],{"class":447},"VyButton",[351,1453,1454],{"class":443},">",[351,1456,1457],{"class":468},"Tap me",[351,1459,557],{"class":443},[351,1461,1451],{"class":447},[351,1463,455],{"class":443},[351,1465,1466,1468,1470],{"class":353,"line":564},[351,1467,557],{"class":443},[351,1469,574],{"class":447},[351,1471,455],{"class":443},[1473,1474,1475],"tip",{},[428,1476,1477,1478,1481,1482,1485,1486,1488,1489,1492,1493,1496,1497,1500,1501,1503,1504,1506,1507,806],{},"On ",[803,1479,1480],{},"full Vue (web)"," you can instead call ",[334,1483,1484],{},"app.use(VyUI)",", which registers every ",[334,1487,776],{}," component globally so ",[334,1490,1491],{},"\u003CVyButton>"," works without an import — convenient, but it pulls the entire component set into your bundle. Vue-Lynx's ",[334,1494,1495],{},"createApp"," has no ",[334,1498,1499],{},"app.component",", so ",[334,1502,1484],{}," degrades to theme-only there (with a dev warning) — ",[334,1505,1197],{}," + named imports is the native path. Register just a subset globally with ",[334,1508,1509],{},"app.use(VyUI, { components: { VyButton } })",[324,1511,1513],{"id":1512},"runtime-modes","Runtime modes",[428,1515,1516,1518,1519,1521],{},[334,1517,36],{}," runs on any Vue-compatible runtime, but only some expose ",[334,1520,1499],{},". Pick the entry that matches yours:",[1523,1524,1525,1540],"table",{},[1526,1527,1528],"thead",{},[1529,1530,1531,1535,1538],"tr",{},[1532,1533,1534],"th",{},"Runtime",[1532,1536,1537],{},"Entry",[1532,1539,49],{},[1541,1542,1543,1562,1575],"tbody",{},[1529,1544,1545,1549,1554],{},[1546,1547,1548],"td",{},"Vue-Lynx \u002F minimal (native path)",[1546,1550,1551],{},[334,1552,1553],{},"provideVyUI(app, config)",[1546,1555,1556,939,1559,981],{},[803,1557,1558],{},"Local imports",[334,1560,1561],{},"import { VyButton } from '@vyui\u002Fkit'",[1529,1563,1564,1567,1572],{},[1546,1565,1566],{},"Full Vue (web)",[1546,1568,1569],{},[334,1570,1571],{},"app.use(VyUI, config)",[1546,1573,1574],{},"Registered globally",[1529,1576,1577,1580,1585],{},[1546,1578,1579],{},"Build (Tailwind)",[1546,1581,1582],{},[334,1583,1584],{},"createVyuiPreset(config)",[1546,1586,1587],{},"— (generates the class surface)",[428,1589,1590,1591,1496,1593,1500,1595,1503,1597,1599,1600,1603],{},"Vue-Lynx's ",[334,1592,1495],{},[334,1594,1499],{},[334,1596,1484],{},[334,1598,1197],{}," is the blessed native path. Runtime config ",[803,1601,1602],{},"selects"," from the classes Tailwind already emitted; it never creates styling.",[324,1605,1607,1608],{"id":1606},"single-source-config-with-definevyuiconfig","Single-source config with ",[334,1609,1610],{},"defineVyuiConfig",[428,1612,1613,1614,1617,1618,1621,1622,1625,1626,1628,1629,1632],{},"The color set is meaningful to ",[803,1615,1616],{},"both"," planes: the Tailwind preset must ",[1135,1619,1620],{},"generate"," the classes, and the runtime must ",[1135,1623,1624],{},"select"," the same set. Author it once with ",[334,1627,1610],{}," (from the light ",[334,1630,1631],{},"@vyui\u002Fkit\u002Fconfig"," entry — safe to import in a Tailwind config; it never pulls component code) and feed the result to both:",[341,1634,1637],{"className":809,"code":1635,"filename":1636,"language":812,"meta":347,"style":347},"import { defineVyuiConfig } from '@vyui\u002Fkit\u002Fconfig'\n\nexport default defineVyuiConfig({\n  theme: {\n    primary: 'orange',\n    gray: 'stone',\n    colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],\n  },\n  components: {\n    button: { slots: { base: 'rounded-xl' } },\n  },\n})\n","vyui.config.ts",[334,1638,1639,1658,1662,1674,1683,1699,1715,1781,1785,1794,1826,1830],{"__ignoreMap":347},[351,1640,1641,1643,1645,1648,1650,1652,1654,1656],{"class":353,"line":354},[351,1642,462],{"class":461},[351,1644,465],{"class":443},[351,1646,1647],{"class":468}," defineVyuiConfig",[351,1649,488],{"class":443},[351,1651,491],{"class":461},[351,1653,494],{"class":443},[351,1655,1631],{"class":360},[351,1657,499],{"class":443},[351,1659,1660],{"class":353,"line":458},[351,1661,526],{"emptyLinePlaceholder":525},[351,1663,1664,1666,1668,1670,1672],{"class":353,"line":502},[351,1665,1009],{"class":461},[351,1667,1012],{"class":461},[351,1669,1647],{"class":541},[351,1671,544],{"class":468},[351,1673,902],{"class":443},[351,1675,1676,1679,1681],{"class":353,"line":522},[351,1677,1678],{"class":447},"  theme",[351,1680,910],{"class":443},[351,1682,913],{"class":443},[351,1684,1685,1688,1690,1692,1695,1697],{"class":353,"line":529},[351,1686,1687],{"class":447},"    primary",[351,1689,910],{"class":443},[351,1691,494],{"class":443},[351,1693,1694],{"class":360},"orange",[351,1696,1042],{"class":443},[351,1698,984],{"class":443},[351,1700,1701,1704,1706,1708,1711,1713],{"class":353,"line":554},[351,1702,1703],{"class":447},"    gray",[351,1705,910],{"class":443},[351,1707,494],{"class":443},[351,1709,1710],{"class":360},"stone",[351,1712,1042],{"class":443},[351,1714,984],{"class":443},[351,1716,1717,1720,1722,1724,1726,1729,1731,1733,1735,1738,1740,1742,1744,1747,1749,1751,1753,1756,1758,1760,1762,1765,1767,1769,1771,1774,1776,1779],{"class":353,"line":564},[351,1718,1719],{"class":447},"    colors",[351,1721,910],{"class":443},[351,1723,958],{"class":468},[351,1725,1042],{"class":443},[351,1727,1728],{"class":360},"primary",[351,1730,1042],{"class":443},[351,1732,472],{"class":443},[351,1734,494],{"class":443},[351,1736,1737],{"class":360},"secondary",[351,1739,1042],{"class":443},[351,1741,472],{"class":443},[351,1743,494],{"class":443},[351,1745,1746],{"class":360},"success",[351,1748,1042],{"class":443},[351,1750,472],{"class":443},[351,1752,494],{"class":443},[351,1754,1755],{"class":360},"info",[351,1757,1042],{"class":443},[351,1759,472],{"class":443},[351,1761,494],{"class":443},[351,1763,1764],{"class":360},"warning",[351,1766,1042],{"class":443},[351,1768,472],{"class":443},[351,1770,494],{"class":443},[351,1772,1773],{"class":360},"error",[351,1775,1042],{"class":443},[351,1777,1778],{"class":468},"]",[351,1780,984],{"class":443},[351,1782,1783],{"class":353,"line":569},[351,1784,994],{"class":443},[351,1786,1787,1790,1792],{"class":353,"line":579},[351,1788,1789],{"class":447},"  components",[351,1791,910],{"class":443},[351,1793,913],{"class":443},[351,1795,1796,1799,1801,1803,1806,1808,1810,1812,1814,1816,1819,1821,1823],{"class":353,"line":615},[351,1797,1798],{"class":447},"    button",[351,1800,910],{"class":443},[351,1802,465],{"class":443},[351,1804,1805],{"class":447}," slots",[351,1807,910],{"class":443},[351,1809,465],{"class":443},[351,1811,1154],{"class":447},[351,1813,910],{"class":443},[351,1815,494],{"class":443},[351,1817,1818],{"class":360},"rounded-xl",[351,1820,1042],{"class":443},[351,1822,488],{"class":443},[351,1824,1825],{"class":443}," },\n",[351,1827,1828],{"class":353,"line":626},[351,1829,994],{"class":443},[351,1831,1832,1834],{"class":353,"line":638},[351,1833,978],{"class":443},[351,1835,551],{"class":468},[341,1837,1839],{"className":809,"code":1838,"filename":811,"language":812,"meta":347,"style":347},"import vyuiConfig from '.\u002Fvyui.config'\nimport { createVyuiPreset } from '@vyui\u002Fkit\u002Ftailwind'\n\nexport default {\n  presets: [lynxPreset, createVyuiPreset(vyuiConfig)],\n}\n",[334,1840,1841,1857,1875,1879,1887,1904],{"__ignoreMap":347},[351,1842,1843,1845,1848,1850,1852,1855],{"class":353,"line":354},[351,1844,462],{"class":461},[351,1846,1847],{"class":468}," vyuiConfig ",[351,1849,1285],{"class":461},[351,1851,494],{"class":443},[351,1853,1854],{"class":360},".\u002Fvyui.config",[351,1856,499],{"class":443},[351,1858,1859,1861,1863,1865,1867,1869,1871,1873],{"class":353,"line":458},[351,1860,462],{"class":461},[351,1862,465],{"class":443},[351,1864,866],{"class":468},[351,1866,488],{"class":443},[351,1868,491],{"class":461},[351,1870,494],{"class":443},[351,1872,880],{"class":360},[351,1874,499],{"class":443},[351,1876,1877],{"class":353,"line":502},[351,1878,526],{"emptyLinePlaceholder":525},[351,1880,1881,1883,1885],{"class":353,"line":522},[351,1882,1009],{"class":461},[351,1884,1012],{"class":461},[351,1886,913],{"class":443},[351,1888,1889,1891,1893,1895,1897,1899,1902],{"class":353,"line":529},[351,1890,1082],{"class":447},[351,1892,910],{"class":443},[351,1894,1087],{"class":468},[351,1896,472],{"class":443},[351,1898,866],{"class":541},[351,1900,1901],{"class":468},"(vyuiConfig)]",[351,1903,984],{"class":443},[351,1905,1906],{"class":353,"line":554},[351,1907,1908],{"class":443},"}\n",[341,1910,1912],{"className":809,"code":1911,"filename":1210,"language":812,"meta":347,"style":347},"import vyuiConfig from '.\u002Fvyui.config'\nimport { provideVyUI } from '@vyui\u002Fkit' \u002F\u002F or: app.use(VyUI, vyuiConfig) on web\n\nprovideVyUI(app, vyuiConfig)\n",[334,1913,1914,1928,1949,1953],{"__ignoreMap":347},[351,1915,1916,1918,1920,1922,1924,1926],{"class":353,"line":354},[351,1917,462],{"class":461},[351,1919,1847],{"class":468},[351,1921,1285],{"class":461},[351,1923,494],{"class":443},[351,1925,1854],{"class":360},[351,1927,499],{"class":443},[351,1929,1930,1932,1934,1936,1938,1940,1942,1944,1946],{"class":353,"line":458},[351,1931,462],{"class":461},[351,1933,465],{"class":443},[351,1935,1265],{"class":468},[351,1937,488],{"class":443},[351,1939,491],{"class":461},[351,1941,494],{"class":443},[351,1943,36],{"class":360},[351,1945,1042],{"class":443},[351,1947,1948],{"class":1019}," \u002F\u002F or: app.use(VyUI, vyuiConfig) on web\n",[351,1950,1951],{"class":353,"line":502},[351,1952,526],{"emptyLinePlaceholder":525},[351,1954,1955,1957,1960,1962],{"class":353,"line":522},[351,1956,1197],{"class":541},[351,1958,1959],{"class":468},"(app",[351,1961,472],{"class":443},[351,1963,1964],{"class":468}," vyuiConfig)\n",[329,1966,1968],{"id":1967},"mount-the-overlay-toast-hosts","Mount the overlay & toast hosts",[428,1970,1971,1974,1975,1974,1978,1981,1982,1985,1986,1989],{},[334,1972,1973],{},"VyModal",", ",[334,1976,1977],{},"VyDrawer",[334,1979,1980],{},"VyPopover"," and friends render into a portal host, and ",[334,1983,1984],{},"VyToast"," needs a toast provider — the plugin does ",[803,1987,1988],{},"not"," wire these up for you. Mount both once near the root:",[341,1991,1993],{"className":433,"code":1992,"filename":435,"language":436,"meta":347,"style":347},"\u003Cscript setup>\nimport { OverlayRoot, ToastProvider } from '@vyui\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CToastProvider>\n    \u003C!-- your app -->\n  \u003C\u002FToastProvider>\n  \u003C!-- Portal host for overlays; keep it a sibling at the app root. -->\n  \u003COverlayRoot \u002F>\n\u003C\u002Ftemplate>\n",[334,1994,1995,2005,2029,2037,2041,2049,2058,2063,2071,2076,2085],{"__ignoreMap":347},[351,1996,1997,1999,2001,2003],{"class":353,"line":354},[351,1998,444],{"class":443},[351,2000,448],{"class":447},[351,2002,452],{"class":451},[351,2004,455],{"class":443},[351,2006,2007,2009,2011,2014,2016,2019,2021,2023,2025,2027],{"class":353,"line":458},[351,2008,462],{"class":461},[351,2010,465],{"class":443},[351,2012,2013],{"class":468}," OverlayRoot",[351,2015,472],{"class":443},[351,2017,2018],{"class":468}," ToastProvider",[351,2020,488],{"class":443},[351,2022,491],{"class":461},[351,2024,494],{"class":443},[351,2026,31],{"class":360},[351,2028,499],{"class":443},[351,2030,2031,2033,2035],{"class":353,"line":502},[351,2032,557],{"class":443},[351,2034,448],{"class":447},[351,2036,455],{"class":443},[351,2038,2039],{"class":353,"line":522},[351,2040,526],{"emptyLinePlaceholder":525},[351,2042,2043,2045,2047],{"class":353,"line":529},[351,2044,444],{"class":443},[351,2046,574],{"class":447},[351,2048,455],{"class":443},[351,2050,2051,2053,2056],{"class":353,"line":554},[351,2052,582],{"class":443},[351,2054,2055],{"class":447},"ToastProvider",[351,2057,455],{"class":443},[351,2059,2060],{"class":353,"line":564},[351,2061,2062],{"class":1019},"    \u003C!-- your app -->\n",[351,2064,2065,2067,2069],{"class":353,"line":569},[351,2066,661],{"class":443},[351,2068,2055],{"class":447},[351,2070,455],{"class":443},[351,2072,2073],{"class":353,"line":579},[351,2074,2075],{"class":1019},"  \u003C!-- Portal host for overlays; keep it a sibling at the app root. -->\n",[351,2077,2078,2080,2083],{"class":353,"line":615},[351,2079,582],{"class":443},[351,2081,2082],{"class":447},"OverlayRoot",[351,2084,635],{"class":443},[351,2086,2087,2089,2091],{"class":353,"line":626},[351,2088,557],{"class":443},[351,2090,574],{"class":447},[351,2092,455],{"class":443},[329,2094,2096,2097,2099],{"id":2095},"use-a-vy-component","Use a ",[334,2098,776],{}," component",[341,2101,2103],{"className":433,"code":2102,"filename":435,"language":436,"meta":347,"style":347},"\u003Cscript setup>\nimport { VyButton, VySlider } from '@vyui\u002Fkit'\nimport { ref } from 'vue'\n\nconst value = ref(50)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVySlider v-model=\"value\" :max=\"100\" \u002F>\n  \u003CVyButton variant=\"solid\" color=\"primary\">Save\u003C\u002FVyButton>\n\u003C\u002Ftemplate>\n",[334,2104,2105,2115,2138,2156,2160,2176,2184,2188,2196,2225,2265],{"__ignoreMap":347},[351,2106,2107,2109,2111,2113],{"class":353,"line":354},[351,2108,444],{"class":443},[351,2110,448],{"class":447},[351,2112,452],{"class":451},[351,2114,455],{"class":443},[351,2116,2117,2119,2121,2123,2125,2128,2130,2132,2134,2136],{"class":353,"line":458},[351,2118,462],{"class":461},[351,2120,465],{"class":443},[351,2122,1414],{"class":468},[351,2124,472],{"class":443},[351,2126,2127],{"class":468}," VySlider",[351,2129,488],{"class":443},[351,2131,491],{"class":461},[351,2133,494],{"class":443},[351,2135,36],{"class":360},[351,2137,499],{"class":443},[351,2139,2140,2142,2144,2146,2148,2150,2152,2154],{"class":353,"line":502},[351,2141,462],{"class":461},[351,2143,465],{"class":443},[351,2145,509],{"class":468},[351,2147,488],{"class":443},[351,2149,491],{"class":461},[351,2151,494],{"class":443},[351,2153,436],{"class":360},[351,2155,499],{"class":443},[351,2157,2158],{"class":353,"line":522},[351,2159,526],{"emptyLinePlaceholder":525},[351,2161,2162,2164,2166,2168,2170,2172,2174],{"class":353,"line":529},[351,2163,532],{"class":451},[351,2165,535],{"class":468},[351,2167,538],{"class":443},[351,2169,509],{"class":541},[351,2171,544],{"class":468},[351,2173,548],{"class":547},[351,2175,551],{"class":468},[351,2177,2178,2180,2182],{"class":353,"line":554},[351,2179,557],{"class":443},[351,2181,448],{"class":447},[351,2183,455],{"class":443},[351,2185,2186],{"class":353,"line":564},[351,2187,526],{"emptyLinePlaceholder":525},[351,2189,2190,2192,2194],{"class":353,"line":569},[351,2191,444],{"class":443},[351,2193,574],{"class":447},[351,2195,455],{"class":443},[351,2197,2198,2200,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221,2223],{"class":353,"line":579},[351,2199,582],{"class":443},[351,2201,2202],{"class":447},"VySlider",[351,2204,588],{"class":451},[351,2206,538],{"class":443},[351,2208,593],{"class":443},[351,2210,596],{"class":360},[351,2212,593],{"class":443},[351,2214,601],{"class":451},[351,2216,538],{"class":443},[351,2218,593],{"class":443},[351,2220,608],{"class":360},[351,2222,593],{"class":443},[351,2224,635],{"class":443},[351,2226,2227,2229,2231,2234,2236,2238,2241,2243,2246,2248,2250,2252,2254,2256,2259,2261,2263],{"class":353,"line":615},[351,2228,582],{"class":443},[351,2230,1451],{"class":447},[351,2232,2233],{"class":451}," variant",[351,2235,538],{"class":443},[351,2237,593],{"class":443},[351,2239,2240],{"class":360},"solid",[351,2242,593],{"class":443},[351,2244,2245],{"class":451}," color",[351,2247,538],{"class":443},[351,2249,593],{"class":443},[351,2251,1728],{"class":360},[351,2253,593],{"class":443},[351,2255,1454],{"class":443},[351,2257,2258],{"class":468},"Save",[351,2260,557],{"class":443},[351,2262,1451],{"class":447},[351,2264,455],{"class":443},[351,2266,2267,2269,2271],{"class":353,"line":626},[351,2268,557],{"class":443},[351,2270,574],{"class":447},[351,2272,455],{"class":443},[319,2274,2276],{"id":2275},"options","Options",[428,2278,2279],{},"Kit ships sensible defaults — you only need to reach for these when you want to override theme tokens, swap a primary color, or change a component's default variant.",[324,2281,2282],{"id":2282},"theme",[428,2284,2285,2286,2289,2290,2292,2293,2295],{},"Pass component overrides under ",[334,2287,2288],{},"ui.\u003Ccomponent>"," to deep-merge them into the default Tailwind Variants theme. Every ",[334,2291,776],{}," component reads from this — no rebuild required. Like Nuxt UI, everything lives under the single ",[334,2294,968],{}," namespace.",[341,2297,2299],{"className":809,"code":2298,"filename":1210,"language":812,"meta":347,"style":347},"createApp(App).use(VyUI, {\n  ui: {\n    button: {\n      defaultVariants: { color: 'primary' },\n    },\n  },\n})\n",[334,2300,2301,2320,2329,2337,2358,2362,2366],{"__ignoreMap":347},[351,2302,2303,2305,2308,2310,2313,2316,2318],{"class":353,"line":354},[351,2304,1495],{"class":541},[351,2306,2307],{"class":468},"(App)",[351,2309,806],{"class":443},[351,2311,2312],{"class":541},"use",[351,2314,2315],{"class":468},"(VyUI",[351,2317,472],{"class":443},[351,2319,913],{"class":443},[351,2321,2322,2325,2327],{"class":353,"line":458},[351,2323,2324],{"class":447},"  ui",[351,2326,910],{"class":443},[351,2328,913],{"class":443},[351,2330,2331,2333,2335],{"class":353,"line":502},[351,2332,1798],{"class":447},[351,2334,910],{"class":443},[351,2336,913],{"class":443},[351,2338,2339,2342,2344,2346,2348,2350,2352,2354,2356],{"class":353,"line":522},[351,2340,2341],{"class":447},"      defaultVariants",[351,2343,910],{"class":443},[351,2345,465],{"class":443},[351,2347,2245],{"class":447},[351,2349,910],{"class":443},[351,2351,494],{"class":443},[351,2353,1728],{"class":360},[351,2355,1042],{"class":443},[351,2357,1825],{"class":443},[351,2359,2360],{"class":353,"line":529},[351,2361,989],{"class":443},[351,2363,2364],{"class":353,"line":554},[351,2365,994],{"class":443},[351,2367,2368,2370],{"class":353,"line":564},[351,2369,978],{"class":443},[351,2371,551],{"class":468},[324,2373,2374],{"id":2374},"colors",[428,2376,2377,2378,1974,2380,1974,2382,1974,2384,1974,2386,1974,2388,1974,2390,2393,2394,2397],{},"Override the semantic color slots (",[334,2379,1728],{},[334,2381,1737],{},[334,2383,1746],{},[334,2385,1755],{},[334,2387,1764],{},[334,2389,1773],{},[334,2391,2392],{},"neutral",") by redefining the ",[334,2395,2396],{},"--ui-color-{semantic}-{shade}"," CSS variables in your own stylesheet.",[341,2399,2402],{"className":1141,"code":2400,"filename":2401,"language":1144,"meta":347,"style":347},":root {\n  --ui-color-primary-500: #6366f1;\n  --ui-color-primary-600: #4f46e5;\n}\n","src\u002Fapp.css",[334,2403,2404,2413,2428,2442],{"__ignoreMap":347},[351,2405,2406,2408,2411],{"class":353,"line":354},[351,2407,910],{"class":443},[351,2409,2410],{"class":451},"root",[351,2412,913],{"class":443},[351,2414,2415,2418,2420,2423,2426],{"class":353,"line":458},[351,2416,2417],{"class":468},"  --ui-color-primary-500",[351,2419,910],{"class":443},[351,2421,2422],{"class":443}," #",[351,2424,2425],{"class":468},"6366f1",[351,2427,1157],{"class":443},[351,2429,2430,2433,2435,2437,2440],{"class":353,"line":502},[351,2431,2432],{"class":468},"  --ui-color-primary-600",[351,2434,910],{"class":443},[351,2436,2422],{"class":443},[351,2438,2439],{"class":468},"4f46e5",[351,2441,1157],{"class":443},[351,2443,2444],{"class":353,"line":522},[351,2445,1908],{"class":443},[329,2447,2449],{"id":2448},"adding-a-custom-color","Adding a custom color",[428,2451,2452,2453,1974,2455,1974,2457,1974,2459,1974,2461,1974,2463,2465,2466,2468,2469,2472],{},"The configurable color set (",[334,2454,1728],{},[334,2456,1737],{},[334,2458,1746],{},[334,2460,1755],{},[334,2462,1764],{},[334,2464,1773],{}," — ",[334,2467,2392],{}," is always appended) is extensible. Declare the extra color ",[803,2470,2471],{},"once"," in your shared config so the build (which generates the classes) and the runtime (which selects them) can't drift:",[341,2474,2476],{"className":809,"code":2475,"filename":1636,"language":812,"meta":347,"style":347},"import { defineVyuiConfig } from '@vyui\u002Fkit\u002Fconfig'\nimport { COLORS } from '@vyui\u002Fkit\u002Ftailwind'\n\nexport default defineVyuiConfig({\n  theme: { colors: [...COLORS, 'tertiary'] },\n})\n",[334,2477,2478,2496,2515,2519,2531,2566],{"__ignoreMap":347},[351,2479,2480,2482,2484,2486,2488,2490,2492,2494],{"class":353,"line":354},[351,2481,462],{"class":461},[351,2483,465],{"class":443},[351,2485,1647],{"class":468},[351,2487,488],{"class":443},[351,2489,491],{"class":461},[351,2491,494],{"class":443},[351,2493,1631],{"class":360},[351,2495,499],{"class":443},[351,2497,2498,2500,2502,2505,2507,2509,2511,2513],{"class":353,"line":458},[351,2499,462],{"class":461},[351,2501,465],{"class":443},[351,2503,2504],{"class":468}," COLORS",[351,2506,488],{"class":443},[351,2508,491],{"class":461},[351,2510,494],{"class":443},[351,2512,880],{"class":360},[351,2514,499],{"class":443},[351,2516,2517],{"class":353,"line":502},[351,2518,526],{"emptyLinePlaceholder":525},[351,2520,2521,2523,2525,2527,2529],{"class":353,"line":522},[351,2522,1009],{"class":461},[351,2524,1012],{"class":461},[351,2526,1647],{"class":541},[351,2528,544],{"class":468},[351,2530,902],{"class":443},[351,2532,2533,2535,2537,2539,2542,2544,2546,2548,2551,2553,2555,2558,2560,2563],{"class":353,"line":529},[351,2534,1678],{"class":447},[351,2536,910],{"class":443},[351,2538,465],{"class":443},[351,2540,2541],{"class":447}," colors",[351,2543,910],{"class":443},[351,2545,958],{"class":468},[351,2547,961],{"class":443},[351,2549,2550],{"class":468},"COLORS",[351,2552,472],{"class":443},[351,2554,494],{"class":443},[351,2556,2557],{"class":360},"tertiary",[351,2559,1042],{"class":443},[351,2561,2562],{"class":468},"] ",[351,2564,2565],{"class":443},"},\n",[351,2567,2568,2570],{"class":353,"line":554},[351,2569,978],{"class":443},[351,2571,551],{"class":468},[428,2573,2574,2575,2578,2579,2582,2583,2586,2587,2589,2590,2592,2593,2596],{},"Pass that same object to ",[334,2576,2577],{},"createVyuiPreset(vyuiConfig)"," and ",[334,2580,2581],{},"provideVyUI(app, vyuiConfig)"," as shown above. ",[334,2584,2585],{},"createVyuiPreset"," dev-warns if you list a color it can't back with a ",[334,2588,1132],{}," var, so a \"class resolves to nothing\" mistake surfaces at build time. To also type-check ",[334,2591,2557],{}," on every component's ",[334,2594,2595],{},"color"," prop:",[341,2598,2601],{"className":809,"code":2599,"filename":2600,"language":812,"meta":347,"style":347},"declare module '@vyui\u002Fkit' {\n  interface VyuiColorRegistry { tertiary: true }\n}\n","vyui-colors.d.ts",[334,2602,2603,2619,2640],{"__ignoreMap":347},[351,2604,2605,2608,2611,2613,2615,2617],{"class":353,"line":354},[351,2606,2607],{"class":451},"declare",[351,2609,2610],{"class":451}," module",[351,2612,494],{"class":443},[351,2614,36],{"class":360},[351,2616,1042],{"class":443},[351,2618,913],{"class":443},[351,2620,2621,2624,2627,2629,2632,2634,2637],{"class":353,"line":458},[351,2622,2623],{"class":451},"  interface",[351,2625,2626],{"class":357}," VyuiColorRegistry",[351,2628,465],{"class":443},[351,2630,2631],{"class":447}," tertiary",[351,2633,910],{"class":443},[351,2635,2636],{"class":357}," true",[351,2638,2639],{"class":443}," }\n",[351,2641,2642],{"class":353,"line":502},[351,2643,1908],{"class":443},[428,2645,2646,2647,2650,2651,2654,2655,2658,2659,2666],{},"Then add the ",[334,2648,2649],{},"--ui-color-tertiary-{50..950}"," CSS-var block (the ",[334,2652,2653],{},".d.ts"," + CSS can be generated with ",[334,2656,2657],{},"node node_modules\u002F@vyui\u002Fkit\u002Fscripts\u002Fgen-colors.mjs --colors tertiary=indigo","). See the ",[2660,2661,2665],"a",{"href":2662,"rel":2663},"https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Ftree\u002Fmain\u002Fpackages\u002Fkit#adding-a-custom-color",[2664],"nofollow","@vyui\u002Fkit README"," for the full flow.",[2668,2669,2670],"callout",{"icon":47,"to":43},[428,2671,2672],{},"Prefer copying component source into your app? Use the Vy UI CLI to initialize a registry-backed setup and add individual components.",[2674,2675,2676],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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":347,"searchDepth":354,"depth":458,"links":2678},[2679,2687],{"id":321,"depth":458,"text":322,"children":2680},[2681,2682,2684,2685],{"id":326,"depth":502,"text":327},{"id":677,"depth":502,"text":2683},"Add styled components with @vyui\u002Fkit",{"id":1512,"depth":502,"text":1513},{"id":1606,"depth":502,"text":2686},"Single-source config with defineVyuiConfig",{"id":2275,"depth":458,"text":2276,"children":2688},[2689,2690],{"id":2282,"depth":502,"text":2282},{"id":2374,"depth":502,"text":2374},"Install @vyui\u002Fcore and @vyui\u002Fkit into a Vue-Lynx app.","md",{},{"icon":17},{"title":14,"description":2691},"Tl7ikx67kaL-YjAeTdYK8BXnWt8tGWCAK9lZtAz_5Wg",[2698,2700],{"title":10,"path":6,"stem":7,"description":2699,"icon":-1,"children":-1,"navigation":-1},"What Vy UI is, how the two-layer architecture works, and why Vue-Lynx needs its own component library.",{"title":19,"path":20,"stem":21,"description":2701,"icon":-1,"children":-1,"navigation":-1},"Bring your own icon set via Iconify.",1783464066601]