@youcan/celeste 0.6.61 → 0.6.63

package/dist/celeste.css

@@ -1277,7 +1277,7 @@ to {
   border-color: var(--color-stroke-soft-200);
   background-color: var(--color-bg-white-0);
   color: var(--color-state-faded-base);
-}.celeste-button[data-v-ba4c26eb] {
+}.celeste-button[data-v-6c1800fd] {
   display: inline-flex;
   box-sizing: border-box;
   align-items: center;
@@ -1292,217 +1292,229 @@ to {
   text-decoration: none;
   cursor: pointer;
 }
-.celeste-button[data-v-ba4c26eb]:disabled {
+.celeste-button[data-v-6c1800fd]:disabled {
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-disabled-300);
   cursor: default;
 }
-.celeste-button[data-v-ba4c26eb] i {
+.celeste-button[data-v-6c1800fd] i {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
 }
-.celeste-button-size-xxs[data-v-ba4c26eb] {
+.celeste-button-size-xxs[data-v-6c1800fd] {
   gap: var(--spacing-4);
   height: 28px;
   padding: var(--spacing-4) var(--spacing-6);
   border-radius: var(--radius-8);
 }
-.celeste-button-size-xs[data-v-ba4c26eb] {
+.celeste-button-size-xxs[data-v-6c1800fd]:has(> :only-child:is(i)) {
+  padding: var(--spacing-4);
+}
+.celeste-button-size-xs[data-v-6c1800fd] {
   gap: var(--spacing-4);
   height: 32px;
   padding: var(--spacing-6) var(--spacing-8);
   border-radius: var(--radius-8);
 }
-.celeste-button-size-sm[data-v-ba4c26eb] {
+.celeste-button-size-xs[data-v-6c1800fd]:has(> :only-child:is(i)) {
+  padding: var(--spacing-6);
+}
+.celeste-button-size-sm[data-v-6c1800fd] {
   gap: var(--spacing-6);
   height: 36px;
   padding: var(--spacing-8) var(--spacing-10);
   border-radius: var(--radius-8);
 }
-.celeste-button-size-md[data-v-ba4c26eb] {
+.celeste-button-size-sm[data-v-6c1800fd]:has(> :only-child:is(i)) {
+  padding: var(--spacing-8);
+}
+.celeste-button-size-md[data-v-6c1800fd] {
   gap: var(--spacing-6);
   height: 40px;
   padding: var(--spacing-10) var(--spacing-12);
   border-radius: var(--radius-10);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-size-md[data-v-6c1800fd]:has(> :only-child:is(i)) {
+  padding: var(--spacing-10);
+}
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-primary-base);
   background-color: var(--color-primary-base);
   box-shadow: none;
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-primary-darker);
   background-color: var(--color-primary-darker);
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-primary-focus);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-primary-base);
   background-color: transparent;
   box-shadow: none;
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-primary-alpha-10);
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-primary-focus);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-primary-alpha-10);
   box-shadow: none;
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-primary-base);
   background-color: transparent;
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-primary-focus);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-primary-alpha-10);
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-primary-focus);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-bg-strong-950);
   background-color: var(--color-bg-strong-950);
   box-shadow: none;
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-bg-surface-800);
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-bg-soft-200);
   background-color: transparent;
   box-shadow: var(--shadow-regular-xs);
   color: var(--color-text-sub-600);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-strong-950);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-bg-weak-50);
   background-color: var(--color-bg-weak-50);
   box-shadow: none;
   color: var(--color-text-sub-600);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-bg-soft-200);
   background-color: transparent;
   color: var(--color-text-strong-950);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
   color: var(--color-text-sub-600);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-strong-950);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-state-error-base);
   background-color: var(--color-state-error-base);
   box-shadow: none;
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-red-700);
   background-color: var(--color-red-700);
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-state-error-base);
   background-color: transparent;
   box-shadow: none;
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-red-alpha-10);
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-red-alpha-10);
   box-shadow: none;
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-state-error-base);
   background-color: transparent;
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-red-alpha-10);
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
 }@property --celeste-fbutton-bg-start {
@@ -3301,7 +3313,7 @@ to {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
-}.celeste-dropdown-menu-item[data-v-149975fd] {
+}.celeste-dropdown-menu-item[data-v-1c18b80a] {
   display: flex;
   align-items: center;
   padding: var(--spacing-8);
@@ -3314,21 +3326,21 @@ to {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-dropdown-menu-item i[data-v-149975fd] {
+.celeste-dropdown-menu-item i[data-v-1c18b80a] {
   color: var(--color-icon-sub-600);
 }
-.celeste-dropdown-menu-item[data-v-149975fd]:focus-visible, .celeste-dropdown-menu-item[data-v-149975fd]:not([data-disabled]):hover, .celeste-dropdown-menu-item[data-highlighted][data-v-149975fd] {
+.celeste-dropdown-menu-item[data-v-1c18b80a]:focus-visible, .celeste-dropdown-menu-item[data-v-1c18b80a]:not([data-disabled]):hover, .celeste-dropdown-menu-item[data-highlighted][data-v-1c18b80a] {
   outline: none;
   background: var(--color-bg-weak-50);
 }
-.celeste-dropdown-menu-item .celeste-dropdown-menu-item-body[data-v-149975fd] {
+.celeste-dropdown-menu-item .celeste-dropdown-menu-item-body[data-v-1c18b80a] {
   display: flex;
   flex: 1;
   align-items: center;
   gap: var(--spacing-4);
 }
-.celeste-dropdown-menu-item .celeste-dropdown-menu-item-prefix[data-v-149975fd],
-.celeste-dropdown-menu-item .celeste-dropdown-menu-item-suffix[data-v-149975fd] {
+.celeste-dropdown-menu-item .celeste-dropdown-menu-item-prefix[data-v-1c18b80a],
+.celeste-dropdown-menu-item .celeste-dropdown-menu-item-suffix[data-v-1c18b80a] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3336,20 +3348,20 @@ to {
   height: fit-content;
   color: var(--color-icon-sub-600);
 }
-.celeste-dropdown-menu-item .celeste-dropdown-menu-item-prefix[data-v-149975fd] i,
-.celeste-dropdown-menu-item .celeste-dropdown-menu-item-suffix[data-v-149975fd] i {
+.celeste-dropdown-menu-item .celeste-dropdown-menu-item-prefix[data-v-1c18b80a] i,
+.celeste-dropdown-menu-item .celeste-dropdown-menu-item-suffix[data-v-1c18b80a] i {
   color: var(--color-icon-sub-600);
 }
-.celeste-dropdown-menu-item[data-disabled][data-v-149975fd] {
+.celeste-dropdown-menu-item[data-disabled][data-v-1c18b80a] {
   color: var(--color-text-disabled-300);
-  cursor: auto;
+  pointer-events: none;
 }
-.celeste-dropdown-menu-item[data-disabled] .celeste-dropdown-menu-item-prefix[data-v-149975fd],
-.celeste-dropdown-menu-item[data-disabled] .celeste-dropdown-menu-item-suffix[data-v-149975fd] {
+.celeste-dropdown-menu-item[data-disabled] .celeste-dropdown-menu-item-prefix[data-v-1c18b80a],
+.celeste-dropdown-menu-item[data-disabled] .celeste-dropdown-menu-item-suffix[data-v-1c18b80a] {
   color: var(--color-text-disabled-300);
 }
-.celeste-dropdown-menu-item[data-disabled] .celeste-dropdown-menu-item-prefix[data-v-149975fd] i,
-.celeste-dropdown-menu-item[data-disabled] .celeste-dropdown-menu-item-suffix[data-v-149975fd] i {
+.celeste-dropdown-menu-item[data-disabled] .celeste-dropdown-menu-item-prefix[data-v-1c18b80a] i,
+.celeste-dropdown-menu-item[data-disabled] .celeste-dropdown-menu-item-suffix[data-v-1c18b80a] i {
   color: var(--color-icon-disabled-300);
 }.celeste-dropdown-menu-label[data-v-392ac57c] {
   display: flex;
@@ -3468,7 +3480,7 @@ to {
 }
 .celeste-dropdown-menu-trigger[data-disabled][data-v-003a2030] i {
   color: var(--color-icon-disabled-300);
-}[data-v-3405639f] {
+}[data-v-1da28738] {
   box-sizing: border-box;
 }.celeste-file-upload-area[data-v-cfdea6ac] {
   display: flex;

package/dist/cjs/button.js

@@ -36,5 +36,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const Button = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ba4c26eb"]]);
+const Button = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6c1800fd"]]);
 module.exports = Button;

package/dist/cjs/dropdown-menu-item.js

@@ -50,5 +50,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const dropdownMenuItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-149975fd"]]);
+const dropdownMenuItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-1c18b80a"]]);
 module.exports = dropdownMenuItem;

package/dist/cjs/dropdown-menu.js

@@ -1,6 +1,7 @@
 "use strict";
 const Mo = require("vue");
 const useDelegatedProps = require("./use-delegated-props.js");
+const clsx = require("./chunks/clsx.js");
 const index = require("./chunks/index.js");
 ;/* empty css                                                                      */
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
@@ -10,24 +11,26 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     defaultOpen: { type: Boolean },
     open: { type: Boolean },
     dir: {},
-    modal: { type: Boolean }
+    modal: { type: Boolean },
+    class: {}
   },
-  setup(__props) {
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "open");
-    const open = Mo.ref(false);
+    const emits = __emit;
+    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
+    const forwarded = index.xe(delegatedProps, emits);
     return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.sh), Mo.mergeProps(Mo.unref(delegatedProps), {
-        open: open.value,
-        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.sh), Mo.mergeProps(Mo.unref(forwarded), {
+        class: Mo.unref(clsx.clsx)("celeste-dropdown-menu", props.class)
       }), {
         default: Mo.withCtx(() => [
           Mo.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         _: 3
-      }, 16, ["open"]);
+      }, 16, ["class"]);
     };
   }
 });
-const dropdownMenu = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-3405639f"]]);
+const dropdownMenu = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-1da28738"]]);
 module.exports = dropdownMenu;

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,4 +1,8 @@
+import { HTMLAttributes } from 'vue';
 import { DropdownMenuRootProps } from 'radix-vue';
+type __VLS_Props = DropdownMenuRootProps & {
+    class?: HTMLAttributes['class'];
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,7 +12,11 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<DropdownMenuRootProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DropdownMenuRootProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (payload: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/es/button.js

@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ba4c26eb"]]);
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6c1800fd"]]);
 export {
   Button as default
 };

package/dist/es/dropdown-menu-item.js

@@ -49,7 +49,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const dropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-149975fd"]]);
+const dropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1c18b80a"]]);
 export {
   dropdownMenuItem as default
 };

package/dist/es/dropdown-menu.js

@@ -1,6 +1,7 @@
-import { defineComponent, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
-import { af as sh } from "./chunks/index.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { x as xe, af as sh } from "./chunks/index.js";
 /* empty css                                                                     */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -9,26 +10,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     defaultOpen: { type: Boolean },
     open: { type: Boolean },
     dir: {},
-    modal: { type: Boolean }
+    modal: { type: Boolean },
+    class: {}
   },
-  setup(__props) {
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
-    const delegatedProps = useDelegatedProps(props, "open");
-    const open = ref(false);
+    const emits = __emit;
+    const delegatedProps = useDelegatedProps(props, "class");
+    const forwarded = xe(delegatedProps, emits);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(sh), mergeProps(unref(delegatedProps), {
-        open: open.value,
-        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+      return openBlock(), createBlock(unref(sh), mergeProps(unref(forwarded), {
+        class: unref(clsx)("celeste-dropdown-menu", props.class)
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         _: 3
-      }, 16, ["open"]);
+      }, 16, ["class"]);
     };
   }
 });
-const dropdownMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3405639f"]]);
+const dropdownMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1da28738"]]);
 export {
   dropdownMenu as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.61",
+  "version": "0.6.63",
   "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.61",
-    "@youcan/celeste-tokens": "0.6.61"
+    "@youcan/celeste-icons": "0.6.63",
+    "@youcan/celeste-tokens": "0.6.63"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

package/src/components/button/button.vue

@@ -38,6 +38,7 @@ export interface ButtonProps extends PrimitiveProps {
 
 <style lang="scss" scoped>
 @use 'sass:map';
+@use 'sass:list';
 
 $size-map: (
   'xxs': (
@@ -247,6 +248,10 @@ $hover-map: (
       height: map.get($v, height);
       padding: map.get($v, padding);
       border-radius: map.get($v, border-radius);
+
+      &:has(> :only-child:is(i)) {
+        padding: list.nth(map.get($v, padding), 1);
+      }
     }
   }
 

package/src/components/button/stories/button.stories.ts

@@ -29,3 +29,23 @@ export const Default: Story = {
     `,
   }),
 };
+
+export const IconOnly: Story = {
+  args: {
+    size: 'sm',
+    intent: 'neutral',
+    variant: 'stroke',
+  },
+
+  render: args => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Button v-bind="args">
+        <i class="i-celeste-translate"></i>
+      </Button>
+    `,
+  }),
+};

package/src/components/dropdown-menu/dropdown-menu-item.vue

@@ -78,7 +78,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 
   &[data-disabled] {
     color: var(--color-text-disabled-300);
-    cursor: auto;
+    pointer-events: none;
 
     .celeste-dropdown-menu-item-prefix,
     .celeste-dropdown-menu-item-suffix {

package/src/components/dropdown-menu/dropdown-menu.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
-import { DropdownMenuRoot, type DropdownMenuRootProps } from 'radix-vue';
-import { ref } from 'vue';
+import clsx from 'clsx';
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps } from 'radix-vue';
+import { useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<DropdownMenuRootProps>();
+const props = defineProps<DropdownMenuRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuRootEmits>();
 
-const delegatedProps = useDelegatedProps(props, 'open');
-
-const open = ref(false);
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuRoot v-bind="delegatedProps" v-model:open="open">
+  <DropdownMenuRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-dropdown-menu', props.class)"
+  >
     <slot />
   </DropdownMenuRoot>
 </template>

package/src/components/dropdown-menu/stories/dropdown-menu.stories.ts

@@ -103,7 +103,7 @@ export const Default: Story = {
               <DropdownMenuLabel>
                 Account
               </DropdownMenuLabel>
-              <DropdownMenuItem>
+              <DropdownMenuItem disabled>
                 Add Account
                 <template #prefix>
                   <i class="i-celeste-add-line" />