@youcan/celeste 0.6.23 → 0.6.24

package/dist/celeste.css

@@ -1912,44 +1912,62 @@ to {
 }
 .celeste-dropdown-item .celeste-dropdown-item-header-lg .celeste-dropdown-item-label[data-v-3c2bd0ae] {
   font-weight: var(--font-weights-display-0);
-}.celeste-dropdown-content[data-v-8e15332e],
-div[data-v-8e15332e] .celeste-dropdown-content {
-  --dropdown-width: 100%;
+}.celeste-dropdown-content[data-v-dc6bae8b],
+div[data-v-dc6bae8b] .celeste-dropdown-content {
+  --dropdown-width: fit-content;
   --dropdown-height: 300px;
+  --dropdown-min-width: var(--radix-combobox-trigger-width, 300px);
   display: flex;
   z-index: 50;
   box-sizing: border-box;
   flex-direction: column;
   width: var(--dropdown-width);
-  min-width: 300px;
+  min-width: var(--dropdown-min-width);
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);
-  overflow: hidden;
-  transition-property: background-color, transform, opacity;
-  transition-duration: var(--animation-fast);
-  transition-timing-function: ease-out;
+  overflow: visible;
+  transform-origin: var(--radix-combobox-content-transform-origin);
+  animation-duration: var(--animation-fast);
+  animation-timing-function: ease-out;
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-16);
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-md);
   gap: var(--spacing-4);
 }
-.celeste-dropdown-content[data-state=closed][data-v-8e15332e],
-div[data-v-8e15332e] .celeste-dropdown-content[data-state=closed] {
-  transform: translateY(10px);
-  opacity: 0;
-  pointer-events: none;
+.celeste-dropdown-content[data-state=open][data-v-dc6bae8b],
+div[data-v-dc6bae8b] .celeste-dropdown-content[data-state=open] {
+  animation-name: slide-up-and-fade-dc6bae8b;
 }
-.celeste-dropdown-content[data-state=open][data-v-8e15332e],
-div[data-v-8e15332e] .celeste-dropdown-content[data-state=open] {
-  transform: translateY(0);
-  opacity: 1;
+.celeste-dropdown-content[data-state=closed][data-v-dc6bae8b],
+div[data-v-dc6bae8b] .celeste-dropdown-content[data-state=closed] {
+  animation-name: slide-down-and-fade-dc6bae8b;
 }
-div[data-v-8e15332e] .celeste-dropdown-items-viewport {
+div[data-v-dc6bae8b] .celeste-dropdown-items-viewport {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
+}
+@keyframes slide-up-and-fade-dc6bae8b {
+from {
+    transform: translateY(10px);
+    opacity: 0;
+}
+to {
+    transform: translateY(0);
+    opacity: 1;
+}
+}
+@keyframes slide-down-and-fade-dc6bae8b {
+from {
+    transform: translateY(0);
+    opacity: 1;
+}
+to {
+    transform: translateY(10px);
+    opacity: 0;
+}
 }.celeste-dropdown-separator[data-v-987226c9] {
   width: 100%;
   height: 1px;
@@ -2108,21 +2126,21 @@ div[data-v-8e15332e] .celeste-dropdown-items-viewport {
   height: 40px;
   padding: var(--spacing-10);
   border-radius: var(--radius-10);
-}[data-v-268c7202] {
+}[data-v-cad50435] {
   box-sizing: border-box;
 }
-.celeste-dropdown-anchor-trigger-prefix[data-v-268c7202] {
+.celeste-dropdown-anchor-trigger-prefix[data-v-cad50435] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger-prefix-selected[data-v-268c7202] {
+.celeste-dropdown-anchor-trigger-prefix-selected[data-v-cad50435] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-item-image[data-v-268c7202],
-.selected-dropdown-image[data-v-268c7202] {
+.celeste-dropdown-item-image[data-v-cad50435],
+.selected-dropdown-image[data-v-cad50435] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2132,7 +2150,7 @@ div[data-v-8e15332e] .celeste-dropdown-items-viewport {
      object-fit: cover;
   border-radius: var(--radius-full);
 }
-.celeste-dropdown-input[data-v-268c7202] {
+.celeste-dropdown-input[data-v-cad50435] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -2143,7 +2161,7 @@ div[data-v-8e15332e] .celeste-dropdown-items-viewport {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-dropdown-trigger[data-v-268c7202] {
+.celeste-dropdown-trigger[data-v-cad50435] {
   display: flex;
   place-items: center center;
   transition-property: transform;
@@ -2154,7 +2172,7 @@ div[data-v-8e15332e] .celeste-dropdown-items-viewport {
   color: var(--color-icon-soft-400);
   cursor: pointer;
 }
-.celeste-dropdown-inner-input[data-v-268c7202] {
+.celeste-dropdown-inner-input[data-v-cad50435] {
   display: flex;
   position: sticky;
   z-index: 50;
@@ -2163,7 +2181,7 @@ div[data-v-8e15332e] .celeste-dropdown-items-viewport {
   gap: var(--spacing-4);
   background-color: var(--color-bg-white-0);
 }
-.celeste-dropdown-inner-input.sr-only[data-v-268c7202] {
+.celeste-dropdown-inner-input.sr-only[data-v-cad50435] {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/cjs/combobox-list.js

@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     dismissable: { type: Boolean },
     side: {},
     sideOffset: { default: 4 },
-    align: { default: "center" },
+    align: { default: "start" },
     alignOffset: {},
     avoidCollisions: { type: Boolean },
     collisionBoundary: {},
@@ -40,7 +40,6 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
       return Mo.openBlock(), Mo.createBlock(Mo.unref(index.nm), null, {
         default: Mo.withCtx(() => [
           Mo.createVNode(Mo.unref(index.Xv), Mo.mergeProps(Mo.unref(forwarded), {
-            "force-mount": "",
             class: Mo.unref(clsx.clsx)("celeste-dropdown-content", props.class)
           }), {
             default: Mo.withCtx(() => [
@@ -59,5 +58,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const ComboboxList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-8e15332e"]]);
+const ComboboxList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-dc6bae8b"]]);
 module.exports = ComboboxList;

package/dist/cjs/combobox.js

@@ -27,13 +27,11 @@ const _hoisted_6 = {
   key: 2,
   class: "celeste-dropdown-input"
 };
-const _hoisted_7 = { key: 0 };
-const _hoisted_8 = { key: 1 };
-const _hoisted_9 = {
-  key: 2,
+const _hoisted_7 = {
+  key: 0,
   class: "celeste-input-badge"
 };
-const _hoisted_10 = ["src"];
+const _hoisted_8 = ["src"];
 const __default__ = {
   inheritAttrs: false
 };
@@ -43,6 +41,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
   props: {
     options: {},
     valueBy: {},
+    labelBy: {},
     placeholder: { default: "Select" },
     type: {},
     size: { default: "md" },
@@ -76,6 +75,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
         filterFunction: filterFunction2,
         options,
         valueBy,
+        labelBy,
         placeholder,
         type,
         size,
@@ -89,6 +89,16 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     });
     const forwarded = index.xe(delegatedProps, emits);
     const model = Mo.computed(() => props.modelValue);
+    const label = Mo.computed(() => {
+      if (!model.value)
+        return props.placeholder;
+      if (Array.isArray(model.value)) {
+        if (model.value.length === 0)
+          return props.placeholder;
+        return model.value.map((item) => props.labelBy ? item[props.labelBy] : item.label).join(", ");
+      }
+      return props.labelBy ? model.value[props.labelBy] : model.value.label;
+    });
     function isSelected(value) {
       if (!Array.isArray(props.modelValue) || !props.multiple)
         return;
@@ -104,13 +114,13 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     }
     function filterFunction(list, searchTerm) {
       return list.filter((option) => {
-        const { value, label } = option;
-        if (!value || !label)
+        const { value, label: label2 } = option;
+        if (!value || !label2)
           return false;
         if (props.valueBy && typeof value === "object" && props.valueBy in value) {
-          return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+          return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase()) || label2.toString().toLowerCase().includes(searchTerm.toLowerCase());
         }
-        return value.toString().toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+        return value.toString().toLowerCase().includes(searchTerm.toLowerCase()) || label2.toString().toLowerCase().includes(searchTerm.toLowerCase());
       });
     }
     const mergedBadgeProps = Mo.computed(() => ({
@@ -118,7 +128,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
       disabled: props.disabled
     }));
     return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(comboboxRoot_vue_vue_type_script_setup_true_lang._sfc_main, Mo.mergeProps(Mo.unref(forwarded), { "filter-function": filterFunction }), {
+      return Mo.openBlock(), Mo.createBlock(comboboxRoot_vue_vue_type_script_setup_true_lang._sfc_main, Mo.mergeProps({ class: "shrink-0" }, Mo.unref(forwarded), { "filter-function": filterFunction }), {
         default: Mo.withCtx(() => [
           Mo.createVNode(comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main, { "as-child": "" }, {
             default: Mo.withCtx(() => [
@@ -149,8 +159,8 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
                     Mo.renderSlot(_ctx.$slots, "prefix", { class: "celeste-dropdown-anchor-trigger-prefix-default" }, void 0, true)
                   ])) : Mo.createCommentVNode("", true),
                   _ctx.type !== "inline" ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_6, [
-                    _ctx.multiple ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_7, Mo.toDisplayString(_ctx.placeholder), 1)) : (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_8, Mo.toDisplayString(model.value && !Array.isArray(model.value) ? model.value.label : props.placeholder), 1)),
-                    mergedBadgeProps.value && _ctx.badgeProps ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_9, [
+                    Mo.createElementVNode("span", null, Mo.toDisplayString(label.value), 1),
+                    mergedBadgeProps.value && _ctx.badgeProps ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_7, [
                       Mo.createVNode(badge, Mo.normalizeProps(Mo.guardReactiveProps(mergedBadgeProps.value)), null, 16)
                     ])) : Mo.createCommentVNode("", true)
                   ])) : Mo.createCommentVNode("", true),
@@ -202,7 +212,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
                           src: option.image,
                           alt: "option",
                           class: "celeste-dropdown-item-image"
-                        }, null, 8, _hoisted_10)) : Mo.createCommentVNode("", true)
+                        }, null, 8, _hoisted_8)) : Mo.createCommentVNode("", true)
                       ]),
                       _: 2
                     }, 1032, ["label", "sublabel", "description", "checkbox", "value", "selected"]);
@@ -219,5 +229,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-268c7202"]]);
+const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-cad50435"]]);
 module.exports = combobox;

package/dist/components/combobox/combobox.d.ts

@@ -4,6 +4,7 @@ import { ComboboxItemPropsType } from './combobox-item';
 export interface ComboboxPropsType extends ComboboxRootProps {
     options: ComboboxItemPropsType[];
     valueBy?: string;
+    labelBy?: string;
     placeholder?: string;
     type?: 'normal' | 'compact' | 'inline' | 'compact-input';
     size?: 'xs' | 'sm' | 'md';

package/dist/es/combobox-list.js

@@ -11,7 +11,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dismissable: { type: Boolean },
     side: {},
     sideOffset: { default: 4 },
-    align: { default: "center" },
+    align: { default: "start" },
     alignOffset: {},
     avoidCollisions: { type: Boolean },
     collisionBoundary: {},
@@ -39,7 +39,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(nm), null, {
         default: withCtx(() => [
           createVNode(unref(Xv), mergeProps(unref(forwarded), {
-            "force-mount": "",
             class: unref(clsx)("celeste-dropdown-content", props.class)
           }), {
             default: withCtx(() => [
@@ -58,7 +57,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ComboboxList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8e15332e"]]);
+const ComboboxList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dc6bae8b"]]);
 export {
   ComboboxList as default
 };

package/dist/es/combobox.js

@@ -26,13 +26,11 @@ const _hoisted_6 = {
   key: 2,
   class: "celeste-dropdown-input"
 };
-const _hoisted_7 = { key: 0 };
-const _hoisted_8 = { key: 1 };
-const _hoisted_9 = {
-  key: 2,
+const _hoisted_7 = {
+  key: 0,
   class: "celeste-input-badge"
 };
-const _hoisted_10 = ["src"];
+const _hoisted_8 = ["src"];
 const __default__ = {
   inheritAttrs: false
 };
@@ -42,6 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     options: {},
     valueBy: {},
+    labelBy: {},
     placeholder: { default: "Select" },
     type: {},
     size: { default: "md" },
@@ -75,6 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         filterFunction: filterFunction2,
         options,
         valueBy,
+        labelBy,
         placeholder,
         type,
         size,
@@ -88,6 +88,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const forwarded = xe(delegatedProps, emits);
     const model = computed(() => props.modelValue);
+    const label = computed(() => {
+      if (!model.value)
+        return props.placeholder;
+      if (Array.isArray(model.value)) {
+        if (model.value.length === 0)
+          return props.placeholder;
+        return model.value.map((item) => props.labelBy ? item[props.labelBy] : item.label).join(", ");
+      }
+      return props.labelBy ? model.value[props.labelBy] : model.value.label;
+    });
     function isSelected(value) {
       if (!Array.isArray(props.modelValue) || !props.multiple)
         return;
@@ -103,13 +113,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function filterFunction(list, searchTerm) {
       return list.filter((option) => {
-        const { value, label } = option;
-        if (!value || !label)
+        const { value, label: label2 } = option;
+        if (!value || !label2)
           return false;
         if (props.valueBy && typeof value === "object" && props.valueBy in value) {
-          return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+          return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase()) || label2.toString().toLowerCase().includes(searchTerm.toLowerCase());
         }
-        return value.toString().toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+        return value.toString().toLowerCase().includes(searchTerm.toLowerCase()) || label2.toString().toLowerCase().includes(searchTerm.toLowerCase());
       });
     }
     const mergedBadgeProps = computed(() => ({
@@ -117,7 +127,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       disabled: props.disabled
     }));
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(forwarded), { "filter-function": filterFunction }), {
+      return openBlock(), createBlock(_sfc_main$1, mergeProps({ class: "shrink-0" }, unref(forwarded), { "filter-function": filterFunction }), {
         default: withCtx(() => [
           createVNode(_sfc_main$2, { "as-child": "" }, {
             default: withCtx(() => [
@@ -148,8 +158,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     renderSlot(_ctx.$slots, "prefix", { class: "celeste-dropdown-anchor-trigger-prefix-default" }, void 0, true)
                   ])) : createCommentVNode("", true),
                   _ctx.type !== "inline" ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                    _ctx.multiple ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(_ctx.placeholder), 1)) : (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(model.value && !Array.isArray(model.value) ? model.value.label : props.placeholder), 1)),
-                    mergedBadgeProps.value && _ctx.badgeProps ? (openBlock(), createElementBlock("span", _hoisted_9, [
+                    createElementVNode("span", null, toDisplayString(label.value), 1),
+                    mergedBadgeProps.value && _ctx.badgeProps ? (openBlock(), createElementBlock("span", _hoisted_7, [
                       createVNode(Badge, normalizeProps(guardReactiveProps(mergedBadgeProps.value)), null, 16)
                     ])) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true),
@@ -201,7 +211,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           src: option.image,
                           alt: "option",
                           class: "celeste-dropdown-item-image"
-                        }, null, 8, _hoisted_10)) : createCommentVNode("", true)
+                        }, null, 8, _hoisted_8)) : createCommentVNode("", true)
                       ]),
                       _: 2
                     }, 1032, ["label", "sublabel", "description", "checkbox", "value", "selected"]);
@@ -218,7 +228,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-268c7202"]]);
+const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cad50435"]]);
 export {
   combobox as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.23",
+  "version": "0.6.24",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -32,8 +32,8 @@
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
-    "@youcan/celeste-icons": "0.6.23",
-    "@youcan/celeste-tokens": "0.6.23"
+    "@youcan/celeste-icons": "0.6.24",
+    "@youcan/celeste-tokens": "0.6.24"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

package/src/components/combobox/combobox-list.vue

@@ -6,10 +6,9 @@ import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   position: 'popper',
-  align: 'center',
+  align: 'start',
   sideOffset: 4,
 });
-
 const emits = defineEmits<ComboboxContentEmits>();
 
 const delegatedProps = computed(() => {
@@ -25,7 +24,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   <ComboboxPortal>
     <ComboboxContent
       v-bind="forwarded"
-      force-mount
       :class="clsx('celeste-dropdown-content', props.class)"
     >
       <ComboboxViewport class="celeste-dropdown-items-viewport">
@@ -38,43 +36,65 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style lang="scss" scoped>
 .celeste-dropdown-content,
 div:deep(.celeste-dropdown-content) {
-  --dropdown-width: 100%;
+  --dropdown-width: fit-content;
   --dropdown-height: 300px;
+  --dropdown-min-width: var(--radix-combobox-trigger-width, 300px);
 
   display: flex;
   z-index: 50;
   box-sizing: border-box;
   flex-direction: column;
   width: var(--dropdown-width);
-  min-width: 300px;
+  min-width: var(--dropdown-min-width);
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);
-  overflow: hidden;
-  transition-property: background-color, transform, opacity;
-  transition-duration: var(--animation-fast);
-  transition-timing-function: ease-out;
+  overflow: visible;
+  transform-origin: var(--radix-combobox-content-transform-origin);
+  animation-duration: var(--animation-fast);
+  animation-timing-function: ease-out;
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-16);
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-md);
   gap: var(--spacing-4);
 
+  &[data-state='open'] {
+    animation-name: slide-up-and-fade;
+  }
+
   &[data-state='closed'] {
+    animation-name: slide-down-and-fade;
+  }
+}
+
+div:deep(.celeste-dropdown-items-viewport) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+@keyframes slide-up-and-fade {
+  from {
     transform: translateY(10px);
     opacity: 0;
-    pointer-events: none;
   }
 
-  &[data-state='open'] {
+  to {
     transform: translateY(0);
     opacity: 1;
   }
 }
 
-div:deep(.celeste-dropdown-items-viewport) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
+@keyframes slide-down-and-fade {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(10px);
+    opacity: 0;
+  }
 }
 </style>

package/src/components/combobox/combobox.vue

@@ -28,6 +28,7 @@ const delegatedProps = computed(() => {
     filterFunction,
     options,
     valueBy,
+    labelBy,
     placeholder,
     type,
     size,
@@ -45,6 +46,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const model = computed(() => props.modelValue as ComboboxItemPropsType[] | ComboboxItemPropsType | undefined);
 
+const label = computed(() => {
+  if (!model.value)
+    return props.placeholder;
+
+  if (Array.isArray(model.value)) {
+    if (model.value.length === 0)
+      return props.placeholder;
+
+    return model.value
+      .map(item => props.labelBy
+        ? item[props.labelBy as keyof ComboboxItemPropsType]
+        : item.label)
+      .join(', ');
+  }
+
+  return props.labelBy ? model.value[props.labelBy as keyof ComboboxItemPropsType] : model.value.label;
+});
+
 function isSelected(value: ComboboxItemPropsType['value']): boolean | undefined {
   if (!Array.isArray(props.modelValue) || !props.multiple)
     return;
@@ -96,6 +115,7 @@ const mergedBadgeProps = computed(() => ({
 export interface ComboboxPropsType extends ComboboxRootProps {
   options: ComboboxItemPropsType[];
   valueBy?: string;
+  labelBy?: string;
   placeholder?: string;
   type?: 'normal' | 'compact' | 'inline' | 'compact-input';
   size?: 'xs' | 'sm' | 'md';
@@ -112,6 +132,7 @@ export default {
 
 <template>
   <ComboboxRoot
+    class="shrink-0"
     v-bind="forwarded"
     :filter-function="filterFunction"
   >
@@ -148,9 +169,8 @@ export default {
           v-if="type !== 'inline'"
           class="celeste-dropdown-input"
         >
-          <span v-if="multiple">{{ placeholder }}</span>
-          <span v-else>
-            {{ model && !Array.isArray(model) ? model.label : props.placeholder }}
+          <span>
+            {{ label }}
           </span>
           <span v-if="mergedBadgeProps && badgeProps" class="celeste-input-badge">
             <Badge v-bind="mergedBadgeProps" />