@dialpad/dialtone-vue 3.220.0-next.7 → 3.221.0

package/dist/lib/avatar/avatar.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../presence/presence.cjs`),r=require(`./avatar-constants.cjs`),i=require(`./utils.cjs`);let a=require(`vue`);var o=typeof CSS<`u`&&CSS.supports?.(`background`,`oklch(0.5 0.1 0)`),s={name:`DtAvatar`,components:{DtPresence:n.default},props:{id:{type:String,default(){return e.getUniqueString()}},seed:{type:String,default:void 0},family:{type:Number,default:void 0,validator:e=>e>=1&&e<=12},variant:{type:Number,default:void 0,validator:e=>e>=0&&e<10},color:{type:String,default:void 0},size:{type:[String,Number],default:300,validator:e=>Object.keys(r.AVATAR_SIZE_MODIFIERS).includes(String(e))},avatarClass:{type:[String,Array,Object],default:``},canvasClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},presence:{type:String,default:r.AVATAR_PRESENCE_STATES.NONE,validator:e=>Object.values(r.AVATAR_PRESENCE_STATES).includes(e)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:e=>r.AVATAR_GROUP_VALIDATOR(e)},overlayText:{type:String,default:``},overlayClass:{type:[String,Array,Object],default:``},imageSrc:{type:String,default:``},imageAlt:{type:String,default:void 0},fullName:{type:String,default:``},interactive:{type:Boolean,default:!1},clickable:{type:Boolean,default:null},iconAriaLabel:{type:String,default:void 0},iconOnly:{type:Boolean,default:!1},deactivated:{type:Boolean,default:!1}},emits:[`click`],data(){return{AVATAR_SIZE_MODIFIERS:r.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:r.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:r.AVATAR_PRESENCE_SIZE_MODIFIERS,imageLoadedSuccessfully:null,formattedInitials:``,initializing:!1,hasSlotContent:e.hasSlotContent,anchorHue:0}},computed:{resolvedInteractive(){return this.clickable??this.interactive},hasOverlayIcon(){return e.hasSlotContent(this.$slots.overlayIcon)},isIconType(){return e.hasSlotContent(this.$slots.icon)},iconDataQa(){return`dt-avatar-icon`},computedFamily(){if(!this.isIconType){if(this.family!==void 0)return this.family;if(this.color!==void 0){let e=r.colorToFamilyVariant(this.color);if(e)return e.family}return r.getRandomFamilyVariant(this.seed).family}},computedVariant(){if(!this.isIconType){if(this.variant!==void 0)return this.variant;if(this.color!==void 0){let e=r.colorToFamilyVariant(this.color);if(e)return e.variant}return r.getRandomFamilyVariant(this.seed).variant}},avatarClasses(){return[`d-avatar`,r.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&String(this.formattedGroup).length===2,"d-avatar--group-digits-3":this.showGroup&&String(this.formattedGroup).length>=3,"d-avatar--clickable":this.resolvedInteractive,"d-avatar--presence":this.presence&&!this.showGroup,"d-avatar--icon-only":this.iconOnly,"d-avatar--deactivated":this.deactivated}]},avatarStyles(){let e=[];if(!o&&!this.isIconType&&this.computedFamily&&this.computedVariant!==void 0){let t=r.computeAvatarHex(this.computedFamily,this.computedVariant,this.anchorHue);e.push({"--avatar-color-background":t})}return e.length>0?e:void 0},overlayClasses(){return[`d-avatar__overlay`,this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return r.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){let e=String(this.validatedSize);return([`xs`,`100`,`150`,`200`,`250`].includes(e)?2:3)==2?this.group>9?`9+`:this.group:this.group>99?`99+`:this.group},validatedSize(){return this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(e){this.imageLoadedSuccessfully=null,e&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners(),o||this.readAnchorHue()},methods:{async setImageListeners(){await this.$nextTick();let e=this.$refs.avatarImage;e&&(e.addEventListener(`load`,()=>this._loadedImageEventHandler(e),{once:!0}),e.addEventListener(`error`,()=>this._erroredImageEventHandler(e),{once:!0}))},formatInitials(){let e=i.extractInitialsFromName(this.fullName),t=String(this.validatedSize);t===`xs`||t===`100`?this.formattedInitials=``:t===`sm`||t===`150`||t===`200`?this.formattedInitials=e[0]:this.formattedInitials=e},readAnchorHue(){try{let e=getComputedStyle(document.documentElement).getPropertyValue(`--dt-avatar-anchor-hue`).trim();this.anchorHue=parseFloat(e)||0}catch{this.anchorHue=0}},_loadedImageEventHandler(e){this.imageLoadedSuccessfully=!0,e.classList.remove(`d-d-none`)},_erroredImageEventHandler(e){this.imageLoadedSuccessfully=!1,e.classList.add(`d-d-none`)},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error(`image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby`)},handleClick(e){this.resolvedInteractive&&this.$emit(`click`,e)}}},c={class:`d-avatar__canvas-inner`},l=[`src`,`alt`],u=[`aria-label`,`data-qa`],d={key:1,class:`d-avatar__overlay-text`},f=[`aria-label`];function p(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-presence`);return(0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(o.resolvedInteractive?`button`:`div`),{id:n.id,class:(0,a.normalizeClass)(o.avatarClasses),style:(0,a.normalizeStyle)(o.avatarStyles),"data-avatar-family":n.iconOnly?void 0:o.computedFamily,"data-avatar-variant":n.iconOnly?void 0:o.computedVariant,"data-qa":`dt-avatar`,type:o.resolvedInteractive?`button`:void 0,onClick:o.handleClick},{default:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,{ref:`canvas`,class:(0,a.normalizeClass)([n.canvasClass,`d-avatar__canvas`,{"d-avatar--image-loaded":i.imageLoadedSuccessfully}])},[(0,a.createElementVNode)(`div`,c,[o.showImage?((0,a.openBlock)(),(0,a.createElementBlock)(`img`,{key:0,ref:`avatarImage`,class:`d-avatar__image`,"data-qa":`dt-avatar-image`,src:n.imageSrc,alt:n.imageAlt},null,8,l)):o.isIconType?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:1,class:(0,a.normalizeClass)([n.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":o.resolvedInteractive?n.iconAriaLabel:``,"data-qa":o.iconDataQa},[(0,a.renderSlot)(e.$slots,`icon`)],10,u)):((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,class:(0,a.normalizeClass)([i.AVATAR_KIND_MODIFIERS.initials])},(0,a.toDisplayString)(i.formattedInitials),3))])],2),o.hasOverlayIcon||n.overlayText?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:0,class:(0,a.normalizeClass)(o.overlayClasses)},[o.hasOverlayIcon?(0,a.renderSlot)(e.$slots,`overlayIcon`,{key:0}):n.overlayText?((0,a.openBlock)(),(0,a.createElementBlock)(`p`,d,(0,a.toDisplayString)(n.overlayText),1)):(0,a.createCommentVNode)(``,!0)],2)):(0,a.createCommentVNode)(``,!0),o.showGroup?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:`d-avatar__count`,"data-qa":`dt-avatar-count`,role:`img`,"aria-label":`${n.group} participants`},(0,a.toDisplayString)(o.formattedGroup),9,f)):(0,a.createCommentVNode)(``,!0),n.presence&&!o.showGroup&&i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]?((0,a.openBlock)(),(0,a.createBlock)(s,(0,a.mergeProps)({key:2,presence:n.presence,class:[`d-avatar__presence`,i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]]},n.presenceProps,{"data-qa":`dt-presence`}),null,16,[`presence`,`class`])):(0,a.createCommentVNode)(``,!0)]),_:3},8,[`id`,`class`,`style`,`data-avatar-family`,`data-avatar-variant`,`type`,`onClick`])}var m=t.t(s,[[`render`,p]]);exports.default=m;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../presence/presence.cjs`),r=require(`./avatar-constants.cjs`),i=require(`../icon/icon-constants.cjs`),a=require(`./utils.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtAvatar`,components:{DtPresence:n.default},inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:`md`,validator:e=>Object.keys(r.AVATAR_SIZE_MODIFIERS).includes(e)},avatarClass:{type:[String,Array,Object],default:``},canvasClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},presence:{type:String,default:r.AVATAR_PRESENCE_STATES.NONE,validator:e=>Object.values(r.AVATAR_PRESENCE_STATES).includes(e)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:e=>r.AVATAR_GROUP_VALIDATOR(e)},overlayText:{type:String,default:``},overlayClass:{type:[String,Array,Object],default:``},imageSrc:{type:String,default:``},imageAlt:{type:String,default:void 0},iconSize:{type:String,default:``,validator:e=>!e||Object.keys(i.ICON_SIZE_MODIFIERS).includes(e)},fullName:{type:String,default:``},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:[`click`],data(){return{AVATAR_SIZE_MODIFIERS:r.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:r.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:r.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:r.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:``,initializing:!1,hasSlotContent:e.hasSlotContent}},computed:{hasOverlayIcon(){return e.hasSlotContent(this.$slots.overlayIcon)},iconDataQa(){return`dt-avatar-icon`},avatarClasses(){return[`d-avatar`,this.$attrs.class,r.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&this.group>9&&this.group<100,"d-avatar--group-digits-3":this.showGroup&&this.group>99,[`d-avatar--color-${this.getColor()}`]:!this.isIconType(),"d-avatar--clickable":this.clickable,"d-avatar--presence":this.presence&&!this.showGroup}]},overlayClasses(){return[`d-avatar__overlay`,this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return r.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){return this.group>99?`99+`:this.group},validatedSize(){return this.group?`xs`:this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(e){this.imageLoadedSuccessfully=null,e&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return e.hasSlotContent(this.$slots.icon)},async setImageListeners(){await this.$nextTick();let e=this.$refs.avatarImage;e&&(e.addEventListener(`load`,()=>this._loadedImageEventHandler(e),{once:!0}),e.addEventListener(`error`,()=>this._erroredImageEventHandler(e),{once:!0}))},formatInitials(){let e=a.extractInitialsFromName(this.fullName);this.validatedSize===`xs`?this.formattedInitials=``:this.validatedSize===`sm`?this.formattedInitials=e[0]:this.formattedInitials=e},getColor(){return this.color??e.getRandomElement(r.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(e){this.imageLoadedSuccessfully=!0,e.classList.remove(`d-d-none`)},_erroredImageEventHandler(e){this.imageLoadedSuccessfully=!1,e.classList.add(`d-d-none`)},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error(`image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby`)},handleClick(e){this.clickable&&this.$emit(`click`,e)}}},c=[`src`,`alt`],l=[`aria-label`,`data-qa`,`role`],u={key:1,class:`d-avatar__overlay-text`},d={key:1,class:`d-avatar__count`,"data-qa":`dt-avatar-count`};function f(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-presence`);return(0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(n.clickable?`button`:`div`),{id:n.id,class:(0,o.normalizeClass)(a.avatarClasses),style:(0,o.normalizeStyle)(e.$attrs.style),"data-qa":`dt-avatar`,onClick:a.handleClick},{default:(0,o.withCtx)(()=>[(0,o.createElementVNode)(`div`,{ref:`canvas`,class:(0,o.normalizeClass)([n.canvasClass,`d-avatar__canvas`,{"d-avatar--image-loaded":i.imageLoadedSuccessfully}])},[a.showImage?((0,o.openBlock)(),(0,o.createElementBlock)(`img`,{key:0,ref:`avatarImage`,class:`d-avatar__image`,"data-qa":`dt-avatar-image`,src:n.imageSrc,alt:n.imageAlt},null,8,c)):a.isIconType()?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:1,class:(0,o.normalizeClass)([n.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":n.clickable?n.iconAriaLabel:``,"data-qa":a.iconDataQa,role:n.clickable?`button`:``},[(0,o.renderSlot)(e.$slots,`icon`,{iconSize:n.iconSize||i.AVATAR_ICON_SIZES[n.size]})],10,l)):((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:2,class:(0,o.normalizeClass)([i.AVATAR_KIND_MODIFIERS.initials])},(0,o.toDisplayString)(i.formattedInitials),3))],2),a.hasOverlayIcon||n.overlayText?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,class:(0,o.normalizeClass)(a.overlayClasses)},[a.hasOverlayIcon?(0,o.renderSlot)(e.$slots,`overlayIcon`,{key:0}):n.overlayText?((0,o.openBlock)(),(0,o.createElementBlock)(`p`,u,(0,o.toDisplayString)(n.overlayText),1)):(0,o.createCommentVNode)(``,!0)],2)):(0,o.createCommentVNode)(``,!0),a.showGroup?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,d,(0,o.toDisplayString)(a.formattedGroup),1)):(0,o.createCommentVNode)(``,!0),n.presence&&!a.showGroup?((0,o.openBlock)(),(0,o.createBlock)(s,(0,o.mergeProps)({key:2,presence:n.presence,class:[`d-avatar__presence`,i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]]},n.presenceProps,{"data-qa":`dt-presence`}),null,16,[`presence`,`class`])):(0,o.createCommentVNode)(``,!0)]),_:3},8,[`id`,`class`,`style`,`onClick`])}var p=t.t(s,[[`render`,f]]);exports.default=p;
 //# sourceMappingURL=avatar.cjs.map

package/dist/lib/avatar/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","names":[],"sources":["../../../components/Avatar/Avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"resolvedInteractive ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"avatarStyles\"\n    :data-avatar-family=\"!iconOnly ? computedFamily : undefined\"\n    :data-avatar-variant=\"!iconOnly ? computedVariant : undefined\"\n    data-qa=\"dt-avatar\"\n    :type=\"resolvedInteractive ? 'button' : undefined\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <div class=\"d-avatar__canvas-inner\">\n        <img\n          v-if=\"showImage\"\n          ref=\"avatarImage\"\n          class=\"d-avatar__image\"\n          data-qa=\"dt-avatar-image\"\n          :src=\"imageSrc\"\n          :alt=\"imageAlt\"\n        >\n        <div\n          v-else-if=\"isIconType\"\n          :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n          :aria-label=\"resolvedInteractive ? iconAriaLabel : ''\"\n          :data-qa=\"iconDataQa\"\n        >\n          <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n          <slot name=\"icon\" />\n        </div>\n        <span\n          v-else\n          :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n        >\n          {{ formattedInitials }}\n        </span>\n      </div>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n      role=\"img\"\n      :aria-label=\"`${group} participants`\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup && AVATAR_PRESENCE_SIZE_MODIFIERS[size]\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../Presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_FAMILY_COUNT,\n  AVATAR_VARIANT_COUNT,\n  colorToFamilyVariant,\n  getRandomFamilyVariant,\n  computeAvatarHex,\n} from './AvatarConstants';\nimport { extractInitialsFromName } from './Utils';\n\n// Check if browser supports oklch() - only compute hex fallback if not\nconst supportsOklch = typeof CSS !== 'undefined' && CSS.supports?.('background', 'oklch(0.5 0.1 0)');\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * **Recommended.** Pass a unique identifier (e.g., user ID) to generate consistent,\n     * deterministic colors for this avatar. The same seed always produces the same color.\n     * This is the preferred approach for most use cases.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * **Advanced.** Avatar color family (1-12). Each family represents a different hue\n     * offset from the theme's anchor. Only use this if you need explicit control over\n     * the color. For most cases, use `seed` instead.\n     * Families: 1=Red, 2=Orange, 3=Amber, 4=Yellow-Green, 5=Green, 6=Teal, 7=Cyan,\n     * 8=Blue, 9=Indigo, 10=Purple, 11=Magenta, 12=Pink\n     * @values 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12\n     */\n    family: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 1 && val <= AVATAR_FAMILY_COUNT,\n    },\n\n    /**\n     * **Advanced.** Avatar color variant (0-9). Controls lightness/chroma within the family.\n     * Only use this if you need explicit control over the color. For most cases, use `seed` instead.\n     * 0 = darkest, 9 = lightest. Variants 0-5 have light text, 6-9 have dark text.\n     * @values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9\n     */\n    variant: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 0 && val < AVATAR_VARIANT_COUNT,\n    },\n\n    /**\n     * Avatar color code for backward compatibility. Converted internally\n     * to family/variant. For new code, use `seed` (recommended) or `family`/`variant`.\n     * Format: family (1-12) * 100 + variant (0-9) * 10, e.g., '540' = family 5, variant 4.\n     * @deprecated Use seed or family/variant instead.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar.\n     * T-shirt sizes (xs, sm, md, lg, xl) are deprecated and will be removed in the next major version.\n     * Please use the numeric scale instead.\n     * @values 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(String(size)),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as \"99+\".\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and interactive,\n     * emits a click event when clicked.\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use interactive instead.\n     */\n    clickable: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * When true, renders the avatar with a transparent background and no color.\n     * Useful for displaying icons that should not have a colored background,\n     * such as channel or navigation icons.\n     */\n    iconOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, renders the avatar in a desaturated/washed-out state.\n     * Use this to indicate that a user is deactivated or inactive.\n     */\n    deactivated: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n      anchorHue: 0,\n    };\n  },\n\n  computed: {\n    resolvedInteractive () {\n      return this.clickable ?? this.interactive;\n    },\n\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    /**\n     * Compute family from props, color prop, or random\n     */\n    computedFamily () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit family prop takes precedence\n      if (this.family !== undefined) return this.family;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.family;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.family;\n    },\n\n    /**\n     * Compute variant from props, color prop, or random\n     */\n    computedVariant () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit variant prop takes precedence\n      if (this.variant !== undefined) return this.variant;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.variant;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.variant;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && String(this.formattedGroup).length === 2,\n          'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,\n          'd-avatar--clickable': this.resolvedInteractive,\n          'd-avatar--presence': this.presence && !this.showGroup,\n          'd-avatar--icon-only': this.iconOnly,\n          'd-avatar--deactivated': this.deactivated,\n        },\n      ];\n    },\n\n    /**\n     * Compute inline styles for fallback color in browsers that don't support oklch()\n     */\n    avatarStyles () {\n      const baseStyles = [];\n\n      // Only compute hex fallback for browsers that don't support oklch()\n      if (!supportsOklch && !this.isIconType && this.computedFamily && this.computedVariant !== undefined) {\n        const fallbackHex = computeAvatarHex(this.computedFamily, this.computedVariant, this.anchorHue);\n        baseStyles.push({ '--avatar-color-background': fallbackHex });\n      }\n\n      return baseStyles.length > 0 ? baseStyles : undefined;\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      const size = String(this.validatedSize);\n      // Sizes 100-250 cap at 2 digits — too small for 3\n      const smallSizes = ['xs', '100', '150', '200', '250'];\n      const maxDigits = smallSizes.includes(size) ? 2 : 3;\n      if (maxDigits === 2) {\n        return this.group > 9 ? '9+' : this.group;\n      }\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      return this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n    // Only read anchor hue for fallback computation in browsers without oklch() support\n    if (!supportsOklch) {\n      this.readAnchorHue();\n    }\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n      const size = String(this.validatedSize);\n\n      // xs/100 are too small for initials\n      if (size === 'xs' || size === '100') {\n        this.formattedInitials = '';\n      // sm/150/200 show single initial\n      } else if (size === 'sm' || size === '150' || size === '200') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    /**\n     * Read the anchor hue from CSS custom property for fallback computation\n     */\n    readAnchorHue () {\n      try {\n        const hueValue = getComputedStyle(document.documentElement)\n          .getPropertyValue('--dt-avatar-anchor-hue')\n          .trim();\n        this.anchorHue = parseFloat(hueValue) || 0;\n      } catch {\n        this.anchorHue = 0;\n      }\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.resolvedInteractive) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/avatar/avatar.js

@@ -1,42 +1,35 @@
-import { getUniqueString as e, hasSlotContent as t } from "../../common/utils/index.js";
-import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import r from "../presence/presence.js";
-import { AVATAR_GROUP_VALIDATOR as i, AVATAR_KIND_MODIFIERS as a, AVATAR_PRESENCE_SIZE_MODIFIERS as o, AVATAR_PRESENCE_STATES as s, AVATAR_SIZE_MODIFIERS as c, colorToFamilyVariant as l, computeAvatarHex as u, getRandomFamilyVariant as d } from "./avatar-constants.js";
-import { extractInitialsFromName as f } from "./utils.js";
-import { createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, mergeProps as _, normalizeClass as v, normalizeStyle as y, openBlock as b, renderSlot as x, resolveComponent as S, resolveDynamicComponent as C, toDisplayString as w, withCtx as T } from "vue";
-//#region components/Avatar/Avatar.vue
-var E = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), D = {
+import { getRandomElement as e, getUniqueString as t, hasSlotContent as n } from "../../common/utils/index.js";
+import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import i from "../presence/presence.js";
+import { AVATAR_GROUP_VALIDATOR as a, AVATAR_ICON_SIZES as o, AVATAR_KIND_MODIFIERS as s, AVATAR_PRESENCE_SIZE_MODIFIERS as c, AVATAR_PRESENCE_STATES as l, AVATAR_RANDOM_COLORS as u, AVATAR_SIZE_MODIFIERS as d } from "./avatar-constants.js";
+import { ICON_SIZE_MODIFIERS as f } from "../icon/icon-constants.js";
+import { extractInitialsFromName as p } from "./utils.js";
+import { createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, openBlock as x, renderSlot as S, resolveComponent as C, resolveDynamicComponent as w, toDisplayString as T, withCtx as E } from "vue";
+//#region components/avatar/avatar.vue
+var D = {
+	compatConfig: { MODE: 3 },
 	name: "DtAvatar",
-	components: { DtPresence: r },
+	components: { DtPresence: i },
+	inheritAttrs: !1,
 	props: {
 		id: {
 			type: String,
 			default() {
-				return e();
+				return t();
 			}
 		},
 		seed: {
 			type: String,
 			default: void 0
 		},
-		family: {
-			type: Number,
-			default: void 0,
-			validator: (e) => e >= 1 && e <= 12
-		},
-		variant: {
-			type: Number,
-			default: void 0,
-			validator: (e) => e >= 0 && e < 10
-		},
 		color: {
 			type: String,
 			default: void 0
 		},
 		size: {
-			type: [String, Number],
-			default: 300,
-			validator: (e) => Object.keys(c).includes(String(e))
+			type: String,
+			default: "md",
+			validator: (e) => Object.keys(d).includes(e)
 		},
 		avatarClass: {
 			type: [
@@ -64,8 +57,8 @@ var E = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), D
 		},
 		presence: {
 			type: String,
-			default: s.NONE,
-			validator: (e) => Object.values(s).includes(e)
+			default: l.NONE,
+			validator: (e) => Object.values(l).includes(e)
 		},
 		presenceProps: {
 			type: Object,
@@ -74,7 +67,7 @@ var E = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), D
 		group: {
 			type: Number,
 			default: void 0,
-			validator: (e) => i(e)
+			validator: (e) => a(e)
 		},
 		overlayText: {
 			type: String,
@@ -96,101 +89,60 @@ var E = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), D
 			type: String,
 			default: void 0
 		},
+		iconSize: {
+			type: String,
+			default: "",
+			validator: (e) => !e || Object.keys(f).includes(e)
+		},
 		fullName: {
 			type: String,
 			default: ""
 		},
-		interactive: {
-			type: Boolean,
-			default: !1
-		},
 		clickable: {
 			type: Boolean,
-			default: null
+			default: !1
 		},
 		iconAriaLabel: {
 			type: String,
 			default: void 0
-		},
-		iconOnly: {
-			type: Boolean,
-			default: !1
-		},
-		deactivated: {
-			type: Boolean,
-			default: !1
 		}
 	},
 	emits: ["click"],
 	data() {
 		return {
-			AVATAR_SIZE_MODIFIERS: c,
-			AVATAR_KIND_MODIFIERS: a,
-			AVATAR_PRESENCE_SIZE_MODIFIERS: o,
+			AVATAR_SIZE_MODIFIERS: d,
+			AVATAR_KIND_MODIFIERS: s,
+			AVATAR_PRESENCE_SIZE_MODIFIERS: c,
+			AVATAR_ICON_SIZES: o,
 			imageLoadedSuccessfully: null,
 			formattedInitials: "",
 			initializing: !1,
-			hasSlotContent: t,
-			anchorHue: 0
+			hasSlotContent: n
 		};
 	},
 	computed: {
-		resolvedInteractive() {
-			return this.clickable ?? this.interactive;
-		},
 		hasOverlayIcon() {
-			return t(this.$slots.overlayIcon);
-		},
-		isIconType() {
-			return t(this.$slots.icon);
+			return n(this.$slots.overlayIcon);
 		},
 		iconDataQa() {
 			return "dt-avatar-icon";
 		},
-		computedFamily() {
-			if (!this.isIconType) {
-				if (this.family !== void 0) return this.family;
-				if (this.color !== void 0) {
-					let e = l(this.color);
-					if (e) return e.family;
-				}
-				return d(this.seed).family;
-			}
-		},
-		computedVariant() {
-			if (!this.isIconType) {
-				if (this.variant !== void 0) return this.variant;
-				if (this.color !== void 0) {
-					let e = l(this.color);
-					if (e) return e.variant;
-				}
-				return d(this.seed).variant;
-			}
-		},
 		avatarClasses() {
 			return [
 				"d-avatar",
-				c[this.validatedSize],
+				this.$attrs.class,
+				d[this.validatedSize],
 				this.avatarClass,
 				{
 					"d-avatar--group": this.showGroup,
-					"d-avatar--group-digits-2": this.showGroup && String(this.formattedGroup).length === 2,
-					"d-avatar--group-digits-3": this.showGroup && String(this.formattedGroup).length >= 3,
-					"d-avatar--clickable": this.resolvedInteractive,
-					"d-avatar--presence": this.presence && !this.showGroup,
-					"d-avatar--icon-only": this.iconOnly,
-					"d-avatar--deactivated": this.deactivated
+					"d-avatar--group-digits-2": this.showGroup && this.group > 9 && this.group < 100,
+					"d-avatar--group-digits-3": this.showGroup && this.group > 99,
+					[`d-avatar--color-${this.getColor()}`]: !this.isIconType(),
+					"d-avatar--clickable": this.clickable,
+					"d-avatar--presence": this.presence && !this.showGroup
 				}
 			];
 		},
-		avatarStyles() {
-			let e = [];
-			if (!E && !this.isIconType && this.computedFamily && this.computedVariant !== void 0) {
-				let t = u(this.computedFamily, this.computedVariant, this.anchorHue);
-				e.push({ "--avatar-color-background": t });
-			}
-			return e.length > 0 ? e : void 0;
-		},
 		overlayClasses() {
 			return [
 				"d-avatar__overlay",
@@ -199,20 +151,13 @@ var E = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), D
 			];
 		},
 		showGroup() {
-			return i(this.group);
+			return a(this.group);
 		},
 		formattedGroup() {
-			let e = String(this.validatedSize);
-			return ([
-				"xs",
-				"100",
-				"150",
-				"200",
-				"250"
-			].includes(e) ? 2 : 3) == 2 ? this.group > 9 ? "9+" : this.group : this.group > 99 ? "99+" : this.group;
+			return this.group > 99 ? "99+" : this.group;
 		},
 		validatedSize() {
-			return this.size;
+			return this.group ? "xs" : this.size;
 		},
 		showImage() {
 			return this.imageLoadedSuccessfully !== !1 && this.imageSrc;
@@ -242,25 +187,23 @@ var E = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), D
 		}
 	},
 	mounted() {
-		this.validateProps(), this.setImageListeners(), E || this.readAnchorHue();
+		this.validateProps(), this.setImageListeners();
 	},
 	methods: {
+		isIconType() {
+			return n(this.$slots.icon);
+		},
 		async setImageListeners() {
 			await this.$nextTick();
 			let e = this.$refs.avatarImage;
 			e && (e.addEventListener("load", () => this._loadedImageEventHandler(e), { once: !0 }), e.addEventListener("error", () => this._erroredImageEventHandler(e), { once: !0 }));
 		},
 		formatInitials() {
-			let e = f(this.fullName), t = String(this.validatedSize);
-			t === "xs" || t === "100" ? this.formattedInitials = "" : t === "sm" || t === "150" || t === "200" ? this.formattedInitials = e[0] : this.formattedInitials = e;
-		},
-		readAnchorHue() {
-			try {
-				let e = getComputedStyle(document.documentElement).getPropertyValue("--dt-avatar-anchor-hue").trim();
-				this.anchorHue = parseFloat(e) || 0;
-			} catch {
-				this.anchorHue = 0;
-			}
+			let e = p(this.fullName);
+			this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = e[0] : this.formattedInitials = e;
+		},
+		getColor() {
+			return this.color ?? e(u, this.seed);
 		},
 		_loadedImageEventHandler(e) {
 			this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");
@@ -272,79 +215,76 @@ var E = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), D
 			this.imageSrc && this.imageAlt === void 0 && console.error("image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby");
 		},
 		handleClick(e) {
-			this.resolvedInteractive && this.$emit("click", e);
+			this.clickable && this.$emit("click", e);
 		}
 	}
-}, O = { class: "d-avatar__canvas-inner" }, k = ["src", "alt"], A = ["aria-label", "data-qa"], j = {
+}, O = ["src", "alt"], k = [
+	"aria-label",
+	"data-qa",
+	"role"
+], A = {
 	key: 1,
 	class: "d-avatar__overlay-text"
-}, M = ["aria-label"];
-function N(e, t, n, r, i, a) {
-	let o = S("dt-presence");
-	return b(), p(C(a.resolvedInteractive ? "button" : "div"), {
+}, j = {
+	key: 1,
+	class: "d-avatar__count",
+	"data-qa": "dt-avatar-count"
+};
+function M(e, t, n, r, i, a) {
+	let o = C("dt-presence");
+	return x(), m(w(n.clickable ? "button" : "div"), {
 		id: n.id,
-		class: v(a.avatarClasses),
-		style: y(a.avatarStyles),
-		"data-avatar-family": n.iconOnly ? void 0 : a.computedFamily,
-		"data-avatar-variant": n.iconOnly ? void 0 : a.computedVariant,
+		class: y(a.avatarClasses),
+		style: b(e.$attrs.style),
 		"data-qa": "dt-avatar",
-		type: a.resolvedInteractive ? "button" : void 0,
 		onClick: a.handleClick
 	}, {
-		default: T(() => [
-			g("div", {
+		default: E(() => [
+			_("div", {
 				ref: "canvas",
-				class: v([
+				class: y([
 					n.canvasClass,
 					"d-avatar__canvas",
 					{ "d-avatar--image-loaded": i.imageLoadedSuccessfully }
 				])
-			}, [g("div", O, [a.showImage ? (b(), h("img", {
+			}, [a.showImage ? (x(), g("img", {
 				key: 0,
 				ref: "avatarImage",
 				class: "d-avatar__image",
 				"data-qa": "dt-avatar-image",
 				src: n.imageSrc,
 				alt: n.imageAlt
-			}, null, 8, k)) : a.isIconType ? (b(), h("div", {
+			}, null, 8, O)) : a.isIconType() ? (x(), g("div", {
 				key: 1,
-				class: v([n.iconClass, i.AVATAR_KIND_MODIFIERS.icon]),
-				"aria-label": a.resolvedInteractive ? n.iconAriaLabel : "",
-				"data-qa": a.iconDataQa
-			}, [x(e.$slots, "icon")], 10, A)) : (b(), h("span", {
+				class: y([n.iconClass, i.AVATAR_KIND_MODIFIERS.icon]),
+				"aria-label": n.clickable ? n.iconAriaLabel : "",
+				"data-qa": a.iconDataQa,
+				role: n.clickable ? "button" : ""
+			}, [S(e.$slots, "icon", { iconSize: n.iconSize || i.AVATAR_ICON_SIZES[n.size] })], 10, k)) : (x(), g("span", {
 				key: 2,
-				class: v([i.AVATAR_KIND_MODIFIERS.initials])
-			}, w(i.formattedInitials), 3))])], 2),
-			a.hasOverlayIcon || n.overlayText ? (b(), h("div", {
+				class: y([i.AVATAR_KIND_MODIFIERS.initials])
+			}, T(i.formattedInitials), 3))], 2),
+			a.hasOverlayIcon || n.overlayText ? (x(), g("div", {
 				key: 0,
-				class: v(a.overlayClasses)
-			}, [a.hasOverlayIcon ? x(e.$slots, "overlayIcon", { key: 0 }) : n.overlayText ? (b(), h("p", j, w(n.overlayText), 1)) : m("", !0)], 2)) : m("", !0),
-			a.showGroup ? (b(), h("span", {
-				key: 1,
-				class: "d-avatar__count",
-				"data-qa": "dt-avatar-count",
-				role: "img",
-				"aria-label": `${n.group} participants`
-			}, w(a.formattedGroup), 9, M)) : m("", !0),
-			n.presence && !a.showGroup && i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size] ? (b(), p(o, _({
+				class: y(a.overlayClasses)
+			}, [a.hasOverlayIcon ? S(e.$slots, "overlayIcon", { key: 0 }) : n.overlayText ? (x(), g("p", A, T(n.overlayText), 1)) : h("", !0)], 2)) : h("", !0),
+			a.showGroup ? (x(), g("span", j, T(a.formattedGroup), 1)) : h("", !0),
+			n.presence && !a.showGroup ? (x(), m(o, v({
 				key: 2,
 				presence: n.presence,
 				class: ["d-avatar__presence", i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]]
-			}, n.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : m("", !0)
+			}, n.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : h("", !0)
 		]),
 		_: 3
 	}, 8, [
 		"id",
 		"class",
 		"style",
-		"data-avatar-family",
-		"data-avatar-variant",
-		"type",
 		"onClick"
 	]);
 }
-var P = /* @__PURE__ */ n(D, [["render", N]]);
+var N = /* @__PURE__ */ r(D, [["render", M]]);
 //#endregion
-export { P as default };
+export { N as default };
 
 //# sourceMappingURL=avatar.js.map

package/dist/lib/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../../components/Avatar/Avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"resolvedInteractive ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"avatarStyles\"\n    :data-avatar-family=\"!iconOnly ? computedFamily : undefined\"\n    :data-avatar-variant=\"!iconOnly ? computedVariant : undefined\"\n    data-qa=\"dt-avatar\"\n    :type=\"resolvedInteractive ? 'button' : undefined\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <div class=\"d-avatar__canvas-inner\">\n        <img\n          v-if=\"showImage\"\n          ref=\"avatarImage\"\n          class=\"d-avatar__image\"\n          data-qa=\"dt-avatar-image\"\n          :src=\"imageSrc\"\n          :alt=\"imageAlt\"\n        >\n        <div\n          v-else-if=\"isIconType\"\n          :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n          :aria-label=\"resolvedInteractive ? iconAriaLabel : ''\"\n          :data-qa=\"iconDataQa\"\n        >\n          <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n          <slot name=\"icon\" />\n        </div>\n        <span\n          v-else\n          :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n        >\n          {{ formattedInitials }}\n        </span>\n      </div>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n      role=\"img\"\n      :aria-label=\"`${group} participants`\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup && AVATAR_PRESENCE_SIZE_MODIFIERS[size]\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../Presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_FAMILY_COUNT,\n  AVATAR_VARIANT_COUNT,\n  colorToFamilyVariant,\n  getRandomFamilyVariant,\n  computeAvatarHex,\n} from './AvatarConstants';\nimport { extractInitialsFromName } from './Utils';\n\n// Check if browser supports oklch() - only compute hex fallback if not\nconst supportsOklch = typeof CSS !== 'undefined' && CSS.supports?.('background', 'oklch(0.5 0.1 0)');\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * **Recommended.** Pass a unique identifier (e.g., user ID) to generate consistent,\n     * deterministic colors for this avatar. The same seed always produces the same color.\n     * This is the preferred approach for most use cases.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * **Advanced.** Avatar color family (1-12). Each family represents a different hue\n     * offset from the theme's anchor. Only use this if you need explicit control over\n     * the color. For most cases, use `seed` instead.\n     * Families: 1=Red, 2=Orange, 3=Amber, 4=Yellow-Green, 5=Green, 6=Teal, 7=Cyan,\n     * 8=Blue, 9=Indigo, 10=Purple, 11=Magenta, 12=Pink\n     * @values 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12\n     */\n    family: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 1 && val <= AVATAR_FAMILY_COUNT,\n    },\n\n    /**\n     * **Advanced.** Avatar color variant (0-9). Controls lightness/chroma within the family.\n     * Only use this if you need explicit control over the color. For most cases, use `seed` instead.\n     * 0 = darkest, 9 = lightest. Variants 0-5 have light text, 6-9 have dark text.\n     * @values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9\n     */\n    variant: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 0 && val < AVATAR_VARIANT_COUNT,\n    },\n\n    /**\n     * Avatar color code for backward compatibility. Converted internally\n     * to family/variant. For new code, use `seed` (recommended) or `family`/`variant`.\n     * Format: family (1-12) * 100 + variant (0-9) * 10, e.g., '540' = family 5, variant 4.\n     * @deprecated Use seed or family/variant instead.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar.\n     * T-shirt sizes (xs, sm, md, lg, xl) are deprecated and will be removed in the next major version.\n     * Please use the numeric scale instead.\n     * @values 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(String(size)),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as \"99+\".\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and interactive,\n     * emits a click event when clicked.\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use interactive instead.\n     */\n    clickable: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * When true, renders the avatar with a transparent background and no color.\n     * Useful for displaying icons that should not have a colored background,\n     * such as channel or navigation icons.\n     */\n    iconOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, renders the avatar in a desaturated/washed-out state.\n     * Use this to indicate that a user is deactivated or inactive.\n     */\n    deactivated: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n      anchorHue: 0,\n    };\n  },\n\n  computed: {\n    resolvedInteractive () {\n      return this.clickable ?? this.interactive;\n    },\n\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    /**\n     * Compute family from props, color prop, or random\n     */\n    computedFamily () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit family prop takes precedence\n      if (this.family !== undefined) return this.family;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.family;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.family;\n    },\n\n    /**\n     * Compute variant from props, color prop, or random\n     */\n    computedVariant () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit variant prop takes precedence\n      if (this.variant !== undefined) return this.variant;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.variant;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.variant;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && String(this.formattedGroup).length === 2,\n          'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,\n          'd-avatar--clickable': this.resolvedInteractive,\n          'd-avatar--presence': this.presence && !this.showGroup,\n          'd-avatar--icon-only': this.iconOnly,\n          'd-avatar--deactivated': this.deactivated,\n        },\n      ];\n    },\n\n    /**\n     * Compute inline styles for fallback color in browsers that don't support oklch()\n     */\n    avatarStyles () {\n      const baseStyles = [];\n\n      // Only compute hex fallback for browsers that don't support oklch()\n      if (!supportsOklch && !this.isIconType && this.computedFamily && this.computedVariant !== undefined) {\n        const fallbackHex = computeAvatarHex(this.computedFamily, this.computedVariant, this.anchorHue);\n        baseStyles.push({ '--avatar-color-background': fallbackHex });\n      }\n\n      return baseStyles.length > 0 ? baseStyles : undefined;\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      const size = String(this.validatedSize);\n      // Sizes 100-250 cap at 2 digits — too small for 3\n      const smallSizes = ['xs', '100', '150', '200', '250'];\n      const maxDigits = smallSizes.includes(size) ? 2 : 3;\n      if (maxDigits === 2) {\n        return this.group > 9 ? '9+' : this.group;\n      }\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      return this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n    // Only read anchor hue for fallback computation in browsers without oklch() support\n    if (!supportsOklch) {\n      this.readAnchorHue();\n    }\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n      const size = String(this.validatedSize);\n\n      // xs/100 are too small for initials\n      if (size === 'xs' || size === '100') {\n        this.formattedInitials = '';\n      // sm/150/200 show single initial\n      } else if (size === 'sm' || size === '150' || size === '200') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    /**\n     * Read the anchor hue from CSS custom property for fallback computation\n     */\n    readAnchorHue () {\n      try {\n        const hueValue = getComputedStyle(document.documentElement)\n          .getPropertyValue('--dt-avatar-anchor-hue')\n          .trim();\n        this.anchorHue = parseFloat(hueValue) || 0;\n      } catch {\n        this.anchorHue = 0;\n      }\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.resolvedInteractive) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/avatar/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./avatar-constants.cjs`),t=require(`./avatar.cjs`);exports.AVATAR_CHROMA=e.AVATAR_CHROMA,exports.AVATAR_FAMILY_COUNT=e.AVATAR_FAMILY_COUNT,exports.AVATAR_GROUP_VALIDATOR=e.AVATAR_GROUP_VALIDATOR,exports.AVATAR_HUE_OFFSETS=e.AVATAR_HUE_OFFSETS,exports.AVATAR_ICON_SIZES=e.AVATAR_ICON_SIZES,exports.AVATAR_KIND_MODIFIERS=e.AVATAR_KIND_MODIFIERS,exports.AVATAR_LIGHTNESS=e.AVATAR_LIGHTNESS,exports.AVATAR_PRESENCE_SIZE_MODIFIERS=e.AVATAR_PRESENCE_SIZE_MODIFIERS,exports.AVATAR_PRESENCE_STATES=e.AVATAR_PRESENCE_STATES,exports.AVATAR_SIZE_MODIFIERS=e.AVATAR_SIZE_MODIFIERS,exports.AVATAR_VARIANT_COUNT=e.AVATAR_VARIANT_COUNT,exports.DtAvatar=t.default,exports.colorToFamilyVariant=e.colorToFamilyVariant,exports.computeAvatarHex=e.computeAvatarHex,exports.getRandomFamilyVariant=e.getRandomFamilyVariant;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./avatar-constants.cjs`),t=require(`./avatar.cjs`);exports.AVATAR_COLORS=e.AVATAR_COLORS,exports.AVATAR_GROUP_VALIDATOR=e.AVATAR_GROUP_VALIDATOR,exports.AVATAR_ICON_SIZES=e.AVATAR_ICON_SIZES,exports.AVATAR_KIND_MODIFIERS=e.AVATAR_KIND_MODIFIERS,exports.AVATAR_PRESENCE_SIZE_MODIFIERS=e.AVATAR_PRESENCE_SIZE_MODIFIERS,exports.AVATAR_PRESENCE_STATES=e.AVATAR_PRESENCE_STATES,exports.AVATAR_RANDOM_COLORS=e.AVATAR_RANDOM_COLORS,exports.AVATAR_SIZE_MODIFIERS=e.AVATAR_SIZE_MODIFIERS,exports.DtAvatar=t.default;

package/dist/lib/avatar/index.js

@@ -1,3 +1,3 @@
-import { AVATAR_CHROMA as e, AVATAR_FAMILY_COUNT as t, AVATAR_GROUP_VALIDATOR as n, AVATAR_HUE_OFFSETS as r, AVATAR_ICON_SIZES as i, AVATAR_KIND_MODIFIERS as a, AVATAR_LIGHTNESS as o, AVATAR_PRESENCE_SIZE_MODIFIERS as s, AVATAR_PRESENCE_STATES as c, AVATAR_SIZE_MODIFIERS as l, AVATAR_VARIANT_COUNT as u, colorToFamilyVariant as d, computeAvatarHex as f, getRandomFamilyVariant as p } from "./avatar-constants.js";
-import m from "./avatar.js";
-export { e as AVATAR_CHROMA, t as AVATAR_FAMILY_COUNT, n as AVATAR_GROUP_VALIDATOR, r as AVATAR_HUE_OFFSETS, i as AVATAR_ICON_SIZES, a as AVATAR_KIND_MODIFIERS, o as AVATAR_LIGHTNESS, s as AVATAR_PRESENCE_SIZE_MODIFIERS, c as AVATAR_PRESENCE_STATES, l as AVATAR_SIZE_MODIFIERS, u as AVATAR_VARIANT_COUNT, m as DtAvatar, d as colorToFamilyVariant, f as computeAvatarHex, p as getRandomFamilyVariant };
+import { AVATAR_COLORS as e, AVATAR_GROUP_VALIDATOR as t, AVATAR_ICON_SIZES as n, AVATAR_KIND_MODIFIERS as r, AVATAR_PRESENCE_SIZE_MODIFIERS as i, AVATAR_PRESENCE_STATES as a, AVATAR_RANDOM_COLORS as o, AVATAR_SIZE_MODIFIERS as s } from "./avatar-constants.js";
+import c from "./avatar.js";
+export { e as AVATAR_COLORS, t as AVATAR_GROUP_VALIDATOR, n as AVATAR_ICON_SIZES, r as AVATAR_KIND_MODIFIERS, i as AVATAR_PRESENCE_SIZE_MODIFIERS, a as AVATAR_PRESENCE_STATES, o as AVATAR_RANDOM_COLORS, s as AVATAR_SIZE_MODIFIERS, c as DtAvatar };

package/dist/lib/avatar/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","names":[],"sources":["../../../components/Avatar/Utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  // sanitize fullName by leaving only letters, numbers and spaces\n  fullName = fullName.replace(/[^\\p{L}\\p{N}\\s]/gu, '');\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n"],"mappings":"mEAAA,IAAa,EAA2B,GAAa,CACnD,GAAI,OAAO,GAAa,UAAY,CAAC,EAAS,MAAM,CAAE,MAAO,GAG7D,EAAW,EAAS,QAAQ,oBAAqB,GAAG,CAEpD,IAAM,EAAQ,EAAS,MAAM,CAAC,MAAM,OAAO,CAE3C,OAAO,EAAM,SAAW,EACpB,EAAM,KAAK,GAAG,CAAC,UAAU,EAAG,EAAE,CAC9B,EAAM,QAAQ,EAAG,IAAW,IAAU,GAAK,IAAU,EAAM,OAAS,EAAG,CACtE,IAAI,GAAQ,EAAK,MAAM,EAAG,EAAE,CAAC,aAAa,CAAC,CAC3C,KAAK,GAAG"}
+{"version":3,"file":"utils.cjs","names":[],"sources":["../../../components/avatar/utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  // sanitize fullName by leaving only letters, numbers and spaces\n  fullName = fullName.replace(/[^\\p{L}\\p{N}\\s]/gu, '');\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n"],"mappings":"mEAAA,IAAa,EAA2B,GAAa,CACnD,GAAI,OAAO,GAAa,UAAY,CAAC,EAAS,MAAM,CAAE,MAAO,GAG7D,EAAW,EAAS,QAAQ,oBAAqB,GAAG,CAEpD,IAAM,EAAQ,EAAS,MAAM,CAAC,MAAM,OAAO,CAE3C,OAAO,EAAM,SAAW,EACpB,EAAM,KAAK,GAAG,CAAC,UAAU,EAAG,EAAE,CAC9B,EAAM,QAAQ,EAAG,IAAW,IAAU,GAAK,IAAU,EAAM,OAAS,EAAG,CACtE,IAAI,GAAQ,EAAK,MAAM,EAAG,EAAE,CAAC,aAAa,CAAC,CAC3C,KAAK,GAAG"}