@youcan/celeste 0.6.47 → 0.6.48

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-700edccc] .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-700edccc] .celeste-popover-content-wrapper[data-state=open] {
+  animation-name: open-700edccc;
 }
-[data-v-fae157b1] .celeste-popover-content-wrapper[data-state=closed] {
-  animation-name: close-fae157b1;
+[data-v-700edccc] .celeste-popover-content-wrapper[data-state=closed] {
+  animation-name: close-700edccc;
 }
-[data-v-fae157b1] .celeste-popover-content-wrapper .celeste-popover-arrow {
+[data-v-700edccc] .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-700edccc] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
   content: "";
   display: block;
   position: absolute;
@@ -3815,75 +3815,75 @@ to {
   background-color: var(--color-bg-white-0);
   rotate: 45deg;
 }
-[data-v-fae157b1] .celeste-popover-content-wrapper .celeste-popover-close-button {
+[data-v-700edccc] .celeste-popover-content-wrapper .celeste-popover-close-button {
   position: absolute;
   inset-inline-end: var(--spacing-16);
   inset-block-start: var(--spacing-16);
 }
-[data-v-fae157b1] .celeste-popover-content-wrapper .celeste-popover-content {
+[data-v-700edccc] .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-700edccc] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-700edccc] .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-700edccc] .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-700edccc] .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-700edccc] .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-700edccc] .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-700edccc] .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-700edccc] .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-700edccc] .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-700edccc] .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-700edccc] .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-700edccc] .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-700edccc {
 to {
     opacity: 1;
     scale: 1;
 }
 }
-@keyframes close-fae157b1 {
+@keyframes close-700edccc {
 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,12 +35,13 @@ 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,
+            "side-offset": Mo.unref(sideOffset),
             class: Mo.unref(clsx.clsx)(
               "celeste-popover-content-wrapper",
               props.class
@@ -100,5 +104,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-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-700edccc"]]);
 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

@@ -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,12 +34,13 @@ 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,
+            "side-offset": unref(sideOffset),
             class: unref(clsx)(
               "celeste-popover-content-wrapper",
               props.class
@@ -99,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PopoverContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fae157b1"]]);
+const PopoverContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-700edccc"]]);
 export {
   PopoverContent as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.47",
+  "version": "0.6.48",
   "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-tokens": "0.6.48",
+    "@youcan/celeste-icons": "0.6.48"
   },
   "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,7 +55,7 @@ export interface PopoverContentProps {
   <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
-      :side-offset="showTail ? 0 : 8"
+      :side-offset="sideOffset"
       :class="
         clsx(
           'celeste-popover-content-wrapper',

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>