[{"data":1,"prerenderedAt":1363},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fselect":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fselect":1358},[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":74,"badge":48,"body":189,"description":1353,"extension":1354,"meta":1355,"navigation":507,"path":75,"seo":1356,"status":13,"stem":76,"__hash__":1357},"docs\u002Fdocs\u002F2.components\u002F10.select.md",{"type":190,"value":191,"toc":1338},"minimark",[192,201,221,234,238,243,268,310,341,345,359,387,391,770,810,814,891,895,909,915,961,979,1004,1008,1019,1024,1084,1088,1091,1211,1215,1225,1255,1259,1275,1279,1317,1322,1326,1334],[193,194,197],"playground",{"caption":195,"name":196},"Open it, move between items, then pick one.","select",[198,199],"demo-select",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. Select is new and experimental: its props may still change. The selects on this page are the real ",[209,218,219],{},"GoopSelect",".",[206,222,223,225,226,233],{},[209,224,219],{}," wraps the same ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fselect",[231],"nofollow","reka-ui Select"," primitive as shadcn-vue's Select, with the same API. Keyboard navigation, typeahead, focus handling, form submission, and positioning work the same. Swap the imports and you're done.",[235,236,15],"h2",{"id":237},"installation",[239,240,242],"h3",{"id":241},"nuxt","Nuxt",[244,245,250],"pre",{"className":246,"code":247,"language":248,"meta":249,"style":249},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,251,252],{"__ignoreMap":249},[253,254,257,261,265],"span",{"class":255,"line":256},"line",1,[253,258,260],{"class":259},"sScJk","pnpm",[253,262,264],{"class":263},"sZZnC"," add",[253,266,267],{"class":263}," @goopui\u002Fnuxt\n",[244,269,274],{"className":270,"code":271,"filename":272,"language":273,"meta":249,"style":249},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,275,276,292,304],{"__ignoreMap":249},[253,277,278,282,285,288],{"class":255,"line":256},[253,279,281],{"class":280},"szBVR","export",[253,283,284],{"class":280}," default",[253,286,287],{"class":259}," defineNuxtConfig",[253,289,291],{"class":290},"sVt8B","({\n",[253,293,295,298,301],{"class":255,"line":294},2,[253,296,297],{"class":290},"  modules: [",[253,299,300],{"class":263},"'@goopui\u002Fnuxt'",[253,302,303],{"class":290},"],\n",[253,305,307],{"class":255,"line":306},3,[253,308,309],{"class":290},"})\n",[206,311,312,313,316,317,320,321,324,325,324,328,324,331,324,334,324,337,340],{},"The module auto-imports every ",[209,314,315],{},"GoopSelect*"," part, adds ",[209,318,319],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[209,322,323],{},"--popover",", ",[209,326,327],{},"--popover-foreground",[209,329,330],{},"--accent",[209,332,333],{},"--input",[209,335,336],{},"--ring",[209,338,339],{},"--radius",").",[239,342,344],{"id":343},"vue","Vue",[244,346,348],{"className":246,"code":347,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue\n",[209,349,350],{"__ignoreMap":249},[253,351,352,354,356],{"class":255,"line":256},[253,353,260],{"class":259},[253,355,264],{"class":263},[253,357,358],{"class":263}," @goopui\u002Fvue\n",[244,360,365],{"className":361,"code":362,"filename":363,"language":364,"meta":249,"style":249},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,366,367,378],{"__ignoreMap":249},[253,368,369,372,375],{"class":255,"line":256},[253,370,371],{"class":280},"@import",[253,373,374],{"class":263}," \"tailwindcss\"",[253,376,377],{"class":290},";\n",[253,379,380,382,385],{"class":255,"line":294},[253,381,371],{"class":280},[253,383,384],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,386,377],{"class":290},[235,388,390],{"id":389},"usage","Usage",[244,392,395],{"className":393,"code":394,"language":343,"meta":249,"style":249},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\nimport { ref } from 'vue'\nimport {\n  GoopSelect,\n  GoopSelectContent,\n  GoopSelectGroup,\n  GoopSelectItem,\n  GoopSelectLabel,\n  GoopSelectTrigger,\n  GoopSelectValue,\n} from '@goopui\u002Fvue'\n\nconst fruit = ref('Blueberry')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopSelect v-model=\"fruit\">\n    \u003CGoopSelectTrigger class=\"w-44\">\n      \u003CGoopSelectValue placeholder=\"Pick a fruit\" \u002F>\n    \u003C\u002FGoopSelectTrigger>\n    \u003CGoopSelectContent>\n      \u003CGoopSelectGroup>\n        \u003CGoopSelectLabel>Fruits\u003C\u002FGoopSelectLabel>\n        \u003CGoopSelectItem value=\"Apple\">Apple\u003C\u002FGoopSelectItem>\n        \u003CGoopSelectItem value=\"Banana\">Banana\u003C\u002FGoopSelectItem>\n        \u003CGoopSelectItem value=\"Blueberry\">Blueberry\u003C\u002FGoopSelectItem>\n      \u003C\u002FGoopSelectGroup>\n    \u003C\u002FGoopSelectContent>\n  \u003C\u002FGoopSelect>\n\u003C\u002Ftemplate>\n",[209,396,397,421,427,441,449,455,461,467,473,479,485,491,502,509,534,544,549,559,582,601,621,631,641,651,667,690,711,732,742,751,761],{"__ignoreMap":249},[253,398,399,402,406,409,412,415,418],{"class":255,"line":256},[253,400,401],{"class":290},"\u003C",[253,403,405],{"class":404},"s9eBZ","script",[253,407,408],{"class":259}," setup",[253,410,411],{"class":259}," lang",[253,413,414],{"class":290},"=",[253,416,417],{"class":263},"\"ts\"",[253,419,420],{"class":290},">\n",[253,422,423],{"class":255,"line":294},[253,424,426],{"class":425},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[253,428,429,432,435,438],{"class":255,"line":306},[253,430,431],{"class":280},"import",[253,433,434],{"class":290}," { ref } ",[253,436,437],{"class":280},"from",[253,439,440],{"class":263}," 'vue'\n",[253,442,444,446],{"class":255,"line":443},4,[253,445,431],{"class":280},[253,447,448],{"class":290}," {\n",[253,450,452],{"class":255,"line":451},5,[253,453,454],{"class":290},"  GoopSelect,\n",[253,456,458],{"class":255,"line":457},6,[253,459,460],{"class":290},"  GoopSelectContent,\n",[253,462,464],{"class":255,"line":463},7,[253,465,466],{"class":290},"  GoopSelectGroup,\n",[253,468,470],{"class":255,"line":469},8,[253,471,472],{"class":290},"  GoopSelectItem,\n",[253,474,476],{"class":255,"line":475},9,[253,477,478],{"class":290},"  GoopSelectLabel,\n",[253,480,482],{"class":255,"line":481},10,[253,483,484],{"class":290},"  GoopSelectTrigger,\n",[253,486,488],{"class":255,"line":487},11,[253,489,490],{"class":290},"  GoopSelectValue,\n",[253,492,494,497,499],{"class":255,"line":493},12,[253,495,496],{"class":290},"} ",[253,498,437],{"class":280},[253,500,501],{"class":263}," '@goopui\u002Fvue'\n",[253,503,505],{"class":255,"line":504},13,[253,506,508],{"emptyLinePlaceholder":507},true,"\n",[253,510,512,515,519,522,525,528,531],{"class":255,"line":511},14,[253,513,514],{"class":280},"const",[253,516,518],{"class":517},"sj4cs"," fruit",[253,520,521],{"class":280}," =",[253,523,524],{"class":259}," ref",[253,526,527],{"class":290},"(",[253,529,530],{"class":263},"'Blueberry'",[253,532,533],{"class":290},")\n",[253,535,537,540,542],{"class":255,"line":536},15,[253,538,539],{"class":290},"\u003C\u002F",[253,541,405],{"class":404},[253,543,420],{"class":290},[253,545,547],{"class":255,"line":546},16,[253,548,508],{"emptyLinePlaceholder":507},[253,550,552,554,557],{"class":255,"line":551},17,[253,553,401],{"class":290},[253,555,556],{"class":404},"template",[253,558,420],{"class":290},[253,560,562,565,567,570,572,575,578,580],{"class":255,"line":561},18,[253,563,564],{"class":290},"  \u003C",[253,566,219],{"class":404},[253,568,569],{"class":259}," v-model",[253,571,414],{"class":290},[253,573,574],{"class":263},"\"",[253,576,577],{"class":290},"fruit",[253,579,574],{"class":263},[253,581,420],{"class":290},[253,583,585,588,591,594,596,599],{"class":255,"line":584},19,[253,586,587],{"class":290},"    \u003C",[253,589,590],{"class":404},"GoopSelectTrigger",[253,592,593],{"class":259}," class",[253,595,414],{"class":290},[253,597,598],{"class":263},"\"w-44\"",[253,600,420],{"class":290},[253,602,604,607,610,613,615,618],{"class":255,"line":603},20,[253,605,606],{"class":290},"      \u003C",[253,608,609],{"class":404},"GoopSelectValue",[253,611,612],{"class":259}," placeholder",[253,614,414],{"class":290},[253,616,617],{"class":263},"\"Pick a fruit\"",[253,619,620],{"class":290}," \u002F>\n",[253,622,624,627,629],{"class":255,"line":623},21,[253,625,626],{"class":290},"    \u003C\u002F",[253,628,590],{"class":404},[253,630,420],{"class":290},[253,632,634,636,639],{"class":255,"line":633},22,[253,635,587],{"class":290},[253,637,638],{"class":404},"GoopSelectContent",[253,640,420],{"class":290},[253,642,644,646,649],{"class":255,"line":643},23,[253,645,606],{"class":290},[253,647,648],{"class":404},"GoopSelectGroup",[253,650,420],{"class":290},[253,652,654,657,660,663,665],{"class":255,"line":653},24,[253,655,656],{"class":290},"        \u003C",[253,658,659],{"class":404},"GoopSelectLabel",[253,661,662],{"class":290},">Fruits\u003C\u002F",[253,664,659],{"class":404},[253,666,420],{"class":290},[253,668,670,672,675,678,680,683,686,688],{"class":255,"line":669},25,[253,671,656],{"class":290},[253,673,674],{"class":404},"GoopSelectItem",[253,676,677],{"class":259}," value",[253,679,414],{"class":290},[253,681,682],{"class":263},"\"Apple\"",[253,684,685],{"class":290},">Apple\u003C\u002F",[253,687,674],{"class":404},[253,689,420],{"class":290},[253,691,693,695,697,699,701,704,707,709],{"class":255,"line":692},26,[253,694,656],{"class":290},[253,696,674],{"class":404},[253,698,677],{"class":259},[253,700,414],{"class":290},[253,702,703],{"class":263},"\"Banana\"",[253,705,706],{"class":290},">Banana\u003C\u002F",[253,708,674],{"class":404},[253,710,420],{"class":290},[253,712,714,716,718,720,722,725,728,730],{"class":255,"line":713},27,[253,715,656],{"class":290},[253,717,674],{"class":404},[253,719,677],{"class":259},[253,721,414],{"class":290},[253,723,724],{"class":263},"\"Blueberry\"",[253,726,727],{"class":290},">Blueberry\u003C\u002F",[253,729,674],{"class":404},[253,731,420],{"class":290},[253,733,735,738,740],{"class":255,"line":734},28,[253,736,737],{"class":290},"      \u003C\u002F",[253,739,648],{"class":404},[253,741,420],{"class":290},[253,743,745,747,749],{"class":255,"line":744},29,[253,746,626],{"class":290},[253,748,638],{"class":404},[253,750,420],{"class":290},[253,752,754,757,759],{"class":255,"line":753},30,[253,755,756],{"class":290},"  \u003C\u002F",[253,758,219],{"class":404},[253,760,420],{"class":290},[253,762,764,766,768],{"class":255,"line":763},31,[253,765,539],{"class":290},[253,767,556],{"class":404},[253,769,420],{"class":290},[206,771,772,773,324,775,324,778,324,781,324,784,324,787,324,789,324,792,324,795,324,797,800,801,804,805,807,808,220],{},"The parts are ",[209,774,219],{},[209,776,777],{},"Trigger",[209,779,780],{},"Value",[209,782,783],{},"Content",[209,785,786],{},"Group",[209,788,171],{},[209,790,791],{},"Item",[209,793,794],{},"ItemText",[209,796,167],{},[209,798,799],{},"ScrollUpButton",", and ",[209,802,803],{},"ScrollDownButton",", each prefixed with ",[209,806,219],{},". All the goo lives on ",[209,809,638],{},[235,811,813],{"id":812},"behavior","Behavior",[815,816,817,835,850,859,872,881],"ul",{},[818,819,820,824,825,828,829,324,832,340],"li",{},[821,822,823],"strong",{},"Bloom."," The list pools from a single droplet (or a few that fuse, ",[209,826,827],{},"bloomStart=\"merge\"","), spreads out with a lobed edge, overshoots, and wobbles to rest. Then it splashes drops all around, kept off the trigger (",[209,830,831],{},"openSlosh",[209,833,834],{},"openDrips",[818,836,837,840,841,324,844,324,847,340],{},[821,838,839],{},"Highlight."," The highlighted item's background is a goo blob. It slides between items with a stretch and a neck, overshoots when it lands, and follows the keyboard as well as the pointer (",[209,842,843],{},"highlight",[209,845,846],{},"momentum",[209,848,849],{},"wobble",[818,851,852,855,856,340],{},[821,853,854],{},"Follow the pointer."," As the pointer moves along an item, the blob's swell leans toward it with a little lag (",[209,857,858],{},"followPointer",[818,860,861,864,865,868,869,340],{},[821,862,863],{},"Choose."," Picking an item squishes the blob (",[209,866,867],{},"pop","), sets the value at once, and closes the list once the pop has played. The new item's check mark plops in: it falls in small, squashes flat as it lands, and jiggles back to round (",[209,870,871],{},"plop",[818,873,874,877,878,340],{},[821,875,876],{},"Close."," The list pulls in, wobbles, and shrinks back to where it bloomed from (",[209,879,880],{},"closeSlosh",[818,882,883,886,887,890],{},[821,884,885],{},"Content stays sharp."," The list's background, ring, and shadow are drawn on an ",[209,888,889],{},"aria-hidden"," surface behind the items, so the text is never filtered.",[235,892,894],{"id":893},"position-and-bloom-origin","Position and bloom origin",[206,896,897,900,901,904,905,908],{},[209,898,899],{},"position"," is reka-ui's. With ",[209,902,903],{},"item-aligned"," (the default, like shadcn), the list is laid over the trigger with the selected item on top of it, and it blooms out of that item, so the list grows from the value you clicked. With ",[209,906,907],{},"popper",", the list sits below the trigger like a menu and blooms from its own center:",[910,911,913],"preview",{":controls":912},"false",[198,914],{"set":899},[244,916,918],{"className":393,"code":917,"language":343,"meta":249,"style":249},"\u003CGoopSelectContent>...\u003C\u002FGoopSelectContent>                    \u003C!-- item-aligned: blooms from the selected item -->\n\u003CGoopSelectContent position=\"popper\">...\u003C\u002FGoopSelectContent>  \u003C!-- blooms from its center -->\n",[209,919,920,937],{"__ignoreMap":249},[253,921,922,924,926,929,931,934],{"class":255,"line":256},[253,923,401],{"class":290},[253,925,638],{"class":404},[253,927,928],{"class":290},">...\u003C\u002F",[253,930,638],{"class":404},[253,932,933],{"class":290},">                    ",[253,935,936],{"class":425},"\u003C!-- item-aligned: blooms from the selected item -->\n",[253,938,939,941,943,946,948,951,953,955,958],{"class":255,"line":294},[253,940,401],{"class":290},[253,942,638],{"class":404},[253,944,945],{"class":259}," position",[253,947,414],{"class":290},[253,949,950],{"class":263},"\"popper\"",[253,952,928],{"class":290},[253,954,638],{"class":404},[253,956,957],{"class":290},">  ",[253,959,960],{"class":425},"\u003C!-- blooms from its center -->\n",[206,962,963,966,967,970,971,974,975,978],{},[209,964,965],{},"bloomFrom"," overrides where the bloom starts: ",[209,968,969],{},"'auto'"," (the default, as above), ",[209,972,973],{},"'selected'",", or ",[209,976,977],{},"'center'",". Close shrinks back to the same spot.",[244,980,982],{"className":393,"code":981,"language":343,"meta":249,"style":249},"\u003CGoopSelectContent bloom-from=\"center\">...\u003C\u002FGoopSelectContent>\n",[209,983,984],{"__ignoreMap":249},[253,985,986,988,990,993,995,998,1000,1002],{"class":255,"line":256},[253,987,401],{"class":290},[253,989,638],{"class":404},[253,991,992],{"class":259}," bloom-from",[253,994,414],{"class":290},[253,996,997],{"class":263},"\"center\"",[253,999,928],{"class":290},[253,1001,638],{"class":404},[253,1003,420],{"class":290},[235,1005,1007],{"id":1006},"surface-color","Surface color",[206,1009,1010,1011,1014,1015,1018],{},"A select trigger is an outlined field, so its color isn't the list's. Unlike Popover and Dropdown Menu, the list defaults to ",[209,1012,1013],{},"surface=\"popover\"",": shadcn's popover tokens. ",[209,1016,1017],{},"'trigger'"," takes the trigger's background and text color, and any CSS color works too:",[910,1020,1021],{":controls":912},[198,1022],{"set":1023},"surface",[244,1025,1027],{"className":393,"code":1026,"language":343,"meta":249,"style":249},"\u003CGoopSelectContent>...\u003C\u002FGoopSelectContent>                                \u003C!-- 'popover' (default) -->\n\u003CGoopSelectContent surface=\"trigger\">...\u003C\u002FGoopSelectContent>\n\u003CGoopSelectContent surface=\"oklch(0.62 0.19 150)\">...\u003C\u002FGoopSelectContent>\n",[209,1028,1029,1045,1065],{"__ignoreMap":249},[253,1030,1031,1033,1035,1037,1039,1042],{"class":255,"line":256},[253,1032,401],{"class":290},[253,1034,638],{"class":404},[253,1036,928],{"class":290},[253,1038,638],{"class":404},[253,1040,1041],{"class":290},">                                ",[253,1043,1044],{"class":425},"\u003C!-- 'popover' (default) -->\n",[253,1046,1047,1049,1051,1054,1056,1059,1061,1063],{"class":255,"line":294},[253,1048,401],{"class":290},[253,1050,638],{"class":404},[253,1052,1053],{"class":259}," surface",[253,1055,414],{"class":290},[253,1057,1058],{"class":263},"\"trigger\"",[253,1060,928],{"class":290},[253,1062,638],{"class":404},[253,1064,420],{"class":290},[253,1066,1067,1069,1071,1073,1075,1078,1080,1082],{"class":255,"line":306},[253,1068,401],{"class":290},[253,1070,638],{"class":404},[253,1072,1053],{"class":259},[253,1074,414],{"class":290},[253,1076,1077],{"class":263},"\"oklch(0.62 0.19 150)\"",[253,1079,928],{"class":290},[253,1081,638],{"class":404},[253,1083,420],{"class":290},[235,1085,1087],{"id":1086},"turning-parts-off","Turning parts off",[206,1089,1090],{},"Every effect is its own boolean, and they all default to on:",[244,1092,1094],{"className":393,"code":1093,"language":343,"meta":249,"style":249},"\u003CGoopSelectContent :plop=\"false\">...\u003C\u002FGoopSelectContent>              \u003C!-- the check mark just appears -->\n\u003CGoopSelectContent :follow-pointer=\"false\">...\u003C\u002FGoopSelectContent>    \u003C!-- the blob stays centred -->\n\u003CGoopSelectContent :highlight=\"false\">...\u003C\u002FGoopSelectContent>         \u003C!-- shadcn's flat highlight -->\n\u003CGoopSelectContent :open-drips=\"false\">...\u003C\u002FGoopSelectContent>        \u003C!-- no splash -->\n",[209,1095,1096,1125,1154,1182],{"__ignoreMap":249},[253,1097,1098,1100,1102,1105,1107,1109,1111,1113,1115,1117,1119,1122],{"class":255,"line":256},[253,1099,401],{"class":290},[253,1101,638],{"class":404},[253,1103,1104],{"class":290}," :",[253,1106,871],{"class":259},[253,1108,414],{"class":290},[253,1110,574],{"class":263},[253,1112,912],{"class":517},[253,1114,574],{"class":263},[253,1116,928],{"class":290},[253,1118,638],{"class":404},[253,1120,1121],{"class":290},">              ",[253,1123,1124],{"class":425},"\u003C!-- the check mark just appears -->\n",[253,1126,1127,1129,1131,1133,1136,1138,1140,1142,1144,1146,1148,1151],{"class":255,"line":294},[253,1128,401],{"class":290},[253,1130,638],{"class":404},[253,1132,1104],{"class":290},[253,1134,1135],{"class":259},"follow-pointer",[253,1137,414],{"class":290},[253,1139,574],{"class":263},[253,1141,912],{"class":517},[253,1143,574],{"class":263},[253,1145,928],{"class":290},[253,1147,638],{"class":404},[253,1149,1150],{"class":290},">    ",[253,1152,1153],{"class":425},"\u003C!-- the blob stays centred -->\n",[253,1155,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1179],{"class":255,"line":306},[253,1157,401],{"class":290},[253,1159,638],{"class":404},[253,1161,1104],{"class":290},[253,1163,843],{"class":259},[253,1165,414],{"class":290},[253,1167,574],{"class":263},[253,1169,912],{"class":517},[253,1171,574],{"class":263},[253,1173,928],{"class":290},[253,1175,638],{"class":404},[253,1177,1178],{"class":290},">         ",[253,1180,1181],{"class":425},"\u003C!-- shadcn's flat highlight -->\n",[253,1183,1184,1186,1188,1190,1193,1195,1197,1199,1201,1203,1205,1208],{"class":255,"line":443},[253,1185,401],{"class":290},[253,1187,638],{"class":404},[253,1189,1104],{"class":290},[253,1191,1192],{"class":259},"open-drips",[253,1194,414],{"class":290},[253,1196,574],{"class":263},[253,1198,912],{"class":517},[253,1200,574],{"class":263},[253,1202,928],{"class":290},[253,1204,638],{"class":404},[253,1206,1207],{"class":290},">        ",[253,1209,1210],{"class":425},"\u003C!-- no splash -->\n",[235,1212,1214],{"id":1213},"plain-shadcn","Plain shadcn",[206,1216,1217,1220,1221,1224],{},[209,1218,1219],{},":goo=\"false\""," renders exactly shadcn's ",[209,1222,1223],{},"SelectContent",", with its own enter and exit animation:",[244,1226,1228],{"className":393,"code":1227,"language":343,"meta":249,"style":249},"\u003CGoopSelectContent :goo=\"false\">...\u003C\u002FGoopSelectContent>\n",[209,1229,1230],{"__ignoreMap":249},[253,1231,1232,1234,1236,1238,1241,1243,1245,1247,1249,1251,1253],{"class":255,"line":256},[253,1233,401],{"class":290},[253,1235,638],{"class":404},[253,1237,1104],{"class":290},[253,1239,1240],{"class":259},"goo",[253,1242,414],{"class":290},[253,1244,574],{"class":263},[253,1246,912],{"class":517},[253,1248,574],{"class":263},[253,1250,928],{"class":290},[253,1252,638],{"class":404},[253,1254,420],{"class":290},[235,1256,1258],{"id":1257},"driving-it-from-code","Driving it from code",[206,1260,1261,1263,1264,1267,1268,1271,1272,1274],{},[209,1262,638],{}," exposes its engine handle as ",[209,1265,1266],{},"handle"," (",[209,1269,1270],{},"null"," before it mounts, or when ",[209,1273,1240],{}," is off). The list only exists while open.",[235,1276,1278],{"id":1277},"props","Props",[206,1280,1281,1282,1284,1285,1288,1289,1291,1292,1294,1295,324,1297,324,1300,324,1303,1306,1307,1310,1311,212,1314,220],{},"The root, trigger, value, group, label, item, separator, and scroll buttons take shadcn-vue's props. ",[209,1283,590],{}," also takes ",[209,1286,1287],{},"size: 'default' | 'sm'",", like shadcn. ",[209,1290,638],{}," takes reka-ui's ",[209,1293,1223],{}," props (",[209,1296,899],{},[209,1298,1299],{},"side",[209,1301,1302],{},"align",[209,1304,1305],{},"sideOffset",", and the rest), ",[209,1308,1309],{},"class",", and these goo props. Defaults are ",[209,1312,1313],{},"position=\"item-aligned\"",[209,1315,1316],{},"align=\"center\"",[1318,1319],"component-props",{"name":196,"part":1320},[1321],"content",[235,1323,1325],{"id":1324},"accessibility","Accessibility",[206,1327,1328,1329,1331,1332,220],{},"Keyboard navigation, typeahead, focus handling, form submission, and ARIA attributes come from reka-ui. The goo surface and the highlight blob are ",[209,1330,889],{}," and can't be clicked, and the items are never filtered. Under reduced motion the list opens and closes plainly: it keeps its goo shape and color, but the bloom, slosh, and splash are off, the highlight snaps between items, and there's no pop and no plop. See ",[227,1333,23],{"href":24},[1335,1336,1337],"style",{},"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 .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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":249,"searchDepth":306,"depth":306,"links":1339},[1340,1344,1345,1346,1347,1348,1349,1350,1351,1352],{"id":237,"depth":294,"text":15,"children":1341},[1342,1343],{"id":241,"depth":306,"text":242},{"id":343,"depth":306,"text":344},{"id":389,"depth":294,"text":390},{"id":812,"depth":294,"text":813},{"id":893,"depth":294,"text":894},{"id":1006,"depth":294,"text":1007},{"id":1086,"depth":294,"text":1087},{"id":1213,"depth":294,"text":1214},{"id":1257,"depth":294,"text":1258},{"id":1277,"depth":294,"text":1278},{"id":1324,"depth":294,"text":1325},"shadcn's Select with goo. The list blooms out of the value you picked, the highlight is a blob, and the check mark plops in.","md",{},{"title":74,"description":1353},"iF0w0mVy1bgumeTINTq0KilU4b-5NjMzVwgGwdGFNb4",[1359,1361],{"title":70,"path":71,"stem":72,"description":1360,"children":-1},"shadcn's Progress that fills like liquid. The front bulges when the value changes, and a drip falls now and then.",{"title":78,"path":79,"stem":80,"description":1362,"children":-1},"shadcn's Popover with goo. The panel blooms out of a droplet, overshoots, and splashes all around.",1793670386528]