@bridge-ui/vue 0.0.1-beta.4 → 0.0.1-beta.6

package/dist/Components/Select/composables/useSelect.d.ts

@@ -1,4 +1,5 @@
 import { Ref, SetupContext } from 'vue';
+import { ListboxEntry } from '@bridge-ui/core';
 import { FormFieldOwnProps } from '../../FormField/formField.types';
 import { SelectClasses, SelectEmits, SelectOption, SelectOwnProps, SelectValue } from '../select.types';
 export declare function useSelect(props: SelectOwnProps, model: Ref<null | undefined | SelectValue | SelectValue[]>, triggerRef: Ref<null | HTMLInputElement | HTMLTextAreaElement>, emit: SetupContext<SelectEmits>["emit"], declarativeOptions: Ref<SelectOption[]>): {
@@ -728,6 +729,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         isSelected: (value: SelectValue) => boolean;
         loading: boolean;
         multiple: boolean;
+        entries: ListboxEntry[];
         options: import('@bridge-ui/core').ListboxOption[];
         labelledBy: string;
         highlightedIndex: number;
@@ -737,12 +739,12 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         classes?: import('../../Listbox').ListboxClasses;
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
-        placement?: import('@floating-ui/utils').Placement;
         disableMaxHeight: boolean;
         emptyMessage: string;
         hideEmptyMessage: boolean;
         loadingMessage: string;
         maxHeight: string;
+        placement?: import('@floating-ui/utils').Placement;
         showCheckmark?: boolean;
     }>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
@@ -750,7 +752,9 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
     visibleOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
     isSearchActive: import('vue').ComputedRef<boolean>;
     selectedOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
+    hasComposedList: import('vue').ComputedRef<boolean>;
     highlightedIndex: Ref<number, number>;
+    handleRegisteredOptionsChange: (options: SelectOption[]) => void;
     emptyMessage: import('vue').ComputedRef<string>;
     hideEmptyMessage: import('vue').ComputedRef<boolean>;
     loadingMessage: import('vue').ComputedRef<string>;

package/dist/Components/Select/composables/useSelect.js

@@ -2,13 +2,13 @@ import { hasNamedSlot as e } from "../../../Utils/slotOrProp.js";
 import { mergePartBind as t, resolveFieldAdornmentIconSize as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as ee } from "../../../Utils/index.js";
 import { formFieldBridgeKeys as te, useFormField as i } from "../../FormField/composables/useFormField.js";
 import { useListboxNavigation as ne } from "../../Listbox/composables/useListboxNavigation.js";
-import { computed as a, nextTick as o, onBeforeUnmount as re, onMounted as ie, ref as s, useAttrs as ae, useId as oe, useSlots as se, watch as c } from "vue";
-import { get as l, isNil as ce, omit as le } from "es-toolkit/compat";
-import { adjustAutosizeTextareaHeight as ue, cn as u, createSelectAsyncSearch as de, mergeBridgeUILayeredClasses as d, normalizeSelectOptions as f, resolveSelectAsyncDebounce as fe, resolveSelectAsyncOptions as pe, selectValuesEqual as p, splitComponentProps as m } from "@bridge-ui/core";
-import { ChevronsUpDown as me } from "@lucide/vue";
-import { colorProps as he, invalidatedProps as ge } from "@bridge-ui/core/Components/Listbox";
+import { Comment as re, Text as ie, computed as a, nextTick as ae, onBeforeUnmount as oe, onMounted as se, ref as o, useAttrs as ce, useId as le, useSlots as ue, watch as s } from "vue";
+import { get as c, isNil as de, omit as fe } from "es-toolkit/compat";
+import { adjustAutosizeTextareaHeight as pe, cn as l, createSelectAsyncSearch as me, filterListboxEntries as he, flattenListboxOptions as u, mergeBridgeUILayeredClasses as d, normalizeListboxEntries as f, normalizeSelectOptions as ge, resolveSelectAsyncDebounce as _e, resolveSelectAsyncOptions as ve, selectValuesEqual as p, splitComponentProps as ye } from "@bridge-ui/core";
+import { ChevronsUpDown as be } from "@lucide/vue";
+import { colorProps as xe, invalidatedProps as Se } from "@bridge-ui/core/Components/Listbox";
 //#region src/Components/Select/composables/useSelect.ts
-var _e = [
+var Ce = [
 	"classes",
 	"loading",
 	"options",
@@ -29,66 +29,92 @@ var _e = [
 	"minItemsForSearch",
 	"optionDescription"
 ];
-function h(h, g, _, v, y) {
-	let ve = ae(), ye = se(), b = oe(), x = s(!1), S = s(""), C = s(-1), be = s(null), w = s(!1), T = s([]), E = null, D = s([]), O = a(() => m({
-		bridgeKeys: _e,
+function m(m, h, g, _, we) {
+	let Te = ce(), v = ue(), y = le(), b = o(!1), x = o(""), S = o(-1), C = o(null), w = o(!1), T = o([]), E = null, D = o([]), O = a(() => ye({
+		bridgeKeys: Ce,
 		props: {
-			...ve,
-			...h
+			...Te,
+			...m
 		}
-	})), k = a(() => O.value.componentProps), A = a(() => ({ classes: k.value.classes })), { components: j, entry: xe } = r({
+	})), k = a(() => O.value.componentProps), A = a(() => ({ classes: k.value.classes })), { components: j, entry: Ee } = r({
 		componentName: "Select",
 		props: () => A.value
 	}), M = ee({
-		entry: xe,
+		entry: Ee,
 		props: () => A.value
 	}), N = a(() => !!k.value.multiple), P = a(() => ({
 		optionLabel: k.value.optionLabel ?? "label",
 		optionValue: k.value.optionValue ?? "value",
 		optionDescription: k.value.optionDescription ?? "description"
-	})), F = a(() => y.value.length > 0 ? y.value : f(k.value.options, P.value)), I = a(() => {
-		let e = T.value.length > 0 ? T.value : F.value;
-		return k.value.flipOptions ? [...e].reverse() : e;
-	}), L = a(() => {
-		let e = g.value;
-		return N.value ? Array.isArray(e) ? e : [] : !ce(e) && e !== "" ? [e] : [];
-	}), R = a(() => {
+	})), F = a(() => we.value.length > 0 ? we.value.map((e) => ({
+		option: e,
+		type: "option"
+	})) : f(k.value.options, P.value)), De = a(() => u(F.value)), I = o([]);
+	function Oe(e) {
+		if (!e || typeof e != "object") return !1;
+		let t = e.type;
+		if (!t || typeof t != "object") return !1;
+		let n = t.name, r = t.__name;
+		return n === "SelectOption" || r === "SelectOption";
+	}
+	function ke() {
+		return e(v, "default") ? (v.default?.({}) ?? []).some((e) => {
+			if (!e || typeof e != "object") return !1;
+			let t = e.type;
+			return t === re || t === ie || t === void 0 || typeof t == "symbol" ? !1 : !Oe(e);
+		}) : !1;
+	}
+	let L = a(() => ke() && !k.value.options?.length), R = a(() => {
+		if (L.value) return [];
+		if (T.value.length > 0) {
+			let e = f(T.value, P.value);
+			return k.value.flipOptions ? [...e].reverse() : e;
+		}
+		return k.value.flipOptions ? [...F.value].reverse().map((e) => e.type === "section" ? {
+			...e,
+			options: [...e.options].reverse()
+		} : e) : F.value;
+	}), Ae = a(() => L.value ? I.value : u(R.value)), z = a(() => {
+		let e = h.value;
+		return N.value ? Array.isArray(e) ? e : [] : !de(e) && e !== "" ? [e] : [];
+	}), B = a(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of [...I.value, ...D.value]) e.set(t.value, t);
-		return L.value.map((t) => e.get(t) ?? {
+		for (let t of [...Ae.value, ...D.value]) e.set(t.value, t);
+		return z.value.map((t) => e.get(t) ?? {
 			value: t,
 			label: String(t)
 		});
-	}), z = a(() => L.value.length > 0), Se = a(() => k.value.clearable !== !1), B = a(() => !!k.value.asyncData), V = a(() => {
-		if (B.value || k.value.searchable) return !0;
+	}), je = a(() => z.value.length > 0), Me = a(() => k.value.clearable !== !1), V = a(() => !!k.value.asyncData), H = a(() => {
+		if (V.value || k.value.searchable) return !0;
 		let e = k.value.minItemsForSearch ?? 11;
-		return F.value.length >= e;
-	}), H = a(() => x.value && V.value), U = a(() => !!k.value.loading || w.value), W = a(() => {
-		if (!H.value || !S.value.trim()) return I.value;
-		let e = S.value.trim().toLowerCase();
-		return I.value.filter((t) => t.label.toLowerCase().includes(e));
-	}), G = ne(() => W.value, C, b), Ce = a(() => h.readonly || h.disabled ? !0 : !H.value), we = a(() => H.value || N.value ? S.value : R.value[0]?.label ?? ""), Te = (e) => {
-		be.value = e instanceof HTMLElement ? e : null;
+		return De.value.length >= e;
+	}), U = a(() => b.value && H.value), Ne = a(() => !!k.value.loading || w.value), Pe = a(() => {
+		if (L.value) return [];
+		if (!U.value || !x.value.trim()) return R.value;
+		let e = x.value.trim().toLowerCase();
+		return he(R.value, (t) => t.label.toLowerCase().includes(e));
+	}), W = a(() => L.value ? I.value : u(Pe.value)), G = ne(() => W.value, S, y), Fe = a(() => m.readonly || m.disabled ? !0 : !U.value), Ie = a(() => U.value || N.value ? x.value : B.value[0]?.label ?? ""), Le = (e) => {
+		C.value = e instanceof HTMLElement ? e : null;
 	};
-	function Ee(e) {
+	function Re(e) {
 		e.preventDefault();
 	}
-	function De(e) {
-		if (h.disabled || h.readonly) return;
+	function ze(e) {
+		if (m.disabled || m.readonly) return;
 		let t = e.target;
 		if (!t.closest("[data-select-clear]") && !(t.closest(".wrapper-start-slot") || t.closest(".wrapper-end-slot"))) {
-			if (!x.value) {
+			if (!b.value) {
 				Z();
 				return;
 			}
-			H.value || (Q(), _.value?.focus({ preventScroll: !0 }));
+			U.value || (Q(), g.value?.focus({ preventScroll: !0 }));
 		}
 	}
-	let Oe = a(() => {
-		let n = m({
+	let Be = a(() => {
+		let n = ye({
 			bridgeKeys: te,
-			props: le(O.value.inheritedAttrs, ["class"])
-		}).componentProps, r = n.endIcon ?? (e(ye, "end") ? void 0 : me), { listbox: ee, ...i } = n.customProps ?? {};
+			props: fe(O.value.inheritedAttrs, ["class"])
+		}).componentProps, r = n.endIcon ?? (e(v, "end") ? void 0 : be), { listbox: ee, ...i } = n.customProps ?? {};
 		return {
 			...n,
 			endIcon: r,
@@ -96,13 +122,13 @@ function h(h, g, _, v, y) {
 			customProps: {
 				...i,
 				container: t(i.container, {}, {
-					ref: Te,
-					onClick: De,
-					class: u({ "cursor-pointer": !h.disabled && !h.readonly && !H.value })
+					ref: Le,
+					onClick: ze,
+					class: l({ "cursor-pointer": !m.disabled && !m.readonly && !U.value })
 				})
 			}
 		};
-	}), ke = a(() => h.customProps?.listbox), K = i(() => Oe.value, {
+	}), Ve = a(() => m.customProps?.listbox), K = i(() => Be.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
@@ -112,81 +138,81 @@ function h(h, g, _, v, y) {
 		likeInput: () => N.value,
 		control: () => N.value ? "textarea" : "input"
 	}), q = (e) => {
-		!e || !N.value || ue(e);
+		!e || !N.value || pe(e);
 	};
 	function J(e) {
-		return L.value.some((t) => p(t, e));
+		return z.value.some((t) => p(t, e));
 	}
 	function Y(e) {
-		g.value = e;
+		h.value = e;
 	}
 	function X(e) {
 		if (N.value) {
 			let t = Array.isArray(e) ? e : [];
-			v("update:modelValue", t), v("change", t);
+			_("update:modelValue", t), _("change", t);
 			return;
 		}
 		let t = e ?? "";
-		v("update:modelValue", t), v("change", t);
+		_("update:modelValue", t), _("change", t);
 	}
 	function Z() {
-		h.disabled || h.readonly || x.value || (x.value = !0, S.value = "", G.highlightCurrentSelection(J), v("open"), B.value && k.value.asyncData && E?.searchImmediate(""));
+		m.disabled || m.readonly || b.value || (b.value = !0, x.value = "", G.highlightCurrentSelection(J), _("open"), V.value && k.value.asyncData && E?.searchImmediate(""));
 	}
 	function Q() {
-		E?.cancel(), x.value && (x.value = !1, S.value = "", C.value = -1, v("close"));
+		E?.cancel(), b.value && (b.value = !1, x.value = "", S.value = -1, _("close"));
 	}
-	function Ae(e) {
+	function $(e) {
 		if (!e.disabled) {
 			if (N.value) {
-				let t = [...L.value], n = t.findIndex((t) => p(t, e.value));
-				n >= 0 ? (t.splice(n, 1), v("deselect", e)) : (t.push(e.value), v("select", e)), Y(t), X(t), S.value = "", C.value = -1, o(() => {
-					q(_.value), _.value?.focus({ preventScroll: !0 });
+				let t = [...z.value], n = t.findIndex((t) => p(t, e.value));
+				n >= 0 ? (t.splice(n, 1), _("deselect", e)) : (t.push(e.value), _("select", e)), Y(t), X(t), x.value = "", S.value = -1, ae(() => {
+					q(g.value), g.value?.focus({ preventScroll: !0 });
 				});
 				return;
 			}
-			Y(e.value), X(e.value), v("select", e), Q();
+			Y(e.value), X(e.value), _("select", e), Q();
 		}
 	}
-	function je(e) {
-		e?.preventDefault(), e?.stopPropagation(), N.value ? (Y([]), X([])) : (Y(null), X(null)), v("clear"), Q();
+	function He(e) {
+		e?.preventDefault(), e?.stopPropagation(), N.value ? (Y([]), X([])) : (Y(null), X(null)), _("clear"), Q();
 	}
-	function Me(e, t) {
+	function Ue(e, t) {
 		if (t.preventDefault(), t.stopPropagation(), !N.value) return;
-		let n = L.value.filter((t) => !p(t, e.value));
-		Y(n), X(n), v("deselect", e), o(() => q(_.value));
+		let n = z.value.filter((t) => !p(t, e.value));
+		Y(n), X(n), _("deselect", e), ae(() => q(g.value));
 	}
-	function Ne() {
+	function We() {
 		let e = G.getHighlightedOption();
-		e && Ae(e);
+		e && $(e);
 	}
-	function Pe(e) {
-		S.value = e.target.value, v("search", S.value), x.value || Z(), G.resetHighlight(), B.value && E?.searchDebounced(S.value);
+	function Ge(e) {
+		x.value = e.target.value, _("search", x.value), b.value || Z(), G.resetHighlight(), V.value && E?.searchDebounced(x.value);
 	}
-	function Fe(e) {
-		if (!(h.disabled || h.readonly)) switch (e.key) {
+	function Ke(e) {
+		if (!(m.disabled || m.readonly)) switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), x.value ? G.moveHighlight(1) : Z();
+				e.preventDefault(), b.value ? G.moveHighlight(1) : Z();
 				break;
 			case "ArrowUp":
-				e.preventDefault(), x.value ? G.moveHighlight(-1) : Z();
+				e.preventDefault(), b.value ? G.moveHighlight(-1) : Z();
 				break;
 			case "Enter":
-				e.preventDefault(), x.value ? Ne() : Z();
+				e.preventDefault(), b.value ? We() : Z();
 				break;
 			case "Escape":
 				e.preventDefault(), Q();
 				break;
 			case "Home":
-				x.value && (e.preventDefault(), G.highlightFirst());
+				b.value && (e.preventDefault(), G.highlightFirst());
 				break;
 			case "End":
-				x.value && (e.preventDefault(), G.highlightLast());
+				b.value && (e.preventDefault(), G.highlightLast());
 				break;
 			case "Backspace":
-				if (N.value && !S.value && R.value.length > 0) {
+				if (N.value && !x.value && B.value.length > 0) {
 					e.preventDefault();
-					let t = R.value.at(-1);
-					t && Me(t, e);
+					let t = B.value.at(-1);
+					t && Ue(t, e);
 				}
 				break;
 			case "Tab":
@@ -195,133 +221,140 @@ function h(h, g, _, v, y) {
 			default: break;
 		}
 	}
-	async function Ie(e) {
+	async function qe(e) {
 		let t = k.value.asyncData;
 		if (t) {
 			w.value = !0;
 			try {
-				let { options: n, resolvedSelected: r } = await pe(t, e, L.value, (e) => f(e, P.value));
+				let { options: n, resolvedSelected: r } = await ve(t, e, z.value, (e) => ge(e, P.value));
 				r.length > 0 && (D.value = r), T.value = n;
 			} finally {
 				w.value = !1;
 			}
 		}
 	}
-	async function Le() {
+	async function Je() {
 		let e = k.value.asyncData;
-		!e?.resolve || L.value.length === 0 || (D.value = f(await e.resolve(L.value), P.value));
+		!e?.resolve || z.value.length === 0 || (D.value = ge(await e.resolve(z.value), P.value));
 	}
-	let $ = a(() => {
-		let e = l(d(he, l(j.value, [
+	let Ye = a(() => {
+		let e = c(d(xe, c(j.value, [
 			"Listbox",
 			"customProps",
 			"color"
 		])), K.merged.value.color ?? "primary");
-		return K.invalidated.value ? d(ge, l(j.value, [
+		return K.invalidated.value ? d(Se, c(j.value, [
 			"Listbox",
 			"customProps",
 			"invalidated"
 		])) : e;
-	}), Re = a(() => $.value?.value), ze = a(() => {
-		let e = !h.disabled && !h.readonly && !H.value, n = !h.disabled && !h.readonly && H.value && V.value, r = z.value && !N.value && !H.value;
+	}), Xe = a(() => Ye.value?.value), Ze = a(() => {
+		let e = !m.disabled && !m.readonly && !U.value, n = !m.disabled && !m.readonly && U.value && H.value, r = je.value && !N.value && !U.value;
 		return t({
 			role: "combobox",
-			value: we.value,
-			"aria-controls": b,
-			"aria-expanded": x.value,
-			readonly: Ce.value,
-			onKeydown: Fe,
+			value: Ie.value,
+			"aria-controls": y,
+			"aria-expanded": b.value,
+			readonly: Fe.value,
+			onKeydown: Ke,
 			placeholder: k.value.placeholder,
-			"aria-autocomplete": V.value ? "list" : void 0,
-			"aria-activedescendant": x.value ? G.activeDescendantId.value : void 0,
+			"aria-autocomplete": H.value ? "list" : void 0,
+			"aria-activedescendant": b.value ? G.activeDescendantId.value : void 0,
 			...N.value ? {
 				rows: 1,
 				onInput: (e) => {
-					Pe(e), q(e.target);
+					Ge(e), q(e.target);
 				}
-			} : { onInput: Pe }
-		}, K.inputBind.value, u({
+			} : { onInput: Ge }
+		}, K.inputBind.value, l({
 			"cursor-text": n,
 			"cursor-pointer": e,
 			"resize-none overflow-hidden": N.value,
-			[u(Re.value, M.value.value) ?? ""]: r
+			[l(Xe.value, M.value.value) ?? ""]: r
 		}));
 	});
-	c(() => [
-		x.value,
+	s(() => [
+		b.value,
 		N.value,
-		_.value
+		g.value
 	], () => {
-		q(_.value);
-	}, { immediate: !0 }), c(() => g.value, () => {
-		Le();
-	}, { immediate: !0 }), c(() => k.value.asyncData, (e) => {
-		if (E?.cancel(), T.value = [], Le(), !e) {
+		q(g.value);
+	}, { immediate: !0 }), s(() => h.value, () => {
+		Je();
+	}, { immediate: !0 }), s(() => k.value.asyncData, (e) => {
+		if (E?.cancel(), T.value = [], Je(), !e) {
 			E = null;
 			return;
 		}
-		E = de((e) => void Ie(e), fe(e));
-	}, { immediate: !0 }), re(() => {
+		E = me((e) => void qe(e), _e(e));
+	}, { immediate: !0 }), oe(() => {
 		E?.cancel();
-	}), ie(() => {
-		q(_.value);
+	}), se(() => {
+		q(g.value);
 	});
-	let Be = a(() => n(K.merged.value.size));
+	let Qe = a(() => n(K.merged.value.size)), $e = a(() => t({}, {}, {
+		tabindex: 0,
+		role: "button",
+		"data-select-clear": !0,
+		onMousedown: Re,
+		class: l({
+			"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
+			[Ye.value?.clear ?? ""]: !0,
+			[M.value.clear ?? ""]: !0
+		})
+	})), et = a(() => ({
+		disableAutoFocus: !0,
+		maxHeight: m.maxHeight,
+		size: K.merged.value.size,
+		color: K.merged.value.color,
+		disableMaxHeight: m.disableMaxHeight === !0,
+		emptyMessage: k.value.emptyMessage ?? "No options",
+		hideEmptyMessage: k.value.hideEmptyMessage === !0,
+		loadingMessage: k.value.loadingMessage ?? "Loading...",
+		...Ve.value,
+		listboxId: y,
+		isSelected: J,
+		loading: Ne.value,
+		multiple: N.value,
+		entries: Pe.value,
+		options: W.value,
+		labelledBy: K.controlId.value,
+		highlightedIndex: S.value,
+		invalidated: K.invalidated.value
+	}));
+	function tt(e) {
+		let t = I.value;
+		t.length === e.length && t.every((t, n) => String(t.value) === String(e[n]?.value)) || (I.value = e);
+	}
 	return {
-		open: x,
-		slots: ye,
-		hasValue: z,
+		open: b,
+		slots: v,
+		hasValue: je,
 		multiple: N,
-		listboxId: b,
+		listboxId: y,
 		formField: K,
-		isLoading: U,
-		clearable: Se,
-		clearBind: a(() => t({}, {}, {
-			tabindex: 0,
-			role: "button",
-			"data-select-clear": !0,
-			onMousedown: Ee,
-			class: u({
-				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
-				[$.value?.clear ?? ""]: !0,
-				[M.value.clear ?? ""]: !0
-			})
-		})),
+		isLoading: Ne,
+		clearable: Me,
+		clearBind: $e,
 		isSelected: J,
-		clearValue: je,
-		removeChip: Me,
-		triggerBind: ze,
-		selectOption: Ae,
-		containerRef: be,
-		listboxProps: a(() => ({
-			disableAutoFocus: !0,
-			maxHeight: h.maxHeight,
-			size: K.merged.value.size,
-			color: K.merged.value.color,
-			disableMaxHeight: h.disableMaxHeight === !0,
-			emptyMessage: k.value.emptyMessage ?? "No options",
-			hideEmptyMessage: k.value.hideEmptyMessage === !0,
-			loadingMessage: k.value.loadingMessage ?? "Loading...",
-			...ke.value,
-			listboxId: b,
-			isSelected: J,
-			loading: U.value,
-			multiple: N.value,
-			options: W.value,
-			labelledBy: K.controlId.value,
-			highlightedIndex: C.value,
-			invalidated: K.invalidated.value
-		})),
-		clearIconSize: Be,
+		clearValue: He,
+		removeChip: Ue,
+		triggerBind: Ze,
+		selectOption: $,
+		containerRef: C,
+		listboxProps: et,
+		clearIconSize: Qe,
 		mergedClasses: M,
 		visibleOptions: W,
-		isSearchActive: H,
-		selectedOptions: R,
-		highlightedIndex: C,
+		isSearchActive: U,
+		selectedOptions: B,
+		hasComposedList: L,
+		highlightedIndex: S,
+		handleRegisteredOptionsChange: tt,
 		emptyMessage: a(() => k.value.emptyMessage ?? "No options"),
 		hideEmptyMessage: a(() => k.value.hideEmptyMessage === !0),
 		loadingMessage: a(() => k.value.loadingMessage ?? "Loading...")
 	};
 }
 //#endregion
-export { h as useSelect };
+export { m as useSelect };

package/dist/Components/Select/select.types.d.ts

@@ -1,8 +1,8 @@
 import { InputHTMLAttributes, Slot, TextareaHTMLAttributes } from 'vue';
-import { MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectOptionInput, SelectValue } from '@bridge-ui/core';
+import { ListboxOptionsInput, MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectValue } from '@bridge-ui/core';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
 import { ListboxOwnProps } from '../Listbox/listbox.types';
-export type { SelectAsyncData, SelectModel, SelectOption, SelectOptionInput, SelectOptionLike, SelectValue, } from '@bridge-ui/core';
+export type { ListboxOptionGroup, ListboxOptionsInput, SelectAsyncData, SelectModel, SelectOption, SelectOptionInput, SelectOptionLike, SelectValue, } from '@bridge-ui/core';
 export interface SelectClasses extends FormFieldClasses {
     /**
      * The classes to apply to selected chips (multiple mode).
@@ -174,9 +174,10 @@ export interface SelectOwnProps extends Omit<FormFieldOwnProps, "field"> {
      */
     optionLabel?: string;
     /**
-     * The list of options to display.
+     * The list of options to display. May include section groups
+     * (`{ title, options, sticky? }`).
      */
-    options?: SelectOptionInput[];
+    options?: ListboxOptionsInput;
     /**
      * Key used to read the value from option objects.
      *
@@ -209,6 +210,12 @@ export interface SelectSlots extends FormFieldSlots {
     chip?: Slot<{
         option: SelectOption;
     }>;
+    /**
+     * Composed dropdown content (`ListSection` / `ListItem` with `value`).
+     * When set (and not using declarative `SelectOption` children), replaces
+     * mapped `options` inside the listbox.
+     */
+    default?: Slot;
     /**
      * Custom empty-state content.
      */
@@ -218,7 +225,7 @@ export interface SelectSlots extends FormFieldSlots {
      */
     loading?: Slot;
     /**
-     * Custom option item content.
+     * Custom option item content when rendering from the `options` prop.
      */
     option?: Slot<{
         option: SelectOption;

package/dist/augments.d.ts

@@ -11,7 +11,7 @@ import { FormFieldClasses, FormFieldProps } from './Components/FormField';
 import { IconProps } from './Components/Icon';
 import { LabelClasses, LabelProps } from './Components/Label';
 import { LinkClasses, LinkProps } from './Components/Link';
-import { ListClasses, ListProps } from './Components/List';
+import { ListClasses } from './Components/List';
 import { ListItemClasses, ListItemProps } from './Components/ListItem';
 import { ListSectionClasses } from './Components/ListSection';
 import { MenuClasses, MenuProps } from './Components/Menu';
@@ -78,11 +78,10 @@ declare module "@bridge-ui/core" {
     }
     interface ListConfigOverrides {
         classes: ListClasses;
-        defaultProps: Partial<Pick<ListProps, "padding">>;
     }
     interface ListItemConfigOverrides {
         classes: ListItemClasses;
-        defaultProps: Partial<Pick<ListItemProps, "role" | "align">>;
+        defaultProps: Partial<Pick<ListItemProps, "role" | "selectedIcon">>;
     }
     interface ListSectionConfigOverrides {
         classes: ListSectionClasses;

package/dist/index.d.ts

@@ -25,11 +25,11 @@ export type { LabelClasses, LabelOwnProps, LabelProps, LabelSizeOverrides, } fro
 export { Link, useLink } from './Components/Link';
 export type { LinkClasses, LinkColorOverrides, LinkCustomProps, LinkOwnProps, LinkProps, LinkSizeOverrides, LinkSlots, LinkUnderlineOverrides, } from './Components/Link';
 export { List, useList } from './Components/List';
-export type { ListClasses, ListContextValue, ListCustomProps, ListOwnProps, ListPaddingOverrides, ListProps, } from './Components/List';
+export type { ListClasses, ListContextValue, ListCustomProps, ListOwnProps, ListProps, } from './Components/List';
 export { Listbox, findFirstEnabledOptionIndex, findLastEnabledOptionIndex, getListboxActiveDescendantId, getListboxOptionId, moveListboxHighlight, useListbox, useListboxNavigation, } from './Components/Listbox';
 export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './Components/Listbox';
 export { ListItem } from './Components/ListItem';
-export type { ListItemAlignOverrides, ListItemClasses, ListItemCustomProps, ListItemOwnProps, ListItemProps, ListItemSlots, } from './Components/ListItem';
+export type { ListItemClasses, ListItemCustomProps, ListItemOwnProps, ListItemProps, ListItemSlots, } from './Components/ListItem';
 export { ListSection } from './Components/ListSection';
 export type { ListSectionClasses, ListSectionCustomProps, ListSectionOwnProps, ListSectionProps, ListSectionSlots, } from './Components/ListSection';
 export { Menu, useMenu } from './Components/Menu';

package/dist/index.js

@@ -29,10 +29,10 @@ import O from "./Components/List/List.js";
 import { useListbox as k } from "./Components/Listbox/composables/useListbox.js";
 import { findFirstEnabledOptionIndex as A, findLastEnabledOptionIndex as j, getListboxActiveDescendantId as M, getListboxOptionId as N, moveListboxHighlight as P, useListboxNavigation as F } from "./Components/Listbox/composables/useListboxNavigation.js";
 import I from "./Components/ListItem/ListItem.js";
-import { useMenu as L } from "./Components/Menu/composables/useMenu.js";
-import R from "./Components/Menu/Menu.js";
-import z from "./Components/Listbox/Listbox.js";
-import B from "./Components/ListSection/ListSection.js";
+import L from "./Components/ListSection/ListSection.js";
+import { useMenu as R } from "./Components/Menu/composables/useMenu.js";
+import z from "./Components/Menu/Menu.js";
+import B from "./Components/Listbox/Listbox.js";
 import { useModal as V } from "./Components/Modal/composables/useModal.js";
 import H from "./Components/Modal/Modal.js";
 import { useNumberField as U } from "./Components/NumberField/composables/useNumberField.js";
@@ -56,4 +56,4 @@ import oe from "./Components/TextField/TextField.js";
 import se from "./Provider/BridgeUIProvider.js";
 import { createBridgeUI as ce } from "./Provider/createBridgeUI.js";
 import { BRIDGE_UI_DEFAULT_GLOBAL as le, cn as ue, mergeBridgeUIComponents as de, mergeBridgeUIGlobal as fe, resolveBridgeUIOptions as pe } from "@bridge-ui/core";
-export { a as Alert, o as Avatar, le as BRIDGE_UI_DEFAULT_GLOBAL, c as Badge, se as BridgeUIProvider, u as Button, f as Card, g as Checkbox, v as Chip, b as Divider, m as FormControl, S as FormField, i as Icon, w as Label, E as Link, O as List, I as ListItem, B as ListSection, z as Listbox, R as Menu, H as Modal, W as NumberField, K as PasswordField, J as Radio, Y as Select, X as SelectOption, Q as Skeleton, ee as Snackbar, ne as Switch, oe as TextField, ie as Textarea, ue as cn, ce as createBridgeUI, A as findFirstEnabledOptionIndex, j as findLastEnabledOptionIndex, M as getListboxActiveDescendantId, N as getListboxOptionId, de as mergeBridgeUIComponents, fe as mergeBridgeUIGlobal, P as moveListboxHighlight, pe as resolveBridgeUIOptions, r as useAlert, s as useBadge, e as useBridgeUI, t as useBridgeUIComponent, n as useBridgeUIMergedRegistryClasses, l as useButton, d as useCard, h as useCheckbox, _ as useChip, y as useDivider, p as useFormControl, x as useFormField, C as useLabel, T as useLink, D as useList, k as useListbox, F as useListboxNavigation, L as useMenu, V as useModal, U as useNumberField, G as usePasswordField, q as useRadio, Z as useSkeleton, $ as useSnackbar, te as useSwitch, ae as useTextField, re as useTextarea };
+export { a as Alert, o as Avatar, le as BRIDGE_UI_DEFAULT_GLOBAL, c as Badge, se as BridgeUIProvider, u as Button, f as Card, g as Checkbox, v as Chip, b as Divider, m as FormControl, S as FormField, i as Icon, w as Label, E as Link, O as List, I as ListItem, L as ListSection, B as Listbox, z as Menu, H as Modal, W as NumberField, K as PasswordField, J as Radio, Y as Select, X as SelectOption, Q as Skeleton, ee as Snackbar, ne as Switch, oe as TextField, ie as Textarea, ue as cn, ce as createBridgeUI, A as findFirstEnabledOptionIndex, j as findLastEnabledOptionIndex, M as getListboxActiveDescendantId, N as getListboxOptionId, de as mergeBridgeUIComponents, fe as mergeBridgeUIGlobal, P as moveListboxHighlight, pe as resolveBridgeUIOptions, r as useAlert, s as useBadge, e as useBridgeUI, t as useBridgeUIComponent, n as useBridgeUIMergedRegistryClasses, l as useButton, d as useCard, h as useCheckbox, _ as useChip, y as useDivider, p as useFormControl, x as useFormField, C as useLabel, T as useLink, D as useList, k as useListbox, F as useListboxNavigation, R as useMenu, V as useModal, U as useNumberField, G as usePasswordField, q as useRadio, Z as useSkeleton, $ as useSnackbar, te as useSwitch, ae as useTextField, re as useTextarea };