@revolist/ui 4.0.1-rc → 4.0.1

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/_distribution-chart.scss

@@ -15,7 +15,9 @@
   height: 100%;
 }
 
-.rv-distribution-chart__plot { overflow: visible; }
+.rv-distribution-chart__plot {
+  overflow: visible;
+}
 
 .rv-distribution-chart__series {
   fill: none;
@@ -23,7 +25,8 @@
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2.25px;
-  transition: stroke var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition: stroke var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-distribution-chart__series.is-selected {
@@ -31,13 +34,22 @@
 }
 
 .rv-distribution-chart__area {
-  fill: color-mix(in srgb, var(--rv-distribution-muted, var(--rv-ui-border)) 22%, transparent);
+  fill: color-mix(
+    in srgb,
+    var(--rv-distribution-muted, var(--rv-ui-border)) 22%,
+    transparent
+  );
   stroke: none;
-  transition: fill var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition: fill var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-distribution-chart__area.is-selected {
-  fill: color-mix(in srgb, var(--rv-distribution-accent, var(--rv-ui-accent)) 22%, transparent);
+  fill: color-mix(
+    in srgb,
+    var(--rv-distribution-accent, var(--rv-ui-accent)) 22%,
+    transparent
+  );
 }
 
 .rv-distribution-chart__data {
@@ -55,7 +67,9 @@
 // A datum's tooltip is contained by its stacking context. Raise the active datum,
 // rather than only the tooltip, so it can paint above later bar siblings.
 .rv-distribution-chart__datum:hover,
-.rv-distribution-chart__datum:focus-visible { z-index: 2; }
+.rv-distribution-chart__datum:focus-visible {
+  z-index: 2;
+}
 
 .rv-distribution-chart__datum.is-bar {
   display: flex;
@@ -76,7 +90,11 @@
   min-height: 3px;
   border-radius: 2px 2px 0 0;
   background: var(--rv-distribution-muted, var(--rv-ui-border));
-  transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition:
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    opacity var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-distribution-chart__datum.is-selected .rv-distribution-chart__bar {
@@ -94,7 +112,11 @@
   border: 2px solid var(--rv-distribution-muted, var(--rv-ui-border));
   border-radius: 50%;
   background: var(--rv-distribution-surface, var(--rv-ui-surface));
-  transition: border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition:
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-distribution-chart__datum.is-selected .rv-distribution-chart__point {
@@ -108,89 +130,103 @@
   outline-offset: 2px;
 }
 
-.rv-distribution-chart__tooltip {
-  position: absolute;
-  z-index: 3;
-  top: 4px;
-  bottom: auto;
-  left: 50%;
-  display: none;
-  width: max-content;
-  max-width: 220px;
-  padding: 7px 9px;
-  transform: translateX(-50%);
-  border: 1px solid var(--rv-distribution-border, var(--rv-ui-border));
-  border-radius: 7px;
-  background: var(--tooltip-bg, var(--rv-ui-text));
-  box-shadow: 0 8px 24px var(--rv-ui-shadow);
-  color: var(--tooltip-color, var(--rv-ui-surface));
-  font: 11px/1.35 system-ui, sans-serif;
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-.rv-distribution-chart__datum.is-point .rv-distribution-chart__tooltip {
-  top: calc(100% + 7px);
-}
-
-.rv-distribution-chart__tooltip strong,
-.rv-distribution-chart__tooltip span { display: block; }
-.rv-distribution-chart__tooltip strong { font-weight: 600; }
-.rv-distribution-chart__tooltip span { opacity: 0.82; }
-
-.rv-distribution-chart__datum:first-child .rv-distribution-chart__tooltip {
-  left: 0;
-  transform: none;
-}
-
-.rv-distribution-chart__datum:last-child .rv-distribution-chart__tooltip {
-  right: 0;
-  left: auto;
-  transform: none;
-}
-
-.rv-distribution-chart__datum:hover .rv-distribution-chart__tooltip,
-.rv-distribution-chart__datum:focus-visible .rv-distribution-chart__tooltip {
-  display: block;
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .rv-distribution-chart__bar { transition: none; }
+  .rv-distribution-chart__bar {
+    transition: none;
+  }
 }
 
-.rv-distribution-chart__region { position: relative; min-width: 0; }
+.rv-distribution-chart__region {
+  position: relative;
+  min-width: 0;
+}
 .rv-distribution-chart__grid {
-  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   pointer-events: none;
-  span { border-top: 1px dashed var(--rv-ui-border); }
+  span {
+    border-top: 1px dashed var(--rv-ui-border);
+  }
 }
 .rv-distribution-chart__labels {
-  display: flex; justify-content: space-between; gap: 8px; margin-top: 10px;
-  color: var(--rv-ui-text-muted); font-size: 11px;
-  span { min-width: 0; max-width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  &.is-bar span { flex: 1; text-align: center; }
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 10px;
+  color: var(--rv-ui-text-muted);
+  font-size: 11px;
+  span {
+    min-width: 0;
+    max-width: 22%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &.is-bar span {
+    flex: 1;
+    text-align: center;
+  }
 }
 .rv-distribution-chart__value {
-  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
-  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--rv-ui-text);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--rv-ui-text);
+}
+.rv-distribution-chart__datum.is-point .rv-distribution-chart__value {
+  top: -20px;
 }
-.rv-distribution-chart__datum.is-point .rv-distribution-chart__value { top: -20px; }
 .rv-distribution-chart__legend {
-  display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px;
-  font-size: 12px; color: var(--rv-ui-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  margin-top: 16px;
+  font-size: 12px;
+  color: var(--rv-ui-text-muted);
+}
+.rv-distribution-chart__legend i {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  background: var(--rv-distribution-accent, var(--rv-ui-accent));
 }
-.rv-distribution-chart__legend i,
-.rv-distribution-chart__tooltip i { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--rv-distribution-accent, var(--rv-ui-accent)); }
 .rv-distribution-chart__tooltip {
-  background: var(--rv-ui-surface); color: var(--rv-ui-text);
-  border-color: var(--rv-ui-border); box-shadow: 0 4px 12px var(--rv-ui-shadow);
-  white-space: normal; overflow-wrap: anywhere;
-  i { float: inline-start; margin-inline-end: 7px; margin-block-start: 3px; }
-  &--line i { width: 3px; height: 22px; }
-  &--dashed i { width: 8px; height: 0; background: transparent; border-top: 2px dashed var(--rv-ui-accent); margin-block-start: 7px; }
+  strong,
+  span {
+    display: block;
+  }
+  i {
+    display: block;
+    float: inline-start;
+    width: 8px;
+    height: 8px;
+    margin-inline-end: 7px;
+    margin-block-start: 3px;
+    border-radius: 2px;
+    background: var(--rv-distribution-accent, var(--rv-ui-accent));
+  }
+  &--line i {
+    width: 3px;
+    height: 22px;
+  }
+  &--dashed i {
+    height: 0;
+    background: transparent;
+    border-top: 2px dashed var(--rv-distribution-accent, var(--rv-ui-accent));
+    margin-block-start: 7px;
+  }
 }
-
 // Numeric/category progression stays left-to-right, including on RTL pages.
 // Keep SVG points, flex bars, labels and arrow-key order on the same axis.
 .rv-distribution-chart__region,
-.rv-distribution-chart__labels { direction: ltr; }
+.rv-distribution-chart__labels {
+  direction: ltr;
+}

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-hcOlnQ1K.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-hcOlnQ1K.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,8 +1,8 @@
-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';
 export { LineChart, type LineChartProps } from './line-chart';
 export { AreaChart, type AreaChartProps } from './area-chart';
-/** Compatibility composition; each presentation has its own standalone owner. */
+/** Chart-type composition; each presentation has its own standalone owner. */
 export declare function DistributionChart({ type, ...props }: DistributionChartProps): h.JSX.Element;

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-hcOlnQ1K.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-B9MNibfa.js";