@dialpad/dialtone-vue 3.28.0 → 3.29.1

package/dist/dialtone-vue.common.js

@@ -1133,7 +1133,8 @@ __webpack_require__.d(__webpack_exports__, {
   "AVATAR_COLOR_MODIFIERS": () => (/* reexport */ AVATAR_COLOR_MODIFIERS),
   "AVATAR_KIND_MODIFIERS": () => (/* reexport */ AVATAR_KIND_MODIFIERS),
   "AVATAR_SIZE_MODIFIERS": () => (/* reexport */ AVATAR_SIZE_MODIFIERS),
-  "BADGE_COLOR_MODIFIERS": () => (/* reexport */ BADGE_COLOR_MODIFIERS),
+  "BADGE_KIND_MODIFIERS": () => (/* reexport */ BADGE_KIND_MODIFIERS),
+  "BADGE_TYPE_MODIFIERS": () => (/* reexport */ BADGE_TYPE_MODIFIERS),
   "BREADCRUMBS_INVERTED_MODIFIER": () => (/* reexport */ BREADCRUMBS_INVERTED_MODIFIER),
   "BREADCRUMB_ITEM_SELECTED_MODIFIER": () => (/* reexport */ BREADCRUMB_ITEM_SELECTED_MODIFIER),
   "BUTTON_GROUP_ALIGNMENT": () => (/* reexport */ BUTTON_GROUP_ALIGNMENT),
@@ -1771,36 +1772,154 @@ const avatar_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(avatarvue_t
 ;// CONCATENATED MODULE: ./components/avatar/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/badge/badge.vue?vue&type=template&id=fea57e1e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/badge/badge.vue?vue&type=template&id=741d001d
+
+const badgevue_type_template_id_741d001d_hoisted_1 = {
+  key: 0,
+  class: "d-badge__icon-left"
+};
+const badgevue_type_template_id_741d001d_hoisted_2 = {
+  class: "d-badge__label"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "d-badge__icon-right"
+};
+function badgevue_type_template_id_741d001d_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
-function badgevue_type_template_id_fea57e1e_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-badge', $data.BADGE_COLOR_MODIFIERS[$props.color]]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-badge', $data.BADGE_TYPE_MODIFIERS[$props.type], $data.BADGE_KIND_MODIFIERS[$props.kind]]),
     "data-qa": "dt-badge"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 1)])], 2);
+  }, [$props.iconLeft || $props.type === 'ai' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_741d001d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+    name: $props.iconLeft || 'dialpad-ai',
+    size: "200"
+  }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", badgevue_type_template_id_741d001d_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 1)])]), $props.iconRight ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+    name: $props.iconRight,
+    size: "200"
+  }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=template&id=fea57e1e
+;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=template&id=741d001d
 
 ;// CONCATENATED MODULE: ./components/badge/badge_constants.js
-const BADGE_COLOR_MODIFIERS = {
-  base: '',
-  'black-700': 'd-badge--black-700',
-  'green-400': 'd-badge--green-400',
-  'orange-400': 'd-badge--orange-400',
-  'magenta-100': 'd-badge--magenta-100',
-  'magenta-300': 'd-badge--magenta-300',
-  'magenta-400': 'd-badge--magenta-400',
-  'magenta-500': 'd-badge--magenta-500',
-  'purple-100': 'd-badge--purple-100',
-  'purple-300': 'd-badge--purple-300',
-  'purple-400': 'd-badge--purple-400',
-  'purple-500': 'd-badge--purple-500',
-  'red-300': 'd-badge--red-300',
-  white: 'd-badge--white',
-  'gold-200': 'd-badge--gold-200'
+const BADGE_TYPE_MODIFIERS = {
+  default: '',
+  info: 'd-badge--info',
+  success: 'd-badge--success',
+  warning: 'd-badge--warning',
+  critical: 'd-badge--critical',
+  bulletin: 'd-badge--bulletin',
+  ai: 'd-badge--ai'
+};
+const BADGE_KIND_MODIFIERS = {
+  label: '',
+  count: 'd-badge--count'
+};
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=template&id=0c7462d0
+
+function iconvue_type_template_id_0c7462d0_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($options.currentIcon), {
+    "data-qa": "dt-icon",
+    "aria-hidden": $props.ariaLabel ? 'false' : 'true',
+    "aria-label": $props.ariaLabel,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.iconSize)
+  }, null, 8, ["aria-hidden", "aria-label", "class"]);
+}
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=template&id=0c7462d0
+
+;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+const ICON_SIZE_MODIFIERS = {
+  100: 'd-icon--size-100',
+  200: 'd-icon--size-200',
+  300: 'd-icon--size-300',
+  400: 'd-icon--size-400',
+  500: 'd-icon--size-500',
+  600: 'd-icon--size-600',
+  700: 'd-icon--size-700',
+  800: 'd-icon--size-800'
 };
+/* harmony default export */ const icon_constants = ({
+  ICON_SIZE_MODIFIERS
+});
+;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
+const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=script&lang=js
+
+
+
+/**
+ * The Icon component provides a set of glyphs and sizes to provide context your application.
+ * @see https://dialpad.design/components/icon.html
+ */
+
+/* harmony default export */ const iconvue_type_script_lang_js = ({
+  name: 'DtIcon',
+  props: {
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: '500',
+      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * The icon name in kebab-case
+     */
+    name: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
+     */
+    ariaLabel: {
+      type: String,
+      default: undefined
+    }
+  },
+
+  data() {
+    return {
+      dialtoneIcons: dialtone_icons_namespaceObject
+    };
+  },
+
+  computed: {
+    iconSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
+    },
+
+    iconName() {
+      return kebabCaseToPascalCase(this.name);
+    },
+
+    currentIcon() {
+      return this.dialtoneIcons[this.iconName];
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/icon/icon.vue
+
+
+
+
+;
+const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_script_lang_js, [['render',iconvue_type_template_id_0c7462d0_render]])
+
+/* harmony default export */ const icon = (icon_exports_);
+;// CONCATENATED MODULE: ./components/icon/index.js
+
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/badge/badge.vue?vue&type=script&lang=js
 
+
 /**
  * A badge is a compact UI element that provides brief, descriptive information about an element.
  * It is terse, ideally one word.
@@ -1809,7 +1928,29 @@ const BADGE_COLOR_MODIFIERS = {
 
 /* harmony default export */ const badgevue_type_script_lang_js = ({
   name: 'DtBadge',
+  components: {
+    DtIcon: icon
+  },
   props: {
+    /**
+     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialpad.design/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
+     * will automatically be shown here, but this can be overridden by setting this prop.
+     */
+    iconLeft: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialpad.design/components/icon.html#icon-catalog
+     */
+    iconRight: {
+      type: String,
+      default: ''
+    },
+
     /**
      * Text for the badge content
      */
@@ -1818,26 +1959,53 @@ const BADGE_COLOR_MODIFIERS = {
       default: ''
     },
 
+    /**
+     * The kind of badge which determines the styling
+     * @values label, count
+     */
+    kind: {
+      type: String,
+      default: 'label',
+      validator: kind => Object.keys(BADGE_KIND_MODIFIERS).includes(kind)
+    },
+
     /**
      * Color for the badge background
-     * @values base, black-700, green-400, orange-400,
-     * pink-300, pink-500, pink-600, pink-700,
-     * purple-100, purple-300, purple-500, purple-700,
-     * red-500, white, yellow-300
+     * @values default, info, success, warning, critical, bulletin, ai
      */
-    color: {
+    type: {
       type: String,
-      default: 'base',
-      validator: color => Object.keys(BADGE_COLOR_MODIFIERS).includes(color)
+      default: 'default',
+      validator: type => Object.keys(BADGE_TYPE_MODIFIERS).includes(type)
     }
   },
 
   data() {
     return {
-      BADGE_COLOR_MODIFIERS: BADGE_COLOR_MODIFIERS
+      BADGE_TYPE_MODIFIERS: BADGE_TYPE_MODIFIERS,
+      BADGE_KIND_MODIFIERS: BADGE_KIND_MODIFIERS
     };
-  }
+  },
 
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateProps();
+      }
+
+    }
+  },
+  methods: {
+    validateProps() {
+      if (this.type === 'ai' && this.kind === 'count') {
+        console.error('DtBadge error: type: \'ai\' with kind: \'count\' is an invalid combination.');
+      }
+    }
+
+  }
 });
 ;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=script&lang=js
  
@@ -1847,7 +2015,7 @@ const BADGE_COLOR_MODIFIERS = {
 
 
 ;
-const badge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(badgevue_type_script_lang_js, [['render',badgevue_type_template_id_fea57e1e_render]])
+const badge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(badgevue_type_script_lang_js, [['render',badgevue_type_template_id_741d001d_render]])
 
 /* harmony default export */ const badge = (badge_exports_);
 ;// CONCATENATED MODULE: ./components/badge/index.js
@@ -1919,108 +2087,6 @@ function notice_iconvue_type_template_id_dbeeebfa_render(_ctx, _cache, $props, $
 }
 ;// CONCATENATED MODULE: ./components/notice/notice_icon.vue?vue&type=template&id=dbeeebfa
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=template&id=0c7462d0
-
-function iconvue_type_template_id_0c7462d0_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($options.currentIcon), {
-    "data-qa": "dt-icon",
-    "aria-hidden": $props.ariaLabel ? 'false' : 'true',
-    "aria-label": $props.ariaLabel,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.iconSize)
-  }, null, 8, ["aria-hidden", "aria-label", "class"]);
-}
-;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=template&id=0c7462d0
-
-;// CONCATENATED MODULE: ./components/icon/icon_constants.js
-const ICON_SIZE_MODIFIERS = {
-  100: 'd-icon--size-100',
-  200: 'd-icon--size-200',
-  300: 'd-icon--size-300',
-  400: 'd-icon--size-400',
-  500: 'd-icon--size-500',
-  600: 'd-icon--size-600',
-  700: 'd-icon--size-700',
-  800: 'd-icon--size-800'
-};
-/* harmony default export */ const icon_constants = ({
-  ICON_SIZE_MODIFIERS
-});
-;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
-const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=script&lang=js
-
-
-
-/**
- * The Icon component provides a set of glyphs and sizes to provide context your application.
- * @see https://dialpad.design/components/icon.html
- */
-
-/* harmony default export */ const iconvue_type_script_lang_js = ({
-  name: 'DtIcon',
-  props: {
-    /**
-     * The size of the icon.
-     * @values 100, 200, 300, 400, 500, 600, 700, 800
-     */
-    size: {
-      type: String,
-      default: '500',
-      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
-    },
-
-    /**
-     * The icon name in kebab-case
-     */
-    name: {
-      type: String,
-      required: true
-    },
-
-    /**
-     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
-     */
-    ariaLabel: {
-      type: String,
-      default: undefined
-    }
-  },
-
-  data() {
-    return {
-      dialtoneIcons: dialtone_icons_namespaceObject
-    };
-  },
-
-  computed: {
-    iconSize() {
-      return ICON_SIZE_MODIFIERS[this.size];
-    },
-
-    iconName() {
-      return kebabCaseToPascalCase(this.name);
-    },
-
-    currentIcon() {
-      return this.dialtoneIcons[this.iconName];
-    }
-
-  }
-});
-;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js
- 
-;// CONCATENATED MODULE: ./components/icon/icon.vue
-
-
-
-
-;
-const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_script_lang_js, [['render',iconvue_type_template_id_0c7462d0_render]])
-
-/* harmony default export */ const icon = (icon_exports_);
-;// CONCATENATED MODULE: ./components/icon/index.js
-
-
 ;// CONCATENATED MODULE: ./components/notice/notice_constants.js
 const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];
 const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];
@@ -2077,7 +2143,7 @@ const notice_contentvue_type_template_id_45f8172a_hoisted_1 = {
   "data-qa": "notice-content"
 };
 const notice_contentvue_type_template_id_45f8172a_hoisted_2 = ["id"];
-const _hoisted_3 = ["id"];
+const notice_contentvue_type_template_id_45f8172a_hoisted_3 = ["id"];
 function notice_contentvue_type_template_id_45f8172a_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_contentvue_type_template_id_45f8172a_hoisted_1, [$props.title || _ctx.$slots.titleOverride ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", {
     key: 0,
@@ -2088,7 +2154,7 @@ function notice_contentvue_type_template_id_45f8172a_render(_ctx, _cache, $props
     id: $props.contentId,
     class: "d-notice__message",
     "data-qa": "notice-content-message"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 8, _hoisted_3)]);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 8, notice_contentvue_type_template_id_45f8172a_hoisted_3)]);
 }
 ;// CONCATENATED MODULE: ./components/notice/notice_content.vue?vue&type=template&id=45f8172a
 
@@ -3468,25 +3534,19 @@ const card_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(cardvue_type_
 /* harmony default export */ const card = (card_exports_);
 ;// CONCATENATED MODULE: ./components/card/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=4fb51d61
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=3595da7e
 
-const comboboxvue_type_template_id_4fb51d61_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_4fb51d61_hoisted_2 = {
+const comboboxvue_type_template_id_3595da7e_hoisted_1 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_4fb51d61_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_3595da7e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-    role: "combobox",
-    "aria-expanded": $props.showList.toString(),
-    "aria-controls": $props.listId,
-    "aria-owns": $props.listId,
-    "aria-haspopup": "listbox",
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_4fb51d61_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_3595da7e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
@@ -3516,9 +3576,9 @@ function comboboxvue_type_template_id_4fb51d61_render(_ctx, _cache, $props, $set
     listProps: $options.listProps,
     opened: $options.onOpen,
     clearHighlightIndex: $options.clearHighlightIndex
-  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_4fb51d61_hoisted_1);
+  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 32);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=4fb51d61
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=3595da7e
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -5507,7 +5567,7 @@ const LABEL_SIZES = {
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_4fb51d61_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_3595da7e_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
@@ -12196,30 +12256,30 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=013475ce
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=752f3446
 
-const inputvue_type_template_id_013475ce_hoisted_1 = {
+const inputvue_type_template_id_752f3446_hoisted_1 = {
   ref: "container",
   class: "base-input",
   "data-qa": "dt-input"
 };
-const inputvue_type_template_id_013475ce_hoisted_2 = ["aria-details"];
-const inputvue_type_template_id_013475ce_hoisted_3 = ["id"];
-const inputvue_type_template_id_013475ce_hoisted_4 = {
+const inputvue_type_template_id_752f3446_hoisted_2 = ["aria-details"];
+const inputvue_type_template_id_752f3446_hoisted_3 = ["id"];
+const inputvue_type_template_id_752f3446_hoisted_4 = {
   key: 0
 };
-const inputvue_type_template_id_013475ce_hoisted_5 = {
+const inputvue_type_template_id_752f3446_hoisted_5 = {
   key: 1,
   "data-qa": "dt-input-length-description",
   class: /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-mb2'])
 };
-const inputvue_type_template_id_013475ce_hoisted_6 = ["read-only"];
+const inputvue_type_template_id_752f3446_hoisted_6 = ["read-only"];
 const _hoisted_7 = ["value", "name", "disabled", "maxlength"];
 const _hoisted_8 = ["value", "name", "type", "disabled", "maxlength"];
-function inputvue_type_template_id_013475ce_render(_ctx, _cache, $props, $setup, $data, $options) {
+function inputvue_type_template_id_752f3446_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-validation-messages");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_013475ce_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_752f3446_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
     class: "base-input__label",
     "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : undefined,
     "data-qa": "dt-input-label-wrapper"
@@ -12234,7 +12294,7 @@ function inputvue_type_template_id_013475ce_render(_ctx, _cache, $props, $setup,
     ref: "description",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['base-input__description', 'd-description', 'd-fd-column', $data.descriptionSizeClasses[$props.size]]),
     "data-qa": "dt-input-description"
-  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_013475ce_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_013475ce_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_013475ce_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_752f3446_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_752f3446_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_752f3446_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.inputWrapperClasses()),
     "read-only": $props.disabled === true ? true : undefined
   }, [_ctx.$slots.leftIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
@@ -12270,7 +12330,7 @@ function inputvue_type_template_id_013475ce_render(_ctx, _cache, $props, $setup,
     onFocusout: _cache[1] || (_cache[1] = function () {
       return $options.onBlur && $options.onBlur(...arguments);
     })
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_013475ce_hoisted_6)], 8, inputvue_type_template_id_013475ce_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_752f3446_hoisted_6)], 8, inputvue_type_template_id_752f3446_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     "validation-messages": $options.validationMessages,
     "show-messages": _ctx.showMessages,
     class: _ctx.messagesClass
@@ -12278,7 +12338,7 @@ function inputvue_type_template_id_013475ce_render(_ctx, _cache, $props, $setup,
     "data-qa": "dt-input-messages"
   }), null, 16, ["validation-messages", "show-messages", "class"])], 512);
 }
-;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=013475ce
+;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=752f3446
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
 // Valid input types, any other input types (for example: 'radio' or 'checkbox') should
@@ -12870,8 +12930,7 @@ const MessagesMixin = {
      */
     label: {
       type: String,
-      default: '',
-      required: true
+      default: ''
     },
 
     /**
@@ -13301,7 +13360,7 @@ const MessagesMixin = {
 
 
 ;
-const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_013475ce_render]])
+const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_752f3446_render]])
 
 /* harmony default export */ const input_input = (input_exports_);
 ;// CONCATENATED MODULE: ./components/input/index.js