@youcan/celeste 0.6.8 → 0.6.10

package/dist/celeste.css

@@ -1529,7 +1529,7 @@ to {
   initial-value: rgba(0, 0, 0, 0);
   inherits: false;
 }
-.celeste-social-button[data-v-7e944825] {
+.celeste-social-button[data-v-694226a7] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1540,68 +1540,69 @@ to {
   border: 1px solid transparent;
   border-radius: var(--radius-10);
   font: var(--label-sm);
-  gap: var(--spacing-8);
+  text-decoration: none;
   cursor: pointer;
+  gap: var(--spacing-8);
 }
-.celeste-social-button span[data-v-7e944825] {
+.celeste-social-button span[data-v-694226a7] {
   padding-inline-end: var(--spacing-6);
 }
-.celeste-social-button[data-v-7e944825]:focus {
+.celeste-social-button[data-v-694226a7]:focus {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-social-button-fill[data-v-7e944825] {
+.celeste-social-button-fill[data-v-694226a7] {
   color: var(--color-text-white-0);
 }
-.celeste-social-button-stroke[data-v-7e944825] {
+.celeste-social-button-stroke[data-v-694226a7] {
   border-color: var(--color-stroke-soft-200);
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-xs);
   color: var(--text-strong-950);
 }
-.celeste-social-button-stroke[data-v-7e944825]:hover {
+.celeste-social-button-stroke[data-v-694226a7]:hover {
   border-color: transparent;
   background: var(--color-bg-weak-50);
 }
-.celeste-social-button i[data-v-7e944825] {
+.celeste-social-button i[data-v-694226a7] {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
 }
-.celeste-social-button-google[data-v-7e944825]:not(.celeste-social-button-stroke) {
+.celeste-social-button-google[data-v-694226a7]:not(.celeste-social-button-stroke) {
   background: linear-gradient(0deg, var(--celeste-social-button-bg) 0%, var(--celeste-social-button-bg) 100%), #f14336;
 }
-.celeste-social-button-google[data-v-7e944825]:not(.celeste-social-button-stroke):hover {
+.celeste-social-button-google[data-v-694226a7]:not(.celeste-social-button-stroke):hover {
   --celeste-social-button-bg: rgba(0, 0, 0, 0.16);
 }
-.celeste-social-button-apple[data-v-7e944825]:not(.celeste-social-button-stroke) {
+.celeste-social-button-apple[data-v-694226a7]:not(.celeste-social-button-stroke) {
   background: linear-gradient(0deg, var(--celeste-social-button-bg) 0%, var(--celeste-social-button-bg) 100%), #000;
 }
-.celeste-social-button-apple[data-v-7e944825]:not(.celeste-social-button-stroke):hover {
+.celeste-social-button-apple[data-v-694226a7]:not(.celeste-social-button-stroke):hover {
   --celeste-social-button-bg: rgba(255, 255, 255, 0.16);
 }
-.celeste-social-button-twitter[data-v-7e944825]:not(.celeste-social-button-stroke) {
+.celeste-social-button-twitter[data-v-694226a7]:not(.celeste-social-button-stroke) {
   background: linear-gradient(0deg, var(--celeste-social-button-bg) 0%, var(--celeste-social-button-bg) 100%), #000;
 }
-.celeste-social-button-twitter[data-v-7e944825]:not(.celeste-social-button-stroke):hover {
+.celeste-social-button-twitter[data-v-694226a7]:not(.celeste-social-button-stroke):hover {
   --celeste-social-button-bg: rgba(255, 255, 255, 0.16);
 }
-.celeste-social-button-facebook[data-v-7e944825]:not(.celeste-social-button-stroke) {
+.celeste-social-button-facebook[data-v-694226a7]:not(.celeste-social-button-stroke) {
   background: linear-gradient(0deg, var(--celeste-social-button-bg) 0%, var(--celeste-social-button-bg) 100%), #1977f3;
 }
-.celeste-social-button-facebook[data-v-7e944825]:not(.celeste-social-button-stroke):hover {
+.celeste-social-button-facebook[data-v-694226a7]:not(.celeste-social-button-stroke):hover {
   --celeste-social-button-bg: rgba(0, 0, 0, 0.16);
 }
-.celeste-social-button-linkedin[data-v-7e944825]:not(.celeste-social-button-stroke) {
+.celeste-social-button-linkedin[data-v-694226a7]:not(.celeste-social-button-stroke) {
   background: linear-gradient(0deg, var(--celeste-social-button-bg) 0%, var(--celeste-social-button-bg) 100%), #0077b5;
 }
-.celeste-social-button-linkedin[data-v-7e944825]:not(.celeste-social-button-stroke):hover {
+.celeste-social-button-linkedin[data-v-694226a7]:not(.celeste-social-button-stroke):hover {
   --celeste-social-button-bg: rgba(0, 0, 0, 0.16);
 }
-.celeste-social-button-github[data-v-7e944825]:not(.celeste-social-button-stroke) {
+.celeste-social-button-github[data-v-694226a7]:not(.celeste-social-button-stroke) {
   background: linear-gradient(0deg, var(--celeste-social-button-bg) 0%, var(--celeste-social-button-bg) 100%), #24292f;
 }
-.celeste-social-button-github[data-v-7e944825]:not(.celeste-social-button-stroke):hover {
+.celeste-social-button-github[data-v-694226a7]:not(.celeste-social-button-stroke):hover {
   --celeste-social-button-bg: rgba(255, 255, 255, 0.16);
 }.celeste-context-menu-item[data-v-3d94f388] {
   display: flex;
@@ -1842,7 +1843,7 @@ to {
 }
 .celeste-dropdown-item .celeste-dropdown-item-header-lg .celeste-dropdown-item-label[data-v-a0a634ce] {
   font-weight: var(--font-weights-display-0);
-}.celeste-text-input-wrapper[data-v-a28be4ca] {
+}.celeste-text-input-wrapper[data-v-1dfd5779] {
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -1861,28 +1862,28 @@ to {
   font: var(--paragraph-sm);
   gap: var(--input-gap);
 }
-.celeste-text-input-wrapper[size=xs][data-v-a28be4ca] {
+.celeste-text-input-wrapper[size=xs][data-v-1dfd5779] {
   --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-a28be4ca] {
+.celeste-text-input-wrapper[size=sm][data-v-1dfd5779] {
   --input-gap: 6px;
   --input-height: 36px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-8);
 }
-.celeste-text-input-wrapper[size=md][data-v-a28be4ca] {
+.celeste-text-input-wrapper[size=md][data-v-1dfd5779] {
   --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-a28be4ca] {
+.celeste-text-input-wrapper[has-error=true][data-v-1dfd5779] {
   border-color: var(--color-state-error-base);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-a28be4ca] {
+.celeste-text-input-wrapper .celeste-text-input[data-v-1dfd5779] {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -1892,90 +1893,90 @@ to {
   color: inherit;
   font: inherit;
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-a28be4ca]::-moz-placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-1dfd5779]::-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-a28be4ca]::placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-1dfd5779]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:focus) {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:focus) {
   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-a28be4ca] {
+.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-1dfd5779] {
   border-color: var(--color-state-error-base);
   outline-color: var(--color-state-error-lighter);
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:disabled) {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:disabled) {
   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-a28be4ca]::-moz-placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-1dfd5779]::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-a28be4ca]::placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-1dfd5779]::placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
   color: var(--color-icon-disabled-300);
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:disabled) .celeste-text-input-button {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-1dfd5779]: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-a28be4ca]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) {
+.celeste-text-input-wrapper[data-v-1dfd5779]: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-a28be4ca] {
+.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-1dfd5779] {
   padding-inline-end: var(--input-padding);
   border-inline-end: 1px solid var(--color-stroke-soft-200);
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]: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-1dfd5779]: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-a28be4ca] {
+.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-1dfd5779] {
   padding-inline-start: var(--input-padding);
   border-inline-start: 1px solid var(--color-stroke-soft-200);
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]: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-1dfd5779]: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-a28be4ca]: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-1dfd5779]: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-a28be4ca]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
   border-color: transparent;
   background-color: var(--color-bg-weak-50);
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]: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-1dfd5779]: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-a28be4ca]::-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-1dfd5779]::-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-a28be4ca]::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-1dfd5779]::placeholder {
   color: var(--color-text-sub-600);
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
   color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-a28be4ca]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
+.celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-1dfd5779]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
   color: var(--color-text-soft-400);
 }[data-v-2cc18da8] {
   box-sizing: border-box;

package/dist/cjs/social-button.js

@@ -41,5 +41,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const socialButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7e944825"]]);
+const socialButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-694226a7"]]);
 module.exports = socialButton;

package/dist/cjs/text-input.js

@@ -22,20 +22,20 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
       return Mo.openBlock(), Mo.createElementBlock("label", {
         size: _ctx.size,
         "has-error": _ctx.hasError,
-        class: "celeste-text-input-wrapper"
+        class: Mo.normalizeClass(Mo.unref(clsx.clsx)("celeste-text-input-wrapper", props.class))
       }, [
         Mo.withDirectives(Mo.createElementVNode("input", Mo.mergeProps({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
         }, _ctx.$attrs, {
           type: _ctx.type,
-          class: Mo.unref(clsx.clsx)("celeste-text-input", props.class)
+          class: "celeste-text-input"
         }), null, 16, _hoisted_2), [
           [Mo.vModelDynamic, modelValue.value]
         ]),
         Mo.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 8, _hoisted_1);
+      ], 10, _hoisted_1);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a28be4ca"]]);
+const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-1dfd5779"]]);
 module.exports = TextInput;

package/dist/es/social-button.js

@@ -40,7 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const socialButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7e944825"]]);
+const socialButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-694226a7"]]);
 export {
   socialButton as default
 };

package/dist/es/text-input.js

@@ -1,4 +1,4 @@
-import { defineComponent, mergeModels, useModel, openBlock, createElementBlock, withDirectives, createElementVNode, mergeProps, unref, vModelDynamic, renderSlot } from "vue";
+import { defineComponent, mergeModels, useModel, openBlock, createElementBlock, normalizeClass, unref, withDirectives, createElementVNode, mergeProps, vModelDynamic, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["size", "has-error"];
@@ -21,22 +21,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("label", {
         size: _ctx.size,
         "has-error": _ctx.hasError,
-        class: "celeste-text-input-wrapper"
+        class: normalizeClass(unref(clsx)("celeste-text-input-wrapper", props.class))
       }, [
         withDirectives(createElementVNode("input", mergeProps({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
         }, _ctx.$attrs, {
           type: _ctx.type,
-          class: unref(clsx)("celeste-text-input", props.class)
+          class: "celeste-text-input"
         }), null, 16, _hoisted_2), [
           [vModelDynamic, modelValue.value]
         ]),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 8, _hoisted_1);
+      ], 10, _hoisted_1);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a28be4ca"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1dfd5779"]]);
 export {
   TextInput as default
 };

package/package.json

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

package/src/components/button/social-button.vue

@@ -81,8 +81,9 @@ $brand-map: (
   border: 1px solid transparent;
   border-radius: var(--radius-10);
   font: var(--label-sm);
-  gap: var(--spacing-8);
+  text-decoration: none;
   cursor: pointer;
+  gap: var(--spacing-8);
 
   span {
     padding-inline-end: var(--spacing-6);

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

@@ -23,13 +23,13 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
   <label
     :size="size"
     :has-error="hasError"
-    class="celeste-text-input-wrapper"
+    :class="clsx('celeste-text-input-wrapper', props.class)"
   >
     <input
       v-model="modelValue"
       v-bind="$attrs"
       :type="type"
-      :class="clsx('celeste-text-input', props.class)"
+      class="celeste-text-input"
     >
     <slot />
   </label>