@bridge-ui/vue 0.5.1 → 0.7.0

package/dist/Components/FormField/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js

@@ -1,42 +1,47 @@
 import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
 import r from "../Icon/Icon.js";
-import i from "./FormFieldLabel.js";
-import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useSlots as b, withCtx as x } from "vue";
+import i from "./FormFieldCorner.js";
+import a from "./FormFieldLabel.js";
+import { Fragment as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, normalizeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
 //#region src/Components/FormField/UnderlinedFormField.vue?vue&type=script&setup=true&lang.ts
-var S = [
+var C = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], C = ["id"], w = ["id", "aria-hidden"], T = /*@__PURE__*/ f({
+], w = ["id"], T = ["id", "aria-hidden"], E = /*@__PURE__*/ p({
 	__name: "UnderlinedFormField",
 	props: { api: {} },
-	setup(f) {
-		let T = b();
-		return (b, E) => (g(), s("div", m(f.api.rootBind.value, {
-			"data-invalid": f.api.invalidated.value || void 0,
-			"aria-disabled": f.api.isDisabled.value || void 0,
-			"aria-readonly": f.api.isReadonly.value || void 0
+	setup(p) {
+		let E = x();
+		return (x, D) => (_(), c("div", h(p.api.rootBind.value, {
+			"data-invalid": p.api.invalidated.value || void 0,
+			"aria-disabled": p.api.isDisabled.value || void 0,
+			"aria-readonly": p.api.isReadonly.value || void 0
 		}), [
-			y(t)(y(T), "label", f.api.merged.value.label) || y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("div", h(m({ key: 0 }, f.api.headerBind.value)), [d(i, { api: f.api }, l({ _: 2 }, [y(e)(y(T), "label") ? {
+			b(t)(b(E), "label", p.api.merged.value.label) || b(t)(b(E), "corner", p.api.merged.value.corner) ? (_(), c("div", g(h({ key: 0 }, p.api.headerBind.value)), [f(a, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "label") ? {
 				name: "label",
-				fn: x(() => [_(b.$slots, "label")]),
+				fn: S(() => [v(x.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, f.api.cornerBind.value)), [y(e)(y(T), "corner") ? _(b.$slots, "corner", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.corner) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0),
-			c("div", h(p(f.api.containerBind.value)), [
-				y(e)(y(T), "start") ? (g(), s("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [_(b.$slots, "start")], 16)) : y(n)(f.api.merged.value.start) ? (g(), s("div", h(m({ key: 1 }, f.api.startBind.value)), v(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), s("div", h(m({ key: 2 }, f.api.startBind.value)), [d(y(r), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0),
-				_(b.$slots, "default"),
-				y(e)(y(T), "end") ? (g(), s("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : y(n)(f.api.merged.value.end) ? (g(), s("div", h(m({ key: 4 }, f.api.endBind.value)), v(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), s("div", h(m({ key: 5 }, f.api.endBind.value)), [d(y(r), m({
-					icon: f.api.errorIcon.value,
-					size: f.api.merged.value.size
-				}, f.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : f.api.merged.value.endIcon ? (g(), s("div", h(m({ key: 6 }, f.api.endBind.value)), [d(y(r), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
+			} : void 0]), 1032, ["api"]), f(i, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "corner") ? {
+				name: "corner",
+				fn: S(() => [v(x.$slots, "corner")]),
+				key: "0"
+			} : void 0]), 1032, ["api"])], 16)) : s("", !0),
+			l("div", g(m(p.api.containerBind.value)), [
+				b(e)(b(E), "start") ? (_(), c("div", g(h({ key: 0 }, p.api.startSlotBind.value)), [v(x.$slots, "start")], 16)) : b(n)(p.api.merged.value.start) ? (_(), c("div", g(h({ key: 1 }, p.api.startBind.value)), y(p.api.merged.value.start), 17)) : p.api.merged.value.startIcon ? (_(), c("div", g(h({ key: 2 }, p.api.startBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.startIconBind.value, { icon: p.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0),
+				v(x.$slots, "default"),
+				b(e)(b(E), "end") ? (_(), c("div", g(h({ key: 3 }, p.api.endSlotBind.value)), [v(x.$slots, "end")], 16)) : b(n)(p.api.merged.value.end) ? (_(), c("div", g(h({ key: 4 }, p.api.endBind.value)), y(p.api.merged.value.end), 17)) : p.api.invalidated.value && p.api.merged.value.showErrorIcon !== !1 ? (_(), c("div", g(h({ key: 5 }, p.api.endBind.value)), [f(b(r), h({
+					icon: p.api.errorIcon.value,
+					size: p.api.merged.value.size
+				}, p.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : p.api.merged.value.endIcon ? (_(), c("div", g(h({ key: 6 }, p.api.endBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.endIconBind.value, { icon: p.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
 			], 16),
-			!f.api.invalidated.value && y(t)(y(T), "description", f.api.merged.value.description) ? (g(), s("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(T), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.description) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.description), 1)], 64)) : o("", !0)], 16, C)) : o("", !0),
-			f.api.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 2 }, f.api.errorBind.value, {
-				id: `${f.api.controlId.value}-error`,
-				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
-			}), [f.api.showErrorMessageContent.value ? (g(), s(a, { key: 0 }, [y(e)(y(T), "errorMessage") ? _(b.$slots, "errorMessage", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.errorMessage) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, w))
-		], 16, S));
+			!p.api.invalidated.value && b(t)(b(E), "description", p.api.merged.value.description) ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
+			p.api.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
+				id: `${p.api.controlId.value}-error`,
+				"aria-hidden": !p.api.showErrorMessageContent.value || void 0
+			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T))
+		], 16, C));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

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

@@ -451,7 +451,6 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     isNotched: import('vue').ComputedRef<boolean>;
     isStacked: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     isDisabled: import('vue').ComputedRef<boolean>;
     isReadonly: import('vue').ComputedRef<boolean>;
@@ -469,6 +468,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
     descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+    fieldCornerProps: import('vue').ComputedRef<LabelProps>;
     hasInsetLabelRow: import('vue').ComputedRef<boolean>;
     insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;

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

@@ -90,10 +90,12 @@ function x(x, ee, S = {}) {
 			[A.value.root ?? ""]: !0
 		}));
 	}), ie = o(() => r(O.value?.errorMessage, {}, g({
-		"mt-2": !0,
+		"mt-1": !0,
 		"min-h-[1lh]": V.value,
 		"text-error-600 dark:text-error-400": !0,
 		[q.value?.text ?? ""]: !0,
+		[q.value?.insetStart ?? ""]: !0,
+		[q.value?.insetEnd ?? ""]: !0,
 		[A.value.errorMessage ?? ""]: !0
 	}))), ae = o(() => r({
 		...O.value?.input,
@@ -134,12 +136,14 @@ function x(x, ee, S = {}) {
 		"text-dark-400": !0,
 		[J.value?.start ?? ""]: !0,
 		[A.value.start ?? ""]: !0
-	}))), se = o(() => r(O.value?.corner, {}, g({
-		"text-dark-500 dark:text-dark-400": !I.value,
-		[q.value?.text ?? ""]: !0,
-		[X.value?.corner ?? ""]: I.value,
-		[A.value.corner ?? ""]: !0
-	}))), ce = o(() => {
+	}))), se = o(() => n(O.value?.corner, {
+		for: H.value,
+		size: E.value.size,
+		classes: { root: g({
+			[X.value?.corner ?? ""]: I.value,
+			[A.value.corner ?? ""]: !0
+		}) }
+	})), ce = o(() => {
 		let e = t(w, "label", E.value.label);
 		return r(O.value?.header, {}, g({
 			flex: !0,
@@ -181,7 +185,6 @@ function x(x, ee, S = {}) {
 		isNotched: I,
 		isStacked: L,
 		startBind: $,
-		cornerBind: se,
 		headerBind: le,
 		isDisabled: M,
 		isReadonly: N,
@@ -219,11 +222,14 @@ function x(x, ee, S = {}) {
 		fieldLabelProps: oe,
 		ariaDescribedBy: K,
 		descriptionBind: o(() => r(O.value?.description, {}, g({
-			"mt-2 text-dark-500 dark:text-dark-400": !0,
+			"mt-1 text-dark-500 dark:text-dark-400": !0,
 			[q.value?.text ?? ""]: !0,
+			[q.value?.insetStart ?? ""]: !0,
+			[q.value?.insetEnd ?? ""]: !0,
 			[A.value.description ?? ""]: !0
 		}))),
 		stackedBodyBind: fe,
+		fieldCornerProps: se,
 		hasInsetLabelRow: W,
 		insetLabelRowBind: ce,
 		stackedInputRowBind: pe,

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

@@ -61,9 +61,11 @@ export interface FormFieldCustomProps {
      */
     container?: HTMLAttributes;
     /**
-     * Props forwarded to the corner label element.
+     * Props forwarded to the corner `Label` (content stays owned by `FormField`).
+     *
+     * @default undefined
      */
-    corner?: HTMLAttributes;
+    corner?: Partial<LabelProps>;
     /**
      * Props forwarded to the helper text below the control.
      */

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

@@ -30,7 +30,7 @@ function f(f) {
 	return {
 		merged: h,
 		rootBind: i(() => e(_.value?.root, b.value, { class: l({
-			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
+			"m-0 flex list-none flex-col gap-0.5 p-1 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
 			[s(v.value, "root") ?? ""]: !0
 		}) }))

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

@@ -4,9 +4,9 @@ declare const __VLS_base: import('vue').DefineComponent<ListItemOwnProps, {}, {}
     role: "button" | "option" | "menuitem";
     disabled: boolean;
     as: "li" | "div";
+    selected: boolean;
     divider: boolean;
     interactive: boolean;
-    selected: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/Components/ListItem/composables/useListItem.d.ts

@@ -11,7 +11,7 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
         id: string | undefined;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "disabled" | "as" | "dense" | "divider" | "interactive" | "selected" | "selectedIcon">, never>>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "disabled" | "as" | "selected" | "dense" | "divider" | "interactive" | "selectedIcon">, never>>>;
     rowClass: import('vue').ComputedRef<string>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     hasPrimary: import('vue').ComputedRef<boolean>;
@@ -30,8 +30,8 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
         class: string;
     } & object & Record<"class", string>) | null>;
     selectedIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
-        size: "sm";
         class: string;
+        size?: "sm" | undefined;
     }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
     resolvedSelectedIcon: import('vue').ComputedRef<IconSource | null>;
 };

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

@@ -4,10 +4,11 @@ import { getListboxOptionId as i } from "../../Listbox/composables/useListboxNav
 import { LIST_INJECTION_KEY as a } from "../../List/listInjectionKey.js";
 import { LISTBOX_INJECTION_KEY as o } from "../../Listbox/listboxInjectionKey.js";
 import { computed as s, getCurrentInstance as c, inject as l, onBeforeUnmount as u, toValue as d, useAttrs as f, watch as p } from "vue";
-import { get as m, isNull as h, omit as g } from "es-toolkit/compat";
-import { cn as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
+import { get as m, isNil as h, isNull as g, omit as _ } from "es-toolkit/compat";
+import { listboxOptionFromComposedItem as v } from "@bridge-ui/core/Domain";
+import { cn as y, splitComponentProps as b } from "@bridge-ui/core/Utils";
 //#region src/Components/ListItem/composables/useListItem.ts
-var y = [
+var x = [
 	"as",
 	"role",
 	"dense",
@@ -22,108 +23,122 @@ var y = [
 	"interactive",
 	"selectedIcon"
 ];
-function b(b, x, S) {
-	let C = f(), w = l(a, null), T = l(o, null), E = T != null, D = s(() => v({
+function S(S, C, w) {
+	let T = f(), E = l(a, null), D = l(o, null), O = !h(D), k = s(() => b({
 		props: {
-			...C,
-			...b
+			...T,
+			...S
 		},
-		bridgeKeys: y
-	})), { merged: O, entry: k } = n({
-		libDefaults: x,
+		bridgeKeys: x
+	})), { merged: A, entry: j } = n({
+		libDefaults: C,
 		componentName: "ListItem",
-		props: () => D.value.componentProps
-	}), A = s(() => T ? d(T) : null), j = s(() => O.value.value == null || !E ? null : {
-		value: O.value.value,
-		description: O.value.secondary,
-		disabled: !!O.value.disabled,
-		label: O.value.primary ?? String(O.value.value)
-	}), M;
+		props: () => k.value.componentProps
+	}), M = s(() => D ? d(D) : null), N = s(() => O ? v({
+		value: A.value.value,
+		primary: A.value.primary,
+		disabled: A.value.disabled,
+		secondary: A.value.secondary
+	}) : null), P;
 	p(() => {
-		let e = j.value;
+		let e = N.value;
 		return e ? `${String(e.value)}:${e.label}:${e.disabled}:${e.description ?? ""}` : null;
 	}, () => {
-		M?.(), M = void 0;
-		let e = j.value;
-		!e || !T || (M = d(T).registerOption(e));
+		P?.(), P = void 0;
+		let e = N.value;
+		!e || !D || (P = d(D).registerOption(e));
 	}, { immediate: !0 }), u(() => {
-		M?.();
+		P?.();
 	});
-	let N = s(() => j.value != null), P = s(() => !j.value || !A.value ? !1 : A.value.isSelected(j.value.value)), F = s(() => !j.value || !A.value ? -1 : A.value.getOptionIndex(j.value.value)), I = s(() => !A.value || F.value < 0 ? !1 : A.value.highlightedIndex === F.value), L = s(() => O.value.customProps), R = r({
-		entry: k,
-		props: () => D.value.componentProps
-	}), z = s(() => "dense" in (c()?.vnode.props ?? {}) ? b.dense === !0 : b.dense === !0 ? !0 : w ? d(w).dense : !1), B = s(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = s(() => e(S, "secondary") || !!O.value.secondary), H = s(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || h(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), U = s(() => e(S, "end") || H.value != null), W = s(() => g(D.value.inheritedAttrs, [])), G = s(() => t(L.value?.root, W.value, {
-		class: _({
+	let F = s(() => !h(N.value)), I = s(() => !N.value || !M.value ? !1 : M.value.isSelected(N.value.value)), L = s(() => !N.value || !M.value ? -1 : M.value.getOptionIndex(N.value.value)), R = s(() => !M.value || L.value < 0 ? !1 : M.value.highlightedIndex === L.value), z = s(() => A.value.customProps), B = r({
+		entry: j,
+		props: () => k.value.componentProps
+	}), V = s(() => "dense" in (c()?.vnode.props ?? {}) ? S.dense === !0 : S.dense === !0 ? !0 : E ? d(E).dense : !1), H = s(() => e(w, "primary") || e(w, "default") || !!A.value.primary), U = s(() => e(w, "secondary") || !!A.value.secondary), W = s(() => F.value ? !I.value || !M.value?.showCheckmark ? null : "check" : !A.value.selected || g(A.value.selectedIcon) ? null : A.value.selectedIcon ?? "check"), G = s(() => e(w, "end") || W.value != null), K = s(() => _(k.value.inheritedAttrs, [])), q = s(() => t(z.value?.root, K.value, {
+		class: y({
 			"list-none": !0,
-			"border-b border-black/10 last:border-b-0 dark:border-white/10": O.value.divider,
-			[m(R.value, "root") ?? ""]: !0
+			"border-b border-black/10 last:border-b-0 dark:border-white/10": A.value.divider,
+			[m(B.value, "root") ?? ""]: !0
 		}),
-		id: N.value && A.value?.listboxId && F.value >= 0 ? i(A.value.listboxId, F.value) : void 0
-	})), K = s(() => O.value.interactive || N.value ? t(L.value?.interactive, {}, {
-		"aria-disabled": O.value.disabled ? !0 : void 0,
-		role: N.value ? "option" : O.value.role,
-		tabindex: O.value.disabled || N.value ? -1 : 0,
-		"data-selected": O.value.selected || P.value ? !0 : void 0,
-		"aria-selected": N.value ? P.value : void 0,
-		onMousedown: N.value ? (e) => {
+		id: F.value && M.value?.listboxId && L.value >= 0 ? i(M.value.listboxId, L.value) : void 0
+	})), J = s(() => !!(A.value.interactive || F.value)), Y = s(() => J.value ? t(z.value?.interactive, {}, {
+		"aria-disabled": A.value.disabled ? !0 : void 0,
+		role: F.value ? "option" : A.value.role,
+		tabindex: A.value.disabled || F.value ? -1 : 0,
+		"data-selected": A.value.selected || I.value ? !0 : void 0,
+		"aria-selected": F.value ? I.value : void 0,
+		onMousedown: F.value ? (e) => {
 			e.preventDefault();
 		} : void 0,
-		onClick: N.value ? () => {
-			j.value && A.value?.onSelect(j.value);
+		onClick: F.value ? () => {
+			N.value && M.value?.onSelect(N.value);
 		} : void 0,
-		class: _({
-			"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,
-			"py-2": !z.value,
-			"py-1.5": z.value,
-			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !O.value.disabled && !N.value,
-			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": O.value.selected && !N.value,
-			[A.value?.optionHoverClass ?? ""]: N.value && !O.value.disabled && !P.value,
-			[A.value?.mergedClasses.optionHover ?? ""]: N.value && !O.value.disabled && !P.value,
-			[A.value?.optionSelectedClass ?? ""]: N.value && P.value,
-			[A.value?.mergedClasses.optionSelected ?? ""]: N.value && P.value,
-			[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,
-			[m(R.value, "interactive") ?? ""]: !0,
-			[A.value?.sizeClasses?.option ?? ""]: !0
+		class: y({
+			"flex w-full min-w-0 items-center gap-x-2 rounded-md text-left text-sm text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
+			"cursor-pointer select-none": !A.value.disabled,
+			"px-2": !F.value,
+			"py-1.5": !F.value && !V.value,
+			"py-1": !F.value && V.value,
+			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !A.value.disabled && !F.value,
+			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": A.value.selected && !F.value,
+			[M.value?.optionHoverClass ?? ""]: F.value && !A.value.disabled && !I.value,
+			[M.value?.mergedClasses.optionHover ?? ""]: F.value && !A.value.disabled && !I.value,
+			[M.value?.optionSelectedClass ?? ""]: F.value && I.value,
+			[M.value?.mergedClasses.optionSelected ?? ""]: F.value && I.value,
+			[M.value?.optionHighlightedClass ?? ""]: F.value && R.value && !I.value,
+			[M.value?.mergedClasses.optionHighlighted ?? ""]: F.value && R.value && !I.value,
+			"opacity-50 pointer-events-none": A.value.disabled,
+			[m(B.value, "interactive") ?? ""]: !0,
+			[M.value?.sizeClasses?.option ?? ""]: F.value,
+			"leading-none": !0
 		})
-	}) : null), q = s(() => _({
-		"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
-	})), J = s(() => t(L.value?.start, {}, _({
-		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
-		[m(R.value, "start") ?? ""]: !0
-	}))), Y = s(() => t(L.value?.content, {}, _({
+	}) : null), X = s(() => y({
+		"flex w-full min-w-0 items-center gap-x-2 leading-none": !0,
+		"rounded-md text-dark-900 dark:text-dark-100": !J.value,
+		"px-2": !J.value,
+		"py-1.5": !J.value && !V.value,
+		"py-1": !J.value && V.value
+	})), Z = s(() => t(z.value?.start, {}, y({
+		"flex shrink-0 items-center text-dark-600 dark:text-dark-300": !0,
+		[m(B.value, "start") ?? ""]: !0
+	}))), Q = s(() => t(z.value?.content, {}, y({
 		"min-w-0 flex-1": !0,
-		[m(R.value, "content") ?? ""]: !0
-	}))), X = s(() => t(L.value?.primary, {}, _("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, m(R.value, "primary")))), Z = s(() => t(L.value?.secondary, {}, _("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, m(R.value, "secondary"))));
+		[m(B.value, "content") ?? ""]: !0
+	}))), $ = s(() => t(z.value?.primary, {}, y({
+		"block truncate text-sm font-medium": !0,
+		[M.value?.sizeClasses?.primary ?? ""]: F.value,
+		[m(B.value, "primary") ?? ""]: !0,
+		"leading-none": !0
+	}))), ee = s(() => t(z.value?.secondary, {}, y({
+		"mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400": !0,
+		[M.value?.sizeClasses?.secondary ?? ""]: F.value,
+		[m(B.value, "secondary") ?? ""]: !0
+	})));
 	return {
-		merged: O,
-		hasEnd: U,
-		endBind: s(() => t(L.value?.end, {}, _({
+		merged: A,
+		hasEnd: G,
+		endBind: s(() => t(z.value?.end, {}, y({
 			"ml-auto flex shrink-0 items-center": !0,
-			[m(R.value, "end") ?? ""]: !0
+			[m(B.value, "end") ?? ""]: !0
 		}))),
-		rootBind: G,
-		rowClass: q,
-		startBind: J,
-		hasPrimary: B,
-		contentBind: Y,
-		primaryBind: X,
-		hasSecondary: V,
-		secondaryBind: Z,
-		interactiveBind: K,
-		selectedIconBind: s(() => t(L.value?.selectedIcon, {}, {
-			size: "sm",
-			class: _("shrink-0", A.value?.checkClass, m(R.value, "selectedIcon"))
+		rootBind: q,
+		rowClass: X,
+		startBind: Z,
+		hasPrimary: H,
+		contentBind: Q,
+		primaryBind: $,
+		hasSecondary: U,
+		secondaryBind: ee,
+		interactiveBind: Y,
+		selectedIconBind: s(() => t(z.value?.selectedIcon, {}, {
+			...F.value ? {} : { size: "sm" },
+			class: y({
+				"block shrink-0": !0,
+				[M.value?.checkClass ?? ""]: F.value,
+				[m(B.value, "selectedIcon") ?? ""]: !0
+			})
 		})),
-		resolvedSelectedIcon: H
+		resolvedSelectedIcon: W
 	};
 }
 //#endregion
-export { b as useListItem };
+export { S as useListItem };

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

@@ -1,11 +1,12 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as r } from "../../List/listInjectionKey.js";
-import { LIST_SECTION_INJECTION_KEY as i } from "../listSectionInjectionKey.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/Utils";
+import { LISTBOX_INJECTION_KEY as i } from "../../Listbox/listboxInjectionKey.js";
+import { LIST_SECTION_INJECTION_KEY as a } from "../listSectionInjectionKey.js";
+import { computed as o, inject as s, toValue as c, useAttrs as l } from "vue";
+import { get as u, isNil as d, omit as f } from "es-toolkit/compat";
+import { cn as p, splitComponentProps as m } from "@bridge-ui/core/Utils";
 //#region src/Components/ListSection/composables/useListSection.ts
-var p = [
+var h = [
 	"as",
 	"inset",
 	"title",
@@ -13,40 +14,42 @@ var p = [
 	"classes",
 	"customProps"
 ];
-function m(m) {
-	let h = c(), g = o(r, null), _ = o(i, null), v = a(() => f({
+function g(g) {
+	let _ = l(), v = s(r, null), y = s(a, null), b = s(i, null), x = o(() => b ? c(b) : null), S = o(() => m({
 		props: {
-			...h,
-			...m
+			..._,
+			...g
 		},
-		bridgeKeys: p
-	})), { merged: y, entry: b } = t({
+		bridgeKeys: h
+	})), { merged: C, entry: w } = t({
 		componentName: "ListSection",
-		props: () => v.value.componentProps
-	}), x = a(() => y.value.customProps), S = n({
-		entry: b,
-		props: () => v.value.componentProps
-	}), C = a(() => g ? s(g).dense : !1), w = a(() => _ ? s(_).hidden : !1), T = a(() => u(v.value.inheritedAttrs, [])), E = a(() => y.value.as === "div");
+		props: () => S.value.componentProps
+	}), T = o(() => C.value.customProps), E = n({
+		entry: w,
+		props: () => S.value.componentProps
+	}), D = o(() => v ? c(v).dense : !1), O = o(() => y ? c(y).hidden : !1), k = o(() => f(S.value.inheritedAttrs, [])), A = o(() => C.value.as === "div");
 	return {
-		merged: y,
-		rootBind: a(() => e(x.value?.root, T.value, d({
-			"list-none": !0,
-			"sticky top-0 z-10 bg-white dark:bg-dark-800": y.value.sticky && !E.value,
-			[l(S.value, "root") ?? ""]: !0
+		merged: C,
+		rootBind: o(() => e(T.value?.root, k.value, p({
+			"mt-1 list-none first:mt-0": !0,
+			"sticky top-0 z-10 bg-white dark:bg-dark-800": C.value.sticky && !A.value,
+			[u(E.value, "root") ?? ""]: !0
 		}))),
-		isHidden: w,
-		titleBind: a(() => e(x.value?.title, {}, {
+		isHidden: O,
+		titleBind: o(() => e(T.value?.title, {}, {
 			role: "presentation",
-			class: d({
-				"bg-white px-2 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
+			class: p({
+				"sticky top-0 z-10 bg-white dark:bg-dark-800": C.value.sticky && A.value,
+				"px-2": d(b),
+				"py-1": d(b) && D.value,
+				"py-1.5": d(b) && !D.value,
+				[x.value?.sizeClasses?.option ?? ""]: !d(b),
+				"text-xs font-medium text-dark-500 dark:text-dark-400": !0,
+				"pl-14": C.value.inset,
+				[u(E.value, "title") ?? ""]: !0
 			})
 		}))
 	};
 }
 //#endregion
-export { m as useListSection };
+export { g as useListSection };

package/dist/Components/ListSection/listSection.types.d.ts

@@ -64,7 +64,8 @@ export interface ListSectionOwnProps {
 }
 export interface ListSectionSlots {
     /**
-     * Section label content. Overrides `title` when provided.
+     * Section label content. Overrides `title` when provided. Nested items
+     * belong as siblings of `ListSection`, not inside this slot.
      */
     default?: Slot<undefined>;
 }