[{"data":1,"prerenderedAt":631},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-indicator":12,"i-ph:code":629},{"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=\"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>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\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>",{"id":13,"title":14,"body":15,"description":622,"extension":623,"meta":624,"navigation":126,"path":625,"seo":626,"stem":627,"__hash__":628},"docs\u002Fdocs\u002Fcomponents\u002Findicator.md","Indicator",{"type":16,"value":17,"toc":617},"minimark",[18,22,38,334,339,475,479,510,514,517,613],[19,20,14],"h1",{"id":21},"indicator",[23,24,25,26,30,31,30,34,37],"p",{},"A small dot indicator that can be used standalone or attached to other components like ",[27,28,29],"code",{},"Avatar",", ",[27,32,33],{},"Badge",[27,35,36],{},"Buttons"," and more to convey status such as online presence or alerts.",[39,40,42],"indicator-example",{"source-path":41},"Indicator\u002FIndicator.vue",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Avatar, Badge, Indicator } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAvatar url=\"https:\u002F\u002Fgithub.com\u002Fdolanske.png\" size=\"l\">\n    \u003Ctemplate #overlay>\n      \u003CIndicator variant=\"online\" position=\"bottom-right\" outline \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FAvatar>\n\n  \u003CBadge outline size=\"l\">\n    Important\n    \u003CIndicator variant=\"alert\" position=\"top-right\" ripple \u002F>\n  \u003C\u002FBadge>\n\u003C\u002Ftemplate>\n","vue","",[27,50,51,71,111,121,128,138,174,191,229,239,249,254,275,282,316,325],{"__ignoreMap":48},[52,53,56,60,64,68],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sP76a","\u003C",[52,61,63],{"class":62},"sKpE2","script",[52,65,67],{"class":66},"sflEz"," setup",[52,69,70],{"class":58},">\n",[52,72,74,77,80,83,86,89,91,94,97,100,104,108],{"class":54,"line":73},2,[52,75,76],{"class":62},"import",[52,78,79],{"class":58}," {",[52,81,82],{"class":66}," Avatar",[52,84,85],{"class":58},",",[52,87,88],{"class":66}," Badge",[52,90,85],{"class":58},[52,92,93],{"class":66}," Indicator",[52,95,96],{"class":58}," }",[52,98,99],{"class":62}," from",[52,101,103],{"class":102},"sBR95"," '",[52,105,107],{"class":106},"sfmH-","@dolanske\u002Fvui",[52,109,110],{"class":102},"'\n",[52,112,114,117,119],{"class":54,"line":113},3,[52,115,116],{"class":58},"\u003C\u002F",[52,118,63],{"class":62},[52,120,70],{"class":58},[52,122,124],{"class":54,"line":123},4,[52,125,127],{"emptyLinePlaceholder":126},true,"\n",[52,129,131,133,136],{"class":54,"line":130},5,[52,132,59],{"class":58},[52,134,135],{"class":62},"template",[52,137,70],{"class":58},[52,139,141,144,146,149,152,155,158,160,163,165,167,170,172],{"class":54,"line":140},6,[52,142,143],{"class":58},"  \u003C",[52,145,29],{"class":62},[52,147,148],{"class":66}," url",[52,150,151],{"class":58},"=",[52,153,154],{"class":102},"\"",[52,156,157],{"class":106},"https:\u002F\u002Fgithub.com\u002Fdolanske.png",[52,159,154],{"class":102},[52,161,162],{"class":66}," size",[52,164,151],{"class":58},[52,166,154],{"class":102},[52,168,169],{"class":106},"l",[52,171,154],{"class":102},[52,173,70],{"class":58},[52,175,177,180,182,185,189],{"class":54,"line":176},7,[52,178,179],{"class":58},"    \u003C",[52,181,135],{"class":62},[52,183,184],{"class":58}," #",[52,186,188],{"class":187},"sRTv0","overlay",[52,190,70],{"class":58},[52,192,194,197,199,202,204,206,209,211,214,216,218,221,223,226],{"class":54,"line":193},8,[52,195,196],{"class":58},"      \u003C",[52,198,14],{"class":62},[52,200,201],{"class":66}," variant",[52,203,151],{"class":58},[52,205,154],{"class":102},[52,207,208],{"class":106},"online",[52,210,154],{"class":102},[52,212,213],{"class":66}," position",[52,215,151],{"class":58},[52,217,154],{"class":102},[52,219,220],{"class":106},"bottom-right",[52,222,154],{"class":102},[52,224,225],{"class":66}," outline",[52,227,228],{"class":58}," \u002F>\n",[52,230,232,235,237],{"class":54,"line":231},9,[52,233,234],{"class":58},"    \u003C\u002F",[52,236,135],{"class":62},[52,238,70],{"class":58},[52,240,242,245,247],{"class":54,"line":241},10,[52,243,244],{"class":58},"  \u003C\u002F",[52,246,29],{"class":62},[52,248,70],{"class":58},[52,250,252],{"class":54,"line":251},11,[52,253,127],{"emptyLinePlaceholder":126},[52,255,257,259,261,263,265,267,269,271,273],{"class":54,"line":256},12,[52,258,143],{"class":58},[52,260,33],{"class":62},[52,262,225],{"class":66},[52,264,162],{"class":66},[52,266,151],{"class":58},[52,268,154],{"class":102},[52,270,169],{"class":106},[52,272,154],{"class":102},[52,274,70],{"class":58},[52,276,278],{"class":54,"line":277},13,[52,279,281],{"class":280},"sX1ls","    Important\n",[52,283,285,287,289,291,293,295,298,300,302,304,306,309,311,314],{"class":54,"line":284},14,[52,286,179],{"class":58},[52,288,14],{"class":62},[52,290,201],{"class":66},[52,292,151],{"class":58},[52,294,154],{"class":102},[52,296,297],{"class":106},"alert",[52,299,154],{"class":102},[52,301,213],{"class":66},[52,303,151],{"class":58},[52,305,154],{"class":102},[52,307,308],{"class":106},"top-right",[52,310,154],{"class":102},[52,312,313],{"class":66}," ripple",[52,315,228],{"class":58},[52,317,319,321,323],{"class":54,"line":318},15,[52,320,244],{"class":58},[52,322,33],{"class":62},[52,324,70],{"class":58},[52,326,328,330,332],{"class":54,"line":327},16,[52,329,116],{"class":58},[52,331,135],{"class":62},[52,333,70],{"class":58},[335,336,338],"h3",{"id":337},"props","Props",[340,341,342,358],"table",{},[343,344,345],"thead",{},[346,347,348,352,355],"tr",{},[349,350,351],"th",{},"Name",[349,353,354],{},"Default",[349,356,357],{},"Type",[359,360,361,389,413,437,457],"tbody",{},[346,362,363,369,372],{},[364,365,366],"td",{},[27,367,368],{},"variant",[364,370,371],{},"—",[364,373,374,376,377,376,379,376,382,376,385,388],{},[27,375,297],{}," ",[27,378,208],{},[27,380,381],{},"offline",[27,383,384],{},"away",[386,387],"br",{}," Controls the color of the indicator dot",[346,390,391,396,398],{},[364,392,393],{},[27,394,395],{},"position",[364,397,371],{},[364,399,400,376,402,376,405,376,407,376,410,412],{},[27,401,308],{},[27,403,404],{},"top-left",[27,406,220],{},[27,408,409],{},"bottom-left",[386,411],{}," When set, positions the indicator absolutely over its child content",[346,414,415,420,425],{},[364,416,417],{},[27,418,419],{},"size",[364,421,422],{},[27,423,424],{},"m",[364,426,427,376,430,376,432,376,434,436],{},[27,428,429],{},"s",[27,431,424],{},[27,433,169],{},[386,435],{}," Controls the size of the indicator dot",[346,438,439,444,449],{},[364,440,441],{},[27,442,443],{},"outline",[364,445,446],{},[27,447,448],{},"false",[364,450,451,376,454,456],{},[27,452,453],{},"boolean",[386,455],{}," Adds a border around the dot, useful for contrast against colored backgrounds",[346,458,459,464,468],{},[364,460,461],{},[27,462,463],{},"ripple",[364,465,466],{},[27,467,448],{},[364,469,470,376,472,474],{},[27,471,453],{},[386,473],{}," Adds a pulsing ripple animation to the indicator, useful for drawing attention",[335,476,478],{"id":477},"slots","Slots",[340,480,481,493],{},[343,482,483],{},[346,484,485,487,490],{},[349,486,351],{},[349,488,489],{},"Accepts",[349,491,492],{},"Description",[359,494,495],{},[346,496,497,502,507],{},[364,498,499],{},[27,500,501],{},"default",[364,503,504],{},[27,505,506],{},"any",[364,508,509],{},"Optional content to wrap. Useful if you want to place a tiny icon inside",[335,511,513],{"id":512},"tokens","Tokens",[23,515,516],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[340,518,519,530],{},[343,520,521],{},[346,522,523,526,528],{},[349,524,525],{},"Token",[349,527,354],{},[349,529,492],{},[359,531,532,547,566,583,598],{},[346,533,534,539,544],{},[364,535,536],{},[27,537,538],{},"--vui-indicator-size",[364,540,541],{},[27,542,543],{},"8px",[364,545,546],{},"Dot diameter",[346,548,549,554,563],{},[364,550,551],{},[27,552,553],{},"--vui-indicator-color",[364,555,556],{},[557,558,560],"a",{"href":559},"\u002Fdocs\u002Ftokens\u002Fcolors",[27,561,562],{},"var(--color-text-lighter)",[364,564,565],{},"Dot color",[346,567,568,573,580],{},[364,569,570],{},[27,571,572],{},"--vui-indicator-outline-color",[364,574,575],{},[557,576,577],{"href":559},[27,578,579],{},"var(--color-bg)",[364,581,582],{},"Outline ring color",[346,584,585,590,595],{},[364,586,587],{},[27,588,589],{},"--vui-indicator-outline-size",[364,591,592],{},[27,593,594],{},"2px",[364,596,597],{},"Outline ring thickness",[346,599,600,605,610],{},[364,601,602],{},[27,603,604],{},"--vui-indicator-offset",[364,606,607],{},[27,608,609],{},"0",[364,611,612],{},"Offset from anchor corner",[614,615,616],"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 .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}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":48,"searchDepth":73,"depth":73,"links":618},[619,620,621],{"id":337,"depth":113,"text":338},{"id":477,"depth":113,"text":478},{"id":512,"depth":113,"text":513},"A small dot indicator that can be used standalone or attached to other components like Avatar, Badge, Buttons and more to convey status such as online presence or alerts.","md",{},"\u002Fdocs\u002Fcomponents\u002Findicator",{"title":14,"description":622},"docs\u002Fcomponents\u002Findicator","M4hSGuuIZWD2isukJtW19zVZ6l8xsDODj5H1gY3qD54",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":630},"\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>",1782200882861]