@youcan/celeste 0.6.66 → 0.6.68

package/dist/celeste.css

@@ -3205,17 +3205,18 @@ to {
   display: flex;
   align-items: center;
   gap: var(--spacing-10);
-}.celeste-digit-input-slot[data-v-86327944] {
+}.celeste-digit-input-slot[data-v-a9112549] {
   --celeste-digit-input-border-color: var(--color-stroke-soft-200);
   --celeste-digit-input-drop-shadow: var(--shadow-regular-xs);
   --celeste-digit-input-placeholder-color: var(--color-text-soft-400);
   display: flex;
   box-sizing: border-box;
   flex-grow: 1;
+  flex-shrink: 1;
   align-items: center;
   justify-content: center;
-  width: 64px;
-  height: 64px;
+  min-width: 40px;
+  max-width: 64px;
   padding: 0;
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--celeste-digit-input-border-color);
@@ -3227,22 +3228,23 @@ to {
   color: var(--color-text-strong-950);
   font: var(--title-h5-title);
   text-align: center;
+  aspect-ratio: 1;
 }
-.celeste-digit-input-slot[data-v-86327944]::-moz-placeholder {
+.celeste-digit-input-slot[data-v-a9112549]::-moz-placeholder {
   -moz-transition: color var(--animation-fast) ease-out;
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-digit-input-placeholder-color);
 }
-.celeste-digit-input-slot[data-v-86327944]::placeholder {
+.celeste-digit-input-slot[data-v-a9112549]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-digit-input-placeholder-color);
 }
-.celeste-digit-input-slot[data-v-86327944]:focus {
+.celeste-digit-input-slot[data-v-a9112549]:focus {
   --celeste-digit-input-border-color: var(--color-stroke-strong-950);
   --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
   outline-color: var(--color-stroke-soft-200);
 }
-.celeste-digit-input-slot[data-v-86327944]:disabled {
+.celeste-digit-input-slot[data-v-a9112549]:disabled {
   --celeste-digit-input-border-color: transparent;
   --celeste-digit-input-drop-shadow: none;
   --celeste-digit-input-placeholder-color: var(--color-text-disabled-300);
@@ -3251,26 +3253,27 @@ to {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-digit-input-slot[data-v-86327944]:disabled::-moz-placeholder {
+.celeste-digit-input-slot[data-v-a9112549]:disabled::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-digit-input-slot[data-v-86327944]:disabled::placeholder {
+.celeste-digit-input-slot[data-v-a9112549]:disabled::placeholder {
   color: currentcolor;
 }
-[data-error=true] .celeste-digit-input-slot[data-v-86327944] {
+[data-error=true] .celeste-digit-input-slot[data-v-a9112549] {
   --celeste-digit-input-border-color: var(--color-state-error-base);
 }
-[data-error=true] .celeste-digit-input-slot[data-v-86327944]:focus {
+[data-error=true] .celeste-digit-input-slot[data-v-a9112549]:focus {
   --celeste-digit-input-border-color: var(--color-state-error-base);
   outline-color: var(--color-state-error-lighter);
 }
-.celeste-digit-input-slot[data-v-86327944]:hover:not(:focus, :disabled) {
+.celeste-digit-input-slot[data-v-a9112549]:hover:not(:focus, :disabled) {
   --celeste-digit-input-border-color: transparent;
   --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
   background-color: var(--color-bg-weak-50);
-}.celeste-digit-input[data-v-be93d7bf] {
+}.celeste-digit-input[data-v-86bf03a4] {
   display: flex;
   align-items: center;
+  max-width: 100%;
   gap: var(--spacing-10);
 }[data-v-3bd71ed1] .celeste-dropdown-menu-content {
   --dropdown-min-width: 250px;
@@ -3381,9 +3384,10 @@ to {
   width: 100%;
   height: 1px;
   background-color: var(--color-stroke-soft-200);
-}[data-v-ba978953] .celeste-dropdown-menu-sub-content {
+}[data-v-a7fc7ec9] .celeste-dropdown-menu-sub-content {
   --dropdown-min-width: 250px;
   --dropdown-max-width: 350px;
+  --dropdown-max-height: 300px;
   display: flex;
   z-index: 50;
   box-sizing: border-box;
@@ -3391,9 +3395,10 @@ to {
   width: 100%;
   min-width: var(--dropdown-min-width);
   max-width: var(--dropdown-max-width);
+  max-height: var(--dropdown-max-height);
   margin-block-start: var(--spacing-10);
   padding: var(--spacing-8);
-  overflow: hidden;
+  overflow: hidden auto;
   transform-origin: var(--radix-popper-transform-origin);
   animation: var(--animation-fast) ease-out forwards;
   border: 1px solid var(--color-stroke-soft-200);
@@ -3403,19 +3408,19 @@ to {
   gap: var(--spacing-4);
   scale: 0.95;
 }
-[data-v-ba978953] .celeste-dropdown-menu-sub-content[data-state=open] {
-  animation-name: open-ba978953;
+[data-v-a7fc7ec9] .celeste-dropdown-menu-sub-content[data-state=open] {
+  animation-name: open-a7fc7ec9;
 }
-[data-v-ba978953] .celeste-dropdown-menu-sub-content[data-state=closed] {
-  animation-name: close-ba978953;
+[data-v-a7fc7ec9] .celeste-dropdown-menu-sub-content[data-state=closed] {
+  animation-name: close-a7fc7ec9;
 }
-@keyframes open-ba978953 {
+@keyframes open-a7fc7ec9 {
 to {
     opacity: 1;
     scale: 1;
 }
 }
-@keyframes close-ba978953 {
+@keyframes close-a7fc7ec9 {
 from {
     opacity: 1;
     scale: 1;

package/dist/cjs/digit-input-slot.js

@@ -25,5 +25,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const digitInputSlot = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-86327944"]]);
+const digitInputSlot = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a9112549"]]);
 module.exports = digitInputSlot;

package/dist/cjs/digit-input.js

@@ -43,5 +43,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const digitInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-be93d7bf"]]);
+const digitInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-86bf03a4"]]);
 module.exports = digitInput;

package/dist/cjs/dropdown-menu-sub-content.js

@@ -47,5 +47,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const dropdownMenuSubContent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ba978953"]]);
+const dropdownMenuSubContent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a7fc7ec9"]]);
 module.exports = dropdownMenuSubContent;

package/dist/es/digit-input-slot.js

@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const digitInputSlot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-86327944"]]);
+const digitInputSlot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a9112549"]]);
 export {
   digitInputSlot as default
 };

package/dist/es/digit-input.js

@@ -42,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const digitInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be93d7bf"]]);
+const digitInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-86bf03a4"]]);
 export {
   digitInput as default
 };

package/dist/es/dropdown-menu-sub-content.js

@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const dropdownMenuSubContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ba978953"]]);
+const dropdownMenuSubContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a7fc7ec9"]]);
 export {
   dropdownMenuSubContent as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.66",
+  "version": "0.6.68",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,8 +44,8 @@
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-icons": "0.6.66",
-    "@youcan/celeste-tokens": "0.6.66"
+    "@youcan/celeste-icons": "0.6.68",
+    "@youcan/celeste-tokens": "0.6.68"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

package/src/components/digit-input/digit-input-slot.vue

@@ -24,10 +24,11 @@ const forwardedProps = useForwardProps(delegatedProps);
   display: flex;
   box-sizing: border-box;
   flex-grow: 1;
+  flex-shrink: 1;
   align-items: center;
   justify-content: center;
-  width: 64px;
-  height: 64px;
+  min-width: 40px;
+  max-width: 64px;
   padding: 0;
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--celeste-digit-input-border-color);
@@ -39,6 +40,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   color: var(--color-text-strong-950);
   font: var(--title-h5-title);
   text-align: center;
+  aspect-ratio: 1;
 
   &::placeholder {
     transition: color var(--animation-fast) ease-out;

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

@@ -32,6 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 .celeste-digit-input {
   display: flex;
   align-items: center;
+  max-width: 100%;
   gap: var(--spacing-10);
 }
 </style>

package/src/components/dropdown-menu/dropdown-menu-sub-content.vue

@@ -33,6 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 :deep(.celeste-dropdown-menu-sub-content) {
   --dropdown-min-width: 250px;
   --dropdown-max-width: 350px;
+  --dropdown-max-height: 300px;
 
   display: flex;
   z-index: 50;
@@ -41,9 +42,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   width: 100%;
   min-width: var(--dropdown-min-width);
   max-width: var(--dropdown-max-width);
+  max-height: var(--dropdown-max-height);
   margin-block-start: var(--spacing-10);
   padding: var(--spacing-8);
-  overflow: hidden;
+  overflow: hidden auto;
   transform-origin: var(--radix-popper-transform-origin);
   animation: var(--animation-fast) ease-out forwards;
   border: 1px solid var(--color-stroke-soft-200);