@youcan/celeste 0.6.20 → 0.6.21

package/dist/celeste.css

@@ -594,26 +594,20 @@ to {
 }
 .celeste-text-input-button[inline=true][data-v-82489224]:hover {
   background-color: transparent !important;
-}.celeste-text-input-affix[data-v-a78ff6e3] {
+}.celeste-text-input-affix[data-v-d015986a] {
   display: flex;
   align-items: center;
   height: calc(var(--input-height) - var(--spacing-2));
   color: var(--color-text-sub-600);
 }
-.celeste-text-input-affix[variant=prefix][data-v-a78ff6e3] {
+.celeste-text-input-affix[variant=prefix][data-v-d015986a] {
   order: -1;
-  border-end-start-radius: var(--input-radius);
-  border-start-start-radius: var(--input-radius);
 }
-.celeste-text-input-affix[variant=suffix][data-v-a78ff6e3] {
-  border-end-end-radius: var(--input-radius);
-  border-start-end-radius: var(--input-radius);
-}
-.celeste-text-input-affix[inline=false][data-v-a78ff6e3] {
+.celeste-text-input-affix[inline=false][data-v-d015986a] {
   padding-inline: var(--spacing-10);
-  background-color: var(--color-bg-white-0);
+  background-color: transparent;
 }
-.celeste-text-input-affix[askbd=true][data-v-a78ff6e3] {
+.celeste-text-input-affix[askbd=true][data-v-d015986a] {
   width: -moz-fit-content;
   width: fit-content;
   height: -moz-fit-content;
@@ -1698,45 +1692,45 @@ to {
 .celeste-dropdown-items-group[data-v-66b5c9e4] [data-radix-vue-combobox-item] {
   width: auto;
   height: auto;
-}.celeste-text-input-wrapper[data-v-105e81d6] {
+}.celeste-text-input-wrapper[data-v-a9e9157b] {
+  --celeste-input-wrapper-border-color: var(--color-stroke-soft-200);
   display: flex;
   box-sizing: border-box;
   align-items: center;
   height: var(--input-height);
   padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
   transition: all var(--animation-fast) ease-out;
-  border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--input-radius);
   outline: 2px solid transparent;
   outline-offset: 2px;
   background-color: var(--color-bg-white-0);
-  box-shadow: var(--shadow-regular-xs);
+  box-shadow: inset 0 0 0 1px var(--celeste-input-wrapper-border-color), var(--shadow-regular-xs);
   color: var(--color-text-strong-950);
   font: var(--paragraph-sm);
   gap: var(--input-gap);
 }
-.celeste-text-input-wrapper[size=xs][data-v-105e81d6] {
+.celeste-text-input-wrapper[size=xs][data-v-a9e9157b] {
   --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-105e81d6] {
+.celeste-text-input-wrapper[size=sm][data-v-a9e9157b] {
   --input-gap: 6px;
   --input-height: 36px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-8);
 }
-.celeste-text-input-wrapper[size=md][data-v-105e81d6] {
+.celeste-text-input-wrapper[size=md][data-v-a9e9157b] {
   --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-105e81d6] {
-  border-color: var(--color-state-error-base);
+.celeste-text-input-wrapper[has-error=true][data-v-a9e9157b] {
+  --celeste-input-wrapper-border-color: var(--color-state-error-base);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6] {
+.celeste-text-input-wrapper .celeste-text-input[data-v-a9e9157b] {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -1746,90 +1740,90 @@ to {
   color: inherit;
   font: inherit;
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-a9e9157b]::-moz-placeholder {
   -moz-transition: color var(--animation-fast) ease-out;
   transition: color var(--animation-fast) ease-out;
   color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6]::placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-a9e9157b]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:focus) {
-  border-color: var(--color-stroke-strong-950);
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:focus) {
+  --celeste-input-wrapper-border-color: var(--color-stroke-strong-950);
   outline-color: var(--color-stroke-soft-200);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-105e81d6] {
-  border-color: var(--color-state-error-base);
+.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-a9e9157b] {
+  --celeste-input-wrapper-border-color: var(--color-state-error-base);
   outline-color: var(--color-state-error-lighter);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) {
-  border-color: transparent;
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:disabled) {
+  --celeste-input-wrapper-border-color: transparent;
   background-color: var(--color-bg-weak-50);
   box-shadow: none;
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-a9e9157b]::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-105e81d6]::placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-a9e9157b]::placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
   color: var(--color-icon-disabled-300);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-button {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:disabled) .celeste-text-input-button {
   background-color: var(--color-bg-weak-50) !important;
   color: var(--color-text-disabled-300);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) {
   gap: var(--spacing-0);
   padding-inline-end: var(--spacing-0);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-button[inline=false], .celeste-text-input-affix[variant=suffix]) .celeste-text-input[data-v-105e81d6] {
+.celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-button[inline=false], .celeste-text-input-affix[variant=suffix]) .celeste-text-input[data-v-a9e9157b] {
   padding-inline-end: var(--input-padding);
-  border-inline-end: 1px solid var(--color-stroke-soft-200);
+  border-inline-end: 1px solid var(--celeste-input-wrapper-border-color);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) {
   padding-inline: var(--spacing-0) var(--input-padding);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) .celeste-text-input[data-v-105e81d6] {
+.celeste-text-input-wrapper:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]):has(.celeste-text-input-affix[variant=prefix]) .celeste-text-input[data-v-a9e9157b] {
   padding-inline-start: var(--input-padding);
-  border-inline-start: 1px solid var(--color-stroke-soft-200);
+  border-inline-start: 1px solid var(--celeste-input-wrapper-border-color);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=start] {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=start] {
   margin-inline-end: var(--input-gap);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=end] {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) .celeste-text-input-icon[position=end] {
   margin-inline-start: var(--input-gap);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
-  border-color: transparent;
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
+  --celeste-input-wrapper-border-color: transparent;
   background-color: var(--color-bg-weak-50);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)):has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:hover:not(:focus, :disabled)):has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
   background-color: var(--color-bg-weak-50);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-a9e9157b]::-moz-placeholder {
   color: var(--color-text-sub-600);
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-105e81d6]::placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button:hover)) .celeste-text-input[data-v-a9e9157b]::placeholder {
   color: var(--color-text-sub-600);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
   color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
+.celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-a9e9157b]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
   color: var(--color-text-soft-400);
 }.celeste-dropdown-input[data-v-6de83486] {
   display: flex;

package/dist/cjs/text-input-affix.js

@@ -24,5 +24,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const textInputAffix = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a78ff6e3"]]);
+const textInputAffix = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-d015986a"]]);
 module.exports = textInputAffix;

package/dist/cjs/text-input.js

@@ -38,5 +38,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-105e81d6"]]);
+const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a9e9157b"]]);
 module.exports = TextInput;

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

@@ -23,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const textInputAffix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a78ff6e3"]]);
+const textInputAffix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d015986a"]]);
 export {
   textInputAffix as default
 };

package/dist/es/text-input.js

@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-105e81d6"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a9e9157b"]]);
 export {
   TextInput as default
 };

package/package.json

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

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

@@ -32,18 +32,11 @@ const delegatedProps = useDelegatedProps(props, 'class');
 
   &[variant='prefix'] {
     order: -1;
-    border-end-start-radius: var(--input-radius);
-    border-start-start-radius: var(--input-radius);
-  }
-
-  &[variant='suffix'] {
-    border-end-end-radius: var(--input-radius);
-    border-start-end-radius: var(--input-radius);
   }
 
   &[inline='false'] {
     padding-inline: var(--spacing-10);
-    background-color: var(--color-bg-white-0);
+    background-color: transparent;
   }
 
   &[askbd='true'] {

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

@@ -38,18 +38,21 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
 
 <style scoped lang="scss">
 .celeste-text-input-wrapper {
+  --celeste-input-wrapper-border-color: var(--color-stroke-soft-200);
+
   display: flex;
   box-sizing: border-box;
   align-items: center;
   height: var(--input-height);
   padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
   transition: all var(--animation-fast) ease-out;
-  border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--input-radius);
   outline: 2px solid transparent;
   outline-offset: 2px;
   background-color: var(--color-bg-white-0);
-  box-shadow: var(--shadow-regular-xs);
+  box-shadow:
+    inset 0 0 0 1px var(--celeste-input-wrapper-border-color),
+    var(--shadow-regular-xs);
   color: var(--color-text-strong-950);
   font: var(--paragraph-sm);
   gap: var(--input-gap);
@@ -76,7 +79,7 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
   }
 
   &[has-error='true'] {
-    border-color: var(--color-state-error-base);
+    --celeste-input-wrapper-border-color: var(--color-state-error-base);
   }
 
   .celeste-text-input {
@@ -96,17 +99,20 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
   }
 
   &:has(.celeste-text-input:focus) {
-    border-color: var(--color-stroke-strong-950);
+    --celeste-input-wrapper-border-color: var(--color-stroke-strong-950);
+
     outline-color: var(--color-stroke-soft-200);
 
     &[has-error='true'] {
-      border-color: var(--color-state-error-base);
+      --celeste-input-wrapper-border-color: var(--color-state-error-base);
+
       outline-color: var(--color-state-error-lighter);
     }
   }
 
   &:has(.celeste-text-input:disabled) {
-    border-color: transparent;
+    --celeste-input-wrapper-border-color: transparent;
+
     background-color: var(--color-bg-weak-50);
     box-shadow: none;
     color: var(--color-text-disabled-300);
@@ -134,7 +140,7 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
     &:has(.celeste-text-input-button[inline='false'], .celeste-text-input-affix[variant='suffix']) {
       .celeste-text-input {
         padding-inline-end: var(--input-padding);
-        border-inline-end: 1px solid var(--color-stroke-soft-200);
+        border-inline-end: 1px solid var(--celeste-input-wrapper-border-color);
       }
     }
 
@@ -143,7 +149,7 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
 
       .celeste-text-input {
         padding-inline-start: var(--input-padding);
-        border-inline-start: 1px solid var(--color-stroke-soft-200);
+        border-inline-start: 1px solid var(--celeste-input-wrapper-border-color);
       }
     }
 
@@ -161,7 +167,8 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
   &:has(.celeste-text-input:hover:not(:focus, :disabled)) {
     /* stylelint-disable-next-line no-descending-specificity */
     &:not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
-      border-color: transparent;
+      --celeste-input-wrapper-border-color: transparent;
+
       background-color: var(--color-bg-weak-50);
     }