@youcan/celeste 0.6.48 → 0.6.49

package/dist/celeste.css

@@ -3775,7 +3775,7 @@ to {
 .celeste-modal-header:has(.description)[data-type=error] .icon[data-v-a655071e] {
   background: var(--color-state-error-lighter);
   color: var(--color-state-error-base);
-}[data-v-700edccc] .celeste-popover-content-wrapper {
+}[data-v-68656929] .celeste-popover-content-wrapper {
   z-index: 50;
   min-width: 200px;
   max-width: 400px;
@@ -3788,20 +3788,20 @@ to {
   box-shadow: var(--shadow-regular-md);
   scale: 0.95;
 }
-[data-v-700edccc] .celeste-popover-content-wrapper[data-state=open] {
-  animation-name: open-700edccc;
+[data-v-68656929] .celeste-popover-content-wrapper[data-state=open] {
+  animation-name: open-68656929;
 }
-[data-v-700edccc] .celeste-popover-content-wrapper[data-state=closed] {
-  animation-name: close-700edccc;
+[data-v-68656929] .celeste-popover-content-wrapper[data-state=closed] {
+  animation-name: close-68656929;
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-arrow {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-arrow {
   display: block;
   position: relative;
   width: 16px;
   height: 8px;
   overflow: hidden;
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
   content: "";
   display: block;
   position: absolute;
@@ -3815,75 +3815,76 @@ to {
   background-color: var(--color-bg-white-0);
   rotate: 45deg;
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-close-button {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-close-button {
   position: absolute;
+  z-index: 50;
   inset-inline-end: var(--spacing-16);
   inset-block-start: var(--spacing-16);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-8);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
   margin: var(--spacing-0);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title {
   color: var(--color-text-strong-950);
   font: var(--label-md);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
   color: var(--color-text-sub-600);
   font: var(--paragraph-sm);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon {
   box-sizing: border-box;
   margin-block-end: var(--spacing-16);
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: 50%;
   color: var(--color-icon-sub-600);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=sm] {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=sm] {
   width: 32px;
   height: 32px;
   padding: var(--spacing-6);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=md] {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=md] {
   width: 40px;
   height: 40px;
   padding: var(--spacing-6);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=lg] {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=lg] {
   width: 48px;
   height: 48px;
   padding: var(--spacing-12);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xl] {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xl] {
   width: 56px;
   height: 56px;
   padding: var(--spacing-14);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xxl] {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xxl] {
   width: 64px;
   height: 64px;
   padding: var(--spacing-16);
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon i {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon i {
   width: 100%;
   height: 100%;
 }
-[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-footer {
+[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-footer {
   display: flex;
   padding: var(--spacing-16);
   border-block-start: 1px solid var(--color-stroke-soft-200);
 }
-@keyframes open-700edccc {
+@keyframes open-68656929 {
 to {
     opacity: 1;
     scale: 1;
 }
 }
-@keyframes close-700edccc {
+@keyframes close-68656929 {
 from {
     opacity: 1;
     scale: 1;

package/dist/cjs/popover-content.js

@@ -42,14 +42,11 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
         default: Mo.withCtx(() => [
           Mo.createVNode(Mo.unref(index.ws), Mo.mergeProps({ ...Mo.unref(forwarded), ..._ctx.$attrs }, {
             "side-offset": Mo.unref(sideOffset),
-            class: Mo.unref(clsx.clsx)(
-              "celeste-popover-content-wrapper",
-              props.class
-            )
+            class: "celeste-popover-content-wrapper"
           }), {
             default: Mo.withCtx(() => [
               Mo.createElementVNode("div", {
-                class: "celeste-popover-content",
+                class: Mo.normalizeClass(Mo.unref(clsx.clsx)("celeste-popover-content", props.class)),
                 style: Mo.normalizeStyle({ padding: !_ctx.$slots.default ? "var(--spacing-16)" : "" })
               }, [
                 !_ctx.$slots.default ? (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, { key: 0 }, [
@@ -65,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
                   Mo.createElementVNode("p", _hoisted_2, Mo.toDisplayString(_ctx.title), 1),
                   Mo.createElementVNode("p", _hoisted_3, Mo.toDisplayString(_ctx.description), 1)
                 ], 64)) : Mo.renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)
-              ], 4),
+              ], 6),
               _ctx.showTail ? (Mo.openBlock(), Mo.createBlock(Mo.unref(index._s), {
                 key: 0,
                 "as-child": "",
@@ -97,12 +94,12 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
               ])) : Mo.createCommentVNode("", true)
             ]),
             _: 3
-          }, 16, ["side-offset", "class"])
+          }, 16, ["side-offset"])
         ]),
         _: 3
       });
     };
   }
 });
-const PopoverContent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-700edccc"]]);
+const PopoverContent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-68656929"]]);
 module.exports = PopoverContent;

package/dist/es/popover-content.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createElementVNode, normalizeStyle, createElementBlock, Fragment, normalizeClass, createCommentVNode, toDisplayString, renderSlot } from "vue";
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, Fragment, createCommentVNode, toDisplayString, renderSlot } from "vue";
 import CompactButton from "./compact-button.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
@@ -41,14 +41,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(ws), mergeProps({ ...unref(forwarded), ..._ctx.$attrs }, {
             "side-offset": unref(sideOffset),
-            class: unref(clsx)(
-              "celeste-popover-content-wrapper",
-              props.class
-            )
+            class: "celeste-popover-content-wrapper"
           }), {
             default: withCtx(() => [
               createElementVNode("div", {
-                class: "celeste-popover-content",
+                class: normalizeClass(unref(clsx)("celeste-popover-content", props.class)),
                 style: normalizeStyle({ padding: !_ctx.$slots.default ? "var(--spacing-16)" : "" })
               }, [
                 !_ctx.$slots.default ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -64,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createElementVNode("p", _hoisted_2, toDisplayString(_ctx.title), 1),
                   createElementVNode("p", _hoisted_3, toDisplayString(_ctx.description), 1)
                 ], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)
-              ], 4),
+              ], 6),
               _ctx.showTail ? (openBlock(), createBlock(unref(_s), {
                 key: 0,
                 "as-child": "",
@@ -96,14 +93,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("", true)
             ]),
             _: 3
-          }, 16, ["side-offset", "class"])
+          }, 16, ["side-offset"])
         ]),
         _: 3
       });
     };
   }
 });
-const PopoverContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-700edccc"]]);
+const PopoverContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-68656929"]]);
 export {
   PopoverContent as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.48",
+  "version": "0.6.49",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,8 +44,8 @@
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-tokens": "0.6.48",
-    "@youcan/celeste-icons": "0.6.48"
+    "@youcan/celeste-icons": "0.6.49",
+    "@youcan/celeste-tokens": "0.6.49"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

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

@@ -56,15 +56,10 @@ export interface PopoverContentProps {
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
       :side-offset="sideOffset"
-      :class="
-        clsx(
-          'celeste-popover-content-wrapper',
-          props.class,
-        )
-      "
+      class="celeste-popover-content-wrapper"
     >
       <div
-        class="celeste-popover-content"
+        :class="clsx('celeste-popover-content', props.class)"
         :style="{ padding: !$slots.default ? 'var(--spacing-16)' : '' }"
       >
         <template v-if="!$slots.default">
@@ -185,6 +180,7 @@ $icon-size-map: (
 
   .celeste-popover-close-button {
     position: absolute;
+    z-index: 50;
     inset-inline-end: var(--spacing-16);
     inset-block-start: var(--spacing-16);
   }