@youcan/celeste 0.14.1 → 0.15.0

package/ai/README.md

@@ -1,6 +1,6 @@
 # Celeste agent indexes
 
-Generated from source for `@youcan/celeste@0.14.1`. Do not edit.
+Generated from source for `@youcan/celeste@0.15.0`. Do not edit.
 
 - `component-registry.json` — every component's props, events, slots, story and usage example, and
   every exported helper such as `toast`

package/ai/component-registry.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.14.1",
-  "generatedAt": "2026-09-21T11:13:19.672Z",
+  "version": "0.15.0",
+  "generatedAt": "2026-09-22T17:11:45.902Z",
   "components": {
     "Alert": {
       "name": "Alert",
@@ -1576,6 +1576,11 @@
           "type": "string",
           "required": false
         },
+        {
+          "name": "searchTerm",
+          "type": "string",
+          "required": false
+        },
         {
           "name": "size",
           "type": "\"xs\" | \"sm\" | \"md\"",
@@ -1613,6 +1618,10 @@
           "name": "update:open",
           "type": "[value: boolean]"
         },
+        {
+          "name": "update:searchTerm",
+          "type": "[value: string | undefined]"
+        },
         {
           "name": "highlight",
           "type": "[payload: { ref: HTMLElement; value: AcceptableValue; } | undefined]"

package/ai/icons.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.14.1",
-  "generatedAt": "2026-09-21T11:13:16.441Z",
+  "version": "0.15.0",
+  "generatedAt": "2026-09-22T17:11:41.333Z",
   "prefix": "celeste",
   "icons": [
     {

package/ai/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "version": "0.14.1",
-  "generatedAt": "2026-09-21T11:13:16.441Z",
+  "version": "0.15.0",
+  "generatedAt": "2026-09-22T17:11:41.333Z",
   "tokens": [
     {
       "name": "animation-extra-fast",

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;

package/dist/cjs/chunks/combobox.cjs

@@ -32,12 +32,13 @@ var _hoisted_8 = ["src"];
 var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "combobox",
-	props: {
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
 		options: {},
 		valueBy: {},
 		labelBy: {},
 		placeholder: { default: "Select" },
 		searchPlaceholder: {},
+		searchTerm: {},
 		type: {},
 		size: { default: "md" },
 		emptyLabel: {},
@@ -63,17 +64,21 @@ var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 		as: {},
 		name: {},
 		required: { type: Boolean }
-	},
-	emits: [
+	}, {
+		"searchTerm": {},
+		"searchTermModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)([
 		"update:modelValue",
 		"highlight",
 		"update:open"
-	],
+	], ["update:searchTerm"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emits = __emit;
+		const searchTerm = (0, vue.useModel)(__props, "searchTerm");
 		const delegatedProps = (0, vue.computed)(() => {
-			const { open, options, valueBy, labelBy, placeholder, searchPlaceholder, type, size, emptyLabel, badgeProps, searchable, class: _class, ...delegated } = props;
+			const { open, options, valueBy, labelBy, placeholder, searchPlaceholder, type, size, emptyLabel, badgeProps, searchable, searchTerm: _searchTerm, class: _class, ...delegated } = props;
 			return delegated;
 		});
 		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(delegatedProps, emits);
@@ -107,8 +112,7 @@ var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 			...props.badgeProps,
 			disabled: props.disabled
 		}));
-		const searchTerm = (0, vue.ref)("");
-		const filteredOptions = (0, vue.computed)(() => filterFunction(props.options, searchTerm.value));
+		const filteredOptions = (0, vue.computed)(() => props.ignoreFilter ? props.options : filterFunction(props.options, searchTerm.value ?? ""));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)(require_combobox_root.combobox_root_default, (0, vue.mergeProps)((0, vue.unref)(forwarded), { "ignore-filter": "" }), {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(require_combobox_anchor.combobox_anchor_default, { "as-child": "" }, {
@@ -197,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-ed0b4dd2"]]);
+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"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_default", {
 	enumerable: true,

package/dist/components/combobox/combobox.d.ts

@@ -7,6 +7,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
     labelBy?: string;
     placeholder?: string;
     searchPlaceholder?: string;
+    searchTerm?: string;
     type?: 'normal' | 'compact' | 'inline' | 'compact-input';
     size?: 'xs' | 'sm' | 'md';
     emptyLabel?: string;
@@ -14,6 +15,11 @@ export interface ComboboxPropsType extends ComboboxRootProps {
     searchable?: boolean;
     class?: string;
 }
+type __VLS_Props = ComboboxPropsType;
+type __VLS_ModelProps = {
+    'searchTerm'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_20: {
     selected: ComboboxItemPropsType;
 }, __VLS_22: {
@@ -24,20 +30,22 @@ type __VLS_Slots = {} & {
 } & {
     prefix?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<ComboboxPropsType, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: import('reka-ui').AcceptableValue) => any;
     "update:open": (value: boolean) => any;
     highlight: (payload: {
         ref: HTMLElement;
         value: import('reka-ui').AcceptableValue;
     } | undefined) => any;
-}, string, import('vue').PublicProps, Readonly<ComboboxPropsType> & Readonly<{
+    "update:searchTerm": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: import('reka-ui').AcceptableValue) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onHighlight?: ((payload: {
         ref: HTMLElement;
         value: import('reka-ui').AcceptableValue;
     } | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string | undefined) => any) | undefined;
 }>, {
     size: "xs" | "sm" | "md";
     placeholder: string;

package/dist/es/chunks/combobox.js

@@ -10,7 +10,7 @@ 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, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+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";
 //#region src/components/combobox/combobox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -34,12 +34,13 @@ var _hoisted_8 = ["src"];
 var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "combobox",
-	props: {
+	props: /*@__PURE__*/ mergeModels({
 		options: {},
 		valueBy: {},
 		labelBy: {},
 		placeholder: { default: "Select" },
 		searchPlaceholder: {},
+		searchTerm: {},
 		type: {},
 		size: { default: "md" },
 		emptyLabel: {},
@@ -65,17 +66,21 @@ var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		as: {},
 		name: {},
 		required: { type: Boolean }
-	},
-	emits: [
+	}, {
+		"searchTerm": {},
+		"searchTermModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
 		"update:modelValue",
 		"highlight",
 		"update:open"
-	],
+	], ["update:searchTerm"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emits = __emit;
+		const searchTerm = useModel(__props, "searchTerm");
 		const delegatedProps = computed(() => {
-			const { open, options, valueBy, labelBy, placeholder, searchPlaceholder, type, size, emptyLabel, badgeProps, searchable, class: _class, ...delegated } = props;
+			const { open, options, valueBy, labelBy, placeholder, searchPlaceholder, type, size, emptyLabel, badgeProps, searchable, searchTerm: _searchTerm, class: _class, ...delegated } = props;
 			return delegated;
 		});
 		const forwarded = useForwardPropsEmits(delegatedProps, emits);
@@ -109,8 +114,7 @@ var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			...props.badgeProps,
 			disabled: props.disabled
 		}));
-		const searchTerm = ref("");
-		const filteredOptions = computed(() => filterFunction(props.options, searchTerm.value));
+		const filteredOptions = computed(() => props.ignoreFilter ? props.options : filterFunction(props.options, searchTerm.value ?? ""));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(combobox_root_default, mergeProps(unref(forwarded), { "ignore-filter": "" }), {
 				default: withCtx(() => [createVNode(combobox_anchor_default, { "as-child": "" }, {
@@ -196,6 +200,6 @@ var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}, 16);
 		};
 	}
-}), [["__scopeId", "data-v-ed0b4dd2"]]);
+}), [["__scopeId", "data-v-f1dfb246"]]);
 //#endregion
 export { combobox_default as t };

package/package.json

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

package/src/components/combobox/combobox.vue

@@ -4,7 +4,7 @@ import type { BadgeProps } from '../badge/badge.vue';
 import type { ComboboxItemPropsType } from './combobox-item.vue';
 
 import { useForwardPropsEmits } from 'reka-ui';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import Badge from '../badge/badge.vue';
 import ComboboxAnchor from './combobox-anchor.vue';
 import ComboboxEmpty from './combobox-empty.vue';
@@ -22,6 +22,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
   labelBy?: string;
   placeholder?: string;
   searchPlaceholder?: string;
+  searchTerm?: string;
   type?: 'normal' | 'compact' | 'inline' | 'compact-input';
   size?: 'xs' | 'sm' | 'md';
   emptyLabel?: string;
@@ -39,6 +40,7 @@ const props = withDefaults(defineProps<ComboboxPropsType>(), {
   size: 'md',
 });
 const emits = defineEmits<ComboboxRootEmits>();
+const searchTerm = defineModel<string>('searchTerm');
 
 const delegatedProps = computed(() => {
   const {
@@ -53,6 +55,7 @@ const delegatedProps = computed(() => {
     emptyLabel,
     badgeProps,
     searchable,
+    searchTerm: _searchTerm,
     class: _class,
     ...delegated
   } = props;
@@ -132,9 +135,9 @@ const mergedBadgeProps = computed(() => ({
   disabled: props.disabled,
 }));
 
-const searchTerm = ref('');
-
-const filteredOptions = computed(() => filterFunction(props.options, searchTerm.value));
+const filteredOptions = computed(() => props.ignoreFilter
+  ? props.options
+  : filterFunction(props.options, searchTerm.value ?? ''));
 </script>
 
 <template>

package/src/components/combobox/stories/combobox.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import Combobox from '../combobox.vue';
 
 const meta: Meta<typeof Combobox> = {
@@ -241,3 +241,37 @@ export const Preselected: Story = {
     `,
   }),
 };
+
+export const ControlledSearch: Story = {
+  args: {
+    valueBy: 'id',
+    placeholder: 'Search and select',
+    searchable: true,
+    searchPlaceholder: 'Search Users',
+    ignoreFilter: true,
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      const selectedValue = ref();
+      const searchTerm = ref('');
+
+      const options = computed(() => OPTIONS.filter(option => option.label
+        .toLowerCase()
+        .startsWith(searchTerm.value.toLowerCase())));
+
+      return { args, selectedValue, searchTerm, options };
+    },
+    template: `
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" v-model:search-term="searchTerm" :options="options" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Term:</strong> {{ searchTerm || 'None' }}
+          <br>
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+        </div>
+      </div>
+    `,
+  }),
+};