@youcan/celeste 0.6.101 → 0.6.102

package/dist/celeste.css

@@ -3259,36 +3259,33 @@ to {
 }
 .celeste-hint-text-error i[data-v-42c3df99] {
   color: var(--color-state-error-base);
-}.celeste-label[data-v-896f427f] {
+}.celeste-label[data-v-958f80b5] {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
   color: var(--color-text-strong-950);
   font: var(--label-sm);
 }
-.celeste-label[data-v-896f427f]:has(> a) > *:last-child {
+.celeste-label[data-v-958f80b5]:has(> a) > *:last-child {
   flex: 2;
 }
-.celeste-label[aria-required=true][data-v-896f427f]::after {
+.celeste-label[aria-required=true][data-v-958f80b5]::after {
   content: "*";
   order: 2;
   color: var(--color-primary-base);
 }
-.celeste-label[data-v-896f427f]:not(:has(> .celeste-sublabel, > .celeste-label-info, .celeste-label[aria-required=true])) > * {
+.celeste-label[data-v-958f80b5]:not(:has(> .celeste-sublabel, > .celeste-label-info, .celeste-label[aria-required=true])) > * {
   flex: none;
 }
-.celeste-label:not(:has(> .celeste-sublabel, > .celeste-label-info, .celeste-label[aria-required=true]))[aria-required=false][data-v-896f427f] {
-  justify-content: space-between;
-}
-.celeste-label:not(:has(> .celeste-sublabel, > .celeste-label-info, .celeste-label[aria-required=true]))[aria-required=true][data-v-896f427f]::after {
+.celeste-label:not(:has(> .celeste-sublabel, > .celeste-label-info, .celeste-label[aria-required=true]))[aria-required=true][data-v-958f80b5]::after {
   flex: 2;
 }
-.celeste-label .celeste-sublabel[data-v-896f427f] {
+.celeste-label .celeste-sublabel[data-v-958f80b5] {
   order: 3;
   color: var(--color-text-sub-600);
   font: var(--paragraph-sm);
 }
-.celeste-label .celeste-label-info[data-v-896f427f] {
+.celeste-label .celeste-label-info[data-v-958f80b5] {
   display: flex;
   align-items: center;
   order: 4;
@@ -3297,15 +3294,16 @@ to {
   background-color: transparent;
   color: var(--color-icon-disabled-300);
 }
-.celeste-label .celeste-label-button[data-v-896f427f] {
+.celeste-label .celeste-label-button[data-v-958f80b5] {
   order: 5;
+  margin-inline-start: auto;
 }
-.celeste-label[aria-disabled=true][data-v-896f427f] {
+.celeste-label[aria-disabled=true][data-v-958f80b5] {
   color: var(--color-text-disabled-300);
   pointer-events: none;
 }
-.celeste-label[aria-disabled=true][data-v-896f427f]::after, .celeste-label[aria-disabled=true][data-v-896f427f] >  a,
-.celeste-label[aria-disabled=true] .celeste-sublabel[data-v-896f427f] {
+.celeste-label[aria-disabled=true][data-v-958f80b5]::after, .celeste-label[aria-disabled=true][data-v-958f80b5] >  a,
+.celeste-label[aria-disabled=true] .celeste-sublabel[data-v-958f80b5] {
   color: inherit;
 }.celeste-switch {
   --width: 26px;

package/dist/cjs/chunks/label.cjs

@@ -5,8 +5,7 @@ const require_use_delegated_props = require("../use-delegated-props.cjs");
 const require_tooltip = require("./tooltip.cjs");
 let vue = require("vue");
 //#region src/components/label/label.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "celeste-label-text" };
-var _hoisted_2 = {
+var _hoisted_1 = {
 	key: 0,
 	class: "celeste-sublabel"
 };
@@ -32,9 +31,15 @@ var label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 				class: (0, vue.unref)(require_clsx.clsx)("celeste-label", props.class)
 			}), {
 				default: (0, vue.withCtx)(() => [
-					(0, vue.createElementVNode)("span", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
-					(0, vue.renderSlot)(_ctx.$slots, "button", { class: "celeste-label-button" }, void 0, true),
-					_ctx.sublabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, (0, vue.toDisplayString)(_ctx.sublabel), 1)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true),
+					(0, vue.createVNode)((0, vue.unref)(require_dist.O), {
+						class: "celeste-label-button",
+						"as-child": ""
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "button", {}, void 0, true)]),
+						_: 3
+					}),
+					_ctx.sublabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1, (0, vue.toDisplayString)(_ctx.sublabel), 1)) : (0, vue.createCommentVNode)("", true),
 					_ctx.information ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_tooltip.tooltip_default, {
 						key: 1,
 						title: _ctx.information
@@ -54,7 +59,7 @@ var label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 });
 //#endregion
 //#region src/components/label/label.vue
-var label_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(label_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-896f427f"]]);
+var label_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(label_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-958f80b5"]]);
 //#endregion
 Object.defineProperty(exports, "label_default", {
 	enumerable: true,

package/dist/components/label/label.d.ts

@@ -7,13 +7,11 @@ type __VLS_Props = LabelProps & {
     disabled?: boolean;
     class?: HTMLAttributes['class'];
 };
-declare var __VLS_8: {}, __VLS_10: {
-    class: string;
-};
+declare var __VLS_8: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 } & {
-    button?: (props: typeof __VLS_10) => any;
+    button?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/es/chunks/label.js

@@ -1,12 +1,11 @@
-import { U as Vh } from "./dist.js";
+import { D as O, U as Vh } from "./dist.js";
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
 import { t as tooltip_default } from "./tooltip.js";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/label/label.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "celeste-label-text" };
-var _hoisted_2 = {
+var _hoisted_1 = {
 	key: 0,
 	class: "celeste-sublabel"
 };
@@ -34,9 +33,15 @@ var label_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE
 				class: unref(clsx)("celeste-label", props.class)
 			}), {
 				default: withCtx(() => [
-					createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
-					renderSlot(_ctx.$slots, "button", { class: "celeste-label-button" }, void 0, true),
-					_ctx.sublabel ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.sublabel), 1)) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "default", {}, void 0, true),
+					createVNode(unref(O), {
+						class: "celeste-label-button",
+						"as-child": ""
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "button", {}, void 0, true)]),
+						_: 3
+					}),
+					_ctx.sublabel ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.sublabel), 1)) : createCommentVNode("", true),
 					_ctx.information ? (openBlock(), createBlock(tooltip_default, {
 						key: 1,
 						title: _ctx.information
@@ -53,6 +58,6 @@ var label_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-896f427f"]]);
+}), [["__scopeId", "data-v-958f80b5"]]);
 //#endregion
 export { label_default as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.101",
+  "version": "0.6.102",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -48,8 +48,8 @@
     "radix-vue": "^1.9.17",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.6.101",
-    "@youcan/celeste-tokens": "0.6.101"
+    "@youcan/celeste-icons": "0.6.102",
+    "@youcan/celeste-tokens": "0.6.102"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

package/src/components/label/label.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Label, type LabelProps } from 'radix-vue';
+import { Label, type LabelProps, Primitive } from 'radix-vue';
 import Tooltip from '@/components/tooltip/tooltip.vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
@@ -23,8 +23,12 @@ const delegatedProps = useDelegatedProps(props, 'class');
     :aria-disabled="disabled"
     :class="clsx('celeste-label', props.class)"
   >
-    <span class="celeste-label-text"><slot /></span>
-    <slot name="button" class="celeste-label-button" />
+    <slot />
+
+    <Primitive class="celeste-label-button" as-child>
+      <slot name="button" />
+    </Primitive>
+
     <span v-if="sublabel" class="celeste-sublabel">{{ sublabel }}</span>
     <Tooltip
       v-if="information"
@@ -60,10 +64,6 @@ const delegatedProps = useDelegatedProps(props, 'class');
       flex: none;
     }
 
-    &[aria-required='false'] {
-      justify-content: space-between;
-    }
-
     &[aria-required='true']::after {
       flex: 2;
     }
@@ -87,6 +87,7 @@ const delegatedProps = useDelegatedProps(props, 'class');
 
   .celeste-label-button {
     order: 5;
+    margin-inline-start: auto;
   }
 
   &[aria-disabled='true'] {