bitboss-ui 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/components/CommonTimeSelector/CommonTimeSelector.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,207 @@
+import e from "../BbBaseButton/BbBaseButton.vue.js";
+import { useLocale as t } from "../../composables/useLocale.js";
+import { useTypeahead as n } from "../../composables/useTypeahead.js";
+import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeProps as u, nextTick as d, normalizeClass as f, onMounted as p, openBlock as m, renderList as h, toDisplayString as g, watch as _, withCtx as v } from "vue";
+//#region src/components/CommonTimeSelector/CommonTimeSelector.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "bb-time-selector" }, b = { class: "bb-time-selector__columns" }, x = ["aria-label", "onKeydown"], S = {
+	"aria-hidden": "true",
+	class: "bb-time-selector__header"
+}, C = "––", w = /*@__PURE__*/ l({
+	__name: "CommonTimeSelector",
+	props: {
+		passthrough: {},
+		hour: {},
+		minute: {},
+		second: {},
+		meridiem: {},
+		seconds: { type: Boolean },
+		ampm: { type: Boolean },
+		step: {},
+		disabled: { type: Boolean }
+	},
+	emits: ["select"],
+	setup(l, { emit: w }) {
+		let T = l, E = w, { t: D } = t(), O = {}, k = (e, t) => t === "PM" ? e === 12 ? 12 : e + 12 : e === 12 ? 0 : e, A = i(() => T.meridiem === "PM" ? "PM" : T.meridiem === "AM" ? "AM" : T.hour && parseInt(T.hour, 10) >= 12 ? "PM" : "AM"), j = (e) => {
+			if (e === "hour") {
+				if (!T.hour) return null;
+				let e = parseInt(T.hour, 10);
+				if (!T.ampm) return e;
+				let t = e % 12;
+				return t === 0 && (t = 12), t;
+			}
+			let t = T[e];
+			return t ? parseInt(t, 10) : null;
+		}, M = (e, t) => {
+			let n = j(e);
+			return t.map((e) => {
+				let t = String(e).padStart(2, "0");
+				return {
+					value: e,
+					text: t,
+					selected: n === e,
+					tokens: [String(e), t]
+				};
+			});
+		}, N = i(() => {
+			let e = Math.max(1, Math.floor(T.step ?? 1)), t = [];
+			for (let n = 0; n < 60; n += e) t.push(n);
+			return t;
+		}), P = i(() => {
+			let e = D(T.seconds ? "datePickerInput.timeFormatSeconds" : "datePickerInput.timeFormat").value.split(":");
+			return {
+				hour: e[0] ?? "HH",
+				minute: e[1] ?? "MM",
+				second: e[2] ?? "SS"
+			};
+		}), F = i(() => {
+			let e = [{
+				unit: "hour",
+				header: P.value.hour,
+				ariaLabel: D("datePicker.hoursLabel").value,
+				options: M("hour", T.ampm ? Array.from({ length: 12 }, (e, t) => t + 1) : Array.from({ length: 24 }, (e, t) => t))
+			}, {
+				unit: "minute",
+				header: P.value.minute,
+				ariaLabel: D("datePicker.minutesLabel").value,
+				options: M("minute", N.value)
+			}];
+			return T.seconds && e.push({
+				unit: "second",
+				header: P.value.second,
+				ariaLabel: D("datePicker.secondsLabel").value,
+				options: M("second", Array.from({ length: 60 }, (e, t) => t))
+			}), T.ampm && e.push({
+				unit: "meridiem",
+				header: "\xA0",
+				ariaLabel: D("datePickerInput.meridiemField").value,
+				options: ["AM", "PM"].map((e) => ({
+					value: e,
+					text: e,
+					selected: !!T.hour && A.value === e,
+					tokens: [e.toLowerCase(), e[0].toLowerCase()]
+				}))
+			}), e;
+		}), I = i(() => {
+			let e = j("hour"), t = [e === null ? C : String(e).padStart(2, "0"), T.minute ? T.minute.padStart(2, "0") : C];
+			T.seconds && t.push(T.second ? T.second.padStart(2, "0") : C);
+			let n = t.join(":");
+			return T.ampm && (n += ` ${T.hour ? A.value : C}`), n;
+		}), L = i(() => !T.hour && !T.minute), R = (e, t) => {
+			if (e.unit === "hour" && T.ampm) {
+				let e = k(t.value, A.value);
+				E("select", {
+					unit: "hour",
+					value: String(e).padStart(2, "0")
+				});
+				return;
+			}
+			if (e.unit === "meridiem") {
+				E("select", {
+					unit: "meridiem",
+					value: String(t.value)
+				});
+				return;
+			}
+			E("select", {
+				unit: e.unit,
+				value: String(t.value).padStart(2, "0")
+			});
+		}, z = () => typeof window < "u" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, B = (e, t, n) => {
+			e.scrollTo({
+				top: t,
+				behavior: n && !z() ? "smooth" : "auto"
+			});
+		}, V = (e, t = !1) => {
+			let n = O[e];
+			if (!n) return;
+			let r = F.value.find((t) => t.unit === e);
+			if (!r) return;
+			let i = r.options.find((e) => e.selected), a = Array.from(n.querySelectorAll("[data-value]"));
+			if (!a.length) return;
+			let o;
+			if (i) o = a.find((e) => e.dataset.value === String(i.value));
+			else if (e === "minute" && T.minute) {
+				let e = parseInt(T.minute, 10);
+				o = a.reduce((t, n) => {
+					let r = (t) => Math.abs(parseInt(t.dataset.value ?? "0", 10) - e);
+					return r(n) < r(t) ? n : t;
+				});
+			}
+			if (!o) {
+				B(n, 0, t);
+				return;
+			}
+			let s = o.offsetHeight || 1, c = o.offsetTop - n.offsetTop - n.clientHeight / 2 + o.offsetHeight / 2;
+			B(n, Math.round(c / s) * s, t);
+		}, H = (e = !1) => {
+			for (let t of F.value) V(t.unit, e);
+		};
+		p(() => d(() => H(!1))), _(() => [
+			T.hour,
+			T.minute,
+			T.second,
+			T.meridiem
+		], () => d(() => H(!0)));
+		let U = [
+			0,
+			1,
+			2,
+			3
+		].map((e) => n({
+			candidates: () => F.value[e]?.options ?? [],
+			getTokens: (e) => e.tokens,
+			getCurrent: () => F.value[e]?.options.find((e) => e.selected),
+			onMatch: (t) => W(F.value[e].unit, String(t.value)),
+			onCommit: (t) => R(F.value[e], t),
+			locale: () => "en"
+		}).onKeydown), W = (e, t) => {
+			let n = O[e]?.querySelector(`[data-value="${t}"]`);
+			n?.focus(), n?.scrollIntoView({ block: "nearest" });
+		}, G = (e, t) => {
+			if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+				t.preventDefault();
+				let n = O[e.unit];
+				if (!n) return;
+				let r = Array.from(n.querySelectorAll("[data-value]")), i = document.activeElement, a = r.findIndex((e) => e === i), o = t.key === "ArrowDown" ? r[Math.min(a + 1, r.length - 1)] : r[Math.max(a - 1, 0)];
+				o?.focus(), o?.scrollIntoView({ block: "nearest" });
+				return;
+			}
+			let n = F.value.findIndex((t) => t.unit === e.unit);
+			U[n]?.(t);
+		};
+		return (t, n) => (m(), o("div", y, [s("div", {
+			"aria-hidden": "true",
+			class: f(["bb-time-selector__readout", { "bb-time-selector__readout--empty": L.value }])
+		}, g(I.value), 3), s("div", b, [(m(!0), o(r, null, h(F.value, (n) => (m(), o("div", {
+			key: n.unit,
+			"aria-label": n.ariaLabel,
+			class: f(["bb-time-selector__column", `bb-time-selector__column--${n.unit}`]),
+			role: "group",
+			onKeydown: (e) => G(n, e)
+		}, [s("div", S, g(n.header), 1), s("div", {
+			ref_for: !0,
+			ref: (e) => O[n.unit] = e,
+			class: "bb-time-selector__scroll",
+			"data-bb-no-drag": ""
+		}, [(m(!0), o(r, null, h(n.options, (r) => (m(), a(e, u({
+			key: r.value,
+			"aria-pressed": r.selected,
+			class: ["bb-time-selector__btn", { "bb-time-selector__btn--selected": r.selected }],
+			"data-value": r.value,
+			disabled: t.disabled,
+			onClick: (e) => R(n, r),
+			ref_for: !0
+		}, t.passthrough?.part?.("item", { selected: r.selected })), {
+			default: v(() => [c(g(r.text), 1)]),
+			_: 2
+		}, 1040, [
+			"aria-pressed",
+			"class",
+			"data-value",
+			"disabled",
+			"onClick"
+		]))), 128))], 512)], 42, x))), 128))])]));
+	}
+});
+//#endregion
+export { w as default };

package/dist/components/CommonTimeSelector/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * One column of the shared time rail (`CommonTimeSelector`): the unit a
+ * `select` / `time-pick` payload carries. Used by BbDatePicker, BbTimePicker
+ * and BbTimePickerInput.
+ */
+export type TimeUnit = 'hour' | 'minute' | 'second' | 'meridiem';

package/dist/components/FlatListBox/FlatListBox.vue_vue_type_script_setup_true_lang.js

@@ -1,174 +1,237 @@
-import { transitions as e } from "../../utilities/misc/transitions.js";
-import { useTouchRowLadder as t } from "../../composables/useSheetSurface.js";
-import n from "../BbIcon/BbIcon.vue.js";
-import { isNil as r } from "../../utilities/functions/isNil.js";
-import i from "../../assets/svgs/check_stroke.svg_raw.js";
-import { useLocale as a } from "../../composables/useLocale.js";
-import { hash as o } from "../../utilities/functions/hash.js";
+import { isNil as e } from "../../utilities/functions/isNil.js";
+import { transitions as t } from "../../utilities/misc/transitions.js";
+import { useTouchRowLadder as n } from "../../composables/useSheetSurface.js";
+import { useLocale as r } from "../../composables/useLocale.js";
+import i from "../BbIcon/BbIcon.vue.js";
+import ee from "../../assets/svgs/check_stroke.svg_raw.js";
+import { hash as a } from "../../utilities/functions/hash.js";
+import { listboxOptionFontSize as te, listboxOptionHeight as o } from "../../utilities/misc/listboxMetrics.js";
 import { isNotNil as s } from "../../utilities/functions/isNotNil.js";
 import { useListboxFocus as c } from "../../composables/useListboxFocus.js";
-import { listboxOptionFontSize as l, listboxOptionHeight as ee } from "../../utilities/misc/listboxMetrics.js";
-import { Fragment as u, computed as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, openBlock as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, useId as T, useTemplateRef as E, watch as D, withModifiers as O } from "vue";
-import { useVirtualizer as k } from "@tanstack/vue-virtual";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as ne, defineComponent as g, mergeProps as _, normalizeClass as v, normalizeStyle as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, useId as re, useSlots as ie, useTemplateRef as E, watch as D, withModifiers as O } from "vue";
+import { useVirtualizer as ae } from "@tanstack/vue-virtual";
 //#region src/components/FlatListBox/FlatListBox.vue?vue&type=script&setup=true&lang.ts
-var A = { class: "bb-listbox__outer-container scrollbar-border" }, te = {
+var oe = { class: "bb-listbox__outer-container scrollbar-border" }, se = {
 	ref: "inner",
 	class: "bb-listbox__inner-container",
 	tabindex: "-1"
-}, ne = {
+}, ce = {
 	key: 0,
 	class: "bb-listbox__loading"
-}, re = {
+}, le = {
 	key: 1,
 	class: "bb-listbox__no-data"
-}, ie = [
+}, ue = [
 	"id",
 	"aria-activedescendant",
 	"aria-multiselectable"
-], j = [
+], de = [
 	"id",
+	"aria-describedby",
 	"aria-disabled",
+	"aria-labelledby",
 	"aria-posinset",
 	"aria-selected",
 	"aria-setsize",
 	"data-index",
 	"onMouseenter"
-], M = { class: "bb-listbox__option-label" }, N = /*@__PURE__*/ g({
+], fe = {
+	key: 0,
+	class: "bb-listbox__option-content"
+}, k = ["id"], A = ["id"], j = /*@__PURE__*/ g({
 	__name: "FlatListBox",
 	props: {
+		passthrough: {},
 		id: {},
 		compact: { type: Boolean },
 		options: {},
 		open: { type: Boolean },
 		loading: { type: Boolean },
 		multiple: { type: Boolean },
-		transitionDuration: { default: e.medium },
+		transitionDuration: { default: t.medium },
 		loadingText: {},
 		noDataText: {},
-		optionHeight: {}
+		optionHeight: {},
+		described: { type: Boolean }
 	},
 	emits: [
 		"option:selected",
 		"option:unselected",
 		"focused:change"
 	],
-	setup(e, { expose: g, emit: N }) {
-		let P = e, F = N, { t: I } = a(), L = E("inner"), R = E("listbox"), { touch: z } = t(), B = d(() => P.optionHeight ? P.optionHeight : ee(z.value, !!P.compact)), V = d(() => l(z.value)), H = k({
+	setup(t, { expose: g, emit: j }) {
+		let M = t, N = j, P = ie(), { t: F } = r(), I = E("inner"), L = E("listbox"), { touch: R } = n(), z = u(() => M.optionHeight ? M.optionHeight : o(R.value, !!M.compact, !!M.described)), B = u(() => te(R.value)), V = ae({
 			get count() {
-				return P.options.length;
+				return M.options.length;
 			},
-			getScrollElement: () => L.value ?? null,
-			estimateSize: () => B.value,
+			getScrollElement: () => I.value ?? null,
+			estimateSize: () => z.value,
 			overscan: 5
-		}), U = d(() => H.value.getVirtualItems()), W = d(() => H.value.getTotalSize()), G = d(() => P.options.map((e, t) => ({
+		}), pe = u(() => V.value.getVirtualItems()), me = u(() => V.value.getTotalSize()), H = u(() => M.options.map((e, t) => ({
 			index: t,
 			text: e.text,
+			description: e.description,
+			"prepend:icon": e["prepend:icon"],
+			"append:icon": e["append:icon"],
 			value: e.value,
 			valueHash: e.valueHash,
 			item: e.item,
 			selected: !!e.selected,
 			disabled: !!e.disabled
-		}))), K = T(), q = (e) => `${K}-listbox-option-${e}`, J = d(() => {
-			if (r(X.value)) return;
-			let e = G.value[X.value];
-			if (e) return q(e.valueHash);
-		}), Y = d(() => G.value.length > 0), { focusedIndex: X, focusNext: ae, focusPrevious: oe, focusFirst: se, focusLast: ce, focusFirstSelected: le, focusLastSelected: ue, focusByHash: de, focusByPointer: fe, blurPointerFocus: pe, blur: Z, getHighlighted: me } = c(() => P.options, { disabled: () => !P.open }), Q = b(!1);
-		D(X, (e) => {
-			L.value && s(e) && !Q.value && H.value.scrollToIndex(e, { align: "center" }), Q.value = !1, F("focused:change", J.value);
+		}))), he = re(), U = (e) => `${he}-listbox-option-${e}`, W = (e) => `${U(e)}__label`, G = (e) => `${U(e)}__description`, K = (e) => !!e && !P.option, q = u(() => {
+			if (e(Y.value)) return;
+			let t = H.value[Y.value];
+			if (t) return U(t.valueHash);
+		}), J = u(() => H.value.length > 0), { focusedIndex: Y, focusNext: ge, focusPrevious: _e, focusFirst: ve, focusLast: ye, focusFirstSelected: be, focusLastSelected: xe, focusByHash: Se, focusByPointer: Ce, blurPointerFocus: X, blur: Z, getHighlighted: we } = c(() => M.options, { disabled: () => !M.open }), Q = x(!1);
+		D(Y, (e) => {
+			I.value && s(e) && !Q.value && V.value.scrollToIndex(e, { align: "center" }), Q.value = !1, N("focused:change", q.value);
 		});
-		let he = (e) => {
-			P.open && (Q.value = !0, fe(e));
-		}, ge = () => {
-			pe();
+		let Te = (e) => {
+			M.open && (Q.value = !0, Ce(e));
+		}, Ee = () => {
+			X();
 		}, $ = () => {
-			if (r(X.value) || !P.open) return;
-			let e = G.value[X.value];
-			e.disabled || (e.selected ? F("option:unselected", e) : F("option:selected", e));
-		}, _e = (e) => {
-			if (e.preventDefault(), L.value && e.target instanceof HTMLElement && R.value) {
-				let t = e.target, n = t.dataset.index;
-				for (; r(n) && t.parentElement;) t = t.parentElement, n = t.dataset.index;
-				if (n) {
-					let e = G.value[+n];
-					e && !e.disabled && (X.value = +n, $());
+			if (e(Y.value) || !M.open) return;
+			let t = H.value[Y.value];
+			t.disabled || (t.selected ? N("option:unselected", t) : N("option:selected", t));
+		}, De = (t) => {
+			if (t.preventDefault(), I.value && t.target instanceof HTMLElement && L.value) {
+				let n = t.target, r = n.dataset.index;
+				for (; e(r) && n.parentElement;) n = n.parentElement, r = n.dataset.index;
+				if (r) {
+					let e = H.value[+r];
+					e && !e.disabled && (Y.value = +r, $());
 				}
 			}
 		};
-		return D(() => P.options, (e, t) => {
-			o(e.map((e) => e.valueHash)) !== o(t.map((e) => e.valueHash)) && (H.value.measure(), Z());
-		}, { flush: "post" }), D(B, () => {
-			H.value.measure();
+		return D(() => M.options, (e, t) => {
+			a(e.map((e) => e.valueHash)) !== a(t.map((e) => e.valueHash)) && (V.value.measure(), Z());
+		}, { flush: "post" }), D(z, () => {
+			V.value.measure();
 		}, { flush: "post" }), g({
-			focusNext: ae,
-			focusPrevious: oe,
-			focusFirst: se,
-			focusFirstSelected: le,
-			focusLast: ce,
-			focusLastSelected: ue,
+			focusNext: ge,
+			focusPrevious: _e,
+			focusFirst: ve,
+			focusFirstSelected: be,
+			focusLast: ye,
+			focusLastSelected: xe,
 			blur: Z,
 			confirmOption: $,
-			focusByHash: de,
-			getHighlighted: me,
-			getActiveDescendantId: () => J.value
-		}), (e, t) => (y(), f("span", {
-			class: _(["bb-listbox", {
+			focusByHash: Se,
+			getHighlighted: we,
+			getActiveDescendantId: () => q.value
+		}), (e, t) => (b(), p("span", {
+			class: v(["bb-listbox", {
 				"bb-listbox--compact": e.compact,
+				"bb-listbox--described": e.described,
 				"bb-listbox--loading": e.loading,
 				"bb-listbox--multiple": e.multiple,
-				"bb-listbox--no-data": !Y.value,
+				"bb-listbox--no-data": !J.value,
 				"bb-listbox--open": e.open
 			}]),
-			style: v({
+			style: y({
 				"--transition-duration": `${e.transitionDuration}ms`,
-				"--option-height": `${B.value}px`,
-				"--option-font-size": V.value
+				"--option-height": `${z.value}px`,
+				"--option-font-size": B.value
 			}),
-			onClick: O(_e, ["stop"]),
-			onMousedown: t[0] ||= O(() => {}, ["prevent"])
-		}, [p("span", A, [p("span", te, [
-			S(e.$slots, "options:prepend"),
-			e.loading && !Y.value ? (y(), f("span", ne, [S(e.$slots, "loading", {}, () => [m(C(e.loadingText || w(I)("common.loadingText").value), 1)])])) : Y.value ? (y(), f("span", {
+			onClickCapture: De,
+			onClick: t[0] ||= O(() => {}, ["stop"]),
+			onMousedown: t[1] ||= O(() => {}, ["prevent"])
+		}, [m("span", oe, [m("span", se, [
+			C(e.$slots, "options:prepend"),
+			e.loading && !J.value ? (b(), p("span", ce, [C(e.$slots, "loading", {}, () => [h(w(e.loadingText || T(F)("common.loadingText").value), 1)])])) : J.value ? (b(), p("span", _({
 				key: 2,
 				id: e.id,
 				ref: "listbox",
-				"aria-activedescendant": J.value,
+				"aria-activedescendant": q.value,
 				"aria-multiselectable": e.multiple ? !0 : void 0,
 				role: "listbox",
-				style: v({ height: `${W.value}px` }),
+				style: { height: `${me.value}px` },
 				tabindex: "-1",
-				onMouseleave: ge
-			}, [(y(!0), f(u, null, x(U.value, (t) => (y(), f("span", {
-				id: q(G.value[t.index].valueHash),
-				key: G.value[t.index].valueHash,
-				"aria-disabled": G.value[t.index].disabled ? !0 : void 0,
+				onMouseleave: Ee
+			}, e.passthrough?.list), [(b(!0), p(l, null, S(pe.value, (t) => (b(), p("span", _({
+				id: U(H.value[t.index].valueHash),
+				key: H.value[t.index].valueHash,
+				"aria-describedby": K(H.value[t.index].description) ? G(H.value[t.index].valueHash) : void 0,
+				"aria-disabled": H.value[t.index].disabled ? !0 : void 0,
+				"aria-labelledby": K(H.value[t.index].description) ? W(H.value[t.index].valueHash) : void 0,
 				"aria-posinset": t.index + 1,
-				"aria-selected": G.value[t.index].selected,
-				"aria-setsize": P.options.length,
-				class: _(["bb-listbox__option", {
-					"bb-listbox__option--focused": w(X) === t.index,
-					"bb-listbox__option--selected": G.value[t.index].selected,
-					"bb-listbox__option--disabled": G.value[t.index].disabled
-				}]),
+				"aria-selected": H.value[t.index].selected,
+				"aria-setsize": M.options.length,
+				class: ["bb-listbox__option", {
+					"bb-listbox__option--focused": T(Y) === t.index,
+					"bb-listbox__option--selected": H.value[t.index].selected,
+					"bb-listbox__option--disabled": H.value[t.index].disabled
+				}],
 				"data-index": t.index,
 				role: "option",
-				style: v({ transform: `translateY(${t.start}px)` }),
-				onMouseenter: O((e) => he(t.index), ["stop"])
-			}, [S(e.$slots, "option", {
-				disabled: G.value[t.index].disabled,
-				focused: w(X) === t.index,
-				index: t.index,
-				item: G.value[t.index].item,
-				selected: G.value[t.index].selected,
-				text: G.value[t.index].text,
-				value: G.value[t.index].value
-			}, () => [p("span", M, C(G.value[t.index].text), 1), h(n, {
-				"aria-hidden": "true",
-				class: "bb-listbox__option-check",
-				icon: w(i)
-			}, null, 8, ["icon"])])], 46, j))), 128))], 44, ie)) : (y(), f("span", re, [S(e.$slots, "no-data", {}, () => [m(C(e.noDataText || w(I)("common.noDataText").value), 1)])])),
-			S(e.$slots, "options:append")
+				style: { transform: `translateY(${t.start}px)` },
+				onMouseenter: O((e) => Te(t.index), ["stop"]),
+				ref_for: !0
+			}, e.passthrough?.part?.("option", {
+				selected: H.value[t.index].selected,
+				disabled: H.value[t.index].disabled || void 0
+			}, H.value[t.index].item)), [
+				H.value[t.index]["prepend:icon"] ? (b(), d(i, _({
+					key: 0,
+					"aria-hidden": "true",
+					class: "bb-listbox__option-prepend-icon",
+					icon: H.value[t.index]["prepend:icon"],
+					ref_for: !0
+				}, e.passthrough?.part?.("item-icon", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				}, H.value[t.index].item)), null, 16, ["icon"])) : f("", !0),
+				C(e.$slots, "option", {
+					description: H.value[t.index].description,
+					disabled: H.value[t.index].disabled,
+					focused: T(Y) === t.index,
+					index: t.index,
+					item: H.value[t.index].item,
+					selected: H.value[t.index].selected,
+					text: H.value[t.index].text,
+					value: H.value[t.index].value
+				}, () => [H.value[t.index].description ? (b(), p("span", fe, [m("span", _({
+					id: W(H.value[t.index].valueHash),
+					class: "bb-listbox__option-label",
+					ref_for: !0
+				}, e.passthrough?.part?.("item-text", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				}, H.value[t.index].item)), w(H.value[t.index].text), 17, k), m("span", _({
+					id: G(H.value[t.index].valueHash),
+					class: "bb-listbox__option-description",
+					ref_for: !0
+				}, e.passthrough?.part?.("item-description", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				}, H.value[t.index].item)), w(H.value[t.index].description), 17, A)])) : (b(), p("span", _({
+					key: 1,
+					class: "bb-listbox__option-label",
+					ref_for: !0
+				}, e.passthrough?.part?.("item-text", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				}, H.value[t.index].item)), w(H.value[t.index].text), 17))]),
+				H.value[t.index]["append:icon"] && !H.value[t.index].selected ? (b(), d(i, _({
+					key: 1,
+					"aria-hidden": "true",
+					class: "bb-listbox__option-append-icon",
+					icon: H.value[t.index]["append:icon"],
+					ref_for: !0
+				}, e.passthrough?.part?.("item-icon", {
+					selected: H.value[t.index].selected,
+					disabled: H.value[t.index].disabled || void 0
+				}, H.value[t.index].item)), null, 16, ["icon"])) : f("", !0),
+				ne(i, {
+					"aria-hidden": "true",
+					class: "bb-listbox__option-check",
+					icon: T(ee)
+				}, null, 8, ["icon"])
+			], 16, de))), 128))], 16, ue)) : (b(), p("span", le, [C(e.$slots, "no-data", {}, () => [h(w(e.noDataText || T(F)("common.noDataText").value), 1)])])),
+			C(e.$slots, "options:append")
 		], 512)])], 38));
 	}
 });
 //#endregion
-export { N as default };
+export { j as default };

package/dist/components/FlatListBox/types.d.ts

@@ -1,5 +1,12 @@
 import { Option } from '../../types/Option';
+import { PtBindings } from '../../types/passthrough';
 export type FlatListBoxProps<Item = any> = {
+    /**
+     * Passthrough resolver handed down by the select popover: `list` is the
+     * `role="listbox"` node (bound whole); `option` is one option, resolved per
+     * node with its own `selected` / `disabled`. Internal.
+     */
+    passthrough?: PtBindings<'list' | 'option' | 'item-text' | 'item-icon' | 'item-description', 'selected' | 'disabled'>;
     /**
      * Id applied to the `role="listbox"` element itself (not the wrapper), so
      * a combobox's `aria-controls` reference resolves to the listbox role.
@@ -44,6 +51,12 @@ export type FlatListBoxProps<Item = any> = {
      * 44px / 36px on mobile viewports). An explicit value wins on every viewport.
      */
     optionHeight?: number;
+    /**
+     * Every row carries a one-line description under its label (the owner's
+     * `itemProps` declares a `description`). Rows get a fixed two-line height and the
+     * description ellipsizes; an explicit `optionHeight` still wins.
+     */
+    described?: boolean;
 };
 export type FlatListBoxEvents = {
     /**
@@ -78,6 +91,8 @@ export type FlatListBoxOptionSlotProps<Item = any> = {
     text: string;
     /** The resolved value for this option. */
     value: any;
+    /** The resolved `itemProps.description` for this option, when it has one. */
+    description: string | undefined;
 };
 export type FlatListBoxSlots<Item = any> = {
     /**