[{"data":1,"prerenderedAt":823},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-progress":273,"-colorffy-ui-components-progress-surround":818},[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":239,"body":275,"description":811,"extension":812,"links":813,"meta":814,"navigation":815,"path":240,"seo":816,"stem":241,"__hash__":817},"docs\u002F3.colorffy-ui\u002F2.components\u002F22.progress.md",{"type":276,"value":277,"toc":804},"minimark",[278,290,295,449,453,508,512,552,556,740,744,800],[279,280,281,285,286,289],"p",{},[282,283,284],"code",{},"UiProgressBar"," shows determinate or indeterminate progress; ",[282,287,288],{},"UiProgressSpinner"," is a simple circular loader.",[291,292,294],"h2",{"id":293},"add-a-progress-bar","Add a progress bar",[296,297,302],"pre",{"className":298,"code":299,"language":300,"meta":301,"style":301},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUiProgressBar :value=\"60\" aria-label=\"Upload progress\" text=\"60%\" \u002F>\n  \u003CUiProgressBar :value=\"40\" size=\"sm\" animated \u002F>\n  \u003CUiProgressBar :value=\"0\" indeterminate aria-label=\"Loading\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[282,303,304,320,371,406,439],{"__ignoreMap":301},[305,306,309,313,317],"span",{"class":307,"line":308},"line",1,[305,310,312],{"class":311},"sMK4o","\u003C",[305,314,316],{"class":315},"swJcz","template",[305,318,319],{"class":311},">\n",[305,321,323,326,328,332,335,338,342,344,347,349,351,354,356,359,361,363,366,368],{"class":307,"line":322},2,[305,324,325],{"class":311},"  \u003C",[305,327,284],{"class":315},[305,329,331],{"class":330},"spNyl"," :value",[305,333,334],{"class":311},"=",[305,336,337],{"class":311},"\"",[305,339,341],{"class":340},"sfazB","60",[305,343,337],{"class":311},[305,345,346],{"class":330}," aria-label",[305,348,334],{"class":311},[305,350,337],{"class":311},[305,352,353],{"class":340},"Upload progress",[305,355,337],{"class":311},[305,357,358],{"class":330}," text",[305,360,334],{"class":311},[305,362,337],{"class":311},[305,364,365],{"class":340},"60%",[305,367,337],{"class":311},[305,369,370],{"class":311}," \u002F>\n",[305,372,374,376,378,380,382,384,387,389,392,394,396,399,401,404],{"class":307,"line":373},3,[305,375,325],{"class":311},[305,377,284],{"class":315},[305,379,331],{"class":330},[305,381,334],{"class":311},[305,383,337],{"class":311},[305,385,386],{"class":340},"40",[305,388,337],{"class":311},[305,390,391],{"class":330}," size",[305,393,334],{"class":311},[305,395,337],{"class":311},[305,397,398],{"class":340},"sm",[305,400,337],{"class":311},[305,402,403],{"class":330}," animated",[305,405,370],{"class":311},[305,407,409,411,413,415,417,419,422,424,427,429,431,433,435,437],{"class":307,"line":408},4,[305,410,325],{"class":311},[305,412,284],{"class":315},[305,414,331],{"class":330},[305,416,334],{"class":311},[305,418,337],{"class":311},[305,420,421],{"class":340},"0",[305,423,337],{"class":311},[305,425,426],{"class":330}," indeterminate",[305,428,346],{"class":330},[305,430,334],{"class":311},[305,432,337],{"class":311},[305,434,210],{"class":340},[305,436,337],{"class":311},[305,438,370],{"class":311},[305,440,442,445,447],{"class":307,"line":441},5,[305,443,444],{"class":311},"\u003C\u002F",[305,446,316],{"class":315},[305,448,319],{"class":311},[291,450,452],{"id":451},"use-a-gradient","Use a gradient",[296,454,456],{"className":298,"code":455,"language":300,"meta":301,"style":301},"\u003Ctemplate>\n  \u003CUiProgressBar :value=\"75\" gradient custom-class=\"g-cyan\" \u002F>\n\u003C\u002Ftemplate>\n",[282,457,458,466,500],{"__ignoreMap":301},[305,459,460,462,464],{"class":307,"line":308},[305,461,312],{"class":311},[305,463,316],{"class":315},[305,465,319],{"class":311},[305,467,468,470,472,474,476,478,481,483,486,489,491,493,496,498],{"class":307,"line":322},[305,469,325],{"class":311},[305,471,284],{"class":315},[305,473,331],{"class":330},[305,475,334],{"class":311},[305,477,337],{"class":311},[305,479,480],{"class":340},"75",[305,482,337],{"class":311},[305,484,485],{"class":330}," gradient",[305,487,488],{"class":330}," custom-class",[305,490,334],{"class":311},[305,492,337],{"class":311},[305,494,495],{"class":340},"g-cyan",[305,497,337],{"class":311},[305,499,370],{"class":311},[305,501,502,504,506],{"class":307,"line":373},[305,503,444],{"class":311},[305,505,316],{"class":315},[305,507,319],{"class":311},[291,509,511],{"id":510},"add-a-spinner","Add a spinner",[296,513,515],{"className":298,"code":514,"language":300,"meta":301,"style":301},"\u003Ctemplate>\n  \u003CUiProgressSpinner size=\"2rem\" \u002F>\n\u003C\u002Ftemplate>\n",[282,516,517,525,544],{"__ignoreMap":301},[305,518,519,521,523],{"class":307,"line":308},[305,520,312],{"class":311},[305,522,316],{"class":315},[305,524,319],{"class":311},[305,526,527,529,531,533,535,537,540,542],{"class":307,"line":322},[305,528,325],{"class":311},[305,530,288],{"class":315},[305,532,391],{"class":330},[305,534,334],{"class":311},[305,536,337],{"class":311},[305,538,539],{"class":340},"2rem",[305,541,337],{"class":311},[305,543,370],{"class":311},[305,545,546,548,550],{"class":307,"line":373},[305,547,444],{"class":311},[305,549,316],{"class":315},[305,551,319],{"class":311},[291,553,555],{"id":554},"uiprogressbar-props","UiProgressBar props",[557,558,559,578],"table",{},[560,561,562],"thead",{},[563,564,565,569,572,575],"tr",{},[566,567,568],"th",{},"Prop",[566,570,571],{},"Type",[566,573,574],{},"Default",[566,576,577],{},"Description",[579,580,581,600,617,634,654,680,698,715],"tbody",{},[563,582,583,589,594,597],{},[584,585,586],"td",{},[282,587,588],{},"value",[584,590,591],{},[282,592,593],{},"number",[584,595,596],{},"—",[584,598,599],{},"Current value (0–100 by default).",[563,601,602,607,612,614],{},[584,603,604],{},[282,605,606],{},"ariaLabel",[584,608,609],{},[282,610,611],{},"string",[584,613,596],{},[584,615,616],{},"Accessible name.",[563,618,619,624,629,631],{},[584,620,621],{},[282,622,623],{},"size",[584,625,626],{},[282,627,628],{},"'sm' | 'lg'",[584,630,596],{},[584,632,633],{},"Bar height.",[563,635,636,641,646,651],{},[584,637,638],{},[282,639,640],{},"animated",[584,642,643],{},[282,644,645],{},"boolean",[584,647,648],{},[282,649,650],{},"false",[584,652,653],{},"Animated stripes.",[563,655,656,661,665,669],{},[584,657,658],{},[282,659,660],{},"gradient",[584,662,663],{},[282,664,645],{},[584,666,667],{},[282,668,650],{},[584,670,671,672,675,676,679],{},"Gradient fill (add ",[282,673,674],{},"g-*"," via ",[282,677,678],{},"customClass",").",[563,681,682,687,691,695],{},[584,683,684],{},[282,685,686],{},"indeterminate",[584,688,689],{},[282,690,645],{},[584,692,693],{},[282,694,650],{},[584,696,697],{},"Unknown-progress mode.",[563,699,700,705,710,712],{},[584,701,702],{},[282,703,704],{},"text",[584,706,707],{},[282,708,709],{},"string | null",[584,711,596],{},[584,713,714],{},"Label inside the bar.",[563,716,717,726,730,737],{},[584,718,719,722,723],{},[282,720,721],{},"ariaValuemin"," \u002F ",[282,724,725],{},"ariaValuemax",[584,727,728],{},[282,729,593],{},[584,731,732,722,734],{},[282,733,421],{},[282,735,736],{},"100",[584,738,739],{},"ARIA range.",[291,741,743],{"id":742},"uiprogressspinner-props","UiProgressSpinner props",[557,745,746,758],{},[560,747,748],{},[563,749,750,752,754,756],{},[566,751,568],{},[566,753,571],{},[566,755,574],{},[566,757,577],{},[579,759,760,784],{},[563,761,762,766,770,775],{},[584,763,764],{},[282,765,623],{},[584,767,768],{},[282,769,611],{},[584,771,772],{},[282,773,774],{},"'1.25rem'",[584,776,777,778,780,781,679],{},"CSS size (e.g. ",[282,779,539],{},", ",[282,782,783],{},"24px",[563,785,786,790,795,797],{},[584,787,788],{},[282,789,678],{},[584,791,792],{},[282,793,794],{},"string | string[] | Record\u003Cstring, boolean> | null",[584,796,596],{},[584,798,799],{},"Extra classes.",[801,802,803],"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 .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":301,"searchDepth":322,"depth":322,"links":805},[806,807,808,809,810],{"id":293,"depth":322,"text":294},{"id":451,"depth":322,"text":452},{"id":510,"depth":322,"text":511},{"id":554,"depth":322,"text":555},{"id":742,"depth":322,"text":743},"Indicate progress with UiProgressBar and UiProgressSpinner.","md",null,{},{"icon":242},{"title":239,"description":811},"dSCtzlik22oPB61vRWgg40JNY9-08up7qjM-nDdInRA",[819,821],{"title":234,"path":235,"stem":236,"description":820,"icon":237,"children":-1},"A popover menu with a header, avatar, and navigation items.",{"title":244,"path":245,"stem":246,"description":822,"icon":247,"children":-1},"A compact segmented switch with an animated indicator.",1782196219260]