@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/Components/Accordion/composables/useAccordion.js

@@ -0,0 +1,79 @@
+import { ACCORDION_INJECTION_KEY as e } from "../accordionInjectionKey.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { computed as i, provide as a, ref as o, useAttrs as s, useId as c } from "vue";
+import { cn as l, getAccordionTriggerId as u, mergeBridgeUILayeredClasses as d, normalizeAccordionValue as f, splitComponentProps as p, toggleAccordionItem as m } from "@bridge-ui/core";
+import { get as h } from "es-toolkit/compat";
+import { colorProps as g, sizeProps as _, variantProps as v } from "@bridge-ui/core/Tokens/Accordion";
+//#region src/Components/Accordion/composables/useAccordion.ts
+var y = [
+	"size",
+	"color",
+	"classes",
+	"variant",
+	"disabled",
+	"multiple",
+	"customProps"
+];
+function b(b, x, S, C) {
+	let w = c(), T = s(), E = `bridge-accordion${w}`, D = o([]), O = o([]), k = i(() => p({
+		props: {
+			...T,
+			...b
+		},
+		bridgeKeys: y
+	})), { merged: A, entry: j } = n({
+		libDefaults: x,
+		componentName: "Accordion",
+		props: () => k.value.componentProps
+	}), M = i(() => A.value.multiple === !0), N = i(() => f(S.value, M.value));
+	function P(e) {
+		if (A.value.disabled || O.value.includes(e)) return;
+		let t = m(N.value, e, M.value);
+		S.value = t, C("update:modelValue", t), C("change", t);
+	}
+	function F(e, t = !1) {
+		return D.value.includes(e) || (D.value = [...D.value, e]), t ? O.value.includes(e) || (O.value = [...O.value, e]) : O.value = O.value.filter((t) => t !== e), () => {
+			D.value = D.value.filter((t) => t !== e), O.value = O.value.filter((t) => t !== e);
+		};
+	}
+	function I(e) {
+		document.getElementById(u(E, e))?.focus();
+	}
+	let L = r({
+		entry: j,
+		props: () => k.value.componentProps
+	}), R = i(() => d(_, j.value?.tokens?.size)), z = i(() => d(v, j.value?.tokens?.variant)), B = i(() => d(g, j.value?.tokens?.color)), V = i(() => h(R.value, A.value.size)), H = i(() => h(z.value, A.value.variant)), U = i(() => h(B.value, A.value.color)), W = i(() => ({
+		toggleItem: P,
+		registerItem: F,
+		focusTrigger: I,
+		id: E,
+		multiple: M.value,
+		expanded: N.value,
+		itemValues: D.value,
+		disabledValues: O.value,
+		disabled: A.value.disabled === !0,
+		tokenClasses: {
+			rootSize: h(V.value, "root"),
+			itemSize: h(V.value, "item"),
+			iconSize: h(V.value, "icon"),
+			panelSize: h(V.value, "panel"),
+			triggerSize: h(V.value, "trigger"),
+			rootVariant: h(H.value, "root"),
+			itemVariant: h(H.value, "item"),
+			triggerVariant: h(H.value, "trigger"),
+			colorIndicator: h(U.value, "indicator"),
+			colorTriggerExpanded: h(U.value, "triggerExpanded")
+		}
+	}));
+	return a(e, W), {
+		merged: A,
+		rootBind: i(() => t(A.value.customProps?.root, k.value.inheritedAttrs, { class: l({
+			[h(V.value, "root") ?? ""]: !0,
+			[h(H.value, "root") ?? ""]: !0,
+			[h(L.value, "root") ?? ""]: !0
+		}) })),
+		contextValue: W
+	};
+}
+//#endregion
+export { b as useAccordion };

package/dist/Components/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export type { AccordionClasses, AccordionColorOverrides, AccordionCustomProps, AccordionEmits, AccordionOwnProps, AccordionProps, AccordionSizeOverrides, AccordionSlots, AccordionVariantOverrides, } from './accordion.types';
+export { default as Accordion } from './Accordion.vue';
+export { ACCORDION_INJECTION_KEY, type AccordionContextValue, type AccordionTokenClasses, } from './accordionInjectionKey';
+export { useAccordion } from './composables/useAccordion';

package/dist/Components/Accordion/index.js

@@ -0,0 +1,4 @@
+import { ACCORDION_INJECTION_KEY as e } from "./accordionInjectionKey.js";
+import { useAccordion as t } from "./composables/useAccordion.js";
+import n from "./Accordion.js";
+export { e as ACCORDION_INJECTION_KEY, n as Accordion, t as useAccordion };

package/dist/Components/AccordionItem/AccordionItem.js

@@ -0,0 +1,5 @@
+import e from "./AccordionItem.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/AccordionItem/AccordionItem.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/AccordionItem/AccordionItem.vue.d.ts

@@ -0,0 +1,11 @@
+import { AccordionItemOwnProps, AccordionItemSlots } from './accordionItem.types';
+type __VLS_Slots = AccordionItemSlots;
+declare const __VLS_base: import('vue').DefineComponent<AccordionItemOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AccordionItemOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/AccordionItem/AccordionItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { hasNamedSlot as e, isPropPresent as t } from "../../Utils/slotOrProp.js";
+import { useAccordionItem as n } from "./composables/useAccordionItem.js";
+import r from "../Icon/Icon.js";
+import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _ } from "vue";
+//#region src/Components/AccordionItem/AccordionItem.vue?vue&type=script&setup=true&lang.ts
+var v = /*@__PURE__*/ u({
+	inheritAttrs: !1,
+	__name: "AccordionItem",
+	props: {
+		classes: {},
+		customProps: {},
+		disabled: { type: Boolean },
+		title: {},
+		value: {}
+	},
+	setup(u) {
+		let { slots: v, merged: y, rootBind: b, titleBind: x, panelBind: S, triggerBind: C, collapseBind: w, indicatorBind: T, panelInnerBind: E } = n(u);
+		return (n, u) => (m(), s("div", p(d(_(b))), [c("button", p(d(_(C))), [c("span", p(d(_(x))), [_(e)(_(v), "title") ? h(n.$slots, "title", {}, void 0, void 0, 0) : _(t)(_(y).title) ? (m(), s(i, { key: 1 }, [l(g(_(y).title), 1)], 64)) : o("", !0)], 16), _(e)(_(v), "indicator") ? h(n.$slots, "indicator", {}, void 0, void 0, 0) : (m(), a(_(r), f({
+			key: 1,
+			icon: "chevronDown"
+		}, _(T)), null, 16))], 16), c("div", p(d(_(w))), [c("div", p(d(_(E))), [c("div", p(d(_(S))), [h(n.$slots, "default")], 16)], 16)], 16)], 16));
+	}
+});
+//#endregion
+export { v as default };

package/dist/Components/AccordionItem/accordionItem.types.d.ts

@@ -0,0 +1,105 @@
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { MergeHtmlProps } from '@bridge-ui/core';
+import { IconProps } from '../Icon';
+export interface AccordionItemClasses {
+    /**
+     * Classes merged onto the expand indicator icon.
+     */
+    indicator?: string;
+    /**
+     * Classes merged onto the panel region.
+     */
+    panel?: string;
+    /**
+     * Classes merged onto the item shell.
+     */
+    root?: string;
+    /**
+     * Classes merged onto the title text wrapper.
+     */
+    title?: string;
+    /**
+     * Classes merged onto the trigger button.
+     */
+    trigger?: string;
+}
+export interface AccordionItemCustomProps {
+    /**
+     * Props forwarded to the expand indicator `Icon`.
+     *
+     * @default undefined
+     */
+    indicator?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the panel region.
+     *
+     * @default undefined
+     */
+    panel?: HTMLAttributes;
+    /**
+     * Props forwarded to the item shell.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the title wrapper.
+     *
+     * @default undefined
+     */
+    title?: HTMLAttributes;
+    /**
+     * Props forwarded to the trigger button.
+     *
+     * @default undefined
+     */
+    trigger?: ButtonHTMLAttributes;
+}
+/**
+ * One accordion section (trigger + panel). Must be used inside `Accordion`.
+ */
+export interface AccordionItemOwnProps {
+    /**
+     * Classes for accordion item parts.
+     *
+     * @default undefined
+     */
+    classes?: AccordionItemClasses;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: AccordionItemCustomProps;
+    /**
+     * Disable this item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Trigger label (prefer `#title` slot when set).
+     *
+     * @default undefined
+     */
+    title?: string;
+    /**
+     * Stable id for expanded state.
+     */
+    value: string;
+}
+export interface AccordionItemSlots {
+    /**
+     * Panel content.
+     */
+    default?: Slot<undefined>;
+    /**
+     * Custom expand indicator (defaults to chevron icon).
+     */
+    indicator?: Slot<undefined>;
+    /**
+     * Custom title content (overrides `title` prop when set).
+     */
+    title?: Slot<undefined>;
+}
+export type AccordionItemProps = MergeHtmlProps<AccordionItemOwnProps, HTMLAttributes>;

package/dist/Components/AccordionItem/composables/useAccordionItem.d.ts

@@ -0,0 +1,41 @@
+import { IconSize } from '@bridge-ui/core';
+import { AccordionItemOwnProps, AccordionItemProps } from '../accordionItem.types';
+export declare function useAccordionItem(props: AccordionItemOwnProps): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    merged: import('vue').ComputedRef<AccordionItemOwnProps>;
+    expanded: import('vue').ComputedRef<boolean>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<AccordionItemProps, "value" | "classes" | "customProps" | "title" | "disabled">>>;
+    iconSize: import('vue').ComputedRef<keyof IconSize>;
+    titleBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        role: string;
+        "aria-hidden": boolean;
+        id: string;
+        "aria-labelledby": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        onClick: (event: MouseEvent) => void;
+        type: "button";
+        disabled: boolean;
+        onKeydown: (event: KeyboardEvent) => void;
+        "aria-expanded": boolean;
+        id: string;
+        "aria-controls": string;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    collapseBind: import('vue').ComputedRef<{
+        class: string;
+    }>;
+    indicatorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    panelInnerBind: import('vue').ComputedRef<{
+        class: string;
+    }>;
+};

package/dist/Components/AccordionItem/composables/useAccordionItem.js

@@ -0,0 +1,123 @@
+import { ACCORDION_INJECTION_KEY as e } from "../../Accordion/accordionInjectionKey.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { computed as i, inject as a, onBeforeUnmount as o, onMounted as s, useAttrs as c, useSlots as l, watch as u } from "vue";
+import { cn as d, getAccordionPanelId as f, getAccordionTriggerId as p, getAdjacentAccordionValue as m, isAccordionItemExpanded as h, splitComponentProps as g } from "@bridge-ui/core";
+import { get as _ } from "es-toolkit/compat";
+//#region src/Components/AccordionItem/composables/useAccordionItem.ts
+var v = [
+	"title",
+	"value",
+	"classes",
+	"disabled",
+	"customProps"
+];
+function y(y) {
+	let b = c(), x = l(), S = a(e, null);
+	if (!S) throw Error("AccordionItem must be used within an Accordion provider");
+	let C = S, w = i(() => g({
+		props: {
+			...b,
+			...y
+		},
+		bridgeKeys: v
+	})), { merged: T, entry: E } = n({
+		componentName: "AccordionItem",
+		props: () => w.value.componentProps
+	}), D = i(() => T.value.value), O = i(() => C.value.disabled || T.value.disabled === !0), k = i(() => h(C.value.expanded, D.value, C.value.multiple)), A = i(() => C.value.tokenClasses.iconSize ?? "md"), j = null;
+	function M() {
+		j?.(), j = C.value.registerItem(D.value, O.value);
+	}
+	s(M), u([D, O], M), o(() => {
+		j?.(), j = null;
+	});
+	let N = r({
+		entry: E,
+		props: () => w.value.componentProps
+	});
+	function P(e) {
+		O.value || (C.value.toggleItem(D.value), (T.value.customProps?.trigger)?.onClick?.(e));
+	}
+	function F(e) {
+		let t = C.value, n = new Set(t.disabledValues);
+		if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+			e.preventDefault();
+			let r = m(t.itemValues, D.value, 1, n);
+			t.focusTrigger(r);
+		}
+		if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+			e.preventDefault();
+			let r = m(t.itemValues, D.value, -1, n);
+			t.focusTrigger(r);
+		}
+		if (e.key === "Home") {
+			e.preventDefault();
+			let r = m(t.itemValues, t.itemValues[t.itemValues.length - 1] ?? D.value, 1, n);
+			t.focusTrigger(r);
+		}
+		if (e.key === "End") {
+			e.preventDefault();
+			let r = m(t.itemValues, t.itemValues[0] ?? D.value, -1, n);
+			t.focusTrigger(r);
+		}
+		(T.value.customProps?.trigger)?.onKeydown?.(e);
+	}
+	let I = i(() => t(T.value.customProps?.root, w.value.inheritedAttrs, { class: d({
+		[C.value.tokenClasses.itemSize ?? ""]: !0,
+		[C.value.tokenClasses.itemVariant ?? ""]: !0,
+		[_(N.value, "root") ?? ""]: !0
+	}) })), L = i(() => t(T.value.customProps?.trigger, {}, {
+		onClick: P,
+		type: "button",
+		disabled: O.value,
+		onKeydown: F,
+		"aria-expanded": k.value,
+		id: p(C.value.id, D.value),
+		"aria-controls": f(C.value.id, D.value),
+		class: d({
+			"inline-flex w-full cursor-pointer items-center justify-between text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 disabled:pointer-events-none disabled:opacity-50": !0,
+			[C.value.tokenClasses.triggerSize ?? ""]: !0,
+			[C.value.tokenClasses.triggerVariant ?? ""]: !0,
+			[C.value.tokenClasses.colorTriggerExpanded ?? ""]: k.value,
+			[_(N.value, "trigger") ?? ""]: !0
+		})
+	})), R = i(() => t(T.value.customProps?.title, {}, d({
+		"min-w-0 flex-1": !0,
+		[_(N.value, "title") ?? ""]: !0
+	}))), z = i(() => t(T.value.customProps?.indicator, {}, {
+		size: A.value,
+		class: d({
+			"shrink-0 transition-transform duration-200 motion-reduce:transition-none": !0,
+			"rotate-180": k.value,
+			[C.value.tokenClasses.colorIndicator ?? ""]: k.value,
+			[_(N.value, "indicator") ?? ""]: !0
+		})
+	})), B = i(() => ({ class: d({
+		"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none": !0,
+		"grid-rows-[1fr]": k.value,
+		"grid-rows-[0fr]": !k.value
+	}) })), V = i(() => ({ class: "min-h-0 overflow-hidden" }));
+	return {
+		slots: x,
+		merged: T,
+		expanded: k,
+		rootBind: I,
+		iconSize: A,
+		titleBind: R,
+		panelBind: i(() => t(T.value.customProps?.panel, {}, {
+			role: "region",
+			"aria-hidden": !k.value,
+			id: f(C.value.id, D.value),
+			"aria-labelledby": p(C.value.id, D.value),
+			class: d({
+				[C.value.tokenClasses.panelSize ?? ""]: !0,
+				[_(N.value, "panel") ?? ""]: !0
+			})
+		})),
+		triggerBind: L,
+		collapseBind: B,
+		indicatorBind: z,
+		panelInnerBind: V
+	};
+}
+//#endregion
+export { y as useAccordionItem };

package/dist/Components/AccordionItem/index.d.ts

@@ -0,0 +1,3 @@
+export type { AccordionItemClasses, AccordionItemCustomProps, AccordionItemOwnProps, AccordionItemProps, AccordionItemSlots, } from './accordionItem.types';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { useAccordionItem } from './composables/useAccordionItem';

package/dist/Components/AccordionItem/index.js

@@ -0,0 +1,3 @@
+import { useAccordionItem as e } from "./composables/useAccordionItem.js";
+import t from "./AccordionItem.js";
+export { t as AccordionItem, e as useAccordionItem };

package/dist/Components/Alert/Alert.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,12 @@
-import { hasNamedSlot as e, hasSlotOrProp as t, resolveNamedSlot as n, resolveSlotOrProp as r } from "../../Utils/slotOrProp.js";
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
+import r from "../Icon/Icon.js";
 import { useAlert as i } from "./composables/useAlert.js";
-import a from "../Icon/Icon.js";
-import { Fragment as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, resolveDynamicComponent as g, unref as _ } from "vue";
+import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v } from "vue";
 //#region src/Components/Alert/Alert.vue?vue&type=script&setup=true&lang.ts
-var v = {
+var y = {
 	key: 1,
 	class: "flex justify-between items-start"
-}, y = { class: "flex items-start gap-x-3" }, b = /* @__PURE__ */ d({
+}, b = { class: "flex items-start gap-x-3" }, x = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Alert",
 	props: {
@@ -21,19 +21,19 @@ var v = {
 		variant: {}
 	},
 	setup(d) {
-		let { slots: b, merged: x, bodyBind: S, iconBind: C, rootBind: w, titleBind: T, resolvedIcon: E, hasDefaultBody: D } = i(d, {
+		let { slots: x, merged: S, bodyBind: C, iconBind: w, rootBind: T, titleBind: E, resolvedIcon: D, hasDefaultBody: O } = i(d, {
 			shadow: "sm",
 			rounded: "sm",
 			variant: "flat",
 			color: "primary",
 			padding: "medium"
 		});
-		return (i, d) => (h(), l("div", m(f(_(w))), [
-			_(e)(_(b), "header") ? (h(), s(g(_(n)(_(b), "header")), { key: 0 })) : _(t)(_(b), "title", _(x).title) ? (h(), l("div", v, [u("div", y, [_(e)(_(b), "icon") || _(E) ? (h(), l(o, { key: 0 }, [_(e)(_(b), "icon") ? (h(), s(g(_(n)(_(b), "icon")), { key: 0 })) : _(E) ? (h(), s(a, p({ key: 1 }, _(C), { icon: _(E) }), null, 16, ["icon"])) : c("", !0)], 64)) : c("", !0), u("div", m(f(_(T))), [(h(), s(g(_(r)(_(b), "title", _(x).title))))], 16)]), (h(), s(g(_(n)(_(b), "action"))))])) : c("", !0),
-			_(D) ? (h(), l("div", m(p({ key: 2 }, _(S))), [(h(), s(g(_(n)(_(b), "default"))))], 16)) : c("", !0),
-			(h(), s(g(_(n)(_(b), "footer"))))
+		return (i, d) => (h(), c("div", m(f(v(T))), [
+			v(e)(v(x), "header") ? g(i.$slots, "header", {}, void 0, void 0, 0) : v(t)(v(x), "title", v(S).title) ? (h(), c("div", y, [l("div", b, [v(e)(v(x), "icon") ? g(i.$slots, "icon", {}, void 0, void 0, 0) : v(D) ? (h(), o(r, p({ key: 1 }, v(w), { icon: v(D) }), null, 16, ["icon"])) : s("", !0), l("div", m(f(v(E))), [v(e)(v(x), "title") ? g(i.$slots, "title", {}, void 0, void 0, 0) : v(n)(v(S).title) ? (h(), c(a, { key: 1 }, [u(_(v(S).title), 1)], 64)) : s("", !0)], 16)]), g(i.$slots, "action")])) : s("", !0),
+			v(O) ? (h(), c("div", m(p({ key: 2 }, v(C))), [g(i.$slots, "default")], 16)) : s("", !0),
+			g(i.$slots, "footer")
 		], 16));
 	}
 });
 //#endregion
-export { b as default };
+export { x as default };

package/dist/Components/Alert/composables/useAlert.js

@@ -1,5 +1,5 @@
-import { alertDefaultIcons as e } from "../alertDefaultIcons.js";
-import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { alertDefaultIcons as r } from "../alertDefaultIcons.js";
 import { computed as i, useAttrs as a, useSlots as o } from "vue";
 import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core";
 import { get as u, isNull as d } from "es-toolkit/compat";
@@ -23,32 +23,44 @@ function _(_, v) {
 			...y,
 			..._
 		}
-	})), { merged: S, entry: C } = n({
+	})), { merged: S, entry: C } = t({
 		libDefaults: v,
 		componentName: "Alert",
 		props: () => x.value.componentProps
-	}), w = i(() => S.value.customProps), T = r({
+	}), w = i(() => S.value.customProps), T = n({
 		entry: C,
 		props: () => x.value.componentProps
 	}), E = i(() => {
 		let e = b.default?.();
 		return !!(e && e.length > 0);
-	}), D = i(() => u(c(h, C.value?.tokens?.variant), [S.value.variant, S.value.color])), O = i(() => u(c(m, C.value?.tokens?.shadow), S.value.shadow)), k = i(() => u(c(f, C.value?.tokens?.padding), S.value.padding)), A = i(() => u(c(p, C.value?.tokens?.rounded), S.value.rounded)), j = i(() => d(S.value.icon) ? null : S.value.icon ? S.value.icon : u(D.value, "icon") ?? u(e, S.value.color));
+	}), D = i(() => {
+		let e = c(h, C.value?.tokens?.variant);
+		return u(e, [S.value.variant, S.value.color]);
+	}), O = i(() => {
+		let e = c(m, C.value?.tokens?.shadow);
+		return u(e, S.value.shadow);
+	}), k = i(() => {
+		let e = c(f, C.value?.tokens?.padding);
+		return u(e, S.value.padding);
+	}), A = i(() => {
+		let e = c(p, C.value?.tokens?.rounded);
+		return u(e, S.value.rounded);
+	}), j = i(() => d(S.value.icon) ? null : S.value.icon ? S.value.icon : u(D.value, "icon") ?? u(r, S.value.color));
 	return {
 		slots: b,
 		merged: S,
-		bodyBind: i(() => t(w.value?.body, {}, s({
+		bodyBind: i(() => e(w.value?.body, {}, s({
 			"grow text-sm text-start": !0,
 			[k.value ?? ""]: !0,
 			[u(D.value, "text") ?? ""]: !0,
 			[u(T.value, "body") ?? ""]: !0
 		}))),
-		iconBind: i(() => t(w.value?.icon, {}, s({
+		iconBind: i(() => e(w.value?.icon, {}, s({
 			"w-5 h-5 shrink-0": !0,
 			[u(D.value, "iconColor") ?? ""]: !0,
 			[u(T.value, "icon") ?? ""]: !0
 		}))),
-		rootBind: i(() => t(w.value?.root, x.value.inheritedAttrs, s({
+		rootBind: i(() => e(w.value?.root, x.value.inheritedAttrs, s({
 			"w-full flex flex-col p-4": !0,
 			[O.value ?? ""]: !0,
 			[A.value ?? ""]: !0,
@@ -56,7 +68,7 @@ function _(_, v) {
 			[u(D.value, "background") ?? ""]: !0,
 			[u(T.value, "root") ?? ""]: !0
 		}))),
-		titleBind: i(() => t(w.value?.title, {}, s({
+		titleBind: i(() => e(w.value?.title, {}, s({
 			"text-start text-sm whitespace-normal": !0,
 			"font-normal": !E.value,
 			"font-semibold": E.value,

package/dist/Components/Autocomplete/Autocomplete.vue.d.ts

@@ -9,6 +9,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     clear: () => any;
     search: (query: string) => any;
     select: (option: import('@bridge-ui/core').ListboxOption) => any;
+    cancel: () => any;
     change: (value: import('@bridge-ui/core').SelectModel) => any;
     close: () => any;
     deselect: (option: import('@bridge-ui/core').ListboxOption) => any;
@@ -18,6 +19,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     onClear?: (() => any) | undefined;
     onSearch?: ((query: string) => any) | undefined;
     onSelect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onChange?: ((value: import('@bridge-ui/core').SelectModel) => any) | undefined;
     onClose?: (() => any) | undefined;
     onDeselect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;