[{"data":1,"prerenderedAt":536},["ShallowReactive",2],{"i-ph:magnifying-glass":3,"i-ph:circle":8,"i-ph:moon":10,"i-ph:github-logo":12,"i-ph:brackets-curly":14,"i-ph:file-css":16,"i-ph:rectangle-dashed":18,"i-ph:arrow-left":20,"i-ph:arrow-right":22,"components-indicator":24},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"m229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32M40 112a72 72 0 1 1 72 72a72.08 72.08 0 0 1-72-72\"/>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88\"/>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M233.54 142.23a8 8 0 0 0-8-2a88.08 88.08 0 0 1-109.8-109.8a8 8 0 0 0-10-10a104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.1 103.1 0 0 0 62.52-20.88a104.84 104.84 0 0 0 37-52.91a8 8 0 0 0-1.98-7.98m-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104a106 106 0 0 0 14.92-1.06a89 89 0 0 1-26.02 31.4\"/>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"currentColor\" d=\"M208.31 75.68A59.78 59.78 0 0 0 202.93 28a8 8 0 0 0-6.93-4a59.75 59.75 0 0 0-48 24h-24a59.75 59.75 0 0 0-48-24a8 8 0 0 0-6.93 4a59.78 59.78 0 0 0-5.38 47.68A58.14 58.14 0 0 0 56 104v8a56.06 56.06 0 0 0 48.44 55.47A39.8 39.8 0 0 0 96 192v8H72a24 24 0 0 1-24-24a40 40 0 0 0-40-40a8 8 0 0 0 0 16a24 24 0 0 1 24 24a40 40 0 0 0 40 40h24v16a8 8 0 0 0 16 0v-40a24 24 0 0 1 48 0v40a8 8 0 0 0 16 0v-40a39.8 39.8 0 0 0-8.44-24.53A56.06 56.06 0 0 0 216 112v-8a58.14 58.14 0 0 0-7.69-28.32M200 112a40 40 0 0 1-40 40h-48a40 40 0 0 1-40-40v-8a41.74 41.74 0 0 1 6.9-22.48a8 8 0 0 0 1.1-7.69a43.8 43.8 0 0 1 .79-33.58a43.88 43.88 0 0 1 32.32 20.06a8 8 0 0 0 6.71 3.69h32.35a8 8 0 0 0 6.74-3.69a43.87 43.87 0 0 1 32.32-20.06a43.8 43.8 0 0 1 .77 33.58a8.09 8.09 0 0 0 1 7.65a41.7 41.7 0 0 1 7 22.52Z\"/>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"currentColor\" d=\"M43.18 128a29.8 29.8 0 0 1 8 10.26c4.8 9.9 4.8 22 4.8 33.74c0 24.31 1 36 24 36a8 8 0 0 1 0 16c-17.48 0-29.32-6.14-35.2-18.26c-4.8-9.9-4.8-22-4.8-33.74c0-24.31-1-36-24-36a8 8 0 0 1 0-16c23 0 24-11.69 24-36c0-11.72 0-23.84 4.8-33.74C50.68 38.14 62.52 32 80 32a8 8 0 0 1 0 16c-23 0-24 11.69-24 36c0 11.72 0 23.84-4.8 33.74A29.8 29.8 0 0 1 43.18 128M240 120c-23 0-24-11.69-24-36c0-11.72 0-23.84-4.8-33.74C205.32 38.14 193.48 32 176 32a8 8 0 0 0 0 16c23 0 24 11.69 24 36c0 11.72 0 23.84 4.8 33.74a29.8 29.8 0 0 0 8 10.26a29.8 29.8 0 0 0-8 10.26c-4.8 9.9-4.8 22-4.8 33.74c0 24.31-1 36-24 36a8 8 0 0 0 0 16c17.48 0 29.32-6.14 35.2-18.26c4.8-9.9 4.8-22 4.8-33.74c0-24.31 1-36 24-36a8 8 0 0 0 0-16\"/>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"currentColor\" d=\"M48 180c0 11 7.18 20 16 20a14.24 14.24 0 0 0 10.22-4.66a8 8 0 1 1 11.55 11.06A30 30 0 0 1 64 216c-17.65 0-32-16.15-32-36s14.35-36 32-36a30 30 0 0 1 21.77 9.6a8 8 0 1 1-11.55 11.06A14.24 14.24 0 0 0 64 160c-8.82 0-16 9-16 20m79.6-8.69c-4-1.16-8.14-2.35-10.45-3.84c-1.26-.81-1.23-1-1.12-1.9a4.54 4.54 0 0 1 2-3.67c4.6-3.12 15.34-1.73 19.83-.56a8 8 0 0 0 4.07-15.48c-2.12-.55-21-5.22-32.83 2.76a20.55 20.55 0 0 0-9 14.95c-2 15.88 13.64 20.41 23 23.11c12.07 3.49 13.13 4.92 12.78 7.59c-.31 2.41-1.26 3.34-2.14 3.93c-4.6 3.06-15.17 1.56-19.55.36a8 8 0 0 0-4.3 15.41a61.2 61.2 0 0 0 15.18 2c5.83 0 12.3-1 17.49-4.46a20.82 20.82 0 0 0 9.19-15.23c2.25-17.28-14.27-22.11-24.15-24.97m64 0c-4-1.16-8.14-2.35-10.45-3.84c-1.25-.81-1.23-1-1.12-1.9a4.54 4.54 0 0 1 2-3.67c4.6-3.12 15.34-1.73 19.82-.56a8 8 0 0 0 4.07-15.48c-2.11-.55-21-5.22-32.83 2.76a20.58 20.58 0 0 0-8.95 14.95c-2 15.88 13.65 20.41 23 23.11c12.06 3.49 13.12 4.92 12.78 7.59c-.31 2.41-1.26 3.34-2.15 3.93c-4.6 3.06-15.16 1.56-19.54.36a8 8 0 0 0-4.3 15.44a61.3 61.3 0 0 0 15.19 2c5.82 0 12.3-1 17.49-4.46a20.81 20.81 0 0 0 9.18-15.23c2.21-17.31-14.31-22.14-24.2-25ZM40 112V40a16 16 0 0 1 16-16h96a8 8 0 0 1 5.66 2.34l56 56A8 8 0 0 1 216 88v24a8 8 0 1 1-16 0V96h-48a8 8 0 0 1-8-8V40H56v72a8 8 0 0 1-16 0m120-32h28.68L160 51.31Z\"/>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"currentColor\" d=\"M80 48a8 8 0 0 1-8 8H40v16a8 8 0 0 1-16 0V56a16 16 0 0 1 16-16h32a8 8 0 0 1 8 8M32 152a8 8 0 0 0 8-8v-32a8 8 0 0 0-16 0v32a8 8 0 0 0 8 8m40 48H40v-16a8 8 0 0 0-16 0v16a16 16 0 0 0 16 16h32a8 8 0 0 0 0-16m72 0h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16m80-24a8 8 0 0 0-8 8v16h-32a8 8 0 0 0 0 16h32a16 16 0 0 0 16-16v-16a8 8 0 0 0-8-8m0-72a8 8 0 0 0-8 8v32a8 8 0 0 0 16 0v-32a8 8 0 0 0-8-8m-8-64h-32a8 8 0 0 0 0 16h32v16a8 8 0 0 0 16 0V56a16 16 0 0 0-16-16m-72 0h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16\"/>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cpath fill=\"currentColor\" d=\"M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8\"/>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\u003Cpath fill=\"currentColor\" d=\"m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32\"/>",{"id":25,"title":26,"body":27,"description":529,"extension":530,"meta":531,"navigation":137,"path":532,"seo":533,"stem":534,"__hash__":535},"docs/docs/components/indicator.md","Indicator",{"type":28,"value":29,"toc":525},"minimark",[30,34,50,345,350,486,490,521],[31,32,26],"h1",{"id":33},"indicator",[35,36,37,38,42,43,42,46,49],"p",{},"A small dot indicator that can be used standalone or attached to other components like ",[39,40,41],"code",{},"Avatar",", ",[39,44,45],{},"Badge",[39,47,48],{},"Buttons"," and more to convey status such as online presence or alerts.",[51,52,53],"indicator-example",{},[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Avatar, Badge, Indicator } from '@dolanske/vui'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CAvatar url=\"https://github.com/dolanske.png\" size=\"l\">\n    \u003Ctemplate #overlay>\n      \u003CIndicator variant=\"online\" position=\"bottom-right\" outline />\n    \u003C/template>\n  \u003C/Avatar>\n\n  \u003CBadge outline size=\"l\">\n    Important\n    \u003CIndicator variant=\"alert\" position=\"top-right\" ripple />\n  \u003C/Badge>\n\u003C/template>\n","vue","",[39,61,62,82,122,132,139,149,185,202,240,250,260,265,286,293,327,336],{"__ignoreMap":59},[63,64,67,71,75,79],"span",{"class":65,"line":66},"line",1,[63,68,70],{"class":69},"sP76a","\u003C",[63,72,74],{"class":73},"sKpE2","script",[63,76,78],{"class":77},"sflEz"," setup",[63,80,81],{"class":69},">\n",[63,83,85,88,91,94,97,100,102,105,108,111,115,119],{"class":65,"line":84},2,[63,86,87],{"class":73},"import",[63,89,90],{"class":69}," {",[63,92,93],{"class":77}," Avatar",[63,95,96],{"class":69},",",[63,98,99],{"class":77}," Badge",[63,101,96],{"class":69},[63,103,104],{"class":77}," Indicator",[63,106,107],{"class":69}," }",[63,109,110],{"class":73}," from",[63,112,114],{"class":113},"sBR95"," '",[63,116,118],{"class":117},"sfmH-","@dolanske/vui",[63,120,121],{"class":113},"'\n",[63,123,125,128,130],{"class":65,"line":124},3,[63,126,127],{"class":69},"\u003C/",[63,129,74],{"class":73},[63,131,81],{"class":69},[63,133,135],{"class":65,"line":134},4,[63,136,138],{"emptyLinePlaceholder":137},true,"\n",[63,140,142,144,147],{"class":65,"line":141},5,[63,143,70],{"class":69},[63,145,146],{"class":73},"template",[63,148,81],{"class":69},[63,150,152,155,157,160,163,166,169,171,174,176,178,181,183],{"class":65,"line":151},6,[63,153,154],{"class":69},"  \u003C",[63,156,41],{"class":73},[63,158,159],{"class":77}," url",[63,161,162],{"class":69},"=",[63,164,165],{"class":113},"\"",[63,167,168],{"class":117},"https://github.com/dolanske.png",[63,170,165],{"class":113},[63,172,173],{"class":77}," size",[63,175,162],{"class":69},[63,177,165],{"class":113},[63,179,180],{"class":117},"l",[63,182,165],{"class":113},[63,184,81],{"class":69},[63,186,188,191,193,196,200],{"class":65,"line":187},7,[63,189,190],{"class":69},"    \u003C",[63,192,146],{"class":73},[63,194,195],{"class":69}," #",[63,197,199],{"class":198},"sRTv0","overlay",[63,201,81],{"class":69},[63,203,205,208,210,213,215,217,220,222,225,227,229,232,234,237],{"class":65,"line":204},8,[63,206,207],{"class":69},"      \u003C",[63,209,26],{"class":73},[63,211,212],{"class":77}," variant",[63,214,162],{"class":69},[63,216,165],{"class":113},[63,218,219],{"class":117},"online",[63,221,165],{"class":113},[63,223,224],{"class":77}," position",[63,226,162],{"class":69},[63,228,165],{"class":113},[63,230,231],{"class":117},"bottom-right",[63,233,165],{"class":113},[63,235,236],{"class":77}," outline",[63,238,239],{"class":69}," />\n",[63,241,243,246,248],{"class":65,"line":242},9,[63,244,245],{"class":69},"    \u003C/",[63,247,146],{"class":73},[63,249,81],{"class":69},[63,251,253,256,258],{"class":65,"line":252},10,[63,254,255],{"class":69},"  \u003C/",[63,257,41],{"class":73},[63,259,81],{"class":69},[63,261,263],{"class":65,"line":262},11,[63,264,138],{"emptyLinePlaceholder":137},[63,266,268,270,272,274,276,278,280,282,284],{"class":65,"line":267},12,[63,269,154],{"class":69},[63,271,45],{"class":73},[63,273,236],{"class":77},[63,275,173],{"class":77},[63,277,162],{"class":69},[63,279,165],{"class":113},[63,281,180],{"class":117},[63,283,165],{"class":113},[63,285,81],{"class":69},[63,287,289],{"class":65,"line":288},13,[63,290,292],{"class":291},"sX1ls","    Important\n",[63,294,296,298,300,302,304,306,309,311,313,315,317,320,322,325],{"class":65,"line":295},14,[63,297,190],{"class":69},[63,299,26],{"class":73},[63,301,212],{"class":77},[63,303,162],{"class":69},[63,305,165],{"class":113},[63,307,308],{"class":117},"alert",[63,310,165],{"class":113},[63,312,224],{"class":77},[63,314,162],{"class":69},[63,316,165],{"class":113},[63,318,319],{"class":117},"top-right",[63,321,165],{"class":113},[63,323,324],{"class":77}," ripple",[63,326,239],{"class":69},[63,328,330,332,334],{"class":65,"line":329},15,[63,331,255],{"class":69},[63,333,45],{"class":73},[63,335,81],{"class":69},[63,337,339,341,343],{"class":65,"line":338},16,[63,340,127],{"class":69},[63,342,146],{"class":73},[63,344,81],{"class":69},[346,347,349],"h3",{"id":348},"props","Props",[351,352,353,369],"table",{},[354,355,356],"thead",{},[357,358,359,363,366],"tr",{},[360,361,362],"th",{},"Name",[360,364,365],{},"Default",[360,367,368],{},"Type",[370,371,372,400,424,448,468],"tbody",{},[357,373,374,380,383],{},[375,376,377],"td",{},[39,378,379],{},"variant",[375,381,382],{},"—",[375,384,385,387,388,387,390,387,393,387,396,399],{},[39,386,308],{}," ",[39,389,219],{},[39,391,392],{},"offline",[39,394,395],{},"away",[397,398],"br",{}," Controls the color of the indicator dot",[357,401,402,407,409],{},[375,403,404],{},[39,405,406],{},"position",[375,408,382],{},[375,410,411,387,413,387,416,387,418,387,421,423],{},[39,412,319],{},[39,414,415],{},"top-left",[39,417,231],{},[39,419,420],{},"bottom-left",[397,422],{}," When set, positions the indicator absolutely over its child content",[357,425,426,431,436],{},[375,427,428],{},[39,429,430],{},"size",[375,432,433],{},[39,434,435],{},"m",[375,437,438,387,441,387,443,387,445,447],{},[39,439,440],{},"s",[39,442,435],{},[39,444,180],{},[397,446],{}," Controls the size of the indicator dot",[357,449,450,455,460],{},[375,451,452],{},[39,453,454],{},"outline",[375,456,457],{},[39,458,459],{},"false",[375,461,462,387,465,467],{},[39,463,464],{},"boolean",[397,466],{}," Adds a border around the dot, useful for contrast against colored backgrounds",[357,469,470,475,479],{},[375,471,472],{},[39,473,474],{},"ripple",[375,476,477],{},[39,478,459],{},[375,480,481,387,483,485],{},[39,482,464],{},[397,484],{}," Adds a pulsing ripple animation to the indicator, useful for drawing attention",[346,487,489],{"id":488},"slots","Slots",[351,491,492,504],{},[354,493,494],{},[357,495,496,498,501],{},[360,497,362],{},[360,499,500],{},"Accepts",[360,502,503],{},"Description",[370,505,506],{},[357,507,508,513,518],{},[375,509,510],{},[39,511,512],{},"default",[375,514,515],{},[39,516,517],{},"any",[375,519,520],{},"Optional content to wrap. Useful if you want to place a tiny icon inside",[522,523,524],"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":59,"searchDepth":84,"depth":84,"links":526},[527,528],{"id":348,"depth":124,"text":349},{"id":488,"depth":124,"text":489},"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",{},"/docs/components/indicator",{"title":26,"description":529},"docs/components/indicator","lfYWncM1qH6DH9YtiyL1_tnsX8j6v07Ty8mJRCjEyqA",1777992281037]