@bridge-ui/vue 0.5.1 → 0.6.0

package/ai/skills/bridge-ui-components/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: bridge-ui-components
 description: >-
-  Use Bridge UI Vue components — Button, Avatar, Card, Alert, Accordion, Badge, Icon,
+  Use Bridge UI Vue components — Button, ButtonGroup, Avatar, Card, Alert, Accordion, Badge, Icon,
   Link, List, Table, DataTable, Tabs, Spinner, Skeleton, EmptyState, Sidebar, Progress, Stepper, Pagination, TextField, Select,
   Autocomplete, DateField, DatePicker, DateRangeField, DateRangePicker,
   TimeField, TimePicker, DateTimeField, DateTimePicker, ColorField, ColorPicker,
@@ -18,7 +18,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 
 | Need                          | Doc                                                                   |
 | ----------------------------- | --------------------------------------------------------------------- |
-| Actions                       | `.ai/docs/components/Button.md`                                       |
+| Actions                       | `.ai/docs/components/Button.md`, `ButtonGroup.md`                     |
 | Surfaces / modal body         | `.ai/docs/components/Card.md`                                         |
 | Avatar                        | `.ai/docs/components/Avatar.md`                                       |
 | Badge                         | `.ai/docs/components/Badge.md`                                        |

package/dist/Components/Alert/alertDefaultIcons.js

@@ -2,6 +2,7 @@
 var e = {
 	dark: "info",
 	info: "alert",
+	black: "info",
 	error: "error",
 	primary: "bell",
 	secondary: "info",

package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts

@@ -728,7 +728,7 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
     listboxProps: import('vue').ComputedRef<{
         anchorEl?: null | HTMLElement;
         classes?: import('../../Listbox').ListboxClasses;
-        color: "info" | "error" | "success" | "warning" | "dark" | "primary" | "secondary";
+        color: "info" | "error" | "success" | "warning" | "black" | "dark" | "primary" | "secondary";
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
         disableMaxHeight: boolean;

package/dist/Components/Autocomplete/composables/useAutocomplete.js

@@ -1,16 +1,17 @@
 import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t } from "../../../Utils/slotOrProp.js";
 import { useBreakpoint as n } from "../../../Utils/useBreakpoint.js";
-import { mergePartBind as r, resolveFieldAdornmentIconSize as i, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as a, useFieldShowFooter as te } from "../../../Utils/index.js";
-import { formFieldBridgeKeys as ne, useFormField as re } from "../../FormField/composables/useFormField.js";
-import { useListboxNavigation as ie } from "../../Listbox/composables/useListboxNavigation.js";
-import { Comment as ae, Text as oe, computed as o, nextTick as s, onBeforeUnmount as se, onMounted as ce, ref as c, useAttrs as le, useId as ue, useSlots as de, watch as l } from "vue";
-import { get as fe, isNil as pe, omit as me } from "es-toolkit/compat";
-import { commitFreeSoloValue as u, createSelectAsyncSearch as he, filterListboxEntries as ge, flattenListboxOptions as d, normalizeListboxEntries as _e, normalizeSelectOptions as ve, resolveFieldOverlay as ye, resolveSelectAsyncDebounce as be, resolveSelectAsyncOptions as xe, selectValuesEqual as f } from "@bridge-ui/core/Domain";
-import { listboxColorProps as Se } from "@bridge-ui/core/Tokens";
-import { adjustAutosizeTextareaHeight as Ce, cn as p, getColorToken as we, mergeBridgeUILayeredClasses as Te, splitComponentProps as Ee } from "@bridge-ui/core/Utils";
+import { mergePartBind as r, resolveFieldAdornmentIconSize as ee, useBridgeUIComponent as te, useBridgeUIMergedRegistryClasses as i, useFieldShowFooter as ne } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as re, useFormField as ie } from "../../FormField/composables/useFormField.js";
+import { collectComposedListboxOptions as ae } from "../../Listbox/collectComposedListboxOptions.js";
+import { useListboxNavigation as oe } from "../../Listbox/composables/useListboxNavigation.js";
+import { Comment as se, Text as ce, computed as a, nextTick as o, onBeforeUnmount as le, onMounted as ue, ref as s, useAttrs as de, useId as fe, useSlots as pe, watch as c } from "vue";
+import { get as me, isNil as he, isObjectLike as l, isSymbol as ge, omit as _e } from "es-toolkit/compat";
+import { commitFreeSoloValue as u, createSelectAsyncSearch as ve, filterListboxEntries as ye, flattenListboxOptions as d, mergeListboxOptionsByValue as be, normalizeListboxEntries as xe, normalizeSelectOptions as Se, resolveFieldOverlay as Ce, resolveSelectAsyncDebounce as we, resolveSelectAsyncOptions as Te, selectValuesEqual as f } from "@bridge-ui/core/Domain";
+import { listboxColorProps as Ee } from "@bridge-ui/core/Tokens";
+import { adjustAutosizeTextareaHeight as De, cn as p, getColorToken as Oe, mergeBridgeUILayeredClasses as ke, splitComponentProps as Ae } from "@bridge-ui/core/Utils";
 //#region src/Components/Autocomplete/composables/useAutocomplete.ts
-var De = [
+var je = [
 	"classes",
 	"loading",
 	"options",
@@ -34,81 +35,81 @@ var De = [
 	"minItemsForSearch",
 	"optionDescription"
 ];
-function m(m, h, g, _, Oe) {
-	let ke = le(), v = de(), y = ue(), Ae = n(), b = e(), x = c(!1), S = c(""), C = c(!1), w = c(-1), T = c([]), E = c([]), D = c([]), O = c(null), k = null, je = o(() => Ee({
+function m(m, h, g, _, Me) {
+	let Ne = de(), v = pe(), y = fe(), Pe = n(), b = e(), x = s(!1), S = s(""), C = s(!1), w = s(-1), T = s([]), E = s([]), D = s([]), Fe = s(null), O = null, Ie = a(() => Ae({
 		props: {
-			...ke,
+			...Ne,
 			...m
 		},
-		bridgeKeys: De
-	})), A = o(() => je.value.componentProps), Me = o(() => ({ classes: A.value.classes })), { components: Ne, entry: Pe } = ee({
+		bridgeKeys: je
+	})), k = a(() => Ie.value.componentProps), A = a(() => ({ classes: k.value.classes })), { components: Le, entry: Re } = te({
 		componentName: "Autocomplete",
-		props: () => Me.value
-	}), j = a({
-		entry: Pe,
-		props: () => Me.value
-	}), M = o(() => !!A.value.multiple), N = o(() => ({
-		optionLabel: A.value.optionLabel ?? "label",
-		optionValue: A.value.optionValue ?? "value",
-		optionDescription: A.value.optionDescription ?? "description"
-	})), P = o(() => Oe.value.length > 0 ? Oe.value.map((e) => ({
+		props: () => A.value
+	}), j = i({
+		entry: Re,
+		props: () => A.value
+	}), M = a(() => !!k.value.multiple), N = a(() => ({
+		optionLabel: k.value.optionLabel ?? "label",
+		optionValue: k.value.optionValue ?? "value",
+		optionDescription: k.value.optionDescription ?? "description"
+	})), P = a(() => Me.value.length > 0 ? Me.value.map((e) => ({
 		option: e,
 		type: "option"
-	})) : _e(A.value.options, N.value)), Fe = o(() => d(P.value)), F = c([]);
-	function Ie(e) {
-		if (!e || typeof e != "object") return !1;
+	})) : xe(k.value.options, N.value)), ze = a(() => d(P.value)), F = s([]);
+	function Be(e) {
+		if (!l(e)) return !1;
 		let t = e.type;
-		if (!t || typeof t != "object") return !1;
+		if (!l(t)) return !1;
 		let n = t.name, r = t.__name;
 		return n === "AutocompleteOption" || r === "AutocompleteOption";
 	}
-	function Le() {
+	function Ve() {
 		return t(v, "default") ? (v.default?.({}) ?? []).some((e) => {
-			if (!e || typeof e != "object") return !1;
+			if (!l(e)) return !1;
 			let t = e.type;
-			return t === ae || t === oe || t === void 0 || typeof t == "symbol" ? !1 : !Ie(e);
+			return t === se || t === ce || t === void 0 || ge(t) ? !1 : !Be(e);
 		}) : !1;
 	}
-	let I = o(() => Le() && !A.value.options?.length), L = o(() => {
+	let I = a(() => Ve()), He = a(() => I.value ? ae(v.default?.({}) ?? []) : []), L = a(() => {
 		if (I.value) return [];
 		if (E.value.length > 0) {
-			let e = _e(E.value, N.value);
-			return A.value.flipOptions ? [...e].reverse() : e;
+			let e = xe(E.value, N.value);
+			return k.value.flipOptions ? [...e].reverse() : e;
 		}
-		return A.value.flipOptions ? [...P.value].reverse().map((e) => e.type === "section" ? {
+		return k.value.flipOptions ? [...P.value].reverse().map((e) => e.type === "section" ? {
 			...e,
 			options: [...e.options].reverse()
 		} : e) : P.value;
-	}), Re = o(() => I.value ? F.value : d(L.value)), R = o(() => {
+	}), Ue = a(() => I.value ? be(F.value, He.value) : d(L.value)), R = a(() => {
 		let e = h.value;
-		return M.value ? Array.isArray(e) ? e : [] : !pe(e) && e !== "" ? [e] : [];
-	}), ze = o(() => ye(A.value.overlay, Ae.mobile)), z = te({
-		overlay: ze,
+		return M.value ? Array.isArray(e) ? e : [] : !he(e) && e !== "" ? [e] : [];
+	}), We = a(() => Ce(k.value.overlay, Pe.mobile)), z = ne({
+		overlay: We,
 		componentName: "Autocomplete",
-		showFooter: () => A.value.showFooter
-	}), Be = o(() => z.value ? T.value : R.value), B = o(() => {
+		showFooter: () => k.value.showFooter
+	}), Ge = a(() => z.value ? T.value : R.value), B = a(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of [...Re.value, ...D.value]) e.set(t.value, t);
+		for (let t of [...Ue.value, ...D.value]) e.set(t.value, t);
 		return R.value.map((t) => e.get(t) ?? {
 			value: t,
 			label: String(t)
 		});
-	}), V = o(() => R.value.length > 0), Ve = o(() => A.value.clearable !== !1), H = o(() => !!A.value.asyncData), U = o(() => {
-		if (H.value || (A.value.searchable ?? !0)) return !0;
-		let e = A.value.minItemsForSearch ?? 11;
-		return Fe.value.length >= e;
-	}), W = o(() => x.value && U.value), He = o(() => !!A.value.loading || C.value), Ue = o(() => {
+	}), V = a(() => R.value.length > 0), Ke = a(() => k.value.clearable !== !1), H = a(() => !!k.value.asyncData), U = a(() => {
+		if (H.value || (k.value.searchable ?? !0)) return !0;
+		let e = k.value.minItemsForSearch ?? 11;
+		return ze.value.length >= e;
+	}), W = a(() => x.value && U.value), qe = a(() => !!k.value.loading || C.value), Je = a(() => {
 		if (I.value) return [];
 		if (!W.value || !S.value.trim()) return L.value;
 		let e = S.value.trim().toLowerCase();
-		return ge(L.value, (t) => t.label.toLowerCase().includes(e));
-	}), G = o(() => I.value ? F.value : d(Ue.value)), K = ie(() => G.value, w, y), We = o(() => m.readonly || m.disabled ? !0 : !W.value), Ge = o(() => W.value || M.value ? S.value : B.value[0]?.label ?? ""), Ke = (e) => {
-		O.value = e instanceof HTMLElement ? e : null;
+		return ye(L.value, (t) => t.label.toLowerCase().includes(e));
+	}), G = a(() => I.value ? F.value : d(Je.value)), K = oe(() => G.value, w, y), Ye = a(() => m.readonly || m.disabled ? !0 : !W.value), Xe = a(() => W.value || M.value ? S.value : B.value[0]?.label ?? ""), Ze = (e) => {
+		Fe.value = e instanceof HTMLElement ? e : null;
 	};
-	function qe(e) {
+	function Qe(e) {
 		e.preventDefault();
 	}
-	function Je(e) {
+	function $e(e) {
 		if (m.disabled || m.readonly) return;
 		let t = e.target;
 		if (!t.closest("[data-autocomplete-clear]") && !(t.closest(".wrapper-start-slot") || t.closest(".wrapper-end-slot"))) {
@@ -119,25 +120,25 @@ function m(m, h, g, _, Oe) {
 			W.value || (Q(), g.value?.focus({ preventScroll: !0 }));
 		}
 	}
-	let Ye = o(() => {
-		let e = me(je.value.inheritedAttrs, ["class"]), n = Ee({
-			bridgeKeys: ne,
+	let et = a(() => {
+		let e = _e(Ie.value.inheritedAttrs, ["class"]), n = Ae({
+			bridgeKeys: re,
 			props: e
-		}).componentProps, i = n.endIcon ?? (t(v, "end") ? void 0 : "chevronUpDown"), { listbox: ee, ...a } = n.customProps ?? {};
+		}).componentProps, ee = n.endIcon ?? (t(v, "end") ? void 0 : "chevronUpDown"), { listbox: te, ...i } = n.customProps ?? {};
 		return {
 			...n,
-			endIcon: i,
+			endIcon: ee,
 			classes: j.value,
 			customProps: {
-				...a,
-				container: r(a.container, {}, {
-					ref: Ke,
-					onClick: Je,
+				...i,
+				container: r(i.container, {}, {
+					ref: Ze,
+					onClick: $e,
 					class: p({ "cursor-pointer": !m.disabled && !m.readonly && !W.value })
 				})
 			}
 		};
-	}), Xe = o(() => m.customProps?.listbox), q = re(() => Ye.value, {
+	}), tt = a(() => m.customProps?.listbox), q = ie(() => et.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
@@ -147,11 +148,11 @@ function m(m, h, g, _, Oe) {
 		componentName: "Autocomplete",
 		likeInput: () => M.value,
 		control: () => M.value ? "textarea" : "input"
-	}), Ze = o(() => V.value && Ve.value && !m.readonly && !q.isDisabled.value), J = (e) => {
-		!e || !M.value || Ce(e);
+	}), nt = a(() => V.value && Ke.value && !m.readonly && !q.isDisabled.value), J = (e) => {
+		!e || !M.value || De(e);
 	};
-	function Qe(e) {
-		return Be.value.some((t) => f(t, e));
+	function rt(e) {
+		return Ge.value.some((t) => f(t, e));
 	}
 	function Y(e) {
 		h.value = e;
@@ -166,25 +167,25 @@ function m(m, h, g, _, Oe) {
 		_("update:modelValue", t), _("change", t);
 	}
 	function Z() {
-		m.disabled || m.readonly || x.value || (T.value = [...R.value], x.value = !0, S.value = "", K.highlightCurrentSelection((e) => R.value.some((t) => f(t, e))), _("open"), H.value && A.value.asyncData && k?.searchImmediate(""));
+		m.disabled || m.readonly || x.value || (T.value = [...R.value], x.value = !0, S.value = "", K.highlightCurrentSelection((e) => R.value.some((t) => f(t, e))), _("open"), H.value && k.value.asyncData && O?.searchImmediate(""));
 	}
 	function Q(e) {
-		k?.cancel();
+		O?.cancel();
 		let t = x.value;
-		if (t && e?.commitFreeSolo && A.value.freeSolo !== !1) {
+		if (t && e?.commitFreeSolo && k.value.freeSolo !== !1) {
 			let e = u(S.value, R.value, M.value);
-			e != null && (Y(e), X(e), M.value && s(() => {
+			e != null && (Y(e), X(e), M.value && o(() => {
 				J(g.value), g.value?.focus({ preventScroll: !0 });
 			}));
 		}
 		S.value = "", w.value = -1, t && (x.value = !1, _("close"));
 	}
-	function $e(e) {
+	function it(e) {
 		if (!e.disabled) {
 			if (z.value) {
 				if (M.value) {
 					let t = [...T.value], n = t.findIndex((t) => f(t, e.value));
-					n >= 0 ? (t.splice(n, 1), _("deselect", e)) : (t.push(e.value), _("select", e)), T.value = t, S.value = "", w.value = -1, s(() => {
+					n >= 0 ? (t.splice(n, 1), _("deselect", e)) : (t.push(e.value), _("select", e)), T.value = t, S.value = "", w.value = -1, o(() => {
 						g.value?.focus({ preventScroll: !0 });
 					});
 					return;
@@ -194,7 +195,7 @@ function m(m, h, g, _, Oe) {
 			}
 			if (M.value) {
 				let t = [...R.value], n = t.findIndex((t) => f(t, e.value));
-				n >= 0 ? (t.splice(n, 1), _("deselect", e)) : (t.push(e.value), _("select", e)), Y(t), X(t), S.value = "", w.value = -1, s(() => {
+				n >= 0 ? (t.splice(n, 1), _("deselect", e)) : (t.push(e.value), _("select", e)), Y(t), X(t), S.value = "", w.value = -1, o(() => {
 					J(g.value), g.value?.focus({ preventScroll: !0 });
 				});
 				return;
@@ -202,7 +203,7 @@ function m(m, h, g, _, Oe) {
 			Y(e.value), X(e.value), _("select", e), Q();
 		}
 	}
-	function et() {
+	function at() {
 		if (M.value) Y(T.value), X(T.value);
 		else {
 			let e = T.value[0] ?? null;
@@ -210,33 +211,33 @@ function m(m, h, g, _, Oe) {
 		}
 		Q(), _("apply");
 	}
-	function tt() {
+	function ot() {
 		T.value = [...R.value], Q(), _("cancel");
 	}
-	function nt() {
-		if (A.value.freeSolo === !1) return !1;
+	function st() {
+		if (k.value.freeSolo === !1) return !1;
 		let e = u(S.value, R.value, M.value);
-		return e != null && (Y(e), X(e), S.value = "", w.value = -1, M.value ? (s(() => {
+		return e != null && (Y(e), X(e), S.value = "", w.value = -1, M.value ? (o(() => {
 			J(g.value), g.value?.focus({ preventScroll: !0 });
 		}), !0) : (Q(), !0));
 	}
-	function rt(e) {
+	function ct(e) {
 		e?.preventDefault(), e?.stopPropagation(), !(m.disabled || m.readonly) && (M.value ? (Y([]), X([])) : (Y(null), X(null)), _("clear"), Q());
 	}
-	function it(e, t) {
+	function lt(e, t) {
 		if (t.preventDefault(), t.stopPropagation(), !M.value) return;
 		let n = R.value.filter((t) => !f(t, e.value));
-		Y(n), X(n), _("deselect", e), s(() => J(g.value));
+		Y(n), X(n), _("deselect", e), o(() => J(g.value));
 	}
-	function at() {
+	function ut() {
 		let e = K.getHighlightedOption();
-		return e ? ($e(e), !0) : !1;
+		return e ? (it(e), !0) : !1;
 	}
-	function ot(e) {
+	function dt(e) {
 		let t = e.target;
-		S.value = t.value, _("search", S.value), x.value || Z(), K.resetHighlight(), H.value && k?.searchDebounced(S.value);
+		S.value = t.value, _("search", S.value), x.value || Z(), K.resetHighlight(), H.value && O?.searchDebounced(S.value);
 	}
-	function st(e) {
+	function ft(e) {
 		if (!(m.disabled || m.readonly)) switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault(), x.value ? K.moveHighlight(1) : Z();
@@ -245,7 +246,7 @@ function m(m, h, g, _, Oe) {
 				e.preventDefault(), x.value ? K.moveHighlight(-1) : Z();
 				break;
 			case "Enter":
-				e.preventDefault(), x.value ? at() || nt() : Z();
+				e.preventDefault(), x.value ? ut() || st() : Z();
 				break;
 			case "Escape":
 				e.preventDefault(), Q();
@@ -260,104 +261,104 @@ function m(m, h, g, _, Oe) {
 				if (M.value && !S.value && B.value.length > 0) {
 					e.preventDefault();
 					let t = B.value.at(-1);
-					t && it(t, e);
+					t && lt(t, e);
 				}
 				break;
 			case "Tab": Q({ commitFreeSolo: !0 });
 		}
 	}
-	async function ct(e) {
-		let t = A.value.asyncData;
+	async function pt(e) {
+		let t = k.value.asyncData;
 		if (t) {
 			C.value = !0;
 			try {
-				let { options: n, resolvedSelected: r } = await xe(t, e, R.value, (e) => ve(e, N.value));
+				let { options: n, resolvedSelected: r } = await Te(t, e, R.value, (e) => Se(e, N.value));
 				r.length > 0 && (D.value = r), E.value = n;
 			} finally {
 				C.value = !1;
 			}
 		}
 	}
-	async function lt() {
-		let e = A.value.asyncData;
-		!e?.resolve || R.value.length === 0 || (D.value = ve(await e.resolve(R.value), N.value));
+	async function mt() {
+		let e = k.value.asyncData;
+		!e?.resolve || R.value.length === 0 || (D.value = Se(await e.resolve(R.value), N.value));
 	}
-	let $ = o(() => {
-		let e = Te(Se, fe(Ne.value, [
+	let $ = a(() => {
+		let e = ke(Ee, me(Le.value, [
 			"Autocomplete",
 			"tokens",
 			"listbox",
 			"color"
 		]));
-		return we({
+		return Oe({
 			tokens: e,
 			color: q.merged.value.color,
 			invalid: q.invalidated.value
 		});
-	}), ut = o(() => $.value?.value), dt = o(() => {
+	}), ht = a(() => $.value?.value), gt = a(() => {
 		let e = !m.disabled && !m.readonly && !W.value, t = !m.disabled && !m.readonly && W.value && U.value, n = V.value && !M.value && !W.value;
 		return r({
 			role: "combobox",
-			value: Ge.value,
+			value: Xe.value,
 			"aria-controls": y,
 			"aria-expanded": x.value,
-			readonly: We.value,
-			onKeydown: st,
-			placeholder: A.value.placeholder,
+			readonly: Ye.value,
+			onKeydown: ft,
+			placeholder: k.value.placeholder,
 			"aria-autocomplete": U.value ? "list" : void 0,
 			"aria-activedescendant": x.value ? K.activeDescendantId.value : void 0,
 			...M.value ? {
 				rows: 1,
 				onInput: (e) => {
-					ot(e), J(e.target);
+					dt(e), J(e.target);
 				}
-			} : { onInput: ot }
+			} : { onInput: dt }
 		}, q.inputBind.value, p({
 			"cursor-text": t,
 			"cursor-pointer": e,
 			"resize-none overflow-hidden": M.value,
-			[p(ut.value, j.value.value) ?? ""]: n
+			[p(ht.value, j.value.value) ?? ""]: n
 		}));
 	});
-	l(() => [
+	c(() => [
 		x.value,
 		M.value,
 		g.value
 	], () => {
 		J(g.value);
-	}, { immediate: !0 }), l(() => h.value, () => {
-		lt();
-	}, { immediate: !0 }), l(() => A.value.asyncData, (e) => {
-		if (k?.cancel(), E.value = [], lt(), !e) {
-			k = null;
+	}, { immediate: !0 }), c(() => h.value, () => {
+		mt();
+	}, { immediate: !0 }), c(() => k.value.asyncData, (e) => {
+		if (O?.cancel(), E.value = [], mt(), !e) {
+			O = null;
 			return;
 		}
-		k = he((e) => void ct(e), be(e));
-	}, { immediate: !0 }), se(() => {
-		k?.cancel();
-	}), ce(() => {
+		O = ve((e) => void pt(e), we(e));
+	}, { immediate: !0 }), le(() => {
+		O?.cancel();
+	}), ue(() => {
 		J(g.value);
 	});
-	let ft = o(() => i(q.merged.value.size)), pt = o(() => r({}, {}, {
+	let _t = a(() => ee(q.merged.value.size)), vt = a(() => r({}, {}, {
 		tabindex: 0,
 		role: "button",
 		"data-autocomplete-clear": !0,
-		onMousedown: qe,
+		onMousedown: Qe,
 		class: p({
 			"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
 			[$.value?.clear ?? ""]: !0,
 			[j.value.clear ?? ""]: !0
 		})
-	})), mt = o(() => ({
+	})), yt = a(() => ({
 		listboxId: y,
-		isSelected: Qe,
+		isSelected: rt,
 		disableAutoFocus: !0,
 		overlay: m.overlay,
-		loading: He.value,
+		loading: qe.value,
 		multiple: M.value,
 		maxHeight: m.maxHeight,
 		showFooter: z.value,
-		entries: Ue.value,
+		entries: Je.value,
 		options: G.value,
 		size: q.merged.value.size,
 		error: q.invalidated.value,
@@ -366,14 +367,18 @@ function m(m, h, g, _, Oe) {
 		rounded: q.merged.value.rounded,
 		highlightedIndex: w.value,
 		disableMaxHeight: m.disableMaxHeight === !0,
-		hideEmptyMessage: A.value.hideEmptyMessage === !0,
-		emptyMessage: A.value.emptyMessage ?? b("No options"),
-		loadingMessage: A.value.loadingMessage ?? b("Loading..."),
-		...Xe.value
+		hideEmptyMessage: k.value.hideEmptyMessage === !0,
+		emptyMessage: k.value.emptyMessage ?? b("No options"),
+		loadingMessage: k.value.loadingMessage ?? b("Loading..."),
+		...tt.value
 	}));
-	function ht(e) {
+	function bt(e) {
+		if (e.length === 0) return;
 		let t = F.value;
-		t.length === e.length && t.every((t, n) => String(t.value) === String(e[n]?.value)) || (F.value = e);
+		t.length === e.length && t.every((t, n) => {
+			let r = e[n];
+			return t.label === r?.label && t.description === r?.description && String(t.value) === String(r?.value) && !!t.disabled == !!r?.disabled;
+		}) || (F.value = e);
 	}
 	return {
 		slots: v,
@@ -381,24 +386,24 @@ function m(m, h, g, _, Oe) {
 		multiple: M,
 		listboxId: y,
 		formField: q,
-		isLoading: He,
-		clearable: Ve,
-		clearBind: pt,
-		isSelected: Qe,
-		clearValue: rt,
-		removeChip: it,
-		triggerBind: dt,
-		handleApply: et,
-		selectOption: $e,
-		handleCancel: tt,
-		containerRef: O,
-		listboxProps: mt,
-		clearIconSize: ft,
+		isLoading: qe,
+		clearable: Ke,
+		clearBind: vt,
+		isSelected: rt,
+		clearValue: ct,
+		removeChip: lt,
+		triggerBind: gt,
+		handleApply: at,
+		selectOption: it,
+		handleCancel: ot,
+		containerRef: Fe,
+		listboxProps: yt,
+		clearIconSize: _t,
 		mergedClasses: j,
-		showClearIcon: Ze,
+		showClearIcon: nt,
 		visibleOptions: G,
 		isSearchActive: W,
-		open: o({
+		open: a({
 			get: () => x.value,
 			set: (e) => {
 				e ? Z() : Q({ commitFreeSolo: !0 });
@@ -407,10 +412,10 @@ function m(m, h, g, _, Oe) {
 		selectedOptions: B,
 		hasComposedList: I,
 		highlightedIndex: w,
-		handleRegisteredOptionsChange: ht,
-		hideEmptyMessage: o(() => A.value.hideEmptyMessage === !0),
-		emptyMessage: o(() => A.value.emptyMessage ?? b("No options")),
-		loadingMessage: o(() => A.value.loadingMessage ?? b("Loading..."))
+		handleRegisteredOptionsChange: bt,
+		hideEmptyMessage: a(() => k.value.hideEmptyMessage === !0),
+		emptyMessage: a(() => k.value.emptyMessage ?? b("No options")),
+		loadingMessage: a(() => k.value.loadingMessage ?? b("Loading..."))
 	};
 }
 //#endregion

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

@@ -19,6 +19,7 @@ var y = /*@__PURE__*/ l({
 		icon: {},
 		loading: { type: Boolean },
 		rounded: {},
+		selected: { type: Boolean },
 		size: {},
 		startIcon: {},
 		text: {},

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

@@ -134,6 +134,12 @@ export interface ButtonOwnProps {
      * @default "md"
      */
     rounded?: MergeProps<ButtonRounded, ButtonRoundedOverrides>;
+    /**
+     * Whether the button is in a selected / pressed state.
+     *
+     * @default false
+     */
+    selected?: boolean;
     /**
      * The size of the button.
      *

package/dist/Components/Button/composables/useButton.d.ts

@@ -7,7 +7,10 @@ export declare function useButton(props: ButtonOwnProps, libDefaults: ButtonLibD
     merged: import('vue').ComputedRef<ButtonMerged>;
     isMini: import('vue').ComputedRef<boolean>;
     iconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonProps, "color" | "href" | "icon" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "text" | "disabled" | "endIcon" | "startIcon" | "as" | "density" | "loading">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-pressed": boolean | undefined;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonProps, "color" | "href" | "icon" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "text" | "disabled" | "endIcon" | "startIcon" | "as" | "density" | "loading" | "selected">>>;
     rootHref: import('vue').ComputedRef<string | undefined>;
     rootType: import('vue').ComputedRef<"button" | undefined>;
     endIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;