@bridge-ui/vue 0.0.6 → 0.0.7

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

@@ -1,8 +1,8 @@
 import { hasNamedSlot as e, hasSlotOrProp as t } from "../../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as n, mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
 import { computed as o, toValue as s, useId as c, useSlots as l } from "vue";
-import { get as u, omit as d } from "es-toolkit/compat";
-import { cn as f, mergeBridgeUILayeredClasses as p, splitComponentProps as m } from "@bridge-ui/core";
+import { cn as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core";
+import { get as p, omit as m } from "es-toolkit/compat";
 import { colorProps as h, invalidatedProps as g, roundedProps as _, sizeProps as v, variantProps as y } from "@bridge-ui/core/Tokens/FormField";
 //#region src/Components/FormField/composables/useFormField.ts
 var b = [
@@ -25,11 +25,11 @@ var b = [
 	"customProps",
 	"description",
 	"errorMessage",
-	"withErrorIcon",
-	"withoutErrorMessage"
+	"showErrorIcon",
+	"hideErrorMessage"
 ];
 function x(x, S, C = {}) {
-	let ee = c(), w = l(), T = o(() => m({
+	let ee = c(), w = l(), T = o(() => f({
 		props: s(x),
 		bridgeKeys: b
 	})), { merged: E, entry: D } = i({
@@ -39,28 +39,28 @@ function x(x, S, C = {}) {
 	}), O = o(() => E.value.customProps), k = o(() => C.control?.() ?? "input"), A = a({
 		entry: D,
 		props: () => T.value.componentProps
-	}), j = o(() => E.value.error === !0), M = o(() => !!E.value.disabled), N = o(() => !!E.value.readonly), P = o(() => E.value.variant ?? "outline"), F = o(() => E.value.errorIcon ?? "alert"), I = o(() => P.value === "notched"), L = o(() => P.value === "stacked"), R = o(() => P.value === "underlined"), z = o(() => k.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !E.value.withoutErrorMessage), H = o(() => {
+	}), j = o(() => E.value.error === !0), M = o(() => !!E.value.disabled), N = o(() => !!E.value.readonly), P = o(() => E.value.variant ?? "outline"), F = o(() => E.value.errorIcon ?? "alert"), I = o(() => P.value === "notched"), L = o(() => P.value === "stacked"), R = o(() => P.value === "underlined"), z = o(() => k.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !E.value.hideErrorMessage), H = o(() => {
 		let e = T.value.inheritedAttrs.id;
 		return E.value.controlId ?? e ?? ee;
 	}), U = o(() => j.value && t(w, "errorMessage", E.value.errorMessage)), W = o(() => (I.value || L.value) && (t(w, "label", E.value.label) || t(w, "corner", E.value.corner))), G = o(() => t(w, "label", E.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
 		let e = [];
-		return !j.value && t(w, "description", E.value.description) && e.push(`${H.value}-description`), j.value && !E.value.withoutErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
-	}), q = o(() => u(p(v, D.value?.tokens?.size), [E.value.size, P.value])), J = o(() => u(p(h, D.value?.tokens?.color), E.value.color ?? "primary")), Y = o(() => p(g, D.value?.tokens?.invalidated, E.value.customProps?.invalidated)), X = o(() => j.value ? Y.value : void 0), Z = o(() => u(p(_, D.value?.tokens?.rounded), E.value.rounded)), Q = o(() => u(p(y, D.value?.tokens?.variant), P.value)), te = o(() => {
+		return !j.value && t(w, "description", E.value.description) && e.push(`${H.value}-description`), j.value && !E.value.hideErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+	}), q = o(() => p(d(v, D.value?.tokens?.size), [E.value.size, P.value])), J = o(() => p(d(h, D.value?.tokens?.color), E.value.color ?? "primary")), Y = o(() => d(g, D.value?.tokens?.invalidated, E.value.customProps?.invalidated)), X = o(() => j.value ? Y.value : void 0), Z = o(() => p(d(_, D.value?.tokens?.rounded), E.value.rounded)), Q = o(() => p(d(y, D.value?.tokens?.variant), P.value)), te = o(() => {
 		let e = j.value ? Y.value : J.value;
 		return R.value ? e?.underlined : e?.input;
 	}), ne = o(() => {
-		if (L.value) return f({
+		if (L.value) return u({
 			[q.value?.insetTop ?? ""]: !0,
 			[q.value?.insetStart ?? ""]: !0,
 			[q.value?.insetEnd ?? ""]: !0
 		});
 	}), re = o(() => {
 		let t = C.reservedSlots?.() ?? [], n = e(w, "end") || t.includes("end"), r = e(w, "start") || t.includes("start");
-		if (!L.value) return !r && !n ? q.value?.padding : f({
+		if (!L.value) return !r && !n ? q.value?.padding : u({
 			[q.value?.insetStart ?? ""]: !r,
 			[q.value?.insetEnd ?? ""]: !n
 		});
-	}), ie = o(() => r(O.value?.end, {}, f({
+	}), ie = o(() => r(O.value?.end, {}, u({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-gray-500": !j.value,
 		[Z.value?.end ?? ""]: !R.value && !L.value,
@@ -70,15 +70,15 @@ function x(x, S, C = {}) {
 	}))), ae = o(() => {
 		let e = T.value.inheritedAttrs;
 		return r(O.value?.root, {
-			class: f(e.class),
-			...d(e, ["class"])
-		}, f({
+			class: u(e.class),
+			...m(e, ["class"])
+		}, u({
 			"group w-full relative": !0,
 			"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60": !0,
 			"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
 			[A.value.root ?? ""]: !0
 		}));
-	}), oe = o(() => r(O.value?.errorMessage, {}, f({
+	}), oe = o(() => r(O.value?.errorMessage, {}, u({
 		"mt-2": !0,
 		"min-h-[1lh]": V.value,
 		[X.value?.errorMessage ?? ""]: !0,
@@ -91,7 +91,7 @@ function x(x, S, C = {}) {
 		readonly: N.value,
 		"aria-describedby": K.value,
 		"aria-invalid": j.value || void 0
-	}, d(T.value.inheritedAttrs, ["class"]), f({
+	}, m(T.value.inheritedAttrs, ["class"]), u({
 		"flex-1 min-w-0 min-h-0 bg-transparent border-0 shadow-none": !0,
 		"h-full": !z.value && !L.value,
 		"max-h-none": z.value,
@@ -109,26 +109,26 @@ function x(x, S, C = {}) {
 		required: E.value.required,
 		classes: {
 			required: A.value.required,
-			root: f({
+			root: u({
 				[Q.value?.label ?? ""]: I.value,
 				[A.value.label ?? ""]: !0
 			})
 		}
-	})), ce = o(() => r(O.value?.start, {}, f({
+	})), ce = o(() => r(O.value?.start, {}, u({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-gray-400": !j.value,
 		[Z.value?.start ?? ""]: !R.value && !L.value,
 		[J.value?.start ?? ""]: !j.value,
 		[X.value?.adornment ?? ""]: j.value,
 		[A.value.start ?? ""]: !0
-	}))), le = o(() => r(O.value?.corner, {}, f({
+	}))), le = o(() => r(O.value?.corner, {}, u({
 		"text-gray-500 dark:text-gray-400": !I.value,
 		[q.value?.text ?? ""]: !0,
 		[Q.value?.corner ?? ""]: I.value,
 		[A.value.corner ?? ""]: !0
 	}))), ue = o(() => {
 		let e = t(w, "label", E.value.label);
-		return r(O.value?.header, {}, f({
+		return r(O.value?.header, {}, u({
 			flex: !0,
 			"w-full shrink-0": !0,
 			"justify-between": e,
@@ -138,20 +138,20 @@ function x(x, S, C = {}) {
 			[Q.value?.labelRow ?? ""]: W.value,
 			[A.value.header ?? ""]: !0
 		}));
-	}), de = o(() => r(O.value?.header, {}, f({
+	}), de = o(() => r(O.value?.header, {}, u({
 		flex: !0,
 		"mb-1": !0,
 		[G.value]: !0,
 		[A.value.header ?? ""]: !0
-	}))), fe = o(() => r(O.value?.endIcon, {}, f({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), pe = o(() => r(O.value?.end, {}, f({
+	}))), fe = o(() => r(O.value?.endIcon, {}, u({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), pe = o(() => r(O.value?.end, {}, u({
 		"group/end wrapper-end-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 		"self-stretch min-h-0 overflow-hidden py-0.5 pe-0.5": L.value,
 		"h-full min-h-0 overflow-hidden py-0.5 pe-0.5": !L.value,
 		[A.value.end ?? ""]: !0
-	}))), me = o(() => r({}, {}, f({
+	}))), me = o(() => r({}, {}, u({
 		"flex min-h-0 min-w-0 flex-1 flex-col": !0,
 		[ne.value ?? ""]: !0
-	}))), he = o(() => r({}, {}, f({
+	}))), he = o(() => r({}, {}, u({
 		"flex w-full min-w-0 flex-1 items-stretch gap-x-2": !0,
 		[q.value?.controlRow ?? ""]: !0
 	})));
@@ -176,7 +176,7 @@ function x(x, S, C = {}) {
 		endIconBind: fe,
 		endSlotBind: pe,
 		invalidated: j,
-		containerBind: o(() => r(O.value?.container, { "data-bridge-rounded": E.value.rounded ?? "md" }, f({
+		containerBind: o(() => r(O.value?.container, { "data-bridge-rounded": E.value.rounded ?? "md" }, u({
 			"group/field relative flex flex-row items-stretch overflow-hidden": L.value,
 			"group/field relative flex justify-start gap-x-2 items-stretch": !L.value,
 			"transition-all ease-in-out duration-150 outline-none": !0,
@@ -193,8 +193,8 @@ function x(x, S, C = {}) {
 			[X.value?.containerUnderlined ?? ""]: j.value && R.value,
 			[A.value.container ?? ""]: !0
 		}))),
-		startIconBind: o(() => r(O.value?.startIcon, {}, f({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
-		startSlotBind: o(() => r(O.value?.start, {}, f({
+		startIconBind: o(() => r(O.value?.startIcon, {}, u({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
+		startSlotBind: o(() => r(O.value?.start, {}, u({
 			"group/start wrapper-start-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 			"self-stretch min-h-0 overflow-hidden py-0.5 ps-0.5": L.value,
 			"h-full min-h-0 overflow-hidden py-0.5 ps-0.5": !L.value,
@@ -202,7 +202,7 @@ function x(x, S, C = {}) {
 		}))),
 		fieldLabelProps: se,
 		ariaDescribedBy: K,
-		descriptionBind: o(() => r(O.value?.description, {}, f({
+		descriptionBind: o(() => r(O.value?.description, {}, u({
 			"mt-2 text-gray-500 dark:text-gray-400": !0,
 			[q.value?.text ?? ""]: !0,
 			[A.value.description ?? ""]: !0

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

@@ -175,7 +175,7 @@ export interface FormFieldOwnProps {
      */
     error?: boolean;
     /**
-     * Icon used when `withErrorIcon` is enabled and the field is invalid.
+     * Icon used when `showErrorIcon` is enabled and the field is invalid.
      *
      * @default "alert"
      */
@@ -194,6 +194,12 @@ export interface FormFieldOwnProps {
      * @default undefined
      */
     field?: UseFormFieldReturn;
+    /**
+     * When `true`, does not reserve space below the control for error messages.
+     *
+     * @default false
+     */
+    hideErrorMessage?: boolean;
     /**
      * The primary label text above the control.
      *
@@ -218,6 +224,13 @@ export interface FormFieldOwnProps {
      * @default "md"
      */
     rounded?: MergeProps<FormFieldRounded, FormFieldRoundedOverrides>;
+    /**
+     * When `true` and the field is invalid, shows an error icon at the inline end
+     * when no `endIcon` or `end` slot is present.
+     *
+     * @default true
+     */
+    showErrorIcon?: boolean;
     /**
      * Typography scale for label, corner, description, and error message, and
      * control sizing (input, container, icons).
@@ -248,19 +261,6 @@ export interface FormFieldOwnProps {
      * @default "outline"
      */
     variant?: MergeProps<FormFieldVariant, FormFieldVariantOverrides>;
-    /**
-     * When `true` and the field is invalid, shows an error icon at the inline end
-     * when no `endIcon` or `end` slot is present.
-     *
-     * @default true
-     */
-    withErrorIcon?: boolean;
-    /**
-     * When `true`, does not reserve space below the control for error messages.
-     *
-     * @default false
-     */
-    withoutErrorMessage?: boolean;
 }
 export interface FormFieldSlots {
     /**

package/dist/Components/Icon/composables/useIcon.js

@@ -1,13 +1,13 @@
 import { useIconAdapter as e } from "../../../Adapters/Icon/useIconAdapter.js";
 import { mergePartBind as t, useBridgeUIComponent 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, resolveIconSource as c, splitComponentProps as l } from "@bridge-ui/core";
+import { cn as a, mergeBridgeUILayeredClasses as o, resolveIconSource as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l } from "es-toolkit/compat";
 import { sizeProps as u } from "@bridge-ui/core/Tokens/Icon";
 //#region src/Components/Icon/composables/useIcon.ts
 var d = ["icon", "size"];
 function f(f, p) {
-	let m = i(), h = r(() => l({
+	let m = i(), h = r(() => c({
 		bridgeKeys: d,
 		props: {
 			...m,
@@ -17,10 +17,10 @@ function f(f, p) {
 		libDefaults: p,
 		componentName: "Icon",
 		props: () => h.value.componentProps
-	}), v = e(), y = r(() => c(g.value.icon, v.value)), b = r(() => a(s(u, _.value?.tokens?.size), g.value.size));
+	}), v = e(), y = r(() => s(g.value.icon, v.value)), b = r(() => l(o(u, _.value?.tokens?.size), g.value.size));
 	return {
 		merged: g,
-		rootBind: r(() => t({}, h.value.inheritedAttrs, o({ [b.value ?? ""]: !0 }))),
+		rootBind: r(() => t({}, h.value.inheritedAttrs, a({ [b.value ?? ""]: !0 }))),
 		resolvedIcon: y
 	};
 }

package/dist/Components/Label/composables/useLabel.js

@@ -1,7 +1,7 @@
 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 { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
+import { get as c } from "es-toolkit/compat";
 import { invalidatedProps as l, sizeProps as u } from "@bridge-ui/core/Tokens/Label";
 //#region src/Components/Label/composables/useLabel.ts
 var d = [
@@ -11,7 +11,7 @@ var d = [
 	"required"
 ];
 function f(f, p) {
-	let m = i(), h = r(() => c({
+	let m = i(), h = r(() => s({
 		bridgeKeys: d,
 		props: {
 			...m,
@@ -24,13 +24,13 @@ function f(f, p) {
 	}), v = n({
 		entry: _,
 		props: () => h.value.componentProps
-	}), y = r(() => a(s(u, _.value?.tokens?.size), g.value.size)), b = r(() => s(l, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, o({
+	}), y = r(() => c(o(u, _.value?.tokens?.size), g.value.size)), b = r(() => o(l, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, a({
 		[b.value.required ?? ""]: !0,
 		[v.value.required ?? ""]: !0
 	})));
 	return {
 		merged: g,
-		rootBind: r(() => e({}, h.value.inheritedAttrs, o({
+		rootBind: r(() => e({}, h.value.inheritedAttrs, a({
 			"inline-flex items-center gap-x-0.5 font-medium leading-none": !0,
 			"text-gray-700 dark:text-gray-300": !g.value.error,
 			[b.value.label ?? ""]: g.value.error,

package/dist/Components/Link/composables/useLink.js

@@ -1,7 +1,7 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i, useSlots as a } from "vue";
-import { get as o } from "es-toolkit/compat";
-import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core";
+import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l } from "es-toolkit/compat";
 import { colorProps as u, sizeProps as d, underlineProps as f } from "@bridge-ui/core/Tokens/Link";
 //#region src/Components/Link/composables/useLink.ts
 var p = [
@@ -17,7 +17,7 @@ var p = [
 	"customProps"
 ];
 function m(m, h) {
-	let g = i(), _ = a(), v = r(() => l({
+	let g = i(), _ = a(), v = r(() => c({
 		bridgeKeys: p,
 		props: {
 			...g,
@@ -34,28 +34,28 @@ function m(m, h) {
 		if (y.value.external && !C.value) return "_blank";
 	}), D = r(() => {
 		if (y.value.external && !C.value) return "noopener noreferrer";
-	}), O = r(() => o(c(d, b.value?.tokens?.size), y.value.size)), k = r(() => o(c(u, b.value?.tokens?.color), y.value.color)), A = r(() => o(c(f, b.value?.tokens?.underline), y.value.underline));
+	}), O = r(() => l(s(d, b.value?.tokens?.size), y.value.size)), k = r(() => l(s(u, b.value?.tokens?.color), y.value.color)), A = r(() => l(s(f, b.value?.tokens?.underline), y.value.underline));
 	return {
 		slots: _,
 		merged: y,
 		rootRel: D,
-		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, s({
+		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, o({
 			"inline-flex items-center gap-x-1 font-medium": !0,
 			"transition-colors duration-200": !0,
 			[O.value ?? ""]: !0,
 			[A.value ?? ""]: !0,
-			[o(k.value, "base") ?? ""]: !0,
-			[o(k.value, "hover") ?? ""]: !0,
+			[l(k.value, "base") ?? ""]: !0,
+			[l(k.value, "hover") ?? ""]: !0,
 			"aria-disabled:opacity-80 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none": !0,
 			[S.value.root ?? ""]: !0
 		}))),
 		rootHref: T,
 		rootTarget: E,
-		leftIconBind: r(() => e(x.value?.leftIcon, {}, s({
+		leftIconBind: r(() => e(x.value?.leftIcon, {}, o({
 			"shrink-0": !0,
 			[S.value.leftIcon ?? ""]: !0
 		}))),
-		rightIconBind: r(() => e(x.value?.rightIcon, {}, s({
+		rightIconBind: r(() => e(x.value?.rightIcon, {}, o({
 			"shrink-0": !0,
 			[S.value.rightIcon ?? ""]: !0
 		}))),

package/dist/Components/List/composables/useList.js

@@ -1,8 +1,8 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as r } from "../listInjectionKey.js";
 import { computed as i, provide as a, useAttrs as o } from "vue";
-import { get as s, omit as c } from "es-toolkit/compat";
-import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
+import { cn as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l, omit as u } from "es-toolkit/compat";
 //#region src/Components/List/composables/useList.ts
 var d = [
 	"as",
@@ -12,7 +12,7 @@ var d = [
 	"customProps"
 ];
 function f(f) {
-	let p = o(), m = i(() => u({
+	let p = o(), m = i(() => c({
 		bridgeKeys: d,
 		props: {
 			...p,
@@ -26,13 +26,13 @@ function f(f) {
 		props: () => m.value.componentProps
 	});
 	a(r, i(() => ({ dense: h.value.dense === !0 })));
-	let y = i(() => c(m.value.inheritedAttrs, []));
+	let y = i(() => u(m.value.inheritedAttrs, []));
 	return {
 		merged: h,
-		rootBind: i(() => e(_.value?.root, y.value, l({
+		rootBind: i(() => e(_.value?.root, y.value, s({
 			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
-			[s(v.value, "root") ?? ""]: !0
+			[l(v.value, "root") ?? ""]: !0
 		})))
 	};
 }

package/dist/Components/ListItem/composables/useListItem.js

@@ -1,11 +1,11 @@
 import { hasNamedSlot as e, isPropPresent as t, resolveNamedSlot as n } from "../../../Utils/slotOrProp.js";
 import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
-import { LIST_INJECTION_KEY as o } from "../../List/listInjectionKey.js";
-import { getListboxOptionId as s } from "../../Listbox/composables/useListboxNavigation.js";
+import { getListboxOptionId as o } from "../../Listbox/composables/useListboxNavigation.js";
+import { LIST_INJECTION_KEY as s } from "../../List/listInjectionKey.js";
 import { LISTBOX_INJECTION_KEY as c } from "../../Listbox/listboxInjectionKey.js";
 import { computed as l, getCurrentInstance as u, inject as d, onBeforeUnmount as f, toValue as p, useAttrs as m, watch as h } from "vue";
-import { get as g, isNull as _, omit as v } from "es-toolkit/compat";
-import { cn as y, splitComponentProps as b } from "@bridge-ui/core";
+import { cn as g, splitComponentProps as _ } from "@bridge-ui/core";
+import { get as v, isNull as y, omit as b } from "es-toolkit/compat";
 //#region src/Components/ListItem/composables/useListItem.ts
 var x = [
 	"as",
@@ -23,7 +23,7 @@ var x = [
 	"selectedIcon"
 ];
 function S(t, n, S) {
-	let C = m(), w = d(o, null), T = d(c, null), E = T != null, D = l(() => b({
+	let C = m(), w = d(s, null), T = d(c, null), E = T != null, D = l(() => _({
 		props: {
 			...C,
 			...t
@@ -52,13 +52,13 @@ function S(t, n, S) {
 	let N = l(() => j.value != null), P = l(() => !j.value || !A.value ? !1 : A.value.isSelected(j.value.value)), F = l(() => !j.value || !A.value ? -1 : A.value.getOptionIndex(j.value.value)), I = l(() => !A.value || F.value < 0 ? !1 : A.value.highlightedIndex === F.value), L = l(() => O.value.customProps), R = a({
 		entry: k,
 		props: () => D.value.componentProps
-	}), z = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : w ? p(w).dense : !1), B = l(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = l(() => e(S, "secondary") || !!O.value.secondary), H = l(() => e(S, "start")), U = l(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || _(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), W = l(() => e(S, "end") || U.value != null), G = l(() => v(D.value.inheritedAttrs, [])), K = l(() => r(L.value?.root, G.value, {
-		class: y({
+	}), z = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : w ? p(w).dense : !1), B = l(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = l(() => e(S, "secondary") || !!O.value.secondary), H = l(() => e(S, "start")), U = l(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || y(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), W = l(() => e(S, "end") || U.value != null), G = l(() => b(D.value.inheritedAttrs, [])), K = l(() => r(L.value?.root, G.value, {
+		class: g({
 			"list-none": !0,
 			"border-b border-black/10 last:border-b-0 dark:border-white/10": O.value.divider,
-			[g(R.value, "root") ?? ""]: !0
+			[v(R.value, "root") ?? ""]: !0
 		}),
-		id: N.value && A.value?.listboxId && F.value >= 0 ? s(A.value.listboxId, F.value) : void 0
+		id: N.value && A.value?.listboxId && F.value >= 0 ? o(A.value.listboxId, F.value) : void 0
 	})), q = l(() => O.value.interactive || N.value ? r(L.value?.interactive, {}, {
 		"aria-disabled": O.value.disabled ? !0 : void 0,
 		role: N.value ? "option" : O.value.role,
@@ -71,7 +71,7 @@ function S(t, n, S) {
 		onClick: N.value ? () => {
 			j.value && A.value?.onSelect(j.value);
 		} : void 0,
-		class: y({
+		class: g({
 			"flex w-full min-w-0 items-center gap-x-3 text-left text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
 			"cursor-pointer select-none": !O.value.disabled,
 			"px-4": !0,
@@ -84,28 +84,28 @@ function S(t, n, S) {
 			[A.value?.optionHighlightedClass ?? ""]: N.value && I.value && !P.value,
 			[A.value?.mergedClasses.optionHighlighted ?? ""]: N.value && I.value && !P.value,
 			"opacity-50 pointer-events-none": O.value.disabled,
-			[g(R.value, "interactive") ?? ""]: !0,
+			[v(R.value, "interactive") ?? ""]: !0,
 			[A.value?.sizeClasses?.option ?? ""]: !0
 		})
-	}) : null), J = l(() => y({
+	}) : null), J = l(() => g({
 		"flex w-full min-w-0 gap-x-3": !0,
 		"items-center text-dark-900 dark:text-dark-100": !O.value.interactive,
 		"px-4": !O.value.interactive,
 		"py-2": !O.value.interactive && !z.value,
 		"py-1.5": !O.value.interactive && z.value
-	})), Y = l(() => r(L.value?.start, {}, y({
+	})), Y = l(() => r(L.value?.start, {}, g({
 		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
-		[g(R.value, "start") ?? ""]: !0
-	}))), X = l(() => r(L.value?.content, {}, y({
+		[v(R.value, "start") ?? ""]: !0
+	}))), X = l(() => r(L.value?.content, {}, g({
 		"min-w-0 flex-1": !0,
-		[g(R.value, "content") ?? ""]: !0
-	}))), Z = l(() => r(L.value?.primary, {}, y("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, g(R.value, "primary")))), Q = l(() => r(L.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, g(R.value, "secondary"))));
+		[v(R.value, "content") ?? ""]: !0
+	}))), Z = l(() => r(L.value?.primary, {}, g("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, v(R.value, "primary")))), Q = l(() => r(L.value?.secondary, {}, g("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, v(R.value, "secondary"))));
 	return {
 		merged: O,
 		hasEnd: W,
-		endBind: l(() => r(L.value?.end, {}, y({
+		endBind: l(() => r(L.value?.end, {}, g({
 			"ml-auto flex shrink-0 items-center": !0,
-			[g(R.value, "end") ?? ""]: !0
+			[v(R.value, "end") ?? ""]: !0
 		}))),
 		rootBind: K,
 		rowClass: J,
@@ -119,7 +119,7 @@ function S(t, n, S) {
 		interactiveBind: q,
 		selectedIconBind: l(() => r(L.value?.selectedIcon, {}, {
 			size: "sm",
-			class: y("shrink-0", A.value?.checkClass, g(R.value, "selectedIcon"))
+			class: g("shrink-0", A.value?.checkClass, v(R.value, "selectedIcon"))
 		})),
 		resolvedSelectedIcon: U
 	};

package/dist/Components/ListSection/composables/useListSection.js

@@ -2,8 +2,8 @@ import { resolveSlotOrProp as e } from "../../../Utils/slotOrProp.js";
 import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as i } from "../../List/listInjectionKey.js";
 import { computed as a, inject as o, toValue as s, useAttrs as c } from "vue";
-import { get as l, omit as u } from "es-toolkit/compat";
-import { cn as d, splitComponentProps as f } from "@bridge-ui/core";
+import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
+import { get as d, omit as f } from "es-toolkit/compat";
 //#region src/Components/ListSection/composables/useListSection.ts
 var p = [
 	"as",
@@ -14,7 +14,7 @@ var p = [
 	"customProps"
 ];
 function m(m, h) {
-	let g = c(), _ = o(i, null), v = a(() => f({
+	let g = c(), _ = o(i, null), v = a(() => u({
 		props: {
 			...g,
 			...m
@@ -26,24 +26,24 @@ function m(m, h) {
 	}), x = a(() => y.value.customProps), S = r({
 		entry: b,
 		props: () => v.value.componentProps
-	}), C = a(() => _ ? s(_).dense : !1), w = a(() => e(h, "default", y.value.title)), T = a(() => u(v.value.inheritedAttrs, [])), E = a(() => y.value.as === "div");
+	}), C = a(() => _ ? s(_).dense : !1), w = a(() => e(h, "default", y.value.title)), T = a(() => f(v.value.inheritedAttrs, [])), E = a(() => y.value.as === "div");
 	return {
 		label: w,
 		merged: y,
-		rootBind: a(() => t(x.value?.root, T.value, d({
+		rootBind: a(() => t(x.value?.root, T.value, l({
 			"list-none": !0,
 			"sticky top-0 z-10 bg-white dark:bg-dark-800": y.value.sticky && !E.value,
-			[l(S.value, "root") ?? ""]: !0
+			[d(S.value, "root") ?? ""]: !0
 		}))),
 		titleBind: a(() => t(x.value?.title, {}, {
 			role: "presentation",
-			class: d({
+			class: l({
 				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": !0,
 				"sticky top-0 z-10": y.value.sticky && E.value,
 				"py-2": !C.value,
 				"py-1.5": C.value,
 				"pl-14": y.value.inset,
-				[l(S.value, "title") ?? ""]: !0
+				[d(S.value, "title") ?? ""]: !0
 			})
 		}))
 	};