@bridge-ui/vue 0.0.1-beta.5 → 0.0.1-beta.7

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 text-dark-900 dark:text-dark-100": !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

@@ -7,7 +7,6 @@ var x = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "ListItem",
 	props: {
-		align: { default: "center" },
 		as: { default: "li" },
 		classes: {},
 		customProps: {},
@@ -31,13 +30,11 @@ var x = /* @__PURE__ */ d({
 			type: Boolean,
 			default: !1
 		},
-		selectedIcon: {}
+		selectedIcon: {},
+		value: {}
 	},
 	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",
-			align: "center"
-		}, 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"));
+		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),

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

@@ -2,38 +2,32 @@ 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" | "selectedIcon">, 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<{

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

@@ -1,17 +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, isNull as p, omit as m } from "es-toolkit/compat";
-import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core";
-import { Check as v } from "@lucide/vue";
-import { alignProps as y } 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 b = [
+var S = [
 	"as",
 	"role",
-	"align",
 	"dense",
+	"value",
 	"classes",
 	"divider",
 	"primary",
@@ -22,88 +23,109 @@ var b = [
 	"interactive",
 	"selectedIcon"
 ];
-function x(t, n, x) {
-	let S = d(), C = l(o, null), w = s(() => _({
+function C(t, n, C) {
+	let w = m(), T = d(o, null), E = d(c, null), D = E != null, O = l(() => b({
 		props: {
-			...S,
+			...w,
 			...t
 		},
-		bridgeKeys: b
-	})), { merged: T, entry: E } = i({
+		bridgeKeys: S
+	})), { merged: k, entry: A } = i({
 		libDefaults: n,
 		componentName: "ListItem",
-		props: () => w.value.componentProps
-	}), D = s(() => T.value.customProps), O = a({
-		entry: E,
-		props: () => w.value.componentProps
-	}), k = s(() => "dense" in (c()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : C ? u(C).dense : !1), A = s(() => f(g(y, E.value?.customProps?.align), T.value.align)), j = s(() => e(x, "primary") || e(x, "default") || !!T.value.primary), M = s(() => e(x, "secondary") || !!T.value.secondary), N = s(() => e(x, "start")), P = s(() => !T.value.selected || p(T.value.selectedIcon) ? null : T.value.selectedIcon ?? v), F = s(() => e(x, "end") || P.value != null), I = s(() => m(w.value.inheritedAttrs, [])), L = s(() => r(D.value?.root, I.value, { class: h({
-		"list-none": !0,
-		"border-b border-black/10 last:border-b-0": T.value.divider,
-		[f(O.value, "root") ?? ""]: !0
-	}) })), R = s(() => T.value.interactive ? r(D.value?.interactive, {}, {
-		role: T.value.role,
-		tabindex: T.value.disabled ? -1 : 0,
-		"aria-disabled": T.value.disabled ? !0 : void 0,
-		"data-selected": T.value.selected ? !0 : void 0,
-		class: h({
-			"flex w-full min-w-0 gap-x-3 text-left outline-hidden transition-colors": !0,
-			"cursor-pointer select-none": !T.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 dark:border-white/10": 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 text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
+			"cursor-pointer select-none": !k.value.disabled,
 			"px-4": !0,
-			"py-2": !k.value,
-			"py-1.5": k.value,
-			"hover:bg-black/5 focus-visible:bg-black/5": !T.value.disabled,
-			"bg-primary-50 text-primary-700": T.value.selected,
-			"opacity-50 pointer-events-none": T.value.disabled,
-			[A.value ?? ""]: !0,
-			[f(O.value, "interactive") ?? ""]: !0
+			"py-2": !B.value,
+			"py-1.5": B.value,
+			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !k.value.disabled && !P.value,
+			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": 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), z = s(() => h({
+	}) : null), Y = l(() => y({
 		"flex w-full min-w-0 gap-x-3": !0,
-		"px-4": !T.value.interactive,
-		"py-2": !T.value.interactive && !k.value,
-		"py-1.5": !T.value.interactive && k.value,
-		[A.value ?? ""]: !T.value.interactive
-	})), B = s(() => r(D.value?.start, {}, { class: h({
-		"flex shrink-0": !0,
-		[f(O.value, "start") ?? ""]: !0
-	}) })), V = s(() => r(D.value?.content, {}, { class: h({
+		"items-center text-dark-900 dark:text-dark-100": !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 text-dark-600 dark:text-dark-300": !0,
+		[g(z.value, "start") ?? ""]: !0
+	}))), Z = l(() => r(R.value?.content, {}, y({
 		"min-w-0 flex-1": !0,
-		[f(O.value, "content") ?? ""]: !0
-	}) })), H = s(() => r(D.value?.primary, {}, { class: h({
-		"block truncate text-sm font-medium": !0,
-		[f(O.value, "primary") ?? ""]: !0
-	}) })), U = s(() => r(D.value?.secondary, {}, { class: h({
-		"mt-0.5 block truncate text-xs text-dark-500": !0,
-		[f(O.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 dark:text-dark-400", j.value?.sizeClasses?.secondary, g(z.value, "secondary"))));
 	return {
-		merged: T,
-		hasEnd: F,
-		endBind: s(() => r(D.value?.end, {}, { class: h({
+		merged: k,
+		hasEnd: G,
+		endBind: l(() => r(R.value?.end, {}, y({
 			"ml-auto flex shrink-0 items-center": !0,
-			[f(O.value, "end") ?? ""]: !0
-		}) })),
-		rootBind: L,
-		rowClass: z,
-		hasStart: N,
-		startBind: B,
-		hasPrimary: j,
-		contentBind: V,
-		primaryBind: H,
-		hasSecondary: M,
-		secondaryBind: U,
-		interactiveBind: R,
-		selectedIconBind: s(() => r(D.value?.selectedIcon, {}, {
+			[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: h({
-				"shrink-0": !0,
-				[f(O.value, "selectedIcon") ?? ""]: !0
-			})
+			class: y("shrink-0", j.value?.checkClass, g(z.value, "selectedIcon"))
 		})),
-		resolvedSelectedIcon: P
+		resolvedSelectedIcon: W
 	};
 }
-function S(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;
@@ -111,4 +133,4 @@ function S(r, i) {
 	return () => a;
 }
 //#endregion
-export { S as resolveListItemPrimary, x 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,8 +1,7 @@
 import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, Slot, VNode } from 'vue';
-import { ListItemAlign, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { ListboxValue, MergeHtmlProps } from '@bridge-ui/core';
 import { IconProps } from '../Icon';
-export interface ListItemAlignOverrides {}
 export interface ListItemClasses {
     /**
      * The classes to apply to the main content column.
@@ -75,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.
      *
@@ -154,6 +147,12 @@ export interface ListItemOwnProps {
      * @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-800": 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-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,

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

@@ -1,4 +1,5 @@
-import { ListboxOption, ListboxOwnProps, ListboxSlots } from './listbox.types';
+import { ListboxOption } from '@bridge-ui/core';
+import { ListboxOwnProps, ListboxSlots } from './listbox.types';
 type __VLS_Slots = ListboxSlots;
 type __VLS_Props = ListboxOwnProps;
 type __VLS_ModelProps = {
@@ -9,21 +10,23 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     select: (option: ListboxOption) => any;
     "update:modelValue": (value: boolean) => any;
     "show-change": (show: boolean) => any;
+    "registered-options-change": (options: ListboxOption[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((option: ListboxOption) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onShow-change"?: ((show: boolean) => any) | undefined;
+    "onRegistered-options-change"?: ((options: ListboxOption[]) => any) | undefined;
 }>, {
     color: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxColor, import('./listbox.types').ListboxColorOverrides>;
     size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxSize, import('./listbox.types').ListboxSizeOverrides>;
     loading: boolean;
     multiple: boolean;
     disableAutoFocus: boolean;
-    placement: import('@floating-ui/utils').Placement;
     emptyMessage: string;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
     loadingMessage: string;
+    placement: import('@floating-ui/utils').Placement;
     showCheckmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;