[{"data":1,"prerenderedAt":905},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fprogress":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fprogress":900},[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":70,"badge":13,"body":189,"description":895,"extension":896,"meta":897,"navigation":446,"path":71,"seo":898,"status":13,"stem":72,"__hash__":899},"docs\u002Fdocs\u002F2.components\u002F09.progress.md",{"type":190,"value":191,"toc":881},"minimark",[192,201,221,225,230,255,297,311,315,329,357,361,391,530,534,578,582,585,592,619,623,630,635,669,673,684,688,739,743,754,787,801,805,810,813,827,847,851,877],[193,194,197],"playground",{"caption":195,"name":196},"Use the buttons to step the value.","progress",[198,199],"demo-progress",{"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. The bars on this page are the real ",[209,218,219],{},"GoopProgress",", and the code below is exactly what you write.",[222,223,15],"h2",{"id":224},"installation",[226,227,229],"h3",{"id":228},"nuxt","Nuxt",[231,232,237],"pre",{"className":233,"code":234,"language":235,"meta":236,"style":236},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,238,239],{"__ignoreMap":236},[240,241,244,248,252],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"sScJk","pnpm",[240,249,251],{"class":250},"sZZnC"," add",[240,253,254],{"class":250}," @goopui\u002Fnuxt\n",[231,256,261],{"className":257,"code":258,"filename":259,"language":260,"meta":236,"style":236},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,262,263,279,291],{"__ignoreMap":236},[240,264,265,269,272,275],{"class":242,"line":243},[240,266,268],{"class":267},"szBVR","export",[240,270,271],{"class":267}," default",[240,273,274],{"class":246}," defineNuxtConfig",[240,276,278],{"class":277},"sVt8B","({\n",[240,280,282,285,288],{"class":242,"line":281},2,[240,283,284],{"class":277},"  modules: [",[240,286,287],{"class":250},"'@goopui\u002Fnuxt'",[240,289,290],{"class":277},"],\n",[240,292,294],{"class":242,"line":293},3,[240,295,296],{"class":277},"})\n",[206,298,299,300,302,303,306,307,310],{},"The module auto-imports ",[209,301,219],{}," and adds ",[209,304,305],{},"goop.css",". See ",[308,309,15],"a",{"href":16}," for the module options.",[226,312,314],{"id":313},"vue","Vue",[231,316,318],{"className":233,"code":317,"language":235,"meta":236,"style":236},"pnpm add @goopui\u002Fvue\n",[209,319,320],{"__ignoreMap":236},[240,321,322,324,326],{"class":242,"line":243},[240,323,247],{"class":246},[240,325,251],{"class":250},[240,327,328],{"class":250}," @goopui\u002Fvue\n",[231,330,335],{"className":331,"code":332,"filename":333,"language":334,"meta":236,"style":236},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,336,337,348],{"__ignoreMap":236},[240,338,339,342,345],{"class":242,"line":243},[240,340,341],{"class":267},"@import",[240,343,344],{"class":250}," \"tailwindcss\"",[240,346,347],{"class":277},";\n",[240,349,350,352,355],{"class":242,"line":281},[240,351,341],{"class":267},[240,353,354],{"class":250}," \"@goopui\u002Fvue\u002Fgoop.css\"",[240,356,347],{"class":277},[222,358,360],{"id":359},"usage","Usage",[206,362,363,365,366,372,373,378,379,382,383,386,387,390],{},[209,364,219],{}," wraps the same ",[308,367,371],{"href":368,"rel":369},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fprogress",[370],"nofollow","reka-ui Progress"," as ",[308,374,377],{"href":375,"rel":376},"https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fcomponents\u002Fprogress",[370],"shadcn-vue's Progress",". The API is the same: ",[209,380,381],{},"v-model"," is a number from 0 to ",[209,384,385],{},"max"," (default 100), and reka-ui keeps ",[209,388,389],{},"role=\"progressbar\""," and the ARIA values.",[231,392,395],{"className":393,"code":394,"language":313,"meta":236,"style":236},"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 { GoopProgress } from '@goopui\u002Fvue'\n\nconst progress = ref(35)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopProgress v-model=\"progress\" \u002F>\n\u003C\u002Ftemplate>\n",[209,396,397,421,427,441,448,473,483,488,498,521],{"__ignoreMap":236},[240,398,399,402,406,409,412,415,418],{"class":242,"line":243},[240,400,401],{"class":277},"\u003C",[240,403,405],{"class":404},"s9eBZ","script",[240,407,408],{"class":246}," setup",[240,410,411],{"class":246}," lang",[240,413,414],{"class":277},"=",[240,416,417],{"class":250},"\"ts\"",[240,419,420],{"class":277},">\n",[240,422,423],{"class":242,"line":281},[240,424,426],{"class":425},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[240,428,429,432,435,438],{"class":242,"line":293},[240,430,431],{"class":267},"import",[240,433,434],{"class":277}," { GoopProgress } ",[240,436,437],{"class":267},"from",[240,439,440],{"class":250}," '@goopui\u002Fvue'\n",[240,442,444],{"class":242,"line":443},4,[240,445,447],{"emptyLinePlaceholder":446},true,"\n",[240,449,451,454,458,461,464,467,470],{"class":242,"line":450},5,[240,452,453],{"class":267},"const",[240,455,457],{"class":456},"sj4cs"," progress",[240,459,460],{"class":267}," =",[240,462,463],{"class":246}," ref",[240,465,466],{"class":277},"(",[240,468,469],{"class":456},"35",[240,471,472],{"class":277},")\n",[240,474,476,479,481],{"class":242,"line":475},6,[240,477,478],{"class":277},"\u003C\u002F",[240,480,405],{"class":404},[240,482,420],{"class":277},[240,484,486],{"class":242,"line":485},7,[240,487,447],{"emptyLinePlaceholder":446},[240,489,491,493,496],{"class":242,"line":490},8,[240,492,401],{"class":277},[240,494,495],{"class":404},"template",[240,497,420],{"class":277},[240,499,501,504,506,509,511,514,516,518],{"class":242,"line":500},9,[240,502,503],{"class":277},"  \u003C",[240,505,219],{"class":404},[240,507,508],{"class":246}," v-model",[240,510,414],{"class":277},[240,512,513],{"class":250},"\"",[240,515,196],{"class":277},[240,517,513],{"class":250},[240,519,520],{"class":277}," \u002F>\n",[240,522,524,526,528],{"class":242,"line":523},10,[240,525,478],{"class":277},[240,527,495],{"class":404},[240,529,420],{"class":277},[222,531,533],{"id":532},"behavior","Behavior",[535,536,537,549,558,568],"ul",{},[538,539,540,544,545,548],"li",{},[541,542,543],"strong",{},"Front."," The leading edge is a rounded blob that chases the value on a soft spring and stretches with its speed. It bulges and wobbles each time the value changes (",[209,546,547],{},"wobble",").",[538,550,551,554,555,548],{},[541,552,553],{},"Slosh."," The top surface of the fill carries a slow wave. It piles up toward the front when the fill speeds up and sloshes back when it stops (",[209,556,557],{},"slosh",[538,559,560,563,564,567],{},[541,561,562],{},"Drips."," Now and then a drop swells on the underside of the front, necks off, and falls (",[209,565,566],{},"drips","). At most three at once. The bar is a thin strip, so the drops are drawn in the goo layer around it and never change layout.",[538,569,570,573,574,577],{},[541,571,572],{},"Layout"," never changes. The goo is drawn in one ",[209,575,576],{},"aria-hidden"," layer on the root. The real indicator stays in place and goes see-through.",[222,579,581],{"id":580},"auto-updating","Auto-updating",[206,583,584],{},"The fill follows whatever value you give it, so bursty updates look best. This one fills in uneven bursts, holds at 100, and starts over:",[586,587,589],"preview",{":controls":588},"false",[198,590],{"set":591},"auto",[231,593,595],{"className":393,"code":594,"language":313,"meta":236,"style":236},"\u003CGoopProgress :model-value=\"progress\" \u002F>\n",[209,596,597],{"__ignoreMap":236},[240,598,599,601,603,606,609,611,613,615,617],{"class":242,"line":243},[240,600,401],{"class":277},[240,602,219],{"class":404},[240,604,605],{"class":277}," :",[240,607,608],{"class":246},"model-value",[240,610,414],{"class":277},[240,612,513],{"class":250},[240,614,196],{"class":277},[240,616,513],{"class":250},[240,618,520],{"class":277},[222,620,622],{"id":621},"taller-bars","Taller bars",[206,624,625,626,629],{},"The goo follows the root's box, so a taller bar has more room for the front and the drips. Set the height with ",[209,627,628],{},"class",":",[586,631,632],{":controls":588},[198,633],{"set":634},"tall",[231,636,638],{"className":393,"code":637,"language":313,"meta":236,"style":236},"\u003CGoopProgress :model-value=\"65\" class=\"h-3\" \u002F>\n",[209,639,640],{"__ignoreMap":236},[240,641,642,644,646,648,650,652,654,657,659,662,664,667],{"class":242,"line":243},[240,643,401],{"class":277},[240,645,219],{"class":404},[240,647,605],{"class":277},[240,649,608],{"class":246},[240,651,414],{"class":277},[240,653,513],{"class":250},[240,655,656],{"class":456},"65",[240,658,513],{"class":250},[240,660,661],{"class":246}," class",[240,663,414],{"class":277},[240,665,666],{"class":250},"\"h-3\"",[240,668,520],{"class":277},[222,670,672],{"id":671},"indeterminate","Indeterminate",[206,674,675,676,679,680,683],{},"Pass ",[209,677,678],{},"null"," when you don't know the value. A goo slug runs along the bar with the same surge as ",[308,681,682],{"href":42},"GoopSpinner",", stretching when it's fast, and it drips too.",[586,685,686],{":controls":588},[198,687],{"set":671},[231,689,691],{"className":393,"code":690,"language":313,"meta":236,"style":236},"\u003CGoopProgress :model-value=\"null\" \u002F>\n\u003CGoopProgress :model-value=\"null\" class=\"h-3\" \u002F>\n",[209,692,693,713],{"__ignoreMap":236},[240,694,695,697,699,701,703,705,707,709,711],{"class":242,"line":243},[240,696,401],{"class":277},[240,698,219],{"class":404},[240,700,605],{"class":277},[240,702,608],{"class":246},[240,704,414],{"class":277},[240,706,513],{"class":250},[240,708,678],{"class":456},[240,710,513],{"class":250},[240,712,520],{"class":277},[240,714,715,717,719,721,723,725,727,729,731,733,735,737],{"class":242,"line":281},[240,716,401],{"class":277},[240,718,219],{"class":404},[240,720,605],{"class":277},[240,722,608],{"class":246},[240,724,414],{"class":277},[240,726,513],{"class":250},[240,728,678],{"class":456},[240,730,513],{"class":250},[240,732,661],{"class":246},[240,734,414],{"class":277},[240,736,666],{"class":250},[240,738,520],{"class":277},[222,740,742],{"id":741},"color","Color",[206,744,745,746,749,750,753],{},"The goo is painted in ",[209,747,748],{},"--primary",". To change it, set ",[209,751,752],{},"--goop-progress-color"," on the bar or any ancestor:",[231,755,757],{"className":393,"code":756,"language":313,"meta":236,"style":236},"\u003CGoopProgress :model-value=\"60\" class=\"[--goop-progress-color:var(--destructive)]\" \u002F>\n",[209,758,759],{"__ignoreMap":236},[240,760,761,763,765,767,769,771,773,776,778,780,782,785],{"class":242,"line":243},[240,762,401],{"class":277},[240,764,219],{"class":404},[240,766,605],{"class":277},[240,768,608],{"class":246},[240,770,414],{"class":277},[240,772,513],{"class":250},[240,774,775],{"class":456},"60",[240,777,513],{"class":250},[240,779,661],{"class":246},[240,781,414],{"class":277},[240,783,784],{"class":250},"\"[--goop-progress-color:var(--destructive)]\"",[240,786,520],{"class":277},[206,788,789,790,793,794,796,797,800],{},"The track keeps shadcn's ",[209,791,792],{},"bg-muted",". Style it with ",[209,795,628],{}," as you would in shadcn. Use ",[209,798,799],{},":goo=\"false\""," to render a plain shadcn Progress.",[222,802,804],{"id":803},"props","Props",[206,806,807,809],{},[209,808,219],{}," keeps the shadcn-vue Progress API and adds the goo props.",[811,812],"component-props",{"name":196},[206,814,815,816,819,820,822,823,826],{},"Effect props take ",[209,817,818],{},"true",", ",[209,821,588],{},", or a number from 0 to 2. Props win over the app-wide config (",[209,824,825],{},"GoopPlugin"," or the module options), which wins over the preset.",[206,828,829,831,832,835,836,838,839,842,843,846],{},[209,830,219],{}," also exposes ",[209,833,834],{},"handle"," (the core handle, ",[209,837,678],{}," before mount or with ",[209,840,841],{},"goo"," off) and ",[209,844,845],{},"el",".",[222,848,850],{"id":849},"accessibility","Accessibility",[206,852,853,854,856,857,819,860,863,864,867,868,871,872,874,875,846],{},"It's a real reka-ui progress bar: ",[209,855,389],{}," with ",[209,858,859],{},"aria-valuenow",[209,861,862],{},"aria-valuemin",", and ",[209,865,866],{},"aria-valuemax",", and no value attributes when indeterminate. Pass ",[209,869,870],{},"aria-label"," (it lands on the root) so the bar has a name. The goo layer is ",[209,873,576],{},". Under reduced motion the goo keeps its shape and the effects turn off: the front moves straight to the value, there's no slosh, wobble, or drips, and the indeterminate slug sits still in the middle of the bar. See ",[308,876,23],{"href":24},[878,879,880],"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":236,"searchDepth":293,"depth":293,"links":882},[883,887,888,889,890,891,892,893,894],{"id":224,"depth":281,"text":15,"children":884},[885,886],{"id":228,"depth":293,"text":229},{"id":313,"depth":293,"text":314},{"id":359,"depth":281,"text":360},{"id":532,"depth":281,"text":533},{"id":580,"depth":281,"text":581},{"id":621,"depth":281,"text":622},{"id":671,"depth":281,"text":672},{"id":741,"depth":281,"text":742},{"id":803,"depth":281,"text":804},{"id":849,"depth":281,"text":850},"shadcn's Progress that fills like liquid. The front bulges when the value changes, and a drip falls now and then.","md",{},{"title":70,"description":895},"8nGvEUrLqDym9uJqJGocyCN1C3O3ZSoSguXG-l6f5ts",[901,903],{"title":66,"path":67,"stem":68,"description":902,"children":-1},"shadcn's Slider with a liquid fill and a jelly thumb. Drag fast, then stop, and watch it settle.",{"title":74,"path":75,"stem":76,"description":904,"children":-1},"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.",1793670387023]