@bridge-ui/vue 0.0.1-beta.1 → 0.0.1-beta.3

package/dist/Components/Alert/alert.types.d.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-vue-next';
+import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, Slot } from 'vue';
 import { AlertColor, AlertPadding, AlertRounded, AlertShadow, AlertVariant, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
 import { IconProps } from '../Icon';

package/dist/Components/Alert/alertDefaultIcons.d.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-vue-next';
+import { LucideIcon } from '@lucide/vue';
 import { AlertColor } from '@bridge-ui/core/Components/Alert';
 /** Library fallbacks when neither the `icon` prop nor theme `icon` is set. */
 export declare const alertDefaultIcons: Record<keyof AlertColor, LucideIcon>;

package/dist/Components/Alert/alertDefaultIcons.js

@@ -1,4 +1,4 @@
-import { Bell as e, CircleAlert as t, CircleCheck as n, CircleX as r, Info as i, TriangleAlert as a } from "lucide-vue-next";
+import { Bell as e, CircleAlert as t, CircleCheck as n, CircleX as r, Info as i, TriangleAlert as a } from "@lucide/vue";
 //#region src/Components/Alert/alertDefaultIcons.ts
 var o = {
 	dark: i,

package/dist/Components/Alert/composables/useAlert.d.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-vue-next';
+import { LucideIcon } from '@lucide/vue';
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
 import { AlertOwnProps, AlertProps } from '..';
 type AlertLibDefaults = LibDefaultsShape<AlertOwnProps, "color" | "shadow" | "padding" | "rounded" | "variant">;

package/dist/Components/Avatar/avatar.types.d.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-vue-next';
+import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, Slot } from 'vue';
 import { AvatarColor, AvatarRounded, AvatarSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
 export interface AvatarSizeOverrides {}

package/dist/Components/Avatar/composables/useAvatar.d.ts

@@ -15,7 +15,7 @@ export declare function useAvatar(props: AvatarProps, libDefaults: AvatarLibDefa
         src: string | undefined;
     }>>;
     fallbackBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
-    resolvedIcon: import('vue').ComputedRef<import('lucide-vue-next').LucideIcon>;
+    resolvedIcon: import('vue').ComputedRef<import('@lucide/vue').LucideIcon>;
     hasFallbackSlot: import('vue').ComputedRef<boolean>;
     hasFallbackText: import('vue').ComputedRef<boolean>;
     hasCustomContent: import('vue').ComputedRef<boolean>;

package/dist/Components/Avatar/composables/useAvatar.js

@@ -3,7 +3,7 @@ import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistr
 import { computed as i, useAttrs as a, useSlots as o } from "vue";
 import { get as s, isEmpty as c, isNil as l } from "es-toolkit/compat";
 import { cn as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core";
-import { User as p } from "lucide-vue-next";
+import { User as p } from "@lucide/vue";
 import { colorProps as m, iconSizeProps as h, roundedProps as g, sizeProps as _ } from "@bridge-ui/core/Components/Avatar";
 //#region src/Components/Avatar/composables/useAvatar.ts
 var v = [

package/dist/Components/Button/Button.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { hasNamedSlot as e, isPropPresent as t, resolveNamedSlot as n } from "..
 import r from "../Icon/Icon.js";
 import { useButton as i } from "./composables/useButton.js";
 import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, defineComponent as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, useSlots as _, withCtx as v } from "vue";
-import { Loader2 as y } from "lucide-vue-next";
+import { Loader2 as y } from "@lucide/vue";
 //#region src/Components/Button/Button.vue?vue&type=script&setup=true&lang.ts
 var b = /* @__PURE__ */ u({
 	inheritAttrs: !1,

package/dist/Components/Button/button.types.d.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-vue-next';
+import { LucideIcon } from '@lucide/vue';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
 import { ButtonColor, ButtonDensity, ButtonRounded, ButtonSize, ButtonVariant, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
 import { IconProps } from '../Icon';

package/dist/Components/Checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import e from "../FormControl/FormControl.js";
 import { useCheckbox as t } from "./composables/useCheckbox.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, guardReactiveProps as c, mergeModels as l, mergeProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, unref as m, useAttrs as h, useModel as g, withCtx as _ } from "vue";
 import { cn as v } from "@bridge-ui/core";
-import { Check as y } from "lucide-vue-next";
+import { Check as y } from "@lucide/vue";
 //#region src/Components/Checkbox/Checkbox.vue?vue&type=script&setup=true&lang.ts
 var b = ["for"], x = ["checked"], S = {
 	key: 1,

package/dist/Components/Chip/Chip.js

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

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

@@ -0,0 +1,20 @@
+import { ChipOwnProps, ChipSlots } from './chip.types';
+type __VLS_Slots = ChipSlots;
+declare const __VLS_base: import('vue').DefineComponent<ChipOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    dismiss: (event: MouseEvent | KeyboardEvent) => any;
+}, string, import('vue').PublicProps, Readonly<ChipOwnProps> & Readonly<{
+    onDismiss?: ((event: MouseEvent | KeyboardEvent) => any) | undefined;
+}>, {
+    size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ChipSize, import('./chip.types').ChipSizeOverrides>;
+    disabled: boolean;
+    clearLabel: string;
+    dismissible: boolean;
+}, {}, {}, {}, 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/Chip/Chip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import { useChip as r } from "./composables/useChip.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useSlots as y } from "vue";
+import { X as b } from "@lucide/vue";
+//#region src/Components/Chip/Chip.vue?vue&type=script&setup=true&lang.ts
+var x = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "Chip",
+	props: {
+		classes: {},
+		clearLabel: { default: "Remove" },
+		customProps: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		dismissible: {
+			type: Boolean,
+			default: !1
+		},
+		label: {},
+		size: { default: "md" }
+	},
+	emits: ["dismiss"],
+	setup(d, { emit: x }) {
+		let S = y(), { merged: C, rootBind: w, labelBind: T, clearBind: E, clearIconSize: D, handleDismiss: O, handleClearKeyDown: k } = r(d, { size: "md" }, x), A = a(() => C.value.customProps?.clearIcon), j = a(() => D.value), M = a(() => e(S, "default") || !!C.value.label);
+		return (r, a) => (h(), c("span", m(f(v(w))), [M.value ? (h(), c("span", m(p({ key: 0 }, v(T))), [v(e)(v(S), "default") ? (h(), o(g(v(t)(v(S), "default")), { key: 0 })) : (h(), c(i, { key: 1 }, [l(_(d.label), 1)], 64))], 16)) : s("", !0), d.dismissible ? (h(), c("span", p({ key: 1 }, v(E), {
+			onClick: a[0] ||= (...e) => v(O) && v(O)(...e),
+			onKeydown: a[1] ||= (...e) => v(k) && v(k)(...e)
+		}), [u(v(n), p({ icon: v(b) }, A.value, { size: j.value }), null, 16, ["icon", "size"])], 16)) : s("", !0)], 16));
+	}
+});
+//#endregion
+export { x as default };

package/dist/Components/Chip/chip.types.d.ts

@@ -0,0 +1,93 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { ChipSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { IconProps } from '../Icon';
+export interface ChipSizeOverrides {}
+export interface ChipClasses {
+    /**
+     * Classes merged onto the dismiss control.
+     */
+    clear?: string;
+    /**
+     * Classes merged onto the label.
+     */
+    label?: string;
+    /**
+     * Classes merged onto the root element.
+     */
+    root?: string;
+}
+export interface ChipCustomProps {
+    /**
+     * Props forwarded to the dismiss control.
+     */
+    clear?: HTMLAttributes;
+    /**
+     * Props forwarded to the dismiss `Icon` (`icon` is set by the chip).
+     */
+    clearIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the label element.
+     */
+    label?: HTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     */
+    root?: HTMLAttributes;
+}
+export interface ChipEmits {
+    /**
+     * Emitted when the dismiss control is activated.
+     */
+    dismiss: [event: MouseEvent | KeyboardEvent];
+}
+export interface ChipOwnProps {
+    /**
+     * Classes for chip parts.
+     *
+     * @default undefined
+     */
+    classes?: ChipClasses;
+    /**
+     * Accessible name for the dismiss control.
+     *
+     * @default "Remove"
+     */
+    clearLabel?: string;
+    /**
+     * Extra props for internal parts (`root`, `label`, `clear`, …).
+     *
+     * @default undefined
+     */
+    customProps?: ChipCustomProps;
+    /**
+     * Whether the chip is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows a dismiss control that emits `dismiss`.
+     *
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Chip label text. Prefer the default slot for custom content.
+     *
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * Typography and padding scale, aligned with `FormField` / `Select`.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<ChipSize, ChipSizeOverrides>;
+}
+export interface ChipSlots {
+    /**
+     * Chip content. Falls back to `label` when omitted.
+     */
+    default?: Slot;
+}
+export type ChipProps = MergeHtmlProps<ChipOwnProps, HTMLAttributes>;

package/dist/Components/Chip/composables/useChip.d.ts

@@ -0,0 +1,22 @@
+import { SetupContext } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { ChipClasses, ChipEmits, ChipOwnProps, ChipProps } from '../chip.types';
+export declare const chipBridgeKeys: readonly ["size", "label", "classes", "disabled", "clearLabel", "customProps", "dismissible"];
+type ChipLibDefaults = LibDefaultsShape<ChipOwnProps, "size">;
+type ChipMerged = MergeLibDefaults<ChipOwnProps, ChipLibDefaults>;
+export declare function useChip(props: ChipOwnProps, libDefaults: ChipLibDefaults, emit: SetupContext<ChipEmits>["emit"]): {
+    merged: import('vue').ComputedRef<ChipMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<ChipProps, "size" | "classes" | "customProps" | "label" | "disabled" | "clearLabel" | "dismissible">>>;
+    labelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    clearBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        role: string;
+        tabindex: number;
+        "aria-label": string;
+        "aria-disabled": boolean | undefined;
+    }>>;
+    clearIconSize: import('vue').ComputedRef<string>;
+    mergedClasses: import('vue').ComputedRef<Partial<ChipClasses>>;
+    handleDismiss: (event: MouseEvent | KeyboardEvent) => void;
+    handleClearKeyDown: (event: KeyboardEvent) => void;
+};
+export {};

package/dist/Components/Chip/composables/useChip.js

@@ -0,0 +1,66 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { computed as r, useAttrs as i } from "vue";
+import { get as a } from "es-toolkit/compat";
+import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { sizeProps as l } from "@bridge-ui/core/Components/Chip";
+//#region src/Components/Chip/composables/useChip.ts
+var u = [
+	"size",
+	"label",
+	"classes",
+	"disabled",
+	"clearLabel",
+	"customProps",
+	"dismissible"
+];
+function d(d, f, p) {
+	let m = i(), h = r(() => c({
+		bridgeKeys: u,
+		props: {
+			...m,
+			...d
+		}
+	})), { merged: g, entry: _ } = t({
+		libDefaults: f,
+		componentName: "Chip",
+		props: () => h.value.componentProps
+	}), v = n({
+		entry: _,
+		props: () => h.value.componentProps
+	}), y = r(() => g.value.customProps), b = r(() => a(s(l, _.value?.customProps?.size), g.value.size ?? "md")), x = r(() => b.value?.clear ?? "md"), S = r(() => e(y.value?.root, h.value.inheritedAttrs, o({
+		"inline-flex max-w-full items-center bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100": !0,
+		"opacity-50 pointer-events-none": g.value.disabled === !0,
+		[b.value?.root ?? ""]: !0,
+		[v.value.root ?? ""]: !0
+	}))), C = r(() => e(y.value?.label, {}, o({
+		truncate: !0,
+		[b.value?.label ?? ""]: !0,
+		[v.value.label ?? ""]: !0
+	}))), w = r(() => e(y.value?.clear, {
+		role: "button",
+		tabindex: g.value.disabled ? -1 : 0,
+		"aria-label": g.value.clearLabel ?? "Remove",
+		"aria-disabled": g.value.disabled ? !0 : void 0
+	}, o({
+		"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-gray-400 transition-colors duration-150 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200": !0,
+		[v.value.clear ?? ""]: !0
+	})));
+	function T(e) {
+		g.value.disabled || p("dismiss", e);
+	}
+	function E(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), T(e));
+	}
+	return {
+		merged: g,
+		rootBind: S,
+		labelBind: C,
+		clearBind: w,
+		clearIconSize: x,
+		mergedClasses: v,
+		handleDismiss: T,
+		handleClearKeyDown: E
+	};
+}
+//#endregion
+export { d as useChip };

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

@@ -0,0 +1,3 @@
+export type { ChipClasses, ChipCustomProps, ChipEmits, ChipOwnProps, ChipProps, ChipSizeOverrides, ChipSlots, } from './chip.types';
+export { default as Chip } from './Chip.vue';
+export { useChip } from './composables/useChip';

package/dist/Components/Chip/index.js

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

package/dist/Components/FormField/composables/useFormField.d.ts

@@ -220,7 +220,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     }>>;
     controlId: import('vue').ComputedRef<string>;
     errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    errorIcon: import('vue').ComputedRef<import('lucide-vue-next').LucideIcon>;
+    errorIcon: import('vue').ComputedRef<import('@lucide/vue').LucideIcon>;
     inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
         id: string;
         disabled: boolean;

package/dist/Components/FormField/composables/useFormField.js

@@ -3,7 +3,7 @@ import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistr
 import { computed as a, toValue as o, useId as s, useSlots as c } from "vue";
 import { get as l, omit as u } from "es-toolkit/compat";
 import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core";
-import { CircleAlert as m } from "lucide-vue-next";
+import { CircleAlert as m } from "@lucide/vue";
 import { colorProps as h, invalidatedProps as g, roundedProps as _, sizeProps as v, variantProps as y } from "@bridge-ui/core/Components/FormField";
 //#region src/Components/FormField/composables/useFormField.ts
 var b = [

package/dist/Components/FormField/formField.types.d.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-vue-next';
+import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, InputHTMLAttributes, Slot } from 'vue';
 import { FormFieldColor, FormFieldInvalidated, FormFieldRounded, FormFieldSize, FormFieldVariant, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
 import { UseFormFieldReturn } from './composables/useFormField';

package/dist/Components/Icon/icon.types.d.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-vue-next';
+import { LucideIcon } from '@lucide/vue';
 import { SVGAttributes } from 'vue';
 import { IconSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
 export interface IconSizeOverrides {}

package/dist/Components/Link/link.types.d.ts

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-vue-next';
+import { LucideIcon } from '@lucide/vue';
 import { AnchorHTMLAttributes, HTMLAttributes, Slot } from 'vue';
 import { LinkColor, LinkSize, LinkUnderline, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
 import { IconProps } from '../Icon';

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

@@ -15,6 +15,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     "onShow-change"?: ((show: boolean) => any) | undefined;
 }>, {
     color: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxColor, import('./listbox.types').ListboxColorOverrides>;
+    size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxSize, import('./listbox.types').ListboxSizeOverrides>;
     loading: boolean;
     multiple: boolean;
     disableAutoFocus: boolean;
@@ -22,6 +23,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     emptyMessage: string;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
+    loadingMessage: string;
     showCheckmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -3,19 +3,13 @@ import n from "../List/List.js";
 import { useListbox as r } from "./composables/useListbox.js";
 import i from "../ListItem/ListItem.js";
 import a from "../Menu/Menu.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createSlots as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, normalizeClass as g, normalizeProps as _, openBlock as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useModel as w, useSlots as T, watch as E, withCtx as D } from "vue";
-import { cn as O } from "@bridge-ui/core";
-import { Check as k } from "lucide-vue-next";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, renderList as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useModel as E, useSlots as D, watch as O, withCtx as k } from "vue";
+import { cn as A } from "@bridge-ui/core";
+import { Check as j } from "@lucide/vue";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var A = {
-	key: 1,
-	class: "px-4 py-3 text-sm text-gray-500"
-}, j = { key: 1 }, M = {
-	key: 3,
-	class: "px-4 py-3 text-sm text-gray-500"
-}, N = /* @__PURE__ */ p({
+var M = { key: 1 }, N = /* @__PURE__ */ m({
 	__name: "Listbox",
-	props: /* @__PURE__ */ m({
+	props: /* @__PURE__ */ g({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -39,6 +33,7 @@ var A = {
 			type: Boolean,
 			default: !1
 		},
+		loadingMessage: { default: "Loading..." },
 		maxHeight: {},
 		multiple: {
 			type: Boolean,
@@ -49,7 +44,8 @@ var A = {
 		showCheckmark: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		size: { default: "md" }
 	}, {
 		modelValue: {
 			type: Boolean,
@@ -57,52 +53,60 @@ var A = {
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ m(["select", "show-change"], ["update:modelValue"]),
-	setup(p, { emit: m }) {
-		let N = T(), P = m, F = w(p, "modelValue");
-		E(F, (e) => {
+	emits: /* @__PURE__ */ g(["select", "show-change"], ["update:modelValue"]),
+	setup(m, { emit: g }) {
+		let N = D(), P = g, F = E(m, "modelValue");
+		O(F, (e) => {
 			P("show-change", e);
 		});
-		let I = p, { merged: L, checkClass: R, scrollBind: z, mergedClasses: B, optionSelectedClass: V, optionHighlightedClass: H } = r(I, { color: "primary" }), U = s(() => !I.loading && I.options.length === 0 && I.hideEmptyMessage !== !0), W = s(() => O(R.value, B.value.check));
-		function G(e) {
+		let I = m, { checkClass: L, scrollBind: R, contentBind: z, messageBind: B, loadingBind: V, sizeClasses: H, mergedClasses: U, loadingTrackBind: W, optionSelectedClass: G, optionHighlightedClass: K } = r(I, {
+			size: "md",
+			color: "primary"
+		}), q = s(() => ({ content: z.value })), J = s(() => !I.loading && I.options.length === 0 && I.hideEmptyMessage !== !0), Y = s(() => A(L.value, U.value.check));
+		function X(e) {
 			return I.isSelected?.(e) ?? !1;
 		}
-		function K(e) {
+		function Z(e) {
 			return I.highlightedIndex === e;
 		}
-		function q(e) {
+		function Q(e) {
 			e.preventDefault();
 		}
-		function J(e, t) {
+		function $(e, t) {
 			let n = {
 				tabindex: -1,
-				onMousedown: q
+				onMousedown: Q,
+				class: A(H.value?.option)
+			};
+			return X(e.value) ? n.class = A(n.class, G.value, U.value.optionSelected) : Z(t) && (n.class = A(n.class, K.value, U.value.optionHighlighted)), {
+				interactive: n,
+				primary: { class: H.value?.primary },
+				secondary: { class: H.value?.secondary }
 			};
-			return G(e.value) ? n.class = O(V.value, B.value.optionSelected) : K(t) && (n.class = O(H.value, B.value.optionHighlighted)), { interactive: n };
 		}
-		function Y(e) {
+		function ee(e) {
 			e.disabled || P("select", e);
 		}
-		return (r, s) => (v(), c(C(a), {
+		return (r, s) => (b(), c(T(a), {
 			modelValue: F.value,
 			"onUpdate:modelValue": s[0] ||= (e) => F.value = e,
-			"anchor-el": p.anchorEl,
-			placement: p.placement,
+			"anchor-el": m.anchorEl,
+			placement: m.placement,
 			"close-on-click-away": !0,
-			"disable-auto-focus": p.disableAutoFocus,
-			"custom-props": { content: C(L).customProps?.content }
+			"custom-props": q.value,
+			"disable-auto-focus": m.disableAutoFocus
 		}, {
-			default: D(() => [
-				C(e)(C(N), "beforeOptions") ? (v(), c(x(C(t)(C(N), "beforeOptions")), { key: 0 })) : l("", !0),
-				p.loading ? (v(), u("div", A, [C(e)(C(N), "loading") ? (v(), c(x(C(t)(C(N), "loading")), { key: 0 })) : (v(), u("span", j, "Loading..."))])) : (v(), u("div", _(h({ key: 2 }, C(z))), [f(C(n), {
+			default: k(() => [
+				T(e)(T(N), "beforeOptions") ? (b(), c(C(T(t)(T(N), "beforeOptions")), { key: 0 })) : l("", !0),
+				m.loading ? (b(), u(o, { key: 1 }, [d("div", y(h(T(W))), [d("div", y(h(T(V))), null, 16)], 16), d("div", y(h(T(B))), [T(e)(T(N), "loading") ? (b(), c(C(T(t)(T(N), "loading")), { key: 0 })) : (b(), u("span", M, w(m.loadingMessage), 1))], 16)], 64)) : (b(), u("div", y(_({ key: 2 }, T(R))), [p(T(n), {
 					dense: "",
 					role: "listbox",
 					padding: "none",
-					id: p.listboxId,
-					"aria-labelledby": p.labelledBy,
-					"aria-multiselectable": p.multiple || void 0
+					id: m.listboxId,
+					"aria-labelledby": m.labelledBy,
+					"aria-multiselectable": m.multiple || void 0
 				}, {
-					default: D(() => [(v(!0), u(o, null, y(p.options, (t, n) => (v(), c(C(i), {
+					default: k(() => [(b(!0), u(o, null, x(m.options, (t, n) => (b(), c(T(i), {
 						interactive: "",
 						role: "option",
 						selected: !1,
@@ -110,20 +114,20 @@ var A = {
 						key: String(t.value),
 						disabled: t.disabled,
 						secondary: t.description,
-						onClick: (e) => Y(t),
-						id: `${p.listboxId}-option-${n}`,
-						"aria-selected": G(t.value),
-						"custom-props": J(t, n)
-					}, d({ _: 2 }, [C(e)(C(N), "option") ? {
+						onClick: (e) => ee(t),
+						id: `${m.listboxId}-option-${n}`,
+						"aria-selected": X(t.value),
+						"custom-props": $(t, n)
+					}, f({ _: 2 }, [T(e)(T(N), "option") ? {
 						name: "default",
-						fn: D(() => [b(r.$slots, "option", {
+						fn: k(() => [S(r.$slots, "option", {
 							option: t,
-							selected: G(t.value)
+							selected: X(t.value)
 						})]),
 						key: "0"
-					} : void 0, p.showCheckmark && G(t.value) ? {
+					} : void 0, m.showCheckmark && X(t.value) ? {
 						name: "end",
-						fn: D(() => [f(C(k), { class: g(["size-4", W.value]) }, null, 8, ["class"])]),
+						fn: k(() => [p(T(j), { class: v(Y.value) }, null, 8, ["class"])]),
 						key: "1"
 					} : void 0]), 1032, [
 						"primary",
@@ -140,16 +144,16 @@ var A = {
 					"aria-labelledby",
 					"aria-multiselectable"
 				])], 16)),
-				U.value && !C(e)(C(N), "empty") ? (v(), u("div", M, S(p.emptyMessage), 1)) : U.value && C(e)(C(N), "empty") ? (v(), c(x(C(t)(C(N), "empty")), { key: 4 })) : l("", !0),
-				C(e)(C(N), "afterOptions") ? (v(), c(x(C(t)(C(N), "afterOptions")), { key: 5 })) : l("", !0)
+				J.value && !T(e)(T(N), "empty") ? (b(), u("div", y(_({ key: 3 }, T(B))), w(m.emptyMessage), 17)) : J.value && T(e)(T(N), "empty") ? (b(), c(C(T(t)(T(N), "empty")), { key: 4 })) : l("", !0),
+				T(e)(T(N), "afterOptions") ? (b(), c(C(T(t)(T(N), "afterOptions")), { key: 5 })) : l("", !0)
 			]),
 			_: 3
 		}, 8, [
 			"modelValue",
 			"anchor-el",
 			"placement",
-			"disable-auto-focus",
-			"custom-props"
+			"custom-props",
+			"disable-auto-focus"
 		]));
 	}
 });

package/dist/Components/Listbox/composables/useListbox.d.ts

@@ -1,12 +1,21 @@
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
 import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
-type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "color">;
+export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "customProps", "invalidated", "disableMaxHeight"];
+type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
 type ListboxMerged = MergeLibDefaults<ListboxOwnProps, ListboxLibDefaults>;
 export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults): {
     merged: import('vue').ComputedRef<ListboxMerged>;
-    checkClass: import('vue').ComputedRef<string | undefined>;
+    checkClass: import('vue').ComputedRef<string>;
     scrollBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    messageBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+    loadingBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core').ListboxSizeItem | undefined>;
     mergedClasses: import('vue').ComputedRef<Partial<ListboxClasses>>;
+    loadingTrackBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {
+        role: string;
+        "aria-hidden": boolean;
+    }>>;
     optionSelectedClass: import('vue').ComputedRef<string | undefined>;
     optionHighlightedClass: import('vue').ComputedRef<string | undefined>;
 };