[{"data":1,"prerenderedAt":1638},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-inputs":273,"-colorffy-ui-components-inputs-surround":1633},[4,21,115],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,268],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,204,209,214,218,223,228,233,238,243,248,253,258,263],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F09.card","i-lucide-square",{"title":181,"path":182,"stem":183,"icon":184},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F10.datatable","i-lucide-table",{"title":186,"path":187,"stem":188,"icon":189},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F11.empty","i-lucide-inbox",{"title":191,"path":192,"stem":193,"icon":194},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F12.icons","i-lucide-shapes",{"title":196,"path":197,"stem":198,"icon":199},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F13.inputs","i-lucide-text-cursor-input",{"title":79,"path":201,"stem":202,"icon":203},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F14.layout","i-lucide-layout",{"title":205,"path":206,"stem":207,"icon":208},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F15.list","i-lucide-list",{"title":210,"path":211,"stem":212,"icon":213},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F16.loading","i-lucide-loader-circle",{"title":215,"path":216,"stem":217,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F17.modal",{"title":219,"path":220,"stem":221,"icon":222},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F18.navbar","i-lucide-panel-top",{"title":224,"path":225,"stem":226,"icon":227},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F19.navigation-bar","i-lucide-navigation",{"title":229,"path":230,"stem":231,"icon":232},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F20.popover","i-lucide-message-square",{"title":234,"path":235,"stem":236,"icon":237},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F21.popover-menu","i-lucide-ellipsis",{"title":239,"path":240,"stem":241,"icon":242},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F22.progress","i-lucide-loader",{"title":244,"path":245,"stem":246,"icon":247},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F23.segmented-controls","i-lucide-toggle-left",{"title":249,"path":250,"stem":251,"icon":252},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F24.sidebar","i-lucide-panel-left",{"title":254,"path":255,"stem":256,"icon":257},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F25.skeleton","i-lucide-square-dashed",{"title":259,"path":260,"stem":261,"icon":262},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F26.tabs","i-lucide-panels-top-left",{"title":264,"path":265,"stem":266,"icon":267},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F27.tooltip","i-lucide-message-circle",{"title":269,"path":270,"stem":271,"icon":272},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"id":274,"title":196,"body":275,"description":1626,"extension":1627,"links":1628,"meta":1629,"navigation":1630,"path":197,"seo":1631,"stem":198,"__hash__":1632},"docs\u002F3.colorffy-ui\u002F2.components\u002F13.inputs.md",{"type":276,"value":277,"toc":1618},"minimark",[278,316,321,570,574,588,853,857,1011,1015,1036,1241,1245,1394,1398,1601,1614],[279,280,281,282,286,287,286,290,286,293,286,296,286,299,286,302,286,305,286,308,311,312,315],"p",{},"All Colorffy form inputs share a common base — ",[283,284,285],"code",{},"label",", ",[283,288,289],{},"placeholder",[283,291,292],{},"disabled",[283,294,295],{},"required",[283,297,298],{},"readonly",[283,300,301],{},"errorMessages",[283,303,304],{},"variant",[283,306,307],{},"size",[283,309,310],{},"hideLabel"," — and bind with ",[283,313,314],{},"v-model",".",[317,318,320],"h2",{"id":319},"text-and-textarea","Text and textarea",[322,323,328],"pre",{"className":324,"code":325,"language":326,"meta":327,"style":327},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst name = ref('')\nconst bio = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiInputText v-model=\"name\" label=\"Name\" placeholder=\"Jane Doe\" required \u002F>\n  \u003CUiInputTextarea v-model=\"bio\" label=\"Bio\" :rows=\"4\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[283,329,330,365,393,400,423,441,451,456,466,517,561],{"__ignoreMap":327},[331,332,335,339,343,347,350,353,356,360,362],"span",{"class":333,"line":334},"line",1,[331,336,338],{"class":337},"sMK4o","\u003C",[331,340,342],{"class":341},"swJcz","script",[331,344,346],{"class":345},"spNyl"," setup",[331,348,349],{"class":345}," lang",[331,351,352],{"class":337},"=",[331,354,355],{"class":337},"\"",[331,357,359],{"class":358},"sfazB","ts",[331,361,355],{"class":337},[331,363,364],{"class":337},">\n",[331,366,368,372,375,379,382,385,388,390],{"class":333,"line":367},2,[331,369,371],{"class":370},"s7zQu","import",[331,373,374],{"class":337}," {",[331,376,378],{"class":377},"sTEyZ"," ref",[331,380,381],{"class":337}," }",[331,383,384],{"class":370}," from",[331,386,387],{"class":337}," '",[331,389,326],{"class":358},[331,391,392],{"class":337},"'\n",[331,394,396],{"class":333,"line":395},3,[331,397,399],{"emptyLinePlaceholder":398},true,"\n",[331,401,403,406,409,411,414,417,420],{"class":333,"line":402},4,[331,404,405],{"class":345},"const",[331,407,408],{"class":377}," name ",[331,410,352],{"class":337},[331,412,378],{"class":413},"s2Zo4",[331,415,416],{"class":377},"(",[331,418,419],{"class":337},"''",[331,421,422],{"class":377},")\n",[331,424,426,428,431,433,435,437,439],{"class":333,"line":425},5,[331,427,405],{"class":345},[331,429,430],{"class":377}," bio ",[331,432,352],{"class":337},[331,434,378],{"class":413},[331,436,416],{"class":377},[331,438,419],{"class":337},[331,440,422],{"class":377},[331,442,444,447,449],{"class":333,"line":443},6,[331,445,446],{"class":337},"\u003C\u002F",[331,448,342],{"class":341},[331,450,364],{"class":337},[331,452,454],{"class":333,"line":453},7,[331,455,399],{"emptyLinePlaceholder":398},[331,457,459,461,464],{"class":333,"line":458},8,[331,460,338],{"class":337},[331,462,463],{"class":341},"template",[331,465,364],{"class":337},[331,467,469,472,475,478,480,482,485,487,490,492,494,497,499,502,504,506,509,511,514],{"class":333,"line":468},9,[331,470,471],{"class":337},"  \u003C",[331,473,474],{"class":341},"UiInputText",[331,476,477],{"class":345}," v-model",[331,479,352],{"class":337},[331,481,355],{"class":337},[331,483,484],{"class":358},"name",[331,486,355],{"class":337},[331,488,489],{"class":345}," label",[331,491,352],{"class":337},[331,493,355],{"class":337},[331,495,496],{"class":358},"Name",[331,498,355],{"class":337},[331,500,501],{"class":345}," placeholder",[331,503,352],{"class":337},[331,505,355],{"class":337},[331,507,508],{"class":358},"Jane Doe",[331,510,355],{"class":337},[331,512,513],{"class":345}," required",[331,515,516],{"class":337}," \u002F>\n",[331,518,520,522,525,527,529,531,534,536,538,540,542,545,547,550,552,554,557,559],{"class":333,"line":519},10,[331,521,471],{"class":337},[331,523,524],{"class":341},"UiInputTextarea",[331,526,477],{"class":345},[331,528,352],{"class":337},[331,530,355],{"class":337},[331,532,533],{"class":358},"bio",[331,535,355],{"class":337},[331,537,489],{"class":345},[331,539,352],{"class":337},[331,541,355],{"class":337},[331,543,544],{"class":358},"Bio",[331,546,355],{"class":337},[331,548,549],{"class":345}," :rows",[331,551,352],{"class":337},[331,553,355],{"class":337},[331,555,556],{"class":358},"4",[331,558,355],{"class":337},[331,560,516],{"class":337},[331,562,564,566,568],{"class":333,"line":563},11,[331,565,446],{"class":337},[331,567,463],{"class":341},[331,569,364],{"class":337},[317,571,573],{"id":572},"select","Select",[279,575,576,579,580,583,584,587],{},[283,577,578],{},"options"," accepts an array; map labels \u002F values with ",[283,581,582],{},"optionLabel"," \u002F ",[283,585,586],{},"optionValue",":",[322,589,591],{"className":324,"code":590,"language":326,"meta":327,"style":327},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst role = ref(null)\nconst options = [\n  { name: 'Admin', value: 'admin' },\n  { name: 'User', value: 'user' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiInputSelect\n    v-model=\"role\"\n    :options=\"options\"\n    option-label=\"name\"\n    option-value=\"value\"\n    label=\"Role\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[283,592,593,613,631,635,653,665,701,731,736,744,748,756,764,780,794,808,823,838,844],{"__ignoreMap":327},[331,594,595,597,599,601,603,605,607,609,611],{"class":333,"line":334},[331,596,338],{"class":337},[331,598,342],{"class":341},[331,600,346],{"class":345},[331,602,349],{"class":345},[331,604,352],{"class":337},[331,606,355],{"class":337},[331,608,359],{"class":358},[331,610,355],{"class":337},[331,612,364],{"class":337},[331,614,615,617,619,621,623,625,627,629],{"class":333,"line":367},[331,616,371],{"class":370},[331,618,374],{"class":337},[331,620,378],{"class":377},[331,622,381],{"class":337},[331,624,384],{"class":370},[331,626,387],{"class":337},[331,628,326],{"class":358},[331,630,392],{"class":337},[331,632,633],{"class":333,"line":395},[331,634,399],{"emptyLinePlaceholder":398},[331,636,637,639,642,644,646,648,651],{"class":333,"line":402},[331,638,405],{"class":345},[331,640,641],{"class":377}," role ",[331,643,352],{"class":337},[331,645,378],{"class":413},[331,647,416],{"class":377},[331,649,650],{"class":337},"null",[331,652,422],{"class":377},[331,654,655,657,660,662],{"class":333,"line":425},[331,656,405],{"class":345},[331,658,659],{"class":377}," options ",[331,661,352],{"class":337},[331,663,664],{"class":377}," [\n",[331,666,667,670,673,675,677,680,683,686,689,691,693,696,698],{"class":333,"line":443},[331,668,669],{"class":337},"  {",[331,671,672],{"class":341}," name",[331,674,587],{"class":337},[331,676,387],{"class":337},[331,678,679],{"class":358},"Admin",[331,681,682],{"class":337},"'",[331,684,685],{"class":337},",",[331,687,688],{"class":341}," value",[331,690,587],{"class":337},[331,692,387],{"class":337},[331,694,695],{"class":358},"admin",[331,697,682],{"class":337},[331,699,700],{"class":337}," },\n",[331,702,703,705,707,709,711,714,716,718,720,722,724,727,729],{"class":333,"line":453},[331,704,669],{"class":337},[331,706,672],{"class":341},[331,708,587],{"class":337},[331,710,387],{"class":337},[331,712,713],{"class":358},"User",[331,715,682],{"class":337},[331,717,685],{"class":337},[331,719,688],{"class":341},[331,721,587],{"class":337},[331,723,387],{"class":337},[331,725,726],{"class":358},"user",[331,728,682],{"class":337},[331,730,700],{"class":337},[331,732,733],{"class":333,"line":458},[331,734,735],{"class":377},"]\n",[331,737,738,740,742],{"class":333,"line":468},[331,739,446],{"class":337},[331,741,342],{"class":341},[331,743,364],{"class":337},[331,745,746],{"class":333,"line":519},[331,747,399],{"emptyLinePlaceholder":398},[331,749,750,752,754],{"class":333,"line":563},[331,751,338],{"class":337},[331,753,463],{"class":341},[331,755,364],{"class":337},[331,757,759,761],{"class":333,"line":758},12,[331,760,471],{"class":337},[331,762,763],{"class":341},"UiInputSelect\n",[331,765,767,770,772,774,777],{"class":333,"line":766},13,[331,768,769],{"class":345},"    v-model",[331,771,352],{"class":337},[331,773,355],{"class":337},[331,775,776],{"class":358},"role",[331,778,779],{"class":337},"\"\n",[331,781,783,786,788,790,792],{"class":333,"line":782},14,[331,784,785],{"class":345},"    :options",[331,787,352],{"class":337},[331,789,355],{"class":337},[331,791,578],{"class":358},[331,793,779],{"class":337},[331,795,797,800,802,804,806],{"class":333,"line":796},15,[331,798,799],{"class":345},"    option-label",[331,801,352],{"class":337},[331,803,355],{"class":337},[331,805,484],{"class":358},[331,807,779],{"class":337},[331,809,811,814,816,818,821],{"class":333,"line":810},16,[331,812,813],{"class":345},"    option-value",[331,815,352],{"class":337},[331,817,355],{"class":337},[331,819,820],{"class":358},"value",[331,822,779],{"class":337},[331,824,826,829,831,833,836],{"class":333,"line":825},17,[331,827,828],{"class":345},"    label",[331,830,352],{"class":337},[331,832,355],{"class":337},[331,834,835],{"class":358},"Role",[331,837,779],{"class":337},[331,839,841],{"class":333,"line":840},18,[331,842,843],{"class":337},"  \u002F>\n",[331,845,847,849,851],{"class":333,"line":846},19,[331,848,446],{"class":337},[331,850,463],{"class":341},[331,852,364],{"class":337},[317,854,856],{"id":855},"checkbox-switch-and-radio","Checkbox, switch, and radio",[322,858,860],{"className":324,"code":859,"language":326,"meta":327,"style":327},"\u003Ctemplate>\n  \u003CUiInputCheck v-model=\"agree\" label=\"I agree to the terms\" required \u002F>\n  \u003CUiInputCheck v-model=\"dark\" label=\"Dark mode\" variant=\"switch\" \u002F>\n  \u003CUiInputRadio v-model=\"plan\" :options=\"plans\" option-label=\"name\" option-value=\"id\" inline \u002F>\n\u003C\u002Ftemplate>\n",[283,861,862,870,903,945,1003],{"__ignoreMap":327},[331,863,864,866,868],{"class":333,"line":334},[331,865,338],{"class":337},[331,867,463],{"class":341},[331,869,364],{"class":337},[331,871,872,874,877,879,881,883,886,888,890,892,894,897,899,901],{"class":333,"line":367},[331,873,471],{"class":337},[331,875,876],{"class":341},"UiInputCheck",[331,878,477],{"class":345},[331,880,352],{"class":337},[331,882,355],{"class":337},[331,884,885],{"class":358},"agree",[331,887,355],{"class":337},[331,889,489],{"class":345},[331,891,352],{"class":337},[331,893,355],{"class":337},[331,895,896],{"class":358},"I agree to the terms",[331,898,355],{"class":337},[331,900,513],{"class":345},[331,902,516],{"class":337},[331,904,905,907,909,911,913,915,918,920,922,924,926,929,931,934,936,938,941,943],{"class":333,"line":395},[331,906,471],{"class":337},[331,908,876],{"class":341},[331,910,477],{"class":345},[331,912,352],{"class":337},[331,914,355],{"class":337},[331,916,917],{"class":358},"dark",[331,919,355],{"class":337},[331,921,489],{"class":345},[331,923,352],{"class":337},[331,925,355],{"class":337},[331,927,928],{"class":358},"Dark mode",[331,930,355],{"class":337},[331,932,933],{"class":345}," variant",[331,935,352],{"class":337},[331,937,355],{"class":337},[331,939,940],{"class":358},"switch",[331,942,355],{"class":337},[331,944,516],{"class":337},[331,946,947,949,952,954,956,958,961,963,966,968,970,973,975,978,980,982,984,986,989,991,993,996,998,1001],{"class":333,"line":402},[331,948,471],{"class":337},[331,950,951],{"class":341},"UiInputRadio",[331,953,477],{"class":345},[331,955,352],{"class":337},[331,957,355],{"class":337},[331,959,960],{"class":358},"plan",[331,962,355],{"class":337},[331,964,965],{"class":345}," :options",[331,967,352],{"class":337},[331,969,355],{"class":337},[331,971,972],{"class":358},"plans",[331,974,355],{"class":337},[331,976,977],{"class":345}," option-label",[331,979,352],{"class":337},[331,981,355],{"class":337},[331,983,484],{"class":358},[331,985,355],{"class":337},[331,987,988],{"class":345}," option-value",[331,990,352],{"class":337},[331,992,355],{"class":337},[331,994,995],{"class":358},"id",[331,997,355],{"class":337},[331,999,1000],{"class":345}," inline",[331,1002,516],{"class":337},[331,1004,1005,1007,1009],{"class":333,"line":425},[331,1006,446],{"class":337},[331,1008,463],{"class":341},[331,1010,364],{"class":337},[317,1012,1014],{"id":1013},"range-file-color-and-phone","Range, file, color, and phone",[279,1016,1017,1020,1021,1024,1025,1028,1029,1032,1033,587],{},[283,1018,1019],{},"UiInputColorPicker"," emits ",[283,1022,1023],{},"onUpdate"," (not ",[283,1026,1027],{},"update:modelValue","), so bind it with ",[283,1030,1031],{},":model-value"," + ",[283,1034,1035],{},"@on-update",[322,1037,1039],{"className":324,"code":1038,"language":326,"meta":327,"style":327},"\u003Ctemplate>\n  \u003CUiInputRange v-model=\"volume\" :min=\"0\" :max=\"100\" :step=\"5\" label=\"Volume\" \u002F>\n  \u003CUiInputFile v-model=\"file\" label=\"Upload\" input-label=\"Choose a file\" \u002F>\n  \u003CUiInputPhoneNumber v-model=\"phone\" label=\"Phone\" \u002F>\n  \u003CUiInputColorPicker :model-value=\"color\" label=\"Brand color\" @on-update=\"color = $event\" \u002F>\n\u003C\u002Ftemplate>\n",[283,1040,1041,1049,1116,1159,1190,1233],{"__ignoreMap":327},[331,1042,1043,1045,1047],{"class":333,"line":334},[331,1044,338],{"class":337},[331,1046,463],{"class":341},[331,1048,364],{"class":337},[331,1050,1051,1053,1056,1058,1060,1062,1065,1067,1070,1072,1074,1077,1079,1082,1084,1086,1089,1091,1094,1096,1098,1101,1103,1105,1107,1109,1112,1114],{"class":333,"line":367},[331,1052,471],{"class":337},[331,1054,1055],{"class":341},"UiInputRange",[331,1057,477],{"class":345},[331,1059,352],{"class":337},[331,1061,355],{"class":337},[331,1063,1064],{"class":358},"volume",[331,1066,355],{"class":337},[331,1068,1069],{"class":345}," :min",[331,1071,352],{"class":337},[331,1073,355],{"class":337},[331,1075,1076],{"class":358},"0",[331,1078,355],{"class":337},[331,1080,1081],{"class":345}," :max",[331,1083,352],{"class":337},[331,1085,355],{"class":337},[331,1087,1088],{"class":358},"100",[331,1090,355],{"class":337},[331,1092,1093],{"class":345}," :step",[331,1095,352],{"class":337},[331,1097,355],{"class":337},[331,1099,1100],{"class":358},"5",[331,1102,355],{"class":337},[331,1104,489],{"class":345},[331,1106,352],{"class":337},[331,1108,355],{"class":337},[331,1110,1111],{"class":358},"Volume",[331,1113,355],{"class":337},[331,1115,516],{"class":337},[331,1117,1118,1120,1123,1125,1127,1129,1132,1134,1136,1138,1140,1143,1145,1148,1150,1152,1155,1157],{"class":333,"line":395},[331,1119,471],{"class":337},[331,1121,1122],{"class":341},"UiInputFile",[331,1124,477],{"class":345},[331,1126,352],{"class":337},[331,1128,355],{"class":337},[331,1130,1131],{"class":358},"file",[331,1133,355],{"class":337},[331,1135,489],{"class":345},[331,1137,352],{"class":337},[331,1139,355],{"class":337},[331,1141,1142],{"class":358},"Upload",[331,1144,355],{"class":337},[331,1146,1147],{"class":345}," input-label",[331,1149,352],{"class":337},[331,1151,355],{"class":337},[331,1153,1154],{"class":358},"Choose a file",[331,1156,355],{"class":337},[331,1158,516],{"class":337},[331,1160,1161,1163,1166,1168,1170,1172,1175,1177,1179,1181,1183,1186,1188],{"class":333,"line":402},[331,1162,471],{"class":337},[331,1164,1165],{"class":341},"UiInputPhoneNumber",[331,1167,477],{"class":345},[331,1169,352],{"class":337},[331,1171,355],{"class":337},[331,1173,1174],{"class":358},"phone",[331,1176,355],{"class":337},[331,1178,489],{"class":345},[331,1180,352],{"class":337},[331,1182,355],{"class":337},[331,1184,1185],{"class":358},"Phone",[331,1187,355],{"class":337},[331,1189,516],{"class":337},[331,1191,1192,1194,1196,1199,1201,1203,1206,1208,1210,1212,1214,1217,1219,1222,1224,1226,1229,1231],{"class":333,"line":425},[331,1193,471],{"class":337},[331,1195,1019],{"class":341},[331,1197,1198],{"class":345}," :model-value",[331,1200,352],{"class":337},[331,1202,355],{"class":337},[331,1204,1205],{"class":358},"color",[331,1207,355],{"class":337},[331,1209,489],{"class":345},[331,1211,352],{"class":337},[331,1213,355],{"class":337},[331,1215,1216],{"class":358},"Brand color",[331,1218,355],{"class":337},[331,1220,1221],{"class":345}," @on-update",[331,1223,352],{"class":337},[331,1225,355],{"class":337},[331,1227,1228],{"class":358},"color = $event",[331,1230,355],{"class":337},[331,1232,516],{"class":337},[331,1234,1235,1237,1239],{"class":333,"line":443},[331,1236,446],{"class":337},[331,1238,463],{"class":341},[331,1240,364],{"class":337},[317,1242,1244],{"id":1243},"shared-base-props","Shared base props",[1246,1247,1248,1267],"table",{},[1249,1250,1251],"thead",{},[1252,1253,1254,1258,1261,1264],"tr",{},[1255,1256,1257],"th",{},"Prop",[1255,1259,1260],{},"Type",[1255,1262,1263],{},"Default",[1255,1265,1266],{},"Description",[1268,1269,1270,1288,1303,1319,1335,1351,1377],"tbody",{},[1252,1271,1272,1277,1282,1285],{},[1273,1274,1275],"td",{},[283,1276,285],{},[1273,1278,1279],{},[283,1280,1281],{},"string | null",[1273,1283,1284],{},"—",[1273,1286,1287],{},"Field label.",[1252,1289,1290,1294,1298,1300],{},[1273,1291,1292],{},[283,1293,289],{},[1273,1295,1296],{},[283,1297,1281],{},[1273,1299,1284],{},[1273,1301,1302],{},"Placeholder text.",[1252,1304,1305,1309,1314,1316],{},[1273,1306,1307],{},[283,1308,301],{},[1273,1310,1311],{},[283,1312,1313],{},"string[]",[1273,1315,1284],{},[1273,1317,1318],{},"Validation messages shown below the field.",[1252,1320,1321,1325,1330,1332],{},[1273,1322,1323],{},[283,1324,304],{},[1273,1326,1327],{},[283,1328,1329],{},"'filled' | 'outline' | 'transparent' | null",[1273,1331,1284],{},[1273,1333,1334],{},"Visual style.",[1252,1336,1337,1341,1346,1348],{},[1273,1338,1339],{},[283,1340,307],{},[1273,1342,1343],{},[283,1344,1345],{},"'sm' | 'lg' | null",[1273,1347,1284],{},[1273,1349,1350],{},"Field size.",[1252,1352,1353,1364,1369,1374],{},[1273,1354,1355,583,1357,583,1359,583,1361],{},[283,1356,292],{},[283,1358,295],{},[283,1360,298],{},[283,1362,1363],{},"rounded",[1273,1365,1366],{},[283,1367,1368],{},"boolean",[1273,1370,1371],{},[283,1372,1373],{},"false",[1273,1375,1376],{},"Field states.",[1252,1378,1379,1383,1387,1391],{},[1273,1380,1381],{},[283,1382,310],{},[1273,1384,1385],{},[283,1386,1368],{},[1273,1388,1389],{},[283,1390,1373],{},[1273,1392,1393],{},"Visually hide the label.",[317,1395,1397],{"id":1396},"per-input-highlights","Per-input highlights",[1246,1399,1400,1415],{},[1249,1401,1402],{},[1252,1403,1404,1407,1410],{},[1255,1405,1406],{},"Component",[1255,1408,1409],{},"Notable props",[1255,1411,1412,1414],{},[283,1413,314],{}," type",[1268,1416,1417,1445,1466,1486,1507,1526,1545,1564,1585],{},[1252,1418,1419,1423,1440],{},[1273,1420,1421],{},[283,1422,474],{},[1273,1424,1425,286,1428,286,1431,286,1434,286,1437],{},[283,1426,1427],{},"type",[283,1429,1430],{},"maxlength",[283,1432,1433],{},"min",[283,1435,1436],{},"max",[283,1438,1439],{},"autofocus",[1273,1441,1442],{},[283,1443,1444],{},"string | number | null",[1252,1446,1447,1451,1462],{},[1273,1448,1449],{},[283,1450,524],{},[1273,1452,1453,286,1456,286,1459],{},[283,1454,1455],{},"rows",[283,1457,1458],{},"cols",[283,1460,1461],{},"resize",[1273,1463,1464],{},[283,1465,1281],{},[1252,1467,1468,1473,1481],{},[1273,1469,1470],{},[283,1471,1472],{},"UiInputSelect",[1273,1474,1475,286,1477,286,1479],{},[283,1476,578],{},[283,1478,582],{},[283,1480,586],{},[1273,1482,1483],{},[283,1484,1485],{},"string | number | object | null",[1252,1487,1488,1492,1503],{},[1273,1489,1490],{},[283,1491,951],{},[1273,1493,1494,286,1496,286,1498,286,1500],{},[283,1495,578],{},[283,1497,582],{},[283,1499,586],{},[283,1501,1502],{},"inline",[1273,1504,1505],{},[283,1506,1444],{},[1252,1508,1509,1513,1522],{},[1273,1510,1511],{},[283,1512,1055],{},[1273,1514,1515,286,1517,286,1519],{},[283,1516,1433],{},[283,1518,1436],{},[283,1520,1521],{},"step",[1273,1523,1524],{},[283,1525,1444],{},[1252,1527,1528,1532,1540],{},[1273,1529,1530],{},[283,1531,876],{},[1273,1533,1534,286,1537,1539],{},[283,1535,1536],{},"variant: 'switch'",[283,1538,285],{}," (required)",[1273,1541,1542],{},[283,1543,1544],{},"string | boolean | null",[1252,1546,1547,1551,1559],{},[1273,1548,1549],{},[283,1550,1122],{},[1273,1552,1553,286,1556],{},[283,1554,1555],{},"inputLabel",[283,1557,1558],{},"large",[1273,1560,1561],{},[283,1562,1563],{},"File | null",[1252,1565,1566,1570,1581],{},[1273,1567,1568],{},[283,1569,1019],{},[1273,1571,1572,286,1575,1577,1578,1580],{},[283,1573,1574],{},"maxLength",[283,1576,310],{}," (",[283,1579,1035],{},")",[1273,1582,1583],{},[283,1584,1281],{},[1252,1586,1587,1591,1597],{},[1273,1588,1589],{},[283,1590,1165],{},[1273,1592,1593,286,1595],{},[283,1594,1430],{},[283,1596,1439],{},[1273,1598,1599],{},[283,1600,1281],{},[1602,1603,1604,1605,1607,1608,1610,1611,1613],"note",{},"Most inputs emit both ",[283,1606,1027],{}," (for ",[283,1609,314],{},") and an ",[283,1612,1023],{}," convenience event with the same payload.",[1615,1616,1617],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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);}",{"title":327,"searchDepth":367,"depth":367,"links":1619},[1620,1621,1622,1623,1624,1625],{"id":319,"depth":367,"text":320},{"id":572,"depth":367,"text":573},{"id":855,"depth":367,"text":856},{"id":1013,"depth":367,"text":1014},{"id":1243,"depth":367,"text":1244},{"id":1396,"depth":367,"text":1397},"Collect user input with text, select, checkbox, radio, range, file, and color inputs.","md",null,{},{"icon":199},{"title":196,"description":1626},"IdzIobdObvXfifDtJSpX80g-LLIwA4B1ugQUQos2A9U",[1634,1636],{"title":191,"path":192,"stem":193,"description":1635,"icon":194,"children":-1},"Render Material Symbols, decorative shapes, tool glyphs, and brand logos.",{"title":79,"path":201,"stem":202,"description":1637,"icon":203,"children":-1},"Structure pages with header and pane content containers.",1782196219260]