@youcan/celeste 0.6.13 → 0.6.15

package/dist/celeste.css

@@ -1461,7 +1461,7 @@ to {
   background: var(--color-bg-weak-50);
   box-shadow: var(--shadow-buttons-important-focus);
   color: var(--text-strong-950);
-}.celeste-link-button[data-v-ae1aba17] {
+}.celeste-link-button[data-v-82b3b1ab] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1471,58 +1471,58 @@ to {
   text-decoration: none;
   cursor: pointer;
 }
-.celeste-link-button[data-v-ae1aba17]:disabled, .celeste-link-button-disabled[data-v-ae1aba17] {
+.celeste-link-button[data-v-82b3b1ab]:disabled, .celeste-link-button-disabled[data-v-82b3b1ab] {
   color: var(--color-text-disabled-300);
   cursor: default;
   pointer-events: none;
 }
-.celeste-link-button[data-v-ae1aba17]:hover, .celeste-link-button[data-v-ae1aba17]:focus {
+.celeste-link-button[data-v-82b3b1ab]:hover, .celeste-link-button[data-v-82b3b1ab]:focus {
   outline: none;
   text-decoration: underline;
 }
-.celeste-link-button-underline[data-v-ae1aba17] {
+.celeste-link-button-underline[data-v-82b3b1ab] {
   text-decoration: underline;
 }
-.celeste-link-button-md[data-v-ae1aba17] {
+.celeste-link-button-md[data-v-82b3b1ab] {
   height: 20px;
   font: var(--label-sm);
 }
-.celeste-link-button-md[data-v-ae1aba17] i {
+.celeste-link-button-md[data-v-82b3b1ab] i {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
 }
-.celeste-link-button-sm[data-v-ae1aba17] {
+.celeste-link-button-sm[data-v-82b3b1ab] {
   height: 16px;
   font: var(--label-xs);
 }
-.celeste-link-button-sm[data-v-ae1aba17] i {
+.celeste-link-button-sm[data-v-82b3b1ab] i {
   flex-shrink: 0;
   width: 16px;
   height: 16px;
 }
-.celeste-link-button-primary[data-v-ae1aba17]:not(.celeste-link-button-disabled) {
+.celeste-link-button-primary[data-v-82b3b1ab]:not(.celeste-link-button-disabled) {
   color: var(--color-primary-base);
 }
-.celeste-link-button-primary[data-v-ae1aba17]:not(.celeste-link-button-disabled):hover, .celeste-link-button-primary[data-v-ae1aba17]:not(.celeste-link-button-disabled):focus {
+.celeste-link-button-primary[data-v-82b3b1ab]:not(.celeste-link-button-disabled):hover, .celeste-link-button-primary[data-v-82b3b1ab]:not(.celeste-link-button-disabled):focus {
   color: var(--color-primary-darker);
 }
-.celeste-link-button-black[data-v-ae1aba17]:not(.celeste-link-button-disabled) {
+.celeste-link-button-black[data-v-82b3b1ab]:not(.celeste-link-button-disabled) {
   color: var(--color-text-strong-950);
 }
-.celeste-link-button-black[data-v-ae1aba17]:not(.celeste-link-button-disabled):hover, .celeste-link-button-black[data-v-ae1aba17]:not(.celeste-link-button-disabled):focus {
+.celeste-link-button-black[data-v-82b3b1ab]:not(.celeste-link-button-disabled):hover, .celeste-link-button-black[data-v-82b3b1ab]:not(.celeste-link-button-disabled):focus {
   color: var(--color-text-strong-950);
 }
-.celeste-link-button-gray[data-v-ae1aba17]:not(.celeste-link-button-disabled) {
+.celeste-link-button-gray[data-v-82b3b1ab]:not(.celeste-link-button-disabled) {
   color: var(--color-text-sub-600);
 }
-.celeste-link-button-gray[data-v-ae1aba17]:not(.celeste-link-button-disabled):hover, .celeste-link-button-gray[data-v-ae1aba17]:not(.celeste-link-button-disabled):focus {
+.celeste-link-button-gray[data-v-82b3b1ab]:not(.celeste-link-button-disabled):hover, .celeste-link-button-gray[data-v-82b3b1ab]:not(.celeste-link-button-disabled):focus {
   color: var(--color-text-sub-600);
 }
-.celeste-link-button-error[data-v-ae1aba17]:not(.celeste-link-button-disabled) {
+.celeste-link-button-error[data-v-82b3b1ab]:not(.celeste-link-button-disabled) {
   color: var(--color-state-error-base);
 }
-.celeste-link-button-error[data-v-ae1aba17]:not(.celeste-link-button-disabled):hover, .celeste-link-button-error[data-v-ae1aba17]:not(.celeste-link-button-disabled):focus {
+.celeste-link-button-error[data-v-82b3b1ab]:not(.celeste-link-button-disabled):hover, .celeste-link-button-error[data-v-82b3b1ab]:not(.celeste-link-button-disabled):focus {
   color: var(--color-red-700);
 }@property --celeste-social-button-bg {
   syntax: "<color>";
@@ -1843,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-3fcea99c] {
+}.celeste-text-input-wrapper[data-v-105e81d6] {
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -1860,28 +1860,28 @@ to {
   font: var(--paragraph-sm);
   gap: var(--input-gap);
 }
-.celeste-text-input-wrapper[size=xs][data-v-3fcea99c] {
+.celeste-text-input-wrapper[size=xs][data-v-105e81d6] {
   --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-3fcea99c] {
+.celeste-text-input-wrapper[size=sm][data-v-105e81d6] {
   --input-gap: 6px;
   --input-height: 36px;
   --input-radius: var(--radius-8);
   --input-padding: var(--spacing-8);
 }
-.celeste-text-input-wrapper[size=md][data-v-3fcea99c] {
+.celeste-text-input-wrapper[size=md][data-v-105e81d6] {
   --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-3fcea99c] {
+.celeste-text-input-wrapper[has-error=true][data-v-105e81d6] {
   border-color: var(--color-state-error-base);
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-3fcea99c] {
+.celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6] {
   width: 100%;
   height: 100%;
   padding: 0;
@@ -1891,90 +1891,90 @@ to {
   color: inherit;
   font: inherit;
 }
-.celeste-text-input-wrapper .celeste-text-input[data-v-3fcea99c]::-moz-placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6]::-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-3fcea99c]::placeholder {
+.celeste-text-input-wrapper .celeste-text-input[data-v-105e81d6]::placeholder {
   transition: color var(--animation-fast) ease-out;
   color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:focus) {
+.celeste-text-input-wrapper[data-v-105e81d6]: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-3fcea99c] {
+.celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-105e81d6] {
   border-color: var(--color-state-error-base);
   outline-color: var(--color-state-error-lighter);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:disabled) {
+.celeste-text-input-wrapper[data-v-105e81d6]: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-3fcea99c]::-moz-placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-105e81d6]::-moz-placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-3fcea99c]::placeholder {
+.celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-105e81d6]::placeholder {
   color: currentcolor;
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
+.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:disabled) .celeste-text-input-icon {
   color: var(--color-icon-disabled-300);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:disabled) .celeste-text-input-affix, .celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:disabled) .celeste-text-input-button {
+.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 {
   background-color: var(--color-bg-weak-50) !important;
   color: var(--color-text-disabled-300);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input-button, .celeste-text-input-affix[inline=false][askbd=false]) {
+.celeste-text-input-wrapper[data-v-105e81d6]: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-3fcea99c] {
+.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] {
   padding-inline-end: var(--input-padding);
   border-inline-end: 1px solid var(--color-stroke-soft-200);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]: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-105e81d6]: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-3fcea99c] {
+.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] {
   padding-inline-start: var(--input-padding);
   border-inline-start: 1px solid var(--color-stroke-soft-200);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]: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-105e81d6]: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-3fcea99c]: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-105e81d6]: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-3fcea99c]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
+.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:hover:not(:focus, :disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
+.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;
   background-color: var(--color-bg-weak-50);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]: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-105e81d6]: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-3fcea99c]::-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-105e81d6]::-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-3fcea99c]::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-105e81d6]::placeholder {
   color: var(--color-text-sub-600);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
+.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
+.celeste-text-input-wrapper[data-v-105e81d6]:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
   /* stylelint-disable-next-line no-descending-specificity */
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:-moz-placeholder:not(:disabled)) .celeste-text-input-affix {
+.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 {
   color: var(--color-text-soft-400);
 }
-.celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-icon, .celeste-text-input-wrapper[data-v-3fcea99c]:has(.celeste-text-input:placeholder-shown:not(:disabled)) .celeste-text-input-affix {
+.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 {
   color: var(--color-text-soft-400);
 }[data-v-2cc18da8] {
   box-sizing: border-box;

package/dist/cjs/link-button.js

@@ -8,7 +8,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
   __name: "link-button",
   props: {
     class: {},
-    size: { default: "sm" },
+    size: { default: "md" },
     intent: { default: "primary" },
     underline: { type: Boolean },
     disabled: { type: Boolean },
@@ -40,5 +40,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const linkButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ae1aba17"]]);
+const linkButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-82b3b1ab"]]);
 module.exports = linkButton;

package/dist/cjs/text-input.js

@@ -19,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     const props = __props;
     const modelValue = Mo.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createElementBlock("div", {
+      return Mo.openBlock(), Mo.createElementBlock("label", {
         size: _ctx.size,
         role: "presentation",
         "has-error": _ctx.hasError,
@@ -38,5 +38,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-3fcea99c"]]);
+const TextInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-105e81d6"]]);
 module.exports = TextInput;

package/dist/components/text-input/text-input.d.ts

@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     size: "xs" | "sm" | "md";
     type: "text" | "email" | "password" | "search" | "tel" | "url";
     hasError: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/es/link-button.js

@@ -7,7 +7,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "link-button",
   props: {
     class: {},
-    size: { default: "sm" },
+    size: { default: "md" },
     intent: { default: "primary" },
     underline: { type: Boolean },
     disabled: { type: Boolean },
@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const linkButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ae1aba17"]]);
+const linkButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82b3b1ab"]]);
 export {
   linkButton as default
 };

package/dist/es/text-input.js

@@ -18,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock("label", {
         size: _ctx.size,
         role: "presentation",
         "has-error": _ctx.hasError,
@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3fcea99c"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-105e81d6"]]);
 export {
   TextInput as default
 };

package/package.json

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

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

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
 const props = withDefaults(defineProps<LinkButtonProps>(), {
-  size: 'sm',
+  size: 'md',
   intent: 'primary',
   as: 'a',
 });

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

@@ -20,7 +20,7 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
 </script>
 
 <template>
-  <div
+  <label
     :size="size"
     role="presentation"
     :has-error="hasError"
@@ -33,7 +33,7 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
       class="celeste-text-input"
     >
     <slot />
-  </div>
+  </label>
 </template>
 
 <style scoped lang="scss">