@revolist/ui 4.0.1-rc → 4.0.3-rc

package/dialog/dialog.preact.js

@@ -1,11 +1,11 @@
-import { attachDialogDrag as e } from "./dialog.drag.js";
-import { useEffect as t } from "preact/hooks";
+import { c as e } from "../_chunks/hooks.module-CG3gN83z.js";
+import { attachDialogDrag as t } from "./dialog.drag.js";
 //#region src/dialog/dialog.preact.ts
 function n({ targetRef: n, handleRef: r, enabled: i = !0 }) {
-	t(() => {
-		let t = n.current, a = r.current;
-		if (i && t && a) return e({
-			target: t,
+	e(() => {
+		let e = n.current, a = r.current;
+		if (i && e && a) return t({
+			target: e,
 			handle: a
 		});
 	}, [

package/distribution-chart/area-chart.d.ts

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h } from '../_vendor/preact/src/index';
 import { StandaloneChartProps } from './types';
 export type AreaChartProps = StandaloneChartProps;
 export declare function AreaChart(props: AreaChartProps): h.JSX.Element;

package/distribution-chart/area-chart.js

@@ -1,49 +1,49 @@
-import { i as e, n as t, r as n, t as r } from "../_chunks/chart-frame-BvxbmEU9.js";
-import { useId as i } from "preact/hooks";
-import { jsx as a, jsxs as o } from "preact/jsx-runtime";
+import { a as e } from "../_chunks/hooks.module-CG3gN83z.js";
+import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
+import { i as n, n as r, r as i, t as a } from "../_chunks/chart-frame-Cmc7xU1i.js";
 //#region src/distribution-chart/area-chart.tsx
-function s(s) {
-	let c = `rv-area-${i().replace(/[^a-zA-Z0-9_-]/g, "")}`, { points: l } = n(s.data), u = s.data.some((e) => e.selected !== void 0), d = l.slice(1).map((t, n) => {
-		let r = l[n], i = e(r, t, s.interpolation);
+function o(o) {
+	let s = `rv-area-${e().replace(/[^a-zA-Z0-9_-]/g, "")}`, { points: c } = i(o.data), l = o.data.some((e) => e.selected !== void 0), u = c.slice(1).map((e, t) => {
+		let r = c[t], i = n(r, e, o.interpolation);
 		return {
-			key: s.data[n].key,
-			selected: !u || !!(s.data[n].selected && s.data[n + 1].selected),
+			key: o.data[t].key,
+			selected: !l || !!(o.data[t].selected && o.data[t + 1].selected),
 			line: i,
-			area: `${i} L ${t.x} 100 L ${r.x} 100 Z`
+			area: `${i} L ${e.x} 100 L ${r.x} 100 Z`
 		};
 	});
-	return /* @__PURE__ */ a(r, {
-		...s,
+	return /* @__PURE__ */ t(a, {
+		...o,
 		variant: "area",
-		positions: l,
-		renderDatum: () => s.showPoints === !1 ? null : /* @__PURE__ */ a("span", {
+		positions: c,
+		renderDatum: () => o.showPoints === !1 ? null : /* @__PURE__ */ t("span", {
 			class: "rv-distribution-chart__point",
 			"aria-hidden": "true"
 		}),
-		children: l.length > 0 && /* @__PURE__ */ o(t, { children: [s.areaFill === "gradient" && /* @__PURE__ */ a("defs", { children: [!0, !1].map((e) => {
-			let t = e ? "var(--rv-distribution-accent, var(--rv-ui-accent))" : "var(--rv-distribution-muted, var(--rv-ui-border))";
-			return /* @__PURE__ */ o("linearGradient", {
-				id: `${c}${e ? "" : "-muted"}`,
+		children: c.length > 0 && /* @__PURE__ */ t(r, { children: [o.areaFill === "gradient" && /* @__PURE__ */ t("defs", { children: [!0, !1].map((e) => {
+			let n = e ? "var(--rv-distribution-accent, var(--rv-ui-accent))" : "var(--rv-distribution-muted, var(--rv-ui-border))";
+			return /* @__PURE__ */ t("linearGradient", {
+				id: `${s}${e ? "" : "-muted"}`,
 				gradientUnits: "userSpaceOnUse",
 				x1: "0",
 				y1: "8",
 				x2: "0",
 				y2: "100",
-				children: [/* @__PURE__ */ a("stop", {
+				children: [/* @__PURE__ */ t("stop", {
 					offset: "0%",
-					"stop-color": t,
+					"stop-color": n,
 					"stop-opacity": "0.4"
-				}), /* @__PURE__ */ a("stop", {
+				}), /* @__PURE__ */ t("stop", {
 					offset: "100%",
-					"stop-color": t,
+					"stop-color": n,
 					"stop-opacity": "0.02"
 				})]
 			}, String(e));
-		}) }), d.map((e) => /* @__PURE__ */ o("g", { children: [/* @__PURE__ */ a("path", {
+		}) }), u.map((e) => /* @__PURE__ */ t("g", { children: [/* @__PURE__ */ t("path", {
 			class: `rv-distribution-chart__area${e.selected ? " is-selected" : ""}`,
 			d: e.area,
-			style: s.areaFill === "gradient" ? { fill: `url(#${c}${e.selected ? "" : "-muted"})` } : void 0
-		}), /* @__PURE__ */ a("path", {
+			style: o.areaFill === "gradient" ? { fill: `url(#${s}${e.selected ? "" : "-muted"})` } : void 0
+		}), /* @__PURE__ */ t("path", {
 			class: `rv-distribution-chart__series rv-distribution-chart__segment${e.selected ? " is-selected" : ""}`,
 			d: e.line,
 			"vector-effect": "non-scaling-stroke"
@@ -51,4 +51,4 @@ function s(s) {
 	});
 }
 //#endregion
-export { s as AreaChart };
+export { o as AreaChart };

package/distribution-chart/bar-chart.d.ts

@@ -1,5 +1,8 @@
-import { h } from 'preact';
-import { StandaloneChartProps } from './types';
-export type BarChartProps = StandaloneChartProps;
+import { h } from '../_vendor/preact/src/index';
+import { DistributionChartDatum, StandaloneChartProps } from './types';
+export interface BarChartProps extends StandaloneChartProps {
+    /** CSS color or per-bar rule. Return undefined to retain the theme color. */
+    readonly barColor?: string | ((datum: DistributionChartDatum, index: number) => string | undefined);
+}
 /** Compact bar chart, independent of sliders, filters and grid instances. */
 export declare function BarChart(props: BarChartProps): h.JSX.Element;

package/distribution-chart/bar-chart.js

@@ -1,14 +1,18 @@
-import { r as e, t } from "../_chunks/chart-frame-BvxbmEU9.js";
-import { jsx as n } from "preact/jsx-runtime";
+import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
+import { r as t, t as n } from "../_chunks/chart-frame-Cmc7xU1i.js";
 //#region src/distribution-chart/bar-chart.tsx
 function r(r) {
-	let { values: i, max: a } = e(r.data);
-	return /* @__PURE__ */ n(t, {
+	let { values: i, max: a } = t(r.data), o = r.data.map((e, t) => typeof r.barColor == "function" ? r.barColor(e, t) : r.barColor);
+	return /* @__PURE__ */ e(n, {
 		...r,
+		datumColors: o,
 		variant: "bar",
-		renderDatum: (e, t) => /* @__PURE__ */ n("span", {
+		renderDatum: (t, n) => /* @__PURE__ */ e("span", {
 			class: "rv-distribution-chart__bar",
-			style: { height: `${Math.max(3, i[t] / a * 100)}%` },
+			style: {
+				backgroundColor: o[n],
+				height: `${Math.max(3, i[n] / a * 100)}%`
+			},
 			"aria-hidden": "true"
 		})
 	});

package/distribution-chart/chart-frame.d.ts

@@ -1,13 +1,14 @@
-import { h, ComponentChildren } from 'preact';
+import { h, ComponentChildren } from '../_vendor/preact/src/index';
 import { DistributionChartDatum, DistributionChartType, StandaloneChartProps } from './types';
 export interface ChartPoint {
     readonly x: number;
     readonly y: number;
 }
 /** Shared accessibility, focus and tooltip lifecycle for the chart primitives. */
-export declare function ChartFrame({ data, ariaLabel, variant, height, className, showGrid, showLabels, showValues, legend, formatValue, tooltip, tooltipIndicator, renderTooltip, positions, renderDatum, children }: StandaloneChartProps & {
+export declare function ChartFrame({ data, ariaLabel, variant, height, className, showGrid, showLabels, showValues, legend, formatValue, tooltip, tooltipIndicator, renderTooltip, positions, datumColors, renderDatum, children }: StandaloneChartProps & {
     variant: DistributionChartType;
     positions?: readonly ChartPoint[];
+    datumColors?: readonly (string | undefined)[];
     renderDatum: (datum: DistributionChartDatum, index: number) => ComponentChildren;
     children?: ComponentChildren;
 }): h.JSX.Element;

package/distribution-chart/index.d.ts

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h } from '../_vendor/preact/src/index';
 import { DistributionChartProps } from './types';
 export * from './types';
 export { BarChart, type BarChartProps } from './bar-chart';

package/distribution-chart/index.js

@@ -1,10 +1,10 @@
-import { BarChart as e } from "./bar-chart.js";
-import { LineChart as t } from "./line-chart.js";
-import { AreaChart as n } from "./area-chart.js";
-import { jsx as r } from "preact/jsx-runtime";
+import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
+import { BarChart as t } from "./bar-chart.js";
+import { LineChart as n } from "./line-chart.js";
+import { AreaChart as r } from "./area-chart.js";
 //#region src/distribution-chart/index.tsx
 function i({ type: i = "bar", ...a }) {
-	return r(i === "line" ? t : i === "area" ? n : e, { ...a });
+	return e(i === "line" ? n : i === "area" ? r : t, { ...a });
 }
 //#endregion
-export { n as AreaChart, e as BarChart, i as DistributionChart, t as LineChart };
+export { r as AreaChart, t as BarChart, i as DistributionChart, n as LineChart };

package/distribution-chart/line-chart.d.ts

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h } from '../_vendor/preact/src/index';
 import { StandaloneChartProps } from './types';
 export type LineChartProps = StandaloneChartProps;
 /** Compact line chart with independently selected intervals and optional points. */

package/distribution-chart/line-chart.js

@@ -1,21 +1,21 @@
-import { i as e, n as t, r as n, t as r } from "../_chunks/chart-frame-BvxbmEU9.js";
-import { jsx as i } from "preact/jsx-runtime";
+import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
+import { i as t, n, r, t as i } from "../_chunks/chart-frame-Cmc7xU1i.js";
 //#region src/distribution-chart/line-chart.tsx
 function a(a) {
-	let { points: o } = n(a.data);
-	return /* @__PURE__ */ i(r, {
+	let { points: o } = r(a.data);
+	return /* @__PURE__ */ e(i, {
 		...a,
 		variant: "line",
 		positions: o,
-		renderDatum: () => a.showPoints === !1 ? null : /* @__PURE__ */ i("span", {
+		renderDatum: () => a.showPoints === !1 ? null : /* @__PURE__ */ e("span", {
 			class: "rv-distribution-chart__point",
 			"aria-hidden": "true"
 		}),
-		children: o.length > 0 && /* @__PURE__ */ i(t, { children: o.slice(1).map((t, n) => /* @__PURE__ */ i("path", {
-			class: `rv-distribution-chart__series rv-distribution-chart__segment${a.data[n].selected && a.data[n + 1].selected ? " is-selected" : ""}`,
-			d: e(o[n], t, a.interpolation),
+		children: o.length > 0 && /* @__PURE__ */ e(n, { children: o.slice(1).map((n, r) => /* @__PURE__ */ e("path", {
+			class: `rv-distribution-chart__series rv-distribution-chart__segment${a.data[r].selected && a.data[r + 1].selected ? " is-selected" : ""}`,
+			d: t(o[r], n, a.interpolation),
 			"vector-effect": "non-scaling-stroke"
-		}, a.data[n].key)) })
+		}, a.data[r].key)) })
 	});
 }
 //#endregion

package/distribution-chart/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentChildren } from 'preact';
+import { ComponentChildren } from '../_vendor/preact/src/index';
 export type DistributionChartType = 'bar' | 'line' | 'area';
 export interface DistributionChartTooltip {
     readonly title: string;

package/dropdown/content.d.ts

@@ -1,4 +1,4 @@
-import { h, ComponentChildren, RefObject } from 'preact';
+import { h, ComponentChildren, RefObject } from '../_vendor/preact/src/index';
 import { DropdownConfig, DropdownOption } from './dropdown.types';
 import { RemoteDropdownState, DropdownRemoteText } from './remote';
 type DropdownContentProps<T = any> = {
@@ -16,7 +16,7 @@ type DropdownContentProps<T = any> = {
     theme?: string | null;
     optionIdPrefix: string;
 };
-export declare function DropdownPopupContent<T = any>({ options, selectedValues, remote, value, onChange, config, multiSelect, search, searchPlaceholder, listboxId, searchId, renderOption, renderNoResults, onClose, theme, }: {
+export declare function DropdownPopupContent<T = any>({ options, selectedValues, remote, value, onChange, config, multiSelect, search, searchPlaceholder, listboxId, searchId, renderOption, renderNoResults, onClose, onTabNavigation, theme, }: {
     options: DropdownOption<T>[];
     selectedValues?: DropdownOption<T>[];
     remote?: RemoteDropdownState<T> & {
@@ -36,6 +36,7 @@ export declare function DropdownPopupContent<T = any>({ options, selectedValues,
     renderOption?: (h: any, option: DropdownOption<T>, isSelected: boolean) => ComponentChildren;
     renderNoResults?: (h: any) => ComponentChildren;
     onClose: (focusNext?: boolean) => void;
+    onTabNavigation?: () => void;
     theme?: string | null;
 }): h.JSX.Element;
 export declare function DropdownContent<T = any>({ options, filteredOptions, multiSelect, focusedIndex, selectedOptions, onKeyDown, onSelect, onFocusChange, renderOption, renderNoResults, dropdownListRef, theme, optionIdPrefix, }: DropdownContentProps<T>): h.JSX.Element;

package/dropdown/content.js

@@ -1,141 +1 @@
-import { ButtonControl as e } from "../native-control.js";
-import { useDropdownService as t } from "./dropdown.service.js";
-import { h as n } from "preact";
-import { Fragment as r, jsx as i, jsxs as a } from "preact/jsx-runtime";
-import { useCallback as o, useEffect as s, useRef as c } from "preact/compat";
-//#region src/dropdown/content.tsx
-function l({ options: n, selectedValues: r, remote: o, value: l, onChange: d, config: f, multiSelect: p, search: m, searchPlaceholder: h, listboxId: g, searchId: _, renderOption: v, renderNoResults: y, onClose: b, theme: x }) {
-	let S = c(null), C = c(null), w = c(null), { searchValue: T, focusedIndex: E, selectedOptions: D, filteredOptions: O, handleSelect: k, handleKeyDown: A, handleSearchChange: j, setFocusedIndex: M } = t(n, l, d, f, b, o && {
-		selected: r ?? [],
-		search: o.search
-	}), N = E >= 0 && E < O.length && !O[E].disabled ? `${g}-option-${E}` : void 0;
-	return s(() => {
-		if (!f.autoFocus) return;
-		let e = () => {
-			m && S.current ? S.current.focus({ preventScroll: !0 }) : C.current?.focus({ preventScroll: !0 });
-		}, t = C.current?.ownerDocument.defaultView ?? (typeof window < "u" ? window : void 0);
-		if (!t) return;
-		e();
-		let n = t.setTimeout(e, 0), r = t.requestAnimationFrame(e), i = t.setTimeout(e, 16);
-		return () => {
-			t.clearTimeout(n), t.cancelAnimationFrame(r), t.clearTimeout(i);
-		};
-	}, [f.autoFocus, m]), /* @__PURE__ */ a("div", {
-		ref: C,
-		className: "dropdown-listbox",
-		"data-theme": x ?? "default",
-		role: "listbox",
-		id: g,
-		"aria-multiselectable": p,
-		"aria-activedescendant": N,
-		tabIndex: -1,
-		"aria-busy": o?.loading,
-		onScrollCapture: (e) => {
-			let t = e.target;
-			o && t.scrollHeight - t.scrollTop - t.clientHeight < 48 && o.loadMore();
-		},
-		onKeyUp: (e) => e.stopPropagation(),
-		onKeyDown: (e) => {
-			e.stopPropagation(), e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), b(!1)) : e.key === "Tab" ? (e.preventDefault(), e.stopPropagation(), f.closeOnTab && b(!0)) : (e.key !== " " || e.target !== S.current) && A(e);
-		},
-		children: [
-			m && /* @__PURE__ */ i("div", {
-				className: "dropdown-search",
-				children: /* @__PURE__ */ i("input", {
-					ref: S,
-					type: "text",
-					id: _,
-					className: `dropdown-search-input ${x ? `theme-${x}` : ""}`,
-					placeholder: h,
-					value: T,
-					onChange: j,
-					onInput: j,
-					"aria-label": f.searchAriaLabel ?? "Search options"
-				})
-			}),
-			o?.loading && /* @__PURE__ */ i("div", {
-				role: "status",
-				children: o.text.loading
-			}),
-			o?.error && /* @__PURE__ */ a("div", {
-				role: "alert",
-				children: [
-					o.text.error,
-					" ",
-					/* @__PURE__ */ i(e, {
-						onClick: o.retry,
-						children: o.text.retry
-					})
-				]
-			}),
-			/* @__PURE__ */ i(u, {
-				options: n,
-				filteredOptions: O,
-				multiSelect: p,
-				focusedIndex: E,
-				selectedOptions: D,
-				onKeyDown: A,
-				onSelect: k,
-				onFocusChange: M,
-				renderOption: v,
-				renderNoResults: o ? () => o.loading || o.error ? null : o.text.empty : y,
-				dropdownListRef: w,
-				theme: x,
-				optionIdPrefix: g
-			}),
-			o?.hasMore && /* @__PURE__ */ i(e, {
-				disabled: o.loading,
-				onClick: o.loadMore,
-				children: o.text.loadMore
-			})
-		]
-	});
-}
-function u({ options: e, filteredOptions: t, multiSelect: s, focusedIndex: c, selectedOptions: l, onKeyDown: u, onSelect: d, onFocusChange: f, renderOption: p, renderNoResults: m, dropdownListRef: h, theme: g, optionIdPrefix: _ }) {
-	let v = o((e) => l.some((t) => JSON.stringify(t.value) === JSON.stringify(e.value)), [l]), y = o((e, t) => {
-		let r = v(e), o = c === t;
-		return /* @__PURE__ */ i("li", {
-			id: `${_}-option-${t}`,
-			role: "option",
-			"aria-selected": r,
-			"aria-disabled": e.disabled,
-			tabIndex: -1,
-			className: `dropdown-option ${r ? "selected" : ""} ${o ? "focused" : ""} ${e.disabled ? "disabled" : ""} ${g ? `theme-${g}` : ""}`,
-			onClick: () => d(e),
-			onMouseEnter: () => {
-				e.disabled || f(t);
-			},
-			children: p ? p(n, e, r) : /* @__PURE__ */ a("div", {
-				className: "option-content",
-				children: [s && /* @__PURE__ */ i("input", {
-					type: "checkbox",
-					checked: r,
-					readOnly: !0,
-					disabled: e.disabled,
-					tabIndex: -1,
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ i("span", { children: e.label })]
-			})
-		}, `${e.label}-${t}`);
-	}, [
-		c,
-		d,
-		v,
-		s,
-		p,
-		f,
-		g
-	]);
-	return /* @__PURE__ */ i(r, { children: /* @__PURE__ */ i("ul", {
-		ref: h,
-		className: "dropdown-options",
-		role: "presentation",
-		tabIndex: -1,
-		children: t.length > 0 ? t.map(y) : /* @__PURE__ */ i("li", {
-			className: "no-results",
-			children: m ? m(n) : /* @__PURE__ */ i("span", { children: "No results found" })
-		})
-	}) });
-}
-//#endregion
-export { u as DropdownContent, l as DropdownPopupContent };
+export { f as DropdownContent, p as DropdownPopupContent } from "../_chunks/native-control-C_yok8_-.js";

package/dropdown/control.d.ts

@@ -0,0 +1,14 @@
+import { DropdownOption, DropdownProps } from './dropdown.types';
+/** Application-owned state for DOM consumers of the shared Dropdown. */
+export interface DropdownControl<T = string> {
+    readonly element: HTMLDivElement;
+    value: T;
+    source: DropdownOption<T>[];
+    disabled: boolean;
+    onChange?: (value: T) => void;
+    update(props: Partial<DropdownProps<T>>): void;
+    destroy(): void;
+}
+export declare function createDropdownControl<T = string>(document: Document, initial: DropdownProps<T>): DropdownControl<T>;
+/** Lifecycle boundary for Stencil/other VNode factories that cannot render Preact components. */
+export declare function renderDropdownControl<T>(h: (tag: any, props: any, ...children: any[]) => T, props: DropdownProps): T;

package/dropdown/control.js

@@ -0,0 +1 @@
+export { t as createDropdownControl, n as renderDropdownControl } from "../_chunks/control-AHKXD5Eu.js";

package/dropdown/control.view.d.ts

@@ -0,0 +1,6 @@
+export declare function createDropdownHost(document: Document): {
+    element: HTMLDivElement;
+    mount: HTMLDivElement;
+    input: HTMLInputElement;
+    release: () => void;
+};

package/dropdown/dropdown.service.d.ts

@@ -14,6 +14,6 @@ export declare function useDropdownService<T = any>(options: DropdownOption<T>[]
     handleKeyDown: (e: KeyboardEvent) => void;
     handleSearchChange: (e: DropdownInputEvent) => void;
     isOptionSelected: (option: DropdownOption<T>) => boolean;
-    setFocusedIndex: import('preact/hooks').Dispatch<import('preact/hooks').StateUpdater<number>>;
+    setFocusedIndex: import('../_vendor/preact/hooks/src/index').Dispatch<import('../_vendor/preact/hooks/src/index').StateUpdater<number>>;
 };
 export {};

package/dropdown/dropdown.service.js

@@ -1,4 +1,4 @@
-import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "preact/hooks";
+import { c as e, i as t, n, o as r, t as i } from "../_chunks/hooks.module-CG3gN83z.js";
 //#region src/dropdown/dropdown.service.ts
 var a = (e, t) => e.label.toLowerCase().includes(t.toLowerCase()), o = (e, t, n) => {
 	if (n === "none") return 0;
@@ -12,8 +12,8 @@ function s(e, t, n) {
 	return r ? [r] : [];
 }
 function c(c, l, u, d = {}, f, p) {
-	let { search: m = !1, filterFunction: h = a, sortDirection: g = "none", sortFunction: _ = o, multiSelect: v = !1, autocomplete: y = !1, initialSearch: b = "" } = d, [x, S] = i(b), [C, w] = i(-1), [T, E] = i(() => s(c, l, v)), D = r(!1);
-	t(() => {
+	let { search: m = !1, filterFunction: h = a, sortDirection: g = "none", sortFunction: _ = o, multiSelect: v = !1, autocomplete: y = !1, initialSearch: b = "" } = d, [x, S] = t(b), [C, w] = t(-1), [T, E] = t(() => s(c, l, v)), D = i(!1);
+	e(() => {
 		E(p?.selected ?? s(c, l, v));
 	}, [
 		l,
@@ -34,9 +34,9 @@ function c(c, l, u, d = {}, f, p) {
 		_,
 		!!p
 	]);
-	t(() => {
+	e(() => {
 		D.current = !1, S(b);
-	}, [b]), t(() => {
+	}, [b]), e(() => {
 		O.length ? w((e) => {
 			if (D.current && e >= 0 && e < O.length && !O[e].disabled) return e;
 			let t = O.findIndex((e) => !e.disabled && T.some((t) => JSON.stringify(t.value) === JSON.stringify(e.value)));
@@ -47,7 +47,7 @@ function c(c, l, u, d = {}, f, p) {
 			return e >= 0 && e < O.length && !O[e].disabled ? e : t >= 0 ? t : O.findIndex((e) => !e.disabled);
 		}) : w(-1);
 	}, [O, T]);
-	let k = e((e) => {
+	let k = r((e) => {
 		if (!e.disabled) {
 			if (v) {
 				let t = T.some((t) => JSON.stringify(t.value) === JSON.stringify(e.value)), n;
@@ -74,7 +74,7 @@ function c(c, l, u, d = {}, f, p) {
 		selectedOptions: T,
 		filteredOptions: O,
 		handleSelect: k,
-		handleKeyDown: e((e) => {
+		handleKeyDown: r((e) => {
 			switch (e.key) {
 				case "Escape":
 					e.preventDefault(), e.stopPropagation();
@@ -93,11 +93,11 @@ function c(c, l, u, d = {}, f, p) {
 			C,
 			k
 		]),
-		handleSearchChange: e((e) => {
+		handleSearchChange: r((e) => {
 			let t = e.currentTarget.value;
 			t !== x && (D.current = !1, S(t), p?.search(t), w(-1));
 		}, [p, x]),
-		isOptionSelected: e((e) => T.some((t) => JSON.stringify(t.value) === JSON.stringify(e.value)), [T]),
+		isOptionSelected: r((e) => T.some((t) => JSON.stringify(t.value) === JSON.stringify(e.value)), [T]),
 		setFocusedIndex: w
 	};
 }

package/dropdown/dropdown.types.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from '../_vendor/preact/src/index';
 import { DropdownDataSource, DropdownRemoteText } from './remote';
 export type { DropdownDataSource, DropdownRemoteText, LookupId, LookupCursor } from './remote';
 export type DropdownRenderable = any;
@@ -43,6 +44,8 @@ export type DropdownConfig<T = any> = {
     initialSearch?: string;
     /** Close the dropdown when Tab is pressed inside the open popup. */
     closeOnTab?: boolean;
+    /** Dismiss then let the browser Tab from the trigger (standalone fields). */
+    nativeTabNavigation?: boolean;
     portalTarget?: HTMLElement | null;
     topLayer?: boolean;
     ariaLabel?: string;
@@ -66,6 +69,7 @@ export interface DropdownEnvironment {
 }
 export type DropdownProps<T = any> = {
     environment?: DropdownEnvironment;
+    triggerAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
     source: DropdownOption<T>[];
     /** Optional application-owned remote search and ID resolver. Values must be string/number IDs. */
     dataSource?: DropdownDataSource<T>;

package/dropdown/editor-dropdown.style.scss

@@ -1,5 +1,6 @@
 @use '../styles/motion';
 @use '../styles/palette';
+@use '../styles/control';
 
 
 // Mixins
@@ -86,7 +87,7 @@ revo-grid,
     justify-content: center;
     margin: 0;
     position: absolute;
-    right: var(--rv-dropdown-arrow-right);
+    inset-inline-end: var(--rv-dropdown-arrow-right);
     top: 50%;
     transform: translateY(-50%);
     transition: transform var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, ease-out);
@@ -112,8 +113,8 @@ revo-grid,
     align-items: center;
     min-width: 0;
     overflow: hidden;
-    padding-left: 5px;
-    padding-right: var(--rv-dropdown-value-right-space);
+    padding-inline-start: 5px;
+    padding-inline-end: var(--rv-dropdown-value-right-space);
   }
 
   .selected-value {
@@ -125,8 +126,8 @@ revo-grid,
     max-width: 100%;
     min-width: 0;
     overflow: hidden;
-    padding-left: 5px;
-    padding-right: var(--rv-dropdown-value-right-space);
+    padding-inline-start: 5px;
+    padding-inline-end: var(--rv-dropdown-value-right-space);
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
@@ -146,7 +147,7 @@ revo-grid,
     background-color: var(--rv-dropdown-container-tag-background);
     border-radius: 3px;
     padding: 2px 6px;
-    padding-right: 0;
+    padding-inline-end: 0;
     font-size: 14px;
 
   }
@@ -158,7 +159,7 @@ revo-grid,
     max-width: 100%;
     min-width: 0;
     overflow: hidden;
-    padding-right: var(--rv-dropdown-value-right-space);
+    padding-inline-end: var(--rv-dropdown-value-right-space);
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
@@ -247,6 +248,7 @@ revo-grid,
     background-color: var(--rv-dropdown-menu-background);
 
     .dropdown-option {
+      box-sizing: border-box;
       display: flex;
       min-height: 38px;
       align-items: center;
@@ -255,7 +257,7 @@ revo-grid,
       font-size: 14px;
       font-weight: 400;
       list-style: none;
-      padding: 0;
+      padding: 8px 10px;
       cursor: pointer;
       user-select: none;
       margin: 1px 0;
@@ -289,7 +291,7 @@ revo-grid,
       @include flex-center;
       gap: 8px;
       width: 100%;
-      padding: 8px 10px;
+      min-width: 0;
     }
     .no-results {
       padding: 12px;
@@ -306,3 +308,29 @@ revo-grid,
     opacity: 1;
   }
 }
+
+// Standalone controls share Dropdown behavior with grid editors and have form chrome.
+.dropdown-container.rv-select {
+  height: auto;
+  min-width: 0;
+  .dropdown-trigger {
+    @include control.action-size;
+    padding-inline-end: 24px;
+    border: 1px solid var(--rv-ui-border);
+    border-radius: var(--rv-control-radius, 8px);
+    background: var(--rv-ui-surface-sunken);
+    color: var(--rv-ui-text);
+    &:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 1px; }
+  }
+}
+
+// Standalone controls own the padding once; grid editors retain their compact insets.
+.dropdown-container:is(.rv-select, .rv-combobox, .rv-multi-select) .dropdown-trigger {
+  --rv-dropdown-arrow-size: 9px;
+  --rv-dropdown-arrow-right: 12px;
+  padding-inline-end: 32px;
+  > .selected-value,
+  > .selected-values {
+    padding-inline: 0;
+  }
+}

package/dropdown/index.d.ts

@@ -6,7 +6,7 @@ export type { DropdownPopupProps } from './popup';
 /**
  * Dropdown component
  */
-export declare function Dropdown<T = any>({ source: localSource, dataSource, dataContext, remoteText, value, onChange, placeholder, disabled, name, id, className, style, config, renderContent, renderOption, renderValue, renderPlaceholder, renderSelectedValue, renderNoResults, onClose, beforeOutsideClose, environment, }: DropdownProps<T>): any;
+export declare function Dropdown<T = any>({ source: localSource, triggerAttributes, dataSource, dataContext, remoteText, value, onChange, placeholder, disabled, name, id, className, style, config, renderContent, renderOption, renderValue, renderPlaceholder, renderSelectedValue, renderNoResults, onClose, beforeOutsideClose, environment, }: DropdownProps<T>): any;
 /**
  * Define the dropdown component
  * @param el - The element to render the dropdown

package/dropdown/index.js

@@ -1,4 +1,3 @@
-import { DropdownPopup as e } from "./popup.js";
-import { n as t, r as n, t as r } from "../_chunks/dropdown-CkGQBm1Q.js";
-import { DropdownPopupContent as i } from "./content.js";
-export { r as Dropdown, e as DropdownPopup, i as DropdownPopupContent, t as defineDropdown, n as destroyDropdown };
+import { d as e, l as t, p as n, u as r } from "../_chunks/native-control-C_yok8_-.js";
+import { t as i } from "../_chunks/popup-CT2uD3go.js";
+export { t as Dropdown, i as DropdownPopup, n as DropdownPopupContent, r as defineDropdown, e as destroyDropdown };