@youcan/celeste 0.6.35 → 0.6.37

package/dist/celeste.css

@@ -198,11 +198,13 @@
   margin-block-start: -3px;
   transform: scaleY(0.5);
   animation: fade-in var(--animation-fast) linear forwards;
+}
+.celeste-checkbox .celeste-checkbox-indicator[data-state=checked]::before, [dir=ltr] .celeste-checkbox .celeste-checkbox-indicator[data-state=checked]::before, [dir=rtl] .celeste-checkbox .celeste-checkbox-indicator[data-state=checked]::before {
+  border-top: transparent;
   border-right: 1.8px solid currentcolor;
   border-bottom: 1.8px solid currentcolor;
+  border-left: transparent;
   rotate: 45deg;
-  border-block-start: transparent;
-  border-inline-start: transparent;
 }
 .celeste-checkbox .celeste-checkbox-indicator[data-state=indeterminate]::before {
   width: var(--checkbox-indeterminate-size);
@@ -1853,7 +1855,7 @@ to {
 .celeste-text-input-button[inline=true][data-v-7d21364e]:hover {
   background-color: transparent !important;
 }/* stylelint-disable no-descending-specificity */
-.celeste-text-input-wrapper[data-v-a368a0c2] {
+.celeste-text-input-wrapper[data-v-8706da95] {
   --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);
@@ -1876,28 +1878,28 @@ to {
   font: var(--paragraph-sm);
   gap: var(--input-gap);
 }
-.celeste-text-input-wrapper[size=xs][data-v-a368a0c2] {
+.celeste-text-input-wrapper[size=xs][data-v-8706da95] {
   --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-a368a0c2] {
+.celeste-text-input-wrapper[size=sm][data-v-8706da95] {
   --input-gap: 6px;
   --input-height: 36px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-8);
 }
-.celeste-text-input-wrapper[size=md][data-v-a368a0c2] {
+.celeste-text-input-wrapper[size=md][data-v-8706da95] {
   --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-a368a0c2] {
+.celeste-text-input-wrapper[has-error=true][data-v-8706da95] {
   --celeste-text-input-border-color: var(--color-state-error-base);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-a368a0c2] {
+.celeste-text-input-wrapper .celeste-text-input[data-v-8706da95] {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -1907,43 +1909,43 @@ to {
   color: inherit;
   font: inherit;
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-a368a0c2]::-moz-placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-8706da95]::-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-a368a0c2]::placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-8706da95]::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-a368a0c2]::-webkit-search-cancel-button {
+.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-8706da95]::-webkit-search-cancel-button {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-a368a0c2]::-webkit-search-decoration {
+.celeste-text-input-wrapper .celeste-text-input[type=search][data-v-8706da95]::-webkit-search-decoration {
   display: none;
   -webkit-appearance: none;
           appearance: none;
 }
-.celeste-text-input-wrapper[data-v-a368a0c2]:has(.celeste-text-input-leading-node) {
+.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-leading-node) {
   padding-inline-start: 0;
 }
-.celeste-text-input-wrapper[data-v-a368a0c2]:has(.celeste-text-input-trailing-node) {
+.celeste-text-input-wrapper[data-v-8706da95]:has(.celeste-text-input-trailing-node) {
   padding-inline-end: 0;
 }
-.celeste-text-input-wrapper[data-v-a368a0c2]:has(.celeste-text-input:focus) {
+.celeste-text-input-wrapper[data-v-8706da95]: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-a368a0c2] {
+.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-8706da95] {
   --celeste-text-input-border-color: var(--color-state-error-base);
   outline-color: var(--color-state-error-lighter);
 }
-.celeste-text-input-wrapper[data-v-a368a0c2]:has(.celeste-text-input:disabled) {
+.celeste-text-input-wrapper[data-v-8706da95]: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);
@@ -1955,46 +1957,58 @@ to {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-a368a0c2]::-moz-placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-a368a0c2]::placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-8706da95]::placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-a368a0c2] {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-8706da95] {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-text-input-wrapper[data-v-a368a0c2]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
+.celeste-text-input-wrapper[data-v-8706da95]: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-a368a0c2]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
+.celeste-text-input-wrapper[data-v-8706da95]: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-a368a0c2] {
+.celeste-text-input-wrapper .celeste-text-input-icon[data-v-8706da95] {
   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-a368a0c2] .celeste-text-input-node.celeste-text-input-leading-node {
+.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-leading-node,
+.celeste-text-input-wrapper[data-v-8706da95] .celeste-text-input-node.celeste-text-input-trailing-node {
   height: calc(var(--input-height) - var(--spacing-2)) !important;
-  border-end-start-radius: var(--input-radius) !important;
-  border-start-start-radius: var(--input-radius) !important;
-  border-end-end-radius: 0 !important;
-  border-start-end-radius: 0 !important;
-  border-inline-end: 1px solid var(--color-stroke-soft-200) !important;
 }
-.celeste-text-input-wrapper[data-v-a368a0c2] *.celeste-text-input-node.celeste-text-input-trailing-node {
-  height: calc(var(--input-height) - var(--spacing-2)) !important;
-  border-end-end-radius: var(--input-radius) !important;
-  border-start-end-radius: var(--input-radius) !important;
-  border-end-start-radius: 0 !important;
-  border-start-start-radius: 0 !important;
-  border-inline-start: 1px solid var(--color-stroke-soft-200) !important;
+[dir=ltr] .celeste-text-input-wrapper[data-v-8706da95] .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-8706da95] .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-8706da95] .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-8706da95] .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-8706da95] .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-8706da95] .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-dropdown-input[data-v-bd59a65e] {
   display: flex;
   align-items: center;

package/dist/cjs/text-input.js

@@ -115,5 +115,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a368a0c2"]]);
+const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-8706da95"]]);
 module.exports = TextInput;

package/dist/es/text-input.js

@@ -114,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a368a0c2"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8706da95"]]);
 export {
   TextInput as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.35",
+  "version": "0.6.37",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -41,14 +41,16 @@
     "@tiptap/vue-3": "^3.0.7",
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
+    "storybook-rtl-addon": "^0.3.3",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-icons": "0.6.35",
-    "@youcan/celeste-tokens": "0.6.35"
+    "@youcan/celeste-tokens": "0.6.37",
+    "@youcan/celeste-icons": "0.6.37"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",
     "@storybook/addon-docs": "^9.0.4",
+    "@storybook/addon-knobs": "^8.0.1",
     "@storybook/addon-onboarding": "^9.0.4",
     "@storybook/vue3-vite": "^9.0.4",
     "@tsconfig/node20": "^20.1.4",

package/src/components/checkbox/checkbox.vue

@@ -69,11 +69,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       margin-block-start: -3px;
       transform: scaleY(0.5);
       animation: fade-in var(--animation-fast) linear forwards;
+    }
+
+    &[data-state='checked']::before,
+    [dir='ltr'] &[data-state='checked']::before,
+    [dir='rtl'] &[data-state='checked']::before {
+      border-top: transparent;
       border-right: 1.8px solid currentcolor;
       border-bottom: 1.8px solid currentcolor;
+      border-left: transparent;
       rotate: 45deg;
-      border-block-start: transparent;
-      border-inline-start: transparent;
     }
 
     &[data-state='indeterminate']::before {

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

@@ -239,22 +239,43 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
     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-leading-node),
+  :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
     height: calc(var(--input-height) - var(--spacing-2)) !important;
-    border-end-start-radius: var(--input-radius) !important;
-    border-start-start-radius: var(--input-radius) !important;
-    border-end-end-radius: 0 !important;
-    border-start-end-radius: 0 !important;
-    border-inline-end: 1px solid var(--color-stroke-soft-200) !important;
   }
 
-  :deep(*.celeste-text-input-node.celeste-text-input-trailing-node) {
-    height: calc(var(--input-height) - var(--spacing-2)) !important;
-    border-end-end-radius: var(--input-radius) !important;
-    border-start-end-radius: var(--input-radius) !important;
-    border-end-start-radius: 0 !important;
-    border-start-start-radius: 0 !important;
-    border-inline-start: 1px solid var(--color-stroke-soft-200) !important;
+  [dir='ltr'] & {
+    :deep(.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;
+    }
+
+    :deep(.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'] & {
+    :deep(.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;
+    }
+
+    :deep(.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;
+    }
+  }
+
+  :deep(.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;
+  }
+
+  :deep(.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;
   }
 }
 </style>