@youcan/celeste 0.21.1 → 0.21.2

package/ai/README.md

@@ -1,6 +1,6 @@
 # Celeste agent indexes
 
-Generated from source for `@youcan/celeste@0.21.1`. Do not edit.
+Generated from source for `@youcan/celeste@0.21.2`. Do not edit.
 
 - `component-registry.json` — every component's props, events, slots, story and usage example, and
   every exported helper such as `toast`

package/ai/component-registry.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.21.1",
-  "generatedAt": "2026-10-13T22:26:38.580Z",
+  "version": "0.21.2",
+  "generatedAt": "2026-10-14T03:15:16.923Z",
   "components": {
     "Alert": {
       "name": "Alert",

package/ai/icons.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.21.1",
-  "generatedAt": "2026-10-13T22:26:33.824Z",
+  "version": "0.21.2",
+  "generatedAt": "2026-10-14T03:15:13.071Z",
   "prefix": "celeste",
   "icons": [
     {

package/ai/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.21.1",
-  "generatedAt": "2026-10-13T22:26:33.824Z",
+  "version": "0.21.2",
+  "generatedAt": "2026-10-14T03:15:13.071Z",
   "tokens": [
     {
       "name": "animation-extra-fast",

package/dist/celeste.css

@@ -2410,7 +2410,7 @@ to {
 .celeste-text-input-button[inline=true][data-v-d9fba798]:hover {
   background-color: transparent !important;
 }/* stylelint-disable no-descending-specificity */
-.celeste-text-input-wrapper[data-v-30491f95] {
+.celeste-text-input-wrapper[data-v-3af287ef] {
   --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-sub-600);
@@ -2423,6 +2423,7 @@ to {
   align-items: center;
   height: var(--input-height);
   padding-inline: var(--input-padding);
+  overflow: hidden;
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--celeste-text-input-border-color);
   border-radius: var(--input-radius);
@@ -2432,31 +2433,31 @@ to {
   font: var(--paragraph-sm);
   gap: var(--input-gap);
 }
-.celeste-text-input-wrapper[size=xs][data-v-30491f95] {
+.celeste-text-input-wrapper[size=xs][data-v-3af287ef] {
   --input-gap: var(--spacing-6);
   --input-height: 32px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-8);
   --input-affix-padding: var(--spacing-10);
 }
-.celeste-text-input-wrapper[size=sm][data-v-30491f95] {
+.celeste-text-input-wrapper[size=sm][data-v-3af287ef] {
   --input-gap: var(--spacing-8);
   --input-height: 36px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-10);
   --input-affix-padding: var(--spacing-10);
 }
-.celeste-text-input-wrapper[size=md][data-v-30491f95] {
+.celeste-text-input-wrapper[size=md][data-v-3af287ef] {
   --input-gap: var(--spacing-8);
   --input-height: 40px;
   --input-radius: var(--radius-10);
   --input-padding: var(--spacing-12);
   --input-affix-padding: var(--spacing-12);
 }
-.celeste-text-input-wrapper[has-error=true][data-v-30491f95] {
+.celeste-text-input-wrapper[has-error=true][data-v-3af287ef] {
   --celeste-text-input-border-color: var(--color-state-error-base);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-30491f95] {
+.celeste-text-input-wrapper .celeste-text-input[data-v-3af287ef] {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -2467,86 +2468,86 @@ to {
   color: inherit;
   font: inherit;
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-30491f95]::-moz-placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-3af287ef]::-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-30491f95]::placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-3af287ef]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--celeste-text-input-placeholder-color);
 }
-.celeste-text-input-wrapper .celeste-text-input[type=tel][data-v-30491f95] {
+.celeste-text-input-wrapper .celeste-text-input[type=tel][data-v-3af287ef] {
   direction: ltr;
   text-align: -webkit-match-parent;
   text-align: match-parent;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-30491f95]::-webkit-search-cancel-button {
+.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-3af287ef]::-webkit-search-cancel-button {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-30491f95]::-webkit-search-decoration {
+.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-3af287ef]::-webkit-search-decoration {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-webkit-calendar-picker-indicator {
+.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-webkit-clear-button, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-webkit-inner-spin-button {
+.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-webkit-clear-button, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-webkit-inner-spin-button {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-ms-clear, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-30491f95]::-ms-expand {
+.celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-ms-clear, .celeste-text-input-wrapper .celeste-text-input[type=date][data-v-3af287ef]::-ms-expand {
   display: none;
 }
-.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input-leading-node) {
+.celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input-leading-node) {
   padding-inline-start: 0;
 }
-.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input-trailing-node) {
+.celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input-trailing-node) {
   padding-inline-end: 0;
 }
-.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input:-moz-placeholder) {
+.celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input:-moz-placeholder) {
   --celeste-text-input-icon-color: var(--color-text-soft-400);
   --celeste-text-input-affix-color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-30491f95]:has(.celeste-text-input:placeholder-shown) {
+.celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input:placeholder-shown) {
   --celeste-text-input-icon-color: var(--color-text-soft-400);
   --celeste-text-input-affix-color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-30491f95]:hover:not(:has(.celeste-text-input:focus)) {
+.celeste-text-input-wrapper[data-v-3af287ef]:hover:not(:has(.celeste-text-input:focus)) {
   --celeste-text-input-drop-shadow: none;
 }
-.celeste-text-input-wrapper[data-v-30491f95]:hover:not(:has(.celeste-text-input:focus)):not([has-error=true], :has(.celeste-text-input-node)) {
+.celeste-text-input-wrapper[data-v-3af287ef]:hover:not(:has(.celeste-text-input:focus)):not([has-error=true], :has(.celeste-text-input-node)) {
   --celeste-text-input-border-color: transparent;
 }
-.celeste-text-input-wrapper[data-v-30491f95]:hover:not(:has(.celeste-text-input:focus)):not(:has(.celeste-text-input-node:hover)) {
+.celeste-text-input-wrapper[data-v-3af287ef]:hover:not(:has(.celeste-text-input:focus)):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[data-v-30491f95]:has(.celeste-text-input:focus) {
+.celeste-text-input-wrapper[data-v-3af287ef]:has(.celeste-text-input:focus) {
   --celeste-text-input-border-color: var(--color-stroke-strong-950);
   --celeste-text-input-drop-shadow: var(--shadow-buttons-important-focus);
   --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);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-30491f95] {
+.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-3af287ef] {
   --celeste-text-input-border-color: var(--color-state-error-base);
   --celeste-text-input-drop-shadow: var(--shadow-buttons-error-focus);
 }
-.celeste-text-input-wrapper[data-v-30491f95] input:-webkit-autofill {
+.celeste-text-input-wrapper[data-v-3af287ef] 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-30491f95]:has(.celeste-text-input:disabled) {
+.celeste-text-input-wrapper[data-v-3af287ef]: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);
@@ -2558,38 +2559,41 @@ to {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-30491f95]::-moz-placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-3af287ef]::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-30491f95]::placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-3af287ef]::placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper .celeste-text-input-icon[data-v-30491f95] {
+.celeste-text-input-wrapper .celeste-text-input-icon[data-v-3af287ef] {
   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-30491f95] .celeste-text-input-node.celeste-text-input-leading-node,
-.celeste-text-input-wrapper[data-v-30491f95] .celeste-text-input-node.celeste-text-input-trailing-node {
+.celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-node {
+  position: relative;
   height: calc(var(--input-height) - var(--spacing-2));
 }
-.celeste-text-input-wrapper[data-v-30491f95] .celeste-text-input-node.celeste-text-input-leading-node {
+.celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-node::after {
+  content: "";
+  position: absolute;
+  width: 1px;
+  background-color: var(--color-stroke-soft-200);
+  inset-block: 0;
+}
+.celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-leading-node {
   margin-inline-end: calc(var(--input-padding) - var(--input-gap));
-  border-inline-end: 1px solid var(--color-stroke-soft-200);
-  border-start-start-radius: var(--input-radius);
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  border-end-start-radius: var(--input-radius);
 }
-.celeste-text-input-wrapper[data-v-30491f95] .celeste-text-input-node.celeste-text-input-trailing-node {
+.celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-leading-node::after {
+  inset-inline-end: 0;
+}
+.celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-trailing-node {
   margin-inline-start: calc(var(--input-padding) - var(--input-gap));
-  border-inline-start: 1px solid var(--color-stroke-soft-200);
-  border-start-start-radius: 0;
-  border-start-end-radius: var(--input-radius);
-  border-end-end-radius: var(--input-radius);
-  border-end-start-radius: 0;
+}
+.celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-trailing-node::after {
+  inset-inline-start: 0;
 }[data-v-cf42d877] .celeste-tooltip-content {
   display: flex;
   position: relative;

package/dist/cjs/chunks/text-input.cjs

@@ -110,7 +110,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, v
 });
 //#endregion
 //#region src/components/text-input/text-input.vue
-var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-30491f95"]]);
+var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3af287ef"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_default", {
 	enumerable: true,

package/dist/es/chunks/text-input.js

@@ -109,6 +109,6 @@ var text_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 10, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-30491f95"]]);
+}), [["__scopeId", "data-v-3af287ef"]]);
 //#endregion
 export { text_input_default as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -52,8 +52,8 @@
     "reka-ui": "~2.10.5",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.21.1",
-    "@youcan/celeste-tokens": "0.21.1"
+    "@youcan/celeste-icons": "0.21.2",
+    "@youcan/celeste-tokens": "0.21.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

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

@@ -109,6 +109,7 @@ function clearInput() {
   align-items: center;
   height: var(--input-height);
   padding-inline: var(--input-padding);
+  overflow: hidden;
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--celeste-text-input-border-color);
   border-radius: var(--input-radius);
@@ -278,27 +279,33 @@ function clearInput() {
     color: var(--celeste-text-input-icon-color);
   }
 
-  :deep(.celeste-text-input-node.celeste-text-input-leading-node),
-  :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
+  :deep(.celeste-text-input-node) {
+    position: relative;
     height: calc(var(--input-height) - var(--spacing-2));
   }
 
-  :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
+  :deep(.celeste-text-input-node)::after {
+    content: '';
+    position: absolute;
+    width: 1px;
+    background-color: var(--color-stroke-soft-200);
+    inset-block: 0;
+  }
+
+  :deep(.celeste-text-input-leading-node) {
     margin-inline-end: calc(var(--input-padding) - var(--input-gap));
-    border-inline-end: 1px solid var(--color-stroke-soft-200);
-    border-start-start-radius: var(--input-radius);
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-end-start-radius: var(--input-radius);
   }
 
-  :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
+  :deep(.celeste-text-input-leading-node)::after {
+    inset-inline-end: 0;
+  }
+
+  :deep(.celeste-text-input-trailing-node) {
     margin-inline-start: calc(var(--input-padding) - var(--input-gap));
-    border-inline-start: 1px solid var(--color-stroke-soft-200);
-    border-start-start-radius: 0;
-    border-start-end-radius: var(--input-radius);
-    border-end-end-radius: var(--input-radius);
-    border-end-start-radius: 0;
+  }
+
+  :deep(.celeste-text-input-trailing-node)::after {
+    inset-inline-start: 0;
   }
 }
 </style>