[{"data":1,"prerenderedAt":590},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-right":8,"i-ph:caret-left":10,"components-avatar":12,"i-ph:code":586,"i-ph:person":588},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":580,"meta":581,"navigation":104,"path":582,"seo":583,"stem":584,"__hash__":585},"docs\u002Fdocs\u002Fcomponents\u002Favatar.md","Avatar",{"type":16,"value":17,"toc":575},"minimark",[18,22,26,245,250,384,388,462,466,469,571],[19,20,14],"h1",{"id":21},"avatar",[23,24,25],"p",{},"The Avatar component displays a thumbnail image representing a user or entity. When no image source is provided, it shows a default avatar illustration.",[27,28,30],"avatar-example",{"source-path":29},"Avatar\u002FAvatar.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Avatar } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAvatar \u002F>\n  \u003CAvatar>JD\u003C\u002FAvatar>\n  \u003CAvatar url=\"https:\u002F\u002Fgithub.com\u002Fdolanske.png\" size=\"l\" \u002F>\n  \u003CAvatar :size=\"80\">\n    \u003CIcon name=\"ph:person\" \u002F>\n  \u003C\u002FAvatar>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,89,99,106,116,127,147,182,203,226,236],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,82,86],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Avatar",[41,73,74],{"class":47}," }",[41,76,77],{"class":51}," from",[41,79,81],{"class":80},"sBR95"," '",[41,83,85],{"class":84},"sfmH-","@dolanske\u002Fvui",[41,87,88],{"class":80},"'\n",[41,90,92,95,97],{"class":43,"line":91},3,[41,93,94],{"class":47},"\u003C\u002F",[41,96,52],{"class":51},[41,98,59],{"class":47},[41,100,102],{"class":43,"line":101},4,[41,103,105],{"emptyLinePlaceholder":104},true,"\n",[41,107,109,111,114],{"class":43,"line":108},5,[41,110,48],{"class":47},[41,112,113],{"class":51},"template",[41,115,59],{"class":47},[41,117,119,122,124],{"class":43,"line":118},6,[41,120,121],{"class":47},"  \u003C",[41,123,14],{"class":51},[41,125,126],{"class":47}," \u002F>\n",[41,128,130,132,134,137,141,143,145],{"class":43,"line":129},7,[41,131,121],{"class":47},[41,133,14],{"class":51},[41,135,136],{"class":47},">",[41,138,140],{"class":139},"sX1ls","JD",[41,142,94],{"class":47},[41,144,14],{"class":51},[41,146,59],{"class":47},[41,148,150,152,154,157,160,163,166,168,171,173,175,178,180],{"class":43,"line":149},8,[41,151,121],{"class":47},[41,153,14],{"class":51},[41,155,156],{"class":55}," url",[41,158,159],{"class":47},"=",[41,161,162],{"class":80},"\"",[41,164,165],{"class":84},"https:\u002F\u002Fgithub.com\u002Fdolanske.png",[41,167,162],{"class":80},[41,169,170],{"class":55}," size",[41,172,159],{"class":47},[41,174,162],{"class":80},[41,176,177],{"class":84},"l",[41,179,162],{"class":80},[41,181,126],{"class":47},[41,183,185,187,189,192,194,196,199,201],{"class":43,"line":184},9,[41,186,121],{"class":47},[41,188,14],{"class":51},[41,190,191],{"class":55}," :size",[41,193,159],{"class":47},[41,195,162],{"class":80},[41,197,198],{"class":84},"80",[41,200,162],{"class":80},[41,202,59],{"class":47},[41,204,206,209,212,215,217,219,222,224],{"class":43,"line":205},10,[41,207,208],{"class":47},"    \u003C",[41,210,211],{"class":51},"Icon",[41,213,214],{"class":55}," name",[41,216,159],{"class":47},[41,218,162],{"class":80},[41,220,221],{"class":84},"ph:person",[41,223,162],{"class":80},[41,225,126],{"class":47},[41,227,229,232,234],{"class":43,"line":228},11,[41,230,231],{"class":47},"  \u003C\u002F",[41,233,14],{"class":51},[41,235,59],{"class":47},[41,237,239,241,243],{"class":43,"line":238},12,[41,240,94],{"class":47},[41,242,113],{"class":51},[41,244,59],{"class":47},[246,247,249],"h3",{"id":248},"props","Props",[251,252,253,269],"table",{},[254,255,256],"thead",{},[257,258,259,263,266],"tr",{},[260,261,262],"th",{},"Name",[260,264,265],{},"Default",[260,267,268],{},"Type",[270,271,272,302,332,350,366],"tbody",{},[257,273,274,280,285],{},[275,276,277],"td",{},[38,278,279],{},"size",[275,281,282],{},[38,283,284],{},"m",[275,286,287,290,291,290,293,290,295,290,298,301],{},[38,288,289],{},"s"," ",[38,292,284],{},[38,294,177],{},[38,296,297],{},"number",[299,300],"br",{}," The size of the avatar. Can be a predefined size or custom number",[257,303,304,309,314],{},[275,305,306],{},[38,307,308],{},"radius",[275,310,311],{},[38,312,313],{},"pill",[275,315,316,290,319,290,321,290,323,290,325,290,327,290,329,331],{},[38,317,318],{},"xs",[38,320,289],{},[38,322,284],{},[38,324,177],{},[38,326,313],{},[38,328,297],{},[299,330],{}," The roundness of the avatar. The default is a circle",[257,333,334,339,342],{},[275,335,336],{},[38,337,338],{},"url",[275,340,341],{},"—",[275,343,344,290,347,349],{},[38,345,346],{},"string",[299,348],{}," URL of the avatar image to display",[257,351,352,357,359],{},[275,353,354],{},[38,355,356],{},"fallback",[275,358,341],{},[275,360,361,290,363,365],{},[38,362,346],{},[299,364],{}," Text to show when the image fails to load",[257,367,368,373,377],{},[275,369,370],{},[38,371,372],{},"alt",[275,374,375],{},[38,376,21],{},[275,378,379,290,381,383],{},[38,380,346],{},[299,382],{}," Alt text for the avatar image",[246,385,387],{"id":386},"slots","Slots",[251,389,390,402],{},[254,391,392],{},[257,393,394,396,399],{},[260,395,262],{},[260,397,398],{},"Accepts",[260,400,401],{},"Description",[270,403,404,425,444],{},[257,405,406,411,416],{},[275,407,408],{},[38,409,410],{},"default",[275,412,413],{},[38,414,415],{},"any",[275,417,418,419,421,422],{},"Content to display inside the avatar (e.g. initials or text). Takes priority over ",[38,420,338],{}," and ",[38,423,424],{},"icon",[257,426,427,431,435],{},[275,428,429],{},[38,430,424],{},[275,432,433],{},[38,434,415],{},[275,436,437,438,440,441,443],{},"Custom icon to show as the fallback when no ",[38,439,338],{}," or ",[38,442,410],{}," slot content is provided",[257,445,446,451,455],{},[275,447,448],{},[38,449,450],{},"overlay",[275,452,453],{},[38,454,415],{},[275,456,457,458,461],{},"Content rendered as an absolute overlay on top of the avatar (e.g. an ",[38,459,460],{},"Indicator"," or action button)",[246,463,465],{"id":464},"tokens","Tokens",[23,467,468],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[251,470,471,482],{},[254,472,473],{},[257,474,475,478,480],{},[260,476,477],{},"Token",[260,479,265],{},[260,481,401],{},[270,483,484,503,521,536,554],{},[257,485,486,491,500],{},[275,487,488],{},[38,489,490],{},"--vui-avatar-size",[275,492,493],{},[494,495,497],"a",{"href":496},"\u002Fdocs\u002Ftokens\u002Flayout#interactive-element-height",[38,498,499],{},"var(--interactive-el-height)",[275,501,502],{},"Avatar width and height",[257,504,505,510,518],{},[275,506,507],{},[38,508,509],{},"--vui-avatar-font-size",[275,511,512],{},[494,513,515],{"href":514},"\u002Fdocs\u002Ftokens\u002Ftext",[38,516,517],{},"var(--font-size-s)",[275,519,520],{},"Font size for initials",[257,522,523,528,533],{},[275,524,525],{},[38,526,527],{},"--vui-avatar-border-radius",[275,529,530],{},[38,531,532],{},"100%",[275,534,535],{},"Border radius",[257,537,538,543,551],{},[275,539,540],{},[38,541,542],{},"--vui-avatar-background-color",[275,544,545],{},[494,546,548],{"href":547},"\u002Fdocs\u002Ftokens\u002Fcolors",[38,549,550],{},"var(--color-bg-raised)",[275,552,553],{},"Background color",[257,555,556,561,568],{},[275,557,558],{},[38,559,560],{},"--vui-avatar-color",[275,562,563],{},[494,564,565],{"href":547},[38,566,567],{},"var(--color-text-light)",[275,569,570],{},"Text color",[572,573,574],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}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 .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);}",{"title":36,"searchDepth":62,"depth":62,"links":576},[577,578,579],{"id":248,"depth":91,"text":249},{"id":386,"depth":91,"text":387},{"id":464,"depth":91,"text":465},"md",{},"\u002Fdocs\u002Fcomponents\u002Favatar",{"title":14,"description":25},"docs\u002Fcomponents\u002Favatar","X_5nmhnmsedJIb0peseq81eXp8FQAwWZGUf-HJ6R0Sk",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":587},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":589},"\u003Cpath fill=\"currentColor\" d=\"M160 40a32 32 0 1 0-32 32a32 32 0 0 0 32-32m-32 16a16 16 0 1 1 16-16a16 16 0 0 1-16 16m90.34 78.05l-45.17-51.22a32 32 0 0 0-24-10.83h-42.34a32 32 0 0 0-24 10.83l-45.17 51.22a20 20 0 0 0 28.13 28.43l16.3-13.08l-16.54 62.88A20 20 0 0 0 102 228.8l26-44.87l26 44.87a20 20 0 0 0 36.41-16.52l-16.5-62.88l16.3 13.08a20 20 0 0 0 28.13-28.43m-11.51 16.77a4 4 0 0 1-5.66 0c-.21-.2-.42-.4-.65-.58L165 121.76a8 8 0 0 0-12.74 8.24l22.88 87a7.7 7.7 0 0 0 .48 1.35a4 4 0 1 1-7.25 3.38a6 6 0 0 0-.33-.63L134.92 164a8 8 0 0 0-13.84 0L88 221.05a6 6 0 0 0-.33.63a4 4 0 0 1-2.26 2.07a4 4 0 0 1-5-5.45a7.7 7.7 0 0 0 .48-1.35L103.74 130A8 8 0 0 0 91 121.76l-35.52 28.48c-.23.18-.44.38-.65.58a4 4 0 1 1-5.66-5.65c.12-.12.23-.24.34-.37l45.32-51.39a16 16 0 0 1 12-5.41h42.34a16 16 0 0 1 12 5.41l45.32 51.39c.11.13.22.25.34.37a4 4 0 0 1 0 5.65\"\u002F>",1782200881952]