@youcan/celeste 0.6.51 → 0.6.53

package/dist/celeste.css

@@ -1978,13 +1978,12 @@ to {
 .celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
-}[data-v-f7ba3446] {
+}[data-v-6fb023b7] {
   box-sizing: border-box;
 }
-.celeste-checkbox-card[data-v-f7ba3446] {
+.celeste-checkbox-card[data-v-6fb023b7] {
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
   padding: var(--spacing-16);
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--color-stroke-soft-200);
@@ -1995,21 +1994,21 @@ to {
   font: var(--paragraph-sm);
   gap: var(--spacing-14);
 }
-.celeste-checkbox-card[data-v-f7ba3446]:not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-6fb023b7]:not(.celeste-checkbox-card-disabled) {
   cursor: pointer;
 }
-.celeste-checkbox-card[data-v-f7ba3446]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-6fb023b7]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
   border-color: var(--color-primary-base);
   box-shadow: none;
 }
-.celeste-checkbox-card[data-v-f7ba3446]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-f7ba3446]:focus-visible:not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-6fb023b7]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-6fb023b7]:focus-visible:not(.celeste-checkbox-card-disabled) {
   background-color: var(--color-bg-weak-50);
   box-shadow: none;
 }
-.celeste-checkbox-card[data-v-f7ba3446]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-f7ba3446]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
+.celeste-checkbox-card[data-v-6fb023b7]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-6fb023b7]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
   border-color: transparent;
 }
-.celeste-checkbox-card-preview[data-v-f7ba3446] {
+.celeste-checkbox-card-preview[data-v-6fb023b7] {
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -2023,15 +2022,15 @@ to {
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-xs);
 }
-.celeste-checkbox-card-preview-icon i[data-v-f7ba3446] {
+.celeste-checkbox-card-preview-icon i[data-v-6fb023b7] {
   width: 20px;
   height: 20px;
   color: var(--color-icon-sub-600);
 }
-.celeste-checkbox-card-preview-image[data-v-f7ba3446] {
+.celeste-checkbox-card-preview-image[data-v-6fb023b7] {
   border: none;
 }
-.celeste-checkbox-card-preview-image i[data-v-f7ba3446] {
+.celeste-checkbox-card-preview-image i[data-v-6fb023b7] {
   position: absolute;
   z-index: 0;
   top: 50%;
@@ -2041,21 +2040,21 @@ to {
   transform: translate(-50%, -50%);
   color: var(--color-icon-sub-600);
 }
-.celeste-checkbox-card-preview-image[data-v-f7ba3446] img {
+.celeste-checkbox-card-preview-image[data-v-6fb023b7] img {
   z-index: 1000;
 }
-.celeste-checkbox-card-content[data-v-f7ba3446] {
+.celeste-checkbox-card-content[data-v-6fb023b7] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
 }
-.celeste-checkbox-card-row[data-v-f7ba3446] {
+.celeste-checkbox-card-row[data-v-6fb023b7] {
   display: flex;
   flex-shrink: 1;
   align-items: center;
   gap: var(--spacing-8);
 }
-.celeste-checkbox-card-label[data-v-f7ba3446] {
+.celeste-checkbox-card-label[data-v-6fb023b7] {
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
@@ -2064,7 +2063,7 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-checkbox-card-sublabel[data-v-f7ba3446] {
+.celeste-checkbox-card-sublabel[data-v-6fb023b7] {
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
@@ -2073,20 +2072,23 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-checkbox-card-description[data-v-f7ba3446] {
+.celeste-checkbox-card-description[data-v-6fb023b7] {
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);
 }
-.celeste-checkbox-card-disabled[data-v-f7ba3446] {
+[data-v-6fb023b7] .celeste-checkbox-card-checkbox {
+  margin-inline-start: auto;
+}
+.celeste-checkbox-card-disabled[data-v-6fb023b7] {
   cursor: not-allowed;
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-f7ba3446] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-6fb023b7] {
   color: var(--color-text-sub-600);
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-f7ba3446] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-6fb023b7] {
   color: var(--color-text-soft-400);
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-f7ba3446] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-6fb023b7] {
   color: var(--color-text-soft-400);
 }.celeste-checkbox-label[data-v-ad0a5759] {
   display: flex;
@@ -3494,26 +3496,31 @@ to {
   color: var(--color-icon-disabled-300);
 }[data-v-3405639f] {
   box-sizing: border-box;
-}.celeste-hint-text[data-v-37aef9f7] {
+}.celeste-hint-text[data-v-0fde56ef] {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: var(--spacing-4);
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);
 }
-.celeste-hint-text i[data-v-37aef9f7] {
+.celeste-hint-text i[data-v-0fde56ef] {
+  flex-shrink: 0;
   color: var(--color-icon-soft-400);
 }
-.celeste-hint-text-disabled[data-v-37aef9f7] {
+.celeste-hint-text p[data-v-0fde56ef] {
+  max-width: 65ch;
+  margin: 0;
+}
+.celeste-hint-text-disabled[data-v-0fde56ef] {
   color: var(--color-text-disabled-300);
 }
-.celeste-hint-text-disabled i[data-v-37aef9f7] {
+.celeste-hint-text-disabled i[data-v-0fde56ef] {
   color: var(--color-icon-disabled-300);
 }
-.celeste-hint-text-error[data-v-37aef9f7] {
+.celeste-hint-text-error[data-v-0fde56ef] {
   color: var(--color-state-error-base);
 }
-.celeste-hint-text-error i[data-v-37aef9f7] {
+.celeste-hint-text-error i[data-v-0fde56ef] {
   color: var(--color-state-error-base);
 }[data-v-0dc4a40e] .celeste-tooltip-content {
   display: flex;
@@ -4067,10 +4074,10 @@ to {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-}[data-v-c0db864b] {
+}[data-v-5747c91e] {
   box-sizing: border-box;
 }
-.celeste-radio-card[data-v-c0db864b] {
+.celeste-radio-card[data-v-5747c91e] {
   display: flex;
   align-items: flex-start;
   padding: var(--spacing-16);
@@ -4083,21 +4090,21 @@ to {
   font: var(--paragraph-sm);
   gap: var(--spacing-14);
 }
-.celeste-radio-card[data-v-c0db864b]:not(.celeste-radio-card-disabled) {
+.celeste-radio-card[data-v-5747c91e]:not(.celeste-radio-card-disabled) {
   cursor: pointer;
 }
-.celeste-radio-card[data-v-c0db864b]:has([data-state=checked]):not(.celeste-radio-card-disabled) {
+.celeste-radio-card[data-v-5747c91e]:has([data-state=checked]):not(.celeste-radio-card-disabled) {
   border-color: var(--color-primary-base);
   box-shadow: none;
 }
-.celeste-radio-card[data-v-c0db864b]:hover:not(.celeste-radio-card-disabled), .celeste-radio-card[data-v-c0db864b]:focus-visible:not(.celeste-radio-card-disabled) {
+.celeste-radio-card[data-v-5747c91e]:hover:not(.celeste-radio-card-disabled), .celeste-radio-card[data-v-5747c91e]:focus-visible:not(.celeste-radio-card-disabled) {
   background-color: var(--color-bg-weak-50);
   box-shadow: none;
 }
-.celeste-radio-card[data-v-c0db864b]:hover:not(.celeste-radio-card-disabled):not(:has([data-state=checked])), .celeste-radio-card[data-v-c0db864b]:focus-visible:not(.celeste-radio-card-disabled):not(:has([data-state=checked])) {
+.celeste-radio-card[data-v-5747c91e]:hover:not(.celeste-radio-card-disabled):not(:has([data-state=checked])), .celeste-radio-card[data-v-5747c91e]:focus-visible:not(.celeste-radio-card-disabled):not(:has([data-state=checked])) {
   border-color: transparent;
 }
-.celeste-radio-card-preview[data-v-c0db864b] {
+.celeste-radio-card-preview[data-v-5747c91e] {
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -4111,15 +4118,15 @@ to {
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-xs);
 }
-.celeste-radio-card-preview-icon i[data-v-c0db864b] {
+.celeste-radio-card-preview-icon i[data-v-5747c91e] {
   width: 20px;
   height: 20px;
   color: var(--color-icon-sub-600);
 }
-.celeste-radio-card-preview-image[data-v-c0db864b] {
+.celeste-radio-card-preview-image[data-v-5747c91e] {
   border: none;
 }
-.celeste-radio-card-preview-image i[data-v-c0db864b] {
+.celeste-radio-card-preview-image i[data-v-5747c91e] {
   position: absolute;
   z-index: 0;
   top: 50%;
@@ -4129,21 +4136,21 @@ to {
   transform: translate(-50%, -50%);
   color: var(--color-icon-sub-600);
 }
-.celeste-radio-card-preview-image[data-v-c0db864b] img {
+.celeste-radio-card-preview-image[data-v-5747c91e] img {
   z-index: 1000;
 }
-.celeste-radio-card-content[data-v-c0db864b] {
+.celeste-radio-card-content[data-v-5747c91e] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
 }
-.celeste-radio-card-row[data-v-c0db864b] {
+.celeste-radio-card-row[data-v-5747c91e] {
   display: flex;
   flex-shrink: 1;
   align-items: center;
   gap: var(--spacing-8);
 }
-.celeste-radio-card-label[data-v-c0db864b] {
+.celeste-radio-card-label[data-v-5747c91e] {
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
@@ -4152,7 +4159,7 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-radio-card-sublabel[data-v-c0db864b] {
+.celeste-radio-card-sublabel[data-v-5747c91e] {
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
@@ -4161,20 +4168,23 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-radio-card-description[data-v-c0db864b] {
+.celeste-radio-card-description[data-v-5747c91e] {
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);
 }
-.celeste-radio-card-disabled[data-v-c0db864b] {
+[data-v-5747c91e] .celeste-radio-card-radio {
+  margin-inline-start: auto;
+}
+.celeste-radio-card-disabled[data-v-5747c91e] {
   cursor: not-allowed;
 }
-.celeste-radio-card-disabled .celeste-radio-card-label[data-v-c0db864b] {
+.celeste-radio-card-disabled .celeste-radio-card-label[data-v-5747c91e] {
   color: var(--color-text-sub-600);
 }
-.celeste-radio-card-disabled .celeste-radio-card-sublabel[data-v-c0db864b] {
+.celeste-radio-card-disabled .celeste-radio-card-sublabel[data-v-5747c91e] {
   color: var(--color-text-soft-400);
 }
-.celeste-radio-card-disabled .celeste-radio-card-description[data-v-c0db864b] {
+.celeste-radio-card-disabled .celeste-radio-card-description[data-v-5747c91e] {
   color: var(--color-text-soft-400);
 }.celeste-radio-label[data-v-32cb773e] {
   display: flex;

package/dist/cjs/checkbox-card.js

@@ -106,5 +106,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-f7ba3446"]]);
+const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6fb023b7"]]);
 module.exports = checkboxCard;

package/dist/cjs/hint-text.js

@@ -32,5 +32,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const hintText = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-37aef9f7"]]);
+const hintText = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-0fde56ef"]]);
 module.exports = hintText;

package/dist/cjs/radio-group-card.js

@@ -106,5 +106,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const radioGroupCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c0db864b"]]);
+const radioGroupCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5747c91e"]]);
 module.exports = radioGroupCard;

package/dist/es/checkbox-card.js

@@ -105,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f7ba3446"]]);
+const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6fb023b7"]]);
 export {
   checkboxCard as default
 };

package/dist/es/hint-text.js

@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hintText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-37aef9f7"]]);
+const hintText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0fde56ef"]]);
 export {
   hintText as default
 };

package/dist/es/radio-group-card.js

@@ -105,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const radioGroupCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c0db864b"]]);
+const radioGroupCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5747c91e"]]);
 export {
   radioGroupCard as default
 };

package/package.json

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

package/src/components/checkbox/checkbox-card.vue

@@ -94,7 +94,6 @@ const delegatedProps = useDelegatedProps(props, 'class');
 .celeste-checkbox-card {
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
   padding: var(--spacing-16);
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--color-stroke-soft-200);
@@ -205,6 +204,10 @@ const delegatedProps = useDelegatedProps(props, 'class');
   font: var(--paragraph-xs);
 }
 
+:deep(.celeste-checkbox-card-checkbox) {
+  margin-inline-start: auto;
+}
+
 .celeste-checkbox-card-disabled {
   cursor: not-allowed;
 

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

@@ -35,15 +35,21 @@ export interface HintTextProps {
 <style lang="scss" scoped>
 .celeste-hint-text {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: var(--spacing-4);
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);
 
   i {
+    flex-shrink: 0;
     color: var(--color-icon-soft-400);
   }
 
+  p {
+    max-width: 65ch;
+    margin: 0;
+  }
+
   &-disabled {
     color: var(--color-text-disabled-300);
 

package/src/components/radio-group/radio-group-card.vue

@@ -203,6 +203,10 @@ const delegatedProps = useDelegatedProps(props, 'class');
   font: var(--paragraph-xs);
 }
 
+:deep(.celeste-radio-card-radio) {
+  margin-inline-start: auto;
+}
+
 .celeste-radio-card-disabled {
   cursor: not-allowed;