[{"data":1,"prerenderedAt":664},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-avatar":273,"-colorffy-ui-components-avatar-surround":659},[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":146,"body":275,"description":653,"extension":373,"links":654,"meta":655,"navigation":656,"path":147,"seo":657,"stem":148,"__hash__":658},"docs\u002F3.colorffy-ui\u002F2.components\u002F03.avatar.md",{"type":276,"value":277,"toc":648},"minimark",[278,298,303,421,425,509,513,644],[279,280,281,285,286,289,290,293,294,297],"p",{},[282,283,284],"code",{},"UiAvatar"," shows an image (",[282,287,288],{},"src",") or falls back to ",[282,291,292],{},"initials",", with an optional decorative ",[282,295,296],{},"maskShape",".",[299,300,302],"h2",{"id":301},"add-an-avatar","Add an avatar",[304,305,310],"pre",{"className":306,"code":307,"language":308,"meta":309,"style":309},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUiAvatar src=\"\u002Fusers\u002Fjane.jpg\" alt=\"Jane Doe\" size=\"md\" \u002F>\n  \u003CUiAvatar initials=\"JD\" size=\"lg\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[282,311,312,328,379,411],{"__ignoreMap":309},[313,314,317,321,325],"span",{"class":315,"line":316},"line",1,[313,318,320],{"class":319},"sMK4o","\u003C",[313,322,324],{"class":323},"swJcz","template",[313,326,327],{"class":319},">\n",[313,329,331,334,336,340,343,346,350,352,355,357,359,362,364,367,369,371,374,376],{"class":315,"line":330},2,[313,332,333],{"class":319},"  \u003C",[313,335,284],{"class":323},[313,337,339],{"class":338},"spNyl"," src",[313,341,342],{"class":319},"=",[313,344,345],{"class":319},"\"",[313,347,349],{"class":348},"sfazB","\u002Fusers\u002Fjane.jpg",[313,351,345],{"class":319},[313,353,354],{"class":338}," alt",[313,356,342],{"class":319},[313,358,345],{"class":319},[313,360,361],{"class":348},"Jane Doe",[313,363,345],{"class":319},[313,365,366],{"class":338}," size",[313,368,342],{"class":319},[313,370,345],{"class":319},[313,372,373],{"class":348},"md",[313,375,345],{"class":319},[313,377,378],{"class":319}," \u002F>\n",[313,380,382,384,386,389,391,393,396,398,400,402,404,407,409],{"class":315,"line":381},3,[313,383,333],{"class":319},[313,385,284],{"class":323},[313,387,388],{"class":338}," initials",[313,390,342],{"class":319},[313,392,345],{"class":319},[313,394,395],{"class":348},"JD",[313,397,345],{"class":319},[313,399,366],{"class":338},[313,401,342],{"class":319},[313,403,345],{"class":319},[313,405,406],{"class":348},"lg",[313,408,345],{"class":319},[313,410,378],{"class":319},[313,412,414,417,419],{"class":315,"line":413},4,[313,415,416],{"class":319},"\u003C\u002F",[313,418,324],{"class":323},[313,420,327],{"class":319},[299,422,424],{"id":423},"apply-a-mask-shape","Apply a mask shape",[304,426,428],{"className":306,"code":427,"language":308,"meta":309,"style":309},"\u003Ctemplate>\n  \u003CUiAvatar src=\"\u002Fusers\u002Fjane.jpg\" mask-shape=\"gem\" \u002F>\n  \u003CUiAvatar initials=\"GG\" mask-shape=\"cookie-9\" mask-stretch \u002F>\n\u003C\u002Ftemplate>\n",[282,429,430,438,468,501],{"__ignoreMap":309},[313,431,432,434,436],{"class":315,"line":316},[313,433,320],{"class":319},[313,435,324],{"class":323},[313,437,327],{"class":319},[313,439,440,442,444,446,448,450,452,454,457,459,461,464,466],{"class":315,"line":330},[313,441,333],{"class":319},[313,443,284],{"class":323},[313,445,339],{"class":338},[313,447,342],{"class":319},[313,449,345],{"class":319},[313,451,349],{"class":348},[313,453,345],{"class":319},[313,455,456],{"class":338}," mask-shape",[313,458,342],{"class":319},[313,460,345],{"class":319},[313,462,463],{"class":348},"gem",[313,465,345],{"class":319},[313,467,378],{"class":319},[313,469,470,472,474,476,478,480,483,485,487,489,491,494,496,499],{"class":315,"line":381},[313,471,333],{"class":319},[313,473,284],{"class":323},[313,475,388],{"class":338},[313,477,342],{"class":319},[313,479,345],{"class":319},[313,481,482],{"class":348},"GG",[313,484,345],{"class":319},[313,486,456],{"class":338},[313,488,342],{"class":319},[313,490,345],{"class":319},[313,492,493],{"class":348},"cookie-9",[313,495,345],{"class":319},[313,497,498],{"class":338}," mask-stretch",[313,500,378],{"class":319},[313,502,503,505,507],{"class":315,"line":413},[313,504,416],{"class":319},[313,506,324],{"class":323},[313,508,327],{"class":319},[299,510,512],{"id":511},"props","Props",[514,515,516,535],"table",{},[517,518,519],"thead",{},[520,521,522,526,529,532],"tr",{},[523,524,525],"th",{},"Prop",[523,527,528],{},"Type",[523,530,531],{},"Default",[523,533,534],{},"Description",[536,537,538,556,575,591,608,624],"tbody",{},[520,539,540,545,550,553],{},[541,542,543],"td",{},[282,544,288],{},[541,546,547],{},[282,548,549],{},"string",[541,551,552],{},"—",[541,554,555],{},"Image URL.",[520,557,558,563,567,572],{},[541,559,560],{},[282,561,562],{},"alt",[541,564,565],{},[282,566,549],{},[541,568,569],{},[282,570,571],{},"'Avatar'",[541,573,574],{},"Accessible name.",[520,576,577,581,586,588],{},[541,578,579],{},[282,580,292],{},[541,582,583],{},[282,584,585],{},"string | null",[541,587,552],{},[541,589,590],{},"Fallback initials when no image is set.",[520,592,593,598,603,605],{},[541,594,595],{},[282,596,597],{},"size",[541,599,600],{},[282,601,602],{},"'sm' | 'md' | 'lg' | 'navbar' | 'menu'",[541,604,552],{},[541,606,607],{},"Avatar size.",[520,609,610,614,619,621],{},[541,611,612],{},[282,613,296],{},[541,615,616],{},[282,617,618],{},"'arch' | 'pill' | 'sunny' | 'gem' | 'cookie-6' | 'cookie-9' | 'cookie-12' | 'clover-4' | 'clover-8' | 'bum' | null",[541,620,552],{},[541,622,623],{},"Decorative mask.",[520,625,626,631,636,641],{},[541,627,628],{},[282,629,630],{},"maskStretch",[541,632,633],{},[282,634,635],{},"boolean",[541,637,638],{},[282,639,640],{},"false",[541,642,643],{},"Stretch the mask to 115%.",[645,646,647],"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":309,"searchDepth":330,"depth":330,"links":649},[650,651,652],{"id":301,"depth":330,"text":302},{"id":423,"depth":330,"text":424},{"id":511,"depth":330,"text":512},"Display a user image or initials with optional mask shapes.",null,{},{"icon":149},{"title":146,"description":653},"9WniR7aOx5OuZfYUYREF7z87f6jTANKniFo49HXcqB4",[660,662],{"title":141,"path":142,"stem":143,"description":661,"icon":144,"children":-1},"Communicate status with banners, tonal alerts, snackbars, and toasts.",{"title":151,"path":152,"stem":153,"description":663,"icon":154,"children":-1},"Label and categorize with UiBadge, or show counts with UiBadgeGroup.",1782196219260]