@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","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"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e","_openBlock","_createBlock","_resolveDynamicComponent","$props","$options","_normalizeStyle","_ctx","_createElementVNode","_normalizeClass","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_hoisted_4","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? '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=\"clickable ? '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=\"clickable ? 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 './avatar_constants';\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  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     * **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 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     * 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    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        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 && String(this.formattedGroup).length === 2,\n          'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,\n          'd-avatar--clickable': this.clickable,\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      // $attrs.style can be object, string, or array — normalize to an array for merging\n      const attrStyle = this.$attrs.style;\n      const baseStyles = attrStyle != null ? [].concat(attrStyle) : [];\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.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["supportsOklch","_a","_sfc_main","DtPresence","getUniqueString","val","AVATAR_FAMILY_COUNT","AVATAR_VARIANT_COUNT","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","hasSlotContent","parsed","colorToFamilyVariant","getRandomFamilyVariant","attrStyle","baseStyles","fallbackHex","computeAvatarHex","newSrc","el","initials","extractInitialsFromName","hueValue","_hoisted_1","_openBlock","_createBlock","_resolveDynamicComponent","$props","$options","_createElementVNode","_normalizeClass","$data","_createElementBlock","_renderSlot","_ctx","_hoisted_4","_toDisplayString","_hoisted_5","_component_dt_presence","_mergeProps"],"mappings":"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"}

package/dist/lib/avatar/avatar.js

@@ -1,14 +1,14 @@
-import { getRandomElement as g, hasSlotContent as o, getUniqueString as y } from "../../common/utils/index.js";
-import { AVATAR_PRESENCE_STATES as u, AVATAR_GROUP_VALIDATOR as m, AVATAR_SIZE_MODIFIERS as d, AVATAR_ICON_SIZES as _, AVATAR_PRESENCE_SIZE_MODIFIERS as S, AVATAR_KIND_MODIFIERS as I, AVATAR_RANDOM_COLORS as A } from "./avatar-constants.js";
-import { ICON_SIZE_MODIFIERS as p } from "../icon/icon-constants.js";
-import { extractInitialsFromName as E } from "./utils.js";
-import { resolveComponent as C, openBlock as r, createBlock as h, resolveDynamicComponent as O, normalizeStyle as k, normalizeClass as l, withCtx as R, createElementVNode as b, createElementBlock as s, renderSlot as f, toDisplayString as c, createCommentVNode as n, mergeProps as T } from "vue";
-import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import N from "../presence/presence.js";
-const L = {
+import { hasSlotContent as o, getUniqueString as A } from "../../common/utils/index.js";
+import { AVATAR_PRESENCE_STATES as m, AVATAR_GROUP_VALIDATOR as h, computeAvatarHex as E, AVATAR_SIZE_MODIFIERS as c, getRandomFamilyVariant as f, AVATAR_PRESENCE_SIZE_MODIFIERS as b, AVATAR_KIND_MODIFIERS as C, AVATAR_VARIANT_COUNT as k, AVATAR_FAMILY_COUNT as O, colorToFamilyVariant as y } from "./avatar-constants.js";
+import { extractInitialsFromName as T } from "./utils.js";
+import { resolveComponent as R, openBlock as r, createBlock as v, resolveDynamicComponent as V, normalizeStyle as N, normalizeClass as l, withCtx as D, createElementVNode as g, createElementBlock as n, renderSlot as S, toDisplayString as u, createCommentVNode as d, mergeProps as L } from "vue";
+import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import z from "../presence/presence.js";
+var p;
+const _ = typeof CSS < "u" && ((p = CSS.supports) == null ? void 0 : p.call(CSS, "background", "oklch(0.5 0.1 0)")), F = {
   compatConfig: { MODE: 3 },
   name: "DtAvatar",
-  components: { DtPresence: N },
+  components: { DtPresence: z },
   inheritAttrs: !1,
   props: {
     /**
@@ -17,33 +17,62 @@ const L = {
     id: {
       type: String,
       default() {
-        return y();
+        return A();
       }
     },
     /**
-     * Pass in a seed to get the random color generation based on that string. For example if you pass in a
-     * user ID as the string it will return the same randomly generated colors every time for that user.
+     * **Recommended.** Pass a unique identifier (e.g., user ID) to generate consistent,
+     * deterministic colors for this avatar. The same seed always produces the same color.
+     * This is the preferred approach for most use cases.
      */
     seed: {
       type: String,
       default: void 0
     },
     /**
-     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic
-     * if the seed prop is set.
+     * **Advanced.** Avatar color family (1-12). Each family represents a different hue
+     * offset from the theme's anchor. Only use this if you need explicit control over
+     * the color. For most cases, use `seed` instead.
+     * Families: 1=Red, 2=Orange, 3=Amber, 4=Yellow-Green, 5=Green, 6=Teal, 7=Cyan,
+     * 8=Blue, 9=Indigo, 10=Purple, 11=Magenta, 12=Pink
+     * @values 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
+     */
+    family: {
+      type: Number,
+      default: void 0,
+      validator: (e) => e >= 1 && e <= O
+    },
+    /**
+     * **Advanced.** Avatar color variant (0-9). Controls lightness/chroma within the family.
+     * Only use this if you need explicit control over the color. For most cases, use `seed` instead.
+     * 0 = darkest, 9 = lightest. Variants 0-5 have light text, 6-9 have dark text.
+     * @values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
+     */
+    variant: {
+      type: Number,
+      default: void 0,
+      validator: (e) => e >= 0 && e < k
+    },
+    /**
+     * Avatar color code for backward compatibility. Converted internally
+     * to family/variant. For new code, use `seed` (recommended) or `family`/`variant`.
+     * Format: family (1-12) * 100 + variant (0-9) * 10, e.g., '540' = family 5, variant 4.
+     * @deprecated Use seed or family/variant instead.
      */
     color: {
       type: String,
       default: void 0
     },
     /**
-     * The size of the avatar
-     * @values xs, sm, md, lg, xl
+     * The size of the avatar.
+     * T-shirt sizes (xs, sm, md, lg, xl) are deprecated and will be removed in the next major version.
+     * Please use the numeric scale instead.
+     * @values 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900
      */
     size: {
-      type: String,
-      default: "md",
-      validator: (e) => Object.keys(d).includes(e)
+      type: [String, Number],
+      default: 300,
+      validator: (e) => Object.keys(c).includes(String(e))
     },
     /**
      * Used to customize the avatar container
@@ -74,8 +103,8 @@ const L = {
      */
     presence: {
       type: String,
-      default: u.NONE,
-      validator: (e) => Object.values(u).includes(e)
+      default: m.NONE,
+      validator: (e) => Object.values(m).includes(e)
     },
     /**
      * A set of props to be passed into the presence component.
@@ -86,13 +115,13 @@ const L = {
     },
     /**
      * Determines whether to show a group avatar.
-     * Limit to 2 digits max, more than 99 will be rendered as “99+”.
+     * Limit to 2 digits max, more than 99 will be rendered as "99+".
      * if the number is 1 or less it would just show the regular avatar as if group had not been set.
      */
     group: {
       type: Number,
       default: void 0,
-      validator: (e) => m(e)
+      validator: (e) => h(e)
     },
     /**
      * The text that overlays the avatar
@@ -124,15 +153,6 @@ const L = {
       type: String,
       default: void 0
     },
-    /**
-     * Icon size to be displayed on the avatar
-     * @values 100, 200, 300, 400, 500, 600, 700, 800
-     */
-    iconSize: {
-      type: String,
-      default: "",
-      validator: (e) => !e || Object.keys(p).includes(e)
-    },
     /**
      * Full name used to extract initials.
      */
@@ -155,6 +175,23 @@ const L = {
     iconAriaLabel: {
       type: String,
       default: void 0
+    },
+    /**
+     * When true, renders the avatar with a transparent background and no color.
+     * Useful for displaying icons that should not have a colored background,
+     * such as channel or navigation icons.
+     */
+    iconOnly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * When true, renders the avatar in a desaturated/washed-out state.
+     * Use this to indicate that a user is deactivated or inactive.
+     */
+    deactivated: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
@@ -168,39 +205,78 @@ const L = {
   ],
   data() {
     return {
-      AVATAR_SIZE_MODIFIERS: d,
-      AVATAR_KIND_MODIFIERS: I,
-      AVATAR_PRESENCE_SIZE_MODIFIERS: S,
-      AVATAR_ICON_SIZES: _,
+      AVATAR_SIZE_MODIFIERS: c,
+      AVATAR_KIND_MODIFIERS: C,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: b,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
       initializing: !1,
-      hasSlotContent: o
+      hasSlotContent: o,
+      anchorHue: 0
     };
   },
   computed: {
     hasOverlayIcon() {
       return o(this.$slots.overlayIcon);
     },
+    isIconType() {
+      return o(this.$slots.icon);
+    },
     iconDataQa() {
       return "dt-avatar-icon";
     },
+    /**
+     * Compute family from props, color prop, or random
+     */
+    computedFamily() {
+      if (this.isIconType) return;
+      if (this.family !== void 0) return this.family;
+      if (this.color !== void 0) {
+        const t = y(this.color);
+        if (t) return t.family;
+      }
+      return f(this.seed).family;
+    },
+    /**
+     * Compute variant from props, color prop, or random
+     */
+    computedVariant() {
+      if (this.isIconType) return;
+      if (this.variant !== void 0) return this.variant;
+      if (this.color !== void 0) {
+        const t = y(this.color);
+        if (t) return t.variant;
+      }
+      return f(this.seed).variant;
+    },
     avatarClasses() {
       return [
         "d-avatar",
         this.$attrs.class,
-        d[this.validatedSize],
+        c[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--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.clickable,
-          "d-avatar--presence": this.presence && !this.showGroup
+          "d-avatar--presence": this.presence && !this.showGroup,
+          "d-avatar--icon-only": this.iconOnly,
+          "d-avatar--deactivated": this.deactivated
         }
       ];
     },
+    /**
+     * Compute inline styles for fallback color in browsers that don't support oklch()
+     */
+    avatarStyles() {
+      const e = this.$attrs.style, t = e != null ? [].concat(e) : [];
+      if (!_ && !this.isIconType && this.computedFamily && this.computedVariant !== void 0) {
+        const a = E(this.computedFamily, this.computedVariant, this.anchorHue);
+        t.push({ "--avatar-color-background": a });
+      }
+      return t.length > 0 ? t : void 0;
+    },
     overlayClasses() {
       return [
         "d-avatar__overlay",
@@ -209,13 +285,14 @@ const L = {
       ];
     },
     showGroup() {
-      return m(this.group);
+      return h(this.group);
     },
     formattedGroup() {
-      return this.group > 99 ? "99+" : this.group;
+      const 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.group ? "xs" : this.size;
+      return this.size;
     },
     showImage() {
       return this.imageLoadedSuccessfully !== !1 && this.imageSrc;
@@ -245,23 +322,28 @@ const L = {
     }
   },
   mounted() {
-    this.validateProps(), this.setImageListeners();
+    this.validateProps(), this.setImageListeners(), _ || this.readAnchorHue();
   },
   methods: {
-    isIconType() {
-      return o(this.$slots.icon);
-    },
     async setImageListeners() {
       await this.$nextTick();
       const e = this.$refs.avatarImage;
       e && (e.addEventListener("load", () => this._loadedImageEventHandler(e), { once: !0 }), e.addEventListener("error", () => this._erroredImageEventHandler(e), { once: !0 }));
     },
     formatInitials() {
-      const e = E(this.fullName);
-      this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = e[0] : this.formattedInitials = e;
+      const e = T(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;
     },
-    getColor() {
-      return this.color ?? g(A, this.seed);
+    /**
+     * Read the anchor hue from CSS custom property for fallback computation
+     */
+    readAnchorHue() {
+      try {
+        const 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");
@@ -276,75 +358,79 @@ const L = {
       this.clickable && this.$emit("click", e);
     }
   }
-}, z = ["src", "alt"], V = ["aria-label", "data-qa", "role"], w = {
+}, P = { class: "d-avatar__canvas-inner" }, w = ["src", "alt"], G = ["aria-label", "data-qa"], H = {
   key: 1,
   class: "d-avatar__overlay-text"
-}, x = {
-  key: 1,
-  class: "d-avatar__count",
-  "data-qa": "dt-avatar-count"
-};
-function P(e, G, a, M, i, t) {
-  const v = C("dt-presence");
-  return r(), h(O(a.clickable ? "button" : "div"), {
+}, M = ["aria-label"];
+function q(e, t, a, j, s, i) {
+  const I = R("dt-presence");
+  return r(), v(V(a.clickable ? "button" : "div"), {
     id: a.id,
-    class: l(t.avatarClasses),
-    style: k(e.$attrs.style),
+    class: l(i.avatarClasses),
+    style: N(i.avatarStyles),
+    "data-avatar-family": a.iconOnly ? void 0 : i.computedFamily,
+    "data-avatar-variant": a.iconOnly ? void 0 : i.computedVariant,
     "data-qa": "dt-avatar",
-    onClick: t.handleClick
+    type: a.clickable ? "button" : void 0,
+    onClick: i.handleClick
   }, {
-    default: R(() => [
-      b("div", {
+    default: D(() => [
+      g("div", {
         ref: "canvas",
         class: l([
           a.canvasClass,
           "d-avatar__canvas",
-          { "d-avatar--image-loaded": i.imageLoadedSuccessfully }
+          { "d-avatar--image-loaded": s.imageLoadedSuccessfully }
         ])
       }, [
-        t.showImage ? (r(), s("img", {
-          key: 0,
-          ref: "avatarImage",
-          class: "d-avatar__image",
-          "data-qa": "dt-avatar-image",
-          src: a.imageSrc,
-          alt: a.imageAlt
-        }, null, 8, z)) : t.isIconType() ? (r(), s("div", {
-          key: 1,
-          class: l([a.iconClass, i.AVATAR_KIND_MODIFIERS.icon]),
-          "aria-label": a.clickable ? a.iconAriaLabel : "",
-          "data-qa": t.iconDataQa,
-          role: a.clickable ? "button" : ""
-        }, [
-          f(e.$slots, "icon", {
-            iconSize: a.iconSize || i.AVATAR_ICON_SIZES[a.size]
-          })
-        ], 10, V)) : (r(), s("span", {
-          key: 2,
-          class: l([i.AVATAR_KIND_MODIFIERS.initials])
-        }, c(i.formattedInitials), 3))
+        g("div", P, [
+          i.showImage ? (r(), n("img", {
+            key: 0,
+            ref: "avatarImage",
+            class: "d-avatar__image",
+            "data-qa": "dt-avatar-image",
+            src: a.imageSrc,
+            alt: a.imageAlt
+          }, null, 8, w)) : i.isIconType ? (r(), n("div", {
+            key: 1,
+            class: l([a.iconClass, s.AVATAR_KIND_MODIFIERS.icon]),
+            "aria-label": a.clickable ? a.iconAriaLabel : "",
+            "data-qa": i.iconDataQa
+          }, [
+            S(e.$slots, "icon")
+          ], 10, G)) : (r(), n("span", {
+            key: 2,
+            class: l([s.AVATAR_KIND_MODIFIERS.initials])
+          }, u(s.formattedInitials), 3))
+        ])
       ], 2),
-      t.hasOverlayIcon || a.overlayText ? (r(), s("div", {
+      i.hasOverlayIcon || a.overlayText ? (r(), n("div", {
         key: 0,
-        class: l(t.overlayClasses)
+        class: l(i.overlayClasses)
       }, [
-        t.hasOverlayIcon ? f(e.$slots, "overlayIcon", { key: 0 }) : a.overlayText ? (r(), s("p", w, c(a.overlayText), 1)) : n("", !0)
-      ], 2)) : n("", !0),
-      t.showGroup ? (r(), s("span", x, c(t.formattedGroup), 1)) : n("", !0),
-      a.presence && !t.showGroup ? (r(), h(v, T({
+        i.hasOverlayIcon ? S(e.$slots, "overlayIcon", { key: 0 }) : a.overlayText ? (r(), n("p", H, u(a.overlayText), 1)) : d("", !0)
+      ], 2)) : d("", !0),
+      i.showGroup ? (r(), n("span", {
+        key: 1,
+        class: "d-avatar__count",
+        "data-qa": "dt-avatar-count",
+        role: "img",
+        "aria-label": `${a.group} participants`
+      }, u(i.formattedGroup), 9, M)) : d("", !0),
+      a.presence && !i.showGroup && s.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size] ? (r(), v(I, L({
         key: 2,
         presence: a.presence,
         class: [
           "d-avatar__presence",
-          i.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size]
+          s.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size]
         ]
-      }, a.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : n("", !0)
+      }, a.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : d("", !0)
     ]),
     _: 3
-  }, 8, ["id", "class", "style", "onClick"]);
+  }, 8, ["id", "class", "style", "data-avatar-family", "data-avatar-variant", "type", "onClick"]);
 }
-const Q = /* @__PURE__ */ D(L, [["render", P]]);
+const J = /* @__PURE__ */ x(F, [["render", q]]);
 export {
-  Q as default
+  J as default
 };
 //# sourceMappingURL=avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","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"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_openBlock","_createBlock","_resolveDynamicComponent","$props","$options","_normalizeStyle","_ctx","_createElementVNode","_normalizeClass","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_hoisted_4","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? '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=\"clickable ? '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=\"clickable ? 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 './avatar_constants';\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  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     * **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 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     * 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    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        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 && String(this.formattedGroup).length === 2,\n          'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,\n          'd-avatar--clickable': this.clickable,\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      // $attrs.style can be object, string, or array — normalize to an array for merging\n      const attrStyle = this.$attrs.style;\n      const baseStyles = attrStyle != null ? [].concat(attrStyle) : [];\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.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["supportsOklch","_a","_sfc_main","DtPresence","getUniqueString","val","AVATAR_FAMILY_COUNT","AVATAR_VARIANT_COUNT","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","hasSlotContent","parsed","colorToFamilyVariant","getRandomFamilyVariant","attrStyle","baseStyles","fallbackHex","computeAvatarHex","newSrc","el","initials","extractInitialsFromName","hueValue","_hoisted_1","_openBlock","_createBlock","_resolveDynamicComponent","$props","$options","_createElementVNode","_normalizeClass","$data","_createElementBlock","_renderSlot","_ctx","_hoisted_4","_toDisplayString","_hoisted_5","_component_dt_presence","_mergeProps"],"mappings":"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"}