@dialpad/dialtone 9.109.0-rebrand-2025-beta.1 → 9.110.0

package/dist/vue3/components/button/button.vue.cjs

@@ -125,7 +125,7 @@ const _sfc_main = {
     },
     /**
      * The color of the button.
-     * @values default, muted, danger, positive, inverted
+     * @values default, muted, danger, inverted
      */
     kind: {
       type: String,

package/dist/vue3/components/button/button.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.vue.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","LINK_KIND_MODIFIERS","BUTTON_TYPES","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","hasSlotContent","BUTTON_ICON_SIZES","warn","getLinkKindModifier","INVALID_COMBINATION","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"button.vue.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","LINK_KIND_MODIFIERS","BUTTON_TYPES","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","hasSlotContent","BUTTON_ICON_SIZES","warn","getLinkKindModifier","INVALID_COMBINATION","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/components/button/button.vue.js

@@ -123,7 +123,7 @@ const _sfc_main = {
     },
     /**
      * The color of the button.
-     * @values default, muted, danger, positive, inverted
+     * @values default, muted, danger, inverted
      */
     kind: {
       type: String,

package/dist/vue3/components/button/button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.vue.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"button.vue.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/components/button/button_constants.cjs

@@ -11,13 +11,12 @@ const BUTTON_KIND_MODIFIERS = {
   default: "",
   muted: "d-btn--muted",
   danger: "d-btn--danger",
-  positive: "d-btn--positive",
   inverted: "d-btn--inverted"
 };
 const BUTTON_IMPORTANCE_MODIFIERS = {
   clear: "",
-  outlined: "d-btn--outlined",
-  primary: "d-btn--primary"
+  primary: "d-btn--primary",
+  outlined: "d-btn--outlined"
 };
 const BUTTON_TYPES = ["submit", "reset", "button"];
 const ICON_POSITION_MODIFIERS = {

package/dist/vue3/components/button/button_constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button_constants.cjs","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEY,MAAC,8BAA8B;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX;AAEY,MAAC,eAAe,CAAC,UAAU,SAAS,QAAQ;AAE5C,MAAC,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV;AAEY,MAAC,sBAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,WAAW,SAAS;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,UAAU,UAAU;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,SAAS,SAAS;AAAA,EAC7D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,OAAO,SAAS,SAAS;AAAA,EAC9D;AACH;AAEY,MAAC,oBAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,2BAA4B,QAAQ,MAAM,YAAY;AAC7D,SAAO,qBAAqB,SAAS,YAAY,EAAE,qBACxC,IAAI,oBAAoB,UAAU;AAI/C;;;;;;;;"}
+{"version":3,"file":"button_constants.cjs","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AACZ;AAEY,MAAC,8BAA8B;AAAA,EACzC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AACZ;AAEY,MAAC,eAAe,CAAC,UAAU,SAAS,QAAQ;AAE5C,MAAC,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV;AAEY,MAAC,sBAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,WAAW,SAAS;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,UAAU,UAAU;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,SAAS,SAAS;AAAA,EAC7D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,OAAO,SAAS,SAAS;AAAA,EAC9D;AACH;AAEY,MAAC,oBAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,2BAA4B,QAAQ,MAAM,YAAY;AAC7D,SAAO,qBAAqB,SAAS,YAAY,EAAE,qBACxC,IAAI,oBAAoB,UAAU;AAI/C;;;;;;;;"}

package/dist/vue3/components/button/button_constants.js

@@ -9,13 +9,12 @@ const BUTTON_KIND_MODIFIERS = {
   default: "",
   muted: "d-btn--muted",
   danger: "d-btn--danger",
-  positive: "d-btn--positive",
   inverted: "d-btn--inverted"
 };
 const BUTTON_IMPORTANCE_MODIFIERS = {
   clear: "",
-  outlined: "d-btn--outlined",
-  primary: "d-btn--primary"
+  primary: "d-btn--primary",
+  outlined: "d-btn--outlined"
 };
 const BUTTON_TYPES = ["submit", "reset", "button"];
 const ICON_POSITION_MODIFIERS = {

package/dist/vue3/components/button/button_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_constants.js","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEY,MAAC,8BAA8B;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX;AAEY,MAAC,eAAe,CAAC,UAAU,SAAS,QAAQ;AAE5C,MAAC,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV;AAEY,MAAC,sBAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,WAAW,SAAS;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,UAAU,UAAU;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,SAAS,SAAS;AAAA,EAC7D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,OAAO,SAAS,SAAS;AAAA,EAC9D;AACH;AAEY,MAAC,oBAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,2BAA4B,QAAQ,MAAM,YAAY;AAC7D,SAAO,qBAAqB,SAAS,YAAY,EAAE,qBACxC,IAAI,oBAAoB,UAAU;AAI/C;"}
+{"version":3,"file":"button_constants.js","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AACZ;AAEY,MAAC,8BAA8B;AAAA,EACzC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AACZ;AAEY,MAAC,eAAe,CAAC,UAAU,SAAS,QAAQ;AAE5C,MAAC,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV;AAEY,MAAC,sBAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,WAAW,SAAS;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,UAAU,UAAU;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,MAAM,SAAS,SAAS;AAAA,EAC7D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS,2BAA2B,OAAO,SAAS,SAAS;AAAA,EAC9D;AACH;AAEY,MAAC,oBAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,2BAA4B,QAAQ,MAAM,YAAY;AAC7D,SAAO,qBAAqB,SAAS,YAAY,EAAE,qBACxC,IAAI,oBAAoB,UAAU;AAI/C;"}

package/dist/vue3/components/stack/stack.vue.cjs

@@ -35,7 +35,7 @@ const _sfc_main = {
      * All the undefined breakpoints will have the 'default' value.
      * You can override the default gap with 'default' key.
      * In case of string, it will be applied to all the breakpoints.
-     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
+     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.
      */
     gap: {
       type: [String, Object],

package/dist/vue3/components/stack/stack.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack.vue.cjs","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["directionValidator","gapValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","getDefaultGapClass","getDefaultDirectionClass","getResponsiveClasses","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot"],"mappings":";;;;;;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,cAAcA,WAAkB,mBAAC,SAAS;AAAA,IACvD;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,QAAQC,WAAY,aAAC,GAAG;AAAA,IACrC;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,oBAAAC,gBAAkB;AAAA,oBAClBC,gBAAY;AAAA,MACZ,iCAAAC,gBAA+B;AAAA;EAElC;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAOC,MAAkB,mBAAC,KAAK,GAAG;AAAA,IACnC;AAAA,IAED,mBAAoB;AAClB,aAAOC,MAAwB,yBAAC,KAAK,SAAS;AAAA,IAC/C;AAAA,IAED,kBAAmB;AACjB,aAAOC,MAAoB,qBAAC,KAAK,WAAW,KAAK,GAAG;AAAA,IACrD;AAAA,EACF;AACH;;0BAlFEC,IAWY,YAZdC,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAAA;AAAA;MAGqC,SAAgB;AAAA,MAAQ,SAAU;AAAA,MAAQ,SAAe;AAAA;;IAH9F,SAAAC,IAAA,QAWI,MAAQ;AAAA,MAARC,eAAQ,KAAA,QAAA,SAAA;AAAA;IAXZ,GAAA;AAAA;;;;"}
+{"version":3,"file":"stack.vue.cjs","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["directionValidator","gapValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","getDefaultGapClass","getDefaultDirectionClass","getResponsiveClasses","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot"],"mappings":";;;;;;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,cAAcA,WAAkB,mBAAC,SAAS;AAAA,IACvD;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,QAAQC,WAAY,aAAC,GAAG;AAAA,IACrC;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,oBAAAC,gBAAkB;AAAA,oBAClBC,gBAAY;AAAA,MACZ,iCAAAC,gBAA+B;AAAA;EAElC;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAOC,MAAkB,mBAAC,KAAK,GAAG;AAAA,IACnC;AAAA,IAED,mBAAoB;AAClB,aAAOC,MAAwB,yBAAC,KAAK,SAAS;AAAA,IAC/C;AAAA,IAED,kBAAmB;AACjB,aAAOC,MAAoB,qBAAC,KAAK,WAAW,KAAK,GAAG;AAAA,IACrD;AAAA,EACF;AACH;;0BAlFEC,IAWY,YAZdC,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAAA;AAAA;MAGqC,SAAgB;AAAA,MAAQ,SAAU;AAAA,MAAQ,SAAe;AAAA;;IAH9F,SAAAC,IAAA,QAWI,MAAQ;AAAA,MAARC,eAAQ,KAAA,QAAA,SAAA;AAAA;IAXZ,GAAA;AAAA;;;;"}

package/dist/vue3/components/stack/stack.vue.js

@@ -33,7 +33,7 @@ const _sfc_main = {
      * All the undefined breakpoints will have the 'default' value.
      * You can override the default gap with 'default' key.
      * In case of string, it will be applied to all the breakpoints.
-     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
+     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.
      */
     gap: {
       type: [String, Object],

package/dist/vue3/components/stack/stack.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.vue.js","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot"],"mappings":";;;;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,mBAAmB,SAAS;AAAA,IACvD;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,QAAQ,aAAa,GAAG;AAAA,IACrC;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,mBAAmB,KAAK,GAAG;AAAA,IACnC;AAAA,IAED,mBAAoB;AAClB,aAAO,yBAAyB,KAAK,SAAS;AAAA,IAC/C;AAAA,IAED,kBAAmB;AACjB,aAAO,qBAAqB,KAAK,WAAW,KAAK,GAAG;AAAA,IACrD;AAAA,EACF;AACH;;sBAlFEA,YADFC,wBAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,eAAA;AAAA;MAGqC,SAAgB;AAAA,MAAQ,SAAU;AAAA,MAAQ,SAAe;AAAA;;IAH9F,SAAAC,QAWI,MAAQ;AAAA,MAARC,WAAQ,KAAA,QAAA,SAAA;AAAA;IAXZ,GAAA;AAAA;;;"}
+{"version":3,"file":"stack.vue.js","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot"],"mappings":";;;;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,mBAAmB,SAAS;AAAA,IACvD;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,QAAQ,aAAa,GAAG;AAAA,IACrC;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,mBAAmB,KAAK,GAAG;AAAA,IACnC;AAAA,IAED,mBAAoB;AAClB,aAAO,yBAAyB,KAAK,SAAS;AAAA,IAC/C;AAAA,IAED,kBAAmB;AACjB,aAAO,qBAAqB,KAAK,WAAW,KAAK,GAAG;AAAA,IACrD;AAAA,EACF;AACH;;sBAlFEA,YADFC,wBAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,eAAA;AAAA;MAGqC,SAAgB;AAAA,MAAQ,SAAU;AAAA,MAAQ,SAAe;AAAA;;IAH9F,SAAAC,QAWI,MAAQ;AAAA,MAARC,WAAQ,KAAA,QAAA,SAAA;AAAA;IAXZ,GAAA;AAAA;;;"}

package/dist/vue3/components/stack/stack_constants.cjs

@@ -8,7 +8,7 @@ const DT_STACK_DIRECTION = {
   "column-reverse": "column-reverse"
 };
 const DT_STACK_RESPONSIVE_BREAKPOINTS = ["sm", "md", "lg", "xl"];
-const DT_STACK_GAP = ["0", "100", "200", "300", "400", "450", "500", "600"];
+const DT_STACK_GAP = ["0", "50", "100", "200", "300", "350", "400", "450", "500", "525", "550", "600", "625", "650", "700"];
 exports.DT_STACK_DIRECTION = DT_STACK_DIRECTION;
 exports.DT_STACK_GAP = DT_STACK_GAP;
 exports.DT_STACK_RESPONSIVE_BREAKPOINTS = DT_STACK_RESPONSIVE_BREAKPOINTS;

package/dist/vue3/components/stack/stack_constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack_constants.cjs","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["export const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\nexport const DT_STACK_GAP = ['0', '100', '200', '300', '400', '450', '500', '600'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,qBAAqB;AAAA,EAChC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,eAAe;AAAA,EACf,kBAAkB;AACpB;AAEY,MAAC,kCAAkC,CAAC,MAAM,MAAM,MAAM,IAAI;AAE1D,MAAC,eAAe,CAAC,KAAK,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;;;;"}
+{"version":3,"file":"stack_constants.cjs","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["export const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,qBAAqB;AAAA,EAChC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,eAAe;AAAA,EACf,kBAAkB;AACpB;AAEY,MAAC,kCAAkC,CAAC,MAAM,MAAM,MAAM,IAAI;AAE1D,MAAC,eAAe,CAAC,KAAK,MAAM,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;;;;"}

package/dist/vue3/components/stack/stack_constants.js

@@ -6,7 +6,7 @@ const DT_STACK_DIRECTION = {
   "column-reverse": "column-reverse"
 };
 const DT_STACK_RESPONSIVE_BREAKPOINTS = ["sm", "md", "lg", "xl"];
-const DT_STACK_GAP = ["0", "100", "200", "300", "400", "450", "500", "600"];
+const DT_STACK_GAP = ["0", "50", "100", "200", "300", "350", "400", "450", "500", "525", "550", "600", "625", "650", "700"];
 export {
   DT_STACK_DIRECTION,
   DT_STACK_GAP,

package/dist/vue3/components/stack/stack_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack_constants.js","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["export const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\nexport const DT_STACK_GAP = ['0', '100', '200', '300', '400', '450', '500', '600'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n};\n"],"names":[],"mappings":"AAAY,MAAC,qBAAqB;AAAA,EAChC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,eAAe;AAAA,EACf,kBAAkB;AACpB;AAEY,MAAC,kCAAkC,CAAC,MAAM,MAAM,MAAM,IAAI;AAE1D,MAAC,eAAe,CAAC,KAAK,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;"}
+{"version":3,"file":"stack_constants.js","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["export const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n};\n"],"names":[],"mappings":"AAAY,MAAC,qBAAqB;AAAA,EAChC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,eAAe;AAAA,EACf,kBAAkB;AACpB;AAEY,MAAC,kCAAkC,CAAC,MAAM,MAAM,MAAM,IAAI;AAE1D,MAAC,eAAe,CAAC,KAAK,MAAM,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;"}

package/dist/vue3/recipes/leftbar/callbox/callbox.vue.cjs

@@ -141,6 +141,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_pause = vue.resolveComponent("dt-icon-pause");
   const _component_dt_avatar = vue.resolveComponent("dt-avatar");
   const _component_dt_badge = vue.resolveComponent("dt-badge");
+  const _directive_dt_tooltip = vue.resolveDirective("dt-tooltip");
   return vue.openBlock(), vue.createElementBlock("div", {
     "data-qa": "dt-recipe-callbox",
     class: vue.normalizeClass([_ctx.$attrs.class, "d-recipe-callbox"]),
@@ -174,16 +175,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           } : void 0
         ]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_3, [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
+          vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
             "data-qa": "dt-recipe-callbox__title",
             class: "d-recipe-callbox__content-title",
+            tabindex: "0",
             onClick: $options.handleClick
           }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString($props.title), 1)
             ]),
             _: 1
-          }, 8, ["onClick"])),
+          }, 8, ["onClick"])), [
+            [_directive_dt_tooltip, $props.title]
+          ]),
           _ctx.$slots.badge || $props.badgeText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
             vue.renderSlot(_ctx.$slots, "badge", {}, () => [
               vue.createVNode(_component_dt_badge, {

package/dist/vue3/recipes/leftbar/callbox/callbox.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.vue.cjs","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    :class=\"[$attrs.class, 'd-recipe-callbox']\"\n    :style=\"$attrs.style\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["DtBadge","DtAvatar","DtIconPause","CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS","_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"callbox.vue.cjs","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    :class=\"[$attrs.class, 'd-recipe-callbox']\"\n    :style=\"$attrs.style\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            v-dt-tooltip=\"title\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            tabindex=\"0\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["DtBadge","DtAvatar","DtIconPause","CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS","_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/vue3/recipes/leftbar/callbox/callbox.vue.js

@@ -2,7 +2,7 @@ import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from "./callbox_constants
 import DtAvatar from "../../../components/avatar/avatar.vue.js";
 import DtBadge from "../../../components/badge/badge.vue.js";
 import { DtIconPause } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, createBlock, createSlots, withCtx, createVNode, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, createBlock, createSlots, withCtx, createVNode, withDirectives, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   compatConfig: { MODE: 3 },
@@ -139,6 +139,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_pause = resolveComponent("dt-icon-pause");
   const _component_dt_avatar = resolveComponent("dt-avatar");
   const _component_dt_badge = resolveComponent("dt-badge");
+  const _directive_dt_tooltip = resolveDirective("dt-tooltip");
   return openBlock(), createElementBlock("div", {
     "data-qa": "dt-recipe-callbox",
     class: normalizeClass([_ctx.$attrs.class, "d-recipe-callbox"]),
@@ -172,16 +173,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           } : void 0
         ]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3, [
-          (openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
+          withDirectives((openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
             "data-qa": "dt-recipe-callbox__title",
             class: "d-recipe-callbox__content-title",
+            tabindex: "0",
             onClick: $options.handleClick
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString($props.title), 1)
             ]),
             _: 1
-          }, 8, ["onClick"])),
+          }, 8, ["onClick"])), [
+            [_directive_dt_tooltip, $props.title]
+          ]),
           _ctx.$slots.badge || $props.badgeText ? (openBlock(), createElementBlock("div", _hoisted_4, [
             renderSlot(_ctx.$slots, "badge", {}, () => [
               createVNode(_component_dt_badge, {

package/dist/vue3/recipes/leftbar/callbox/callbox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.vue.js","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    :class=\"[$attrs.class, 'd-recipe-callbox']\"\n    :style=\"$attrs.style\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"callbox.vue.js","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    :class=\"[$attrs.class, 'd-recipe-callbox']\"\n    :style=\"$attrs.style\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            v-dt-tooltip=\"title\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            tabindex=\"0\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/vue3/types/components/button/button_constants.d.ts

@@ -10,13 +10,12 @@ export namespace BUTTON_KIND_MODIFIERS {
     export { _default as default };
     export let muted: string;
     export let danger: string;
-    export let positive: string;
     export let inverted: string;
 }
 export namespace BUTTON_IMPORTANCE_MODIFIERS {
     let clear: string;
-    let outlined: string;
     let primary: string;
+    let outlined: string;
 }
 export const BUTTON_TYPES: string[];
 export namespace ICON_POSITION_MODIFIERS {

package/dist/vue3/types/components/button/button_constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button_constants.d.ts","sourceRoot":"","sources":["../../../../components/button/button_constants.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,oCAA0D;;;;;;;AAS1D;;;;;IAyBE"}
+{"version":3,"file":"button_constants.d.ts","sourceRoot":"","sources":["../../../../components/button/button_constants.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,oCAA0D;;;;;;;AAS1D;;;;;IAyBE"}

package/dist/vue3/types/components/stack/stack_constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack_constants.d.ts","sourceRoot":"","sources":["../../../../components/stack/stack_constants.js"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,uDAAwE;AAExE,oCAAmF"}
+{"version":3,"file":"stack_constants.d.ts","sourceRoot":"","sources":["../../../../components/stack/stack_constants.js"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,uDAAwE;AAExE,oCAAmI"}

package/dist/vue3/types/recipes/leftbar/callbox/callbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/callbox/callbox.vue"],"names":[],"mappings":"AAyFA;"}
+{"version":3,"file":"callbox.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/callbox/callbox.vue"],"names":[],"mappings":"AA2FA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone",
-  "version": "9.109.0-rebrand-2025-beta.1",
+  "version": "9.110.0",
   "description": "Dialpad's Dialtone design system monorepo",
   "files": [
     "dist"
@@ -76,9 +76,9 @@
     "overlayscrollbars": "2.10.0",
     "regex-combined-emojis": "1.6.0",
     "tippy.js": "6.3.7",
-    "@dialpad/dialtone-emojis": "1.1.1",
-    "@dialpad/dialtone-tokens": "1.42.0-rebrand-2025-beta.3",
-    "@dialpad/dialtone-icons": "4.35.0-rebrand-2025-beta.7"
+    "@dialpad/dialtone-emojis": "1.1.2",
+    "@dialpad/dialtone-icons": "4.34.6",
+    "@dialpad/dialtone-tokens": "1.41.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
@@ -86,7 +86,7 @@
     "@dialpad/conventional-changelog-angular": "^1.1.1",
     "@dialpad/semantic-release-changelog-json": "^1.0.0",
     "@faker-js/faker": "8.4.1",
-    "@percy/cli": "1.30.7",
+    "@percy/cli": "1.30.9",
     "@percy/storybook": "6.0.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
@@ -155,8 +155,8 @@
     "stylelint-less": "3.0.1",
     "stylelint-no-px": "^1.0.1",
     "tinycolor2": "^1.6.0",
-    "typedoc": "^0.27.4",
-    "typedoc-plugin-markdown": "^4.3.2",
+    "typedoc": "^0.28.2",
+    "typedoc-plugin-markdown": "^4.6.1",
     "typescript": "^5.2",
     "vite": "^5.4.2",
     "vite-bundle-visualizer": "^1.0.1",