@youcan/celeste 0.23.0 → 0.24.1

package/dist/cjs/chunks/alpha-slider.cjs

@@ -49,7 +49,7 @@ var alpha_slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (left < 0) a = 0;
 			else if (left > containerWidth) a = 1;
 			else a = Math.round(left * 100 / containerWidth) / 100;
-			if (alpha.value !== a) tinyColorRef.value = tinyColorRef.value.setAlpha(a).clone();
+			if (alpha.value !== a) tinyColorRef.value = tinyColorRef.value.clone().setAlpha(a);
 		}
 		function handleMouseDown(e) {
 			handleChange(e, true);
@@ -77,7 +77,7 @@ var alpha_slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					break;
 				case "right": newValue = currentValue + .1 > 1 ? 1 : currentValue + .1;
 			}
-			if (typeof newValue !== "undefined") tinyColorRef.value = tinyColorRef.value.setAlpha(newValue).clone();
+			if (typeof newValue !== "undefined") tinyColorRef.value = tinyColorRef.value.clone().setAlpha(newValue);
 		}
 		(0, vue.onUnmounted)(() => {
 			unbindEventListeners();

package/dist/cjs/chunks/button.cjs

@@ -18,6 +18,8 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
 		size: { default: "md" },
 		intent: { default: "primary" },
 		variant: { default: "fill" },
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -27,13 +29,17 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.Primitive), {
 				as: __props.as,
 				"as-child": __props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(clsx.default)("celeste-button", `celeste-button-intent-${__props.intent}`, `celeste-button-size-${__props.size}`, `celeste-button-variant-${__props.variant}`, props.class))
+				disabled: __props.disabled || __props.loading || void 0,
+				"aria-busy": __props.loading || void 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(clsx.default)("celeste-button", `celeste-button-intent-${__props.intent}`, `celeste-button-size-${__props.size}`, `celeste-button-variant-${__props.variant}`, __props.loading && !__props.asChild && "celeste-button-loading", props.class))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+				default: (0, vue.withCtx)(() => [__props.asChild ? (0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true, 0) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true), _cache[0] || (_cache[0] = (0, vue.createElementVNode)("i", { class: "celeste-button-spinner i-celeste-loader-5-line" }, null, -1))], 64))]),
 				_: 3
 			}, 8, [
 				"as",
 				"as-child",
+				"disabled",
+				"aria-busy",
 				"class"
 			]);
 		};
@@ -41,7 +47,7 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
 });
 //#endregion
 //#region src/components/button/button.vue
-var button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0aeead06"]]);
+var button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-30b82d15"]]);
 //#endregion
 Object.defineProperty(exports, "button_default", {
 	enumerable: true,

package/dist/cjs/chunks/color-picker.cjs

@@ -56,7 +56,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
-		(0, vue.useCssVars)((_ctx) => ({ "v819487ba": _ctx.modelValue }));
+		(0, vue.useCssVars)((_ctx) => ({ "a8e11cca": _ctx.modelValue }));
 		const props = __props;
 		const emit = __emit;
 		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
@@ -166,7 +166,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 			const alphaInput = event.target?.value;
 			const alphaValue = require_color.truncColorValue(alphaInput) / 100;
 			if (Number.isNaN(alphaValue)) return;
-			tinyColorRef.value = tinyColorRef.value.setAlpha(Math.max(0, Math.min(1, alphaValue)));
+			tinyColorRef.value = tinyColorRef.value.clone().setAlpha(Math.max(0, Math.min(1, alphaValue)));
 		}
 		function handleColorValueKeyDown(event, key) {
 			const direction = require_color.resolveArrowDirection(event);
@@ -473,7 +473,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 });
 //#endregion
 //#region src/components/color-picker/color-picker.vue
-var color_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bf0ff694"]]);
+var color_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9aff48b3"]]);
 //#endregion
 Object.defineProperty(exports, "color_picker_default", {
 	enumerable: true,

package/dist/cjs/chunks/compact-button.cjs

@@ -42,7 +42,7 @@ var compact_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (
 });
 //#endregion
 //#region src/components/button/compact-button.vue
-var compact_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(compact_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bcc27daf"]]);
+var compact_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(compact_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0727facf"]]);
 //#endregion
 Object.defineProperty(exports, "compact_button_default", {
 	enumerable: true,

package/dist/cjs/chunks/fancy-button.cjs

@@ -17,6 +17,8 @@ var fancy_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 		] },
 		size: { default: "md" },
 		intent: { default: "primary" },
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -26,13 +28,17 @@ var fancy_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.Primitive), {
 				as: __props.as,
 				"as-child": __props.asChild,
-				class: (0, vue.normalizeClass)((0, vue.unref)(clsx.default)("celeste-fbutton", `celeste-fbutton-${__props.intent}`, `celeste-fbutton-${__props.size}`, props.class))
+				disabled: __props.disabled || __props.loading || void 0,
+				"aria-busy": __props.loading || void 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(clsx.default)("celeste-fbutton", `celeste-fbutton-${__props.intent}`, `celeste-fbutton-${__props.size}`, __props.loading && !__props.asChild && "celeste-fbutton-loading", props.class))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+				default: (0, vue.withCtx)(() => [__props.asChild ? (0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true, 0) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true), _cache[0] || (_cache[0] = (0, vue.createElementVNode)("i", { class: "celeste-fbutton-spinner i-celeste-loader-5-line" }, null, -1))], 64))]),
 				_: 3
 			}, 8, [
 				"as",
 				"as-child",
+				"disabled",
+				"aria-busy",
 				"class"
 			]);
 		};
@@ -40,7 +46,7 @@ var fancy_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 });
 //#endregion
 //#region src/components/button/fancy-button.vue
-var fancy_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(fancy_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d53adf47"]]);
+var fancy_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(fancy_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9098298e"]]);
 //#endregion
 Object.defineProperty(exports, "fancy_button_default", {
 	enumerable: true,

package/dist/cjs/chunks/social-button.cjs

@@ -34,7 +34,7 @@ var social_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 });
 //#endregion
 //#region src/components/button/social-button.vue
-var social_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(social_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3652f72b"]]);
+var social_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(social_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-85544f28"]]);
 //#endregion
 Object.defineProperty(exports, "social_button_default", {
 	enumerable: true,

package/dist/cjs/chunks/text-input-button.cjs

@@ -17,6 +17,8 @@ var text_input_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			Array
 		] },
 		intent: {},
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: {},
 		inline: {

package/dist/cjs/chunks/tooltip-content.cjs

@@ -109,7 +109,7 @@ var tooltip_content_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 });
 //#endregion
 //#region src/components/tooltip/tooltip-content.vue
-var tooltip_content_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(tooltip_content_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-cf42d877"]]);
+var tooltip_content_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(tooltip_content_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5dc414bd"]]);
 //#endregion
 Object.defineProperty(exports, "tooltip_content_default", {
 	enumerable: true,

package/dist/cjs/chunks/tooltip-root.cjs

@@ -1,4 +1,3 @@
-const require_use_delegated_props = require("../use-delegated-props.cjs");
 let vue = require("vue");
 let reka_ui = require("reka-ui");
 //#endregion
@@ -16,19 +15,12 @@ var tooltip_root_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emits = __emit;
-		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "open");
-		const forwarded = (0, reka_ui.useForwardPropsEmits)(delegatedProps, emits);
-		const open = (0, vue.ref)(false);
+		const forwarded = (0, reka_ui.useForwardPropsEmits)(__props, __emit);
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TooltipRoot), (0, vue.mergeProps)((0, vue.unref)(forwarded), {
-				open: open.value,
-				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
-			}), {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.TooltipRoot), (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(forwarded))), {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 				_: 3
-			}, 16, ["open"]);
+			}, 16);
 		};
 	}
 });

package/dist/components/button/button.d.ts

@@ -5,10 +5,14 @@ export interface ButtonProps extends PrimitiveProps {
     size?: 'xxs' | 'xs' | 'sm' | 'md';
     intent?: 'primary' | 'neutral' | 'error';
     variant?: 'fill' | 'stroke' | 'lighter' | 'ghost';
+    disabled?: boolean;
+    loading?: boolean;
 }
-declare var __VLS_8: {};
+declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     size: "xxs" | "xs" | "sm" | "md";

package/dist/components/button/fancy-button.d.ts

@@ -4,10 +4,14 @@ export interface FancyButtonProps extends PrimitiveProps {
     class?: HTMLAttributes['class'];
     size?: 'xs' | 'sm' | 'md';
     intent?: 'primary' | 'neutral' | 'error' | 'basic';
+    disabled?: boolean;
+    loading?: boolean;
 }
-declare var __VLS_8: {};
+declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<FancyButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FancyButtonProps> & Readonly<{}>, {
     size: "xs" | "sm" | "md";

package/dist/es/chunks/alpha-slider.js

@@ -49,7 +49,7 @@ var alpha_slider_default = /* @__PURE__ */ defineComponent({
 			if (left < 0) a = 0;
 			else if (left > containerWidth) a = 1;
 			else a = Math.round(left * 100 / containerWidth) / 100;
-			if (alpha.value !== a) tinyColorRef.value = tinyColorRef.value.setAlpha(a).clone();
+			if (alpha.value !== a) tinyColorRef.value = tinyColorRef.value.clone().setAlpha(a);
 		}
 		function handleMouseDown(e) {
 			handleChange(e, true);
@@ -77,7 +77,7 @@ var alpha_slider_default = /* @__PURE__ */ defineComponent({
 					break;
 				case "right": newValue = currentValue + .1 > 1 ? 1 : currentValue + .1;
 			}
-			if (typeof newValue !== "undefined") tinyColorRef.value = tinyColorRef.value.setAlpha(newValue).clone();
+			if (typeof newValue !== "undefined") tinyColorRef.value = tinyColorRef.value.clone().setAlpha(newValue);
 		}
 		onUnmounted(() => {
 			unbindEventListeners();

package/dist/es/chunks/button.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { Fragment, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
 import clsx$1 from "clsx";
 import { Primitive } from "reka-ui";
 //#endregion
@@ -17,6 +17,8 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		size: { default: "md" },
 		intent: { default: "primary" },
 		variant: { default: "fill" },
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -26,17 +28,21 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			return openBlock(), createBlock(unref(Primitive), {
 				as: __props.as,
 				"as-child": __props.asChild,
-				class: normalizeClass(unref(clsx$1)("celeste-button", `celeste-button-intent-${__props.intent}`, `celeste-button-size-${__props.size}`, `celeste-button-variant-${__props.variant}`, props.class))
+				disabled: __props.disabled || __props.loading || void 0,
+				"aria-busy": __props.loading || void 0,
+				class: normalizeClass(unref(clsx$1)("celeste-button", `celeste-button-intent-${__props.intent}`, `celeste-button-size-${__props.size}`, `celeste-button-variant-${__props.variant}`, __props.loading && !__props.asChild && "celeste-button-loading", props.class))
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				default: withCtx(() => [__props.asChild ? renderSlot(_ctx.$slots, "default", {}, void 0, true, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [renderSlot(_ctx.$slots, "default", {}, void 0, true), _cache[0] || (_cache[0] = createElementVNode("i", { class: "celeste-button-spinner i-celeste-loader-5-line" }, null, -1))], 64))]),
 				_: 3
 			}, 8, [
 				"as",
 				"as-child",
+				"disabled",
+				"aria-busy",
 				"class"
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-0aeead06"]]);
+}), [["__scopeId", "data-v-30b82d15"]]);
 //#endregion
 export { button_default as t };

package/dist/es/chunks/color-picker.js

@@ -56,7 +56,7 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
-		useCssVars((_ctx) => ({ "v819487ba": _ctx.modelValue }));
+		useCssVars((_ctx) => ({ "a8e11cca": _ctx.modelValue }));
 		const props = __props;
 		const emit = __emit;
 		const delegatedProps = useDelegatedProps(props, "class");
@@ -166,7 +166,7 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			const alphaInput = event.target?.value;
 			const alphaValue = truncColorValue(alphaInput) / 100;
 			if (Number.isNaN(alphaValue)) return;
-			tinyColorRef.value = tinyColorRef.value.setAlpha(Math.max(0, Math.min(1, alphaValue)));
+			tinyColorRef.value = tinyColorRef.value.clone().setAlpha(Math.max(0, Math.min(1, alphaValue)));
 		}
 		function handleColorValueKeyDown(event, key) {
 			const direction = resolveArrowDirection(event);
@@ -470,6 +470,6 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			});
 		};
 	}
-}), [["__scopeId", "data-v-bf0ff694"]]);
+}), [["__scopeId", "data-v-9aff48b3"]]);
 //#endregion
 export { color_picker_default as t };

package/dist/es/chunks/compact-button.js

@@ -38,6 +38,6 @@ var compact_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-bcc27daf"]]);
+}), [["__scopeId", "data-v-0727facf"]]);
 //#endregion
 export { compact_button_default as t };

package/dist/es/chunks/fancy-button.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { Fragment, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
 import clsx$1 from "clsx";
 import { Primitive } from "reka-ui";
 //#endregion
@@ -16,6 +16,8 @@ var fancy_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		] },
 		size: { default: "md" },
 		intent: { default: "primary" },
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
@@ -25,17 +27,21 @@ var fancy_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			return openBlock(), createBlock(unref(Primitive), {
 				as: __props.as,
 				"as-child": __props.asChild,
-				class: normalizeClass(unref(clsx$1)("celeste-fbutton", `celeste-fbutton-${__props.intent}`, `celeste-fbutton-${__props.size}`, props.class))
+				disabled: __props.disabled || __props.loading || void 0,
+				"aria-busy": __props.loading || void 0,
+				class: normalizeClass(unref(clsx$1)("celeste-fbutton", `celeste-fbutton-${__props.intent}`, `celeste-fbutton-${__props.size}`, __props.loading && !__props.asChild && "celeste-fbutton-loading", props.class))
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				default: withCtx(() => [__props.asChild ? renderSlot(_ctx.$slots, "default", {}, void 0, true, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [renderSlot(_ctx.$slots, "default", {}, void 0, true), _cache[0] || (_cache[0] = createElementVNode("i", { class: "celeste-fbutton-spinner i-celeste-loader-5-line" }, null, -1))], 64))]),
 				_: 3
 			}, 8, [
 				"as",
 				"as-child",
+				"disabled",
+				"aria-busy",
 				"class"
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-d53adf47"]]);
+}), [["__scopeId", "data-v-9098298e"]]);
 //#endregion
 export { fancy_button_default as t };

package/dist/es/chunks/social-button.js

@@ -31,6 +31,6 @@ var social_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, 8, ["aria-label", "class"]);
 		};
 	}
-}), [["__scopeId", "data-v-3652f72b"]]);
+}), [["__scopeId", "data-v-85544f28"]]);
 //#endregion
 export { social_button_default as t };

package/dist/es/chunks/text-input-button.js

@@ -16,6 +16,8 @@ var text_input_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			Array
 		] },
 		intent: {},
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		asChild: { type: Boolean },
 		as: {},
 		inline: {

package/dist/es/chunks/tooltip-content.js

@@ -106,6 +106,6 @@ var tooltip_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			});
 		};
 	}
-}), [["__scopeId", "data-v-cf42d877"]]);
+}), [["__scopeId", "data-v-5dc414bd"]]);
 //#endregion
 export { tooltip_content_default as t };

package/dist/es/chunks/tooltip-root.js

@@ -1,5 +1,4 @@
-import { useDelegatedProps } from "../use-delegated-props.js";
-import { createBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
 import { TooltipRoot, useForwardPropsEmits } from "reka-ui";
 //#endregion
 //#region src/components/tooltip/tooltip-root.vue
@@ -16,19 +15,12 @@ var tooltip_root_default = /* @__PURE__ */ defineComponent({
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emits = __emit;
-		const delegatedProps = useDelegatedProps(props, "open");
-		const forwarded = useForwardPropsEmits(delegatedProps, emits);
-		const open = ref(false);
+		const forwarded = useForwardPropsEmits(__props, __emit);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(TooltipRoot), mergeProps(unref(forwarded), {
-				open: open.value,
-				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
-			}), {
+			return openBlock(), createBlock(unref(TooltipRoot), normalizeProps(guardReactiveProps(unref(forwarded))), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 16, ["open"]);
+			}, 16);
 		};
 	}
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -52,8 +52,8 @@
     "reka-ui": "~2.10.5",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-tokens": "0.23.0",
-    "@youcan/celeste-icons": "0.23.0"
+    "@youcan/celeste-icons": "0.24.1",
+    "@youcan/celeste-tokens": "0.24.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

package/src/components/button/button.vue

@@ -9,6 +9,8 @@ export interface ButtonProps extends PrimitiveProps {
   size?: 'xxs' | 'xs' | 'sm' | 'md';
   intent?: 'primary' | 'neutral' | 'error';
   variant?: 'fill' | 'stroke' | 'lighter' | 'ghost';
+  disabled?: boolean;
+  loading?: boolean;
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
@@ -23,15 +25,22 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   <Primitive
     :as
     :as-child
+    :disabled="disabled || loading || undefined"
+    :aria-busy="loading || undefined"
     :class="clsx(
       'celeste-button',
       `celeste-button-intent-${intent}`,
       `celeste-button-size-${size}`,
       `celeste-button-variant-${variant}`,
+      loading && !asChild && 'celeste-button-loading',
       props.class,
     )"
   >
-    <slot />
+    <slot v-if="asChild" />
+    <template v-else>
+      <slot />
+      <i class="celeste-button-spinner i-celeste-loader-5-line" />
+    </template>
   </Primitive>
 </template>
 
@@ -216,6 +225,7 @@ $hover-map: (
 
 .celeste-button {
   display: inline-flex;
+  position: relative;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
@@ -229,8 +239,9 @@ $hover-map: (
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
+  user-select: none;
 
-  &:disabled {
+  &:disabled:not(&-loading) {
     background-color: var(--color-bg-weak-50);
     color: var(--color-text-disabled-300);
     cursor: default;
@@ -249,7 +260,8 @@ $hover-map: (
       padding: map.get($v, padding);
       border-radius: map.get($v, border-radius);
 
-      &:has(> :only-child:is(i)) {
+      &:has(> :only-child:is(i):not(.celeste-button-spinner)),
+      &:has(> i:first-child + .celeste-button-spinner:last-child) {
         padding: list.nth(map.get($v, padding), 1);
       }
     }
@@ -257,11 +269,17 @@ $hover-map: (
 
   @each $intent, $sub in $intent-map {
     @each $variant, $values in $sub {
-      &-intent-#{$intent}:not(:disabled).celeste-button-variant-#{$variant}:not(:disabled) {
+      &-intent-#{$intent}.celeste-button-variant-#{$variant}:not(:disabled:not(.celeste-button-loading)) {
+        --celeste-button-fg: #{map.get($values, fg)};
+
         border-color: map.get($values, border);
         background-color: map.get($values, bg);
         box-shadow: map.get($values, shadow);
-        color: map.get($values, fg);
+        color: var(--celeste-button-fg);
+
+        &.celeste-button-loading {
+          color: transparent;
+        }
 
         &:hover:not(:disabled) {
           $hover-values: map.get(map.get($hover-map, $intent), $variant);
@@ -283,4 +301,40 @@ $hover-map: (
     }
   }
 }
+
+.celeste-button-loading {
+  pointer-events: none;
+}
+
+.celeste-button-spinner {
+  position: absolute;
+  margin: auto;
+  transition-property: opacity, scale;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  animation: celeste-button-spin 600ms linear infinite paused;
+  opacity: 0;
+  color: var(--celeste-button-fg);
+  inset: 0;
+  scale: 0.9;
+}
+
+.celeste-button-loading > .celeste-button-spinner {
+  animation-play-state: running;
+  opacity: 1;
+  scale: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .celeste-button-spinner {
+    animation-duration: 1200ms;
+    scale: 1;
+  }
+}
+
+@keyframes celeste-button-spin {
+  100% {
+    rotate: 360deg;
+  }
+}
 </style>

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

@@ -51,6 +51,7 @@ const props = withDefaults(defineProps<CompactButtonProps>(), {
   font: var(--label-sm);
   text-decoration: none;
   cursor: pointer;
+  user-select: none;
   gap: var(--spacing-2);
 
   &:disabled {