[{"data":1,"prerenderedAt":1137},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Finput":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Finput":1132},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":62,"badge":48,"body":189,"description":1127,"extension":1128,"meta":1129,"navigation":369,"path":63,"seo":1130,"status":13,"stem":64,"__hash__":1131},"docs\u002Fdocs\u002F2.components\u002F07.input.md",{"type":190,"value":191,"toc":1115},"minimark",[192,201,224,264,268,298,302,507,511,514,561,565,575,581,652,656,677,682,751,755,762,767,804,808,817,821,928,932,935,1017,1038,1042,1055,1058,1080,1086,1090,1106,1111],[193,194,197],"playground",{"caption":195,"name":196},"Click into the field, type, then click away.","input",[198,199],"demo-input",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,212,220,223],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The fields on this page are the real ",[209,218,219],{},"GoopInput",[209,221,222],{},"GoopTextarea",", and the code below is exactly what you write.",[206,225,226,228,229,232,233,236,237,240,241,232,244,232,247,232,250,232,253,256,257,260,261,263],{},[209,227,219],{}," is shadcn-vue's Input: the same classes, ",[209,230,231],{},"v-model",", ",[209,234,235],{},"class"," merge, and ",[209,238,239],{},"aria-invalid"," styling. Every attribute you set (",[209,242,243],{},"type",[209,245,246],{},"placeholder",[209,248,249],{},"id",[209,251,252],{},"name",[209,254,255],{},"disabled",", ...) goes to the real ",[209,258,259],{},"\u003Cinput>",". The goo is a ring drawn on a layer in a wrapper around it, so the field itself is never filtered. ",[209,262,222],{}," is the same for shadcn's Textarea.",[265,266,15],"h2",{"id":267},"installation",[206,269,270,271,273,274,276,277,282,283,212,285,287,288,232,291,232,294,297],{},"Install ",[209,272,215],{}," or ",[209,275,211],{}," as shown on the ",[278,279,281],"a",{"href":280},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports ",[209,284,219],{},[209,286,222],{},". They use the same shadcn tokens as the plain Input (",[209,289,290],{},"--input",[209,292,293],{},"--ring",[209,295,296],{},"--destructive",").",[265,299,301],{"id":300},"usage","Usage",[303,304,309],"pre",{"className":305,"code":306,"language":307,"meta":308,"style":308},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\nimport { GoopInput } from '@goopui\u002Fvue'\n\nconst email = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel for=\"email\" class=\"text-sm font-medium\">Email\u003C\u002Flabel>\n  \u003CGoopInput id=\"email\" v-model=\"email\" type=\"email\" placeholder=\"you@example.com\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[209,310,311,341,348,364,371,396,406,411,421,453,498],{"__ignoreMap":308},[312,313,316,320,324,328,331,334,338],"span",{"class":314,"line":315},"line",1,[312,317,319],{"class":318},"sVt8B","\u003C",[312,321,323],{"class":322},"s9eBZ","script",[312,325,327],{"class":326},"sScJk"," setup",[312,329,330],{"class":326}," lang",[312,332,333],{"class":318},"=",[312,335,337],{"class":336},"sZZnC","\"ts\"",[312,339,340],{"class":318},">\n",[312,342,344],{"class":314,"line":343},2,[312,345,347],{"class":346},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[312,349,351,355,358,361],{"class":314,"line":350},3,[312,352,354],{"class":353},"szBVR","import",[312,356,357],{"class":318}," { GoopInput } ",[312,359,360],{"class":353},"from",[312,362,363],{"class":336}," '@goopui\u002Fvue'\n",[312,365,367],{"class":314,"line":366},4,[312,368,370],{"emptyLinePlaceholder":369},true,"\n",[312,372,374,377,381,384,387,390,393],{"class":314,"line":373},5,[312,375,376],{"class":353},"const",[312,378,380],{"class":379},"sj4cs"," email",[312,382,383],{"class":353}," =",[312,385,386],{"class":326}," ref",[312,388,389],{"class":318},"(",[312,391,392],{"class":336},"''",[312,394,395],{"class":318},")\n",[312,397,399,402,404],{"class":314,"line":398},6,[312,400,401],{"class":318},"\u003C\u002F",[312,403,323],{"class":322},[312,405,340],{"class":318},[312,407,409],{"class":314,"line":408},7,[312,410,370],{"emptyLinePlaceholder":369},[312,412,414,416,419],{"class":314,"line":413},8,[312,415,319],{"class":318},[312,417,418],{"class":322},"template",[312,420,340],{"class":318},[312,422,424,427,430,433,435,438,441,443,446,449,451],{"class":314,"line":423},9,[312,425,426],{"class":318},"  \u003C",[312,428,429],{"class":322},"label",[312,431,432],{"class":326}," for",[312,434,333],{"class":318},[312,436,437],{"class":336},"\"email\"",[312,439,440],{"class":326}," class",[312,442,333],{"class":318},[312,444,445],{"class":336},"\"text-sm font-medium\"",[312,447,448],{"class":318},">Email\u003C\u002F",[312,450,429],{"class":322},[312,452,340],{"class":318},[312,454,456,458,460,463,465,467,470,472,475,478,480,483,485,487,490,492,495],{"class":314,"line":455},10,[312,457,426],{"class":318},[312,459,219],{"class":322},[312,461,462],{"class":326}," id",[312,464,333],{"class":318},[312,466,437],{"class":336},[312,468,469],{"class":326}," v-model",[312,471,333],{"class":318},[312,473,474],{"class":336},"\"",[312,476,477],{"class":318},"email",[312,479,474],{"class":336},[312,481,482],{"class":326}," type",[312,484,333],{"class":318},[312,486,437],{"class":336},[312,488,489],{"class":326}," placeholder",[312,491,333],{"class":318},[312,493,494],{"class":336},"\"you@example.com\"",[312,496,497],{"class":318}," \u002F>\n",[312,499,501,503,505],{"class":314,"line":500},11,[312,502,401],{"class":318},[312,504,418],{"class":322},[312,506,340],{"class":318},[265,508,510],{"id":509},"what-it-does","What it does",[206,512,513],{},"The ring replaces shadcn's flat focus ring. Each part is an effect you can turn off:",[515,516,517,525,531,537,543,549,555],"ul",{},[518,519,520,524],"li",{},[521,522,523],"strong",{},"flow."," On focus, a dollop of goo lands where you clicked (the left edge for keyboard focus) and two bulbous fronts race around the border both ways.",[518,526,527,530],{},[521,528,529],{},"close."," Where the fronts meet, the ring closes with a wobble.",[518,532,533,536],{},[521,534,535],{},"wobble."," While the field is focused, the closed ring wobbles gently.",[518,538,539,542],{},[521,540,541],{},"ripple."," Each edit sends a small ripple along the ring from the point nearest the caret.",[518,544,545,548],{},[521,546,547],{},"drain."," On blur, the ring drains away, top first.",[518,550,551,554],{},[521,552,553],{},"drip."," On an invalid field, a small drip hangs off the bottom of the ring.",[518,556,557,560],{},[521,558,559],{},"drips."," Off by default. Small drips hang under the ring while it shows.",[265,562,564],{"id":563},"invalid","Invalid",[206,566,567,568,570,571,574],{},"Set ",[209,569,239],{}," and the ring shows even when the field isn't focused, in the destructive color, with a small drip hanging off the bottom edge (",[209,572,573],{},"drip","). The ring follows the attribute, so it turns on and off with your validation.",[576,577,579],"preview",{":controls":578},"false",[198,580],{"set":563},[303,582,584],{"className":305,"code":583,"language":307,"meta":308,"style":308},"\u003CGoopInput v-model=\"email\" type=\"email\" aria-invalid=\"true\" aria-describedby=\"email-error\" \u002F>\n\u003Cp id=\"email-error\" class=\"text-sm text-destructive\">Enter a valid email address.\u003C\u002Fp>\n",[209,585,586,626],{"__ignoreMap":308},[312,587,588,590,592,594,596,598,600,602,604,606,608,611,613,616,619,621,624],{"class":314,"line":315},[312,589,319],{"class":318},[312,591,219],{"class":322},[312,593,469],{"class":326},[312,595,333],{"class":318},[312,597,474],{"class":336},[312,599,477],{"class":318},[312,601,474],{"class":336},[312,603,482],{"class":326},[312,605,333],{"class":318},[312,607,437],{"class":336},[312,609,610],{"class":326}," aria-invalid",[312,612,333],{"class":318},[312,614,615],{"class":336},"\"true\"",[312,617,618],{"class":326}," aria-describedby",[312,620,333],{"class":318},[312,622,623],{"class":336},"\"email-error\"",[312,625,497],{"class":318},[312,627,628,630,632,634,636,638,640,642,645,648,650],{"class":314,"line":343},[312,629,319],{"class":318},[312,631,206],{"class":322},[312,633,462],{"class":326},[312,635,333],{"class":318},[312,637,623],{"class":336},[312,639,440],{"class":326},[312,641,333],{"class":318},[312,643,644],{"class":336},"\"text-sm text-destructive\"",[312,646,647],{"class":318},">Enter a valid email address.\u003C\u002F",[312,649,206],{"class":322},[312,651,340],{"class":318},[265,653,655],{"id":654},"effects-and-presets","Effects and presets",[206,657,658,659,661,662,665,666,232,669,672,673,676],{},"Every effect is a prop. ",[209,660,578],{}," turns it off, ",[209,663,664],{},"true"," uses the preset's strength, and a number scales it. ",[209,667,668],{},"preset",[209,670,671],{},"speed",", and ",[209,674,675],{},"renderer"," set the base.",[576,678,679],{":controls":578},[198,680],{"set":681},"effects",[303,683,685],{"className":305,"code":684,"language":307,"meta":308,"style":308},"\u003CGoopInput drips \u002F>\n\u003CGoopInput preset=\"wild\" \u002F>\n\u003CGoopInput preset=\"subtle\" \u002F>\n\u003CGoopInput :flow=\"false\" \u002F>\n",[209,686,687,698,714,729],{"__ignoreMap":308},[312,688,689,691,693,696],{"class":314,"line":315},[312,690,319],{"class":318},[312,692,219],{"class":322},[312,694,695],{"class":326}," drips",[312,697,497],{"class":318},[312,699,700,702,704,707,709,712],{"class":314,"line":343},[312,701,319],{"class":318},[312,703,219],{"class":322},[312,705,706],{"class":326}," preset",[312,708,333],{"class":318},[312,710,711],{"class":336},"\"wild\"",[312,713,497],{"class":318},[312,715,716,718,720,722,724,727],{"class":314,"line":350},[312,717,319],{"class":318},[312,719,219],{"class":322},[312,721,706],{"class":326},[312,723,333],{"class":318},[312,725,726],{"class":336},"\"subtle\"",[312,728,497],{"class":318},[312,730,731,733,735,738,741,743,745,747,749],{"class":314,"line":366},[312,732,319],{"class":318},[312,734,219],{"class":322},[312,736,737],{"class":318}," :",[312,739,740],{"class":326},"flow",[312,742,333],{"class":318},[312,744,474],{"class":336},[312,746,578],{"class":379},[312,748,474],{"class":336},[312,750,497],{"class":318},[265,752,754],{"id":753},"disabled-and-goo-off","Disabled and goo off",[206,756,757,758,761],{},"A disabled field is shadcn's: dimmed, and it can't be focused, so the ring never shows. ",[209,759,760],{},":goo=\"false\""," renders a plain shadcn Input with no wrapper.",[576,763,764],{":controls":578},[198,765],{"set":766},"states",[303,768,770],{"className":305,"code":769,"language":307,"meta":308,"style":308},"\u003CGoopInput disabled \u002F>\n\u003CGoopInput :goo=\"false\" \u002F>\n",[209,771,772,783],{"__ignoreMap":308},[312,773,774,776,778,781],{"class":314,"line":315},[312,775,319],{"class":318},[312,777,219],{"class":322},[312,779,780],{"class":326}," disabled",[312,782,497],{"class":318},[312,784,785,787,789,791,794,796,798,800,802],{"class":314,"line":343},[312,786,319],{"class":318},[312,788,219],{"class":322},[312,790,737],{"class":318},[312,792,793],{"class":326},"goo",[312,795,333],{"class":318},[312,797,474],{"class":336},[312,799,578],{"class":379},[312,801,474],{"class":336},[312,803,497],{"class":318},[265,805,807],{"id":806},"textarea","Textarea",[206,809,810,812,813,816],{},[209,811,222],{}," has the same ring and the same props. The ring follows the textarea as it grows (shadcn's ",[209,814,815],{},"field-sizing-content","), and typing ripples the edge nearest the caret's line.",[576,818,819],{":controls":578},[198,820],{"set":806},[303,822,824],{"className":305,"code":823,"language":307,"meta":308,"style":308},"\u003Cscript setup lang=\"ts\">\nimport { GoopTextarea } from '@goopui\u002Fvue'\n\nconst bio = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopTextarea v-model=\"bio\" placeholder=\"Tell us a little about yourself.\" \u002F>\n\u003C\u002Ftemplate>\n",[209,825,826,842,853,857,874,882,886,894,920],{"__ignoreMap":308},[312,827,828,830,832,834,836,838,840],{"class":314,"line":315},[312,829,319],{"class":318},[312,831,323],{"class":322},[312,833,327],{"class":326},[312,835,330],{"class":326},[312,837,333],{"class":318},[312,839,337],{"class":336},[312,841,340],{"class":318},[312,843,844,846,849,851],{"class":314,"line":343},[312,845,354],{"class":353},[312,847,848],{"class":318}," { GoopTextarea } ",[312,850,360],{"class":353},[312,852,363],{"class":336},[312,854,855],{"class":314,"line":350},[312,856,370],{"emptyLinePlaceholder":369},[312,858,859,861,864,866,868,870,872],{"class":314,"line":366},[312,860,376],{"class":353},[312,862,863],{"class":379}," bio",[312,865,383],{"class":353},[312,867,386],{"class":326},[312,869,389],{"class":318},[312,871,392],{"class":336},[312,873,395],{"class":318},[312,875,876,878,880],{"class":314,"line":373},[312,877,401],{"class":318},[312,879,323],{"class":322},[312,881,340],{"class":318},[312,883,884],{"class":314,"line":398},[312,885,370],{"emptyLinePlaceholder":369},[312,887,888,890,892],{"class":314,"line":408},[312,889,319],{"class":318},[312,891,418],{"class":322},[312,893,340],{"class":318},[312,895,896,898,900,902,904,906,909,911,913,915,918],{"class":314,"line":413},[312,897,426],{"class":318},[312,899,222],{"class":322},[312,901,469],{"class":326},[312,903,333],{"class":318},[312,905,474],{"class":336},[312,907,908],{"class":318},"bio",[312,910,474],{"class":336},[312,912,489],{"class":326},[312,914,333],{"class":318},[312,916,917],{"class":336},"\"Tell us a little about yourself.\"",[312,919,497],{"class":318},[312,921,922,924,926],{"class":314,"line":423},[312,923,401],{"class":318},[312,925,418],{"class":322},[312,927,340],{"class":318},[265,929,931],{"id":930},"colors","Colors",[206,933,934],{},"The ring reads these CSS variables. Override them on the field's wrapper or an ancestor:",[936,937,938,954],"table",{},[939,940,941],"thead",{},[942,943,944,948,951],"tr",{},[945,946,947],"th",{},"Variable",[945,949,950],{},"Default",[945,952,953],{},"What it colors",[955,956,957,973,988,1003],"tbody",{},[942,958,959,965,970],{},[960,961,962],"td",{},[209,963,964],{},"--goop-input-color",[960,966,967],{},[209,968,969],{},"var(--ring)",[960,971,972],{},"The focus ring.",[942,974,975,980,985],{},[960,976,977],{},[209,978,979],{},"--goop-input-opacity",[960,981,982],{},[209,983,984],{},"0.5",[960,986,987],{},"The focus ring's opacity.",[942,989,990,995,1000],{},[960,991,992],{},[209,993,994],{},"--goop-input-invalid-color",[960,996,997],{},[209,998,999],{},"var(--destructive)",[960,1001,1002],{},"The ring and drip of an invalid field.",[942,1004,1005,1010,1014],{},[960,1006,1007],{},[209,1008,1009],{},"--goop-input-invalid-opacity",[960,1011,1012],{},[209,1013,984],{},[960,1015,1016],{},"Their opacity.",[303,1018,1020],{"className":305,"code":1019,"language":307,"meta":308,"style":308},"\u003CGoopInput container-class=\"[--goop-input-color:var(--color-emerald-500)]\" \u002F>\n",[209,1021,1022],{"__ignoreMap":308},[312,1023,1024,1026,1028,1031,1033,1036],{"class":314,"line":315},[312,1025,319],{"class":318},[312,1027,219],{"class":322},[312,1029,1030],{"class":326}," container-class",[312,1032,333],{"class":318},[312,1034,1035],{"class":336},"\"[--goop-input-color:var(--color-emerald-500)]\"",[312,1037,497],{"class":318},[265,1039,1041],{"id":1040},"props","Props",[206,1043,1044,212,1046,1048,1049,273,1051,1054],{},[209,1045,219],{},[209,1047,222],{}," keep the shadcn-vue API and take the same props. Every other attribute goes to the ",[209,1050,259],{},[209,1052,1053],{},"\u003Ctextarea>",".",[1056,1057],"component-props",{"name":196},[206,1059,1060,1061,1064,1065,1068,1069,1071,1072,1075,1076,273,1078,297],{},"Both expose ",[209,1062,1063],{},"handle"," (the live goo handle, ",[209,1066,1067],{},"null"," before mount or with ",[209,1070,793],{}," off) and ",[209,1073,1074],{},"el"," (the ",[209,1077,259],{},[209,1079,1053],{},[206,1081,1082,1083,1085],{},"Before it mounts, during SSR, and with ",[209,1084,760],{},", the field looks exactly like shadcn's, so first paint and hydration match.",[265,1087,1089],{"id":1088},"accessibility","Accessibility",[206,1091,1092,1093,273,1095,1097,1098,1101,1102,1105],{},"It's a real ",[209,1094,259],{},[209,1096,1053],{},": labels, ",[209,1099,1100],{},"aria-*",", autofill, and form submission work as usual. The goo layer is ",[209,1103,1104],{},"aria-hidden"," and can't be clicked, and the field is never filtered. With the goo attached, shadcn's focus ring steps aside for the goo ring, which shows on every focus, keyboard included.",[206,1107,1108,1109,1054],{},"Under reduced motion the ring is a static closed band: it appears on focus and goes away on blur, with no flow, ripple, wobble, or drain. Invalid fields keep their ring and drip. See ",[278,1110,23],{"href":24},[1112,1113,1114],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":308,"searchDepth":350,"depth":350,"links":1116},[1117,1118,1119,1120,1121,1122,1123,1124,1125,1126],{"id":267,"depth":343,"text":15},{"id":300,"depth":343,"text":301},{"id":509,"depth":343,"text":510},{"id":563,"depth":343,"text":564},{"id":654,"depth":343,"text":655},{"id":753,"depth":343,"text":754},{"id":806,"depth":343,"text":807},{"id":930,"depth":343,"text":931},{"id":1040,"depth":343,"text":1041},{"id":1088,"depth":343,"text":1089},"shadcn's Input and Textarea with a goo focus ring. It flows around the border from where you clicked, ripples as you type, and drains away on blur.","md",{},{"title":62,"description":1127},"y2hDQHMZpHY6ieTaGfUJbzrBscZMFPaPXlW4VF4DF2I",[1133,1135],{"title":58,"path":59,"stem":60,"description":1134,"children":-1},"shadcn's Radio Group where the selected dot is a blob of goo that stretches, flies, and splats onto the next item.",{"title":66,"path":67,"stem":68,"description":1136,"children":-1},"shadcn's Slider with a liquid fill and a jelly thumb. Drag fast, then stop, and watch it settle.",1793670386527]