@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/widgets/DrilldownConfigPanel.js

@@ -1,23 +1,27 @@
-import { ListDashboardsDocument as e } from "../../../generated/wspace-operations.js";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import { Section as t } from "../common/Section.js";
+import "../common/index.js";
+import { ListDashboardsDocument as n } from "../../../generated/wspace-operations.js";
 import "../../hooks/useDrilldown.js";
-import { memo as t, useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
-import { useApolloClient as o } from "@apollo/client/react";
-import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { memo as r, useCallback as i, useEffect as a, useMemo as o, useState as s } from "react";
+import { useApolloClient as c } from "@apollo/client/react";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/DrilldownConfigPanel.tsx
-function d(e, t = "") {
+var p = "min-h-control-md rounded-input border border-[var(--color-border-subtle)] bg-bg-surface py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface", m = `${p} w-full px-3`, h = "bg-action-primary-bg border-action-primary-bg", g = "bg-bg-sunken border-[var(--color-border-strong)]", _ = "bg-bg-surface shadow-[var(--shadow-elevation-1)]";
+function v(e, t = "") {
 	if (!e || typeof e != "object") return [];
 	let n = [];
-	if (Array.isArray(e)) return e.length > 0 && typeof e[0] == "object" ? d(e[0], t) : [];
+	if (Array.isArray(e)) return e.length > 0 && typeof e[0] == "object" ? v(e[0], t) : [];
 	for (let [r, i] of Object.entries(e)) {
 		let e = t ? `${t}.${r}` : r;
-		n.push(e), i && typeof i == "object" && !Array.isArray(i) && t.split(".").length < 2 && n.push(...d(i, e));
+		n.push(e), i && typeof i == "object" && !Array.isArray(i) && t.split(".").length < 2 && n.push(...v(i, e));
 	}
 	return n;
 }
-var f = t(function({ widget: t, onChange: f, widgetData: p }) {
-	let { t: m } = s(), h = o(), [g, _] = a(t.drilldown?.enabled ?? !1), [v, y] = a(t.drilldown?.targetDashboardId ?? ""), [b, x] = a(t.drilldown?.navigationMode ?? "MODAL"), [S, C] = a(t.drilldown?.passGlobalFilters ?? !0), [w, T] = a(t.drilldown?.maxDepth ?? 3), [E, D] = a(t.drilldown?.openIn ?? "same"), [O, k] = a(() => {
-		let e = t.drilldown?.parameterMapping;
+var y = r(function({ widget: r, onChange: y, widgetData: b }) {
+	let { t: x } = l(), S = c(), [C, w] = s(r.drilldown?.enabled ?? !1), [T, E] = s(r.drilldown?.targetDashboardId ?? ""), [D, O] = s(r.drilldown?.navigationMode ?? "MODAL"), [k, A] = s(r.drilldown?.passGlobalFilters ?? !0), [j, M] = s(r.drilldown?.maxDepth ?? 3), [N, P] = s(r.drilldown?.openIn ?? "same"), [F, I] = s(() => {
+		let e = r.drilldown?.parameterMapping;
 		return e ? Object.entries(e).map(([e, t]) => ({
 			key: e,
 			value: t
@@ -25,55 +29,55 @@ var f = t(function({ widget: t, onChange: f, widgetData: p }) {
 			key: "",
 			value: ""
 		}];
-	}), [A, j] = a([]), [M, N] = a(!1), [P, F] = a(null), I = i(() => {
-		if (!p) return [];
+	}), [L, R] = s([]), [z, B] = s(!1), [V, H] = s(null), U = o(() => {
+		if (!b) return [];
 		let e = [
 			"row",
 			"item",
 			"point",
 			"selectedData"
-		], t = d(p), n = [];
+		], t = v(b), n = [];
 		for (let r of t) for (let t of e) n.push(`{{${t}.${r}}}`);
 		return n.push("{{widget.value}}", "{{widget.title}}", "{{widget.id}}"), n.push("{{globals.vars.dateFrom}}", "{{globals.vars.dateTo}}"), [...new Set(n)];
-	}, [p]), L = n(() => {
+	}, [b]), W = i(() => {
 		let e = {};
-		for (let { key: t, value: n } of O) t.trim() && n.trim() && (e[t.trim()] = n.trim());
-		f?.({
-			enabled: g,
-			targetDashboardId: v,
-			navigationMode: b,
+		for (let { key: t, value: n } of F) t.trim() && n.trim() && (e[t.trim()] = n.trim());
+		y?.({
+			enabled: C,
+			targetDashboardId: T,
+			navigationMode: D,
 			parameterMapping: e,
-			passGlobalFilters: S,
-			maxDepth: w,
-			openIn: E
+			passGlobalFilters: k,
+			maxDepth: j,
+			openIn: N
 		});
 	}, [
-		g,
-		v,
-		b,
-		O,
-		S,
-		w,
-		E,
-		f
+		C,
+		T,
+		D,
+		F,
+		k,
+		j,
+		N,
+		y
 	]);
-	r(() => {
-		L();
+	a(() => {
+		W();
 	}, [
-		g,
-		v,
-		b,
-		O,
-		S,
-		w,
-		E,
-		L
-	]), r(() => {
-		async function t() {
-			N(!0);
+		C,
+		T,
+		D,
+		F,
+		k,
+		j,
+		N,
+		W
+	]), a(() => {
+		async function e() {
+			B(!0);
 			try {
-				j(((await h.query({
-					query: e,
+				R(((await S.query({
+					query: n,
 					variables: { first: 100 },
 					fetchPolicy: "cache-first"
 				})).data?.listDashboards?.edges || []).map((e) => {
@@ -84,161 +88,164 @@ var f = t(function({ widget: t, onChange: f, widgetData: p }) {
 					};
 				}));
 			} catch {} finally {
-				N(!1);
+				B(!1);
 			}
 		}
-		t();
-	}, [h]);
-	let R = n(() => {
-		k((e) => [...e, {
+		e();
+	}, [S]);
+	let G = i(() => {
+		I((e) => [...e, {
 			key: "",
 			value: ""
 		}]);
-	}, []), z = n((e) => {
-		k((t) => t.filter((t, n) => n !== e));
-	}, []), B = n((e, t, n) => {
-		k((r) => r.map((r, i) => i === e ? {
+	}, []), K = i((e) => {
+		I((t) => t.filter((t, n) => n !== e));
+	}, []), q = i((e, t, n) => {
+		I((r) => r.map((r, i) => i === e ? {
 			...r,
 			[t]: n
 		} : r));
 	}, []);
-	return /* @__PURE__ */ u("div", {
-		className: "space-y-4 pb-8",
+	return /* @__PURE__ */ f("div", {
+		className: "min-w-0 space-y-form-gap",
 		children: [
-			/* @__PURE__ */ u("div", {
-				className: "flex items-center justify-between p-3 rounded-lg border border-border-default bg-bg-surface",
-				children: [/* @__PURE__ */ l("label", {
+			/* @__PURE__ */ f("div", {
+				className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-3",
+				children: [/* @__PURE__ */ d("label", {
+					htmlFor: "drilldown-enable",
 					className: "text-sm font-medium text-text-primary",
-					children: m("bigconsole.widget.drilldown.enableLabel", "Enable Drilldown")
-				}), /* @__PURE__ */ l("button", {
+					children: x("bigconsole.widget.drilldown.enableLabel", "Enable Drilldown")
+				}), /* @__PURE__ */ d("button", {
+					id: "drilldown-enable",
 					type: "button",
 					role: "switch",
-					"aria-checked": g,
-					onClick: () => _(!g),
-					className: `
-              relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer border
-              ${g ? "bg-action-primary-bg border-action-primary-bg" : "bg-gray-300 border-gray-400"}
-            `,
-					children: /* @__PURE__ */ l("span", { className: `
-                inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform
-                ${g ? "translate-x-6" : "translate-x-1"}
-              ` })
+					"aria-checked": C,
+					onClick: () => w(!C),
+					className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border motion-safe:transition-colors ${e} ${C ? h : g}`,
+					children: /* @__PURE__ */ d("span", { className: `inline-block h-4 w-4 transform rounded-full motion-safe:transition-transform ${_} ${C ? "translate-x-6" : "translate-x-1"}` })
 				})]
 			}),
-			g && /* @__PURE__ */ u(c, { children: [
-				/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
-					className: "block text-sm font-medium text-text-primary mb-1",
-					children: m("bigconsole.widget.drilldown.targetDashboardLabel", "Target Dashboard")
-				}), /* @__PURE__ */ u("select", {
-					value: v,
-					onChange: (e) => y(e.target.value),
-					disabled: M,
-					className: "w-full px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-					children: [/* @__PURE__ */ l("option", {
+			C && /* @__PURE__ */ f(u, { children: [
+				/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+					htmlFor: "drilldown-target",
+					className: "mb-1 block text-sm font-medium text-text-primary",
+					children: x("bigconsole.widget.drilldown.targetDashboardLabel", "Target Dashboard")
+				}), /* @__PURE__ */ f("select", {
+					id: "drilldown-target",
+					value: T,
+					onChange: (e) => E(e.target.value),
+					disabled: z,
+					className: m,
+					children: [/* @__PURE__ */ d("option", {
 						value: "",
-						children: m("bigconsole.widget.drilldown.selectDashboard", "Select a dashboard...")
-					}), A.filter((e) => e.id !== t.dashboardId).map((e) => /* @__PURE__ */ l("option", {
+						children: x("bigconsole.widget.drilldown.selectDashboard", "Select a dashboard...")
+					}), L.filter((e) => e.id !== r.dashboardId).map((e) => /* @__PURE__ */ d("option", {
 						value: e.id,
 						children: e.name
 					}, e.id))]
 				})] }),
-				/* @__PURE__ */ u("div", { children: [
-					/* @__PURE__ */ l("label", {
-						className: "block text-sm font-medium text-text-primary mb-1",
-						children: m("bigconsole.widget.drilldown.navigationModeLabel", "Navigation Mode")
+				/* @__PURE__ */ f("div", { children: [
+					/* @__PURE__ */ d("p", {
+						className: "mb-1 text-sm font-medium text-text-primary",
+						id: "drilldown-nav-mode-label",
+						children: x("bigconsole.widget.drilldown.navigationModeLabel", "Navigation Mode")
 					}),
-					/* @__PURE__ */ l("div", {
-						className: "flex gap-2",
+					/* @__PURE__ */ d("div", {
+						className: "flex flex-wrap gap-2",
+						role: "group",
+						"aria-labelledby": "drilldown-nav-mode-label",
 						children: [
 							"MODAL",
 							"NEW_TAB",
 							"SAME_WINDOW"
-						].map((e) => /* @__PURE__ */ u("button", {
+						].map((e) => /* @__PURE__ */ f("button", {
 							type: "button",
-							onClick: () => x(e),
-							className: `
-                      flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors
-                      ${b === e ? "bg-action-primary-bg text-white" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"}
-                    `,
+							"aria-pressed": D === e,
+							onClick: () => O(e),
+							className: `min-h-control-md min-w-[7rem] flex-1 rounded-button px-3 text-sm font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${D === e ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"}`,
 							children: [
-								e === "MODAL" && m("bigconsole.widget.drilldown.mode.modal", "Modal"),
-								e === "NEW_TAB" && m("bigconsole.widget.drilldown.mode.newTab", "New Tab"),
-								e === "SAME_WINDOW" && m("bigconsole.widget.drilldown.mode.sameWindow", "Same Window")
+								e === "MODAL" && x("bigconsole.widget.drilldown.mode.modal", "Modal"),
+								e === "NEW_TAB" && x("bigconsole.widget.drilldown.mode.newTab", "New Tab"),
+								e === "SAME_WINDOW" && x("bigconsole.widget.drilldown.mode.sameWindow", "Same Window")
 							]
 						}, e))
 					}),
-					/* @__PURE__ */ u("p", {
-						className: "text-xs text-text-tertiary mt-1",
+					/* @__PURE__ */ f("p", {
+						className: "mt-1 text-xs text-text-muted",
 						children: [
-							b === "MODAL" && m("bigconsole.widget.drilldown.modeHelp.modal", "Opens target dashboard in a modal overlay"),
-							b === "NEW_TAB" && m("bigconsole.widget.drilldown.modeHelp.newTab", "Opens target dashboard in a new browser tab"),
-							b === "SAME_WINDOW" && m("bigconsole.widget.drilldown.modeHelp.sameWindow", "Navigates to target dashboard in current window")
+							D === "MODAL" && x("bigconsole.widget.drilldown.modeHelp.modal", "Opens target dashboard in a modal overlay"),
+							D === "NEW_TAB" && x("bigconsole.widget.drilldown.modeHelp.newTab", "Opens target dashboard in a new browser tab"),
+							D === "SAME_WINDOW" && x("bigconsole.widget.drilldown.modeHelp.sameWindow", "Navigates to target dashboard in current window")
 						]
 					})
 				] }),
-				/* @__PURE__ */ u("div", { children: [
-					/* @__PURE__ */ u("div", {
-						className: "flex items-center justify-between mb-2",
-						children: [/* @__PURE__ */ l("label", {
+				/* @__PURE__ */ f("div", { children: [
+					/* @__PURE__ */ f("div", {
+						className: "mb-2 flex flex-wrap items-center justify-between gap-2",
+						children: [/* @__PURE__ */ d("p", {
 							className: "text-sm font-medium text-text-primary",
-							children: m("bigconsole.widget.drilldown.parameterMappingsLabel", "Parameter Mappings")
-						}), /* @__PURE__ */ l("button", {
+							children: x("bigconsole.widget.drilldown.parameterMappingsLabel", "Parameter Mappings")
+						}), /* @__PURE__ */ d("button", {
 							type: "button",
-							onClick: R,
-							className: "text-xs text-action-primary-text hover:underline",
-							children: m("bigconsole.widget.drilldown.addParameter", "+ Add Parameter")
+							onClick: G,
+							className: "rounded-button px-1 text-xs text-text-link hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+							children: x("bigconsole.widget.drilldown.addParameter", "+ Add Parameter")
 						})]
 					}),
-					/* @__PURE__ */ l("div", {
+					/* @__PURE__ */ d("div", {
 						className: "space-y-2",
-						children: O.map((e, t) => /* @__PURE__ */ l("div", {
+						children: F.map((e, t) => /* @__PURE__ */ d("div", {
 							className: "relative",
-							children: /* @__PURE__ */ u("div", {
-								className: "flex gap-2 items-center",
+							children: /* @__PURE__ */ f("div", {
+								className: "flex min-w-0 flex-wrap items-center gap-2",
 								children: [
-									/* @__PURE__ */ l("input", {
+									/* @__PURE__ */ d("input", {
 										type: "text",
 										value: e.key,
-										onChange: (e) => B(t, "key", e.target.value),
-										placeholder: m("bigconsole.widget.drilldown.parameterNamePlaceholder", "Parameter name"),
-										className: "flex-1 px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg"
+										onChange: (e) => q(t, "key", e.target.value),
+										placeholder: x("bigconsole.widget.drilldown.parameterNamePlaceholder", "Parameter name"),
+										"aria-label": `Parameter ${t + 1} name`,
+										className: `${m} min-w-[7rem] flex-1`
 									}),
-									/* @__PURE__ */ l("span", {
-										className: "text-text-tertiary",
+									/* @__PURE__ */ d("span", {
+										"aria-hidden": "true",
+										className: "text-text-muted",
 										children: "="
 									}),
-									/* @__PURE__ */ u("div", {
-										className: "flex-1 relative",
-										children: [/* @__PURE__ */ l("input", {
+									/* @__PURE__ */ f("div", {
+										className: "relative min-w-[7rem] flex-1",
+										children: [/* @__PURE__ */ d("input", {
 											type: "text",
 											value: e.value,
-											onChange: (e) => B(t, "value", e.target.value),
-											onFocus: () => F(t),
-											onBlur: () => setTimeout(() => F(null), 200),
-											placeholder: m("bigconsole.widget.drilldown.parameterValuePlaceholder", "{{row.field}} or static"),
-											className: "w-full px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg"
-										}), P === t && I.length > 0 && /* @__PURE__ */ l("div", {
-											className: "absolute z-10 top-full left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-bg-surface border border-border-default rounded-md shadow-lg",
-											children: I.slice(0, 10).map((e) => /* @__PURE__ */ l("button", {
+											onChange: (e) => q(t, "value", e.target.value),
+											onFocus: () => H(t),
+											onBlur: () => setTimeout(() => H(null), 200),
+											placeholder: x("bigconsole.widget.drilldown.parameterValuePlaceholder", "{{row.field}} or static"),
+											"aria-label": `Parameter ${t + 1} value`,
+											className: m
+										}), V === t && U.length > 0 && /* @__PURE__ */ d("div", {
+											className: "absolute left-0 right-0 top-full z-10 mt-1 max-h-40 overflow-y-auto rounded-input border border-[var(--color-border-subtle)] bg-bg-surface shadow-[var(--shadow-elevation-2)]",
+											children: U.slice(0, 10).map((e) => /* @__PURE__ */ d("button", {
 												type: "button",
 												onClick: () => {
-													B(t, "value", e), F(null);
+													q(t, "value", e), H(null);
 												},
-												className: "w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-sunken font-mono",
+												className: "w-full px-3 py-1.5 text-left font-mono text-xs text-text-primary hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 												children: e
 											}, e))
 										})]
 									}),
-									O.length > 1 && /* @__PURE__ */ l("button", {
+									F.length > 1 && /* @__PURE__ */ d("button", {
 										type: "button",
-										onClick: () => z(t),
-										className: "p-1 text-text-tertiary hover:text-status-error-text",
-										children: /* @__PURE__ */ l("svg", {
-											className: "w-4 h-4",
+										onClick: () => K(t),
+										"aria-label": `Remove parameter ${t + 1}`,
+										className: "rounded-button p-1 text-text-muted hover:text-[var(--color-status-error-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+										children: /* @__PURE__ */ d("svg", {
+											className: "h-icon-sm w-icon-sm",
 											fill: "none",
 											stroke: "currentColor",
 											viewBox: "0 0 24 24",
-											children: /* @__PURE__ */ l("path", {
+											children: /* @__PURE__ */ d("path", {
 												strokeLinecap: "round",
 												strokeLinejoin: "round",
 												strokeWidth: 2,
@@ -250,133 +257,150 @@ var f = t(function({ widget: t, onChange: f, widgetData: p }) {
 							})
 						}, t))
 					}),
-					/* @__PURE__ */ u("p", {
-						className: "text-xs text-text-tertiary mt-2",
+					/* @__PURE__ */ f("p", {
+						className: "mt-2 text-xs text-text-muted",
 						children: [
-							m("bigconsole.widget.drilldown.paramHelp.usePrefix", "Use"),
+							x("bigconsole.widget.drilldown.paramHelp.usePrefix", "Use"),
 							" ",
-							/* @__PURE__ */ l("code", {
+							/* @__PURE__ */ d("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.field}}"
 							}),
 							" ",
-							m("bigconsole.widget.drilldown.paramHelp.useSuffix", "for dynamic values or enter static text."),
-							/* @__PURE__ */ l("br", {}),
-							m("bigconsole.widget.drilldown.paramHelp.examples", "Examples:"),
+							x("bigconsole.widget.drilldown.paramHelp.useSuffix", "for dynamic values or enter static text."),
+							/* @__PURE__ */ d("br", {}),
+							x("bigconsole.widget.drilldown.paramHelp.examples", "Examples:"),
 							" ",
-							/* @__PURE__ */ l("code", {
+							/* @__PURE__ */ d("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.category}}"
 							}),
 							",",
 							" ",
-							/* @__PURE__ */ l("code", {
+							/* @__PURE__ */ d("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{item.id}}"
 							}),
 							",",
 							" ",
-							/* @__PURE__ */ l("code", {
+							/* @__PURE__ */ d("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{globals.vars.dateFrom}}"
 							})
 						]
 					})
 				] }),
-				/* @__PURE__ */ u("div", {
-					className: "border-t border-border-default pt-4 mt-4",
-					children: [
-						/* @__PURE__ */ l("h4", {
-							className: "text-sm font-medium text-text-primary mb-3",
-							children: m("bigconsole.widget.drilldown.advancedOptions", "Advanced Options")
-						}),
-						/* @__PURE__ */ u("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-sunken mb-3",
-							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
-								className: "text-sm text-text-primary",
-								children: m("bigconsole.widget.drilldown.passGlobalFiltersLabel", "Pass Global Filters")
-							}), /* @__PURE__ */ l("p", {
-								className: "text-xs text-text-tertiary",
-								children: m("bigconsole.widget.drilldown.passGlobalFiltersHelp", "Include current dashboard filters in drilldown")
-							})] }), /* @__PURE__ */ l("button", {
-								type: "button",
-								role: "switch",
-								"aria-checked": S,
-								onClick: () => C(!S),
-								className: `
-                    relative inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer border
-                    ${S ? "bg-action-primary-bg border-action-primary-bg" : "bg-gray-300 border-gray-400"}
-                  `,
-								children: /* @__PURE__ */ l("span", { className: `
-                      inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform
-                      ${S ? "translate-x-5" : "translate-x-1"}
-                    ` })
-							})]
-						}),
-						/* @__PURE__ */ u("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-sunken mb-3",
-							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
-								className: "text-sm text-text-primary",
-								children: m("bigconsole.widget.drilldown.maxDepthLabel", "Max Drilldown Depth")
-							}), /* @__PURE__ */ l("p", {
-								className: "text-xs text-text-tertiary",
-								children: m("bigconsole.widget.drilldown.maxDepthHelp", "Limit nested drilldown levels")
-							})] }), /* @__PURE__ */ l("select", {
-								value: w,
-								onChange: (e) => T(Number(e.target.value)),
-								className: "w-16 px-2 py-1 rounded border border-border-default bg-bg-surface text-text-primary text-sm",
-								children: [
-									1,
-									2,
-									3,
-									4,
-									5
-								].map((e) => /* @__PURE__ */ l("option", {
-									value: e,
-									children: e
-								}, e))
-							})]
-						}),
-						b === "SAME_WINDOW" && /* @__PURE__ */ u("div", {
-							className: "flex items-center justify-between p-2 rounded bg-bg-sunken",
-							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
-								className: "text-sm text-text-primary",
-								children: m("bigconsole.widget.drilldown.openInLabel", "Open In")
-							}), /* @__PURE__ */ l("p", {
-								className: "text-xs text-text-tertiary",
-								children: m("bigconsole.widget.drilldown.openInHelp", "Tab behavior for navigation")
-							})] }), /* @__PURE__ */ u("div", {
-								className: "flex gap-1",
-								children: [/* @__PURE__ */ l("button", {
-									type: "button",
-									onClick: () => D("same"),
-									className: `
-                        px-2 py-1 rounded text-xs font-medium transition-colors
-                        ${E === "same" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
-                      `,
-									children: m("bigconsole.widget.drilldown.openIn.sameTab", "Same Tab")
-								}), /* @__PURE__ */ l("button", {
+				/* @__PURE__ */ d(t, {
+					emphasis: "muted",
+					padding: "compact",
+					headingLevel: 4,
+					title: x("bigconsole.widget.drilldown.advancedOptions", "Advanced Options"),
+					description: "Rarely changed. Defaults suit most drilldowns.",
+					"data-testid": "drilldown-advanced",
+					children: /* @__PURE__ */ f("div", {
+						className: "flex flex-col gap-2",
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
+								children: [/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("label", {
+										htmlFor: "drilldown-pass-filters",
+										className: "text-sm text-text-primary",
+										children: x("bigconsole.widget.drilldown.passGlobalFiltersLabel", "Pass Global Filters")
+									}), /* @__PURE__ */ d("p", {
+										className: "text-xs text-text-muted",
+										children: x("bigconsole.widget.drilldown.passGlobalFiltersHelp", "Include current dashboard filters in drilldown")
+									})]
+								}), /* @__PURE__ */ d("button", {
+									id: "drilldown-pass-filters",
 									type: "button",
-									onClick: () => D("new"),
-									className: `
-                        px-2 py-1 rounded text-xs font-medium transition-colors
-                        ${E === "new" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
-                      `,
-									children: m("bigconsole.widget.drilldown.openIn.newTab", "New Tab")
+									role: "switch",
+									"aria-checked": k,
+									onClick: () => A(!k),
+									className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${k ? h : g}`,
+									children: /* @__PURE__ */ d("span", { className: `inline-block h-3 w-3 transform rounded-full motion-safe:transition-transform ${_} ${k ? "translate-x-5" : "translate-x-1"}` })
 								})]
-							})]
-						})
-					]
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
+								children: [/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("label", {
+										htmlFor: "drilldown-max-depth",
+										className: "text-sm text-text-primary",
+										children: x("bigconsole.widget.drilldown.maxDepthLabel", "Max Drilldown Depth")
+									}), /* @__PURE__ */ d("p", {
+										className: "text-xs text-text-muted",
+										children: x("bigconsole.widget.drilldown.maxDepthHelp", "Limit nested drilldown levels")
+									})]
+								}), /* @__PURE__ */ d("select", {
+									id: "drilldown-max-depth",
+									value: j,
+									onChange: (e) => M(Number(e.target.value)),
+									className: `${p} w-auto min-w-[4rem] shrink-0 px-2`,
+									children: [
+										1,
+										2,
+										3,
+										4,
+										5
+									].map((e) => /* @__PURE__ */ d("option", {
+										value: e,
+										children: e
+									}, e))
+								})]
+							}),
+							D === "SAME_WINDOW" && /* @__PURE__ */ f("div", {
+								className: "flex min-w-0 flex-wrap items-center justify-between gap-2 rounded-button bg-bg-surface p-2",
+								children: [/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("p", {
+										className: "text-sm text-text-primary",
+										id: "drilldown-open-in-label",
+										children: x("bigconsole.widget.drilldown.openInLabel", "Open In")
+									}), /* @__PURE__ */ d("p", {
+										className: "text-xs text-text-muted",
+										children: x("bigconsole.widget.drilldown.openInHelp", "Tab behavior for navigation")
+									})]
+								}), /* @__PURE__ */ f("div", {
+									className: "flex shrink-0 flex-wrap gap-1",
+									role: "group",
+									"aria-labelledby": "drilldown-open-in-label",
+									children: [/* @__PURE__ */ d("button", {
+										type: "button",
+										"aria-pressed": N === "same",
+										onClick: () => P("same"),
+										className: `min-h-control-md rounded-button px-2 text-xs font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${N === "same" ? "bg-action-primary-bg text-action-primary-text" : "border border-[var(--color-border-subtle)] bg-bg-surface text-text-secondary hover:text-text-primary"}`,
+										children: x("bigconsole.widget.drilldown.openIn.sameTab", "Same Tab")
+									}), /* @__PURE__ */ d("button", {
+										type: "button",
+										"aria-pressed": N === "new",
+										onClick: () => P("new"),
+										className: `min-h-control-md rounded-button px-2 text-xs font-medium motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${N === "new" ? "bg-action-primary-bg text-action-primary-text" : "border border-[var(--color-border-subtle)] bg-bg-surface text-text-secondary hover:text-text-primary"}`,
+										children: x("bigconsole.widget.drilldown.openIn.newTab", "New Tab")
+									})]
+								})]
+							})
+						]
+					})
 				})
 			] }),
-			!g && t.drilldown?.id && /* @__PURE__ */ l("div", {
-				className: "p-2 rounded bg-amber-100 text-amber-800 text-sm",
-				children: m("bigconsole.widget.drilldown.removalWarning", "Drilldown will be removed when you save changes.")
+			!C && r.drilldown?.id && /* @__PURE__ */ d(t, {
+				tone: "warning",
+				padding: "compact",
+				headingLevel: 4,
+				title: "Drilldown will be removed",
+				"data-testid": "drilldown-removal-notice",
+				children: /* @__PURE__ */ d("p", {
+					className: "text-xs text-text-secondary",
+					children: x("bigconsole.widget.drilldown.removalWarning", "Drilldown will be removed when you save changes.")
+				})
 			})
 		]
 	});
 });
 //#endregion
-export { f as default };
+export { y as default };
 
 //# sourceMappingURL=DrilldownConfigPanel.js.map