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

package/dist/lib/avatar/avatar.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"resolvedInteractive ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"avatarStyles\"\n    :data-avatar-family=\"!iconOnly ? computedFamily : undefined\"\n    :data-avatar-variant=\"!iconOnly ? computedVariant : undefined\"\n    data-qa=\"dt-avatar\"\n    :type=\"resolvedInteractive ? 'button' : undefined\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <div class=\"d-avatar__canvas-inner\">\n        <img\n          v-if=\"showImage\"\n          ref=\"avatarImage\"\n          class=\"d-avatar__image\"\n          data-qa=\"dt-avatar-image\"\n          :src=\"imageSrc\"\n          :alt=\"imageAlt\"\n        >\n        <div\n          v-else-if=\"isIconType\"\n          :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n          :aria-label=\"resolvedInteractive ? iconAriaLabel : ''\"\n          :data-qa=\"iconDataQa\"\n        >\n          <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n          <slot name=\"icon\" />\n        </div>\n        <span\n          v-else\n          :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n        >\n          {{ formattedInitials }}\n        </span>\n      </div>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n      role=\"img\"\n      :aria-label=\"`${group} participants`\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup && AVATAR_PRESENCE_SIZE_MODIFIERS[size]\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_FAMILY_COUNT,\n  AVATAR_VARIANT_COUNT,\n  colorToFamilyVariant,\n  getRandomFamilyVariant,\n  computeAvatarHex,\n} from './avatar_constants';\nimport { extractInitialsFromName } from './utils';\n\n// Check if browser supports oklch() - only compute hex fallback if not\nconst supportsOklch = typeof CSS !== 'undefined' && CSS.supports?.('background', 'oklch(0.5 0.1 0)');\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * **Recommended.** Pass a unique identifier (e.g., user ID) to generate consistent,\n     * deterministic colors for this avatar. The same seed always produces the same color.\n     * This is the preferred approach for most use cases.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * **Advanced.** Avatar color family (1-12). Each family represents a different hue\n     * offset from the theme's anchor. Only use this if you need explicit control over\n     * the color. For most cases, use `seed` instead.\n     * Families: 1=Red, 2=Orange, 3=Amber, 4=Yellow-Green, 5=Green, 6=Teal, 7=Cyan,\n     * 8=Blue, 9=Indigo, 10=Purple, 11=Magenta, 12=Pink\n     * @values 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12\n     */\n    family: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 1 && val <= AVATAR_FAMILY_COUNT,\n    },\n\n    /**\n     * **Advanced.** Avatar color variant (0-9). Controls lightness/chroma within the family.\n     * Only use this if you need explicit control over the color. For most cases, use `seed` instead.\n     * 0 = darkest, 9 = lightest. Variants 0-5 have light text, 6-9 have dark text.\n     * @values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9\n     */\n    variant: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 0 && val < AVATAR_VARIANT_COUNT,\n    },\n\n    /**\n     * Avatar color code for backward compatibility. Converted internally\n     * to family/variant. For new code, use `seed` (recommended) or `family`/`variant`.\n     * Format: family (1-12) * 100 + variant (0-9) * 10, e.g., '540' = family 5, variant 4.\n     * @deprecated Use seed or family/variant instead.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar.\n     * T-shirt sizes (xs, sm, md, lg, xl) are deprecated and will be removed in the next major version.\n     * Please use the numeric scale instead.\n     * @values 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(String(size)),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as \"99+\".\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and interactive,\n     * emits a click event when clicked.\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use interactive instead.\n     */\n    clickable: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * When true, renders the avatar with a transparent background and no color.\n     * Useful for displaying icons that should not have a colored background,\n     * such as channel or navigation icons.\n     */\n    iconOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, renders the avatar in a desaturated/washed-out state.\n     * Use this to indicate that a user is deactivated or inactive.\n     */\n    deactivated: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n      anchorHue: 0,\n    };\n  },\n\n  computed: {\n    resolvedInteractive () {\n      return this.clickable ?? this.interactive;\n    },\n\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    /**\n     * Compute family from props, color prop, or random\n     */\n    computedFamily () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit family prop takes precedence\n      if (this.family !== undefined) return this.family;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.family;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.family;\n    },\n\n    /**\n     * Compute variant from props, color prop, or random\n     */\n    computedVariant () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit variant prop takes precedence\n      if (this.variant !== undefined) return this.variant;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.variant;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.variant;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && String(this.formattedGroup).length === 2,\n          'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,\n          'd-avatar--clickable': this.resolvedInteractive,\n          'd-avatar--presence': this.presence && !this.showGroup,\n          'd-avatar--icon-only': this.iconOnly,\n          'd-avatar--deactivated': this.deactivated,\n        },\n      ];\n    },\n\n    /**\n     * Compute inline styles for fallback color in browsers that don't support oklch()\n     */\n    avatarStyles () {\n      const baseStyles = [];\n\n      // Only compute hex fallback for browsers that don't support oklch()\n      if (!supportsOklch && !this.isIconType && this.computedFamily && this.computedVariant !== undefined) {\n        const fallbackHex = computeAvatarHex(this.computedFamily, this.computedVariant, this.anchorHue);\n        baseStyles.push({ '--avatar-color-background': fallbackHex });\n      }\n\n      return baseStyles.length > 0 ? baseStyles : undefined;\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      const size = String(this.validatedSize);\n      // Sizes 100-250 cap at 2 digits — too small for 3\n      const smallSizes = ['xs', '100', '150', '200', '250'];\n      const maxDigits = smallSizes.includes(size) ? 2 : 3;\n      if (maxDigits === 2) {\n        return this.group > 9 ? '9+' : this.group;\n      }\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      return this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n    // Only read anchor hue for fallback computation in browsers without oklch() support\n    if (!supportsOklch) {\n      this.readAnchorHue();\n    }\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n      const size = String(this.validatedSize);\n\n      // xs/100 are too small for initials\n      if (size === 'xs' || size === '100') {\n        this.formattedInitials = '';\n      // sm/150/200 show single initial\n      } else if (size === 'sm' || size === '150' || size === '200') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    /**\n     * Read the anchor hue from CSS custom property for fallback computation\n     */\n    readAnchorHue () {\n      try {\n        const hueValue = getComputedStyle(document.documentElement)\n          .getPropertyValue('--dt-avatar-anchor-hue')\n          .trim();\n        this.anchorHue = parseFloat(hueValue) || 0;\n      } catch {\n        this.anchorHue = 0;\n      }\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.resolvedInteractive) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAoGA,IAAM,IAAgB,OAAO,MAAQ,OAAe,IAAI,WAAW,cAAc,mBAAmB,EAM/F,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,YAAY,EAAE,YAAA,GAAY;CAE1B,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAW;AAAE,WAAO,GAAiB;;GACtC;EAOD,MAAM;GACJ,MAAM;GACN,SAAS,KAAA;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAQ,KAAO,KAAK,KAAA;GACjC;EAQD,SAAS;GACP,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAQ,KAAO,KAAK,IAAA;GACjC;EAQD,OAAO;GACL,MAAM;GACN,SAAS,KAAA;GACV;EAQD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAsB,CAAC,SAAS,OAAO,EAAK,CAAC;GAC/E;EAKD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,WAAW;GACT,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAQD,UAAU;GACR,MAAM;GACN,SAAS,EAAuB;GAChC,YAAY,MACH,OAAO,OAAO,EAAuB,CAAC,SAAS,EAAM;GAE/D;EAKD,eAAe;GACb,MAAM;GACN,gBAAgB,EAAE;GACnB;EAOD,OAAO;GACL,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAU,EAAuB,EAAM;GACpD;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAOD,UAAU;GACR,MAAM;GACN,SAAS,KAAA;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,eAAe;GACb,MAAM;GACN,SAAS,KAAA;GACV;EAOD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,QACD;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACA,yBAAyB;GACzB,mBAAmB;GACnB,cAAc;GACd;GACA,WAAW;GACZ;;CAGH,UAAU;EACR,sBAAuB;AACrB,UAAO,KAAK,aAAa,KAAK;;EAGhC,iBAAkB;AAChB,UAAO,EAAe,KAAK,OAAO,YAAY;;EAGhD,aAAc;AACZ,UAAO,EAAe,KAAK,OAAO,KAAK;;EAGzC,aAAc;AACZ,UAAO;;EAMT,iBAAkB;AAEZ,aAAK,YAGT;QAAI,KAAK,WAAW,KAAA,EAAW,QAAO,KAAK;AAG3C,QAAI,KAAK,UAAU,KAAA,GAAW;KAC5B,IAAM,IAAS,EAAqB,KAAK,MAAM;AAC/C,SAAI,EAAQ,QAAO,EAAO;;AAK5B,WADe,EAAuB,KAAK,KAAK,CAClC;;;EAMhB,kBAAmB;AAEb,aAAK,YAGT;QAAI,KAAK,YAAY,KAAA,EAAW,QAAO,KAAK;AAG5C,QAAI,KAAK,UAAU,KAAA,GAAW;KAC5B,IAAM,IAAS,EAAqB,KAAK,MAAM;AAC/C,SAAI,EAAQ,QAAO,EAAO;;AAK5B,WADe,EAAuB,KAAK,KAAK,CAClC;;;EAGhB,gBAAiB;AACf,UAAO;IACL;IACA,EAAsB,KAAK;IAC3B,KAAK;IACL;KACE,mBAAmB,KAAK;KACxB,4BAA4B,KAAK,aAAa,OAAO,KAAK,eAAe,CAAC,WAAW;KACrF,4BAA4B,KAAK,aAAa,OAAO,KAAK,eAAe,CAAC,UAAU;KACpF,uBAAuB,KAAK;KAC5B,sBAAsB,KAAK,YAAY,CAAC,KAAK;KAC7C,uBAAuB,KAAK;KAC5B,yBAAyB,KAAK;KAC/B;IACF;;EAMH,eAAgB;GACd,IAAM,IAAa,EAAE;AAGrB,OAAI,CAAC,KAAiB,CAAC,KAAK,cAAc,KAAK,kBAAkB,KAAK,oBAAoB,KAAA,GAAW;IACnG,IAAM,IAAc,EAAiB,KAAK,gBAAgB,KAAK,iBAAiB,KAAK,UAAU;AAC/F,MAAW,KAAK,EAAE,6BAA6B,GAAa,CAAC;;AAG/D,UAAO,EAAW,SAAS,IAAI,IAAa,KAAA;;EAG9C,iBAAkB;AAChB,UAAO;IACL;IACA,KAAK;IACL,EAAE,0BAA0B,KAAK,gBAAgB;IAClD;;EAGH,YAAa;AACX,UAAO,EAAuB,KAAK,MAAM;;EAG3C,iBAAkB;GAChB,IAAM,IAAO,OAAO,KAAK,cAAc;AAOvC,WALmB;IAAC;IAAM;IAAO;IAAO;IAAO;IAAM,CACxB,SAAS,EAAI,GAAI,IAAI,MAChC,IACT,KAAK,QAAQ,IAAI,OAAO,KAAK,QAE/B,KAAK,QAAQ,KAAK,QAAQ,KAAK;;EAGxC,gBAAiB;AACf,UAAO,KAAK;;EAGd,YAAa;AACX,UAAO,KAAK,4BAA4B,MAAS,KAAK;;EAEzD;CAED,OAAO;EACL,UAAU;GACR,WAAW;GACX,UAAW;AACT,SAAK,gBAAgB;;GAExB;EAED,MAAM;GACJ,WAAW;GACX,UAAW;AACT,SAAK,gBAAgB;;GAExB;EAED,OAAO;GACL,WAAW;GACX,UAAW;AACT,SAAK,gBAAgB;;GAExB;EAED,SAAU,GAAQ;AAChB,QAAK,0BAA0B,MAC1B,MAEL,KAAK,eAAe,EACpB,KAAK,mBAAmB;;EAE3B;CAED,UAAW;AAIT,EAHA,KAAK,eAAe,EACpB,KAAK,mBAAmB,EAEnB,KACH,KAAK,eAAe;;CAIxB,SAAS;EACP,MAAM,oBAAqB;AACzB,SAAM,KAAK,WAAW;GACtB,IAAM,IAAK,KAAK,MAAM;AACjB,SAEL,EAAG,iBAAiB,cAAc,KAAK,yBAAyB,EAAG,EAAE,EAAE,MAAM,IAAM,CAAC,EACpF,EAAG,iBAAiB,eAAe,KAAK,0BAA0B,EAAG,EAAE,EAAE,MAAM,IAAM,CAAC;;EAGxF,iBAAkB;GAChB,IAAM,IAAW,EAAwB,KAAK,SAAS,EACjD,IAAO,OAAO,KAAK,cAAc;AAGvC,GAAI,MAAS,QAAQ,MAAS,QAC5B,KAAK,oBAAoB,KAEhB,MAAS,QAAQ,MAAS,SAAS,MAAS,QACrD,KAAK,oBAAoB,EAAS,KAElC,KAAK,oBAAoB;;EAO7B,gBAAiB;AACf,OAAI;IACF,IAAM,IAAW,iBAAiB,SAAS,gBAAe,CACvD,iBAAiB,yBAAwB,CACzC,MAAM;AACT,SAAK,YAAY,WAAW,EAAQ,IAAK;WACnC;AACN,SAAK,YAAY;;;EAIrB,yBAA0B,GAAI;AAE5B,GADA,KAAK,0BAA0B,IAC/B,EAAG,UAAU,OAAO,WAAW;;EAGjC,0BAA2B,GAAI;AAE7B,GADA,KAAK,0BAA0B,IAC/B,EAAG,UAAU,IAAI,WAAW;;EAG9B,gBAAiB;AACf,GAAI,KAAK,YAAY,KAAK,aAAa,KAAA,KACrC,QAAQ,MAAM,0HAAwH;;EAI1I,YAAa,GAAG;AACT,QAAK,uBACV,KAAK,MAAM,SAAS,EAAE;;EAEzB;CACF,QAtiBU,OAAM,0BAAwB;;CAqCjC,OAAM;;;;aAxDZ,EA8EY,EA7EL,EAAA,sBAAmB,WAAA,MAAA,EAAA;EACvB,IAAI,EAAA;EACJ,OAAK,EAAE,EAAA,cAAa;EACpB,OAAK,EAAE,EAAA,aAAY;EACnB,sBAAqB,EAAA,WAA4B,KAAA,IAAjB,EAAA;EAChC,uBAAsB,EAAA,WAA6B,KAAA,IAAlB,EAAA;EAClC,WAAQ;EACP,MAAM,EAAA,sBAAmB,WAAc,KAAA;EACvC,SAAO,EAAA;;mBAmCF;GAjCN,EAiCM,OAAA;IAhCJ,KAAI;IACH,OAAK,EAAA;KAAY,EAAA;;iCAA6E,EAAA,yBAAuB;;OAMtH,EAwBM,OAxBN,GAwBM,CAtBI,EAAA,aAAA,GAAA,EADR,EAOC,OAAA;;IALC,KAAI;IACJ,OAAM;IACN,WAAQ;IACP,KAAK,EAAA;IACL,KAAK,EAAA;qBAGK,EAAA,cAAA,GAAA,EADb,EAQM,OAAA;;IANH,OAAK,EAAA,CAAG,EAAA,WAAW,EAAA,sBAAsB,KAAI,CAAA;IAC7C,cAAY,EAAA,sBAAsB,EAAA,gBAAa;IAC/C,WAAS,EAAA;OAGV,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,IAAA,EAAA,KAAA,GAAA,EAEtB,EAKO,QAAA;;IAHJ,OAAK,EAAA,CAAG,EAAA,sBAAsB,SAAQ,CAAA;QAEpC,EAAA,kBAAiB,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA,EAAA;GAKlB,EAAA,kBAAkB,EAAA,eAAA,GAAA,EAD1B,EAeM,OAAA;;IAbH,OAAK,EAAE,EAAA,eAAc;OAId,EAAA,iBADR,EAGE,EAAA,QAAA,eAAA,EAAA,KAAA,GAAA,CAAA,GAEW,EAAA,eAAA,GAAA,EADb,EAKI,KALJ,GAKI,EADC,EAAA,YAAW,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIV,EAAA,aAAA,GAAA,EADR,EAM4B,QAAA;;IAJ1B,OAAM;IACN,WAAQ;IACR,MAAK;IACJ,cAAU,GAAK,EAAA,MAAK;QACnB,EAAA,eAAc,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAEV,EAAA,YAAQ,CAAK,EAAA,aAAa,EAAA,+BAA+B,EAAA,SAAA,GAAA,EADjE,EASE,GATF,EASE;;IAPC,UAAU,EAAA;IACV,OAAK,CAAA,sBAA0C,EAAA,+BAA+B,EAAA,MAAA;MAIvE,EAAA,eAAa,EACrB,WAAQ,eAAa,CAAA,EAAA,MAAA,IAAA,CAAA,YAAA,QAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/lib/avatar/index.cjs

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

package/dist/lib/avatar/index.js

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

package/dist/lib/badge/badge-constants.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={default:``,info:`d-badge--info`,success:`d-badge--success`,warning:`d-badge--warning`,critical:`d-badge--critical`,bulletin:`d-badge--bulletin`,ai:`d-badge--ai`},t={label:``,count:`d-badge--count`},n={"black-400":`d-badge--decorate-black-400`,"black-500":`d-badge--decorate-black-500`,"black-900":`d-badge--decorate-black-900`,"red-200":`d-badge--decorate-red-200`,"red-300":`d-badge--decorate-red-300`,"red-400":`d-badge--decorate-red-400`,"purple-200":`d-badge--decorate-purple-200`,"purple-300":`d-badge--decorate-purple-300`,"purple-400":`d-badge--decorate-purple-400`,"purple-500":`d-badge--decorate-purple-500`,"blue-200":`d-badge--decorate-blue-200`,"blue-300":`d-badge--decorate-blue-300`,"blue-400":`d-badge--decorate-blue-400`,"green-300":`d-badge--decorate-green-300`,"green-400":`d-badge--decorate-green-400`,"green-500":`d-badge--decorate-green-500`,"gold-300":`d-badge--decorate-gold-300`,"gold-400":`d-badge--decorate-gold-400`,"gold-500":`d-badge--decorate-gold-500`,"magenta-200":`d-badge--decorate-magenta-200`,"magenta-300":`d-badge--decorate-magenta-300`,"magenta-400":`d-badge--decorate-magenta-400`};exports.BADGE_DECORATION_MODIFIERS=n,exports.BADGE_KIND_MODIFIERS=t,exports.BADGE_TYPE_MODIFIERS=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={default:``,info:`d-badge--info`,positive:`d-badge--positive`,warning:`d-badge--warning`,critical:`d-badge--critical`,bulletin:`d-badge--bulletin`,ai:`d-badge--ai`},t={label:``,count:`d-badge--count`},n={"black-400":`d-badge--decorate-black-400`,"black-500":`d-badge--decorate-black-500`,"black-900":`d-badge--decorate-black-900`,"red-200":`d-badge--decorate-red-200`,"red-300":`d-badge--decorate-red-300`,"red-400":`d-badge--decorate-red-400`,"purple-200":`d-badge--decorate-purple-200`,"purple-300":`d-badge--decorate-purple-300`,"purple-400":`d-badge--decorate-purple-400`,"purple-500":`d-badge--decorate-purple-500`,"blue-200":`d-badge--decorate-blue-200`,"blue-300":`d-badge--decorate-blue-300`,"blue-400":`d-badge--decorate-blue-400`,"green-300":`d-badge--decorate-green-300`,"green-400":`d-badge--decorate-green-400`,"green-500":`d-badge--decorate-green-500`,"gold-300":`d-badge--decorate-gold-300`,"gold-400":`d-badge--decorate-gold-400`,"gold-500":`d-badge--decorate-gold-500`,"magenta-200":`d-badge--decorate-magenta-200`,"magenta-300":`d-badge--decorate-magenta-300`,"magenta-400":`d-badge--decorate-magenta-400`};exports.BADGE_DECORATION_MODIFIERS=n,exports.BADGE_KIND_MODIFIERS=t,exports.BADGE_TYPE_MODIFIERS=e;
 //# sourceMappingURL=badge-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge-constants.cjs","names":[],"sources":["../../../components/badge/badge_constants.js"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  success: 'd-badge--success',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n"],"mappings":"mEAAA,IAAa,EAAuB,CAClC,QAAS,GACT,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,SAAU,oBACV,SAAU,oBACV,GAAI,cACL,CAEY,EAAuB,CAClC,MAAO,GACP,MAAO,iBACR,CAEY,EAA6B,CACxC,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,cAAe,gCACf,cAAe,gCACf,cAAe,gCAChB"}
+{"version":3,"file":"badge-constants.cjs","names":[],"sources":["../../../components/badge/badge_constants.js"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  positive: 'd-badge--positive',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n"],"mappings":"mEAAA,IAAa,EAAuB,CAClC,QAAS,GACT,KAAM,gBACN,SAAU,oBACV,QAAS,mBACT,SAAU,oBACV,SAAU,oBACV,GAAI,cACL,CAEY,EAAuB,CAClC,MAAO,GACP,MAAO,iBACR,CAEY,EAA6B,CACxC,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,cAAe,gCACf,cAAe,gCACf,cAAe,gCAChB"}

package/dist/lib/badge/badge-constants.js

@@ -2,7 +2,7 @@
 var e = {
 	default: "",
 	info: "d-badge--info",
-	success: "d-badge--success",
+	positive: "d-badge--positive",
 	warning: "d-badge--warning",
 	critical: "d-badge--critical",
 	bulletin: "d-badge--bulletin",

package/dist/lib/badge/badge-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-constants.js","names":[],"sources":["../../../components/badge/badge_constants.js"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  success: 'd-badge--success',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n"],"mappings":";AAAA,IAAa,IAAuB;CAClC,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,UAAU;CACV,IAAI;CACL,EAEY,IAAuB;CAClC,OAAO;CACP,OAAO;CACR,EAEY,IAA6B;CACxC,aAAa;CACb,aAAa;CACb,aAAa;CACb,WAAW;CACX,WAAW;CACX,WAAW;CACX,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,aAAa;CACb,aAAa;CACb,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,eAAe;CACf,eAAe;CACf,eAAe;CAChB"}
+{"version":3,"file":"badge-constants.js","names":[],"sources":["../../../components/badge/badge_constants.js"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  positive: 'd-badge--positive',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n"],"mappings":";AAAA,IAAa,IAAuB;CAClC,SAAS;CACT,MAAM;CACN,UAAU;CACV,SAAS;CACT,UAAU;CACV,UAAU;CACV,IAAI;CACL,EAEY,IAAuB;CAClC,OAAO;CACP,OAAO;CACR,EAEY,IAA6B;CACxC,aAAa;CACb,aAAa;CACb,aAAa;CACb,WAAW;CACX,WAAW;CACX,WAAW;CACX,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,aAAa;CACb,aAAa;CACb,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,eAAe;CACf,eAAe;CACf,eAAe;CAChB"}

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/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../icon/icon-constants.cjs`),r=require(`./badge-constants.cjs`);let i=require(`vue`);var a={compatConfig:{MODE:3},name:`DtBadge`,props:{iconSize:{type:String,default:`200`,validator:e=>Object.keys(n.ICON_SIZE_MODIFIERS).includes(e)},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:``},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 e.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return e.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon||this.hasRightIcon}},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 leftIcon or rightIcon.`))}}},o={key:0,class:`d-badge__decorative`},s={key:1,class:`d-badge__icon-left`},c={key:2,class:`d-badge__icon-right`};function l(e,t,n,r,a,l){return(0,i.openBlock)(),(0,i.createElementBlock)(`span`,{class:(0,i.normalizeClass)([`d-badge`,a.BADGE_TYPE_MODIFIERS[n.type],a.BADGE_KIND_MODIFIERS[n.kind],a.BADGE_DECORATION_MODIFIERS[n.decoration],{"d-badge--subtle":n.subtle},{"d-badge--outlined":n.outlined}]),"data-qa":`dt-badge`},[n.decoration?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,o)):(0,i.createCommentVNode)(``,!0),l.hasLeftIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,s,[(0,i.renderSlot)(e.$slots,`leftIcon`,{iconSize:n.iconSize})])):(0,i.createCommentVNode)(``,!0),(0,i.createElementVNode)(`span`,{class:(0,i.normalizeClass)([`d-badge__label`,n.labelClass])},[(0,i.renderSlot)(e.$slots,`default`,{},()=>[(0,i.createTextVNode)((0,i.toDisplayString)(n.text),1)])],2),l.hasRightIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,c,[(0,i.renderSlot)(e.$slots,`rightIcon`,{iconSize:n.iconSize})])):(0,i.createCommentVNode)(``,!0)],2)}var u=t.t(a,[[`render`,l]]);exports.default=u;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./badge-constants.cjs`),r=require(`../icon/icon-constants.cjs`);let i=require(`vue`);var a={compatConfig:{MODE:3},name:`DtBadge`,props:{iconSize:{type:String,default:`200`,validator:e=>Object.keys(r.ICON_SIZE_MODIFIERS).includes(e)},text:{type:String,default:``},kind:{type:String,default:`label`,validator:e=>Object.keys(n.BADGE_KIND_MODIFIERS).includes(e)},type:{type:String,default:`default`,validator:e=>Object.keys(n.BADGE_TYPE_MODIFIERS).includes(e)},decoration:{type:String,default:void 0,validator:e=>Object.keys(n.BADGE_DECORATION_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:n.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:n.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:n.BADGE_DECORATION_MODIFIERS}},computed:{hasLeftIcon(){return e.hasSlotContent(this.$slots.startIcon)||e.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return e.hasSlotContent(this.$slots.endIcon)||e.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon||this.hasRightIcon}},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.`))}}},o={key:0,class:`d-badge__decorative`},s={key:1,class:`d-badge__icon-left`},c={key:2,class:`d-badge__icon-right`};function l(e,t,n,r,a,l){return(0,i.openBlock)(),(0,i.createElementBlock)(`span`,{class:(0,i.normalizeClass)([`d-badge`,a.BADGE_TYPE_MODIFIERS[n.type],a.BADGE_KIND_MODIFIERS[n.kind],a.BADGE_DECORATION_MODIFIERS[n.decoration],{"d-badge--subtle":n.subtle},{"d-badge--outlined":n.outlined}]),"data-qa":`dt-badge`},[n.decoration?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,o)):(0,i.createCommentVNode)(``,!0),l.hasLeftIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,s,[e.$slots.startIcon?(0,i.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:n.iconSize}):(0,i.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:n.iconSize})])):(0,i.createCommentVNode)(``,!0),(0,i.createElementVNode)(`span`,{class:(0,i.normalizeClass)([`d-badge__label`,n.labelClass])},[(0,i.renderSlot)(e.$slots,`default`,{},()=>[(0,i.createTextVNode)((0,i.toDisplayString)(n.text),1)])],2),l.hasRightIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,c,[e.$slots.endIcon?(0,i.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:n.iconSize}):(0,i.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:n.iconSize})])):(0,i.createCommentVNode)(``,!0)],2)}var u=t.t(a,[[`render`,l]]);exports.default=u;
 //# 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\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\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\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\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 './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\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  compatConfig: { MODE: 3 },\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,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\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, success, 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 default, 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     * 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.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\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 leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"6UAuDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CASD,WAAY,CACV,KAAM,OACN,QAAS,IAAA,GACT,UAAY,GAAS,OAAO,KAAK,EAAA,2BAA2B,CAAC,SAAS,EAAK,CAC5E,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,qBAAA,EAAA,qBACA,qBAAA,EAAA,qBACA,2BAAA,EAAA,2BACD,EAGH,SAAU,CACR,aAAe,CACb,OAAO,EAAA,eAAe,KAAK,OAAO,SAAS,EAG7C,cAAgB,CACd,OAAO,EAAA,eAAe,KAAK,OAAO,UAAU,EAG9C,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,cAEnC,CAED,SAAW,CACT,KAAK,eAAe,EAGtB,QAAS,CACP,eAAiB,CACf,KAAK,6BAA6B,CAClC,KAAK,mCAAmC,EAG1C,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,0EAA8E,CAE1F,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,8DAAgE,EAIlF,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,0FAA8F,CAG1G,KAAK,UACP,QAAQ,MAAM,4EAA4E,GAG/F,CACF,UAhLK,MAAM,gCAIN,MAAM,+BAgBN,MAAM,gGAQH,OAAA,CAxCJ,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,qBAAqB,EAAA,MAAa,EAAA,qBAAqB,EAAA,MAAa,EAAA,2BAA2B,EAAA,+BAAwC,EAAA,OAAM,sBAAiC,EAAA,SAAQ,GAQvN,UAAQ,aAGA,EAAA,aAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAEM,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,WAAA,CADC,SAAW,EAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,0BAQjB,OAAA,CALA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,WAAU,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,YAIlC,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,KAAI,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAIH,EAAA,eAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,YAAA,CADC,SAAW,EAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}
+{"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\"\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\"\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 './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\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  compatConfig: { MODE: 3 },\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,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\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 default, 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     * 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  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":"6UAqEA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CASD,WAAY,CACV,KAAM,OACN,QAAS,IAAA,GACT,UAAY,GAAS,OAAO,KAAK,EAAA,2BAA2B,CAAC,SAAS,EAAK,CAC5E,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,qBAAA,EAAA,qBACA,qBAAA,EAAA,qBACA,2BAAA,EAAA,2BACD,EAGH,SAAU,CACR,aAAe,CACb,OAAO,EAAA,eAAe,KAAK,OAAO,UAAS,EAAK,EAAA,eAAe,KAAK,OAAO,SAAS,EAGtF,cAAgB,CACd,OAAO,EAAA,eAAe,KAAK,OAAO,QAAO,EAAK,EAAA,eAAe,KAAK,OAAO,UAAU,EAGrF,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,cAEnC,CAED,SAAW,CACT,KAAK,eAAe,EAGtB,QAAS,CACP,eAAiB,CACf,KAAK,6BAA6B,CAClC,KAAK,mCAAmC,EAG1C,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,0EAA8E,CAE1F,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,8DAAgE,EAIlF,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,0FAA8F,CAG1G,KAAK,UACP,QAAQ,MAAM,2EAA2E,GAG9F,CACF,UA9LK,MAAM,gCAIN,MAAM,+BAuBN,MAAM,gGAeH,OAAA,CAtDJ,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,qBAAqB,EAAA,MAAa,EAAA,qBAAqB,EAAA,MAAa,EAAA,2BAA2B,EAAA,+BAAwC,EAAA,OAAM,sBAAiC,EAAA,SAAQ,GAQvN,UAAQ,aAGA,EAAA,aAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAEM,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAeD,OAhBP,EAgBO,CAVG,EAAA,OAAO,WAAA,EAAA,EAAA,YAGb,EAAA,OAAA,YAAA,OADC,SAAW,EAAA,4BAOZ,EAAA,OAAA,WAAA,OADC,SAAW,EAAA,uEAQT,OAAA,CALA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,WAAU,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,YAIlC,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,KAAI,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAIH,EAAA,eAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAeD,OAhBP,EAgBO,CAVG,EAAA,OAAO,SAAA,EAAA,EAAA,YAGb,EAAA,OAAA,UAAA,OADC,SAAW,EAAA,4BAOZ,EAAA,OAAA,YAAA,OADC,SAAW,EAAA"}