@youcan/celeste 0.6.47 → 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-fae157b1] .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-fae157b1] .celeste-popover-content-wrapper[data-state=open] {
-  animation-name: open-fae157b1;
+[data-v-68656929] .celeste-popover-content-wrapper[data-state=open] {
+  animation-name: open-68656929;
 }
-[data-v-fae157b1] .celeste-popover-content-wrapper[data-state=closed] {
-  animation-name: close-fae157b1;
+[data-v-68656929] .celeste-popover-content-wrapper[data-state=closed] {
+  animation-name: close-68656929;
 }
-[data-v-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1] .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-fae157b1 {
+@keyframes open-68656929 {
 to {
     opacity: 1;
     scale: 1;
 }
 }
-@keyframes close-fae157b1 {
+@keyframes close-68656929 {
 from {
     opacity: 1;
     scale: 1;

package/dist/cjs/popover-content.js

@@ -20,6 +20,9 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
   props: {
     class: {},
     side: { default: "bottom" },
+    sideOffset: {},
+    align: {},
+    alignOffset: {},
     title: {},
     description: {},
     showTail: { type: Boolean, default: true },
@@ -32,20 +35,18 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     const props = __props;
     const emits = __emit;
     const delegatedProps = useDelegatedProps.useDelegatedProps(props, ["class", "title"]);
+    const sideOffset = props.showTail ? 0 : props.sideOffset ?? 8;
     const forwarded = index.xe(delegatedProps, emits);
     return (_ctx, _cache) => {
       return Mo.openBlock(), Mo.createBlock(Mo.unref(index.bs), null, {
         default: Mo.withCtx(() => [
           Mo.createVNode(Mo.unref(index.ws), Mo.mergeProps({ ...Mo.unref(forwarded), ..._ctx.$attrs }, {
-            "side-offset": _ctx.showTail ? 0 : 8,
-            class: Mo.unref(clsx.clsx)(
-              "celeste-popover-content-wrapper",
-              props.class
-            )
+            "side-offset": Mo.unref(sideOffset),
+            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 }, [
@@ -61,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": "",
@@ -93,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-fae157b1"]]);
+const PopoverContent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-68656929"]]);
 module.exports = PopoverContent;

package/dist/components/popover/popover-content.d.ts

@@ -3,6 +3,9 @@ import { PopoverContentProps as RadixPopoverContentProps } from 'radix-vue';
 export interface PopoverContentProps {
     class?: HTMLAttributes['class'];
     side?: RadixPopoverContentProps['side'];
+    sideOffset?: RadixPopoverContentProps['sideOffset'];
+    align?: RadixPopoverContentProps['align'];
+    alignOffset?: RadixPopoverContentProps['alignOffset'];
     title?: string;
     description?: string;
     showTail?: boolean;

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";
@@ -19,6 +19,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     class: {},
     side: { default: "bottom" },
+    sideOffset: {},
+    align: {},
+    alignOffset: {},
     title: {},
     description: {},
     showTail: { type: Boolean, default: true },
@@ -31,20 +34,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const delegatedProps = useDelegatedProps(props, ["class", "title"]);
+    const sideOffset = props.showTail ? 0 : props.sideOffset ?? 8;
     const forwarded = xe(delegatedProps, emits);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(bs), null, {
         default: withCtx(() => [
           createVNode(unref(ws), mergeProps({ ...unref(forwarded), ..._ctx.$attrs }, {
-            "side-offset": _ctx.showTail ? 0 : 8,
-            class: unref(clsx)(
-              "celeste-popover-content-wrapper",
-              props.class
-            )
+            "side-offset": unref(sideOffset),
+            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 }, [
@@ -60,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": "",
@@ -92,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-fae157b1"]]);
+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.47",
+  "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.47",
-    "@youcan/celeste-icons": "0.6.47"
+    "@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

@@ -30,6 +30,8 @@ const emits = defineEmits<PopoverContentEmits>();
 
 const delegatedProps = useDelegatedProps(props, ['class', 'title']);
 
+const sideOffset = props.showTail ? 0 : props.sideOffset ?? 8;
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
@@ -37,6 +39,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 export interface PopoverContentProps {
   class?: HTMLAttributes['class'];
   side?: RadixPopoverContentProps['side'];
+  sideOffset?: RadixPopoverContentProps['sideOffset'];
+  align?: RadixPopoverContentProps['align'];
+  alignOffset?: RadixPopoverContentProps['alignOffset'];
   title?: string;
   description?: string;
   showTail?: boolean;
@@ -50,16 +55,11 @@ export interface PopoverContentProps {
   <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
-      :side-offset="showTail ? 0 : 8"
-      :class="
-        clsx(
-          'celeste-popover-content-wrapper',
-          props.class,
-        )
-      "
+      :side-offset="sideOffset"
+      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">
@@ -180,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);
   }

package/src/components/popover/stories/popover.stories.ts

@@ -16,6 +16,19 @@ const meta: Meta<typeof PopoverContent> = {
       options: ['top', 'right', 'bottom', 'left'],
       description: 'The preferred side of the trigger to render against when open.',
     },
+    sideOffset: {
+      control: { type: 'number' },
+      description: 'The distance in pixels from the trigger.',
+    },
+    align: {
+      control: { type: 'select' },
+      options: ['start', 'center', 'end'],
+      description: 'The preferred alignment against the trigger. May change when collisions occur.',
+    },
+    alignOffset: {
+      control: { type: 'number' },
+      description: 'An offset in pixels from the start or end alignment options.',
+    },
     title: {
       control: { type: 'text' },
       description: 'The title text for the popover',
@@ -46,6 +59,8 @@ const meta: Meta<typeof PopoverContent> = {
     side: 'bottom',
     title: 'Popover Title',
     description: 'This is the popover description text.',
+    align: 'center',
+    alignOffset: 0,
     showTail: true,
     dismissible: true,
     iconSize: 'lg',
@@ -279,7 +294,7 @@ export const Positioning: Story = {
       return { args };
     },
     template: `
-      <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-gap: var(--spacing-8)">
+      <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; grid-column-gap: 0px; grid-gap: var(--spacing-8)">
         <div />
         <Popover v-bind="args" style="grid-column-start: 2;">
           <PopoverTrigger>