@youcan/celeste 0.24.0 → 0.24.1

package/ai/README.md

@@ -1,6 +1,6 @@
 # Celeste agent indexes
 
-Generated from source for `@youcan/celeste@0.24.0`. Do not edit.
+Generated from source for `@youcan/celeste@0.24.1`. Do not edit.
 
 - `component-registry.json` — every component's props, events, slots, story and usage example, and
   every exported helper such as `toast`

package/ai/component-registry.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.24.0",
-  "generatedAt": "2026-10-18T01:45:45.102Z",
+  "version": "0.24.1",
+  "generatedAt": "2026-11-03T17:10:21.051Z",
   "components": {
     "Alert": {
       "name": "Alert",

package/ai/icons.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.24.0",
-  "generatedAt": "2026-10-18T01:45:41.805Z",
+  "version": "0.24.1",
+  "generatedAt": "2026-11-03T17:10:17.688Z",
   "prefix": "celeste",
   "icons": [
     {

package/ai/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.24.0",
-  "generatedAt": "2026-10-18T01:45:41.805Z",
+  "version": "0.24.1",
+  "generatedAt": "2026-11-03T17:10:17.688Z",
   "tokens": [
     {
       "name": "animation-extra-fast",

package/dist/celeste.css

@@ -2594,7 +2594,7 @@ to {
 }
 .celeste-text-input-wrapper[data-v-3af287ef] .celeste-text-input-trailing-node::after {
   inset-inline-start: 0;
-}[data-v-cf42d877] .celeste-tooltip-content {
+}[data-v-5dc414bd] .celeste-tooltip-content {
   display: flex;
   position: relative;
   z-index: 50;
@@ -2610,35 +2610,35 @@ to {
   gap: var(--spacing-12);
   scale: 0.98;
 }
-[data-v-cf42d877] .celeste-tooltip-content[data-state=delayed-open] {
-  animation-name: open-cf42d877;
+[data-v-5dc414bd] .celeste-tooltip-content[data-state$=open] {
+  animation-name: open-5dc414bd;
 }
-[data-v-cf42d877] .celeste-tooltip-content[data-state=closed][data-side=left] {
-  animation-name: close-left-cf42d877;
+[data-v-5dc414bd] .celeste-tooltip-content[data-state=closed][data-side=left] {
+  animation-name: close-left-5dc414bd;
 }
-[data-v-cf42d877] .celeste-tooltip-content[data-state=closed][data-side=right] {
-  animation-name: close-right-cf42d877;
+[data-v-5dc414bd] .celeste-tooltip-content[data-state=closed][data-side=right] {
+  animation-name: close-right-5dc414bd;
 }
-[data-v-cf42d877] .celeste-tooltip-content[data-state=closed][data-side=top] {
-  animation-name: close-top-cf42d877;
+[data-v-5dc414bd] .celeste-tooltip-content[data-state=closed][data-side=top] {
+  animation-name: close-top-5dc414bd;
 }
-[data-v-cf42d877] .celeste-tooltip-content[data-state=closed][data-side=bottom] {
-  animation-name: close-bottom-cf42d877;
+[data-v-5dc414bd] .celeste-tooltip-content[data-state=closed][data-side=bottom] {
+  animation-name: close-bottom-5dc414bd;
 }
-[data-v-cf42d877] .celeste-tooltip-content .celeste-tooltip-content-box {
+[data-v-5dc414bd] .celeste-tooltip-content .celeste-tooltip-content-box {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
 }
-[data-v-cf42d877] .celeste-tooltip-content .celeste-tooltip-content-box .celeste-tooltip-content-description {
+[data-v-5dc414bd] .celeste-tooltip-content .celeste-tooltip-content-box .celeste-tooltip-content-description {
   font: var(--paragraph-xs);
 }
-[data-v-cf42d877] .celeste-tooltip-content .celeste-tooltip-content-icon {
+[data-v-5dc414bd] .celeste-tooltip-content .celeste-tooltip-content-icon {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
 }
-[data-v-cf42d877] .celeste-tooltip-content .celeste-tooltip-content-arrow {
+[data-v-5dc414bd] .celeste-tooltip-content .celeste-tooltip-content-arrow {
   --tooltip-arrow-size: 8px;
   position: absolute;
   width: var(--tooltip-arrow-size);
@@ -2651,71 +2651,71 @@ to {
   inset-inline-start: calc(var(--tooltip-arrow-size) / 2 * -1);
   inset-block-start: calc((var(--tooltip-arrow-size) / 2 + 1px) * -1);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=light] {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=light] {
   border-color: var(--color-stroke-soft-200);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=light] .celeste-tooltip-content-icon {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=light] .celeste-tooltip-content-icon {
   color: var(--color-icon-sub-600);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=light] .celeste-tooltip-content-title {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=light] .celeste-tooltip-content-title {
   color: var(--color-text-strong-950);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=light] .celeste-tooltip-content-description {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=light] .celeste-tooltip-content-description {
   color: var(--color-text-sub-600);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=light] .celeste-tooltip-content-arrow {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=light] .celeste-tooltip-content-arrow {
   border-color: var(--color-stroke-soft-200);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=dark] {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=dark] {
   background-color: var(--color-bg-strong-950);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=dark] .celeste-tooltip-content-icon {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=dark] .celeste-tooltip-content-icon {
   color: var(--color-icon-soft-400);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=dark] .celeste-tooltip-content-title {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=dark] .celeste-tooltip-content-title {
   color: var(--color-text-white-0);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=dark] .celeste-tooltip-content-description {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=dark] .celeste-tooltip-content-description {
   color: var(--color-text-soft-400);
 }
-[data-v-cf42d877] .celeste-tooltip-content[variant=dark] .celeste-tooltip-content-arrow {
+[data-v-5dc414bd] .celeste-tooltip-content[variant=dark] .celeste-tooltip-content-arrow {
   background-color: var(--color-bg-strong-950);
 }
-[data-v-cf42d877] .celeste-tooltip-content[size=xs] {
+[data-v-5dc414bd] .celeste-tooltip-content[size=xs] {
   padding: var(--spacing-2) var(--spacing-6);
   border-radius: var(--radius-4);
 }
-[data-v-cf42d877] .celeste-tooltip-content[size=xs] .celeste-tooltip-content-title {
+[data-v-5dc414bd] .celeste-tooltip-content[size=xs] .celeste-tooltip-content-title {
   font: var(--paragraph-xs);
 }
-[data-v-cf42d877] .celeste-tooltip-content[size=sm] {
+[data-v-5dc414bd] .celeste-tooltip-content[size=sm] {
   padding: var(--spacing-4) var(--spacing-10);
   border-radius: var(--radius-6);
 }
-[data-v-cf42d877] .celeste-tooltip-content[size=sm] .celeste-tooltip-content-title {
+[data-v-5dc414bd] .celeste-tooltip-content[size=sm] .celeste-tooltip-content-title {
   font: var(--paragraph-sm);
 }
-[data-v-cf42d877] .celeste-tooltip-content[size=md] {
+[data-v-5dc414bd] .celeste-tooltip-content[size=md] {
   padding: var(--spacing-12);
   border-radius: var(--radius-12);
 }
-[data-v-cf42d877] .celeste-tooltip-content[size=md] .celeste-tooltip-content-title {
+[data-v-5dc414bd] .celeste-tooltip-content[size=md] .celeste-tooltip-content-title {
   font: var(--label-sm);
 }
-[data-v-cf42d877] .celeste-tooltip-content[data-side=left] .celeste-tooltip-content-arrow,[data-v-cf42d877] .celeste-tooltip-content[data-side=right] .celeste-tooltip-content-arrow {
+[data-v-5dc414bd] .celeste-tooltip-content[data-side=left] .celeste-tooltip-content-arrow,[data-v-5dc414bd] .celeste-tooltip-content[data-side=right] .celeste-tooltip-content-arrow {
   translate: calc(var(--tooltip-arrow-size) / 4 * -1) 0;
 }
-[data-v-cf42d877] .celeste-tooltip-content:has(button):not(:has(.celeste-tooltip-content-description)) {
+[data-v-5dc414bd] .celeste-tooltip-content:has(button):not(:has(.celeste-tooltip-content-description)) {
   align-items: center;
 }
-@keyframes open-cf42d877 {
+@keyframes open-5dc414bd {
 to {
     translate: 0;
     opacity: 1;
     scale: 1;
 }
 }
-@keyframes close-left-cf42d877 {
+@keyframes close-left-5dc414bd {
 from {
     translate: 0;
     opacity: 1;
@@ -2727,7 +2727,7 @@ to {
     opacity: 0;
 }
 }
-@keyframes close-right-cf42d877 {
+@keyframes close-right-5dc414bd {
 from {
     translate: 0;
     opacity: 1;
@@ -2739,7 +2739,7 @@ to {
     opacity: 0;
 }
 }
-@keyframes close-top-cf42d877 {
+@keyframes close-top-5dc414bd {
 from {
     translate: 0;
     opacity: 1;
@@ -2751,7 +2751,7 @@ to {
     opacity: 0;
 }
 }
-@keyframes close-bottom-cf42d877 {
+@keyframes close-bottom-5dc414bd {
 from {
     translate: 0;
     opacity: 1;
@@ -3290,24 +3290,24 @@ to {
   cursor: pointer;
 }.celeste-color-slider .slider-track[data-v-3ca280fa] {
   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-}.celeste-picker-trigger[data-v-bf0ff694] {
+}.celeste-picker-trigger[data-v-9aff48b3] {
   gap: var(--spacing-12);
 }
-.celeste-picker-trigger .celeste-selected-color[data-v-bf0ff694] {
+.celeste-picker-trigger .celeste-selected-color[data-v-9aff48b3] {
   --color-tile-size: 20px;
   display: block;
   width: var(--color-tile-size);
   height: var(--color-tile-size);
   border: 1px solid var(--color-bg-soft-200);
   border-radius: var(--radius-4);
-  background-color: var(--v819487ba);
+  background-color: var(--a8e11cca);
 }
-.celeste-color-picker-wrapper[data-v-bf0ff694] {
+.celeste-color-picker-wrapper[data-v-9aff48b3] {
   display: grid;
   box-sizing: border-box;
   width: 272px;
 }
-.celeste-color-picker-wrapper .celeste-color-picker[data-v-bf0ff694] {
+.celeste-color-picker-wrapper .celeste-color-picker[data-v-9aff48b3] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3315,71 +3315,71 @@ to {
   padding: var(--spacing-16);
   gap: var(--spacing-12);
 }
-.celeste-color-picker-wrapper .celeste-color-picker[data-v-bf0ff694] > * {
+.celeste-color-picker-wrapper .celeste-color-picker[data-v-9aff48b3] > * {
   box-sizing: border-box;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel[data-v-bf0ff694] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel[data-v-9aff48b3] {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: var(--spacing-4);
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-selected-color-format[data-v-bf0ff694] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-selected-color-format[data-v-9aff48b3] {
   text-transform: uppercase;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-bf0ff694] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-9aff48b3] {
   display: flex;
   width: 100%;
   height: 32px;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-bf0ff694] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-9aff48b3] {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-bf0ff694]:focus-within {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-sip[data-v-9aff48b3]:focus-within {
   z-index: 2;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-bf0ff694] > * {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls[data-v-9aff48b3] > * {
   box-sizing: border-box;
   height: 100%;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs[data-v-bf0ff694] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs[data-v-9aff48b3] {
   display: flex;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694] {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-9aff48b3] {
   margin-inline-start: -1px;
   border-radius: 0;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:focus-within {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-9aff48b3]:focus-within {
   z-index: 2;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:last-child {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-9aff48b3]:last-child {
   border-start-end-radius: var(--radius-8);
   border-end-end-radius: var(--radius-8);
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:first-child:nth-last-child(4), .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:first-child:nth-last-child(4) ~ * {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-9aff48b3]:first-child:nth-last-child(4), .celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-9aff48b3]:first-child:nth-last-child(4) ~ * {
   flex: 1;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:first-child:nth-last-child(2) {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-9aff48b3]:first-child:nth-last-child(2) {
   flex: 3;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-bf0ff694]:last-child:nth-child(2) {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs .color-input[data-v-9aff48b3]:last-child:nth-child(2) {
   flex: 1;
 }
-.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs:first-child:last-child .color-input[data-v-bf0ff694]:first-child {
+.celeste-color-picker-wrapper .celeste-color-picker .celeste-color-control-panel .celeste-color-controls .celeste-color-format-inputs:first-child:last-child .color-input[data-v-9aff48b3]:first-child {
   border-start-start-radius: var(--radius-8);
   border-end-start-radius: var(--radius-8);
 }
-.celeste-color-picker-wrapper .celeste-color-swatches[data-v-bf0ff694] {
+.celeste-color-picker-wrapper .celeste-color-swatches[data-v-9aff48b3] {
   display: flex;
   flex-direction: column;
   padding: var(--radius-16);
   border-block-start: 1px solid var(--color-stroke-soft-200);
 }
-[data-v-bf0ff694] .celeste-color-format {
+[data-v-9aff48b3] .celeste-color-format {
   text-transform: uppercase;
 }
-[data-v-bf0ff694] .celeste-color-thumb {
+[data-v-9aff48b3] .celeste-color-thumb {
   position: absolute;
   width: 12px;
   height: 12px;
@@ -3387,18 +3387,18 @@ to {
   border-radius: 50%;
   box-shadow: 0 0 0 2px var(--color-bg-white-0), var(--shadow-toggle-switch);
 }
-[data-v-bf0ff694] .celeste-color-slider {
+[data-v-9aff48b3] .celeste-color-slider {
   --track-height: 8px;
   width: 100%;
   padding-block: var(--spacing-4);
 }
-[data-v-bf0ff694] .celeste-color-slider .slider-track {
+[data-v-9aff48b3] .celeste-color-slider .slider-track {
   position: relative;
   width: 100%;
   height: var(--track-height);
   border-radius: calc(var(--track-height) / 2);
 }
-[data-v-bf0ff694] .celeste-color-slider .slider-track .celeste-color-thumb {
+[data-v-9aff48b3] .celeste-color-slider .slider-track .celeste-color-thumb {
   top: calc(var(--track-height) / 2);
 }.celeste-dropdown-empty-list[data-v-4423b209] {
   display: flex;

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/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/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/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/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/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.24.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-icons": "0.24.0",
-    "@youcan/celeste-tokens": "0.24.0"
+    "@youcan/celeste-icons": "0.24.1",
+    "@youcan/celeste-tokens": "0.24.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

package/src/components/color-picker/alpha-slider.vue

@@ -71,7 +71,7 @@ function handleChange(e: MouseEvent | TouchEvent, skip = false) {
   }
 
   if (alpha.value !== a) {
-    tinyColorRef.value = tinyColorRef.value.setAlpha(a).clone();
+    tinyColorRef.value = tinyColorRef.value.clone().setAlpha(a);
   }
 }
 
@@ -115,7 +115,7 @@ function handleKeydown(e: KeyboardEvent) {
     }
   }
   if (typeof newValue !== 'undefined') {
-    tinyColorRef.value = tinyColorRef.value.setAlpha(newValue).clone();
+    tinyColorRef.value = tinyColorRef.value.clone().setAlpha(newValue);
   }
 }
 

package/src/components/color-picker/color-picker.vue

@@ -235,7 +235,7 @@ function inputChangeAlpha(event: Event) {
     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: KeyboardEvent, key: ColorKey) {

package/src/components/tooltip/tooltip-content.vue

@@ -88,7 +88,7 @@ function handleDismiss() {
   gap: var(--spacing-12);
   scale: 0.98;
 
-  &[data-state='delayed-open'] {
+  &[data-state$='open'] {
     animation-name: open;
   }
 

package/src/components/tooltip/tooltip-root.vue

@@ -1,22 +1,17 @@
 <script setup lang="ts">
 import type { TooltipRootProps as PrimitiveProps, TooltipRootEmits } from 'reka-ui';
 import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
-import { ref } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 export interface TooltipRootProps extends PrimitiveProps {}
 
 const props = defineProps<TooltipRootProps>();
 const emits = defineEmits<TooltipRootEmits>();
 
-const delegatedProps = useDelegatedProps(props, 'open');
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-
-const open = ref(false);
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <TooltipRoot v-bind="forwarded" v-model:open="open">
+  <TooltipRoot v-bind="forwarded">
     <slot />
   </TooltipRoot>
 </template>