@dialpad/dialtone-vue 3.4.0 → 3.5.0

package/dist/dialtone-vue.umd.js

@@ -203,7 +203,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;str
 
 /***/ }),
 
-/***/ 739:
+/***/ 791:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -531,19 +531,19 @@ var update = add("537a95a4", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 877:
+/***/ 273:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(739);
+var content = __webpack_require__(791);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("0480d588", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("72197f1c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -3113,6 +3113,7 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
  * the root element of the component.
  */
 
+const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced ' + 'element doesn\'t exist. Received listElement: ';
 /* harmony default export */ const keyboard_list_navigation = (function () {
   let {
     // Role of the list items in the component. This is used to identify the list items
@@ -3136,7 +3137,7 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
     endOfListMethod = null,
     // Scroll the active element into view when highlighted by a keyboard event.
     scrollToOnHighlight = true,
-    // Focus the active element on keyboard navigation
+    // Focus the active element on keyboard navigation.
     focusOnKeyboardNavigation = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
@@ -3170,14 +3171,25 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
       // Gets the length of all the items in the list, uses the listItemRole param to determine
       // whether an element is a list item.
       _itemsLength() {
+        const listItems = this._getListItemNodes();
+
+        if (listItems === null) {
+          return 0;
+        }
+
+        return listItems.length;
+      },
+
+      // Gets all the list item nodes within the list element
+      _getListItemNodes() {
         const listElement = this._getListElement();
 
         if (!listElement) {
-          console.error("listElementKey is required or the referenced element doesn't exist. Received\n          listElement: ", listElement);
-          return 0;
+          console.error(ERROR_INVALID_LIST_ELEMENT, listElement);
+          return null;
         }
 
-        return listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")).length;
+        return Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
       },
 
       onUpKey() {
@@ -3222,6 +3234,35 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
         this.focusActiveItemIfNeeded();
       },
 
+      onNavigationKey(key) {
+        const listItems = this._getListItemNodes();
+
+        const matchingItems = listItems.filter(item => {
+          const content = item.textContent.trim().toLowerCase();
+          return content.startsWith(key.toLowerCase());
+        });
+
+        if (matchingItems.length <= 0) {
+          return;
+        }
+
+        const highlightedMatchingItemIndex = matchingItems.findIndex(item => {
+          return this[indexKey] === listItems.indexOf(item);
+        });
+        const nextHighlightedItemIndex = listItems.indexOf(highlightedMatchingItemIndex < matchingItems.length - 1 ? matchingItems[highlightedMatchingItemIndex + 1] : matchingItems[0]);
+        this.setHighlightIndex(nextHighlightedItemIndex);
+        this.scrollActiveItemIntoViewIfNeeded();
+        this.focusActiveItemIfNeeded();
+      },
+
+      isValidLetter(key) {
+        if (key.length > 1) {
+          return false;
+        }
+
+        return key >= 'a' && key <= 'z' || key >= 'A' && key <= 'Z';
+      },
+
       jumpToBeginning() {
         this.setHighlightIndex(0);
       },
@@ -3258,8 +3299,7 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
         }
 
         const listItems = Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
-        const index = listItems.indexOf(listElement.querySelector("#".concat(id)));
-        return index;
+        return listItems.indexOf(listElement.querySelector("#".concat(id)));
       },
 
       _getItemId(index) {
@@ -3522,10 +3562,10 @@ const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxv
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/dropdown/dropdown.vue?vue&type=template&id=071e4ebc
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/dropdown/dropdown.vue?vue&type=template&id=e86dedbc
 
-const dropdownvue_type_template_id_071e4ebc_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_071e4ebc_render(_ctx, _cache, $props, $setup, $data, $options) {
+const dropdownvue_type_template_id_e86dedbc_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_e86dedbc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-popover");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
@@ -3543,7 +3583,7 @@ function dropdownvue_type_template_id_071e4ebc_render(_ctx, _cache, $props, $set
     "max-width": $props.maxWidth,
     "open-with-arrow-keys": true,
     onOpened: $options.updateInitialHighlightIndex,
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"]))]
+    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"])), _cache[6] || (_cache[6] = $event => $options.onKeyValidation($event, 'onKeyPress'))]
   }), {
     anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(_ref => {
       let {
@@ -3570,12 +3610,12 @@ function dropdownvue_type_template_id_071e4ebc_render(_ctx, _cache, $props, $set
         })
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
         close: close
-      })], 42, dropdownvue_type_template_id_071e4ebc_hoisted_1)];
+      })], 42, dropdownvue_type_template_id_e86dedbc_hoisted_1)];
     }),
     _: 3
   }, 16, ["content-width", "open", "placement", "fallback-placements", "modal", "max-height", "max-width", "onOpened", "onKeydown"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=071e4ebc
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=e86dedbc
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/popover/popover.vue?vue&type=template&id=0656612f
 
@@ -9020,7 +9060,6 @@ const DROPDOWN_PADDING_CLASSES = {
   components: {
     DtPopover: popover
   },
-  inheritAttrs: false,
   mixins: [keyboard_list_navigation({
     indexKey: 'highlightIndex',
     idKey: 'highlightId',
@@ -9032,6 +9071,7 @@ const DROPDOWN_PADDING_CLASSES = {
     activeItemKey: 'activeItemEl',
     focusOnKeyboardNavigation: true
   })],
+  inheritAttrs: false,
   props: {
     /**
      * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.
@@ -9180,6 +9220,10 @@ const DROPDOWN_PADDING_CLASSES = {
 
     activeItemEl() {
       return this.getListElement().querySelector('#' + this.highlightId);
+    },
+
+    isArrowKeyNav() {
+      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;
     }
 
   },
@@ -9239,7 +9283,7 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onUpKey();
       }
     },
@@ -9250,29 +9294,35 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onDownKey();
       }
     },
 
     onHomeKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onHomeKey();
-      }
+      return this.onHomeKey();
     },
 
     onEndKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onEndKey();
+      return this.onEndKey();
+    },
+
+    onKeyPress(e) {
+      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {
+        return;
       }
+
+      e.stopPropagation();
+      e.preventDefault();
+      return this.onNavigationKey(e.key);
     },
 
     onKeyValidation(e, eventHandler) {
@@ -9293,7 +9343,7 @@ const DROPDOWN_PADDING_CLASSES = {
 
 
 ;
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_071e4ebc_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_e86dedbc_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
@@ -9458,7 +9508,7 @@ async function codeToEmojiData(code) {
 // @returns {string[]}
 
 function findShortCodes(textContent) {
-  const shortCodes = textContent.match(/:[^:]+:/g);
+  const shortCodes = textContent.match(/:\w+:/g);
   const filtered = shortCodes ? shortCodes.filter(code => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 } // Finds every emoji in slot text
@@ -13359,79 +13409,64 @@ const checkbox_group_exports_ = checkbox_groupvue_type_script_lang_js;
 /* harmony default export */ const checkbox_group = (checkbox_group_exports_);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/chip/chip.vue?vue&type=template&id=4d7bb584
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/chip/chip.vue?vue&type=template&id=8a56dabe
 
-const chipvue_type_template_id_4d7bb584_hoisted_1 = ["id", "tabindex", "aria-labelledby", "aria-label"];
-const chipvue_type_template_id_4d7bb584_hoisted_2 = {
+const chipvue_type_template_id_8a56dabe_hoisted_1 = {
+  class: "d-chip"
+};
+const chipvue_type_template_id_8a56dabe_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_4d7bb584_hoisted_3 = {
+const chipvue_type_template_id_8a56dabe_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_4d7bb584_hoisted_4 = ["id"];
-const chipvue_type_template_id_4d7bb584_hoisted_5 = {
-  key: 3,
-  class: "d-chip-btn-holder"
-};
-const chipvue_type_template_id_4d7bb584_hoisted_6 = {
-  ref: "closeBtnContainer",
-  class: "d-chip-btn-container"
-};
-function chipvue_type_template_id_4d7bb584_render(_ctx, _cache, $props, $setup, $data, $options) {
+const chipvue_type_template_id_8a56dabe_hoisted_4 = ["id"];
+function chipvue_type_template_id_8a56dabe_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("icon-close");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     id: $props.id,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)($options.chipClasses()),
+    type: $props.interactive && 'button',
+    class: $options.chipClasses(),
     "data-qa": "dt-chip",
-    tabindex: $options.tabIndex,
     "aria-labelledby": $props.ariaLabel ? undefined : "".concat($props.id, "-content"),
-    "aria-label": $props.ariaLabel,
-    onMousedown: _cache[1] || (_cache[1] = function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }),
-    onMouseup: _cache[2] || (_cache[2] = function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }),
-    onMouseleave: _cache[3] || (_cache[3] = $event => $data.isActive = false),
-    onFocusout: _cache[4] || (_cache[4] = $event => $data.isActive = false),
-    onKeydown: _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }, ["enter"])),
-    onKeyup: [_cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }, ["enter"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function () {
-      return $options.onClose && $options.onClose(...arguments);
-    }, ["delete"]))]
-  }, [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
-    key: 2,
-    id: "".concat($props.id, "-content"),
-    "data-qa": "dt-chip-label",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-truncate', $props.contentClass])
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_4d7bb584_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_5)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", chipvue_type_template_id_4d7bb584_hoisted_6, [!$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+    "aria-label": $props.ariaLabel
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.chipListeners)), {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+      key: 2,
+      id: "".concat($props.id, "-content"),
+      "data-qa": "dt-chip-label",
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_8a56dabe_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]),
+    _: 3
+  }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     key: 0
   }, $props.closeButtonProps, {
+    class: $options.chipCloseButtonClasses(),
     "data-qa": "dt-chip-close",
-    circle: "",
-    importance: "clear",
     "aria-label": $props.closeButtonProps.ariaLabel,
     onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
   }), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_icon_close)]),
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_icon_close)]),
     _: 1
-  }, 16, ["aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 512)], 42, chipvue_type_template_id_4d7bb584_hoisted_1);
+  }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=4d7bb584
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=8a56dabe
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
-  xs: 'd-chip--xs',
-  sm: 'd-chip--sm',
+  xs: 'd-chip__label--xs',
+  sm: 'd-chip__label--sm',
+  md: ''
+};
+const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
+  xs: 'd-chip__close--xs',
+  sm: 'd-chip__close--sm',
   md: ''
 };
 /* harmony default export */ const chip_constants = ({
@@ -13515,7 +13550,7 @@ const CHIP_SIZE_MODIFIERS = {
       default: ''
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'keyup'],
 
   data() {
     return {
@@ -13524,37 +13559,37 @@ const CHIP_SIZE_MODIFIERS = {
   },
 
   computed: {
-    tabIndex() {
-      return this.interactive ? 0 : -1;
+    chipListeners() {
+      return {
+        click: event => {
+          if (this.interactive) this.$emit('click', event);
+        },
+        keyup: event => {
+          var _event$code;
+
+          if (((_event$code = event.code) === null || _event$code === void 0 ? void 0 : _event$code.toLowerCase()) === 'delete') {
+            this.onClose();
+          } else {
+            this.$emit('keyup', event);
+          }
+        }
+      };
     }
 
   },
   methods: {
     chipClasses() {
-      return ['d-chip', CHIP_SIZE_MODIFIERS[this.size], {
-        'd-chip--interactive': this.interactive,
-        'd-chip--active': this.isActive
-      }];
+      return ['d-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+    },
+
+    chipCloseButtonClasses() {
+      return ['d-chip__close', CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]];
     },
 
     onClose() {
       if (!this.hideClose) {
         this.$emit('close');
       }
-    },
-
-    onClick(event) {
-      // Clicking on the button should not update value of isActive.
-      if (!this.interactive || this.$refs.closeBtnContainer.contains(event.target)) {
-        return;
-      }
-
-      if (event.type === 'mousedown' || event.type === 'keydown') {
-        this.isActive = true;
-      } else {
-        this.isActive = false;
-        this.$emit('click');
-      }
     }
 
   }
@@ -13567,7 +13602,7 @@ const CHIP_SIZE_MODIFIERS = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_4d7bb584_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_8a56dabe_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -14275,15 +14310,15 @@ const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_t
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/tooltip/tooltip.vue?vue&type=template&id=600c8e6a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/tooltip/tooltip.vue?vue&type=template&id=044c8b20
 
-const tooltipvue_type_template_id_600c8e6a_hoisted_1 = {
+const tooltipvue_type_template_id_044c8b20_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_600c8e6a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_044c8b20_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", tooltipvue_type_template_id_600c8e6a_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", tooltipvue_type_template_id_044c8b20_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
     ref: "anchor",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -14320,7 +14355,7 @@ function tooltipvue_type_template_id_600c8e6a_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["id", "show", "transition", "class", "onAfterLeave", "onAfterEnter"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=600c8e6a
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=044c8b20
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -14384,7 +14419,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
      */
     offset: {
       type: Array,
-      default: () => [0, 0]
+      default: () => [0, -4]
     },
 
     /**
@@ -14596,9 +14631,9 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=600c8e6a&lang=less
-var tooltipvue_type_style_index_0_id_600c8e6a_lang_less = __webpack_require__(877);
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=600c8e6a&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
+var tooltipvue_type_style_index_0_id_044c8b20_lang_less = __webpack_require__(273);
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -14608,7 +14643,7 @@ var tooltipvue_type_style_index_0_id_600c8e6a_lang_less = __webpack_require__(87
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_600c8e6a_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_044c8b20_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js