@dialpad/dialtone-vue 3.2.0 → 3.3.0

package/dist/dialtone-vue.common.js

@@ -49,7 +49,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 143:
+/***/ 987:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -377,19 +377,19 @@ var update = add("c62e22ae", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 746:
+/***/ 366:
 /***/ ((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__(143);
+var content = __webpack_require__(987);
 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("5bb61f99", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("48240900", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -11830,23 +11830,19 @@ const list_section_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_
 /* harmony default export */ const list_section = (list_section_exports_);
 ;// CONCATENATED MODULE: ./components/list_section/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/list_item/list_item.vue?vue&type=template&id=642c4ad3
+;// 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/list_item/list_item.vue?vue&type=template&id=7876bc36
 
-function list_itemvue_type_template_id_642c4ad3_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)($props.elementType), {
+function list_itemvue_type_template_id_7876bc36_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)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-list-item d-ls-none focus-visible', {
+    class: ['dt-list-item d-ls-none focus-visible', {
       'dt-list-item--focusable': $options.isFocusable,
       'dt-list-item--highlighted': $options.isHighlighted
-    }]),
+    }],
     tabindex: $options.isFocusable ? 0 : -1,
     role: $props.role,
-    "aria-selected": $options.isHighlighted,
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onClick, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onClick, ["space"])],
-    onMousemove: $options.onMouseHover,
-    onMouseleave: $options.onMouseLeave,
-    onClick: $options.onClick
-  }, {
+    "aria-selected": $options.isHighlighted
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.listItemListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$options.listItemType ? ((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.listItemType), {
       key: 0
     }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
@@ -11860,9 +11856,9 @@ function list_itemvue_type_template_id_642c4ad3_render(_ctx, _cache, $props, $se
       key: 1
     })]),
     _: 3
-  }, 40, ["id", "class", "tabindex", "role", "aria-selected", "onKeydown", "onMousemove", "onMouseleave", "onClick"]);
+  }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=642c4ad3
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=7876bc36
 
 ;// 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/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed
 
@@ -11990,7 +11986,7 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     }
   },
-  emits: ['click'],
+  emits: ['click', 'keydown', 'mousemove', 'mouseleave'],
 
   data() {
     return {
@@ -12010,6 +12006,26 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       }
     },
 
+    listItemListeners() {
+      return {
+        keydown: event => {
+          if (['enter', 'space'].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+
+          this.$emit('keydown', event);
+        },
+        mousemove: event => {
+          this.onMouseHover(event);
+          this.$emit('mousemove', event);
+        },
+        mouseleave: event => {
+          this.onMouseLeave(event);
+          this.$emit('mouseleave', event);
+        }
+      };
+    },
+
     /**
      * For keyboard navigation, whether or not this item is currently highlighted.
      * An injected highlightId will override the default mouseover highlight.
@@ -12036,8 +12052,8 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 
   },
   methods: {
-    onClick() {
-      this.$emit('click');
+    onClick(e) {
+      this.$emit('click', e);
     },
 
     onMouseHover() {
@@ -12052,9 +12068,9 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 });
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=642c4ad3&lang=less
-var list_itemvue_type_style_index_0_id_642c4ad3_lang_less = __webpack_require__(746);
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=642c4ad3&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
+var list_itemvue_type_style_index_0_id_7876bc36_lang_less = __webpack_require__(366);
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -12064,7 +12080,7 @@ var list_itemvue_type_style_index_0_id_642c4ad3_lang_less = __webpack_require__(
 ;
 
 
-const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_642c4ad3_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_7876bc36_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -13770,27 +13786,27 @@ const select_menu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(select
 ;// CONCATENATED MODULE: ./components/select_menu/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/toast/toast.vue?vue&type=template&id=1cc09485
+;// 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/toast/toast.vue?vue&type=template&id=b9998f6e
 
-const toastvue_type_template_id_1cc09485_hoisted_1 = ["aria-hidden"];
-const toastvue_type_template_id_1cc09485_hoisted_2 = {
+const toastvue_type_template_id_b9998f6e_hoisted_1 = ["aria-hidden"];
+const toastvue_type_template_id_b9998f6e_hoisted_2 = {
   class: "d-toast__dialog"
 };
-function toastvue_type_template_id_1cc09485_render(_ctx, _cache, $props, $setup, $data, $options) {
+function toastvue_type_template_id_b9998f6e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
 
   const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-content");
 
   const _component_dt_notice_action = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-action");
 
-  return !$data.hidden ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  return $data.isShown ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-toast', $options.kindClass, {
       'd-toast--important': $props.important
     }]),
     "data-qa": "dt-toast",
-    "aria-hidden": $data.hidden.toString()
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", toastvue_type_template_id_1cc09485_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_icon, {
+    "aria-hidden": (!$data.isShown).toString()
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", toastvue_type_template_id_b9998f6e_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_icon, {
     kind: $props.kind
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
@@ -13807,18 +13823,20 @@ function toastvue_type_template_id_1cc09485_render(_ctx, _cache, $props, $setup,
   }, 8, ["title-id", "content-id", "title", "role"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_action, {
     "hide-close": $props.hideClose,
     "close-button-props": $props.closeButtonProps,
-    onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
+    onClose: $options.closeToast
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props"])])], 10, toastvue_type_template_id_1cc09485_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
+  }, 8, ["hide-close", "close-button-props", "onClose"])])], 10, toastvue_type_template_id_b9998f6e_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
 }
-;// CONCATENATED MODULE: ./components/toast/toast.vue?vue&type=template&id=1cc09485
+;// CONCATENATED MODULE: ./components/toast/toast.vue?vue&type=template&id=b9998f6e
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
 const TOAST_ROLES = ['status', 'alert'];
+const TOAST_MIN_DURATION = 6000;
 /* harmony default export */ const toast_constants = ({
-  TOAST_ROLES
+  TOAST_ROLES,
+  TOAST_MIN_DURATION
 });
 ;// 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/toast/toast.vue?vue&type=script&lang=js
 
@@ -13908,6 +13926,17 @@ const TOAST_ROLES = ['status', 'alert'];
       default: false
     },
 
+    /**
+     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
+     * after reaching the duration time, so it's convenient to use `v-model` with this prop to update
+     * the data in your component.
+     * Supports v-model
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Props for the toast close button.
      */
@@ -13926,21 +13955,23 @@ const TOAST_ROLES = ['status', 'alert'];
 
     /**
      * The duration in ms the toast will display before disappearing.
-     * Defaults to 6000 ms and the prop validation is that provided duration is equal to or greater than 6000.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
      */
     duration: {
       type: Number,
-      default: 6000,
+      default: null,
       validator: duration => {
-        return duration >= 6000;
+        return duration >= TOAST_MIN_DURATION;
       }
     }
   },
-  emits: ['close', 'click'],
+  emits: ['close', 'click', 'update:show'],
 
   data() {
     return {
-      hidden: true
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
 
@@ -13954,25 +13985,45 @@ const TOAST_ROLES = ['status', 'alert'];
         base: 'd-toast--base'
       };
       return kindClasses[this.kind];
+    },
+
+    shouldSetTimeout() {
+      return !!this.duration && this.duration >= this.minDuration;
     }
 
   },
+  watch: {
+    show: {
+      handler: function (show) {
+        this.isShown = show;
+
+        if (show) {
+          this.setTimeout();
+        } else {
+          clearTimeout(this.displayTimer);
+        }
+      },
+      immediate: true
+    }
+  },
 
   unmounted() {
     clearTimeout(this.displayTimer);
   },
 
   methods: {
-    show() {
-      this.hidden = false;
-      this.displayTimer = setTimeout(() => {
-        this.hidden = true;
-      }, this.duration);
+    closeToast(event) {
+      this.$emit('update:show', false);
+      this.$emit('close', event);
     },
 
-    close() {
-      this.hidden = true;
-      clearTimeout(this.displayTimer);
+    setTimeout() {
+      if (this.shouldSetTimeout) {
+        this.displayTimer = setTimeout(() => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+        }, this.duration);
+      }
     }
 
   }
@@ -13985,7 +14036,7 @@ const TOAST_ROLES = ['status', 'alert'];
 
 
 ;
-const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_type_script_lang_js, [['render',toastvue_type_template_id_1cc09485_render]])
+const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_type_script_lang_js, [['render',toastvue_type_template_id_b9998f6e_render]])
 
 /* harmony default export */ const toast = (toast_exports_);
 ;// CONCATENATED MODULE: ./components/toast/index.js

package/dist/dialtone-vue.umd.js

@@ -59,7 +59,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 254:
+/***/ 63:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -387,19 +387,19 @@ var update = add("463815e5", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 32:
+/***/ 621:
 /***/ ((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__(254);
+var content = __webpack_require__(63);
 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("65533ed5", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("51c1283c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -11848,23 +11848,19 @@ const list_section_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_
 /* harmony default export */ const list_section = (list_section_exports_);
 ;// CONCATENATED MODULE: ./components/list_section/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/list_item/list_item.vue?vue&type=template&id=642c4ad3
+;// 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/list_item/list_item.vue?vue&type=template&id=7876bc36
 
-function list_itemvue_type_template_id_642c4ad3_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (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.elementType), {
+function list_itemvue_type_template_id_7876bc36_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (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.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     id: $props.id,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['dt-list-item d-ls-none focus-visible', {
+    class: ['dt-list-item d-ls-none focus-visible', {
       'dt-list-item--focusable': $options.isFocusable,
       'dt-list-item--highlighted': $options.isHighlighted
-    }]),
+    }],
     tabindex: $options.isFocusable ? 0 : -1,
     role: $props.role,
-    "aria-selected": $options.isHighlighted,
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onClick, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onClick, ["space"])],
-    onMousemove: $options.onMouseHover,
-    onMouseleave: $options.onMouseLeave,
-    onClick: $options.onClick
-  }, {
+    "aria-selected": $options.isHighlighted
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.listItemListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [$options.listItemType ? ((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)($options.listItemType), {
       key: 0
     }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createSlots)({
@@ -11878,9 +11874,9 @@ function list_itemvue_type_template_id_642c4ad3_render(_ctx, _cache, $props, $se
       key: 1
     })]),
     _: 3
-  }, 40, ["id", "class", "tabindex", "role", "aria-selected", "onKeydown", "onMousemove", "onMouseleave", "onClick"]);
+  }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=642c4ad3
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=7876bc36
 
 ;// 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/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed
 
@@ -12008,7 +12004,7 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     }
   },
-  emits: ['click'],
+  emits: ['click', 'keydown', 'mousemove', 'mouseleave'],
 
   data() {
     return {
@@ -12028,6 +12024,26 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       }
     },
 
+    listItemListeners() {
+      return {
+        keydown: event => {
+          if (['enter', 'space'].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+
+          this.$emit('keydown', event);
+        },
+        mousemove: event => {
+          this.onMouseHover(event);
+          this.$emit('mousemove', event);
+        },
+        mouseleave: event => {
+          this.onMouseLeave(event);
+          this.$emit('mouseleave', event);
+        }
+      };
+    },
+
     /**
      * For keyboard navigation, whether or not this item is currently highlighted.
      * An injected highlightId will override the default mouseover highlight.
@@ -12054,8 +12070,8 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 
   },
   methods: {
-    onClick() {
-      this.$emit('click');
+    onClick(e) {
+      this.$emit('click', e);
     },
 
     onMouseHover() {
@@ -12070,9 +12086,9 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 });
 ;// CONCATENATED MODULE: ./components/list_item/list_item.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/list_item/list_item.vue?vue&type=style&index=0&id=642c4ad3&lang=less
-var list_itemvue_type_style_index_0_id_642c4ad3_lang_less = __webpack_require__(32);
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=642c4ad3&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/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
+var list_itemvue_type_style_index_0_id_7876bc36_lang_less = __webpack_require__(621);
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -12082,7 +12098,7 @@ var list_itemvue_type_style_index_0_id_642c4ad3_lang_less = __webpack_require__(
 ;
 
 
-const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_642c4ad3_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_7876bc36_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -13788,27 +13804,27 @@ const select_menu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(select
 ;// CONCATENATED MODULE: ./components/select_menu/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/toast/toast.vue?vue&type=template&id=1cc09485
+;// 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/toast/toast.vue?vue&type=template&id=b9998f6e
 
-const toastvue_type_template_id_1cc09485_hoisted_1 = ["aria-hidden"];
-const toastvue_type_template_id_1cc09485_hoisted_2 = {
+const toastvue_type_template_id_b9998f6e_hoisted_1 = ["aria-hidden"];
+const toastvue_type_template_id_b9998f6e_hoisted_2 = {
   class: "d-toast__dialog"
 };
-function toastvue_type_template_id_1cc09485_render(_ctx, _cache, $props, $setup, $data, $options) {
+function toastvue_type_template_id_b9998f6e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-notice-icon");
 
   const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-notice-content");
 
   const _component_dt_notice_action = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-notice-action");
 
-  return !$data.hidden ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+  return $data.isShown ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-toast', $options.kindClass, {
       'd-toast--important': $props.important
     }]),
     "data-qa": "dt-toast",
-    "aria-hidden": $data.hidden.toString()
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", toastvue_type_template_id_1cc09485_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_icon, {
+    "aria-hidden": (!$data.isShown).toString()
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", toastvue_type_template_id_b9998f6e_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_icon, {
     kind: $props.kind
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")]),
@@ -13825,18 +13841,20 @@ function toastvue_type_template_id_1cc09485_render(_ctx, _cache, $props, $setup,
   }, 8, ["title-id", "content-id", "title", "role"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_action, {
     "hide-close": $props.hideClose,
     "close-button-props": $props.closeButtonProps,
-    onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
+    onClose: $options.closeToast
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props"])])], 10, toastvue_type_template_id_1cc09485_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true);
+  }, 8, ["hide-close", "close-button-props", "onClose"])])], 10, toastvue_type_template_id_b9998f6e_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true);
 }
-;// CONCATENATED MODULE: ./components/toast/toast.vue?vue&type=template&id=1cc09485
+;// CONCATENATED MODULE: ./components/toast/toast.vue?vue&type=template&id=b9998f6e
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
 const TOAST_ROLES = ['status', 'alert'];
+const TOAST_MIN_DURATION = 6000;
 /* harmony default export */ const toast_constants = ({
-  TOAST_ROLES
+  TOAST_ROLES,
+  TOAST_MIN_DURATION
 });
 ;// 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/index.js??ruleSet[0].use[0]!./components/toast/toast.vue?vue&type=script&lang=js
 
@@ -13926,6 +13944,17 @@ const TOAST_ROLES = ['status', 'alert'];
       default: false
     },
 
+    /**
+     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
+     * after reaching the duration time, so it's convenient to use `v-model` with this prop to update
+     * the data in your component.
+     * Supports v-model
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Props for the toast close button.
      */
@@ -13944,21 +13973,23 @@ const TOAST_ROLES = ['status', 'alert'];
 
     /**
      * The duration in ms the toast will display before disappearing.
-     * Defaults to 6000 ms and the prop validation is that provided duration is equal to or greater than 6000.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
      */
     duration: {
       type: Number,
-      default: 6000,
+      default: null,
       validator: duration => {
-        return duration >= 6000;
+        return duration >= TOAST_MIN_DURATION;
       }
     }
   },
-  emits: ['close', 'click'],
+  emits: ['close', 'click', 'update:show'],
 
   data() {
     return {
-      hidden: true
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
 
@@ -13972,25 +14003,45 @@ const TOAST_ROLES = ['status', 'alert'];
         base: 'd-toast--base'
       };
       return kindClasses[this.kind];
+    },
+
+    shouldSetTimeout() {
+      return !!this.duration && this.duration >= this.minDuration;
     }
 
   },
+  watch: {
+    show: {
+      handler: function (show) {
+        this.isShown = show;
+
+        if (show) {
+          this.setTimeout();
+        } else {
+          clearTimeout(this.displayTimer);
+        }
+      },
+      immediate: true
+    }
+  },
 
   unmounted() {
     clearTimeout(this.displayTimer);
   },
 
   methods: {
-    show() {
-      this.hidden = false;
-      this.displayTimer = setTimeout(() => {
-        this.hidden = true;
-      }, this.duration);
+    closeToast(event) {
+      this.$emit('update:show', false);
+      this.$emit('close', event);
     },
 
-    close() {
-      this.hidden = true;
-      clearTimeout(this.displayTimer);
+    setTimeout() {
+      if (this.shouldSetTimeout) {
+        this.displayTimer = setTimeout(() => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+        }, this.duration);
+      }
     }
 
   }
@@ -14003,7 +14054,7 @@ const TOAST_ROLES = ['status', 'alert'];
 
 
 ;
-const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_type_script_lang_js, [['render',toastvue_type_template_id_1cc09485_render]])
+const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_type_script_lang_js, [['render',toastvue_type_template_id_b9998f6e_render]])
 
 /* harmony default export */ const toast = (toast_exports_);
 ;// CONCATENATED MODULE: ./components/toast/index.js