@youcan/celeste 0.6.65 → 0.6.67

package/dist/celeste.css

@@ -2387,7 +2387,7 @@ to {
 .celeste-text-input-button[inline=true][data-v-00ed5aef]:hover {
   background-color: transparent !important;
 }/* stylelint-disable no-descending-specificity */
-.celeste-text-input-wrapper[data-v-89cd60b5] {
+.celeste-text-input-wrapper[data-v-c60663fe] {
   --celeste-text-input-border-color: var(--color-stroke-soft-200);
   --celeste-text-input-drop-shadow: var(--shadow-regular-xs);
   --celeste-text-input-icon-color: var(--color-text-soft-400);
@@ -2410,28 +2410,28 @@ to {
   font: var(--paragraph-sm);
   gap: var(--input-gap);
 }
-.celeste-text-input-wrapper[size=xs][data-v-89cd60b5] {
+.celeste-text-input-wrapper[size=xs][data-v-c60663fe] {
   --input-gap: 8px;
   --input-height: 32px;
   --input-radius: var(--radius-8);
   --input-padding: calc(var(--spacing-8) - var(--spacing-2));
 }
-.celeste-text-input-wrapper[size=sm][data-v-89cd60b5] {
+.celeste-text-input-wrapper[size=sm][data-v-c60663fe] {
   --input-gap: 6px;
   --input-height: 36px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-8);
 }
-.celeste-text-input-wrapper[size=md][data-v-89cd60b5] {
+.celeste-text-input-wrapper[size=md][data-v-c60663fe] {
   --input-gap: 6px;
   --input-height: 40px;
   --input-radius: var(--radius-10);
   --input-padding: var(--spacing-10);
 }
-.celeste-text-input-wrapper[has-error=true][data-v-89cd60b5] {
+.celeste-text-input-wrapper[has-error=true][data-v-c60663fe] {
   --celeste-text-input-border-color: var(--color-state-error-base);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-89cd60b5] {
+.celeste-text-input-wrapper .celeste-text-input[data-v-c60663fe] {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -2441,52 +2441,49 @@ to {
   color: inherit;
   font: inherit;
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-89cd60b5]::-moz-placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-c60663fe]::-moz-placeholder {
   -moz-transition: color var(--animation-fast) ease-out;
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-text-input-placeholder-color);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-89cd60b5]::placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-c60663fe]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-text-input-placeholder-color);
 }
-.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-89cd60b5]::-webkit-search-cancel-button {
+.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-c60663fe]::-webkit-search-cancel-button {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-89cd60b5]::-webkit-search-decoration {
+.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-c60663fe]::-webkit-search-decoration {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper[data-v-89cd60b5]:has(.celeste-text-input-leading-node) {
+.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input-leading-node) {
   padding-inline-start: 0;
 }
-.celeste-text-input-wrapper[data-v-89cd60b5]:has(.celeste-text-input-trailing-node) {
+.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input-trailing-node) {
   padding-inline-end: 0;
 }
-.celeste-text-input-wrapper[data-v-89cd60b5]:has(.celeste-text-input:focus) {
+.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input:focus) {
   --celeste-text-input-border-color: var(--color-stroke-strong-950);
   --celeste-text-input-placeholder-color: var(--color-text-sub-600);
   --celeste-text-input-icon-color: var(--color-text-sub-600);
   --celeste-text-input-affix-color: var(--color-text-sub-600);
   outline-color: var(--color-stroke-soft-200);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-89cd60b5] {
+.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-c60663fe] {
   --celeste-text-input-border-color: var(--color-state-error-base);
   outline-color: var(--color-state-error-lighter);
 }
-.celeste-text-input-wrapper input[data-v-89cd60b5]:-webkit-autofill,
-.celeste-text-input-wrapper input[data-v-89cd60b5]:-webkit-autofill:hover,
-.celeste-text-input-wrapper input[data-v-89cd60b5]:-webkit-autofill:focus,
-.celeste-text-input-wrapper input[data-v-89cd60b5]:-webkit-autofill:active {
+.celeste-text-input-wrapper[data-v-c60663fe] input:-webkit-autofill {
   -webkit-transition: background-color 5000s ease-in-out 0s;
   transition: background-color 5000s ease-in-out 0s;
   -webkit-background-clip: text;
           background-clip: text;
 }
-.celeste-text-input-wrapper[data-v-89cd60b5]:has(.celeste-text-input:disabled) {
+.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input:disabled) {
   --celeste-text-input-border-color: transparent;
   --celeste-text-input-drop-shadow: none;
   --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
@@ -2498,56 +2495,56 @@ to {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-89cd60b5]::-moz-placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-c60663fe]::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-89cd60b5]::placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-c60663fe]::placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-89cd60b5] {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-c60663fe] {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-text-input-wrapper[data-v-89cd60b5]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
+.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
   --celeste-text-input-border-color: transparent;
 }
-.celeste-text-input-wrapper[data-v-89cd60b5]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
+.celeste-text-input-wrapper[data-v-c60663fe]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
   --celeste-text-input-icon-color: var(--color-text-sub-600);
   --celeste-text-input-placeholder-color: var(--color-text-sub-600);
   background-color: var(--color-bg-weak-50);
 }
-.celeste-text-input-wrapper .celeste-text-input-icon[data-v-89cd60b5] {
+.celeste-text-input-wrapper .celeste-text-input-icon[data-v-c60663fe] {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   transition: all var(--animation-fast) ease-out;
   color: var(--celeste-text-input-icon-color);
 }
-.celeste-text-input-wrapper[data-v-89cd60b5] .celeste-text-input-node.celeste-text-input-leading-node,
-.celeste-text-input-wrapper[data-v-89cd60b5] .celeste-text-input-node.celeste-text-input-trailing-node {
+.celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-leading-node,
+.celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-trailing-node {
   height: calc(var(--input-height) - var(--spacing-2)) !important;
 }
-[dir=ltr] .celeste-text-input-wrapper[data-v-89cd60b5] .celeste-text-input-node.celeste-text-input-leading-node {
+[dir=ltr] .celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-leading-node {
   border-right: 1px solid var(--color-stroke-soft-200) !important;
   border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
 }
-[dir=ltr] .celeste-text-input-wrapper[data-v-89cd60b5] .celeste-text-input-node.celeste-text-input-trailing-node {
+[dir=ltr] .celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-trailing-node {
   border-left: 1px solid var(--color-stroke-soft-200) !important;
   border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
 }
-[dir=rtl] .celeste-text-input-wrapper[data-v-89cd60b5] .celeste-text-input-node.celeste-text-input-leading-node {
+[dir=rtl] .celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-leading-node {
   border-left: 1px solid var(--color-stroke-soft-200) !important;
   border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
 }
-[dir=rtl] .celeste-text-input-wrapper[data-v-89cd60b5] .celeste-text-input-node.celeste-text-input-trailing-node {
+[dir=rtl] .celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-trailing-node {
   border-right: 1px solid var(--color-stroke-soft-200) !important;
   border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
 }
-.celeste-text-input-wrapper[data-v-89cd60b5] .celeste-text-input-node.celeste-text-input-leading-node {
+.celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-leading-node {
   border-right: 1px solid var(--color-stroke-soft-200) !important;
   border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
 }
-.celeste-text-input-wrapper[data-v-89cd60b5] .celeste-text-input-node.celeste-text-input-trailing-node {
+.celeste-text-input-wrapper[data-v-c60663fe] .celeste-text-input-node.celeste-text-input-trailing-node {
   border-left: 1px solid var(--color-stroke-soft-200) !important;
   border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
 }.celeste-color-swatch[data-v-e0b25a98] {
@@ -3384,9 +3381,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;
@@ -3394,9 +3392,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);
@@ -3406,19 +3405,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/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/cjs/text-input.js

@@ -116,5 +116,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-89cd60b5"]]);
+const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c60663fe"]]);
 module.exports = TextInput;

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/dist/es/text-input.js

@@ -115,7 +115,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-89cd60b5"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c60663fe"]]);
 export {
   TextInput as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.65",
+  "version": "0.6.67",
   "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.65",
-    "@youcan/celeste-tokens": "0.6.65"
+    "@youcan/celeste-icons": "0.6.67",
+    "@youcan/celeste-tokens": "0.6.67"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

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);

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

@@ -195,10 +195,12 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
     }
   }
 
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  input:-webkit-autofill:active {
+  :deep(
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    input:-webkit-autofill:active
+  ) {
     transition: background-color 5000s ease-in-out 0s;
     background-clip: text;
   }