@revolist/ui 4.0.2-rc → 4.0.3-rc

package/dropdown/content.js

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

package/dropdown/lookup-field.js

@@ -1,6 +1,6 @@
 import { i as e, t } from "../_chunks/hooks.module-CG3gN83z.js";
 import { t as n } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t as r } from "../_chunks/dropdown-voWqmwAe.js";
+import { l as r } from "../_chunks/native-control-C_yok8_-.js";
 import { n as i } from "../_chunks/editor-commit-Bq3wSgvr.js";
 import { EditorActions as a } from "../editor-actions.js";
 //#region src/dropdown/lookup-field.tsx

package/dropdown/popup.js

@@ -1,141 +1 @@
-import { c as e, i as t, r as n, t as r } from "../_chunks/hooks.module-CG3gN83z.js";
-import { t as i } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t as a } from "../_chunks/compat.module-DDB2pm9O.js";
-import { hideTopLayerPopup as o, showTopLayerPopup as s } from "../core/top-layer-popup.js";
-import { inheritUiMotion as c } from "../core/motion.js";
-//#region src/dropdown/popup.tsx
-var l = 5, u = 4;
-function d(e, t, n) {
-	let r = e.ownerDocument.defaultView;
-	if (!r || r.getComputedStyle(e).position === "fixed") return {
-		top: t,
-		left: n,
-		scaleX: 1,
-		scaleY: 1
-	};
-	let i = e.offsetParent, a = e.ownerDocument;
-	if (!i || i === a.body || i === a.documentElement) return {
-		top: t + r.scrollY,
-		left: n + r.scrollX,
-		scaleX: 1,
-		scaleY: 1
-	};
-	let o = i.getBoundingClientRect(), s = i, c = s.offsetWidth > 0 ? o.width / s.offsetWidth : 1, l = s.offsetHeight > 0 ? o.height / s.offsetHeight : 1, u = Number.isFinite(c) && c > 0 ? c : 1, d = Number.isFinite(l) && l > 0 ? l : 1;
-	return {
-		top: (t - o.top) / d - s.clientTop + s.scrollTop,
-		left: (n - o.left) / u - s.clientLeft + s.scrollLeft,
-		scaleX: u,
-		scaleY: d
-	};
-}
-function f({ onPointerRelease: f, triggerRef: p, children: m, portalTarget: h, theme: g, dropdownMenuId: _, popupClassName: v, closeOnClickOutside: y = !1, onClose: b, align: x = "start", matchTriggerWidth: S = !1, maxHeight: C, observePopupResize: w = !0, topLayer: T = !1 }) {
-	let E = r(null), [D, O] = t({
-		top: 0,
-		left: 0,
-		display: "none"
-	});
-	n(() => {
-		let e = p.current, t = E.current;
-		if (e && t) return c(e, t);
-	}, [h, p]), e(() => {
-		let e = p.current;
-		if (!e) return;
-		let t = e.ownerDocument.defaultView ?? window, n = () => {
-			let t = E.current;
-			if (!t) return;
-			let n = e.getBoundingClientRect(), r = d(t, n.bottom + u, n.left);
-			O({
-				top: r.top,
-				left: r.left,
-				display: "flex",
-				...S ? { width: n.width / r.scaleX } : {}
-			});
-		}, r = () => {
-			let n = E.current;
-			if (!n) return;
-			let r = e.getBoundingClientRect(), i = n.style.maxHeight;
-			n.style.maxHeight = "";
-			let a = n.getBoundingClientRect(), o = d(n, 0, 0), s = Math.max(a.height, n.offsetHeight * o.scaleY, n.scrollHeight * o.scaleY);
-			n.style.maxHeight = i;
-			let c = Math.max(a.width, n.offsetWidth * o.scaleX), f = Math.min(s, typeof C == "number" ? Math.max(0, C * o.scaleY) : Infinity), p = t.innerHeight, m = t.innerWidth, h = Math.max(0, r.top - u - l), g = Math.max(0, p - r.bottom - u - l), _ = f > g && h > g, v = Math.min(f, _ ? h : g), y = _ ? r.top - u - v : r.bottom + u, b = x === "end" ? r.right - c : r.left;
-			y = Math.max(l, Math.min(y, p - l - v)), b = Math.max(l, Math.min(b, m - c - l));
-			let w = d(n, y, b);
-			O({
-				top: w.top,
-				left: w.left,
-				display: "flex",
-				maxHeight: v / w.scaleY,
-				...S ? { width: r.width / w.scaleX } : {}
-			});
-		};
-		n();
-		let i = t.setTimeout(r, 0);
-		t.addEventListener("resize", r), t.addEventListener("scroll", r, !0);
-		let a = t.ResizeObserver, o = a ? new a(r) : void 0;
-		o?.observe(e);
-		let s = e.closest(".rv-dialog__surface, dialog");
-		return s && o?.observe(s), w && E.current && o?.observe(E.current), () => {
-			t.clearTimeout(i), t.removeEventListener("resize", r), t.removeEventListener("scroll", r, !0), o?.disconnect();
-		};
-	}, [
-		x,
-		S,
-		C,
-		w,
-		h,
-		p
-	]), n(() => {
-		let e = E.current;
-		if (!T || !e) return;
-		let t = s(e);
-		return () => {
-			o(e, t);
-		};
-	}, [h, T]), n(() => {
-		if (!y || !b) return;
-		let e = h?.ownerDocument ?? E.current?.ownerDocument ?? p.current?.ownerDocument ?? (typeof document < "u" ? document : void 0);
-		if (!e) return;
-		let t = (e) => {
-			let t = e.target;
-			t && (E.current?.contains(t) || p.current?.contains(t) || b());
-		};
-		e.addEventListener("mousedown", t);
-		let n = (t) => {
-			if (t.key !== "Escape") return;
-			let n = e.activeElement;
-			n && (E.current?.contains(n) || p.current?.contains(n)) && (t.preventDefault(), t.stopPropagation(), b(), p.current?.querySelector("button, input, select")?.focus());
-		};
-		return e.addEventListener("keydown", n), () => {
-			e.removeEventListener("mousedown", t), e.removeEventListener("keydown", n);
-		};
-	}, [
-		y,
-		b,
-		h,
-		p
-	]);
-	let k = /* @__PURE__ */ i("div", {
-		ref: E,
-		id: _,
-		className: `revo-dropdown-menu ${v || ""}`,
-		"data-theme": g ?? "default",
-		onMouseUp: f,
-		onTouchEnd: f,
-		style: {
-			top: `${D.top}px`,
-			left: `${D.left}px`,
-			...T ? {
-				right: "auto",
-				bottom: "auto",
-				margin: "0"
-			} : {},
-			display: D.display,
-			maxHeight: D.maxHeight === void 0 ? void 0 : `${D.maxHeight}px`,
-			width: D.width === void 0 ? void 0 : `${D.width}px`
-		},
-		children: m
-	});
-	return h ? a(k, h) : k;
-}
-//#endregion
-export { f as DropdownPopup };
+export { t as DropdownPopup } from "../_chunks/popup-CT2uD3go.js";

package/duration/index.js

@@ -1 +1 @@
-export { t as DurationDraft, n as DurationField } from "../_chunks/duration-87U2EoMS.js";
+export { t as DurationDraft, n as DurationField } from "../_chunks/duration-CL68Em0o.js";

package/duration/style.scss

@@ -22,7 +22,7 @@
     flex-wrap: wrap;
     gap: 8px;
   }
-  &__modes > select {
+  &__modes > .dropdown-container {
     flex: 1 1 100px;
     min-width: 0;
     width: auto;

package/editor-actions.js

@@ -1,6 +1,6 @@
 import { i as e } from "./_chunks/preact.module-BBM36DnO.js";
 import { t } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { n } from "./_chunks/controls-DIum-E66.js";
+import { n } from "./_chunks/controls-DsNi8V8I.js";
 //#region src/editor-actions.tsx
 var r = {
 	apply: "Apply",

package/field-configurator.js

@@ -2,9 +2,9 @@ import { c as e } from "./_chunks/preact.module-BBM36DnO.js";
 import { t } from "./_chunks/hooks.module-CG3gN83z.js";
 import { t as n } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
 import { SvgIcon as r } from "./icons/icon.js";
-import { t as i } from "./_chunks/chevron-right-sxHQMSkq.js";
-import { n as a } from "./_chunks/delete-button-Bblyah10.js";
-import { RemoveButton as o } from "./buttons/remove-button.js";
+import { n as i } from "./_chunks/delete-button-CW9vjLnk.js";
+import { RemoveButton as a } from "./buttons/remove-button.js";
+import { t as o } from "./_chunks/chevron-right-sxHQMSkq.js";
 import { DisclosureSummary as s } from "./form-controls/presentation.js";
 import { fieldDropIndex as c, reorderFields as l } from "./field-reorder.js";
 import { useFieldDropTarget as u, useFieldReorder as d } from "./field-reorder.hook.js";
@@ -20,7 +20,7 @@ function p({ children: e, className: t = "", ...r }) {
 		...r,
 		className: `rv-configurator-summary ${t}`,
 		iconPosition: "after",
-		icon: /* @__PURE__ */ n(f, { svg: i }),
+		icon: /* @__PURE__ */ n(f, { svg: o }),
 		children: e
 	});
 }
@@ -133,13 +133,13 @@ function w({ children: e, active: t = !1, label: r, className: i = "" }) {
 	});
 }
 function T(e) {
-	return /* @__PURE__ */ n(o, {
+	return /* @__PURE__ */ n(a, {
 		...e,
 		className: `rv-configurator-remove-button ${e.className ?? ""}`
 	});
 }
 function E() {
-	return /* @__PURE__ */ n(r, { svg: a });
+	return /* @__PURE__ */ n(r, { svg: i });
 }
 function D({ position: e, index: t, className: r = "" }) {
 	return /* @__PURE__ */ n("span", {

package/fieldset.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from './_vendor/preact/src/index';
+/** Carries native fieldset restrictions to custom selection controls. */
+export declare function Fieldset(props: JSX.IntrinsicElements['fieldset']): JSX.Element;

package/filter/filters/slider/single.js

@@ -1,5 +1,5 @@
 import { t as e } from "../../../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { Input as t } from "../../../native-control.js";
+import { n as t } from "../../../_chunks/native-control-C_yok8_-.js";
 //#region src/filter/filters/slider/single.tsx
 function n({ min: n, max: r, value: i, step: a = 1, disabled: o = !1, id: s, className: c = "", ariaLabel: l, ariaValueText: u, ariaDescribedBy: d, onChange: f, onCommit: p, onKeyDown: m }) {
 	let h = r - n, g = h > 0 ? Math.max(0, Math.min(100, (i - n) / h * 100)) : 0;

package/filter-badge.js

@@ -1,7 +1,7 @@
 import { i as e } from "./_chunks/preact.module-BBM36DnO.js";
 import { a as t } from "./_chunks/hooks.module-CG3gN83z.js";
 import { t as n } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { n as r, t as i } from "./_chunks/choice-chips-Cs4D-3nH.js";
+import { n as r, t as i } from "./_chunks/choice-chips-CHQTUdLs.js";
 //#region src/filter-badge.tsx
 function a(e) {
 	return /* @__PURE__ */ n(r, {

package/filter-controls.js

@@ -1,20 +1,20 @@
 import { t as e } from "./_chunks/hooks.module-CG3gN83z.js";
 import { t } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { ButtonControl as n, TextArea as r } from "./native-control.js";
+import { a as n, t as r } from "./_chunks/native-control-C_yok8_-.js";
 import { Legend as i } from "./legend.js";
 //#region src/filter-controls.tsx
-function a({ label: e, detail: r, selected: i, className: a = "", detailClassName: o = "", ...s }) {
-	return /* @__PURE__ */ t(n, {
+function a({ label: e, detail: n, selected: i, className: a = "", detailClassName: o = "", ...s }) {
+	return /* @__PURE__ */ t(r, {
 		...s,
 		class: `rv-option-button ${a}`,
 		"aria-pressed": i,
 		children: [/* @__PURE__ */ t("strong", { children: e }), /* @__PURE__ */ t("span", {
 			class: `rv-option-button__detail ${o}`,
-			children: r
+			children: n
 		})]
 	});
 }
-function o({ highlight: n, className: i = "", inputClassName: a = "", highlightClassName: o = "", ...s }) {
+function o({ highlight: r, className: i = "", inputClassName: a = "", highlightClassName: o = "", ...s }) {
 	let c = e(null);
 	return /* @__PURE__ */ t("div", {
 		class: `rv-highlighted-input ${i}`,
@@ -23,8 +23,8 @@ function o({ highlight: n, className: i = "", inputClassName: a = "", highlightC
 			class: `rv-highlighted-input__highlight ${o}`,
 			"aria-hidden": "true",
 			ref: c,
-			children: n
-		}), /* @__PURE__ */ t(r, {
+			children: r
+		}), /* @__PURE__ */ t(n, {
 			...s,
 			class: `rv-highlighted-input__input ${a}`,
 			spellcheck: s.spellcheck ?? !1,

package/form-controls/field-context.d.ts

@@ -0,0 +1,5 @@
+export declare const FormFieldContext: import('../_vendor/preact/src/index').Context<{
+    labelId?: string;
+    hintId?: string;
+    disabled?: boolean;
+}>;

package/form-controls/index.js

@@ -1,9 +1,10 @@
 import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { createPreactElement as t } from "../preact-mount.js";
-import { Input as n, Select as r } from "../native-control.js";
+import { n as t } from "../_chunks/native-control-C_yok8_-.js";
+import { createPreactElement as n } from "../preact-mount.js";
+import { t as r } from "../_chunks/control-AHKXD5Eu.js";
 //#region src/form-controls/index.view.tsx
-function i(n, r) {
-	return t(n, /* @__PURE__ */ e("label", {
+function i(t, r) {
+	return n(t, /* @__PURE__ */ e("label", {
 		class: ["rv-field", r.className].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ e("span", {
@@ -24,16 +25,10 @@ function i(n, r) {
 	}));
 }
 function a(r, i) {
-	return t(r, /* @__PURE__ */ e(n, {
+	return n(r, /* @__PURE__ */ e(t, {
 		type: "text",
 		placeholder: i
 	}));
 }
-function o(n, i) {
-	return t(n, /* @__PURE__ */ e(r, { children: i.map((t) => /* @__PURE__ */ e("option", {
-		value: t.value,
-		children: t.label
-	}, t.value)) }));
-}
 //#endregion
-export { i as createFormField, o as createSelectControl, a as createTextControl };
+export { r as createDropdownControl, i as createFormField, a as createTextControl };

package/form-controls/index.view.d.ts

@@ -6,7 +6,5 @@ export interface FormFieldOptions {
 }
 export declare function createFormField(document: Document, options: FormFieldOptions): HTMLLabelElement;
 export declare function createTextControl(document: Document, placeholder: string): HTMLInputElement;
-export declare function createSelectControl(document: Document, options: readonly {
-    value: string;
-    label: string;
-}[]): HTMLSelectElement;
+/** DOM counterpart of Dropdown; callers own its lifetime. */
+export { createDropdownControl } from '../dropdown/control';