[{"data":1,"prerenderedAt":796},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-loading":273,"-colorffy-ui-components-loading-surround":791},[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":210,"body":275,"description":784,"extension":785,"links":786,"meta":787,"navigation":788,"path":211,"seo":789,"stem":212,"__hash__":790},"docs\u002F3.colorffy-ui\u002F2.components\u002F16.loading.md",{"type":276,"value":277,"toc":776},"minimark",[278,295,300,385,389,392,472,476,527,531,636,640,711,715,761,772],[279,280,281,282,286,287,290,291,294],"p",{},"Three loading components for different moods: ",[283,284,285],"code",{},"UiLoading"," (spinner), ",[283,288,289],{},"UiExpressiveLoading"," (animated, cycling messages), and ",[283,292,293],{},"UiShapeLoading"," (animated shapes).",[296,297,299],"h2",{"id":298},"spinner-loading","Spinner loading",[301,302,307],"pre",{"className":303,"code":304,"language":305,"meta":306,"style":306},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUiLoading title=\"Loading\" subtitle=\"Fetching your data…\" spinner-size=\"48px\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[283,308,309,325,375],{"__ignoreMap":306},[310,311,314,318,322],"span",{"class":312,"line":313},"line",1,[310,315,317],{"class":316},"sMK4o","\u003C",[310,319,321],{"class":320},"swJcz","template",[310,323,324],{"class":316},">\n",[310,326,328,331,333,337,340,343,346,348,351,353,355,358,360,363,365,367,370,372],{"class":312,"line":327},2,[310,329,330],{"class":316},"  \u003C",[310,332,285],{"class":320},[310,334,336],{"class":335},"spNyl"," title",[310,338,339],{"class":316},"=",[310,341,342],{"class":316},"\"",[310,344,210],{"class":345},"sfazB",[310,347,342],{"class":316},[310,349,350],{"class":335}," subtitle",[310,352,339],{"class":316},[310,354,342],{"class":316},[310,356,357],{"class":345},"Fetching your data…",[310,359,342],{"class":316},[310,361,362],{"class":335}," spinner-size",[310,364,339],{"class":316},[310,366,342],{"class":316},[310,368,369],{"class":345},"48px",[310,371,342],{"class":316},[310,373,374],{"class":316}," \u002F>\n",[310,376,378,381,383],{"class":312,"line":377},3,[310,379,380],{"class":316},"\u003C\u002F",[310,382,321],{"class":320},[310,384,324],{"class":316},[296,386,388],{"id":387},"expressive-loading","Expressive loading",[279,390,391],{},"Cycles through messages on an interval:",[301,393,395],{"className":303,"code":394,"language":305,"meta":306,"style":306},"\u003Ctemplate>\n  \u003CUiExpressiveLoading\n    :title=\"['Warming up…', 'Almost there…', 'Finishing up…']\"\n    :interval=\"2500\"\n    size=\"lg\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[283,396,397,405,412,427,442,457,463],{"__ignoreMap":306},[310,398,399,401,403],{"class":312,"line":313},[310,400,317],{"class":316},[310,402,321],{"class":320},[310,404,324],{"class":316},[310,406,407,409],{"class":312,"line":327},[310,408,330],{"class":316},[310,410,411],{"class":320},"UiExpressiveLoading\n",[310,413,414,417,419,421,424],{"class":312,"line":377},[310,415,416],{"class":335},"    :title",[310,418,339],{"class":316},[310,420,342],{"class":316},[310,422,423],{"class":345},"['Warming up…', 'Almost there…', 'Finishing up…']",[310,425,426],{"class":316},"\"\n",[310,428,430,433,435,437,440],{"class":312,"line":429},4,[310,431,432],{"class":335},"    :interval",[310,434,339],{"class":316},[310,436,342],{"class":316},[310,438,439],{"class":345},"2500",[310,441,426],{"class":316},[310,443,445,448,450,452,455],{"class":312,"line":444},5,[310,446,447],{"class":335},"    size",[310,449,339],{"class":316},[310,451,342],{"class":316},[310,453,454],{"class":345},"lg",[310,456,426],{"class":316},[310,458,460],{"class":312,"line":459},6,[310,461,462],{"class":316},"  \u002F>\n",[310,464,466,468,470],{"class":312,"line":465},7,[310,467,380],{"class":316},[310,469,321],{"class":320},[310,471,324],{"class":316},[296,473,475],{"id":474},"shape-loading","Shape loading",[301,477,479],{"className":303,"code":478,"language":305,"meta":306,"style":306},"\u003Ctemplate>\n  \u003CUiShapeLoading title=\"Generating\" subtitle=\"This may take a moment\" \u002F>\n\u003C\u002Ftemplate>\n",[283,480,481,489,519],{"__ignoreMap":306},[310,482,483,485,487],{"class":312,"line":313},[310,484,317],{"class":316},[310,486,321],{"class":320},[310,488,324],{"class":316},[310,490,491,493,495,497,499,501,504,506,508,510,512,515,517],{"class":312,"line":327},[310,492,330],{"class":316},[310,494,293],{"class":320},[310,496,336],{"class":335},[310,498,339],{"class":316},[310,500,342],{"class":316},[310,502,503],{"class":345},"Generating",[310,505,342],{"class":316},[310,507,350],{"class":335},[310,509,339],{"class":316},[310,511,342],{"class":316},[310,513,514],{"class":345},"This may take a moment",[310,516,342],{"class":316},[310,518,374],{"class":316},[310,520,521,523,525],{"class":312,"line":377},[310,522,380],{"class":316},[310,524,321],{"class":320},[310,526,324],{"class":316},[296,528,530],{"id":529},"uiloading-props","UiLoading props",[532,533,534,553],"table",{},[535,536,537],"thead",{},[538,539,540,544,547,550],"tr",{},[541,542,543],"th",{},"Prop",[541,545,546],{},"Type",[541,548,549],{},"Default",[541,551,552],{},"Description",[554,555,556,579,599,619],"tbody",{},[538,557,558,568,573,576],{},[559,560,561,564,565],"td",{},[283,562,563],{},"title"," \u002F ",[283,566,567],{},"subtitle",[559,569,570],{},[283,571,572],{},"string | null",[559,574,575],{},"—",[559,577,578],{},"Text.",[538,580,581,586,591,596],{},[559,582,583],{},[283,584,585],{},"spinnerSize",[559,587,588],{},[283,589,590],{},"string | number",[559,592,593],{},[283,594,595],{},"'65px'",[559,597,598],{},"Spinner size.",[538,600,601,606,611,616],{},[559,602,603],{},[283,604,605],{},"hideSpinner",[559,607,608],{},[283,609,610],{},"boolean",[559,612,613],{},[283,614,615],{},"false",[559,617,618],{},"Hide the spinner.",[538,620,621,626,631,633],{},[559,622,623],{},[283,624,625],{},"customClass",[559,627,628],{},[283,629,630],{},"string | string[] | null",[559,632,575],{},[559,634,635],{},"Extra classes.",[296,637,639],{"id":638},"uiexpressiveloading-props","UiExpressiveLoading props",[532,641,642,654],{},[535,643,644],{},[538,645,646,648,650,652],{},[541,647,543],{},[541,649,546],{},[541,651,549],{},[541,653,552],{},[554,655,656,671,691],{},[538,657,658,662,666,668],{},[559,659,660],{},[283,661,563],{},[559,663,664],{},[283,665,630],{},[559,667,575],{},[559,669,670],{},"Message, or list of messages to cycle.",[538,672,673,678,683,688],{},[559,674,675],{},[283,676,677],{},"interval",[559,679,680],{},[283,681,682],{},"number",[559,684,685],{},[283,686,687],{},"3000",[559,689,690],{},"Cycle interval (ms).",[538,692,693,698,703,708],{},[559,694,695],{},[283,696,697],{},"size",[559,699,700],{},[283,701,702],{},"'sm' | 'md' | 'lg'",[559,704,705],{},[283,706,707],{},"'md'",[559,709,710],{},"Size.",[296,712,714],{"id":713},"uishapeloading-props","UiShapeLoading props",[532,716,717,729],{},[535,718,719],{},[538,720,721,723,725,727],{},[541,722,543],{},[541,724,546],{},[541,726,549],{},[541,728,552],{},[554,730,731,747],{},[538,732,733,739,743,745],{},[559,734,735,564,737],{},[283,736,563],{},[283,738,567],{},[559,740,741],{},[283,742,572],{},[559,744,575],{},[559,746,578],{},[538,748,749,753,757,759],{},[559,750,751],{},[283,752,625],{},[559,754,755],{},[283,756,630],{},[559,758,575],{},[559,760,635],{},[762,763,764,765,771],"tip",{},"For a bare inline spinner, use ",[766,767,768],"a",{"href":240},[283,769,770],{},"UiProgressSpinner",".",[773,774,775],"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":306,"searchDepth":327,"depth":327,"links":777},[778,779,780,781,782,783],{"id":298,"depth":327,"text":299},{"id":387,"depth":327,"text":388},{"id":474,"depth":327,"text":475},{"id":529,"depth":327,"text":530},{"id":638,"depth":327,"text":639},{"id":713,"depth":327,"text":714},"Indicate loading with spinner, expressive, and shape loaders.","md",null,{},{"icon":213},{"title":210,"description":784},"DE3Ea_hEM3TwE-J8DLFZXKfVa9TnSOdYHGYm1Yrh-Qg",[792,794],{"title":205,"path":206,"stem":207,"description":793,"icon":208,"children":-1},"Display grouped items with UiListGroup and UiListItem.",{"title":215,"path":216,"stem":217,"description":795,"icon":88,"children":-1},"Show dialogs and confirmations with UiModal and UiConfirmModal.",1782196219260]