@youcan/celeste 0.6.46 → 0.6.48

package/dist/celeste.css

@@ -1903,10 +1903,10 @@ to {
 .celeste-cbutton-white[data-v-c062bacd] {
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-xs);
-}[data-v-1dfcdddc] {
+}[data-v-25983c0a] {
   box-sizing: border-box;
 }
-.celeste-checkbox-card[data-v-1dfcdddc] {
+.celeste-checkbox-card[data-v-25983c0a] {
   display: flex;
   align-items: flex-start;
   padding: var(--spacing-16);
@@ -1919,21 +1919,21 @@ to {
   font: var(--paragraph-sm);
   gap: var(--spacing-14);
 }
-.celeste-checkbox-card[data-v-1dfcdddc]:not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-25983c0a]:not(.celeste-checkbox-card-disabled) {
   cursor: pointer;
 }
-.celeste-checkbox-card[data-v-1dfcdddc]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-25983c0a]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
   border-color: var(--color-primary-base);
   box-shadow: none;
 }
-.celeste-checkbox-card[data-v-1dfcdddc]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-1dfcdddc]:focus-visible:not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-25983c0a]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-25983c0a]:focus-visible:not(.celeste-checkbox-card-disabled) {
   background-color: var(--color-bg-weak-50);
   box-shadow: none;
 }
-.celeste-checkbox-card[data-v-1dfcdddc]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-1dfcdddc]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
+.celeste-checkbox-card[data-v-25983c0a]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-25983c0a]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
   border-color: transparent;
 }
-.celeste-checkbox-card-preview[data-v-1dfcdddc] {
+.celeste-checkbox-card-preview[data-v-25983c0a] {
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -1947,12 +1947,15 @@ to {
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-xs);
 }
-.celeste-checkbox-card-preview-icon i[data-v-1dfcdddc] {
+.celeste-checkbox-card-preview-icon i[data-v-25983c0a] {
   width: 20px;
   height: 20px;
   color: var(--color-icon-sub-600);
 }
-.celeste-checkbox-card-preview-image i[data-v-1dfcdddc] {
+.celeste-checkbox-card-preview-image[data-v-25983c0a] {
+  border: none;
+}
+.celeste-checkbox-card-preview-image i[data-v-25983c0a] {
   position: absolute;
   z-index: 0;
   top: 50%;
@@ -1962,27 +1965,21 @@ to {
   transform: translate(-50%, -50%);
   color: var(--color-icon-sub-600);
 }
-.celeste-checkbox-card-preview-image[data-v-1dfcdddc] img {
+.celeste-checkbox-card-preview-image[data-v-25983c0a] img {
   z-index: 1000;
 }
-.celeste-checkbox-card-preview-image[data-v-1dfcdddc] :has(img) {
-  border: none;
-}
-.celeste-checkbox-card-preview-image :has(img) i[data-v-1dfcdddc] {
-  display: none;
-}
-.celeste-checkbox-card-content[data-v-1dfcdddc] {
+.celeste-checkbox-card-content[data-v-25983c0a] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
 }
-.celeste-checkbox-card-row[data-v-1dfcdddc] {
+.celeste-checkbox-card-row[data-v-25983c0a] {
   display: flex;
   flex-shrink: 1;
   align-items: center;
   gap: var(--spacing-8);
 }
-.celeste-checkbox-card-label[data-v-1dfcdddc] {
+.celeste-checkbox-card-label[data-v-25983c0a] {
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
@@ -1991,7 +1988,7 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-checkbox-card-sublabel[data-v-1dfcdddc] {
+.celeste-checkbox-card-sublabel[data-v-25983c0a] {
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
@@ -2000,20 +1997,20 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-checkbox-card-description[data-v-1dfcdddc] {
+.celeste-checkbox-card-description[data-v-25983c0a] {
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);
 }
-.celeste-checkbox-card-disabled[data-v-1dfcdddc] {
+.celeste-checkbox-card-disabled[data-v-25983c0a] {
   cursor: not-allowed;
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-1dfcdddc] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-25983c0a] {
   color: var(--color-text-sub-600);
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-1dfcdddc] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-25983c0a] {
   color: var(--color-text-soft-400);
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-1dfcdddc] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-25983c0a] {
   color: var(--color-text-soft-400);
 }.celeste-checkbox-label[data-v-ad0a5759] {
   display: flex;
@@ -3778,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;
@@ -3791,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;
@@ -3818,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/checkbox-card.js

@@ -106,5 +106,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-1dfcdddc"]]);
+const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-25983c0a"]]);
 module.exports = checkboxCard;

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/checkbox-card.js

@@ -105,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1dfcdddc"]]);
+const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-25983c0a"]]);
 export {
   checkboxCard as default
 };

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.46",
+  "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-icons": "0.6.46",
-    "@youcan/celeste-tokens": "0.6.46"
+    "@youcan/celeste-tokens": "0.6.48",
+    "@youcan/celeste-icons": "0.6.48"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

package/src/components/checkbox/checkbox-card.vue

@@ -148,6 +148,8 @@ const delegatedProps = useDelegatedProps(props, 'class');
 }
 
 .celeste-checkbox-card-preview-image {
+  border: none;
+
   i {
     position: absolute;
     z-index: 0;
@@ -162,14 +164,6 @@ const delegatedProps = useDelegatedProps(props, 'class');
   :deep(img) {
     z-index: 1000;
   }
-
-  :has(img) {
-    border: none;
-
-    i {
-      display: none;
-    }
-  }
 }
 
 .celeste-checkbox-card-content {

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>