@youcan/celeste 0.17.2 → 0.18.0

package/dist/cjs/chunks/ComboboxItem.cjs

@@ -194,3 +194,9 @@ Object.defineProperty(exports, "ComboboxItem_default", {
 		return ComboboxItem_default;
 	}
 });
+Object.defineProperty(exports, "injectListboxItemContext", {
+	enumerable: true,
+	get: function() {
+		return injectListboxItemContext;
+	}
+});

package/dist/cjs/chunks/combobox-item.cjs

@@ -1,9 +1,66 @@
 const require_clsx = require("./clsx.cjs");
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_Primitive = require("./Primitive.cjs");
+const require_useForwardExpose = require("./useForwardExpose.cjs");
 const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
 const require_ComboboxItem = require("./ComboboxItem.cjs");
 const require_checkbox = require("./checkbox.cjs");
 let vue = require("vue");
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxItemIndicator.js
+var ListboxItemIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ListboxItemIndicator",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		require_useForwardExpose.useForwardExpose();
+		const itemContext = require_ComboboxItem.injectListboxItemContext();
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(itemContext).isSelected.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive.Primitive), (0, vue.mergeProps)({
+				key: 0,
+				"aria-hidden": "true"
+			}, props), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16)) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxItemIndicator.js
+var ComboboxItemIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ComboboxItemIndicator",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ListboxItemIndicator_default), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(props)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
 //#region src/components/combobox/combobox-item.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-disabled"];
 var _hoisted_2 = { class: "celeste-dropdown-item-info" };
@@ -20,10 +77,6 @@ var _hoisted_6 = {
 	key: 2,
 	class: "celeste-dropdown-item-suffix"
 };
-var _hoisted_7 = {
-	key: 3,
-	class: "i-celeste-check-fill"
-};
 var combobox_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "combobox-item",
 	props: {
@@ -68,7 +121,7 @@ var combobox_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
 					tabindex: "0",
 					"aria-disabled": __props.disabled,
-					class: (0, vue.normalizeClass)((0, vue.unref)(require_clsx.clsx)(props.class, "celeste-dropdown-item", { "celeste-dropdown-item-disabled": __props.disabled }, { "celeste-dropdown-item-selected": __props.selected }, { "celeste-dropdown-item-focused": __props.focused }))
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_clsx.clsx)(props.class, "celeste-dropdown-item", { "celeste-dropdown-item-disabled": __props.disabled }, { "celeste-dropdown-item-focused": __props.focused }))
 				}, [
 					__props.checkbox && __props.size === "sm" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_checkbox.checkbox_default, {
 						key: 0,
@@ -84,7 +137,10 @@ var combobox_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 						innerHTML: __props.label
 					}, null, 8, _hoisted_3), __props.sublabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, (0, vue.toDisplayString)(__props.sublabel), 1)) : (0, vue.createCommentVNode)("", true)], 2), __props.description && __props.size === "lg" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5, (0, vue.toDisplayString)(__props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
 					_ctx.$slots.suffix ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6, [(0, vue.renderSlot)(_ctx.$slots, "suffix", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
-					__props.selected ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("i", _hoisted_7)) : (0, vue.createCommentVNode)("", true)
+					(0, vue.createVNode)((0, vue.unref)(ComboboxItemIndicator_default), { "as-child": "" }, {
+						default: (0, vue.withCtx)(() => [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("i", { class: "celeste-dropdown-item-indicator i-celeste-check-line" }, null, -1)])]),
+						_: 1
+					})
 				], 10, _hoisted_1)]),
 				_: 3
 			}, 16, ["disabled"]);
@@ -93,7 +149,7 @@ var combobox_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 });
 //#endregion
 //#region src/components/combobox/combobox-item.vue
-var combobox_item_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a4dc028f"]]);
+var combobox_item_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7b0de826"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_item_default", {
 	enumerable: true,

package/dist/cjs/chunks/combobox-list.cjs

@@ -160,7 +160,7 @@ var combobox_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 });
 //#endregion
 //#region src/components/combobox/combobox-list.vue
-var combobox_list_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_list_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-63b3dde3"]]);
+var combobox_list_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_list_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d0001b47"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_list_default", {
 	enumerable: true,

package/dist/cjs/chunks/combobox-trigger.cjs

@@ -101,7 +101,7 @@ var combobox_trigger_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 });
 //#endregion
 //#region src/components/combobox/combobox-trigger.vue
-var combobox_trigger_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_trigger_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c724299e"]]);
+var combobox_trigger_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_trigger_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7924a538"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_trigger_default", {
 	enumerable: true,

package/dist/cjs/chunks/combobox.cjs

@@ -1,13 +1,13 @@
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
 const require_badge = require("./badge.cjs");
 const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
+const require_combobox_item = require("./combobox-item.cjs");
 const require_combobox_anchor = require("./combobox-anchor.cjs");
 const require_combobox_empty = require("./combobox-empty.cjs");
 const require_combobox_list = require("./combobox-list.cjs");
 const require_combobox_trigger = require("./combobox-trigger.cjs");
 const require_combobox_group = require("./combobox-group.cjs");
 const require_combobox_input = require("./combobox-input.cjs");
-const require_combobox_item = require("./combobox-item.cjs");
 const require_combobox_root = require("./combobox-root.cjs");
 const require_combobox_separator = require("./combobox-separator.cjs");
 let vue = require("vue");
@@ -201,7 +201,7 @@ var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 });
 //#endregion
 //#region src/components/combobox/combobox.vue
-var combobox_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f1dfb246"]]);
+var combobox_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b1f5501b"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_default", {
 	enumerable: true,

package/dist/cjs/chunks/components.cjs

@@ -7,6 +7,7 @@ const require_status_badge = require("./status-badge.cjs");
 const require_tooltip_content = require("./tooltip-content.cjs");
 const require_collapsible_content = require("./collapsible-content.cjs");
 const require_collapsible_trigger = require("./collapsible-trigger.cjs");
+const require_combobox_item = require("./combobox-item.cjs");
 const require_combobox_anchor = require("./combobox-anchor.cjs");
 const require_combobox_empty = require("./combobox-empty.cjs");
 const require_combobox_list = require("./combobox-list.cjs");
@@ -80,7 +81,6 @@ const require_color_swatch = require("./color-swatch.cjs");
 const require_hue_slider = require("./hue-slider.cjs");
 const require_combobox_group = require("./combobox-group.cjs");
 const require_combobox_input = require("./combobox-input.cjs");
-const require_combobox_item = require("./combobox-item.cjs");
 const require_combobox_root = require("./combobox-root.cjs");
 const require_combobox_separator = require("./combobox-separator.cjs");
 const require_combobox = require("./combobox.cjs");

package/dist/cjs/chunks/text-input-affix.cjs

@@ -26,7 +26,7 @@ var text_input_affix_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 });
 //#endregion
 //#region src/components/text-input/text-input-affix.vue
-var text_input_affix_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_affix_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a6d421c4"]]);
+var text_input_affix_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_affix_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b03a423e"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_affix_default", {
 	enumerable: true,

package/dist/cjs/chunks/text-input-button.cjs

@@ -40,7 +40,7 @@ var text_input_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 });
 //#endregion
 //#region src/components/text-input/text-input-button.vue
-var text_input_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8b3cdb5f"]]);
+var text_input_button_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d9fba798"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_button_default", {
 	enumerable: true,

package/dist/cjs/chunks/text-input.cjs

@@ -94,6 +94,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, v
 				}, {
 					default: (0, vue.withCtx)(() => [showClearButton.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_text_input_button.text_input_button_default, {
 						key: 0,
+						inline: "",
 						type: "button",
 						"aria-label": "Clear search",
 						onClick: clearInput
@@ -109,7 +110,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, v
 });
 //#endregion
 //#region src/components/text-input/text-input.vue
-var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d61fa3e2"]]);
+var text_input_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2139c861"]]);
 //#endregion
 Object.defineProperty(exports, "text_input_default", {
 	enumerable: true,

package/dist/cjs/index.cjs

@@ -8,6 +8,7 @@ const require_components = require("./chunks/components.cjs");
 const require_tooltip_content = require("./chunks/tooltip-content.cjs");
 const require_collapsible_content = require("./chunks/collapsible-content.cjs");
 const require_collapsible_trigger = require("./chunks/collapsible-trigger.cjs");
+const require_combobox_item = require("./chunks/combobox-item.cjs");
 const require_combobox_anchor = require("./chunks/combobox-anchor.cjs");
 const require_combobox_empty = require("./chunks/combobox-empty.cjs");
 const require_combobox_list = require("./chunks/combobox-list.cjs");
@@ -88,7 +89,6 @@ const require_color_swatch = require("./chunks/color-swatch.cjs");
 const require_hue_slider = require("./chunks/hue-slider.cjs");
 const require_combobox_group = require("./chunks/combobox-group.cjs");
 const require_combobox_input = require("./chunks/combobox-input.cjs");
-const require_combobox_item = require("./chunks/combobox-item.cjs");
 const require_combobox_root = require("./chunks/combobox-root.cjs");
 const require_combobox_separator = require("./chunks/combobox-separator.cjs");
 const require_combobox = require("./chunks/combobox.cjs");

package/dist/es/chunks/ComboboxItem.js

@@ -188,4 +188,4 @@ var ComboboxItem_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { ComboboxItem_default as t };
+export { injectListboxItemContext as n, ComboboxItem_default as t };

package/dist/es/chunks/combobox-item.js

@@ -1,9 +1,66 @@
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as useForwardExpose } from "./useForwardExpose.js";
 import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
-import { t as ComboboxItem_default } from "./ComboboxItem.js";
+import { n as injectListboxItemContext, t as ComboboxItem_default } from "./ComboboxItem.js";
 import { t as checkbox_default } from "./checkbox.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxItemIndicator.js
+var ListboxItemIndicator_default = /* @__PURE__ */ defineComponent({
+	__name: "ListboxItemIndicator",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		useForwardExpose();
+		const itemContext = injectListboxItemContext();
+		return (_ctx, _cache) => {
+			return unref(itemContext).isSelected.value ? (openBlock(), createBlock(unref(Primitive), mergeProps({
+				key: 0,
+				"aria-hidden": "true"
+			}, props), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxItemIndicator.js
+var ComboboxItemIndicator_default = /* @__PURE__ */ defineComponent({
+	__name: "ComboboxItemIndicator",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ListboxItemIndicator_default), normalizeProps(guardReactiveProps(props)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
 //#region src/components/combobox/combobox-item.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-disabled"];
 var _hoisted_2 = { class: "celeste-dropdown-item-info" };
@@ -20,10 +77,6 @@ var _hoisted_6 = {
 	key: 2,
 	class: "celeste-dropdown-item-suffix"
 };
-var _hoisted_7 = {
-	key: 3,
-	class: "i-celeste-check-fill"
-};
 //#endregion
 //#region src/components/combobox/combobox-item.vue
 var combobox_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -70,7 +123,7 @@ var combobox_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				default: withCtx(() => [createElementVNode("div", {
 					tabindex: "0",
 					"aria-disabled": __props.disabled,
-					class: normalizeClass(unref(clsx)(props.class, "celeste-dropdown-item", { "celeste-dropdown-item-disabled": __props.disabled }, { "celeste-dropdown-item-selected": __props.selected }, { "celeste-dropdown-item-focused": __props.focused }))
+					class: normalizeClass(unref(clsx)(props.class, "celeste-dropdown-item", { "celeste-dropdown-item-disabled": __props.disabled }, { "celeste-dropdown-item-focused": __props.focused }))
 				}, [
 					__props.checkbox && __props.size === "sm" ? (openBlock(), createBlock(checkbox_default, {
 						key: 0,
@@ -86,12 +139,15 @@ var combobox_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 						innerHTML: __props.label
 					}, null, 8, _hoisted_3), __props.sublabel ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.sublabel), 1)) : createCommentVNode("", true)], 2), __props.description && __props.size === "lg" ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(__props.description), 1)) : createCommentVNode("", true)]),
 					_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "suffix", {}, void 0, true)])) : createCommentVNode("", true),
-					__props.selected ? (openBlock(), createElementBlock("i", _hoisted_7)) : createCommentVNode("", true)
+					createVNode(unref(ComboboxItemIndicator_default), { "as-child": "" }, {
+						default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("i", { class: "celeste-dropdown-item-indicator i-celeste-check-line" }, null, -1)])]),
+						_: 1
+					})
 				], 10, _hoisted_1)]),
 				_: 3
 			}, 16, ["disabled"]);
 		};
 	}
-}), [["__scopeId", "data-v-a4dc028f"]]);
+}), [["__scopeId", "data-v-7b0de826"]]);
 //#endregion
 export { combobox_item_default as t };

package/dist/es/chunks/combobox-list.js

@@ -157,6 +157,6 @@ var combobox_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			});
 		};
 	}
-}), [["__scopeId", "data-v-63b3dde3"]]);
+}), [["__scopeId", "data-v-d0001b47"]]);
 //#endregion
 export { combobox_list_default as t };

package/dist/es/chunks/combobox-trigger.js

@@ -98,6 +98,6 @@ var combobox_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 			}, 16, ["class"]);
 		};
 	}
-}), [["__scopeId", "data-v-c724299e"]]);
+}), [["__scopeId", "data-v-7924a538"]]);
 //#endregion
 export { combobox_trigger_default as t };

package/dist/es/chunks/combobox.js

@@ -1,13 +1,13 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as badge_default } from "./badge.js";
 import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
+import { t as combobox_item_default } from "./combobox-item.js";
 import { t as combobox_anchor_default } from "./combobox-anchor.js";
 import { t as combobox_empty_default } from "./combobox-empty.js";
 import { t as combobox_list_default } from "./combobox-list.js";
 import { t as combobox_trigger_default } from "./combobox-trigger.js";
 import { t as combobox_group_default } from "./combobox-group.js";
 import { t as combobox_input_default } from "./combobox-input.js";
-import { t as combobox_item_default } from "./combobox-item.js";
 import { t as combobox_root_default } from "./combobox-root.js";
 import { t as combobox_separator_default } from "./combobox-separator.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
@@ -200,6 +200,6 @@ var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}, 16);
 		};
 	}
-}), [["__scopeId", "data-v-f1dfb246"]]);
+}), [["__scopeId", "data-v-b1f5501b"]]);
 //#endregion
 export { combobox_default as t };

package/dist/es/chunks/components.js

@@ -7,6 +7,7 @@ import { t as status_badge_default } from "./status-badge.js";
 import { t as tooltip_content_default } from "./tooltip-content.js";
 import { t as collapsible_content_default } from "./collapsible-content.js";
 import { t as collapsible_trigger_default } from "./collapsible-trigger.js";
+import { t as combobox_item_default } from "./combobox-item.js";
 import { t as combobox_anchor_default } from "./combobox-anchor.js";
 import { t as combobox_empty_default } from "./combobox-empty.js";
 import { t as combobox_list_default } from "./combobox-list.js";
@@ -80,7 +81,6 @@ import { t as color_swatch_default } from "./color-swatch.js";
 import { t as hue_slider_default } from "./hue-slider.js";
 import { t as combobox_group_default } from "./combobox-group.js";
 import { t as combobox_input_default } from "./combobox-input.js";
-import { t as combobox_item_default } from "./combobox-item.js";
 import { t as combobox_root_default } from "./combobox-root.js";
 import { t as combobox_separator_default } from "./combobox-separator.js";
 import { t as combobox_default } from "./combobox.js";

package/dist/es/chunks/text-input-affix.js

@@ -24,6 +24,6 @@ var text_input_affix_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 			return openBlock(), createElementBlock("span", mergeProps(unref(delegatedProps), { class: unref(clsx)("celeste-text-input-affix", props.class) }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-a6d421c4"]]);
+}), [["__scopeId", "data-v-b03a423e"]]);
 //#endregion
 export { text_input_affix_default as t };

package/dist/es/chunks/text-input-button.js

@@ -38,6 +38,6 @@ var text_input_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}, 16, ["class"]);
 		};
 	}
-}), [["__scopeId", "data-v-8b3cdb5f"]]);
+}), [["__scopeId", "data-v-d9fba798"]]);
 //#endregion
 export { text_input_button_default as t };

package/dist/es/chunks/text-input.js

@@ -96,6 +96,7 @@ var text_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				}, {
 					default: withCtx(() => [showClearButton.value ? (openBlock(), createBlock(text_input_button_default, {
 						key: 0,
+						inline: "",
 						type: "button",
 						"aria-label": "Clear search",
 						onClick: clearInput
@@ -108,6 +109,6 @@ var text_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 10, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d61fa3e2"]]);
+}), [["__scopeId", "data-v-2139c861"]]);
 //#endregion
 export { text_input_default as t };

package/dist/es/index.js

@@ -7,6 +7,7 @@ import { n as sidebar_separator_default, t as components_exports } from "./chunk
 import { t as tooltip_content_default } from "./chunks/tooltip-content.js";
 import { t as collapsible_content_default } from "./chunks/collapsible-content.js";
 import { t as collapsible_trigger_default } from "./chunks/collapsible-trigger.js";
+import { t as combobox_item_default } from "./chunks/combobox-item.js";
 import { t as combobox_anchor_default } from "./chunks/combobox-anchor.js";
 import { t as combobox_empty_default } from "./chunks/combobox-empty.js";
 import { t as combobox_list_default } from "./chunks/combobox-list.js";
@@ -87,7 +88,6 @@ import { t as color_swatch_default } from "./chunks/color-swatch.js";
 import { t as hue_slider_default } from "./chunks/hue-slider.js";
 import { t as combobox_group_default } from "./chunks/combobox-group.js";
 import { t as combobox_input_default } from "./chunks/combobox-input.js";
-import { t as combobox_item_default } from "./chunks/combobox-item.js";
 import { t as combobox_root_default } from "./chunks/combobox-root.js";
 import { t as combobox_separator_default } from "./chunks/combobox-separator.js";
 import { t as combobox_default } from "./chunks/combobox.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -52,8 +52,8 @@
     "reka-ui": "~2.10.5",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.17.2",
-    "@youcan/celeste-tokens": "0.17.2"
+    "@youcan/celeste-icons": "0.18.0",
+    "@youcan/celeste-tokens": "0.18.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

package/src/components/combobox/combobox-item.vue

@@ -2,7 +2,7 @@
 import type { ComboboxItemEmits } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ComboboxItem, useForwardPropsEmits } from 'reka-ui';
+import { ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'reka-ui';
 import { computed } from 'vue';
 import Checkbox from '../checkbox/checkbox.vue';
 
@@ -48,7 +48,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         props.class,
         'celeste-dropdown-item',
         { 'celeste-dropdown-item-disabled': disabled },
-        { 'celeste-dropdown-item-selected': selected },
         { 'celeste-dropdown-item-focused': focused },
       )"
     >
@@ -83,7 +82,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       <div v-if="$slots.suffix" class="celeste-dropdown-item-suffix">
         <slot name="suffix" />
       </div>
-      <i v-if="selected" class="i-celeste-check-fill" />
+      <ComboboxItemIndicator as-child>
+        <i class="celeste-dropdown-item-indicator i-celeste-check-line" />
+      </ComboboxItemIndicator>
     </div>
   </ComboboxItem>
 </template>
@@ -91,8 +92,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style lang="scss" scoped>
 .celeste-dropdown-item {
   display: flex;
+  position: relative;
   align-items: center;
   padding: var(--spacing-8);
+  padding-inline-end: var(--spacing-36);
   transition-property: background-color;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
@@ -159,6 +162,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     color: var(--color-icon-sub-600);
   }
 
+  &-indicator {
+    position: absolute;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    inset-inline-end: var(--spacing-8);
+  }
+
   &-disabled {
     color: var(--color-text-disabled-300);
     cursor: not-allowed;
@@ -174,10 +186,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     }
   }
 
-  &-selected {
-    background: var(--color-bg-weak-50);
-  }
-
   .celeste-dropdown-item-info {
     display: flex;
     flex: 1 0 0;

package/src/components/combobox/combobox-list.vue

@@ -39,14 +39,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 div:deep(.celeste-dropdown-content) {
   --dropdown-height: 300px;
   --dropdown-min-width: var(--reka-combobox-trigger-width, 300px);
-  --dropdown-width: max(var(--reka-popper-anchor-width), 300px);
 
   display: flex;
   z-index: 50;
   box-sizing: border-box;
   flex-direction: column;
-  width: var(--dropdown-width);
+  width: max-content;
   min-width: var(--dropdown-min-width);
+  max-width: max(var(--reka-popper-anchor-width), 320px);
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);

package/src/components/combobox/combobox-trigger.vue

@@ -197,6 +197,19 @@ const forwarded = useForwardProps(delegatedProps);
     border: none;
     border-radius: 0;
     box-shadow: none;
+    gap: 0;
+
+    :deep(.celeste-dropdown-anchor-trigger-prefix) {
+      margin-inline-end: var(--spacing-8);
+    }
+
+    :deep(.celeste-dropdown-trigger) {
+      margin-inline-start: var(--spacing-2);
+    }
+
+    &.celeste-dropdown-anchor-trigger-filled:not([data-disabled]) :deep(.celeste-dropdown-trigger i) {
+      color: var(--color-icon-sub-600);
+    }
 
     &:deep(.celeste-dropdown-trigger-label) {
       flex: inherit;
@@ -206,6 +219,31 @@ const forwarded = useForwardProps(delegatedProps);
     &[data-state='open'] {
       box-shadow: none;
     }
+
+    &:focus-visible {
+      background: var(--color-bg-weak-50);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-md {
+      padding-inline: var(--spacing-10) var(--spacing-8);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-sm {
+      padding-inline: var(--spacing-8);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-xs {
+      padding-inline: var(--spacing-8) var(--spacing-6);
+
+      :deep(.celeste-dropdown-anchor-trigger-prefix) {
+        margin-inline-end: var(--spacing-6);
+      }
+
+      :deep(.celeste-dropdown-anchor-trigger-prefix :is(i, .selected-dropdown-image)) {
+        width: 16px;
+        height: 16px;
+      }
+    }
   }
 
   &.celeste-dropdown-anchor-trigger-type-inline {

package/src/components/combobox/combobox.vue

@@ -253,6 +253,7 @@ const filteredOptions = computed(() => props.ignoreFilter
   align-items: center;
   justify-content: center;
   width: 20px;
+  max-width: none;
   height: 20px;
   object-fit: cover;
   border-radius: var(--radius-full);
@@ -274,6 +275,7 @@ const filteredOptions = computed(() => props.ignoreFilter
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    unicode-bidi: plaintext;
   }
 }