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

package/dist/Components/Divider/composables/useDivider.js

@@ -30,7 +30,7 @@ function f(f, p) {
 			role: "separator",
 			"aria-orientation": g.value.orientation,
 			class: o({
-				"m-0 shrink-0 border-0 border-solid": !0,
+				"m-0 shrink-0 border-0": !0,
 				[y.value ?? ""]: !0,
 				[b.value ?? ""]: !0,
 				[v.value.root ?? ""]: !0

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

@@ -1,6 +1,5 @@
 import { ListOwnProps } from './list.types';
 declare const __VLS_export: import('vue').DefineComponent<ListOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListOwnProps> & Readonly<{}>, {
-    padding: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListPadding, import('./list.types').ListPaddingOverrides>;
     as: "ol" | "ul" | "nav";
     dense: boolean;
     nested: boolean;

package/dist/Components/List/List.vue_vue_type_script_setup_true_lang.js

@@ -16,11 +16,10 @@ var f = /* @__PURE__ */ i({
 		nested: {
 			type: Boolean,
 			default: !1
-		},
-		padding: { default: "normal" }
+		}
 	},
 	setup(i) {
-		let f = u(), { merged: p, rootBind: m } = t(i, { padding: "normal" }), h = n(() => p.value.as ?? "ul");
+		let f = u(), { merged: p, rootBind: m } = t(i), h = n(() => p.value.as ?? "ul");
 		return (t, n) => (s(), r(c(h.value), o(a(l(m))), {
 			default: d(() => [(s(), r(c(l(e)(l(f), "default"))))]),
 			_: 1

package/dist/Components/List/composables/useList.d.ts

@@ -1,11 +1,5 @@
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
 import { ListOwnProps, ListProps } from '../list.types';
-type ListLibDefaults = LibDefaultsShape<ListOwnProps, "padding">;
-type ListMerged = MergeLibDefaults<ListOwnProps, ListLibDefaults>;
-export declare function useList(props: ListOwnProps, libDefaults: ListLibDefaults): {
-    merged: import('vue').ComputedRef<ListMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
-        class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListProps, "classes" | "customProps" | "padding" | "as" | "dense" | "nested">, never>>>;
+export declare function useList(props: ListOwnProps): {
+    merged: import('vue').ComputedRef<ListOwnProps>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListProps, "classes" | "customProps" | "as" | "dense" | "nested">, never>>>;
 };
-export {};

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

@@ -2,43 +2,39 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
 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, mergeBridgeUILayeredClasses as u, splitComponentProps as d } from "@bridge-ui/core";
-import { paddingProps as f } from "@bridge-ui/core/Components/List";
+import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
 //#region src/Components/List/composables/useList.ts
-var p = [
+var d = [
 	"as",
 	"dense",
 	"nested",
 	"classes",
-	"padding",
 	"customProps"
 ];
-function m(m, h) {
-	let g = o(), _ = i(() => d({
-		bridgeKeys: p,
+function f(f) {
+	let p = o(), m = i(() => u({
+		bridgeKeys: d,
 		props: {
-			...g,
-			...m
+			...p,
+			...f
 		}
-	})), { merged: v, entry: y } = t({
-		libDefaults: h,
+	})), { merged: h, entry: g } = t({
 		componentName: "List",
-		props: () => _.value.componentProps
-	}), b = i(() => v.value.customProps), x = n({
-		entry: y,
-		props: () => _.value.componentProps
+		props: () => m.value.componentProps
+	}), _ = i(() => h.value.customProps), v = n({
+		entry: g,
+		props: () => m.value.componentProps
 	});
-	a(r, i(() => ({ dense: v.value.dense === !0 })));
-	let S = i(() => s(u(f, y.value?.customProps?.padding), v.value.padding)), C = i(() => c(_.value.inheritedAttrs, []));
+	a(r, i(() => ({ dense: h.value.dense === !0 })));
+	let y = i(() => c(m.value.inheritedAttrs, []));
 	return {
-		merged: v,
-		rootBind: i(() => e(b.value?.root, C.value, { class: l({
-			"m-0 list-none": !0,
-			[S.value ?? ""]: !0,
-			"pl-4": v.value.nested,
-			[s(x.value, "root") ?? ""]: !0
-		}) }))
+		merged: h,
+		rootBind: i(() => e(_.value?.root, y.value, l({
+			"m-0 list-none py-2": !0,
+			"pl-4": h.value.nested,
+			[s(v.value, "root") ?? ""]: !0
+		})))
 	};
 }
 //#endregion
-export { m as useList };
+export { f as useList };

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

@@ -1,5 +1,5 @@
 export { useList } from './composables/useList';
-export type { ListClasses, ListCustomProps, ListOwnProps, ListPaddingOverrides, ListProps, } from './list.types';
+export type { ListClasses, ListCustomProps, ListOwnProps, ListProps, } from './list.types';
 export { default as List } from './List.vue';
 export { LIST_INJECTION_KEY } from './listInjectionKey';
 export type { ListContextValue } from './listInjectionKey';

package/dist/Components/List/list.types.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'vue';
-import { ListPadding, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
-export interface ListPaddingOverrides {}
+import { MergeHtmlProps } from '@bridge-ui/core';
 export interface ListClasses {
     /**
      * The classes to apply to the root.
@@ -47,11 +46,5 @@ export interface ListOwnProps {
      * @default false
      */
     nested?: boolean;
-    /**
-     * Root padding preset. Use `"none"` inside menus/cards (MUI `disablePadding`).
-     *
-     * @default "normal"
-     */
-    padding?: MergeProps<ListPadding, ListPaddingOverrides>;
 }
 export type ListProps = MergeHtmlProps<ListOwnProps, HTMLAttributes>;

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

@@ -4,7 +4,6 @@ declare const __VLS_base: import('vue').DefineComponent<ListItemOwnProps, {}, {}
     role: "button" | "option" | "menuitem";
     as: "li" | "div";
     disabled: boolean;
-    align: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListItemAlign, import('./listItem.types').ListItemAlignOverrides>;
     divider: boolean;
     interactive: boolean;
     selected: boolean;

package/dist/Components/ListItem/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,12 @@
-import { resolveNamedSlot as e, resolveSlotOrProp as t } from "../../Utils/slotOrProp.js";
-import { resolveListItemPrimary as n, useListItem as r } from "./composables/useListItem.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as d, normalizeClass as f, normalizeProps as p, openBlock as m, resolveDynamicComponent as h, unref as g, useSlots as _, withCtx as v } from "vue";
+import { hasNamedSlot as e, resolveNamedSlot as t, resolveSlotOrProp as n } from "../../Utils/slotOrProp.js";
+import r from "../Icon/Icon.js";
+import { resolveListItemPrimary as i, useListItem as a } from "./composables/useListItem.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, resolveDynamicComponent as _, unref as v, useSlots as y, withCtx as b } from "vue";
 //#region src/Components/ListItem/ListItem.vue?vue&type=script&setup=true&lang.ts
-var y = /* @__PURE__ */ l({
+var x = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "ListItem",
 	props: {
-		align: { default: "center" },
 		as: { default: "li" },
 		classes: {},
 		customProps: {},
@@ -29,29 +29,28 @@ var y = /* @__PURE__ */ l({
 		selected: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		selectedIcon: {},
+		value: {}
 	},
-	setup(l) {
-		let y = _(), b = l, { merged: x, hasEnd: S, endBind: C, rootBind: w, rowClass: T, hasStart: E, startBind: D, hasPrimary: O, contentBind: k, primaryBind: A, hasSecondary: j, secondaryBind: M, interactiveBind: N } = r(b, {
-			role: "button",
-			align: "center"
-		}, y), P = i(() => x.value.as ?? "li"), F = i(() => n(y, b.primary)), I = i(() => t(y, "secondary", b.secondary));
-		return (t, n) => (m(), a(h(P.value), p(u(g(w))), {
-			default: v(() => [g(N) ? (m(), s("div", p(d({ key: 0 }, g(N))), [c("div", { class: f(g(T)) }, [
-				g(E) ? (m(), s("div", p(d({ key: 0 }, g(D))), [(m(), a(h(g(e)(g(y), "start"))))], 16)) : o("", !0),
-				c("div", p(u(g(k))), [g(O) ? (m(), s("span", p(d({ key: 0 }, g(A))), [(m(), a(h(F.value)))], 16)) : o("", !0), g(j) ? (m(), s("span", p(d({ key: 1 }, g(M))), [(m(), a(h(I.value)))], 16)) : o("", !0)], 16),
-				g(S) ? (m(), s("div", p(d({ key: 1 }, g(C))), [(m(), a(h(g(e)(g(y), "end"))))], 16)) : o("", !0)
-			], 2)], 16)) : (m(), s("div", {
+	setup(d) {
+		let x = y(), S = d, { merged: C, hasEnd: w, endBind: T, rootBind: E, rowClass: D, hasStart: O, startBind: k, hasPrimary: A, contentBind: j, primaryBind: M, hasSecondary: N, secondaryBind: P, interactiveBind: F, selectedIconBind: I, resolvedSelectedIcon: L } = a(S, { role: "button" }, x), R = o(() => C.value.as ?? "li"), z = o(() => i(x, S.primary)), B = o(() => n(x, "secondary", S.secondary)), V = o(() => e(x, "end"));
+		return (e, n) => (g(), s(_(R.value), h(f(v(E))), {
+			default: b(() => [v(F) ? (g(), l("div", h(p({ key: 0 }, v(F))), [u("div", { class: m(v(D)) }, [
+				v(O) ? (g(), l("div", h(p({ key: 0 }, v(k))), [(g(), s(_(v(t)(v(x), "start"))))], 16)) : c("", !0),
+				u("div", h(f(v(j))), [v(A) ? (g(), l("span", h(p({ key: 0 }, v(M))), [(g(), s(_(z.value)))], 16)) : c("", !0), v(N) ? (g(), l("span", h(p({ key: 1 }, v(P))), [(g(), s(_(B.value)))], 16)) : c("", !0)], 16),
+				v(w) ? (g(), l("div", h(p({ key: 1 }, v(T))), [V.value ? (g(), s(_(v(t)(v(x), "end")), { key: 0 })) : v(L) ? (g(), s(r, p({ key: 1 }, v(I), { icon: v(L) }), null, 16, ["icon"])) : c("", !0)], 16)) : c("", !0)
+			], 2)], 16)) : (g(), l("div", {
 				key: 1,
-				class: f(g(T))
+				class: m(v(D))
 			}, [
-				g(E) ? (m(), s("div", p(d({ key: 0 }, g(D))), [(m(), a(h(g(e)(g(y), "start"))))], 16)) : o("", !0),
-				c("div", p(u(g(k))), [g(O) ? (m(), s("span", p(d({ key: 0 }, g(A))), [(m(), a(h(F.value)))], 16)) : o("", !0), g(j) ? (m(), s("span", p(d({ key: 1 }, g(M))), [(m(), a(h(I.value)))], 16)) : o("", !0)], 16),
-				g(S) ? (m(), s("div", p(d({ key: 1 }, g(C))), [(m(), a(h(g(e)(g(y), "end"))))], 16)) : o("", !0)
+				v(O) ? (g(), l("div", h(p({ key: 0 }, v(k))), [(g(), s(_(v(t)(v(x), "start"))))], 16)) : c("", !0),
+				u("div", h(f(v(j))), [v(A) ? (g(), l("span", h(p({ key: 0 }, v(M))), [(g(), s(_(z.value)))], 16)) : c("", !0), v(N) ? (g(), l("span", h(p({ key: 1 }, v(P))), [(g(), s(_(B.value)))], 16)) : c("", !0)], 16),
+				v(w) ? (g(), l("div", h(p({ key: 1 }, v(T))), [V.value ? (g(), s(_(v(t)(v(x), "end")), { key: 0 })) : v(L) ? (g(), s(r, p({ key: 1 }, v(I), { icon: v(L) }), null, 16, ["icon"])) : c("", !0)], 16)) : c("", !0)
 			], 2))]),
 			_: 1
 		}, 16));
 	}
 });
 //#endregion
-export { y as default };
+export { x as default };

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

@@ -1,40 +1,40 @@
+import { LucideIcon } from '@lucide/vue';
 import { useSlots, Slot } from 'vue';
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
 import { ListItemOwnProps, ListItemProps } from '../listItem.types';
-type ListItemLibDefaults = LibDefaultsShape<ListItemOwnProps, "role" | "align">;
+type ListItemLibDefaults = LibDefaultsShape<ListItemOwnProps, "role">;
 type ListItemMerged = MergeLibDefaults<ListItemOwnProps, ListItemLibDefaults>;
 export declare function useListItem(props: ListItemOwnProps, libDefaults: ListItemLibDefaults, slots: ReturnType<typeof useSlots>): {
     merged: import('vue').ComputedRef<ListItemMerged>;
     hasEnd: import('vue').ComputedRef<boolean>;
-    endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
-        class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "classes" | "customProps" | "primary" | "secondary" | "as" | "disabled" | "dense" | "align" | "divider" | "interactive" | "selected">, never>>>;
+        id: string | undefined;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "as" | "disabled" | "dense" | "divider" | "interactive" | "selected" | "selectedIcon">, never>>>;
     rowClass: import('vue').ComputedRef<string>;
     hasStart: import('vue').ComputedRef<boolean>;
-    startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
-        class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     hasPrimary: import('vue').ComputedRef<boolean>;
-    contentBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
-        class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    primaryBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
-        class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    primaryBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     hasSecondary: import('vue').ComputedRef<boolean>;
-    secondaryBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
-        class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    secondaryBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     interactiveBind: import('vue').ComputedRef<({
+        "aria-disabled": boolean | undefined;
         role: NonNullable<"button" | "option" | "menuitem" | undefined>;
         tabindex: number;
-        "aria-disabled": boolean | undefined;
         "data-selected": boolean | undefined;
+        "aria-selected": boolean | undefined;
+        onMousedown: ((event: MouseEvent) => void) | undefined;
+        onClick: (() => void) | undefined;
         class: string;
     } & object & Record<"class", string>) | null>;
+    selectedIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        size: "sm";
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    resolvedSelectedIcon: import('vue').ComputedRef<LucideIcon | null>;
 };
 export declare function resolveListItemPrimary(slots: ReturnType<typeof useSlots>, primary?: string): Slot | (() => null | string);
 export {};

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

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

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

@@ -1,3 +1,3 @@
 export { useListItem } from './composables/useListItem';
-export type { ListItemAlignOverrides, ListItemClasses, ListItemCustomProps, ListItemOwnProps, ListItemProps, ListItemSlots, } from './listItem.types';
+export type { ListItemClasses, ListItemCustomProps, ListItemOwnProps, ListItemProps, ListItemSlots, } from './listItem.types';
 export { default as ListItem } from './ListItem.vue';

package/dist/Components/ListItem/listItem.types.d.ts

@@ -1,6 +1,7 @@
+import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, Slot, VNode } from 'vue';
-import { ListItemAlign, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
-export interface ListItemAlignOverrides {}
+import { ListboxValue, MergeHtmlProps } from '@bridge-ui/core';
+import { IconProps } from '../Icon';
 export interface ListItemClasses {
     /**
      * The classes to apply to the main content column.
@@ -26,6 +27,10 @@ export interface ListItemClasses {
      * The classes to apply to the secondary text.
      */
     secondary?: string;
+    /**
+     * The classes to apply to the selected icon.
+     */
+    selectedIcon?: string;
     /**
      * The classes to apply to the leading slot.
      */
@@ -56,6 +61,10 @@ export interface ListItemCustomProps {
      * Props forwarded to the secondary text.
      */
     secondary?: HTMLAttributes;
+    /**
+     * Props forwarded to the default selected `Icon` (`icon` is set by the item).
+     */
+    selectedIcon?: Partial<Omit<IconProps, "icon">>;
     /**
      * Props forwarded to the leading slot wrapper.
      */
@@ -65,12 +74,6 @@ export interface ListItemCustomProps {
  * List row (MUI `ListItem` / `ListItemButton`-like).
  */
 export interface ListItemOwnProps {
-    /**
-     * Vertical alignment of start/content/end slots.
-     *
-     * @default "center"
-     */
-    align?: MergeProps<ListItemAlign, ListItemAlignOverrides>;
     /**
      * The element to render as.
      *
@@ -137,6 +140,19 @@ export interface ListItemOwnProps {
      * @default false
      */
     selected?: boolean;
+    /**
+     * The icon shown when `selected` is true. Use `null` to hide it.
+     * The `end` slot replaces this icon when provided.
+     *
+     * @default Check
+     */
+    selectedIcon?: null | LucideIcon;
+    /**
+     * When set inside a `Listbox`, registers this row as a selectable option.
+     *
+     * @default undefined
+     */
+    value?: ListboxValue;
 }
 export type ListItemPrimaryContent = VNode | string | VNode[] | undefined;
 export interface ListItemSlots {

package/dist/Components/ListSection/composables/useListSection.d.ts

@@ -3,9 +3,7 @@ import { ListSectionOwnProps, ListSectionProps } from '../listSection.types';
 export declare function useListSection(props: ListSectionOwnProps, slots: ReturnType<typeof useSlots>): {
     label: import('vue').ComputedRef<import('vue').Slot | (() => null | import('vue').VNodeChild)>;
     merged: import('vue').ComputedRef<ListSectionOwnProps>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
-        class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListSectionProps, "classes" | "customProps" | "title" | "as" | "inset" | "sticky">, never>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListSectionProps, "classes" | "customProps" | "title" | "as" | "inset" | "sticky">, never>>>;
     titleBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         role: string;
         class: string;

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

@@ -26,19 +26,20 @@ 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, []));
+	}), 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");
 	return {
 		label: w,
 		merged: y,
-		rootBind: a(() => t(x.value?.root, T.value, { class: d({
+		rootBind: a(() => t(x.value?.root, T.value, d({
 			"list-none": !0,
+			"sticky top-0 z-10 bg-white dark:bg-dark-950": y.value.sticky && !E.value,
 			[l(S.value, "root") ?? ""]: !0
-		}) })),
+		}))),
 		titleBind: a(() => t(x.value?.title, {}, {
 			role: "presentation",
 			class: d({
-				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase": !0,
-				"sticky top-0 z-10": y.value.sticky,
+				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-950 dark:text-dark-400": !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,