vue3-avatar
Version:
A lightweight, fully customizable, accessible, and SSR-safe user avatar component for Vue 3 and Nuxt. Supports initials, custom images, pixel-art generation (identicons), groups with overflow, and auto-contrast text. Perfect for user profiles, team displa
1 lines • 20.1 kB
JavaScript
var Avatar=function(e){"use strict";function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,a,o=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(o.push(r.value),!t||o.length!==t);i=!0);}catch(e){l=!0,a=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw a}}return o}(e,t)||o(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e){return function(e){if(Array.isArray(e))return i(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||o(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){if(e){if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var l=["#F0F8FF","#FAEBD7","#00FFFF","#7FFFD4","#F0FFFF","#F5F5DC","#FFE4C4","#FFEBCD","#DEB887","#5F9EA0","#7FFF00","#D2691E","#FF7F50","#6495ED","#FFF8DC","#00FFFF","#B8860B","#A9A9A9","#A9A9A9","#BDB76B","#FF8C00","#E9967A","#8FBC8F","#00CED1","#FF1493","#00BFFF","#1E90FF","#FFFAF0","#FF00FF","#DCDCDC","#F8F8FF","#FFD700","#DAA520","#808080","#808080","#ADFF2F","#F0FFF0","#FF69B4","#CD5C5C","#FFFFF0","#F0E68C","#E6E6FA","#FFF0F5","#7CFC00","#FFFACD","#ADD8E6","#F08080","#E0FFFF","#FAFAD2","#D3D3D3","#D3D3D3","#90EE90","#FFB6C1","#FFA07A","#20B2AA","#87CEFA","#B0C4DE","#FFFFE0","#00FF00","#32CD32","#FAF0E6","#FF00FF","#66CDAA","#BA55D3","#9370D8","#3CB371","#7B68EE","#00FA9A","#48D1CC","#F5FFFA","#FFE4E1","#FFE4B5","#FFDEAD","#FDF5E6","#FFA500","#FF4500","#DA70D6","#EEE8AA","#98FB98","#AFEEEE","#D87093","#FFEFD5","#FFDAB9","#CD853F","#FFC0CB","#DDA0DD","#B0E0E6","#FF0000","#BC8F8F","#FA8072","#F4A460","#FFF5EE","#C0C0C0","#87CEEB","#FFFAFA","#00FF7F","#D2B48C","#D8BFD8","#FF6347","#40E0D0","#EE82EE","#F5DEB3","#FFFFFF","#F5F5F5","#FFFF00","#9ACD32"],c=["#000000","#0000FF","#8A2BE2","#A52A2A","#DC143C","#00008B","#008B8B","#006400","#8B008B","#556B2F","#9932CC","#8B0000","#483D8B","#2F4F4F","#2F4F4F","#9400D3","#696969","#696969","#B22222","#228B22","#008000","#4B0082","#800000","#0000CD","#C71585","#191970","#000080","#808000","#6B8E23","#800080","#4169E1","#8B4513","#2E8B57","#A0522D","#6A5ACD","#708090","#708090","#4682B4","#008080"],u=["#F44336","#FF4081","#9C27B0","#673AB7","#3F51B5","#2196F3","#03A9F4","#00BCD4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFC107","#FF9800","#FF5722","#795548","#9E9E9E","#607D8B"];function s(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=function(e){if(!e)return 0;for(var t=e.trim(),n=0,r=0;r<t.length;r++)n+=t.charCodeAt(r);return n}(e);if(t){var r=u[0];if(e&&"string"==typeof e){var a=(e.length||0)%u.length;r=u[a]}return{background:r,color:function(e,t){if(!/^#[0-9A-Fa-f]{6}$/i.test(e))return"#FFFFFF";var n=parseInt(e.slice(1,3),16),r=parseInt(e.slice(3,5),16),a=parseInt(e.slice(5,7),16),o=Math.min(255,n+t),i=Math.min(255,r+t),l=Math.min(255,a+t),c=function(e){return e.toString(16).padStart(2,"0").toUpperCase()};return"#".concat(c(o)).concat(c(i)).concat(c(l))}(r,80)}}var o=c[n%c.length],i=l[n%l.length],s=c[(n+5)%c.length];return{background:o,color:i,gradient:"linear-gradient(135deg, ".concat(o," 0%, ").concat(s," 100%)"),light:i,dark:o}}var d={earth:{background:"#8B7355",foreground:"#D4A574"},neon:{background:"#FF006E",foreground:"#00F5FF"},ocean:{background:"#006994",foreground:"#4FC3F7"},forest:{background:"#2D5016",foreground:"#7CB342"},sunset:{background:"#FF6B35",foreground:"#FFD23F"},midnight:{background:"#1A1A2E",foreground:"#16213E"},candy:{background:"#FF69B4",foreground:"#FFB6C1"},retro:{background:"#8B4513",foreground:"#DEB887"}};function p(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"yiq";if(!e||!e.startsWith("#"))return"#FFFFFF";if("luminance"===t)return(n=e.replace("#",""),r=parseInt(n.substring(0,2),16)/255,a=parseInt(n.substring(2,4),16)/255,o=parseInt(n.substring(4,6),16)/255,.2126*(r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4))+.7152*(a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4))+.0722*(o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4)))>.5?"#000000":"#FFFFFF";var n,r,a,o,i=function(e){var t=e.replace("#","");return(299*parseInt(t.substring(0,2),16)+587*parseInt(t.substring(2,4),16)+114*parseInt(t.substring(4,6),16))/1e3}(e);return i>=128?"#000000":"#FFFFFF"}var f=Symbol("AvatarConfig"),v=["role","tabindex","aria-label","title","onKeydown"],F=["height","width","src","loading"],g=["innerHTML"],y={__name:"Avatar",props:{name:{type:String,required:!0},color:{type:String},background:{type:String},size:{type:Number,default:40},dark:{type:Boolean,default:!1},inline:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},shape:{type:String,validator:function(e){return["circle","square","squircle","hexagon"].includes(e)}},imageSrc:{type:String},alt:{type:String,default:void 0},loading:{type:String,default:"lazy",validator:function(e){return["lazy","eager"].includes(e)}},transition:{type:Boolean,default:!0},border:{type:Boolean,default:!0},borderColor:{type:String,default:"white"},customAvatarStyle:{type:Object,default:function(){return{}}},status:{type:String,default:null,validator:function(e){return["away","online","offline","busy"].includes(e)}},statusPosition:{type:String,default:"bottom-right",validator:function(e){return["top-right","top-left","bottom-right","bottom-left"].includes(e)}},customStatusStyle:{type:Object,default:function(){return{}}},sameBorder:{type:Boolean,default:!1},interactive:{type:Boolean,default:!1},useLegacyColors:{type:Boolean,default:!1},useTextColorForBorder:{type:Boolean,default:!1},gradient:{type:Boolean,default:!1},pointer:{type:Boolean,default:!1},onClick:{type:Function,default:null},variant:{type:String,default:"initials",validator:function(e){return["initials","pixel"].includes(e)}},pixelTheme:{type:String,default:"earth",validator:function(e){return Object.keys(d).includes(e)}},autoContrast:{type:Boolean,default:!1}},emits:["error","activate","load"],setup:function(r,o){var i=o.emit,l="green",c="grey",u="orange",y="red",m=r,h=i,b=e.ref(!1),C=e.ref(!1),A=e.inject(f,{}),B=function(e,t,n){return void 0!==t&&t!==n?t:void 0!==A[e]?A[e]:n},k=e.computed(function(){return m.pointer||m.interactive||"function"==typeof m.onClick});function E(e){"function"==typeof m.onClick&&m.onClick(e),m.interactive&&h("activate",e)}var D=e.computed(function(){return s(m.name,m.useLegacyColors)}),w=e.computed(function(){return function(e){if(!e||"string"!=typeof e)return"";var t=e.trim().split(/[- ]/);return 0===(t=t.filter(function(e){return""!==e})).length?"":t.length>=3?t[0][0].toUpperCase()+t[1][0].toUpperCase()+t[t.length-1][0].toUpperCase():2===t.length?t[0][0].toUpperCase()+t[1][0].toUpperCase():1===t.length?t[0][0].toUpperCase():""}(m.name)}),x=e.computed(function(){return function(e){if(!e)return Array(8).fill(null).map(function(){return Array(8).fill(!1)});for(var t=0,n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t&=t;for(var r=[],o=0;o<8;o++){for(var i=[],l=0;l<4;l++){var c=(4*o+l)%32,u=Math.abs(t)>>c&1;i.push(1===u)}r.push([].concat(i,a(i.reverse())))}return r}(m.name)}),S=e.computed(function(){var e=d[m.pixelTheme]||d.earth,t=B("background",m.background),n=B("color",m.color),r={background:t||e.background,foreground:n||e.foreground};return t||n||m.dark||(r={background:e.foreground,foreground:e.background}),function(e,t){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:40,r=n/8,a=[],o=0;o<8;o++)for(var i=0;i<8;i++)e[o][i]&&a.push('<rect x="'.concat(i*r,'" y="').concat(o*r,'" width="').concat(r,'" height="').concat(r,'" fill="').concat(t.foreground,'"/>'));return'\n <svg width="'.concat(n,'" height="').concat(n,'" viewBox="0 0 ').concat(n," ").concat(n,'" xmlns="http://www.w3.org/2000/svg">\n <rect width="').concat(n,'" height="').concat(n,'" fill="').concat(t.background,'"/>\n ').concat(a.join("\n "),"\n </svg>\n ").trim()}(x.value,r,m.size)}),z=e.computed(function(){var e=B("background",m.background);if(e)return e;var t=D.value;return m.useLegacyColors?t.background:m.gradient&&t.gradient?t.gradient:m.dark?t.dark:t.light}),j=e.computed(function(){var e=B("color",m.color);if(e)return e;if(B("autoContrast",m.autoContrast,!1)){var t=z.value;if(t&&t.startsWith("#"))return p(t)}var n=D.value;return m.useLegacyColors?n.color:m.dark?n.light:n.dark}),O=e.computed(function(){return m.useTextColorForBorder?j.value:B("borderColor",m.borderColor,"white")}),I=e.computed(function(){var e=B("size",m.size,40);return 1==w.value.length?e/2:2==w.value.length?e/2.5:3==w.value.length?e/3:14}),P=e.computed(function(){var e;switch(m.status&&m.status.toLowerCase()){case"away":e=u;break;case"online":e=l;break;case"offline":e=c;break;default:e=y}return e}),T=e.computed(function(){var e={},r=B("statusPosition",m.statusPosition,"bottom-right");r.includes("bottom")?(e.bottom="".concat(0,"px"),e.top="auto"):(e.top="".concat(0,"px"),e.bottom="auto"),r.includes("right")?(e.right="".concat(0,"px"),e.left="auto"):(e.left="".concat(0,"px"),e.right="auto");var a=B("size",m.size,40),o=function(e){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?t(Object(a),!0).forEach(function(t){n(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):t(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}({height:"".concat(a/4,"px"),width:"".concat(a/4,"px"),backgroundColor:P.value,border:"".concat(a/30,"px solid ").concat(m.sameBorder?O.value:"white")},e);return Object.assign({},o,m.customStatusStyle)}),M=e.computed(function(){var e=B("size",m.size,40),t={display:m.inline?"inline-flex":"flex",borderRadius:R.value.borderRadius,clipPath:R.value.clipPath,margin:0,padding:0,alignItems:"center",justifyContent:"center",border:m.border?"".concat(e/20,"px solid ").concat(O.value):"none"};return Object.assign({},t,m.customAvatarStyle)}),L=e.computed(function(){var e=B("size",m.size,40),t={color:j.value,width:e+"px",height:e+"px",fontSize:I.value+"px",background:z.value,display:m.inline&&"inline-flex",borderRadius:R.value.borderRadius,clipPath:R.value.clipPath,border:m.border&&"".concat(e/20,"px solid ").concat(O.value)};return Object.assign({},t,m.customAvatarStyle)}),R=e.computed(function(){var e=m.shape||(m.rounded?"circle":"square");return"square"===e?{borderRadius:"0"}:"circle"===e?{borderRadius:"50%"}:"squircle"===e?{borderRadius:"25%"}:"hexagon"===e?{borderRadius:"0",clipPath:"polygon(25% 5%, 75% 5%, 95% 50%, 75% 95%, 25% 95%, 5% 50%)"}:{borderRadius:"0"}}),U=e.computed(function(){var e=B("size",m.size,40);return{"--va-size":"".concat(e,"px"),"--va-bg":z.value,"--va-color":j.value,"--va-border-color":O.value,"--va-radius":R.value.borderRadius,"--va-clip-path":R.value.clipPath||"none","--va-font-size":"".concat(I.value,"px")}}),N=e.computed(function(){var e=m.alt||(m.name?"Avatar of ".concat(m.name):"User avatar");return m.status?"".concat(e,". User is ").concat(m.status):e});function $(e){b.value=!0,C.value=!1,h("error",e)}function q(e){C.value=!0,h("load",e)}function _(){return m.imageSrc&&!b.value}return function(t,n){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["container",{"is-clickable":k.value}]),style:e.normalizeStyle(U.value),role:k.value?"button":"img",tabindex:k.value?0:void 0,"aria-label":N.value,title:r.name,onClick:E,onKeydown:[e.withKeys(e.withModifiers(E,["prevent"]),["enter"]),e.withKeys(e.withModifiers(E,["prevent"]),["space"])]},[_()&&t.$slots.image?e.renderSlot(t.$slots,"image",{src:r.imageSrc,alt:N.value,size:r.size,style:e.normalizeStyle(M.value),class:e.normalizeClass({"image-loaded":C.value,"image-transition":r.transition}),onError:$,onLoad:q},void 0,void 0,0):_()?(e.openBlock(),e.createElementBlock("img",{key:1,style:e.normalizeStyle(M.value),height:r.size,width:r.size,src:r.imageSrc,loading:r.loading,class:e.normalizeClass({"image-loaded":C.value,"image-transition":r.transition}),alt:"",onError:$,onLoad:q},null,46,F)):!r.name&&t.$slots.placeholder?e.renderSlot(t.$slots,"placeholder",{size:r.size,style:e.normalizeStyle(L.value)},void 0,void 0,2):"pixel"===r.variant?(e.openBlock(),e.createElementBlock("div",{key:3,style:e.normalizeStyle(L.value),class:"avatar avatar-pixel noselect","aria-hidden":"true",innerHTML:S.value},null,12,g)):(e.openBlock(),e.createElementBlock("div",{key:4,style:e.normalizeStyle(L.value),class:"avatar noselect","aria-hidden":"true"},e.toDisplayString(w.value),5)),r.status||t.$slots.status?(e.openBlock(),e.createElementBlock("div",{key:5,class:"status-indicator",style:e.normalizeStyle(T.value),"aria-hidden":"true"},[e.renderSlot(t.$slots,"status")],4)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"overlay")],46,v)}}};function m(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}m('\n@import url("https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap");\n.avatar[data-v-a6123cce] {\n font-family: "Domine", serif;\n color: white;\n background: navy;\n font-size: 14px;\n width: 45px;\n height: 45px;\n border-radius: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n}\n.avatar-pixel[data-v-a6123cce] {\n padding: 0;\n overflow: hidden;\n}\n.avatar-pixel svg[data-v-a6123cce] {\n display: block;\n}\n.noselect[data-v-a6123cce] {\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n.container[data-v-a6123cce] {\n position: relative;\n}\n.container.is-clickable[data-v-a6123cce],\n.container.is-clickable[data-v-a6123cce] * {\n cursor: pointer !important;\n}\n.status-indicator[data-v-a6123cce] {\n position: absolute;\n border-radius: 50%;\n}\n.container img.image-transition[data-v-a6123cce] {\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n}\n.container img.image-transition.image-loaded[data-v-a6123cce] {\n opacity: 1;\n}\n'),y.__scopeId="data-v-a6123cce";var h=e.defineComponent({name:"AvatarGroup",props:{max:{type:Number},overlap:{type:Number,default:10},borderColor:{type:String,default:"white"},size:{type:Number,default:40},layout:{type:String,default:"stack",validator:function(e){return["stack","triangle"].includes(e)}},onClick:{type:Function,default:null},pointer:{type:Boolean,default:!1}},emits:["overflow-click"],setup:function(t,n){var r=n.slots,i=n.emit,l=function t(n){var r,a=[],i=function(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=o(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,a=function(){};return{s:a,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,l=!0,c=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return l=e.done,e},e:function(e){c=!0,i=e},f:function(){try{l||null==n.return||n.return()}finally{if(c)throw i}}}}(n);try{for(i.s();!(r=i.n()).done;){var l=r.value;if(l.type===e.Fragment&&Array.isArray(l.children))a=a.concat(t(l.children));else if(l.type!==e.Comment){if(l.type===e.Text&&0===l.children.trim().length)continue;a.push(l)}}}catch(e){i.e(e)}finally{i.f()}return a},c=e.inject(f,{}),u=function(e,t,n){return void 0!==t&&t!==n?t:void 0!==c[e]?c[e]:n};return function(){var n=r.default?r.default():[],o=l(n),c=o,s=0,d=t.max;if("triangle"===t.layout){var p=t.max?Math.min(t.max,3):3;d=o.length>p?p-1:p}d&&o.length>d&&(c=o.slice(0,d),s=o.length-d);var f=o.map(function(e){return e.props&&e.props.name}).filter(Boolean).join(", "),v=s>0?o.slice(d):[],F=v.map(function(e){return e.props&&e.props.name}).filter(Boolean).join(", "),g=o.map(function(e){return e.props}).filter(Boolean),y=v.map(function(e){return e.props}).filter(Boolean),m=u("size",t.size,40),h=u("borderColor",t.borderColor,"white"),b=u("overlap",t.overlap,10),C=s>0?e.h("button",{type:"button",class:"avatar-overflow",title:F,"aria-label":"Show ".concat(s," more avatar").concat(1===s?"":"s").concat(F?": ".concat(F):""),onClick:function(e){e.stopPropagation(),i("overflow-click",y,g)},style:{width:"".concat(m,"px"),height:"".concat(m,"px"),fontSize:"".concat(m/2.5,"px"),cursor:"pointer"}},"+".concat(s)):null,A=c.map(function(t){return e.cloneVNode(t,{size:m,borderColor:h})});return e.h("div",{class:["avatar-group","layout-".concat(t.layout),{"is-clickable":t.pointer||!!t.onClick}],title:f,role:t.onClick?"button":void 0,tabindex:t.onClick?0:void 0,"aria-label":t.onClick?"Avatar group".concat(f?": ".concat(f):""):void 0,onClick:function(e){return t.onClick&&t.onClick(e)},onKeydown:function(e){t.onClick&&["Enter"," ","Spacebar"].includes(e.key)&&(e.preventDefault(),t.onClick(e))},style:{"--va-group-overlap":"-".concat(b,"px"),"--va-size":"".concat(m,"px")}},[].concat(a(A),[C]))}}});m("\n.avatar-group {\n display: flex;\n align-items: center;\n}\n.avatar-group.is-clickable {\n cursor: pointer;\n}\n.avatar-group.is-clickable * {\n cursor: pointer !important;\n}\n.avatar-group.layout-stack > * {\n margin-left: 0;\n}\n.avatar-group.layout-stack > * + * {\n margin-left: var(--va-group-overlap);\n}\n.avatar-group.layout-triangle {\n position: relative;\n display: inline-block;\n width: calc(\n var(--va-size) * 1.8\n ); /* Wider for better visibility of back avatars */\n height: calc(var(--va-size) * 1.45);\n}\n.avatar-group.layout-triangle > * {\n position: absolute !important;\n}\n.avatar-group.layout-triangle > *:nth-child(1) {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10 !important;\n}\n.avatar-group.layout-triangle > *:nth-child(2) {\n bottom: 0;\n left: 0;\n z-index: 5 !important;\n}\n.avatar-group.layout-triangle > *:nth-child(3) {\n bottom: 0;\n right: 0;\n z-index: 1 !important;\n}\n.avatar-overflow {\n display: flex;\n align-items: center;\n justify-content: center;\n appearance: none;\n background: #ccc;\n color: white;\n border-radius: 50%;\n font-weight: bold;\n font-family: sans-serif;\n border: 2px solid white; /* Hardcoded default? */\n box-sizing: border-box;\n position: relative; /* To stack properly */\n padding: 0;\n}\n.avatar-overflow:focus-visible {\n outline: 2px solid #2563eb;\n outline-offset: 2px;\n}\n");y.install=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).defaults||{};e.provide(f,t),e.component("Avatar",y),e.component("AvatarGroup",h)};var b=Object.freeze({__proto__:null,Avatar:y,AvatarGroup:h,AvatarConfigKey:f,default:y});return Object.entries(b).forEach(function(e){var t=r(e,2),n=t[0],a=t[1];"default"!==n&&(y[n]=a)}),y}(Vue);