@dialpad/dialtone-vue 3.42.1 → 3.42.2

package/dist/dialtone-vue.umd.js

@@ -17891,21 +17891,22 @@ const keyboard_shortcut_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/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/root_layout/root_layout.vue?vue&type=template&id=1f5c28de
+;// 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/root_layout/root_layout.vue?vue&type=template&id=3670772e
 
-const root_layoutvue_type_template_id_1f5c28de_hoisted_1 = {
+const root_layoutvue_type_template_id_3670772e_hoisted_1 = {
   class: "root-layout d-root-layout"
 };
-function root_layoutvue_type_template_id_1f5c28de_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layoutvue_type_template_id_3670772e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_root_layout_body = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-root-layout-body");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_1f5c28de_hoisted_1, [$data.hasSlotContent(_ctx.$slots.header) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_3670772e_hoisted_1, [$data.hasSlotContent(_ctx.$slots.header) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__header', $props.headerClass, {
       'root-layout__header--sticky': $props.headerSticky
     }]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
-      'height': $props.headerHeight
+      'height': $props.headerHeight,
+      'min-height': $props.headerHeight
     }),
     "data-qa": "root-layout-header"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_root_layout_body, {
@@ -17914,7 +17915,10 @@ function root_layoutvue_type_template_id_1f5c28de_render(_ctx, _cache, $props, $
     "content-wrap-width-percent": $props.contentWrapWidthPercent,
     "sidebar-class": $props.sidebarClass,
     "sidebar-width": $props.sidebarWidth,
-    "sidebar-position": $props.sidebarPosition
+    "sidebar-position": $props.sidebarPosition,
+    "header-height": $props.headerHeight,
+    "footer-height": $props.footerHeight,
+    fixed: $props.fixed
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
     _: 2
   }, [$data.hasSlotContent(_ctx.$slots.sidebar) ? {
@@ -17925,25 +17929,28 @@ function root_layoutvue_type_template_id_1f5c28de_render(_ctx, _cache, $props, $
     name: "content",
     fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
     key: "1"
-  } : undefined]), 1032, ["body-class", "content-class", "content-wrap-width-percent", "sidebar-class", "sidebar-width", "sidebar-position"]), $data.hasSlotContent(_ctx.$slots.footer) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", {
+  } : undefined]), 1032, ["body-class", "content-class", "content-wrap-width-percent", "sidebar-class", "sidebar-width", "sidebar-position", "header-height", "footer-height", "fixed"]), $data.hasSlotContent(_ctx.$slots.footer) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", {
     key: 1,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__footer', $props.footerClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
-      'height': $props.footerHeight
+      'height': $props.footerHeight,
+      'min-height': $props.footerHeight
     }),
     "data-qa": "root-layout-footer"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=1f5c28de
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=3670772e
 
-;// 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/root_layout/root_layout_body.vue?vue&type=template&id=5f53db5a
+;// 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/root_layout/root_layout_body.vue?vue&type=template&id=e95be78c
 
-function root_layout_bodyvue_type_template_id_5f53db5a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layout_bodyvue_type_template_id_e95be78c_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    ref: "root-layout-body",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', 'd-fl-grow1', $options.bodyClasses]),
     "data-qa": "root-layout-body"
   }, [$data.hasSlotContent(_ctx.$slots.sidebar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("aside", {
     key: 0,
+    ref: "root-layout-sidebar",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__sidebar', $props.sidebarClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
       'flex-basis': $props.sidebarWidth
@@ -17951,14 +17958,16 @@ function root_layout_bodyvue_type_template_id_5f53db5a_render(_ctx, _cache, $pro
     "data-qa": "root-layout-sidebar"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "sidebar")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.content) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("main", {
     key: 1,
+    ref: "root-layout-content",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__content', $props.contentClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
-      'min-inline-size': $props.contentWrapWidthPercent
+      'min-inline-size': $props.contentWrapWidthPercent,
+      'height': $options.mainHeight
     }),
     "data-qa": "root-layout-content"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=5f53db5a
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=e95be78c
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
 const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
@@ -18025,12 +18034,27 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
     contentWrapWidthPercent: {
       type: String,
       default: undefined
+    },
+    headerHeight: {
+      type: String,
+      default: undefined
+    },
+    footerHeight: {
+      type: String,
+      default: undefined
+    },
+    fixed: {
+      type: Boolean,
+      default: undefined
     }
   },
 
   data() {
     return {
-      hasSlotContent: hasSlotContent
+      hasSlotContent: hasSlotContent,
+      sidebarTop: null,
+      contentTop: null,
+      documentHeight: null
     };
   },
 
@@ -18039,16 +18063,62 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
       return [this.bodyClass, {
         'root-layout__body--invert': this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT
       }];
+    },
+
+    mainHeight() {
+      if (this.fixed) {
+        return `calc(${this.documentHeight}
+          - (${this.headerHeight} + ${this.extraSidebarHeight} + ${this.footerHeight}))`;
+      }
+
+      return null;
+    },
+
+    // When the sidebar is above the header due to contentWrapWidthPercent, it needs to be excluded
+    // in the main content height calculation. Otherwise it is 0 since it is at equal height with the main content.
+    extraSidebarHeight() {
+      if (this.contentTop > this.sidebarTop) {
+        return this.$refs['root-layout-sidebar'].offsetHeight + 'px';
+      }
+
+      return '0px';
+    }
+
+  },
+
+  mounted() {
+    window.addEventListener('resize', this.onResize);
+    this.getDocumentHeight();
+    this.getElementTops();
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  },
+
+  methods: {
+    onResize() {
+      this.getDocumentHeight();
+      this.getElementTops();
+    },
+
+    getElementTops() {
+      this.sidebarTop = this.$refs['root-layout-sidebar'].offsetTop;
+      this.contentTop = this.$refs['root-layout-content'].offsetTop;
+    },
+
+    getDocumentHeight() {
+      this.documentHeight = window.innerHeight + 'px';
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=5f53db5a&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=e95be78c&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=5f53db5a&lang=less
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=e95be78c&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue
 
@@ -18058,7 +18128,7 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 ;
 
 
-const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_5f53db5a_render]])
+const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_e95be78c_render]])
 
 /* harmony default export */ const root_layout_body = (root_layout_body_exports_);
 ;// 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/root_layout/root_layout.vue?vue&type=script&lang=js
@@ -18075,6 +18145,15 @@ const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(r
     DtRootLayoutBody: root_layout_body
   },
   props: {
+    /**
+     * When true, the header / footer will be locked in position and the content will
+     * be scrollable. When false the header / footer will scroll out of view.
+     */
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * Additional class name for the header element
      */
@@ -18183,10 +18262,10 @@ const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(r
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=style&index=0&id=1f5c28de&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=style&index=0&id=3670772e&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=1f5c28de&lang=less
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=3670772e&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue
 
@@ -18196,7 +18275,7 @@ const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(r
 ;
 
 
-const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_1f5c28de_render]])
+const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_3670772e_render]])
 
 /* harmony default export */ const root_layout = (root_layout_exports_);
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
@@ -18677,27 +18756,27 @@ const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 /* 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-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]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=74c4195e
+;// 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]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=491f9b2d
 
-const combobox_multi_selectvue_type_template_id_74c4195e_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative d-d-block"
 };
-const combobox_multi_selectvue_type_template_id_74c4195e_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_74c4195e_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_74c4195e_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_74c4195e_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_491f9b2d_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_74c4195e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_491f9b2d_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");
@@ -18722,7 +18801,7 @@ function combobox_multi_selectvue_type_template_id_74c4195e_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_74c4195e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_74c4195e_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_491f9b2d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_491f9b2d_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",
@@ -18764,19 +18843,19 @@ function combobox_multi_selectvue_type_template_id_74c4195e_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_74c4195e_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_491f9b2d_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [$data.hasSlotContent(_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_74c4195e_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_491f9b2d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
     key: "0"
   } : undefined, $data.hasSlotContent(_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_74c4195e_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_491f9b2d_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
     key: "1"
   } : 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=74c4195e
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=491f9b2d
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -18881,9 +18960,9 @@ const CHIP_SIZES = {
   md: 'sm'
 };
 const CHIP_TOP_POSITION = {
-  xs: 11.1,
-  sm: 10.1,
-  md: 10.1
+  xs: 1.4,
+  sm: 0.4,
+  md: 0.2
 };
 ;// 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]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js
 
@@ -19140,7 +19219,7 @@ const CHIP_TOP_POSITION = {
       handler: async function () {
         await this.$nextTick();
         this.setInputPadding();
-        this.setChipsPosition();
+        this.setChipsTopPosition();
         this.setInputMinWidth();
         this.checkMaxSelected();
       }
@@ -19149,13 +19228,13 @@ const CHIP_TOP_POSITION = {
     async label() {
       await this.$nextTick(); // Adjust the chips position if label changed
 
-      this.setChipsPosition();
+      this.setChipsTopPosition();
     },
 
     async description() {
       await this.$nextTick(); // Adjust the chips position if description changed
 
-      this.setChipsPosition();
+      this.setChipsTopPosition();
     },
 
     size: {
@@ -19165,6 +19244,7 @@ const CHIP_TOP_POSITION = {
         this.revertInputPadding(input);
         this.originalInputSize = input.getBoundingClientRect().height;
         this.setInputPadding();
+        this.setChipsTopPosition();
       },
 
       immediate: true
@@ -19172,10 +19252,9 @@ const CHIP_TOP_POSITION = {
   },
 
   mounted() {
-    this.setChipsPosition(); // Recalculate chip position and input padding when resizing window
-
-    this.resizeWindowObserver = new ResizeObserver(() => {
-      this.setChipsPosition();
+    // Recalculate chip position and input padding when resizing window
+    this.resizeWindowObserver = new ResizeObserver(async () => {
+      this.setChipsTopPosition();
       this.setInputPadding();
     });
     this.resizeWindowObserver.observe(document.body);
@@ -19297,10 +19376,15 @@ const CHIP_TOP_POSITION = {
       this.closeComboboxList();
     },
 
-    setChipsPosition() {
-      const input = this.getInput().getBoundingClientRect();
+    setChipsTopPosition() {
+      // To place the chips in the input box
+      // The chip "top" position should be the same line as the input box
+      const input = this.getInput();
+      if (!input) return;
+      const inputSlotWrapper = this.$refs.inputSlotWrapper;
+      const top = input.getBoundingClientRect().top - inputSlotWrapper.getBoundingClientRect().top;
       const chipsWrapper = this.$refs.chipsWrapper;
-      chipsWrapper.style.top = input.top - CHIP_TOP_POSITION[this.size] + 'px';
+      chipsWrapper.style.top = top - CHIP_TOP_POSITION[this.size] + 'px';
     },
 
     setInputPadding() {
@@ -19371,7 +19455,7 @@ const CHIP_TOP_POSITION = {
 
 
 ;
-const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_74c4195e_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_491f9b2d_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js