@youcan/celeste 0.14.1 → 0.16.0

package/dist/celeste.css

@@ -3039,21 +3039,21 @@ to {
   height: 40px;
   padding: var(--spacing-10);
   border-radius: var(--radius-10);
-}[data-v-ed0b4dd2] {
+}[data-v-f1dfb246] {
   box-sizing: border-box;
 }
-.celeste-dropdown-anchor-trigger-prefix[data-v-ed0b4dd2] {
+.celeste-dropdown-anchor-trigger-prefix[data-v-f1dfb246] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger-prefix-selected[data-v-ed0b4dd2] {
+.celeste-dropdown-anchor-trigger-prefix-selected[data-v-f1dfb246] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-item-image[data-v-ed0b4dd2],
-.selected-dropdown-image[data-v-ed0b4dd2] {
+.celeste-dropdown-item-image[data-v-f1dfb246],
+.selected-dropdown-image[data-v-f1dfb246] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3063,7 +3063,7 @@ to {
      object-fit: cover;
   border-radius: var(--radius-full);
 }
-.celeste-dropdown-trigger-label[data-v-ed0b4dd2] {
+.celeste-dropdown-trigger-label[data-v-f1dfb246] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -3075,12 +3075,12 @@ to {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-dropdown-trigger-label span[data-v-ed0b4dd2] {
+.celeste-dropdown-trigger-label span[data-v-f1dfb246] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-dropdown-trigger[data-v-ed0b4dd2] {
+.celeste-dropdown-trigger[data-v-f1dfb246] {
   display: flex;
   place-items: center center;
   transition-property: transform;
@@ -3091,7 +3091,7 @@ to {
   color: var(--color-icon-soft-400);
   cursor: pointer;
 }
-.celeste-dropdown-inner-input[data-v-ed0b4dd2] {
+.celeste-dropdown-inner-input[data-v-f1dfb246] {
   display: flex;
   position: sticky;
   z-index: 50;
@@ -3100,7 +3100,7 @@ to {
   gap: var(--spacing-4);
   background-color: var(--color-bg-white-0);
 }
-.celeste-dropdown-inner-input.sr-only[data-v-ed0b4dd2] {
+.celeste-dropdown-inner-input.sr-only[data-v-f1dfb246] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -3430,7 +3430,253 @@ to {
   align-items: center;
   max-width: 100%;
   gap: var(--spacing-10);
-}[data-v-9a689ae5] .celeste-dropdown-menu-content {
+}
+.celeste-drawer-body[data-v-8f9ed572] {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.celeste-drawer-overlay[data-v-3dfcd198] {
+  position: fixed;
+  z-index: 50;
+  transition: opacity 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  opacity: calc(1 - var(--drawer-swipe-progress, 0));
+  background: var(--color-overlay-overlay);
+  inset: 0;
+  backdrop-filter: blur(10px);
+}
+.celeste-drawer-overlay[data-state='open'][data-v-3dfcd198] {
+    animation: celeste-drawer-fade-in-3dfcd198 450ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.celeste-drawer-overlay[data-state='closed'][data-v-3dfcd198] {
+    animation: celeste-drawer-fade-out-3dfcd198 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+}
+.celeste-drawer-overlay[data-swiping][data-v-3dfcd198] {
+    transition-duration: 0ms;
+}
+.celeste-drawer-content[data-v-3dfcd198] {
+  --drawer-duration: 450ms;
+  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  display: flex;
+  position: fixed;
+  z-index: 50;
+  flex-direction: column;
+  transition: transform var(--drawer-duration) var(--drawer-ease);
+  outline: none;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+}
+.celeste-drawer-content[data-swiping][data-v-3dfcd198] {
+    transition-duration: 0ms;
+}
+.celeste-drawer-content[data-swipe-direction='right'][data-v-3dfcd198],.celeste-drawer-content[data-swipe-direction='left'][data-v-3dfcd198] {
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: 400px;
+    transform: translateX(var(--drawer-swipe-movement-x, 0%));
+}
+.celeste-drawer-content[data-swipe-direction='right'][data-v-3dfcd198] {
+    right: 0;
+    border-left: 1px solid var(--color-stroke-soft-200);
+}
+.celeste-drawer-content[data-swipe-direction='right'][data-state='open'][data-v-3dfcd198] {
+      animation: celeste-drawer-in-right-3dfcd198 var(--drawer-duration) var(--drawer-ease);
+}
+.celeste-drawer-content[data-swipe-direction='right'][data-state='closed'][data-v-3dfcd198] {
+      animation: celeste-drawer-out-right-3dfcd198 300ms var(--drawer-ease) forwards;
+}
+.celeste-drawer-content[data-swipe-direction='left'][data-v-3dfcd198] {
+    left: 0;
+    border-right: 1px solid var(--color-stroke-soft-200);
+}
+.celeste-drawer-content[data-swipe-direction='left'][data-state='open'][data-v-3dfcd198] {
+      animation: celeste-drawer-in-left-3dfcd198 var(--drawer-duration) var(--drawer-ease);
+}
+.celeste-drawer-content[data-swipe-direction='left'][data-state='closed'][data-v-3dfcd198] {
+      animation: celeste-drawer-out-left-3dfcd198 300ms var(--drawer-ease) forwards;
+}
+.celeste-drawer-content[data-swipe-direction='down'][data-v-3dfcd198],.celeste-drawer-content[data-swipe-direction='up'][data-v-3dfcd198] {
+    right: 0;
+    left: 0;
+    max-height: calc(100dvh - var(--spacing-48));
+    transform: translateY(calc(var(--drawer-snap-point-offset, 0%) + var(--drawer-swipe-movement-y, 0%)));
+}
+.celeste-drawer-content[data-swipe-direction='down'][data-v-3dfcd198] {
+    bottom: 0;
+    border-top: 1px solid var(--color-stroke-soft-200);
+    border-radius: var(--radius-20) var(--radius-20) 0 0;
+}
+.celeste-drawer-content[data-swipe-direction='down'][data-state='open'][data-v-3dfcd198] {
+      animation: celeste-drawer-in-down-3dfcd198 var(--drawer-duration) var(--drawer-ease);
+}
+.celeste-drawer-content[data-swipe-direction='down'][data-state='closed'][data-v-3dfcd198] {
+      animation: celeste-drawer-out-down-3dfcd198 300ms var(--drawer-ease) forwards;
+}
+.celeste-drawer-content[data-swipe-direction='up'][data-v-3dfcd198] {
+    top: 0;
+    border-bottom: 1px solid var(--color-stroke-soft-200);
+    border-radius: 0 0 var(--radius-20) var(--radius-20);
+}
+.celeste-drawer-content[data-swipe-direction='up'][data-state='open'][data-v-3dfcd198] {
+      animation: celeste-drawer-in-up-3dfcd198 var(--drawer-duration) var(--drawer-ease);
+}
+.celeste-drawer-content[data-swipe-direction='up'][data-state='closed'][data-v-3dfcd198] {
+      animation: celeste-drawer-out-up-3dfcd198 300ms var(--drawer-ease) forwards;
+}
+.celeste-drawer-handle[data-v-3dfcd198] {
+  display: none;
+  flex-shrink: 0;
+  align-self: center;
+  width: 32px;
+  height: 4px;
+  margin: var(--spacing-8) 0 0;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-soft-200);
+  cursor: grab;
+}
+.celeste-drawer-content[data-swipe-direction='down'] .celeste-drawer-handle[data-v-3dfcd198] {
+  display: block;
+}
+.celeste-drawer-content[data-swipe-direction='up'] .celeste-drawer-handle[data-v-3dfcd198] {
+  display: block;
+  order: 1;
+  margin: 0 0 var(--spacing-8);
+}
+@media (prefers-reduced-motion: reduce) {
+.celeste-drawer-overlay[data-v-3dfcd198],
+  .celeste-drawer-content[data-v-3dfcd198] {
+    transition-duration: 0ms;
+    animation-duration: 1ms !important;
+}
+}
+@keyframes celeste-drawer-fade-in-3dfcd198 {
+from {
+    opacity: 0;
+}
+}
+@keyframes celeste-drawer-fade-out-3dfcd198 {
+to {
+    opacity: 0;
+}
+}
+@keyframes celeste-drawer-in-right-3dfcd198 {
+from {
+    transform: translateX(100%);
+}
+}
+@keyframes celeste-drawer-out-right-3dfcd198 {
+from {
+    transform: translateX(var(--drawer-swipe-movement-x, 0%));
+}
+to {
+    transform: translateX(100%);
+}
+}
+@keyframes celeste-drawer-in-left-3dfcd198 {
+from {
+    transform: translateX(-100%);
+}
+}
+@keyframes celeste-drawer-out-left-3dfcd198 {
+from {
+    transform: translateX(var(--drawer-swipe-movement-x, 0%));
+}
+to {
+    transform: translateX(-100%);
+}
+}
+@keyframes celeste-drawer-in-down-3dfcd198 {
+from {
+    transform: translateY(100%);
+}
+}
+@keyframes celeste-drawer-out-down-3dfcd198 {
+from {
+    transform: translateY(calc(var(--drawer-snap-point-offset, 0%) + var(--drawer-swipe-movement-y, 0%)));
+}
+to {
+    transform: translateY(100%);
+}
+}
+@keyframes celeste-drawer-in-up-3dfcd198 {
+from {
+    transform: translateY(-100%);
+}
+}
+@keyframes celeste-drawer-out-up-3dfcd198 {
+from {
+    transform: translateY(calc(var(--drawer-snap-point-offset, 0%) + var(--drawer-swipe-movement-y, 0%)));
+}
+to {
+    transform: translateY(-100%);
+}
+}
+
+.celeste-drawer-description[data-v-2570c59f] {
+  margin: 0;
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-sm);
+}
+
+.celeste-drawer-footer[data-v-92c5134c] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: var(--spacing-20);
+  border-top: 1px solid var(--color-stroke-soft-200);
+  gap: var(--spacing-16);
+}
+
+.celeste-drawer-title[data-v-208ff7c2] {
+  margin: 0;
+  color: var(--color-text-strong-950);
+  font: var(--label-lg);
+}
+
+.celeste-drawer-header[data-v-fb4512f2] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: var(--spacing-20);
+  gap: var(--spacing-12);
+}
+.celeste-drawer-header[data-size='lg'][data-v-fb4512f2] {
+    align-items: flex-start;
+    gap: var(--spacing-16);
+}
+.celeste-drawer-header[data-divider='true'][data-v-fb4512f2] {
+    border-bottom: 1px solid var(--color-stroke-soft-200);
+}
+.celeste-drawer-header .icon[data-v-fb4512f2] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-sub-600);
+}
+:is(.celeste-drawer-header .icon) i[data-v-fb4512f2] {
+      width: 24px;
+      height: 24px;
+}
+.celeste-drawer-header[data-size='lg'] .icon[data-v-fb4512f2] {
+    padding: var(--spacing-12);
+    border: 1px solid var(--color-stroke-soft-200);
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-white-0);
+    box-shadow: var(--shadow-regular-xs);
+}
+.celeste-drawer-header .content[data-v-fb4512f2] {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    gap: var(--spacing-4);
+}
+[data-v-9a689ae5] .celeste-dropdown-menu-content {
   --dropdown-min-width: 250px;
   --dropdown-max-width: 350px;
   display: flex;
@@ -4833,30 +5079,47 @@ to {
 }
 .celeste-modal-body[data-v-8872ed90] +  .celeste-modal-footer {
   border-block-start: 1px solid var(--color-stroke-soft-200);
-}.celeste-modal-overlay[data-v-6c522ba3] {
+}.celeste-modal-overlay[data-v-f6a37b86],
+.celeste-modal-viewport[data-v-f6a37b86] {
+  display: flex;
   position: fixed;
   z-index: 50;
+  flex-direction: column;
+  padding: var(--spacing-16);
+  overflow-y: auto;
+  inset: 0;
+}
+.celeste-modal-overlay[data-v-f6a37b86] {
   background: var(--color-overlay-overlay);
   backdrop-filter: blur(5px);
-  inset: 0;
 }
-.celeste-modal-content[data-v-6c522ba3] {
-  position: fixed;
-  z-index: 51;
-  top: 50%;
-  left: 50%;
+.celeste-modal-overlay[data-state=open][data-v-f6a37b86] {
+  animation: celeste-fade-in var(--animation-fast) ease-out;
+}
+.celeste-modal-overlay[data-state=closed][data-v-f6a37b86] {
+  animation: celeste-fade-out var(--animation-fast) ease-in;
+}
+.celeste-modal-viewport[data-v-f6a37b86] {
+  pointer-events: none;
+}
+.celeste-modal-viewport .celeste-modal-content[data-v-f6a37b86] {
+  pointer-events: auto;
+}
+.celeste-modal-content[data-v-f6a37b86] {
+  position: relative;
+  max-width: 100%;
+  margin: auto;
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-20);
   background: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-md);
-  translate: -50% -50%;
 }
-.fade-enter-active[data-v-6c522ba3],
-.fade-leave-active[data-v-6c522ba3] {
+.fade-enter-active[data-v-f6a37b86],
+.fade-leave-active[data-v-f6a37b86] {
   transition: all var(--animation-fast) cubic-bezier(0.18, 0.89, 0.43, 1.19);
 }
-.fade-enter-from[data-v-6c522ba3],
-.fade-leave-to[data-v-6c522ba3] {
+.fade-enter-from[data-v-f6a37b86],
+.fade-leave-to[data-v-f6a37b86] {
   visibility: hidden;
   opacity: 0;
   scale: 0.95;

package/dist/cjs/chunks/BubbleSelect.cjs

@@ -8,7 +8,7 @@ const require_Collection = require("./Collection.cjs");
 const require_VisuallyHidden = require("./VisuallyHidden.cjs");
 const require_PopperRoot = require("./PopperRoot.cjs");
 let vue = require("vue");
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Select/utils.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Select/utils.js
 var OPEN_KEYS = [
 	" ",
 	"Enter",
@@ -32,7 +32,7 @@ function shouldShowPlaceholder(value) {
 	return value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Select/SelectRoot.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Select/SelectRoot.js
 var _hoisted_1 = ["value"];
 var [injectSelectRootContext, provideSelectRootContext] = /*#__PURE__*/ require_createContext.createContext("SelectRoot");
 var SelectRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -204,7 +204,7 @@ var SelectRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Select/BubbleSelect.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Select/BubbleSelect.js
 var BubbleSelect_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "BubbleSelect",
 	props: {

package/dist/cjs/chunks/CollapsibleRoot.cjs

@@ -3,7 +3,7 @@ const require_dist = require("./dist2.cjs");
 const require_Primitive = require("./Primitive.cjs");
 const require_useForwardExpose = require("./useForwardExpose.cjs");
 let vue = require("vue");
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Collapsible/CollapsibleRoot.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Collapsible/CollapsibleRoot.js
 var [injectCollapsibleRootContext, provideCollapsibleRootContext] = /*#__PURE__*/ require_createContext.createContext("CollapsibleRoot");
 var CollapsibleRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "CollapsibleRoot",

package/dist/cjs/chunks/Collection.cjs

@@ -1,7 +1,7 @@
 const require_Primitive = require("./Primitive.cjs");
 const require_usePrimitiveElement = require("./usePrimitiveElement.cjs");
 let vue = require("vue");
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Collection/Collection.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Collection/Collection.js
 var ITEM_DATA_ATTR = "data-reka-collection-item";
 function useCollection(options = {}) {
 	const { key = "", isProvider = false } = options;
@@ -15,6 +15,11 @@ function useCollection(options = {}) {
 		};
 		(0, vue.provide)(injectionKey, context);
 	} else context = (0, vue.inject)(injectionKey);
+	const getItem = (element, includeDisabledItem = false) => {
+		if (!context.collectionRef.value) return void 0;
+		const item = context.itemMap.value.get(element);
+		return item && (includeDisabledItem || item.ref.dataset.disabled !== "") ? item : void 0;
+	};
 	const getItems = (includeDisabledItem = false) => {
 		const collectionNode = context.collectionRef.value;
 		if (!collectionNode) return [];
@@ -63,6 +68,7 @@ function useCollection(options = {}) {
 	});
 	return {
 		getItems,
+		getItem,
 		reactiveItems: (0, vue.computed)(() => Array.from(context.itemMap.value.values())),
 		itemMapSize: (0, vue.computed)(() => context.itemMap.value.size),
 		CollectionSlot,

package/dist/cjs/chunks/ComboboxContent.cjs

@@ -3,6 +3,7 @@ const require_createContext = require("./createContext.cjs");
 const require_getActiveElement = require("./getActiveElement.cjs");
 const require_dist = require("./dist.cjs");
 const require_Primitive = require("./Primitive.cjs");
+const require_DismissableLayer = require("./DismissableLayer.cjs");
 const require_FocusScope = require("./FocusScope.cjs");
 const require_useFocusGuards = require("./useFocusGuards.cjs");
 const require_useForwardExpose = require("./useForwardExpose.cjs");
@@ -11,11 +12,10 @@ const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
 const require_useHideOthers = require("./useHideOthers.cjs");
 const require_useId = require("./useId.cjs");
 const require_Presence = require("./Presence.cjs");
-const require_DismissableLayer = require("./DismissableLayer.cjs");
 const require_Collection = require("./Collection.cjs");
 const require_PopperContent = require("./PopperContent.cjs");
 let vue = require("vue");
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxContent.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxContent.js
 var ListboxContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ListboxContent",
 	props: {
@@ -81,7 +81,7 @@ var ListboxContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxContentImpl.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxContentImpl.js
 var [injectComboboxContentContext, provideComboboxContentContext] = /*#__PURE__*/ require_createContext.createContext("ComboboxContent");
 var ComboboxContentImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ComboboxContentImpl",
@@ -203,6 +203,8 @@ var ComboboxContentImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const emits = __emit;
 		const { position } = (0, vue.toRefs)(props);
 		const rootContext = require_ComboboxRoot.injectComboboxRootContext();
+		const contentId = Symbol("ComboboxContent");
+		(0, vue.watch)(position, (value) => rootContext.onContentPositionChange(contentId, value), { immediate: true });
 		const isEmpty = (0, vue.computed)(() => rootContext.ignoreFilter.value ? rootContext.allItems.value.size === 0 : rootContext.filterState.value.count === 0);
 		const { forwardRef, currentElement } = require_useForwardExpose.useForwardExpose();
 		require_FocusScope.useBodyScrollLock(props.bodyLock);
@@ -230,6 +232,7 @@ var ComboboxContentImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}
 		});
 		(0, vue.onUnmounted)(() => {
+			rootContext.onContentUnmount(contentId);
 			const activeElement = require_getActiveElement.getActiveElement();
 			if (isInputWithinContent.value && (!activeElement || activeElement === document.body)) rootContext.triggerElement.value?.focus();
 		});
@@ -238,6 +241,7 @@ var ComboboxContentImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const control = (target instanceof Element ? target.closest("label") : null)?.control;
 			return !!control && !!rootContext.parentElement.value?.contains(control);
 		}
+		const popperContentEvents = { placed: () => rootContext.onContentPlaced(contentId) };
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ListboxContent_default), { "as-child": "" }, {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_FocusScope.FocusScope_default), {
@@ -275,7 +279,7 @@ var ComboboxContentImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 								outline: "none",
 								...(0, vue.unref)(position) === "popper" ? popperStyle : {}
 							}
-						}), {
+						}, (0, vue.toHandlers)((0, vue.unref)(position) === "popper" ? popperContentEvents : {})), {
 							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 							_: 3
 						}, 16, [
@@ -295,7 +299,7 @@ var ComboboxContentImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxContent.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxContent.js
 var ComboboxContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ComboboxContent",
 	props: {

package/dist/cjs/chunks/ComboboxGroup.cjs

@@ -3,7 +3,7 @@ const require_createContext = require("./createContext.cjs");
 const require_Primitive = require("./Primitive.cjs");
 const require_useId = require("./useId.cjs");
 let vue = require("vue");
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxGroup.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxGroup.js
 var [injectListboxGroupContext, provideListboxGroupContext] = /*#__PURE__*/ require_createContext.createContext("ListboxGroup");
 var ListboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ListboxGroup",
@@ -30,7 +30,7 @@ var ListboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxGroup.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxGroup.js
 var [injectComboboxGroupContext, provideComboboxGroupContext] = /*#__PURE__*/ require_createContext.createContext("ComboboxGroup");
 var ComboboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ComboboxGroup",

package/dist/cjs/chunks/ComboboxInput.cjs

@@ -4,7 +4,7 @@ const require_Primitive = require("./Primitive.cjs");
 const require_useComposing = require("./useComposing.cjs");
 const require_usePrimitiveElement = require("./usePrimitiveElement.cjs");
 let vue = require("vue");
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxFilter.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxFilter.js
 var ListboxFilter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ListboxFilter",
 	props: {
@@ -51,7 +51,7 @@ var ListboxFilter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, vue.onUnmounted)(() => {
 			rootContext.focusable.value = true;
 		});
-		const { isComposing, handleCompositionStart, handleCompositionEnd } = require_useComposing.useComposing((event) => {
+		const { isComposing, shouldDeferInput, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd } = require_useComposing.useComposing((event) => {
 			modelValue.value = event.target.value;
 			rootContext.onCompositionEnd();
 			rootContext.highlightFirstItem();
@@ -61,7 +61,7 @@ var ListboxFilter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			handleCompositionStart();
 		}
 		function handleInput(event) {
-			if (isComposing.value) return;
+			if (shouldDeferInput.value) return;
 			modelValue.value = event.target.value;
 			rootContext.highlightFirstItem();
 		}
@@ -94,6 +94,7 @@ var ListboxFilter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				]), (0, vue.withKeys)(handleKeydownEnter, ["enter"])],
 				onInput: handleInput,
 				onCompositionstart: onCompositionStart,
+				onCompositionupdate: (0, vue.unref)(handleCompositionUpdate),
 				onCompositionend: (0, vue.unref)(handleCompositionEnd)
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { modelValue: (0, vue.unref)(modelValue) })]),
@@ -106,13 +107,14 @@ var ListboxFilter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-disabled",
 				"aria-disabled",
 				"aria-activedescendant",
+				"onCompositionupdate",
 				"onCompositionend"
 			]);
 		};
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxInput.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxInput.js
 var ComboboxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ComboboxInput",
 	props: {
@@ -153,7 +155,7 @@ var ComboboxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, vue.onMounted)(() => {
 			if (currentElement.value) rootContext.onInputElementChange(currentElement.value);
 		});
-		const { isComposing, handleCompositionStart, handleCompositionEnd } = require_useComposing.useComposing((event) => {
+		const { isComposing, shouldDeferInput, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd } = require_useComposing.useComposing((event) => {
 			const el = event.target;
 			if (el) processInputValue(el.value);
 		});
@@ -174,7 +176,7 @@ var ComboboxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			} else rootContext.filterSearch.value = value;
 		}
 		function handleInput(event) {
-			if (isComposing.value) return;
+			if (shouldDeferInput.value) return;
 			processInputValue(event.target.value);
 		}
 		function handleFocus() {
@@ -238,6 +240,7 @@ var ComboboxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				onFocus: handleFocus,
 				onBlur: handleBlur,
 				onCompositionstart: (0, vue.unref)(handleCompositionStart),
+				onCompositionupdate: (0, vue.unref)(handleCompositionUpdate),
 				onCompositionend: (0, vue.unref)(handleCompositionEnd)
 			}, {
 				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
@@ -251,6 +254,7 @@ var ComboboxInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-expanded",
 				"aria-controls",
 				"onCompositionstart",
+				"onCompositionupdate",
 				"onCompositionend"
 			]);
 		};

package/dist/cjs/chunks/ComboboxItem.cjs

@@ -8,7 +8,7 @@ const require_usePrimitiveElement = require("./usePrimitiveElement.cjs");
 const require_Collection = require("./Collection.cjs");
 const require_ComboboxGroup = require("./ComboboxGroup.cjs");
 let vue = require("vue");
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxItem.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxItem.js
 var LISTBOX_SELECT = "listbox.select";
 var [injectListboxItemContext, provideListboxItemContext] = /*#__PURE__*/ require_createContext.createContext("ListboxItem");
 var ListboxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -65,7 +65,8 @@ var ListboxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					isHighlighted.value,
 					isSelected.value,
 					disabled.value,
-					(0, vue.unref)(rootContext).focusable.value
+					(0, vue.unref)(rootContext).focusable.value,
+					...Object.entries(_ctx.$attrs).flat()
 				], () => (0, vue.createVNode)((0, vue.unref)(require_Primitive.Primitive), (0, vue.mergeProps)({ id: (0, vue.unref)(id) }, _ctx.$attrs, {
 					ref: (0, vue.unref)(forwardRef),
 					role: "option",
@@ -104,7 +105,7 @@ var ListboxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxItem.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxItem.js
 var ComboboxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ComboboxItem",
 	props: {

package/dist/cjs/chunks/ComboboxLabel.cjs

@@ -3,7 +3,7 @@ const require_useForwardExpose = require("./useForwardExpose.cjs");
 const require_useId = require("./useId.cjs");
 const require_ComboboxGroup = require("./ComboboxGroup.cjs");
 let vue = require("vue");
-//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxLabel.js
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxLabel.js
 var ComboboxLabel_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "ComboboxLabel",
 	props: {