@youcan/celeste 0.6.93 → 0.6.95

package/dist/celeste.css

@@ -2704,13 +2704,13 @@ to {
 .celeste-dropdown-items-group[data-v-66b5c9e4] [data-radix-vue-combobox-item] {
   width: auto;
   height: auto;
-}.celeste-dropdown-input[data-v-bd59a65e] {
+}.celeste-dropdown-input[data-v-32b6a3f8] {
   display: flex;
   align-items: center;
   gap: var(--spacing-4);
   background-color: var(--color-bg-white-0);
 }
-.celeste-dropdown-input[data-v-bd59a65e] .celeste-text-input-wrapper {
+.celeste-dropdown-input[data-v-32b6a3f8] .celeste-text-input-wrapper {
   width: 100%;
   border: none;
   border-radius: var(--radius-8) var(--radius-8) 0 0;
@@ -2796,11 +2796,11 @@ 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-ac4c9fe6],
-div[data-v-ac4c9fe6] .celeste-dropdown-content {
-  --dropdown-width: var(--radix-popper-anchor-width);
+}.celeste-dropdown-content[data-v-38838139],
+div[data-v-38838139] .celeste-dropdown-content {
   --dropdown-height: 300px;
   --dropdown-min-width: var(--radix-combobox-trigger-width, 300px);
+  --dropdown-width: max(var(--radix-popper-anchor-width), 300px);
   display: flex;
   z-index: 50;
   box-sizing: border-box;
@@ -2820,20 +2820,20 @@ div[data-v-ac4c9fe6] .celeste-dropdown-content {
   box-shadow: var(--shadow-regular-md);
   gap: var(--spacing-4);
 }
-.celeste-dropdown-content[data-state=open][data-v-ac4c9fe6],
-div[data-v-ac4c9fe6] .celeste-dropdown-content[data-state=open] {
-  animation-name: slide-up-and-fade-ac4c9fe6;
+.celeste-dropdown-content[data-state=open][data-v-38838139],
+div[data-v-38838139] .celeste-dropdown-content[data-state=open] {
+  animation-name: slide-up-and-fade-38838139;
 }
-.celeste-dropdown-content[data-state=closed][data-v-ac4c9fe6],
-div[data-v-ac4c9fe6] .celeste-dropdown-content[data-state=closed] {
-  animation-name: slide-down-and-fade-ac4c9fe6;
+.celeste-dropdown-content[data-state=closed][data-v-38838139],
+div[data-v-38838139] .celeste-dropdown-content[data-state=closed] {
+  animation-name: slide-down-and-fade-38838139;
 }
-div[data-v-ac4c9fe6] .celeste-dropdown-items-viewport {
+div[data-v-38838139] .celeste-dropdown-items-viewport {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
 }
-@keyframes slide-up-and-fade-ac4c9fe6 {
+@keyframes slide-up-and-fade-38838139 {
 from {
     transform: translateY(10px);
     opacity: 0;
@@ -2843,7 +2843,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes slide-down-and-fade-ac4c9fe6 {
+@keyframes slide-down-and-fade-38838139 {
 from {
     transform: translateY(0);
     opacity: 1;
@@ -3012,21 +3012,21 @@ to {
   height: 40px;
   padding: var(--spacing-10);
   border-radius: var(--radius-10);
-}[data-v-e3715243] {
+}[data-v-7baed4e9] {
   box-sizing: border-box;
 }
-.celeste-dropdown-anchor-trigger-prefix[data-v-e3715243] {
+.celeste-dropdown-anchor-trigger-prefix[data-v-7baed4e9] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger-prefix-selected[data-v-e3715243] {
+.celeste-dropdown-anchor-trigger-prefix-selected[data-v-7baed4e9] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-item-image[data-v-e3715243],
-.selected-dropdown-image[data-v-e3715243] {
+.celeste-dropdown-item-image[data-v-7baed4e9],
+.selected-dropdown-image[data-v-7baed4e9] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3036,18 +3036,24 @@ to {
      object-fit: cover;
   border-radius: var(--radius-full);
 }
-.celeste-dropdown-input[data-v-e3715243] {
+.celeste-dropdown-trigger-label[data-v-7baed4e9] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
   justify-content: space-between;
+  width: 0;
   background: inherit;
   color: var(--color-text-sub-600);
   font: var(--paragraph-sm);
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-dropdown-trigger[data-v-e3715243] {
+.celeste-dropdown-trigger-label span[data-v-7baed4e9] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.celeste-dropdown-trigger[data-v-7baed4e9] {
   display: flex;
   place-items: center center;
   transition-property: transform;
@@ -3058,7 +3064,7 @@ to {
   color: var(--color-icon-soft-400);
   cursor: pointer;
 }
-.celeste-dropdown-inner-input[data-v-e3715243] {
+.celeste-dropdown-inner-input[data-v-7baed4e9] {
   display: flex;
   position: sticky;
   z-index: 50;
@@ -3067,7 +3073,7 @@ to {
   gap: var(--spacing-4);
   background-color: var(--color-bg-white-0);
 }
-.celeste-dropdown-inner-input.sr-only[data-v-e3715243] {
+.celeste-dropdown-inner-input.sr-only[data-v-7baed4e9] {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/cjs/combobox-input.js

@@ -15,7 +15,8 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     as: {},
     class: {},
     textInputProps: {},
-    searchable: { type: Boolean }
+    searchable: { type: Boolean },
+    placeholder: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -25,14 +26,14 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     const props = __props;
     const model = No.useModel(__props, "modelValue");
     const comboboxInputProps = No.computed(() => {
-      const { class: _class, textInputProps: _textInputProps, ...rest } = props;
+      const { class: _class, textInputProps: _textInputProps, placeholder: _placeholder, ...rest } = props;
       return rest;
     });
     const textInputProps = No.computed(() => {
       return {
         type: "search",
         size: "sm",
-        placeholder: "Search",
+        placeholder: props.placeholder ?? "Search",
         ...props.textInputProps
       };
     });
@@ -60,5 +61,5 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     };
   }
 });
-const ComboboxInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-bd59a65e"]]);
+const ComboboxInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-32b6a3f8"]]);
 module.exports = ComboboxInput;

package/dist/cjs/combobox-list.js

@@ -59,5 +59,5 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     };
   }
 });
-const ComboboxList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ac4c9fe6"]]);
+const ComboboxList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-38838139"]]);
 module.exports = ComboboxList;

package/dist/cjs/combobox.js

@@ -26,7 +26,7 @@ const _hoisted_5 = {
 };
 const _hoisted_6 = {
   key: 2,
-  class: "celeste-dropdown-input"
+  class: "celeste-dropdown-trigger-label"
 };
 const _hoisted_7 = {
   key: 0,
@@ -44,6 +44,7 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     valueBy: {},
     labelBy: {},
     placeholder: { default: "Select" },
+    searchPlaceholder: {},
     type: {},
     size: { default: "md" },
     emptyLabel: {},
@@ -79,6 +80,7 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
         valueBy,
         labelBy,
         placeholder,
+        searchPlaceholder,
         type,
         size,
         emptyLabel,
@@ -180,7 +182,10 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
               No.createElementVNode("div", {
                 class: No.normalizeClass(["celeste-dropdown-inner-input", { "sr-only": !_ctx.searchable }])
               }, [
-                No.createVNode(comboboxInput, { searchable: _ctx.searchable }, null, 8, ["searchable"]),
+                No.createVNode(comboboxInput, {
+                  searchable: _ctx.searchable,
+                  placeholder: _ctx.searchPlaceholder
+                }, null, 8, ["searchable", "placeholder"]),
                 _ctx.searchable ? (No.openBlock(), No.createBlock(comboboxSeparator, { key: 0 })) : No.createCommentVNode("", true)
               ], 2),
               No.createVNode(comboboxEmpty, null, No.createSlots({ _: 2 }, [
@@ -231,5 +236,5 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     };
   }
 });
-const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-e3715243"]]);
+const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7baed4e9"]]);
 module.exports = combobox;

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

@@ -5,6 +5,7 @@ type __VLS_Props = ComboboxInputProps & {
     class?: HTMLAttributes['class'];
     textInputProps?: Partial<TextInputProps>;
     searchable?: boolean;
+    placeholder?: string;
 };
 type __VLS_PublicProps = {
     modelValue?: string | undefined;

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

@@ -6,6 +6,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
     valueBy?: string;
     labelBy?: string;
     placeholder?: string;
+    searchPlaceholder?: string;
     type?: 'normal' | 'compact' | 'inline' | 'compact-input';
     size?: 'xs' | 'sm' | 'md';
     emptyLabel?: string;

package/dist/es/combobox-input.js

@@ -14,7 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     as: {},
     class: {},
     textInputProps: {},
-    searchable: { type: Boolean }
+    searchable: { type: Boolean },
+    placeholder: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -24,14 +25,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const model = useModel(__props, "modelValue");
     const comboboxInputProps = computed(() => {
-      const { class: _class, textInputProps: _textInputProps, ...rest } = props;
+      const { class: _class, textInputProps: _textInputProps, placeholder: _placeholder, ...rest } = props;
       return rest;
     });
     const textInputProps = computed(() => {
       return {
         type: "search",
         size: "sm",
-        placeholder: "Search",
+        placeholder: props.placeholder ?? "Search",
         ...props.textInputProps
       };
     });
@@ -59,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ComboboxInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bd59a65e"]]);
+const ComboboxInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-32b6a3f8"]]);
 export {
   ComboboxInput as default
 };

package/dist/es/combobox-list.js

@@ -58,7 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ComboboxList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ac4c9fe6"]]);
+const ComboboxList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-38838139"]]);
 export {
   ComboboxList as default
 };

package/dist/es/combobox.js

@@ -25,7 +25,7 @@ const _hoisted_5 = {
 };
 const _hoisted_6 = {
   key: 2,
-  class: "celeste-dropdown-input"
+  class: "celeste-dropdown-trigger-label"
 };
 const _hoisted_7 = {
   key: 0,
@@ -43,6 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     valueBy: {},
     labelBy: {},
     placeholder: { default: "Select" },
+    searchPlaceholder: {},
     type: {},
     size: { default: "md" },
     emptyLabel: {},
@@ -78,6 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         valueBy,
         labelBy,
         placeholder,
+        searchPlaceholder,
         type,
         size,
         emptyLabel,
@@ -179,7 +181,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 class: normalizeClass(["celeste-dropdown-inner-input", { "sr-only": !_ctx.searchable }])
               }, [
-                createVNode(ComboboxInput, { searchable: _ctx.searchable }, null, 8, ["searchable"]),
+                createVNode(ComboboxInput, {
+                  searchable: _ctx.searchable,
+                  placeholder: _ctx.searchPlaceholder
+                }, null, 8, ["searchable", "placeholder"]),
                 _ctx.searchable ? (openBlock(), createBlock(ComboboxSeparator, { key: 0 })) : createCommentVNode("", true)
               ], 2),
               createVNode(ComboboxEmpty, null, createSlots({ _: 2 }, [
@@ -230,7 +235,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e3715243"]]);
+const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7baed4e9"]]);
 export {
   combobox as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.93",
+  "version": "0.6.95",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -48,8 +48,8 @@
     "radix-vue": "^1.9.17",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.6.93",
-    "@youcan/celeste-tokens": "0.6.93"
+    "@youcan/celeste-icons": "0.6.95",
+    "@youcan/celeste-tokens": "0.6.95"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

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

@@ -8,12 +8,13 @@ const props = defineProps<ComboboxInputProps & {
   class?: HTMLAttributes['class'];
   textInputProps?: Partial<TextInputProps>;
   searchable?: boolean;
+  placeholder?: string;
 }>();
 
 const model = defineModel<string | undefined>();
 
 const comboboxInputProps = computed(() => {
-  const { class: _class, textInputProps: _textInputProps, ...rest } = props;
+  const { class: _class, textInputProps: _textInputProps, placeholder: _placeholder, ...rest } = props;
   return rest;
 });
 
@@ -21,7 +22,7 @@ const textInputProps = computed((): TextInputProps => {
   return {
     type: 'search',
     size: 'sm',
-    placeholder: 'Search',
+    placeholder: props.placeholder ?? 'Search',
     ...props.textInputProps,
   };
 });

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

@@ -36,9 +36,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style lang="scss" scoped>
 .celeste-dropdown-content,
 div:deep(.celeste-dropdown-content) {
-  --dropdown-width: var(--radix-popper-anchor-width);
   --dropdown-height: 300px;
   --dropdown-min-width: var(--radix-combobox-trigger-width, 300px);
+  --dropdown-width: max(var(--radix-popper-anchor-width), 300px);
 
   display: flex;
   z-index: 50;

package/src/components/combobox/combobox.vue

@@ -30,6 +30,7 @@ const delegatedProps = computed(() => {
     valueBy,
     labelBy,
     placeholder,
+    searchPlaceholder,
     type,
     size,
     emptyLabel,
@@ -117,6 +118,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
   valueBy?: string;
   labelBy?: string;
   placeholder?: string;
+  searchPlaceholder?: string;
   type?: 'normal' | 'compact' | 'inline' | 'compact-input';
   size?: 'xs' | 'sm' | 'md';
   emptyLabel?: string;
@@ -166,7 +168,7 @@ export default {
 
         <div
           v-if="type !== 'inline'"
-          class="celeste-dropdown-input"
+          class="celeste-dropdown-trigger-label"
         >
           <span>
             {{ label }}
@@ -183,7 +185,7 @@ export default {
 
     <ComboboxList>
       <div class="celeste-dropdown-inner-input" :class="{ 'sr-only': !searchable }">
-        <ComboboxInput :searchable="searchable" />
+        <ComboboxInput :searchable="searchable" :placeholder="searchPlaceholder" />
         <ComboboxSeparator v-if="searchable" />
       </div>
 
@@ -247,16 +249,23 @@ export default {
   border-radius: var(--radius-full);
 }
 
-.celeste-dropdown-input {
+.celeste-dropdown-trigger-label {
   display: flex;
   flex: 1 0 0;
   align-items: center;
   justify-content: space-between;
+  width: 0; // A little css hack to make text-overflow ellipsis work
   background: inherit;
   color: var(--color-text-sub-600);
   font: var(--paragraph-sm);
   cursor: pointer;
   gap: var(--spacing-8);
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .celeste-dropdown-trigger {

package/src/components/combobox/stories/combobox.stories.ts

@@ -89,6 +89,7 @@ export const Searchable: Story = {
     valueBy: 'id',
     placeholder: 'Search and select',
     searchable: true,
+    searchPlaceholder: 'Search Users',
   },
 
   render: args => ({