@dialpad/dialtone-vue 2.41.0 → 2.42.0

package/dist/dialtone-vue.common.js

@@ -3926,9 +3926,9 @@ var card_component = normalizeComponent(
 /* harmony default export */ const card = (card_component.exports);
 ;// CONCATENATED MODULE: ./components/card/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=66a9d4d5&
-var comboboxvue_type_template_id_66a9d4d5_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && (_vm.emptyStateMessage || _vm.$slots.emptyListItem) && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage,"item-class":_vm.emptyStateClass}},'combobox-empty-list',_vm.listProps,false),[_vm._t("emptyListItem")],2):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
-var comboboxvue_type_template_id_66a9d4d5_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=3595da7e&
+var comboboxvue_type_template_id_3595da7e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && (_vm.emptyStateMessage || _vm.$slots.emptyListItem) && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage,"item-class":_vm.emptyStateClass}},'combobox-empty-list',_vm.listProps,false),[_vm._t("emptyListItem")],2):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
+var comboboxvue_type_template_id_3595da7e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -5710,6 +5710,14 @@ var combobox_empty_list_component = normalizeComponent(
 )
 
 /* harmony default export */ const combobox_empty_list = (combobox_empty_list_component.exports);
+;// CONCATENATED MODULE: ./components/combobox/combobox_constants.js
+const LABEL_SIZES = {
+  EXTRA_SMALL: 'xs',
+  SMALL: 'sm',
+  DEFAULT: 'md',
+  LARGE: 'lg',
+  EXTRA_LARGE: 'xl'
+};
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=script&lang=js&
 //
 //
@@ -5763,6 +5771,7 @@ var combobox_empty_list_component = normalizeComponent(
 
 
 
+
 /**
  * A combobox is a semantic component that displays an input element combined with a listbox,
  * which enables the user to select items from the list.
@@ -5786,13 +5795,40 @@ var combobox_empty_list_component = normalizeComponent(
   })],
   props: {
     /**
-     * String to use for the list's aria-label.
+     * String to use for the input label.
      */
-    listAriaLabel: {
+    label: {
       type: String,
       required: true
     },
 
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
+     * @values null, xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: t => Object.values(LABEL_SIZES).includes(t)
+    },
+
+    /**
+     * Description for the input
+     */
+    description: {
+      type: String,
+      default: ''
+    },
+
     /**
      * Sets an ID on the list element of the component. Used by several aria attributes
      * as well as when deriving the IDs for each item.
@@ -5927,7 +5963,12 @@ var combobox_empty_list_component = normalizeComponent(
   computed: {
     inputProps() {
       return {
+        label: this.label,
+        labelVisible: this.labelVisible,
+        size: this.size,
+        description: this.description,
         role: 'combobox',
+        'aria-label': this.label,
         'aria-expanded': this.showList.toString(),
         'aria-owns': this.listId,
         'aria-haspopup': 'listbox',
@@ -5943,7 +5984,7 @@ var combobox_empty_list_component = normalizeComponent(
         // The list has to be positioned relatively so that the auto-scroll can
         // calculate the correct offset for the list items.
         class: 'd-ps-relative',
-        'aria-label': this.listAriaLabel
+        'aria-label': this.label
       };
     },
 
@@ -6100,8 +6141,8 @@ var combobox_empty_list_component = normalizeComponent(
 ;
 var combobox_component = normalizeComponent(
   combobox_comboboxvue_type_script_lang_js_,
-  comboboxvue_type_template_id_66a9d4d5_render,
-  comboboxvue_type_template_id_66a9d4d5_staticRenderFns,
+  comboboxvue_type_template_id_3595da7e_render,
+  comboboxvue_type_template_id_3595da7e_staticRenderFns,
   false,
   null,
   null,
@@ -6112,12 +6153,12 @@ var combobox_component = normalizeComponent(
 /* harmony default export */ const combobox = (combobox_component.exports);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible.vue?vue&type=template&id=7f94e9c4&
-var collapsiblevue_type_template_id_7f94e9c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({ref:"collapsible",tag:"component"},_vm.$listeners),[_c('div',{ref:"anchor",class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible.vue?vue&type=template&id=85d2157c&
+var collapsiblevue_type_template_id_85d2157c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({ref:"collapsible",tag:"component"},_vm.$listeners),[_c('div',{ref:"anchor",class:[
       'd-dt-collapsibe__anchor',
       _vm.anchorClass ],attrs:{"id":!_vm.ariaLabelledBy && _vm.labelledBy}},[_vm._t("anchor",function(){return [_c('dt-button',{style:({
           'width': _vm.maxWidth,
-        }),attrs:{"importance":"clear","kind":"muted","aria-controls":_vm.id,"aria-expanded":("" + _vm.isOpen)},on:{"click":_vm.defaultToggleOpen}},[_c('dt-icon',{staticClass:"d-icon d-icon--size-300 d-mr8 d-fl-shrink0",attrs:{"name":_vm.isOpen ? 'chevron-down' : 'chevron-right'}}),_c('span',{staticClass:"d-mr-auto d-truncate",attrs:{"title":_vm.anchorText}},[_vm._v(" "+_vm._s(_vm.anchorText)+" ")])],1)]},{"attrs":{
+        }),attrs:{"importance":"clear","kind":"muted","aria-controls":_vm.id,"aria-expanded":("" + _vm.isOpen),"aria-label":_vm.ariaLabel},on:{"click":_vm.defaultToggleOpen}},[_c('dt-icon',{staticClass:"d-icon d-icon--size-300 d-mr8 d-fl-shrink0",attrs:{"name":_vm.isOpen ? 'chevron-down' : 'chevron-right'}}),_c('span',{staticClass:"d-mr-auto d-truncate",attrs:{"title":_vm.anchorText}},[_vm._v(" "+_vm._s(_vm.anchorText)+" ")])],1)]},{"attrs":{
         'aria-controls': _vm.id,
         'aria-expanded': _vm.isOpen.toString(),
         'role': 'button',
@@ -6126,13 +6167,13 @@ var collapsiblevue_type_template_id_7f94e9c4_render = function () {var _vm=this;
       _vm.contentClass ],style:({
       'max-height': _vm.maxHeight,
       'max-width': _vm.maxWidth,
-    }),attrs:{"id":_vm.id,"aria-hidden":("" + (!_vm.isOpen)),"aria-labelledby":_vm.labelledBy,"aria-label":_vm.ariaLabel,"show":_vm.isOpen,"element-type":_vm.contentElementType,"tabindex":"-1","appear":""},on:{"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},_vm.$listeners),[_vm._t("content")],2)],1)}
-var collapsiblevue_type_template_id_7f94e9c4_staticRenderFns = []
+    }),attrs:{"id":_vm.id,"aria-hidden":("" + (!_vm.isOpen && !_vm.hasContentOnCollapse)),"aria-labelledby":_vm.labelledBy,"is-expanded":_vm.isOpen,"element-type":_vm.contentElementType,"tabindex":"-1","appear":""},scopedSlots:_vm._u([{key:"contentOnExpanded",fn:function(){return [_vm._t("contentOnExpanded")]},proxy:true},{key:"contentOnCollapsed",fn:function(){return [_vm._t("contentOnCollapsed")]},proxy:true}],null,true)},_vm.$listeners))],1)}
+var collapsiblevue_type_template_id_85d2157c_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2bfe7a0c&
-var collapsible_lazy_showvue_type_template_id_2bfe7a0c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"appear":_vm.appear,"enter-active-class":"enter-active","leave-active-class":"leave-active"},on:{"before-enter":_vm.beforeEnter,"enter":_vm.enter,"after-enter":_vm.afterEnter,"before-leave":_vm.beforeLeave,"leave":_vm.leave,"after-leave":_vm.afterLeave}},_vm.$listeners),[_c(_vm.elementType,_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],tag:"component"},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)],1)}
-var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=cc3472b8&
+var collapsible_lazy_showvue_type_template_id_cc3472b8_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"appear":_vm.appear,"mode":"out-in","enter-active-class":"enter-active","leave-active-class":"leave-active"},on:{"before-enter":_vm.beforeEnter,"enter":_vm.enter,"after-enter":_vm.afterEnter,"before-leave":_vm.beforeLeave,"leave":_vm.leave,"after-leave":_vm.afterLeave}},_vm.$listeners),[((_vm.isExpanded && _vm.$slots.contentOnExpanded))?_c(_vm.elementType,_vm._g({key:"onOpen",tag:"component"},_vm.$listeners),[_vm._t("contentOnExpanded")],2):((!_vm.isExpanded && _vm.$slots.contentOnCollapsed))?_c(_vm.elementType,_vm._g({key:"onClose",tag:"component"},_vm.$listeners),[_vm._t("contentOnCollapsed")],2):_vm._e()],1)}
+var collapsible_lazy_showvue_type_template_id_cc3472b8_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js&
@@ -6161,6 +6202,32 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js_ = ({
   name: 'DtCollapsibleLazyShow',
 
@@ -6171,7 +6238,7 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
     /**
      * Whether the child slot is shown.
      */
-    show: {
+    isExpanded: {
       type: Boolean,
       default: null
     },
@@ -6192,29 +6259,7 @@ var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
       default: 'div'
     }
   },
-
-  /******************
-   *      DATA      *
-   ******************/
-  data() {
-    return {
-      initialized: !!this.show
-    };
-  },
-
-  /******************
-   *      WATCH     *
-   ******************/
-  watch: {
-    show: function (newValue) {
-      if (!newValue || this.initialized) return;
-      this.initialized = true;
-    }
-  },
   methods: {
-    /**
-     * @param {HTMLElement} element
-     */
     beforeEnter(element) {
       requestAnimationFrame(() => {
         if (!element.style.height) {
@@ -6291,8 +6336,8 @@ var collapsible_lazy_showvue_type_style_index_0_lang_css_ = __webpack_require__(
 
 var collapsible_lazy_show_component = normalizeComponent(
   collapsible_collapsible_lazy_showvue_type_script_lang_js_,
-  collapsible_lazy_showvue_type_template_id_2bfe7a0c_render,
-  collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns,
+  collapsible_lazy_showvue_type_template_id_cc3472b8_render,
+  collapsible_lazy_showvue_type_template_id_cc3472b8_staticRenderFns,
   false,
   null,
   null,
@@ -6484,6 +6529,12 @@ var lazy_show_component = normalizeComponent(
 //
 //
 //
+//
+//
+//
+//
+//
+//
 
 
 
@@ -6587,7 +6638,7 @@ var lazy_show_component = normalizeComponent(
     },
 
     /**
-     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.
+     * Label on the anchor. Should provide this or ariaLabelledBy but not both.
      */
     ariaLabel: {
       type: String,
@@ -6628,6 +6679,10 @@ var lazy_show_component = normalizeComponent(
       // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if
       // there is no aria-label and the labelledby should point to the anchor
       return this.ariaLabelledBy || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
+    },
+
+    hasContentOnCollapse() {
+      return !!this.$slots.contentOnCollapsed;
     }
 
   },
@@ -6647,32 +6702,16 @@ var lazy_show_component = normalizeComponent(
   },
 
   methods: {
-    onLeaveTransitionComplete() {
-      this.$emit('opened', false);
-
-      if (this.open !== null) {
-        this.$emit('update:open', false);
-      }
-    },
-
-    onEnterTransitionComplete() {
-      this.$emit('opened', true, this.$refs.content);
-
-      if (this.open !== null) {
-        this.$emit('update:open', true);
-      }
-    },
-
     defaultToggleOpen() {
+      this.$emit('opened', !this.isOpen);
+
       if (this.open === null) {
-        this.toggleOpen();
+        this.isOpen = !this.isOpen;
+      } else {
+        this.$emit('update:open', !this.isOpen);
       }
     },
 
-    toggleOpen() {
-      this.isOpen = !this.isOpen;
-    },
-
     validateProperAnchor() {
       if (!this.anchorText && !this.$scopedSlots.anchor) {
         console.error('anchor text and anchor slot content cannot both be falsy');
@@ -6693,8 +6732,8 @@ var lazy_show_component = normalizeComponent(
 ;
 var collapsible_component = normalizeComponent(
   collapsible_collapsiblevue_type_script_lang_js_,
-  collapsiblevue_type_template_id_7f94e9c4_render,
-  collapsiblevue_type_template_id_7f94e9c4_staticRenderFns,
+  collapsiblevue_type_template_id_85d2157c_render,
+  collapsiblevue_type_template_id_85d2157c_staticRenderFns,
   false,
   null,
   null,
@@ -12993,8 +13032,8 @@ var dropdown_separator_component = normalizeComponent(
 
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/input/input.vue?vue&type=template&id=868d44b4&
-var inputvue_type_template_id_868d44b4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.label)?_c('div',{ref:"label",class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/input/input.vue?vue&type=template&id=356ee040&
+var inputvue_type_template_id_356ee040_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.labelVisible && _vm.label)?_c('div',{ref:"label",class:[
           'base-input__label-text',
           'd-label',
           _vm.labelSizeClasses[_vm.size] ],attrs:{"data-qa":"dt-input-label"}},[_vm._v(" "+_vm._s(_vm.label)+" ")]):_vm._e()]}),(_vm.$slots.description || _vm.description || _vm.shouldValidateLength)?_c('div',{ref:"description",class:[
@@ -13003,7 +13042,7 @@ var inputvue_type_template_id_868d44b4_render = function () {var _vm=this;var _h
         'd-fd-column',
         _vm.descriptionSizeClasses[_vm.size] ],attrs:{"id":_vm.descriptionKey,"data-qa":"dt-input-description"}},[(_vm.$slots.description || _vm.description)?_c('div',[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),(_vm.shouldValidateLength)?_c('div',{class:[
           'd-mb2' ],attrs:{"data-qa":"dt-input-length-description"}},[_vm._v(" "+_vm._s(_vm.validationProps.length.description)+" ")]):_vm._e()]):_vm._e(),_c('div',{class:_vm.inputWrapperClasses(),attrs:{"read-only":_vm.disabled}},[(_vm.$slots.leftIcon)?_c('span',{class:_vm.inputIconClasses('left'),attrs:{"data-qa":"dt-input-left-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("leftIcon")],2):_vm._e(),(_vm.isTextarea)?_c('textarea',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'textarea',_vm.$attrs,false),_vm.inputListeners)):_c('input',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"type":_vm.type,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners)),(_vm.$slots.rightIcon)?_c('span',{class:_vm.inputIconClasses('right'),attrs:{"data-qa":"dt-input-right-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("rightIcon")],2):_vm._e()])],2),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.validationMessages,"show-messages":_vm.showMessages,"data-qa":"dt-input-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)}
-var inputvue_type_template_id_868d44b4_staticRenderFns = []
+var inputvue_type_template_id_356ee040_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
@@ -13727,7 +13766,17 @@ const MessagesMixin = {
      */
     label: {
       type: String,
-      default: ''
+      default: '',
+      required: true
+    },
+
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: true
     },
 
     /**
@@ -14147,8 +14196,8 @@ const MessagesMixin = {
 ;
 var input_component = normalizeComponent(
   input_inputvue_type_script_lang_js_,
-  inputvue_type_template_id_868d44b4_render,
-  inputvue_type_template_id_868d44b4_staticRenderFns,
+  inputvue_type_template_id_356ee040_render,
+  inputvue_type_template_id_356ee040_staticRenderFns,
   false,
   null,
   null,
@@ -19037,15 +19086,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=96ff85ec&
-var combobox_with_popovervue_type_template_id_96ff85ec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=dea81786&
+var combobox_with_popovervue_type_template_id_dea81786_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
 return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
+var combobox_with_popovervue_type_template_id_dea81786_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -19152,6 +19201,10 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+
 
 
 
@@ -19170,13 +19223,40 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
   mixins: [sr_only_close_button],
   props: {
     /**
-     * String to use for the list's aria-label.
+     * String to use for the input label.
      */
-    listAriaLabel: {
+    label: {
       type: String,
       required: true
     },
 
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
+     * @values null, xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: t => Object.values(LABEL_SIZES).includes(t)
+    },
+
+    /**
+     * Description for the input
+     */
+    description: {
+      type: String,
+      default: ''
+    },
+
     /**
      * Determines when to show the list element and also controls the aria-expanded attribute.
      * Leaving this null will have the combobox trigger on input focus by default.
@@ -19389,13 +19469,12 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
   },
   methods: {
     handleDisplayList(value) {
-      if (!this.hasSuggestionList) {
-        if (value) {
-          // Displays the list after the user has typed anything
-          this.showComboboxList();
-        } else {
-          this.closeComboboxList();
-        }
+      if (!this.hasSuggestionList && value) {
+        this.showComboboxList();
+      }
+
+      if (!this.hasSuggestionList && !value) {
+        this.closeComboboxList();
       }
     },
 
@@ -19461,7 +19540,7 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
       }
     },
 
-    openOnArrowKeyPress(e) {
+    openOnArrowKeyPress() {
       if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) {
         return;
       }
@@ -19483,8 +19562,8 @@ var combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_96ff85ec_render,
-  combobox_with_popovervue_type_template_id_96ff85ec_staticRenderFns,
+  combobox_with_popovervue_type_template_id_dea81786_render,
+  combobox_with_popovervue_type_template_id_dea81786_staticRenderFns,
   false,
   null,
   null,
@@ -19495,11 +19574,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=652b0440&
-var combobox_multi_selectvue_type_template_id_652b0440_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=e5d9bc3a&
+var combobox_multi_selectvue_type_template_id_e5d9bc3a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
-return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1 d-mb4",attrs:{"label":_vm.label,"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_652b0440_staticRenderFns = []
+return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1 d-mb4",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
+var combobox_multi_selectvue_type_template_id_e5d9bc3a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -19703,6 +19782,7 @@ const MULTI_SELECT_SIZES = {
 //
 //
 //
+//
 
 
 
@@ -19721,19 +19801,28 @@ const MULTI_SELECT_SIZES = {
   mixins: [sr_only_close_button],
   props: {
     /**
-     * Label for the combobox
+     * String to use for the input label.
      */
     label: {
       type: String,
-      default: null
+      required: true
     },
 
     /**
-     * Description for the combobox
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Description for the input
      */
     description: {
       type: String,
-      default: null
+      default: ''
     },
 
     /**
@@ -19844,7 +19933,7 @@ const MULTI_SELECT_SIZES = {
     },
 
     /**
-     * Size of the input and chip, one of `xs`, `sm`, `md`
+     * Size of the chip, one of `xs`, `sm`, `md`
      */
     size: {
       type: String,
@@ -20171,8 +20260,8 @@ const MULTI_SELECT_SIZES = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_652b0440_render,
-  combobox_multi_selectvue_type_template_id_652b0440_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_e5d9bc3a_render,
+  combobox_multi_selectvue_type_template_id_e5d9bc3a_staticRenderFns,
   false,
   null,
   null,