@youcan/celeste 0.6.22 → 0.6.23

package/dist/celeste.css

@@ -1912,67 +1912,49 @@ 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-8e15332e],
+div[data-v-8e15332e] .celeste-dropdown-content {
+  --dropdown-width: 100%;
   --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: var(--dropdown-min-width);
+  min-width: 300px;
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);
-  overflow: visible;
-  transform-origin: var(--radix-combobox-content-transform-origin);
-  animation-duration: var(--animation-fast);
-  animation-timing-function: ease-out;
+  overflow: hidden;
+  transition-property: background-color, transform, opacity;
+  transition-duration: var(--animation-fast);
+  transition-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=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=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=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=open][data-v-8e15332e],
+div[data-v-8e15332e] .celeste-dropdown-content[data-state=open] {
+  transform: translateY(0);
+  opacity: 1;
 }
-div[data-v-dc6bae8b] .celeste-dropdown-items-viewport {
+div[data-v-8e15332e] .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;
   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 +1966,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 +1999,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 +2010,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,72 +2039,72 @@ 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);

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: "start" },
+    align: { default: "center" },
     alignOffset: {},
     avoidCollisions: { type: Boolean },
     collisionBoundary: {},
@@ -40,6 +40,7 @@ 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(() => [
@@ -58,5 +59,5 @@ const _sfc_main = /* @__PURE__ */ Mo.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-8e15332e"]]);
 module.exports = ComboboxList;

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/es/combobox-list.js

@@ -11,7 +11,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dismissable: { type: Boolean },
     side: {},
     sideOffset: { default: 4 },
-    align: { default: "start" },
+    align: { default: "center" },
     alignOffset: {},
     avoidCollisions: { type: Boolean },
     collisionBoundary: {},
@@ -39,6 +39,7 @@ 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(() => [
@@ -57,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-8e15332e"]]);
 export {
   ComboboxList as default
 };

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.22",
+  "version": "0.6.23",
   "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.23",
+    "@youcan/celeste-tokens": "0.6.23"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

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

@@ -6,9 +6,10 @@ import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   position: 'popper',
-  align: 'start',
+  align: 'center',
   sideOffset: 4,
 });
+
 const emits = defineEmits<ComboboxContentEmits>();
 
 const delegatedProps = computed(() => {
@@ -24,6 +25,7 @@ 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">
@@ -36,65 +38,43 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style lang="scss" scoped>
 .celeste-dropdown-content,
 div:deep(.celeste-dropdown-content) {
-  --dropdown-width: fit-content;
+  --dropdown-width: 100%;
   --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: var(--dropdown-min-width);
+  min-width: 300px;
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);
-  overflow: visible;
-  transform-origin: var(--radix-combobox-content-transform-origin);
-  animation-duration: var(--animation-fast);
-  animation-timing-function: ease-out;
+  overflow: hidden;
+  transition-property: background-color, transform, opacity;
+  transition-duration: var(--animation-fast);
+  transition-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;
   }
 
-  to {
+  &[data-state='open'] {
     transform: translateY(0);
     opacity: 1;
   }
 }
 
-@keyframes slide-down-and-fade {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateY(10px);
-    opacity: 0;
-  }
+div:deep(.celeste-dropdown-items-viewport) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
 }
 </style>

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',