@youcan/celeste 0.6.22 → 0.6.24

package/dist/celeste.css

@@ -1972,7 +1972,7 @@ to {
   width: 100%;
   height: 1px;
   background-color: var(--color-stroke-soft-200);
-}.celeste-dropdown-anchor-trigger[data-v-1d007d84] {
+}.celeste-dropdown-anchor-trigger[data-v-43f9e53e] {
   transition-property: background-color, transform, opacity;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
@@ -1984,29 +1984,29 @@ to {
   gap: var(--spacing-8);
   cursor: pointer;
 }
-.celeste-dropdown-anchor-trigger[data-v-1d007d84] i {
+.celeste-dropdown-anchor-trigger[data-v-43f9e53e] i {
   width: 20px;
   height: 20px;
   color: var(--color-icon-soft-400);
 }
-.celeste-dropdown-anchor-trigger[data-v-1d007d84]:hover {
+.celeste-dropdown-anchor-trigger[data-v-43f9e53e]:hover {
   background: var(--color-bg-weak-50);
 }
-.celeste-dropdown-anchor-trigger[data-v-1d007d84]:focus, .celeste-dropdown-anchor-trigger[data-v-1d007d84]:focus-visible, .celeste-dropdown-anchor-trigger[data-v-1d007d84]:focus-within {
+.celeste-dropdown-anchor-trigger[data-v-43f9e53e]:focus, .celeste-dropdown-anchor-trigger[data-v-43f9e53e]:focus-visible, .celeste-dropdown-anchor-trigger[data-v-43f9e53e]:focus-within {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix[data-v-43f9e53e] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix-selected[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger .celeste-dropdown-anchor-trigger-prefix-selected[data-v-43f9e53e] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger .celeste-dropdown-input[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger .celeste-dropdown-input[data-v-43f9e53e] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -2017,7 +2017,7 @@ to {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-dropdown-anchor-trigger .celeste-dropdown-trigger[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger .celeste-dropdown-trigger[data-v-43f9e53e] {
   transition-property: background-color, transform, opacity;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
@@ -2028,27 +2028,27 @@ to {
   color: var(--color-icon-soft-400);
   cursor: pointer;
 }
-.celeste-dropdown-anchor-trigger[data-state=open][data-v-1d007d84]:not([data-disabled]) .celeste-dropdown-trigger {
+.celeste-dropdown-anchor-trigger[data-state=open][data-v-43f9e53e]:not([data-disabled]) .celeste-dropdown-trigger {
   transform: rotate(180deg);
 }
-.celeste-dropdown-anchor-trigger-error[data-v-1d007d84]:not(.celeste-dropdown-anchor-trigger-type-compact) {
+.celeste-dropdown-anchor-trigger-error[data-v-43f9e53e]:not(.celeste-dropdown-anchor-trigger-type-compact) {
   border: 1px solid var(--color-state-error-base);
 }
-.celeste-dropdown-anchor-trigger[data-disabled][data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger[data-disabled][data-v-43f9e53e] {
   background: var(--color-bg-weak-50);
   color: var(--color-text-disabled-300);
   cursor: not-allowed;
 }
-.celeste-dropdown-anchor-trigger[data-disabled] .celeste-dropdown-input[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger[data-disabled] .celeste-dropdown-input[data-v-43f9e53e] {
   color: var(--color-text-disabled-300);
   cursor: not-allowed;
 }
-.celeste-dropdown-anchor-trigger[data-disabled][data-v-1d007d84] i,
-.celeste-dropdown-anchor-trigger[data-disabled] .celeste-dropdown-trigger[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger[data-disabled][data-v-43f9e53e] i,
+.celeste-dropdown-anchor-trigger[data-disabled] .celeste-dropdown-trigger[data-v-43f9e53e] {
   color: var(--color-icon-disabled-300);
   cursor: not-allowed;
 }
-.celeste-dropdown-anchor-trigger[data-state=open][data-v-1d007d84]:not([data-disabled],
+.celeste-dropdown-anchor-trigger[data-state=open][data-v-43f9e53e]:not([data-disabled],
 .celeste-dropdown-anchor-trigger-type-compact,
 .celeste-dropdown-anchor-trigger-type-compact-input) {
   border: 1px solid var(--color-stroke-strong-950);
@@ -2057,90 +2057,90 @@ to {
 }
 .celeste-dropdown-anchor-trigger[data-state=open]:not([data-disabled],
 .celeste-dropdown-anchor-trigger-type-compact,
-.celeste-dropdown-anchor-trigger-type-compact-input) .celeste-dropdown-input[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger-type-compact-input) .celeste-dropdown-input[data-v-43f9e53e] {
   color: var(--color-text-strong-950);
 }
 .celeste-dropdown-anchor-trigger[data-state=open]:not([data-disabled],
 .celeste-dropdown-anchor-trigger-type-compact,
-.celeste-dropdown-anchor-trigger-type-compact-input) i[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger-type-compact-input) i[data-v-43f9e53e] {
   color: var(--color-icon-strong-950);
 }
-.celeste-dropdown-anchor-trigger-filled[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger-filled[data-v-43f9e53e] {
   color: var(--color-text-strong-950);
 }
-.celeste-dropdown-anchor-trigger-filled[data-v-1d007d84] .celeste-dropdown-input {
+.celeste-dropdown-anchor-trigger-filled[data-v-43f9e53e] .celeste-dropdown-input {
   color: var(--color-text-strong-950);
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-43f9e53e] {
   width: -moz-fit-content;
   width: fit-content;
   border: none;
   background: transparent;
   box-shadow: none;
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-1d007d84] .celeste-dropdown-input {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-43f9e53e] .celeste-dropdown-input {
   flex: inherit;
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact:hover:not([data-disabled]) .celeste-dropdown-input[data-v-1d007d84], .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-state=open]:not([data-disabled]) .celeste-dropdown-input[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact:hover:not([data-disabled]) .celeste-dropdown-input[data-v-43f9e53e], .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-state=open]:not([data-disabled]) .celeste-dropdown-input[data-v-43f9e53e] {
   color: var(--color-text-strong-950);
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-1d007d84]:hover:not([data-disabled]) i, .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-state=open][data-v-1d007d84]:not([data-disabled]) i {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-v-43f9e53e]:hover:not([data-disabled]) i, .celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact[data-state=open][data-v-43f9e53e]:not([data-disabled]) i {
   color: var(--color-icon-strong-950);
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-43f9e53e] {
   width: -moz-fit-content;
   width: fit-content;
   border: none;
   border-radius: var(--radius-0);
   box-shadow: none;
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-1d007d84] .celeste-dropdown-input {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-v-43f9e53e] .celeste-dropdown-input {
   flex: inherit;
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-state=open][data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-compact-input[data-state=open][data-v-43f9e53e] {
   box-shadow: none;
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-43f9e53e] {
   width: -moz-fit-content;
   width: fit-content;
   gap: var(--spacing-4);
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-1d007d84] .celeste-dropdown-input {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-inline[data-v-43f9e53e] .celeste-dropdown-input {
   flex: inherit;
 }
-.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-normal[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger.celeste-dropdown-anchor-trigger-type-normal[data-v-43f9e53e] {
   width: 100%;
   min-width: 300px;
 }
-.celeste-dropdown-anchor-trigger-size-xs[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger-size-xs[data-v-43f9e53e] {
   height: 32px;
   padding: var(--spacing-6);
   border-radius: var(--radius-8);
 }
-.celeste-dropdown-anchor-trigger-size-sm[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger-size-sm[data-v-43f9e53e] {
   height: 36px;
   padding: var(--spacing-8);
   border-radius: var(--radius-8);
 }
-.celeste-dropdown-anchor-trigger-size-md[data-v-1d007d84] {
+.celeste-dropdown-anchor-trigger-size-md[data-v-43f9e53e] {
   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;
@@ -2150,7 +2150,7 @@ to {
      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;
@@ -2161,7 +2161,7 @@ to {
   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;
@@ -2172,7 +2172,7 @@ to {
   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;
@@ -2181,7 +2181,7 @@ to {
   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-trigger.js

@@ -24,6 +24,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     const forwarded = index.At(delegatedProps);
     return (_ctx, _cache) => {
       return Mo.openBlock(), Mo.createBlock(Mo.unref(index.Uv), Mo.mergeProps(Mo.unref(forwarded), {
+        type: "button",
         tabindex: "0",
         class: Mo.unref(clsx.clsx)(
           "celeste-dropdown-anchor-trigger",
@@ -42,5 +43,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const ComboboxTrigger = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-1d007d84"]]);
+const ComboboxTrigger = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-43f9e53e"]]);
 module.exports = ComboboxTrigger;

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-trigger.js

@@ -23,6 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const forwarded = At(delegatedProps);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Uv), mergeProps(unref(forwarded), {
+        type: "button",
         tabindex: "0",
         class: unref(clsx)(
           "celeste-dropdown-anchor-trigger",
@@ -41,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ComboboxTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1d007d84"]]);
+const ComboboxTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43f9e53e"]]);
 export {
   ComboboxTrigger 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.22",
+  "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.22",
-    "@youcan/celeste-tokens": "0.6.22"
+    "@youcan/celeste-icons": "0.6.24",
+    "@youcan/celeste-tokens": "0.6.24"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

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

@@ -30,6 +30,7 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
 <template>
   <ComboboxTrigger
     v-bind="forwarded"
+    type="button"
     tabindex="0"
     :class="clsx(
       'celeste-dropdown-anchor-trigger',

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" />