@youcan/celeste 0.6.92 → 0.6.94

package/dist/celeste.css

@@ -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-dc6bae8b],
-div[data-v-dc6bae8b] .celeste-dropdown-content {
-  --dropdown-width: fit-content;
+}.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-dc6bae8b] .celeste-dropdown-content {
   box-shadow: var(--shadow-regular-md);
   gap: var(--spacing-4);
 }
-.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-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-dc6bae8b],
-div[data-v-dc6bae8b] .celeste-dropdown-content[data-state=closed] {
-  animation-name: slide-down-and-fade-dc6bae8b;
+.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-dc6bae8b] .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-dc6bae8b {
+@keyframes slide-up-and-fade-38838139 {
 from {
     transform: translateY(10px);
     opacity: 0;
@@ -2843,7 +2843,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes slide-down-and-fade-dc6bae8b {
+@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-71e04f0f] {
   box-sizing: border-box;
 }
-.celeste-dropdown-anchor-trigger-prefix[data-v-e3715243] {
+.celeste-dropdown-anchor-trigger-prefix[data-v-71e04f0f] {
   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-71e04f0f] {
   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-71e04f0f],
+.selected-dropdown-image[data-v-71e04f0f] {
   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-71e04f0f] {
   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-71e04f0f] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.celeste-dropdown-trigger[data-v-71e04f0f] {
   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-71e04f0f] {
   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-71e04f0f] {
   position: absolute;
   width: 1px;
   height: 1px;

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-dc6bae8b"]]);
+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,
@@ -231,5 +231,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-71e04f0f"]]);
 module.exports = combobox;

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-dc6bae8b"]]);
+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,
@@ -230,7 +230,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-71e04f0f"]]);
 export {
   combobox as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.92",
+  "version": "0.6.94",
   "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.92",
-    "@youcan/celeste-tokens": "0.6.92"
+    "@youcan/celeste-icons": "0.6.94",
+    "@youcan/celeste-tokens": "0.6.94"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

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: fit-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;

package/src/components/combobox/combobox.vue

@@ -166,7 +166,7 @@ export default {
 
         <div
           v-if="type !== 'inline'"
-          class="celeste-dropdown-input"
+          class="celeste-dropdown-trigger-label"
         >
           <span>
             {{ label }}
@@ -247,16 +247,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 {