@dialpad/dialtone-vue 3.27.0 → 3.28.0-beta.1

package/dist/dialtone-vue.common.js

@@ -3468,13 +3468,13 @@ const card_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(cardvue_type_
 /* harmony default export */ const card = (card_exports_);
 ;// CONCATENATED MODULE: ./components/card/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=3877c238
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=4fb51d61
 
-const comboboxvue_type_template_id_3877c238_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_3877c238_hoisted_2 = {
+const comboboxvue_type_template_id_4fb51d61_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
+const comboboxvue_type_template_id_4fb51d61_hoisted_2 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_3877c238_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_4fb51d61_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -3486,7 +3486,7 @@ function comboboxvue_type_template_id_3877c238_render(_ctx, _cache, $props, $set
     "aria-owns": $props.listId,
     "aria-haspopup": "listbox",
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_3877c238_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_4fb51d61_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
@@ -3516,9 +3516,9 @@ function comboboxvue_type_template_id_3877c238_render(_ctx, _cache, $props, $set
     listProps: $options.listProps,
     opened: $options.onOpen,
     clearHighlightIndex: $options.clearHighlightIndex
-  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_3877c238_hoisted_1);
+  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_4fb51d61_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=3877c238
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=4fb51d61
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -5128,11 +5128,20 @@ var combobox_empty_listvue_type_style_index_0_id_53681200_lang_less = __webpack_
 const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_empty_listvue_type_script_lang_js, [['render',combobox_empty_listvue_type_template_id_53681200_render]])
 
 /* harmony default export */ const combobox_empty_list = (combobox_empty_list_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.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=script&lang=js
 
 
 
 
+
 /**
  * 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.
@@ -5156,13 +5165,40 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
   })],
   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.
@@ -5297,7 +5333,12 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
   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',
@@ -5313,7 +5354,7 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
         // 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
       };
     },
 
@@ -5466,7 +5507,7 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_3877c238_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_4fb51d61_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
@@ -12155,34 +12196,34 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=79447a44
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=013475ce
 
-const inputvue_type_template_id_79447a44_hoisted_1 = {
+const inputvue_type_template_id_013475ce_hoisted_1 = {
   ref: "container",
   class: "base-input",
   "data-qa": "dt-input"
 };
-const inputvue_type_template_id_79447a44_hoisted_2 = ["aria-details"];
-const inputvue_type_template_id_79447a44_hoisted_3 = ["id"];
-const inputvue_type_template_id_79447a44_hoisted_4 = {
+const inputvue_type_template_id_013475ce_hoisted_2 = ["aria-details"];
+const inputvue_type_template_id_013475ce_hoisted_3 = ["id"];
+const inputvue_type_template_id_013475ce_hoisted_4 = {
   key: 0
 };
-const inputvue_type_template_id_79447a44_hoisted_5 = {
+const inputvue_type_template_id_013475ce_hoisted_5 = {
   key: 1,
   "data-qa": "dt-input-length-description",
   class: /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-mb2'])
 };
-const inputvue_type_template_id_79447a44_hoisted_6 = ["read-only"];
+const inputvue_type_template_id_013475ce_hoisted_6 = ["read-only"];
 const _hoisted_7 = ["value", "name", "disabled", "maxlength"];
 const _hoisted_8 = ["value", "name", "type", "disabled", "maxlength"];
-function inputvue_type_template_id_79447a44_render(_ctx, _cache, $props, $setup, $data, $options) {
+function inputvue_type_template_id_013475ce_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-validation-messages");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_79447a44_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_013475ce_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
     class: "base-input__label",
     "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : undefined,
     "data-qa": "dt-input-label-wrapper"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "labelSlot", {}, () => [$props.label ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "labelSlot", {}, () => [$props.labelVisible && $props.label ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     ref: "label",
     "data-qa": "dt-input-label",
@@ -12193,7 +12234,7 @@ function inputvue_type_template_id_79447a44_render(_ctx, _cache, $props, $setup,
     ref: "description",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['base-input__description', 'd-description', 'd-fd-column', $data.descriptionSizeClasses[$props.size]]),
     "data-qa": "dt-input-description"
-  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_79447a44_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_79447a44_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_79447a44_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_013475ce_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_013475ce_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_013475ce_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.inputWrapperClasses()),
     "read-only": $props.disabled === true ? true : undefined
   }, [_ctx.$slots.leftIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
@@ -12229,7 +12270,7 @@ function inputvue_type_template_id_79447a44_render(_ctx, _cache, $props, $setup,
     onFocusout: _cache[1] || (_cache[1] = function () {
       return $options.onBlur && $options.onBlur(...arguments);
     })
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_79447a44_hoisted_6)], 8, inputvue_type_template_id_79447a44_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_013475ce_hoisted_6)], 8, inputvue_type_template_id_013475ce_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     "validation-messages": $options.validationMessages,
     "show-messages": _ctx.showMessages,
     class: _ctx.messagesClass
@@ -12237,7 +12278,7 @@ function inputvue_type_template_id_79447a44_render(_ctx, _cache, $props, $setup,
     "data-qa": "dt-input-messages"
   }), null, 16, ["validation-messages", "show-messages", "class"])], 512);
 }
-;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=79447a44
+;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=013475ce
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
 // Valid input types, any other input types (for example: 'radio' or 'checkbox') should
@@ -12829,7 +12870,17 @@ const MessagesMixin = {
      */
     label: {
       type: String,
-      default: ''
+      default: '',
+      required: true
+    },
+
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: true
     },
 
     /**
@@ -13250,7 +13301,7 @@ const MessagesMixin = {
 
 
 ;
-const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_79447a44_render]])
+const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_013475ce_render]])
 
 /* harmony default export */ const input_input = (input_exports_);
 ;// CONCATENATED MODULE: ./components/input/index.js
@@ -17696,11 +17747,11 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/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]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=352f683e
+;// 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]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=303c5a24
 
-const combobox_with_popovervue_type_template_id_352f683e_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_352f683e_hoisted_2 = ["onMouseleave", "onFocusout"];
-function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache, $props, $setup, $data, $options) {
+const combobox_with_popovervue_type_template_id_303c5a24_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_303c5a24_hoisted_2 = ["onMouseleave", "onFocusout"];
+function combobox_with_popovervue_type_template_id_303c5a24_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -17712,12 +17763,15 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_combobox, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     ref: "combobox",
     loading: $props.loading,
+    label: $props.label,
+    "label-visible": $props.labelVisible,
+    size: $props.size,
+    description: $props.description,
     "empty-list": $props.emptyList,
     "empty-state-message": $props.emptyStateMessage,
     "show-list": $data.isListShown,
     "on-beginning-of-list": $props.onBeginningOfList,
     "on-end-of-list": $props.onEndOfList,
-    "list-aria-label": $props.listAriaLabel,
     "list-rendered-outside": true,
     "list-id": $props.listId,
     "data-qa": "dt-combobox"
@@ -17739,7 +17793,7 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_352f683e_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_303c5a24_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
@@ -17787,7 +17841,7 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
           key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_352f683e_hoisted_2)]),
+        })], 42, combobox_with_popovervue_type_template_id_303c5a24_hoisted_2)]),
         _: 2
       }, [_ctx.$slots.header ? {
         name: "headerContent",
@@ -17810,9 +17864,9 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
       } : undefined]), 1032, ["open", "hide-on-click", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
     }),
     _: 3
-  }, 16, ["loading", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-aria-label", "list-id"]);
+  }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=352f683e
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=303c5a24
 
 ;// 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]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
 
@@ -17822,6 +17876,7 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
 
 
 
+
 /* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
   name: 'DtRecipeComboboxWithPopover',
   components: {
@@ -17833,13 +17888,40 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
   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.
@@ -18052,13 +18134,12 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
   },
   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();
       }
     },
 
@@ -18124,7 +18205,7 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
       }
     },
 
-    openOnArrowKeyPress(e) {
+    openOnArrowKeyPress() {
       if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) {
         return;
       }
@@ -18142,32 +18223,32 @@ function combobox_with_popovervue_type_template_id_352f683e_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_352f683e_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_303c5a24_render]])
 
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/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]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=478b895c
+;// 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]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=a5a3ecba
 
-const combobox_multi_selectvue_type_template_id_478b895c_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative"
 };
-const combobox_multi_selectvue_type_template_id_478b895c_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_478b895c_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_478b895c_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_478b895c_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_478b895c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_a5a3ecba_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
 
   const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-input");
@@ -18178,7 +18259,7 @@ function combobox_multi_selectvue_type_template_id_478b895c_render(_ctx, _cache,
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_recipe_combobox_with_popover, {
     ref: "comboboxWithPopover",
-    "list-aria-label": "listAriaLabel",
+    label: $props.label,
     "show-list": $props.showList,
     "max-height": $props.listMaxHeight,
     "popover-offset": $data.popoverOffset,
@@ -18192,7 +18273,7 @@ function combobox_multi_selectvue_type_template_id_478b895c_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_478b895c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_478b895c_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           ref_for: true,
           ref: "chips",
@@ -18214,7 +18295,8 @@ function combobox_multi_selectvue_type_template_id_478b895c_render(_ctx, _cache,
         modelValue: $data.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => $data.value = $event),
         class: "d-fl-grow1 d-mb4",
-        label: $props.label,
+        "aria-label": $props.label,
+        label: $props.labelVisible ? $props.label : '',
         description: $props.description,
         placeholder: $options.inputPlaceHolder,
         "show-messages": $props.showInputMessages,
@@ -18222,7 +18304,7 @@ function combobox_multi_selectvue_type_template_id_478b895c_render(_ctx, _cache,
         size: $props.size
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners), {
         onInput: onInput
-      }), null, 16, ["modelValue", "label", "description", "placeholder", "show-messages", "messages", "size", "onInput"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, {
+      }), null, 16, ["modelValue", "aria-label", "label", "description", "placeholder", "show-messages", "messages", "size", "onInput"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, {
         "validation-messages": $props.maxSelectedMessage,
         "show-messages": $data.showValidationMessages
       }, null, 8, ["validation-messages", "show-messages"])], 512)];
@@ -18232,19 +18314,19 @@ function combobox_multi_selectvue_type_template_id_478b895c_render(_ctx, _cache,
       onMousedown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent"]))
     }, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
       key: 0
-    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_478b895c_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [_ctx.$slots.header ? {
     name: "header",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_478b895c_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
     key: "0"
   } : undefined, _ctx.$slots.footer ? {
     name: "footer",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_478b895c_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_a5a3ecba_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
     key: "1"
-  } : undefined]), 1032, ["show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "onSelect"]);
+  } : undefined]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "onSelect"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=478b895c
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=a5a3ecba
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -18362,19 +18444,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: ''
     },
 
     /**
@@ -18485,7 +18576,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,
@@ -18814,7 +18905,7 @@ const MULTI_SELECT_SIZES = {
 
 
 ;
-const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_478b895c_render]])
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_a5a3ecba_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js