@dialpad/dialtone-vue 4.6.0 → 4.6.1

package/dist/dialtone-vue.js

@@ -28,11 +28,11 @@ import { TEXT_ALIGN_MODIFIERS as ct, TEXT_BOX_TRIM_MODIFIERS as lt, TEXT_DENSITY
 import wt from "./lib/text/text.js";
 import Tt from "./lib/notice/notice-content.js";
 import { LOADER_KIND_MODIFIERS as Et } from "./lib/loader/loader-constants.js";
-import Dt from "./lib/loader/loader.js";
-import { BUTTON_ICON_SIZES as Ot, BUTTON_IMPORTANCE_MODIFIERS as kt, BUTTON_KIND_MODIFIERS as At, BUTTON_SIZE_MODIFIERS as jt, BUTTON_TYPES as Mt, ICON_POSITION_MODIFIERS as Nt, INVALID_COMBINATION as Pt } from "./lib/button/button-constants.js";
-import { CRITICAL as Ft, LINK_KIND_MODIFIERS as It, LINK_VARIANTS as Lt, MENTION as Rt, MUTED as zt, POSITIVE as Bt, WARNING as Vt, getLinkKindModifier as Ht } from "./lib/link/link-constants.js";
-import Ut from "./lib/link/link.js";
-import { DialtoneLocalization as Wt } from "./localization/index.js";
+import { DialtoneLocalization as Dt } from "./localization/index.js";
+import Ot from "./lib/loader/loader.js";
+import { BUTTON_ICON_SIZES as kt, BUTTON_IMPORTANCE_MODIFIERS as At, BUTTON_KIND_MODIFIERS as jt, BUTTON_SIZE_MODIFIERS as Mt, BUTTON_TYPES as Nt, ICON_POSITION_MODIFIERS as Pt, INVALID_COMBINATION as Ft } from "./lib/button/button-constants.js";
+import { CRITICAL as It, LINK_KIND_MODIFIERS as Lt, LINK_VARIANTS as Rt, MENTION as zt, MUTED as Bt, POSITIVE as Vt, WARNING as Ht, getLinkKindModifier as Ut } from "./lib/link/link-constants.js";
+import Wt from "./lib/link/link.js";
 import Gt from "./lib/button/button.js";
 import Kt from "./lib/notice/notice-action.js";
 import qt from "./lib/notice/notice.js";
@@ -140,7 +140,7 @@ import { t as Ci } from "./Resizable-EY7mWluI.js";
 import { t as wi } from "./ResizableHandle-v-oU-sj-.js";
 import Ti from "./lib/resizable/resizable-panel.js";
 import "./lib/resizable/index.js";
-import { t as Ei } from "./RichTextEditor-DaOHmXD_.js";
+import { t as Ei } from "./RichTextEditor-D8DfONFm.js";
 import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Di, RICH_TEXT_EDITOR_OUTPUT_FORMATS as Oi } from "./lib/rich-text-editor/rich-text-editor-constants.js";
 import "./lib/rich-text-editor/index.js";
 import { ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS as ki, ROOT_LAYOUT_SIDEBAR_POSITIONS as Ai } from "./lib/root-layout/root-layout-constants.js";
@@ -188,4 +188,4 @@ import "./lib/focustrap-directive/index.js";
 import { MOTION_TEXT_ANIMATION_MODES as Aa, MOTION_TEXT_MODE_SETTINGS as ja, MOTION_TEXT_SPEEDS as Ma, MOTION_TEXT_TIMING_PRESETS as Na, MOTION_TEXT_TRACKS as Pa } from "./lib/motion-text/motion-text-constants.js";
 import Fa from "./lib/motion-text/motion-text.js";
 import "./lib/motion-text/index.js";
-export { Ar as ARROW_KEYS, Le as AVATAR_CHROMA, Re as AVATAR_FAMILY_COUNT, ze as AVATAR_GROUP_VALIDATOR, Be as AVATAR_HUE_OFFSETS, Ve as AVATAR_ICON_SIZES, He as AVATAR_KIND_MODIFIERS, Ue as AVATAR_LIGHTNESS, We as AVATAR_PRESENCE_SIZE_MODIFIERS, Ge as AVATAR_PRESENCE_STATES, Ke as AVATAR_SIZE_MODIFIERS, qe as AVATAR_VARIANT_COUNT, Qe as BADGE_DECORATION_MODIFIERS, $e as BADGE_KIND_MODIFIERS, et as BADGE_TYPE_MODIFIERS, dn as BREADCRUMBS_INVERTED_MODIFIER, fn as BREADCRUMB_ITEM_SELECTED_MODIFIER, hn as BUTTON_GROUP_ALIGNMENT, Ot as BUTTON_ICON_SIZES, kt as BUTTON_IMPORTANCE_MODIFIERS, At as BUTTON_KIND_MODIFIERS, jt as BUTTON_SIZE_MODIFIERS, Mt as BUTTON_TYPES, jr as CDN_URL, xn as CHIP_CLOSE_BUTTON_SIZE_MODIFIERS, Sn as CHIP_ICON_SIZES, xa as CHIP_SIZES, Cn as CHIP_SIZE_MODIFIERS, Sa as CHIP_TOP_POSITION, Ln as COMBOBOX_LABEL_SIZES, t as COMPONENT_SIZES, Ft as CRITICAL, hi as DEFAULT_PANEL_SIZE, o as DEFAULT_PREFIX, s as DEFAULT_VALIDATION_MESSAGE_TYPE, c as DESCRIPTION_SIZE_MODIFIERS, l as DESCRIPTION_SIZE_TYPES, fr as DROPDOWN_PADDING_CLASSES, Yt as DT_BOX_AS_VALUES, Xt as DT_BOX_BORDER_COLOR_VALUES, Zt as DT_BOX_BORDER_RADIUS_VALUES, Qt as DT_BOX_BORDER_WIDTH_VALUES, $t as DT_BOX_INSET_SIDE_VALUES, en as DT_BOX_INSET_VALUES, tn as DT_BOX_LAYOUT_VALUES, nn as DT_BOX_OVERFLOW_VALUES, rn as DT_BOX_POSITION_VALUES, an as DT_BOX_SCROLLBAR_VALUES, on as DT_BOX_SHADOW_VALUES, sn as DT_BOX_SPACING_VALUES, cn as DT_BOX_SURFACE_VALUES, ln as DT_BOX_Z_INDEX_VALUES, cr as DT_DESCRIPTION_LIST_DIRECTION, Jr as DT_MODE_ISLAND_TYPES, Rn as DT_STACK_DIRECTION, zn as DT_STACK_GAP, Bn as DT_STACK_RESPONSIVE_BREAKPOINTS, aa as DT_TEXT_LIST_DEFAULT_TYPE, oa as DT_TEXT_LIST_GAP, sa as DT_TEXT_LIST_MARKERS, ca as DT_TEXT_LIST_MARKER_TONES, la as DT_TEXT_LIST_ORDERED_MARKERS, ua as DT_TEXT_LIST_TYPES, da as DT_TEXT_LIST_UNORDERED_MARKERS, Wt as DialtoneLocalization, Ze as DtAvatar, it as DtBadge, Jt as DtBanner, un as DtBox, pn as DtBreadcrumbItem, mn as DtBreadcrumbs, Gt as DtButton, gn as DtButtonGroup, _n as DtCard, K as DtCheckableInputMixin, vn as DtCheckbox, bn as DtCheckboxGroup, wn as DtChip, Tn as DtCodeblock, En as DtCollapsible, In as DtCombobox, wa as DtComboboxMultiSelect, ba as DtComboboxWithPopover, e as DtDOMMixin, nr as DtDatepicker, lr as DtDescriptionList, pr as DtDropdown, mr as DtDropdownSeparator, hr as DtEmoji, yr as DtEmojiPicker, Pr as DtEmojiTextWrapper, Ir as DtEmptyState, Lr as DtFilterPill, Oa as DtFocusgroupDirective, ka as DtFocustrapDirective, q as DtGroupableInputMixin, Rr as DtHovercard, rt as DtIcon, Br as DtIllustration, Vr as DtImageViewer, vr as DtInput, yn as DtInputGroup, X as DtInputGroupMixin, J as DtInputMixin, kn as DtItemLayout, Z as DtKeyboardListNavigationMixin, Hr as DtKeyboardShortcut, ur as DtLazyShow, Ut as DtLink, An as DtListItem, Wr as DtListItemGroup, Dt as DtLoader, qr as DtModal, Q as DtModalMixin, Da as DtModeDirective, Yr as DtModeIsland, ae as DtModeMixin, Fa as DtMotionText, qt as DtNotice, Kt as DtNoticeAction, Tt as DtNoticeContent, st as DtNoticeIcon, Xr as DtPagination, dr as DtPopover, Ie as DtPresence, ti as DtProgressCircle, oi as DtProse, ci as DtRadio, li as DtRadioGroup, Ci as DtResizable, wi as DtResizableHandle, Ti as DtResizablePanel, Ei as DtRichTextEditor, ji as DtRootLayout, Ea as DtScrollbarDirective, Mi as DtScroller, Gi as DtSegmentedControl, Ki as DtSegmentedControlItem, Yi as DtSelectMenu, Fn as DtSkeleton, Pn as DtSkeletonListItem, ie as DtSkeletonMixin, Nn as DtSkeletonParagraph, jn as DtSkeletonShape, Mn as DtSkeletonText, na as DtSlider, ia as DtSplitButton, Vn as DtStack, Or as DtTab, Dr as DtTabGroup, kr as DtTabPanel, wt as DtText, fa as DtTextList, pa as DtTextListItem, ga as DtToast, ya as DtToggle, tr as DtTooltip, Ta as DtTooltipDirective, Y as DtValidationMessages, Mr as EMOJIS_PER_ROW, Nr as EMOJI_PICKER_SKIN_TONE_MODIFIERS, Fr as EMPTY_STATE_SIZE_MODIFIERS, u as EVENT_KEYNAMES, d as HTML_ELEMENT_TYPE, tt as ICON_NAMES, Nt as ICON_POSITION_MODIFIERS, nt as ICON_SIZE_MODIFIERS, zr as ILLUSTRATION_NAMES, gr as INPUT_SIZES, _r as INPUT_TYPES, Pt as INVALID_COMBINATION, f as LABEL_SIZE_MODIFIERS, r as LAYOUT_PERCENT_VALUES, i as LAYOUT_SIZE_VALUES, a as LAYOUT_VALUES, It as LINK_KIND_MODIFIERS, Lt as LINK_VARIANTS, Dn as LIST_ITEM_NAVIGATION_TYPES, On as LIST_ITEM_TYPES, Et as LOADER_KIND_MODIFIERS, Rt as MENTION, Si as MIN_PANEL_SIZE_PX, Gr as MODAL_BANNER_KINDS, Kr as MODAL_KIND_MODIFIERS, Aa as MOTION_TEXT_ANIMATION_MODES, ja as MOTION_TEXT_MODE_SETTINGS, Ma as MOTION_TEXT_SPEEDS, Na as MOTION_TEXT_TIMING_PRESETS, Pa as MOTION_TEXT_TRACKS, Ca as MULTI_SELECT_SIZES, zt as MUTED, at as NOTICE_KINDS, ot as NOTICE_ROLES, qn as POPOVER_APPEND_TO_VALUES, Jn as POPOVER_CONTENT_WIDTHS, Yn as POPOVER_DIRECTIONS, Xn as POPOVER_HEADER_FOOTER_PADDING_CLASSES, Zn as POPOVER_INITIAL_FOCUS_STRINGS, Qn as POPOVER_PADDING_CLASSES, $n as POPOVER_ROLES, er as POPOVER_STICKY_VALUES, Bt as POSITIVE, Pe as PRESENCE_STATES, Fe as PRESENCE_STATES_LIST, Zr as PROGRESS_CIRCLE_KINDS, Qr as PROGRESS_CIRCLE_KIND_DEFAULT, $r as PROGRESS_CIRCLE_SIZES, ei as PROGRESS_CIRCLE_SIZE_DEFAULT, ni as PROSE_ALLOWED_ATTRIBUTES, ri as PROSE_DENSITY_MODIFIERS, ii as PROSE_DISALLOWED_ELEMENTS, ai as PROSE_SIZE_MODIFIERS, si as RADIO_INPUT_VALIDATION_CLASSES, fi as RESIZABLE_CONTEXT_KEY, pi as RESIZABLE_HANDLE_CENTER_OFFSET_PX, Di as RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, Oi as RICH_TEXT_EDITOR_OUTPUT_FORMATS, ki as ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS, Ai as ROOT_LAYOUT_SIDEBAR_POSITIONS, Ni as SEGMENTED_CONTROL_ACTIVATION_MODES, Pi as SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT, Fi as SEGMENTED_CONTROL_CONTEXT_KEY, Ii as SEGMENTED_CONTROL_FOCUS_KEY, Li as SEGMENTED_CONTROL_ORIENTATIONS, Ri as SEGMENTED_CONTROL_ORIENTATION_DEFAULT, zi as SEGMENTED_CONTROL_SELECT_KEY, Bi as SEGMENTED_CONTROL_SIZES, Vi as SEGMENTED_CONTROL_SIZE_DEFAULT, Hi as SEGMENTED_CONTROL_SIZE_MODIFIERS, Ui as SEGMENTED_CONTROL_SPREADS, Wi as SEGMENTED_CONTROL_SPREAD_DEFAULT, qi as SELECT_SIZE_MODIFIERS, Ji as SELECT_STATE_MODIFIERS, Ur as SHORTCUTS_ALIASES_LIST, $ as SKELETON_HEADING_HEIGHTS, ee as SKELETON_RIPPLE_DURATION, te as SKELETON_SHAPES, ne as SKELETON_SHAPE_SIZES, re as SKELETON_TEXT_TYPES, Qi as SLIDER_DEFAULT_LARGE_STEP, ea as SLIDER_EDGE_CLAMP_TOLERANCE_PX, Zi as SLIDER_FILL_ORIGINS, Xi as SLIDER_ORIENTATIONS, $i as SLIDER_READOUT_EDGE_CLAMP_TOLERANCE_PX, ta as SLIDER_READOUT_MODES, ra as SPLIT_BUTTON_ICON_SIZES, br as TAB_ACTIVATION_MODES, xr as TAB_GROUP_KINDS, Sr as TAB_LIST_IMPORTANCE_MODIFIERS, Cr as TAB_LIST_KIND_MODIFIERS, wr as TAB_LIST_SIZES, Tr as TAB_LIST_SIZE_MODIFIERS, Er as TAB_SPREADS, ct as TEXT_ALIGN_MODIFIERS, lt as TEXT_BOX_TRIM_MODIFIERS, ut as TEXT_DENSITY_MODIFIERS, dt as TEXT_FAMILY_MODIFIERS, ft as TEXT_FONT_SIZE_MODIFIERS, pt as TEXT_HEADLINE_ONLY_SIZES, n as TEXT_HEADLINE_SIZES, mt as TEXT_ITALIC_CLASS, ht as TEXT_KIND_MODIFIERS, gt as TEXT_LINE_CLAMP_CLASS, _t as TEXT_NUMERIC_CLASS, vt as TEXT_SIZE_MODIFIERS, yt as TEXT_STRENGTH_MODIFIERS, bt as TEXT_TONE_MODIFIERS, xt as TEXT_TRUNCATE_CLASS, St as TEXT_VARIANT_MODIFIERS, Ct as TEXT_WRAP_MODIFIERS, ma as TOAST_MIN_DURATION, ha as TOAST_ROLES, _a as TOGGLE_CHECKED_VALUES, va as TOGGLE_SIZE_MODIFIERS, Hn as TOOLTIP_DELAY_MS, Un as TOOLTIP_DIRECTIONS, Wn as TOOLTIP_HIDE_ON_CLICK_VARIANTS, Gn as TOOLTIP_KIND_MODIFIERS, Kn as TOOLTIP_STICKY_VALUES, p as VALIDATION_MESSAGE_TYPES, Vt as WARNING, vi as buildHandleId, h as capitalizeFirstLetter, ue as codeToEmojiData, Je as colorToFamilyVariant, Ye as computeAvatarHex, de as customEmojiAssetUrl, g as debounce, fe as defaultEmojiAssetUrl, _ as disableRootScrolling, oe as durationInHHMM, pe as emojiFileExtensionLarge, me as emojiFileExtensionSmall, he as emojiImageUrlLarge, ge as emojiImageUrlSmall, _e as emojiJson, ve as emojiRegex, ye as emojiShortCodeRegex, be as emojiVersion, v as enableRootScrolling, y as extractNonListeners, b as extractVueListeners, x as filterFormattedMessages, xe as filterValidShortCodes, Se as findEmojis, S as findFirstFocusableNode, Ce as findShortCodes, C as flushPromises, rr as formatLong, ir as formatMedium, w as formatMessages, ar as formatNoYear, or as formatNumerical, sr as formatShort, se as getDateMedium, we as getEmojiData, Te as getEmojiShortCode, Ht as getLinkKindModifier, T as getPhoneNumberRegex, E as getRandomElement, Xe as getRandomFamilyVariant, D as getRandomInt, O as getUniqueString, k as getValidationState, A as hasFormattedMessageOfType, xi as hasPercentageMinSize, j as hasSlotContent, M as htmlFragment, gi as invalidateTokenCache, yi as isCSSValue, N as isEmailAddress, P as isOutOfViewPort, mi as isPercentageValue, F as isPhoneNumber, I as isURL, ui as isValidSizing, L as javaHashCode, R as kebabCaseToPascalCase, z as linkRegex, _i as parseSizeToPixels, B as pascalCaseToKebabCase, bi as pixelsToPercentage, ce as relativeDate, V as removeClassStyleAttrs, H as returnFirstEl, U as safeConcatStrings, Ee as setCustomEmojiJson, De as setCustomEmojiUrl, le as setDateLocale, Oe as setEmojiAssetUrlLarge, ke as setEmojiAssetUrlSmall, Ae as shortcodeToEmojiData, je as stringToUnicode, W as toFluentKeyString, Me as unicodeToString, di as validateContainerSize, Ne as validateCustomEmojiJson, m as validationMessageValidator, G as warnIfUnmounted };
+export { Ar as ARROW_KEYS, Le as AVATAR_CHROMA, Re as AVATAR_FAMILY_COUNT, ze as AVATAR_GROUP_VALIDATOR, Be as AVATAR_HUE_OFFSETS, Ve as AVATAR_ICON_SIZES, He as AVATAR_KIND_MODIFIERS, Ue as AVATAR_LIGHTNESS, We as AVATAR_PRESENCE_SIZE_MODIFIERS, Ge as AVATAR_PRESENCE_STATES, Ke as AVATAR_SIZE_MODIFIERS, qe as AVATAR_VARIANT_COUNT, Qe as BADGE_DECORATION_MODIFIERS, $e as BADGE_KIND_MODIFIERS, et as BADGE_TYPE_MODIFIERS, dn as BREADCRUMBS_INVERTED_MODIFIER, fn as BREADCRUMB_ITEM_SELECTED_MODIFIER, hn as BUTTON_GROUP_ALIGNMENT, kt as BUTTON_ICON_SIZES, At as BUTTON_IMPORTANCE_MODIFIERS, jt as BUTTON_KIND_MODIFIERS, Mt as BUTTON_SIZE_MODIFIERS, Nt as BUTTON_TYPES, jr as CDN_URL, xn as CHIP_CLOSE_BUTTON_SIZE_MODIFIERS, Sn as CHIP_ICON_SIZES, xa as CHIP_SIZES, Cn as CHIP_SIZE_MODIFIERS, Sa as CHIP_TOP_POSITION, Ln as COMBOBOX_LABEL_SIZES, t as COMPONENT_SIZES, It as CRITICAL, hi as DEFAULT_PANEL_SIZE, o as DEFAULT_PREFIX, s as DEFAULT_VALIDATION_MESSAGE_TYPE, c as DESCRIPTION_SIZE_MODIFIERS, l as DESCRIPTION_SIZE_TYPES, fr as DROPDOWN_PADDING_CLASSES, Yt as DT_BOX_AS_VALUES, Xt as DT_BOX_BORDER_COLOR_VALUES, Zt as DT_BOX_BORDER_RADIUS_VALUES, Qt as DT_BOX_BORDER_WIDTH_VALUES, $t as DT_BOX_INSET_SIDE_VALUES, en as DT_BOX_INSET_VALUES, tn as DT_BOX_LAYOUT_VALUES, nn as DT_BOX_OVERFLOW_VALUES, rn as DT_BOX_POSITION_VALUES, an as DT_BOX_SCROLLBAR_VALUES, on as DT_BOX_SHADOW_VALUES, sn as DT_BOX_SPACING_VALUES, cn as DT_BOX_SURFACE_VALUES, ln as DT_BOX_Z_INDEX_VALUES, cr as DT_DESCRIPTION_LIST_DIRECTION, Jr as DT_MODE_ISLAND_TYPES, Rn as DT_STACK_DIRECTION, zn as DT_STACK_GAP, Bn as DT_STACK_RESPONSIVE_BREAKPOINTS, aa as DT_TEXT_LIST_DEFAULT_TYPE, oa as DT_TEXT_LIST_GAP, sa as DT_TEXT_LIST_MARKERS, ca as DT_TEXT_LIST_MARKER_TONES, la as DT_TEXT_LIST_ORDERED_MARKERS, ua as DT_TEXT_LIST_TYPES, da as DT_TEXT_LIST_UNORDERED_MARKERS, Dt as DialtoneLocalization, Ze as DtAvatar, it as DtBadge, Jt as DtBanner, un as DtBox, pn as DtBreadcrumbItem, mn as DtBreadcrumbs, Gt as DtButton, gn as DtButtonGroup, _n as DtCard, K as DtCheckableInputMixin, vn as DtCheckbox, bn as DtCheckboxGroup, wn as DtChip, Tn as DtCodeblock, En as DtCollapsible, In as DtCombobox, wa as DtComboboxMultiSelect, ba as DtComboboxWithPopover, e as DtDOMMixin, nr as DtDatepicker, lr as DtDescriptionList, pr as DtDropdown, mr as DtDropdownSeparator, hr as DtEmoji, yr as DtEmojiPicker, Pr as DtEmojiTextWrapper, Ir as DtEmptyState, Lr as DtFilterPill, Oa as DtFocusgroupDirective, ka as DtFocustrapDirective, q as DtGroupableInputMixin, Rr as DtHovercard, rt as DtIcon, Br as DtIllustration, Vr as DtImageViewer, vr as DtInput, yn as DtInputGroup, X as DtInputGroupMixin, J as DtInputMixin, kn as DtItemLayout, Z as DtKeyboardListNavigationMixin, Hr as DtKeyboardShortcut, ur as DtLazyShow, Wt as DtLink, An as DtListItem, Wr as DtListItemGroup, Ot as DtLoader, qr as DtModal, Q as DtModalMixin, Da as DtModeDirective, Yr as DtModeIsland, ae as DtModeMixin, Fa as DtMotionText, qt as DtNotice, Kt as DtNoticeAction, Tt as DtNoticeContent, st as DtNoticeIcon, Xr as DtPagination, dr as DtPopover, Ie as DtPresence, ti as DtProgressCircle, oi as DtProse, ci as DtRadio, li as DtRadioGroup, Ci as DtResizable, wi as DtResizableHandle, Ti as DtResizablePanel, Ei as DtRichTextEditor, ji as DtRootLayout, Ea as DtScrollbarDirective, Mi as DtScroller, Gi as DtSegmentedControl, Ki as DtSegmentedControlItem, Yi as DtSelectMenu, Fn as DtSkeleton, Pn as DtSkeletonListItem, ie as DtSkeletonMixin, Nn as DtSkeletonParagraph, jn as DtSkeletonShape, Mn as DtSkeletonText, na as DtSlider, ia as DtSplitButton, Vn as DtStack, Or as DtTab, Dr as DtTabGroup, kr as DtTabPanel, wt as DtText, fa as DtTextList, pa as DtTextListItem, ga as DtToast, ya as DtToggle, tr as DtTooltip, Ta as DtTooltipDirective, Y as DtValidationMessages, Mr as EMOJIS_PER_ROW, Nr as EMOJI_PICKER_SKIN_TONE_MODIFIERS, Fr as EMPTY_STATE_SIZE_MODIFIERS, u as EVENT_KEYNAMES, d as HTML_ELEMENT_TYPE, tt as ICON_NAMES, Pt as ICON_POSITION_MODIFIERS, nt as ICON_SIZE_MODIFIERS, zr as ILLUSTRATION_NAMES, gr as INPUT_SIZES, _r as INPUT_TYPES, Ft as INVALID_COMBINATION, f as LABEL_SIZE_MODIFIERS, r as LAYOUT_PERCENT_VALUES, i as LAYOUT_SIZE_VALUES, a as LAYOUT_VALUES, Lt as LINK_KIND_MODIFIERS, Rt as LINK_VARIANTS, Dn as LIST_ITEM_NAVIGATION_TYPES, On as LIST_ITEM_TYPES, Et as LOADER_KIND_MODIFIERS, zt as MENTION, Si as MIN_PANEL_SIZE_PX, Gr as MODAL_BANNER_KINDS, Kr as MODAL_KIND_MODIFIERS, Aa as MOTION_TEXT_ANIMATION_MODES, ja as MOTION_TEXT_MODE_SETTINGS, Ma as MOTION_TEXT_SPEEDS, Na as MOTION_TEXT_TIMING_PRESETS, Pa as MOTION_TEXT_TRACKS, Ca as MULTI_SELECT_SIZES, Bt as MUTED, at as NOTICE_KINDS, ot as NOTICE_ROLES, qn as POPOVER_APPEND_TO_VALUES, Jn as POPOVER_CONTENT_WIDTHS, Yn as POPOVER_DIRECTIONS, Xn as POPOVER_HEADER_FOOTER_PADDING_CLASSES, Zn as POPOVER_INITIAL_FOCUS_STRINGS, Qn as POPOVER_PADDING_CLASSES, $n as POPOVER_ROLES, er as POPOVER_STICKY_VALUES, Vt as POSITIVE, Pe as PRESENCE_STATES, Fe as PRESENCE_STATES_LIST, Zr as PROGRESS_CIRCLE_KINDS, Qr as PROGRESS_CIRCLE_KIND_DEFAULT, $r as PROGRESS_CIRCLE_SIZES, ei as PROGRESS_CIRCLE_SIZE_DEFAULT, ni as PROSE_ALLOWED_ATTRIBUTES, ri as PROSE_DENSITY_MODIFIERS, ii as PROSE_DISALLOWED_ELEMENTS, ai as PROSE_SIZE_MODIFIERS, si as RADIO_INPUT_VALIDATION_CLASSES, fi as RESIZABLE_CONTEXT_KEY, pi as RESIZABLE_HANDLE_CENTER_OFFSET_PX, Di as RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, Oi as RICH_TEXT_EDITOR_OUTPUT_FORMATS, ki as ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS, Ai as ROOT_LAYOUT_SIDEBAR_POSITIONS, Ni as SEGMENTED_CONTROL_ACTIVATION_MODES, Pi as SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT, Fi as SEGMENTED_CONTROL_CONTEXT_KEY, Ii as SEGMENTED_CONTROL_FOCUS_KEY, Li as SEGMENTED_CONTROL_ORIENTATIONS, Ri as SEGMENTED_CONTROL_ORIENTATION_DEFAULT, zi as SEGMENTED_CONTROL_SELECT_KEY, Bi as SEGMENTED_CONTROL_SIZES, Vi as SEGMENTED_CONTROL_SIZE_DEFAULT, Hi as SEGMENTED_CONTROL_SIZE_MODIFIERS, Ui as SEGMENTED_CONTROL_SPREADS, Wi as SEGMENTED_CONTROL_SPREAD_DEFAULT, qi as SELECT_SIZE_MODIFIERS, Ji as SELECT_STATE_MODIFIERS, Ur as SHORTCUTS_ALIASES_LIST, $ as SKELETON_HEADING_HEIGHTS, ee as SKELETON_RIPPLE_DURATION, te as SKELETON_SHAPES, ne as SKELETON_SHAPE_SIZES, re as SKELETON_TEXT_TYPES, Qi as SLIDER_DEFAULT_LARGE_STEP, ea as SLIDER_EDGE_CLAMP_TOLERANCE_PX, Zi as SLIDER_FILL_ORIGINS, Xi as SLIDER_ORIENTATIONS, $i as SLIDER_READOUT_EDGE_CLAMP_TOLERANCE_PX, ta as SLIDER_READOUT_MODES, ra as SPLIT_BUTTON_ICON_SIZES, br as TAB_ACTIVATION_MODES, xr as TAB_GROUP_KINDS, Sr as TAB_LIST_IMPORTANCE_MODIFIERS, Cr as TAB_LIST_KIND_MODIFIERS, wr as TAB_LIST_SIZES, Tr as TAB_LIST_SIZE_MODIFIERS, Er as TAB_SPREADS, ct as TEXT_ALIGN_MODIFIERS, lt as TEXT_BOX_TRIM_MODIFIERS, ut as TEXT_DENSITY_MODIFIERS, dt as TEXT_FAMILY_MODIFIERS, ft as TEXT_FONT_SIZE_MODIFIERS, pt as TEXT_HEADLINE_ONLY_SIZES, n as TEXT_HEADLINE_SIZES, mt as TEXT_ITALIC_CLASS, ht as TEXT_KIND_MODIFIERS, gt as TEXT_LINE_CLAMP_CLASS, _t as TEXT_NUMERIC_CLASS, vt as TEXT_SIZE_MODIFIERS, yt as TEXT_STRENGTH_MODIFIERS, bt as TEXT_TONE_MODIFIERS, xt as TEXT_TRUNCATE_CLASS, St as TEXT_VARIANT_MODIFIERS, Ct as TEXT_WRAP_MODIFIERS, ma as TOAST_MIN_DURATION, ha as TOAST_ROLES, _a as TOGGLE_CHECKED_VALUES, va as TOGGLE_SIZE_MODIFIERS, Hn as TOOLTIP_DELAY_MS, Un as TOOLTIP_DIRECTIONS, Wn as TOOLTIP_HIDE_ON_CLICK_VARIANTS, Gn as TOOLTIP_KIND_MODIFIERS, Kn as TOOLTIP_STICKY_VALUES, p as VALIDATION_MESSAGE_TYPES, Ht as WARNING, vi as buildHandleId, h as capitalizeFirstLetter, ue as codeToEmojiData, Je as colorToFamilyVariant, Ye as computeAvatarHex, de as customEmojiAssetUrl, g as debounce, fe as defaultEmojiAssetUrl, _ as disableRootScrolling, oe as durationInHHMM, pe as emojiFileExtensionLarge, me as emojiFileExtensionSmall, he as emojiImageUrlLarge, ge as emojiImageUrlSmall, _e as emojiJson, ve as emojiRegex, ye as emojiShortCodeRegex, be as emojiVersion, v as enableRootScrolling, y as extractNonListeners, b as extractVueListeners, x as filterFormattedMessages, xe as filterValidShortCodes, Se as findEmojis, S as findFirstFocusableNode, Ce as findShortCodes, C as flushPromises, rr as formatLong, ir as formatMedium, w as formatMessages, ar as formatNoYear, or as formatNumerical, sr as formatShort, se as getDateMedium, we as getEmojiData, Te as getEmojiShortCode, Ut as getLinkKindModifier, T as getPhoneNumberRegex, E as getRandomElement, Xe as getRandomFamilyVariant, D as getRandomInt, O as getUniqueString, k as getValidationState, A as hasFormattedMessageOfType, xi as hasPercentageMinSize, j as hasSlotContent, M as htmlFragment, gi as invalidateTokenCache, yi as isCSSValue, N as isEmailAddress, P as isOutOfViewPort, mi as isPercentageValue, F as isPhoneNumber, I as isURL, ui as isValidSizing, L as javaHashCode, R as kebabCaseToPascalCase, z as linkRegex, _i as parseSizeToPixels, B as pascalCaseToKebabCase, bi as pixelsToPercentage, ce as relativeDate, V as removeClassStyleAttrs, H as returnFirstEl, U as safeConcatStrings, Ee as setCustomEmojiJson, De as setCustomEmojiUrl, le as setDateLocale, Oe as setEmojiAssetUrlLarge, ke as setEmojiAssetUrlSmall, Ae as shortcodeToEmojiData, je as stringToUnicode, W as toFluentKeyString, Me as unicodeToString, di as validateContainerSize, Ne as validateCustomEmojiJson, m as validationMessageValidator, G as warnIfUnmounted };

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/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../Presence-DLM3JR-n.cjs`),i=require(`./avatar-constants.cjs`),a=require(`./utils.cjs`);let o=require(`vue`);var s=typeof CSS<`u`&&CSS.supports?.(`background`,`oklch(0.5 0.1 0)`),c={name:`DtAvatar`,components:{DtPresence:r.t},props:{id:{type:String,default(){return t.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.ordinalSizeValidator(i.AVATAR_SIZE_MODIFIERS)},avatarClass:{type:[String,Array,Object],default:``},canvasClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},presence:{type:String,default:i.AVATAR_PRESENCE_STATES.NONE,validator:e=>Object.values(i.AVATAR_PRESENCE_STATES).includes(e)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:e=>i.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:i.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:i.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:i.AVATAR_PRESENCE_SIZE_MODIFIERS,imageLoadedSuccessfully:null,formattedInitials:``,initializing:!1,hasSlotContent:t.hasSlotContent,anchorHue:0}},computed:{resolvedInteractive(){return this.clickable??this.interactive},hasOverlayIcon(){return t.hasSlotContent(this.$slots.overlayIcon)},isIconType(){return t.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=i.colorToFamilyVariant(this.color);if(e)return e.family}return i.getRandomFamilyVariant(this.seed).family}},computedVariant(){if(!this.isIconType){if(this.variant!==void 0)return this.variant;if(this.color!==void 0){let e=i.colorToFamilyVariant(this.color);if(e)return e.variant}return i.getRandomFamilyVariant(this.seed).variant}},avatarClasses(){return[`d-avatar`,i.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(!s&&!this.isIconType&&this.computedFamily&&this.computedVariant!==void 0){let t=i.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 i.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(),s||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=a.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)}}},l={class:`d-avatar__canvas-inner`},u=[`src`,`alt`],d=[`aria-label`,`data-qa`],f={key:1,class:`d-avatar__overlay-text`},p=[`aria-label`];function m(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-presence`);return(0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(a.resolvedInteractive?`button`:`div`),{id:n.id,class:(0,o.normalizeClass)(a.avatarClasses),style:(0,o.normalizeStyle)(a.avatarStyles),"data-avatar-family":n.iconOnly?void 0:a.computedFamily,"data-avatar-variant":n.iconOnly?void 0:a.computedVariant,"data-qa":`dt-avatar`,type:a.resolvedInteractive?`button`:void 0,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}])},[(0,o.createElementVNode)(`div`,l,[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,u)):a.isIconType?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:1,class:(0,o.normalizeClass)([n.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":a.resolvedInteractive?n.iconAriaLabel:``,"data-qa":a.iconDataQa},[(0,o.renderSlot)(e.$slots,`icon`)],10,d)):((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`,f,(0,o.toDisplayString)(n.overlayText),1)):(0,o.createCommentVNode)(``,!0)],2)):(0,o.createCommentVNode)(``,!0),a.showGroup?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:1,class:`d-avatar__count`,"data-qa":`dt-avatar-count`,role:`img`,"aria-label":`${n.group} participants`},(0,o.toDisplayString)(a.formattedGroup),9,p)):(0,o.createCommentVNode)(``,!0),n.presence&&!a.showGroup&&i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]?((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`,`data-avatar-family`,`data-avatar-variant`,`type`,`onClick`])}var h=n.t(c,[[`render`,m]]);exports.default=h;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../Presence-DLM3JR-n.cjs`),i=require(`./avatar-constants.cjs`),a=require(`./utils.cjs`);let o=require(`vue`);var s=typeof CSS<`u`&&CSS.supports?.(`background`,`oklch(0.5 0.1 0)`),c={name:`DtAvatar`,components:{DtPresence:r.t},props:{id:{type:String,default(){return t.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.ordinalSizeValidator(i.AVATAR_SIZE_MODIFIERS)},avatarClass:{type:[String,Array,Object],default:``},canvasClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},presence:{type:String,default:i.AVATAR_PRESENCE_STATES.NONE,validator:e=>Object.values(i.AVATAR_PRESENCE_STATES).includes(e)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:e=>i.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:i.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:i.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:i.AVATAR_PRESENCE_SIZE_MODIFIERS,imageLoadedSuccessfully:null,formattedInitials:``,initializing:!1,hasSlotContent:t.hasSlotContent,anchorHue:0}},computed:{resolvedInteractive(){return this.clickable??this.interactive},randomFamilyVariant(){return i.getRandomFamilyVariant(this.seed)},iconDataQa(){return`dt-avatar-icon`},avatarClasses(){return[`d-avatar`,i.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}]},showGroup(){return i.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(),s||this.readAnchorHue()},methods:{hasOverlayIcon(){return t.hasSlotContent(this.$slots.overlayIcon)},isIconType(){return t.hasSlotContent(this.$slots.icon)},getFamily(){if(!this.isIconType()){if(this.family!==void 0)return this.family;if(this.color!==void 0){let e=i.colorToFamilyVariant(this.color);if(e)return e.family}return this.randomFamilyVariant.family}},getVariant(){if(!this.isIconType()){if(this.variant!==void 0)return this.variant;if(this.color!==void 0){let e=i.colorToFamilyVariant(this.color);if(e)return e.variant}return this.randomFamilyVariant.variant}},avatarStyles(){let e=[];if(!s&&!this.isIconType()&&this.getFamily()&&this.getVariant()!==void 0){let t=i.computeAvatarHex(this.getFamily(),this.getVariant(),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()}]},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),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)}}},l={class:`d-avatar__canvas-inner`},u=[`src`,`alt`],d=[`aria-label`,`data-qa`],f={key:1,class:`d-avatar__overlay-text`},p=[`aria-label`];function m(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-presence`);return(0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(a.resolvedInteractive?`button`:`div`),{id:n.id,class:(0,o.normalizeClass)(a.avatarClasses),style:(0,o.normalizeStyle)(a.avatarStyles()),"data-avatar-family":n.iconOnly?void 0:a.getFamily(),"data-avatar-variant":n.iconOnly?void 0:a.getVariant(),"data-qa":`dt-avatar`,type:a.resolvedInteractive?`button`:void 0,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}])},[(0,o.createElementVNode)(`div`,l,[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,u)):a.isIconType()?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:1,class:(0,o.normalizeClass)([n.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":a.resolvedInteractive?n.iconAriaLabel:``,"data-qa":a.iconDataQa},[(0,o.renderSlot)(e.$slots,`icon`)],10,d)):((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`,f,(0,o.toDisplayString)(n.overlayText),1)):(0,o.createCommentVNode)(``,!0)],2)):(0,o.createCommentVNode)(``,!0),a.showGroup?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:1,class:`d-avatar__count`,"data-qa":`dt-avatar-count`,role:`img`,"aria-label":`${n.group} participants`},(0,o.toDisplayString)(a.formattedGroup),9,p)):(0,o.createCommentVNode)(``,!0),n.presence&&!a.showGroup&&i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]?((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`,`data-avatar-family`,`data-avatar-variant`,`type`,`onClick`])}var h=n.t(c,[[`render`,m]]);exports.default=h;
 //# 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 { ordinalSizeValidator } from '@/common/validators';\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: ordinalSizeValidator(AVATAR_SIZE_MODIFIERS),\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     * 'active', or 'dnd'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active, dnd\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=\"resolvedInteractive ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"avatarStyles()\"\n    :data-avatar-family=\"!iconOnly ? getFamily() : undefined\"\n    :data-avatar-variant=\"!iconOnly ? getVariant() : 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 { ordinalSizeValidator } from '@/common/validators';\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: ordinalSizeValidator(AVATAR_SIZE_MODIFIERS),\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     * 'active', or 'dnd'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active, dnd\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    /**\n     * Random family/variant, cached so unseeded avatars keep one color\n     * instead of re-rolling on every render. Recomputes only when seed changes.\n     */\n    randomFamilyVariant () {\n      return getRandomFamilyVariant(this.seed);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\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    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    // These read $slots, which is not reactive, so they must not be cached as computeds.\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    /**\n     * Compute family from props, color prop, or random\n     */\n    getFamily () {\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 = this.randomFamilyVariant;\n      return random.family;\n    },\n\n    /**\n     * Compute variant from props, color prop, or random\n     */\n    getVariant () {\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 = this.randomFamilyVariant;\n      return random.variant;\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.getFamily() && this.getVariant() !== undefined) {\n        const fallbackHex = computeAvatarHex(this.getFamily(), this.getVariant(), 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    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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"}

package/dist/lib/avatar/avatar.js

@@ -139,35 +139,12 @@ var D = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), O
 		resolvedInteractive() {
 			return this.clickable ?? this.interactive;
 		},
-		hasOverlayIcon() {
-			return n(this.$slots.overlayIcon);
-		},
-		isIconType() {
-			return n(this.$slots.icon);
+		randomFamilyVariant() {
+			return f(this.seed);
 		},
 		iconDataQa() {
 			return "dt-avatar-icon";
 		},
-		computedFamily() {
-			if (!this.isIconType) {
-				if (this.family !== void 0) return this.family;
-				if (this.color !== void 0) {
-					let e = u(this.color);
-					if (e) return e.family;
-				}
-				return f(this.seed).family;
-			}
-		},
-		computedVariant() {
-			if (!this.isIconType) {
-				if (this.variant !== void 0) return this.variant;
-				if (this.color !== void 0) {
-					let e = u(this.color);
-					if (e) return e.variant;
-				}
-				return f(this.seed).variant;
-			}
-		},
 		avatarClasses() {
 			return [
 				"d-avatar",
@@ -184,21 +161,6 @@ var D = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), O
 				}
 			];
 		},
-		avatarStyles() {
-			let e = [];
-			if (!D && !this.isIconType && this.computedFamily && this.computedVariant !== void 0) {
-				let t = d(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 a(this.group);
 		},
@@ -246,6 +208,47 @@ var D = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), O
 		this.validateProps(), this.setImageListeners(), D || this.readAnchorHue();
 	},
 	methods: {
+		hasOverlayIcon() {
+			return n(this.$slots.overlayIcon);
+		},
+		isIconType() {
+			return n(this.$slots.icon);
+		},
+		getFamily() {
+			if (!this.isIconType()) {
+				if (this.family !== void 0) return this.family;
+				if (this.color !== void 0) {
+					let e = u(this.color);
+					if (e) return e.family;
+				}
+				return this.randomFamilyVariant.family;
+			}
+		},
+		getVariant() {
+			if (!this.isIconType()) {
+				if (this.variant !== void 0) return this.variant;
+				if (this.color !== void 0) {
+					let e = u(this.color);
+					if (e) return e.variant;
+				}
+				return this.randomFamilyVariant.variant;
+			}
+		},
+		avatarStyles() {
+			let e = [];
+			if (!D && !this.isIconType() && this.getFamily() && this.getVariant() !== void 0) {
+				let t = d(this.getFamily(), this.getVariant(), 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() }
+			];
+		},
 		async setImageListeners() {
 			await this.$nextTick();
 			let e = this.$refs.avatarImage;
@@ -285,9 +288,9 @@ function P(e, t, n, r, i, a) {
 	return x(), m(w(a.resolvedInteractive ? "button" : "div"), {
 		id: n.id,
 		class: y(a.avatarClasses),
-		style: b(a.avatarStyles),
-		"data-avatar-family": n.iconOnly ? void 0 : a.computedFamily,
-		"data-avatar-variant": n.iconOnly ? void 0 : a.computedVariant,
+		style: b(a.avatarStyles()),
+		"data-avatar-family": n.iconOnly ? void 0 : a.getFamily(),
+		"data-avatar-variant": n.iconOnly ? void 0 : a.getVariant(),
 		"data-qa": "dt-avatar",
 		type: a.resolvedInteractive ? "button" : void 0,
 		onClick: a.handleClick
@@ -307,7 +310,7 @@ function P(e, t, n, r, i, a) {
 				"data-qa": "dt-avatar-image",
 				src: n.imageSrc,
 				alt: n.imageAlt
-			}, null, 8, A)) : a.isIconType ? (x(), g("div", {
+			}, null, 8, A)) : a.isIconType() ? (x(), g("div", {
 				key: 1,
 				class: y([n.iconClass, i.AVATAR_KIND_MODIFIERS.icon]),
 				"aria-label": a.resolvedInteractive ? n.iconAriaLabel : "",
@@ -316,10 +319,10 @@ function P(e, t, n, r, i, a) {
 				key: 2,
 				class: y([i.AVATAR_KIND_MODIFIERS.initials])
 			}, T(i.formattedInitials), 3))])], 2),
-			a.hasOverlayIcon || n.overlayText ? (x(), g("div", {
+			a.hasOverlayIcon() || n.overlayText ? (x(), g("div", {
 				key: 0,
-				class: y(a.overlayClasses)
-			}, [a.hasOverlayIcon ? S(e.$slots, "overlayIcon", { key: 0 }) : n.overlayText ? (x(), g("p", M, T(n.overlayText), 1)) : h("", !0)], 2)) : h("", !0),
+				class: y(a.overlayClasses())
+			}, [a.hasOverlayIcon() ? S(e.$slots, "overlayIcon", { key: 0 }) : n.overlayText ? (x(), g("p", M, T(n.overlayText), 1)) : h("", !0)], 2)) : h("", !0),
 			a.showGroup ? (x(), g("span", {
 				key: 1,
 				class: "d-avatar__count",

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 { ordinalSizeValidator } from '@/common/validators';\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: ordinalSizeValidator(AVATAR_SIZE_MODIFIERS),\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     * 'active', or 'dnd'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active, dnd\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=\"resolvedInteractive ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"avatarStyles()\"\n    :data-avatar-family=\"!iconOnly ? getFamily() : undefined\"\n    :data-avatar-variant=\"!iconOnly ? getVariant() : 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 { ordinalSizeValidator } from '@/common/validators';\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: ordinalSizeValidator(AVATAR_SIZE_MODIFIERS),\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     * 'active', or 'dnd'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active, dnd\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    /**\n     * Random family/variant, cached so unseeded avatars keep one color\n     * instead of re-rolling on every render. Recomputes only when seed changes.\n     */\n    randomFamilyVariant () {\n      return getRandomFamilyVariant(this.seed);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\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    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    // These read $slots, which is not reactive, so they must not be cached as computeds.\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    /**\n     * Compute family from props, color prop, or random\n     */\n    getFamily () {\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 = this.randomFamilyVariant;\n      return random.family;\n    },\n\n    /**\n     * Compute variant from props, color prop, or random\n     */\n    getVariant () {\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 = this.randomFamilyVariant;\n      return random.variant;\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.getFamily() && this.getVariant() !== undefined) {\n        const fallbackHex = computeAvatarHex(this.getFamily(), this.getVariant(), 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    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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"}

package/dist/lib/badge/badge.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`./badge-constants.cjs`),i=require(`../icon/icon-constants.cjs`);let a=require(`vue`);var o={name:`DtBadge`,props:{iconSize:{type:[String,Number],default:200,validator:e.ordinalSizeValidator(i.ICON_SIZE_MODIFIERS)},text:{type:String,default:``},kind:{type:String,default:`label`,validator:e=>Object.keys(r.BADGE_KIND_MODIFIERS).includes(e)},type:{type:String,default:`default`,validator:e=>Object.keys(r.BADGE_TYPE_MODIFIERS).includes(e)},decoration:{type:String,default:void 0,validator:e=>Object.keys(r.BADGE_DECORATION_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:r.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:r.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:r.BADGE_DECORATION_MODIFIERS}},computed:{hasLeftIcon(){return t.hasSlotContent(this.$slots.startIcon)||t.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return t.hasSlotContent(this.$slots.endIcon)||t.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon||this.hasRightIcon}},mounted(){this.validateProps()},updated(){this.validateProps()},methods:{validateProps(){this.validateTypePropCombination(),this.validateDecorationPropCombination()},validateTypePropCombination(){this.type===`ai`&&this.kind===`count`&&console.error(`DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.`),this.type!==`bulletin`&&this.subtle&&console.error(`DtBadge error: subtle can only be used with type 'bulletin'`)},validateDecorationPropCombination(){this.decoration&&((this.kind!==`label`||this.type!==`default`)&&console.error(`DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.`),this.hasIcons&&console.error(`DtBadge error: decoration prop cannot be used with startIcon or endIcon.`))}}},s={key:0,class:`d-badge__decorative`};function c(e,t,n,r,i,o){return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,{class:(0,a.normalizeClass)([`d-badge`,i.BADGE_TYPE_MODIFIERS[n.type],i.BADGE_KIND_MODIFIERS[n.kind],i.BADGE_DECORATION_MODIFIERS[n.decoration],{"d-badge--subtle":n.subtle},{"d-badge--outlined":n.outlined}]),"data-qa":`dt-badge`},[n.decoration?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,s)):(0,a.createCommentVNode)(``,!0),o.hasLeftIcon?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-badge__icon-left`,n.startIconClass])},[e.$slots.startIcon?(0,a.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:n.iconSize}):(0,a.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:n.iconSize})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`span`,{class:(0,a.normalizeClass)([`d-badge__label`,n.labelClass])},[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.text),1)])],2),o.hasRightIcon?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,class:(0,a.normalizeClass)([`d-badge__icon-right`,n.endIconClass])},[e.$slots.endIcon?(0,a.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:n.iconSize}):(0,a.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:n.iconSize})],2)):(0,a.createCommentVNode)(``,!0)],2)}var l=n.t(o,[[`render`,c]]);exports.default=l;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`./badge-constants.cjs`),i=require(`../icon/icon-constants.cjs`);let a=require(`vue`);var o={name:`DtBadge`,props:{iconSize:{type:[String,Number],default:200,validator:e.ordinalSizeValidator(i.ICON_SIZE_MODIFIERS)},text:{type:String,default:``},kind:{type:String,default:`label`,validator:e=>Object.keys(r.BADGE_KIND_MODIFIERS).includes(e)},type:{type:String,default:`default`,validator:e=>Object.keys(r.BADGE_TYPE_MODIFIERS).includes(e)},decoration:{type:String,default:void 0,validator:e=>Object.keys(r.BADGE_DECORATION_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:r.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:r.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:r.BADGE_DECORATION_MODIFIERS}},mounted(){this.validateProps()},updated(){this.validateProps()},methods:{hasLeftIcon(){return t.hasSlotContent(this.$slots.startIcon)||t.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return t.hasSlotContent(this.$slots.endIcon)||t.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon()||this.hasRightIcon()},validateProps(){this.validateTypePropCombination(),this.validateDecorationPropCombination()},validateTypePropCombination(){this.type===`ai`&&this.kind===`count`&&console.error(`DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.`),this.type!==`bulletin`&&this.subtle&&console.error(`DtBadge error: subtle can only be used with type 'bulletin'`)},validateDecorationPropCombination(){this.decoration&&((this.kind!==`label`||this.type!==`default`)&&console.error(`DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.`),this.hasIcons()&&console.error(`DtBadge error: decoration prop cannot be used with startIcon or endIcon.`))}}},s={key:0,class:`d-badge__decorative`};function c(e,t,n,r,i,o){return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,{class:(0,a.normalizeClass)([`d-badge`,i.BADGE_TYPE_MODIFIERS[n.type],i.BADGE_KIND_MODIFIERS[n.kind],i.BADGE_DECORATION_MODIFIERS[n.decoration],{"d-badge--subtle":n.subtle},{"d-badge--outlined":n.outlined}]),"data-qa":`dt-badge`},[n.decoration?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,s)):(0,a.createCommentVNode)(``,!0),o.hasLeftIcon()?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-badge__icon-left`,n.startIconClass])},[e.$slots.startIcon?(0,a.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:n.iconSize}):(0,a.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:n.iconSize})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`span`,{class:(0,a.normalizeClass)([`d-badge__label`,n.labelClass])},[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.text),1)])],2),o.hasRightIcon()?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,class:(0,a.normalizeClass)([`d-badge__icon-right`,n.endIconClass])},[e.$slots.endIcon?(0,a.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:n.iconSize}):(0,a.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:n.iconSize})],2)):(0,a.createCommentVNode)(``,!0)],2)}var l=n.t(o,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=badge.cjs.map

package/dist/lib/badge/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","names":[],"sources":["../../../components/Badge/Badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      :class=\"['d-badge__icon-left', startIconClass]\"\n    >\n      <!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      :class=\"['d-badge__icon-right', endIconClass]\"\n    >\n      <!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './BadgeConstants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, positive, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"badge.cjs","names":[],"sources":["../../../components/Badge/Badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon()\"\n      :class=\"['d-badge__icon-left', startIconClass]\"\n    >\n      <!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon()\"\n      :class=\"['d-badge__icon-right', endIconClass]\"\n    >\n      <!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './BadgeConstants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, positive, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  mounted () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    // These read $slots, which is not reactive, so they must not be cached as computeds.\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon() || this.hasRightIcon();\n    },\n\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons()) {\n        console.error('DtBadge error: decoration prop cannot be used with startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/badge/badge.js

@@ -72,17 +72,6 @@ var h = {
 			BADGE_DECORATION_MODIFIERS: r
 		};
 	},
-	computed: {
-		hasLeftIcon() {
-			return t(this.$slots.startIcon) || t(this.$slots.leftIcon);
-		},
-		hasRightIcon() {
-			return t(this.$slots.endIcon) || t(this.$slots.rightIcon);
-		},
-		hasIcons() {
-			return this.hasLeftIcon || this.hasRightIcon;
-		}
-	},
 	mounted() {
 		this.validateProps();
 	},
@@ -90,6 +79,15 @@ var h = {
 		this.validateProps();
 	},
 	methods: {
+		hasLeftIcon() {
+			return t(this.$slots.startIcon) || t(this.$slots.leftIcon);
+		},
+		hasRightIcon() {
+			return t(this.$slots.endIcon) || t(this.$slots.rightIcon);
+		},
+		hasIcons() {
+			return this.hasLeftIcon() || this.hasRightIcon();
+		},
 		validateProps() {
 			this.validateTypePropCombination(), this.validateDecorationPropCombination();
 		},
@@ -97,7 +95,7 @@ var h = {
 			this.type === "ai" && this.kind === "count" && console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination."), this.type !== "bulletin" && this.subtle && console.error("DtBadge error: subtle can only be used with type 'bulletin'");
 		},
 		validateDecorationPropCombination() {
-			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with startIcon or endIcon."));
+			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons() && console.error("DtBadge error: decoration prop cannot be used with startIcon or endIcon."));
 		}
 	}
 }, g = {
@@ -117,7 +115,7 @@ function _(e, t, n, r, i, a) {
 		"data-qa": "dt-badge"
 	}, [
 		n.decoration ? (f(), c("span", g)) : s("", !0),
-		a.hasLeftIcon ? (f(), c("span", {
+		a.hasLeftIcon() ? (f(), c("span", {
 			key: 1,
 			class: d(["d-badge__icon-left", n.startIconClass])
 		}, [e.$slots.startIcon ? p(e.$slots, "startIcon", {
@@ -128,7 +126,7 @@ function _(e, t, n, r, i, a) {
 			iconSize: n.iconSize
 		})], 2)) : s("", !0),
 		l("span", { class: d(["d-badge__label", n.labelClass]) }, [p(e.$slots, "default", {}, () => [u(m(n.text), 1)])], 2),
-		a.hasRightIcon ? (f(), c("span", {
+		a.hasRightIcon() ? (f(), c("span", {
 			key: 2,
 			class: d(["d-badge__icon-right", n.endIconClass])
 		}, [e.$slots.endIcon ? p(e.$slots, "endIcon", {