efficient-shell 4.134.0 → 4.137.0

package/dist/{chunk-OLJDJYSU.js → chunk-YA4EE7ST.js}

@@ -1,14 +1,14 @@
-import { Breadcrumbs } from './chunk-GIGV2ZRW.js';
-import { SidebarLayout } from './chunk-ET6ID4LP.js';
+import { Breadcrumbs } from './chunk-5RPTS3BT.js';
+import { SidebarLayout } from './chunk-R7QGMK6N.js';
 import { BrandMark } from './chunk-TRCWINHF.js';
-import { toast_default } from './chunk-4P44JXDS.js';
-import { useIsMobile, useShortcutLabel, useShellPrefs } from './chunk-2TPTHAKI.js';
-import { useFileIntake, humanSize, FileIntakeAlert } from './chunk-QAGQRNKI.js';
+import { toast_default } from './chunk-UTYKLGGT.js';
+import { useIsMobile, useShortcutLabel, useShellPrefs } from './chunk-HUBJAUGG.js';
+import { useFileIntake, humanSize, FileIntakeAlert } from './chunk-YDHXWCCJ.js';
 import { iconButtonClasses, Button_default } from './chunk-RT6DSB5Y.js';
-import { PopupMenu, PopupMenuItem } from './chunk-QRL64J5F.js';
-import { registerModalEscapeInterceptor, onOverlayOpen, Z_LAYERS, useDismissPopupsOnOpen, useFocusTrap, useScrollLock } from './chunk-W622KQTD.js';
-import { glassStyle } from './chunk-D276EMXS.js';
-import { useShellLocale, useShellStrings, DEFAULT_SHELL_STRINGS, currentShellStrings, formatPlain, formatFixed, formatPercent, splitAround } from './chunk-72CQWN7O.js';
+import { PopupMenu, PopupMenuDivider, PopupMenuLabel, itemLook } from './chunk-JOPU6WPY.js';
+import { registerModalEscapeInterceptor, onOverlayOpen, Z_LAYERS, useDismissPopupsOnOpen, useFocusTrap, useScrollLock } from './chunk-I2TAAJHS.js';
+import { glassStyle, glassFill } from './chunk-6XJEJWNJ.js';
+import { useShellLocale, useShellStrings, DEFAULT_SHELL_STRINGS, currentShellStrings, formatPlain, formatFixed, formatPercent, splitAround } from './chunk-YE6GUDGP.js';
 import { useBrowserLayoutEffect, useBrowserValue, useBrowserValueOnce } from './chunk-IRWSRJ4K.js';
 import { forwardRef, useCallback, useState, useRef, useId, useEffect, createContext, useMemo, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, Component, useSyncExternalStore, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -133,13 +133,17 @@ var ACROSS = {
   left: ["top", "bottom"],
   right: ["top", "bottom"]
 };
-function placeBeside(anchor, size, side, bounds, gap) {
-  const room = {
+function roomAround(anchor, bounds, gap) {
+  return {
     top: anchor.top - gap - (bounds.top + VIEWPORT_MARGIN),
     bottom: bounds.bottom - VIEWPORT_MARGIN - (anchor.bottom + gap),
     left: anchor.left - gap - (bounds.left + VIEWPORT_MARGIN),
     right: bounds.right - VIEWPORT_MARGIN - (anchor.right + gap)
   };
+}
+var within = (value, lo, hi) => Math.max(lo, Math.min(value, hi));
+function placeBeside(anchor, size, side, bounds, gap) {
+  const room = roomAround(anchor, bounds, gap);
   const spare = (s) => room[s] - (s === "top" || s === "bottom" ? size.height : size.width);
   const order = [side, OPPOSITE[side], ...ACROSS[side]];
   const chosen = order.find((s) => spare(s) >= 0) ?? order.reduce((best, s) => spare(s) > spare(best) ? s : best);
@@ -165,18 +169,94 @@ function placeBeside(anchor, size, side, bounds, gap) {
       top = centreY - size.height / 2;
       break;
   }
-  const within = (value, lo, hi) => Math.max(lo, Math.min(value, hi));
   return {
     side: chosen,
     left: within(left, bounds.left + VIEWPORT_MARGIN, bounds.right - VIEWPORT_MARGIN - size.width),
     top: within(top, bounds.top + VIEWPORT_MARGIN, bounds.bottom - VIEWPORT_MARGIN - size.height)
   };
 }
+function placeArrow(anchor, placed, size, inset, depth) {
+  const { side, left, top } = placed;
+  const right = left + size.width;
+  const bottom = top + size.height;
+  const clearance = {
+    top: anchor.top - bottom,
+    bottom: top - anchor.bottom,
+    left: anchor.left - right,
+    right: left - anchor.right
+  }[side];
+  if (clearance < depth) return null;
+  const along = (target, start, length) => length < 2 * inset ? start + length / 2 : Math.max(start + inset, Math.min(target, start + length - inset));
+  const centreX = (anchor.left + anchor.right) / 2;
+  const centreY = (anchor.top + anchor.bottom) / 2;
+  switch (side) {
+    case "top":
+      return { side, x: along(centreX, left, size.width), y: bottom };
+    case "bottom":
+      return { side, x: along(centreX, left, size.width), y: top };
+    case "left":
+      return { side, x: right, y: along(centreY, top, size.height) };
+    case "right":
+      return { side, x: left, y: along(centreY, top, size.height) };
+  }
+}
+function followAnchor(anchor, onMove, watch) {
+  let lastLeft = NaN, lastTop = NaN, lastRight = NaN, lastBottom = NaN, lastWatched = NaN;
+  const remember = () => {
+    const rect = anchor()?.getBoundingClientRect();
+    if (!rect) return false;
+    const watched = watch ? watch() : NaN;
+    const moved = rect.left !== lastLeft || rect.top !== lastTop || rect.right !== lastRight || rect.bottom !== lastBottom || watched !== lastWatched && !(Number.isNaN(watched) && Number.isNaN(lastWatched));
+    lastLeft = rect.left;
+    lastTop = rect.top;
+    lastRight = rect.right;
+    lastBottom = rect.bottom;
+    lastWatched = watched;
+    return moved;
+  };
+  remember();
+  const run = () => {
+    remember();
+    onMove();
+  };
+  let raf = requestAnimationFrame(function tick() {
+    if (remember()) onMove();
+    raf = requestAnimationFrame(tick);
+  });
+  window.addEventListener("scroll", run, true);
+  window.addEventListener("resize", run);
+  return () => {
+    cancelAnimationFrame(raf);
+    window.removeEventListener("scroll", run, true);
+    window.removeEventListener("resize", run);
+  };
+}
+function placeMenu({ trigger, menu, bounds, align, side }) {
+  const room = roomAround(trigger, bounds, MENU_GAP);
+  const other = side === "bottom" ? "top" : "bottom";
+  const chosen = menu.height > room[side] && (menu.height <= room[other] || room[other] > room[side]) ? other : side;
+  const maxHeight = Math.max(Math.min(menu.height, 96), room[chosen]);
+  const height = Math.min(menu.height, maxHeight);
+  const top = within(
+    chosen === "bottom" ? trigger.bottom + MENU_GAP : trigger.top - MENU_GAP - height,
+    bounds.top + VIEWPORT_MARGIN,
+    bounds.bottom - VIEWPORT_MARGIN - height
+  );
+  const maxWidth = Math.max(0, bounds.right - bounds.left - 2 * VIEWPORT_MARGIN);
+  const width = Math.min(menu.width, maxWidth);
+  const left = within(
+    align === "start" ? trigger.left : trigger.right - width,
+    bounds.left + VIEWPORT_MARGIN,
+    bounds.right - VIEWPORT_MARGIN - width
+  );
+  return { left, top, side: chosen, maxHeight, maxWidth };
+}
 function useDropdownPosition(triggerRef, open, options = {}) {
   const {
     matchTriggerWidth = false,
     preferredMaxWidth = POPUP_MAX_WIDTH,
-    preferredMaxHeight = MENU_MAX_HEIGHT
+    preferredMaxHeight = MENU_MAX_HEIGHT,
+    popupRef
   } = options;
   const [pos, setPos] = useState(null);
   useBrowserLayoutEffect(() => {
@@ -184,15 +264,10 @@ function useDropdownPosition(triggerRef, open, options = {}) {
       setPos(null);
       return;
     }
-    let lastLeft = NaN, lastTop = NaN, lastRight = NaN, lastBottom = NaN;
     const compute = () => {
       const trigger = triggerRef.current;
       const rect = trigger?.getBoundingClientRect();
       if (!rect) return;
-      lastLeft = rect.left;
-      lastTop = rect.top;
-      lastRight = rect.right;
-      lastBottom = rect.bottom;
       const bounds = popupBounds(trigger);
       const spaceBelow = bounds.bottom - rect.bottom - MENU_GAP - VIEWPORT_MARGIN;
       const spaceAbove = rect.top - bounds.top - MENU_GAP - VIEWPORT_MARGIN;
@@ -212,6 +287,13 @@ function useDropdownPosition(triggerRef, open, options = {}) {
           Math.max(bounds.left + VIEWPORT_MARGIN, rect.left),
           bounds.right - VIEWPORT_MARGIN - width
         );
+      } else if (popupRef && bounds.right - VIEWPORT_MARGIN - rect.left < next.maxWidth && Math.min(rect.right, bounds.right - VIEWPORT_MARGIN) - bounds.left - VIEWPORT_MARGIN < next.maxWidth) {
+        const measured = popupRef.current?.offsetWidth ?? 0;
+        const width = measured > 0 ? Math.min(measured, next.maxWidth) : next.maxWidth;
+        next.left = Math.max(
+          bounds.left + VIEWPORT_MARGIN,
+          Math.min(rect.left, bounds.right - VIEWPORT_MARGIN - width)
+        );
       } else if (bounds.right - VIEWPORT_MARGIN - rect.left < next.maxWidth) {
         const rightEdge = Math.min(rect.right, bounds.right - VIEWPORT_MARGIN);
         next.right = window.innerWidth - rightEdge;
@@ -227,21 +309,12 @@ function useDropdownPosition(triggerRef, open, options = {}) {
       setPos(next);
     };
     compute();
-    let raf = requestAnimationFrame(function tick() {
-      const rect = triggerRef.current?.getBoundingClientRect();
-      if (rect && (rect.left !== lastLeft || rect.top !== lastTop || rect.right !== lastRight || rect.bottom !== lastBottom)) {
-        compute();
-      }
-      raf = requestAnimationFrame(tick);
-    });
-    window.addEventListener("scroll", compute, true);
-    window.addEventListener("resize", compute);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("scroll", compute, true);
-      window.removeEventListener("resize", compute);
-    };
-  }, [open, triggerRef, matchTriggerWidth, preferredMaxWidth, preferredMaxHeight]);
+    return followAnchor(
+      () => triggerRef.current,
+      compute,
+      popupRef ? () => popupRef.current?.offsetWidth ?? NaN : void 0
+    );
+  }, [open, triggerRef, matchTriggerWidth, preferredMaxWidth, preferredMaxHeight, popupRef]);
   return pos;
 }
 
@@ -1577,6 +1650,22 @@ function calendarNames(locale) {
   localeNames.set(locale, names);
   return names;
 }
+var weekStarts = /* @__PURE__ */ new Map();
+function firstDayOfWeek(locale) {
+  if (!locale) return 0;
+  let first = weekStarts.get(locale);
+  if (first === void 0) {
+    first = 0;
+    try {
+      const tag = new Intl.Locale(locale);
+      const info = typeof tag.getWeekInfo === "function" ? tag.getWeekInfo() : tag.weekInfo;
+      if (info?.firstDay === 1) first = 1;
+    } catch {
+    }
+    weekStarts.set(locale, first);
+  }
+  return first;
+}
 var pad = (n) => String(n).padStart(2, "0");
 function toKey(d) {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
@@ -1618,7 +1707,7 @@ function Calendar({
   month,
   defaultMonth,
   onMonthChange,
-  weekStartsOn = 0,
+  weekStartsOn: weekStartsOnProp,
   quickJump = true,
   "aria-label": ariaLabel,
   className = ""
@@ -1627,7 +1716,10 @@ function Calendar({
   const todayKey = useBrowserValue(readTodayKey, null);
   const today = fromKey(todayKey);
   const strings = useShellStrings().calendar;
-  const names = calendarNames(useShellLocale());
+  const locale = useShellLocale();
+  const names = calendarNames(locale);
+  const localeWeekStart = useBrowserValue(() => firstDayOfWeek(locale), 0);
+  const weekStartsOn = weekStartsOnProp ?? localeWeekStart;
   const openingMonth = () => {
     if (!today) return null;
     const here = monthKey(today);
@@ -1876,7 +1968,13 @@ function DateRangePicker({
   to,
   onChange,
   formatDisplay: formatDisplayProp,
-  clearable = true,
+  clearable: clearableProp,
+  required = false,
+  name,
+  id,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel,
+  weekStartsOn,
   placeholder: placeholderProp,
   fullWidth = false
 }) {
@@ -1884,16 +1982,44 @@ function DateRangePicker({
   const locale = useShellLocale();
   const formatDisplay = formatDisplayProp ?? (locale ? localeFormatDisplay(locale) : defaultFormatDisplay);
   const placeholder = placeholderProp ?? strings.placeholder;
+  const clearable = clearableProp ?? !required;
   const [open, setOpen] = useState(false);
   const [tempFrom, setTempFrom] = useState(from);
   const [tempTo, setTempTo] = useState(to);
   const [activePreset, setActivePreset] = useState(null);
   const ref = useRef(null);
+  const triggerRef = useRef(null);
   const panelRef = useRef(null);
+  const panelId = useId();
+  const descriptionId = useId();
+  const [stacked, setStacked] = useState(false);
   const pos = useDropdownPosition(ref, open, {
     preferredMaxWidth: 520,
-    preferredMaxHeight: 560
+    preferredMaxHeight: stacked ? 720 : 560,
+    popupRef: panelRef
+  });
+  const sideRowRef = useRef(null);
+  const sideWidth = useRef(null);
+  useBrowserLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!open || !pos || !panel) return;
+    const style = getComputedStyle(panel);
+    const room = pos.maxWidth - (panel.offsetWidth - panel.clientWidth) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    if (!stacked) {
+      const natural = sideRowRef.current?.offsetWidth ?? 0;
+      if (natural === 0) return;
+      sideWidth.current = natural;
+      if (natural > room + 0.5) setStacked(true);
+    } else if (sideWidth.current !== null && sideWidth.current <= room) {
+      setStacked(false);
+    }
+  });
+  const [hasLabelElement, setHasLabelElement] = useState(false);
+  useBrowserLayoutEffect(() => {
+    const labelled = !!id && (triggerRef.current?.labels?.length ?? 0) > 0;
+    if (labelled !== hasLabelElement) setHasLabelElement(labelled);
   });
+  const namedElsewhere = !!ariaLabel || !!ariaLabelledBy || hasLabelElement;
   const now = /* @__PURE__ */ new Date();
   const [viewMonth, setViewMonth] = useState(() => monthKeyOf(from ? parseDate(from) : now));
   const displayDate = (s) => s ? formatDisplay(s) : "";
@@ -1973,6 +2099,37 @@ function DateRangePicker({
     setOpen(false);
   };
   const displayText = from && to ? `${displayDate(from)} \u2014 ${displayDate(to)}` : from ? strings.fromOnly(displayDate(from)) : to ? strings.toOnly(displayDate(to)) : "";
+  const names = calendarNames(locale);
+  const spoken = (iso) => {
+    const d = fromKey(iso);
+    return d ? names.longDate(d.getFullYear(), d.getMonth(), d.getDate()) : iso;
+  };
+  const description = from && to ? strings.range(spoken(from), spoken(to)) : from ? strings.fromOnly(spoken(from)) : to ? strings.toOnly(spoken(to)) : placeholder;
+  const presetClass = (key) => stacked ? `rounded-md border px-2.5 py-1 text-sm transition-colors ${activePreset === key ? "border-blue-300 bg-blue-50 text-blue-700 font-medium" : "border-gray-200 text-gray-700 hover:bg-gray-50"}` : `text-left px-3 py-1.5 text-sm rounded-md transition-colors ${activePreset === key ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`;
+  const presets = /* @__PURE__ */ jsxs(Fragment, { children: [
+    PRESETS.map((label) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handlePreset(label), className: presetClass(label), children: strings[label] }, label)),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setActivePreset("Custom"), className: presetClass("Custom"), children: strings.custom })
+  ] });
+  const calendar = (
+    // The grid, its keyboard model and its ARIA all come from Calendar, which
+    // is also what DatePicker draws — so a range and a single date look and
+    // behave like the same control. This used to be 95 lines of hand-built
+    // cells here with no arrow keys and a day whose accessible name was its
+    // number.
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "range",
+        value: tempFrom || null,
+        endValue: tempTo || null,
+        month: viewMonth,
+        onMonthChange: setViewMonth,
+        onSelect: handleCalendarSelect,
+        weekStartsOn,
+        "aria-label": strings.dialog
+      }
+    )
+  );
   return /* @__PURE__ */ jsxs("div", { className: `relative${fullWidth ? " w-full" : ""}`, ref, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -1982,13 +2139,20 @@ function DateRangePicker({
           /* @__PURE__ */ jsxs(
             "button",
             {
+              ref: triggerRef,
               type: "button",
               onClick: handleOpen,
               "aria-haspopup": "dialog",
               "aria-expanded": open,
+              id,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": namedElsewhere ? descriptionId : void 0,
+              "aria-controls": open ? panelId : void 0,
+              "aria-required": required || void 0,
               className: `inline-flex items-center gap-2 rosh-focus-ring${fullWidth ? " min-w-0 flex-1 justify-start" : ""}`,
               children: [
-                /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+                /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
                 /* @__PURE__ */ jsx("span", { className: "truncate", children: displayText || placeholder })
               ]
             }
@@ -2006,13 +2170,20 @@ function DateRangePicker({
         ]
       }
     ),
+    namedElsewhere && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "sr-only", children: description }),
+    name && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: name.from, value: from }),
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: name.to, value: to })
+    ] }),
     open && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
         {
           ref: panelRef,
+          id: panelId,
           role: "dialog",
           "aria-label": strings.dialog,
+          "data-layout": stacked ? "stacked" : "side",
           className: "fixed rounded-2xl p-4",
           style: {
             zIndex: Z_LAYERS.popup,
@@ -2022,8 +2193,9 @@ function DateRangePicker({
             bottom: pos?.bottom,
             // The panel states its own size. `max-content` is the calendar plus
             // the presets column at whatever font size the reader has, and the
-            // cap is what the owning window allows.
-            width: "max-content",
+            // cap is what the owning window allows. Stacked, it is the cap
+            // itself: the calendar fills it, and its days are bigger targets.
+            width: stacked && pos ? pos.maxWidth : "max-content",
             maxWidth: pos?.maxWidth,
             maxHeight: pos?.maxHeight,
             overflowY: "auto",
@@ -2033,53 +2205,29 @@ function DateRangePicker({
             ...glassStyle()
           },
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: stacked ? "mb-3 flex flex-wrap items-center gap-x-4 gap-y-2" : "flex items-center gap-3 mb-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: strings.from }),
                 /* @__PURE__ */ jsx("span", { className: `text-sm px-2 py-1 rounded border min-w-[90px] ${tempFrom ? "border-blue-300 bg-blue-50 text-blue-700" : "border-gray-200 bg-gray-50 text-gray-400"}`, children: tempFrom ? displayDate(tempFrom) : strings.start })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-gray-300", children: "\u2014" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              !stacked && /* @__PURE__ */ jsx("span", { className: "text-gray-300", children: "\u2014" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: strings.to }),
                 /* @__PURE__ */ jsx("span", { className: `text-sm px-2 py-1 rounded border min-w-[90px] ${tempTo ? "border-blue-300 bg-blue-50 text-blue-700" : "border-gray-200 bg-gray-50 text-gray-400"}`, children: tempTo ? displayDate(tempTo) : strings.end })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-64", children: /* @__PURE__ */ jsx(
-                Calendar,
-                {
-                  mode: "range",
-                  value: tempFrom || null,
-                  endValue: tempTo || null,
-                  month: viewMonth,
-                  onMonthChange: setViewMonth,
-                  onSelect: handleCalendarSelect,
-                  "aria-label": strings.dialog
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: "border-l border-gray-200 pl-4 flex flex-col gap-1 min-w-[130px]", children: [
-                PRESETS.map((label) => /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => handlePreset(label),
-                    className: `text-left px-3 py-1.5 text-sm rounded-md transition-colors ${activePreset === label ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
-                    children: strings[label]
-                  },
-                  label
-                )),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setActivePreset("Custom"),
-                    className: `text-left px-3 py-1.5 text-sm rounded-md transition-colors ${activePreset === "Custom" ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
-                    children: strings.custom
-                  }
-                )
+            stacked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-1.5", children: presets }),
+              /* @__PURE__ */ jsx("div", { className: "w-full", children: calendar })
+            ] }) : (
+              // `w-max`: the row is drawn at its natural width even in a panel
+              // capped narrower, which is what the measurement above reads.
+              /* @__PURE__ */ jsxs("div", { ref: sideRowRef, className: "flex w-max gap-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-64", children: calendar }),
+                /* @__PURE__ */ jsx("div", { className: "border-l border-gray-200 pl-4 flex flex-col gap-1 min-w-[130px]", children: presets })
               ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-3 border-t border-gray-200", children: [
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2 mt-4 pt-3 border-t border-gray-200", children: [
               clearable && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: "px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700", children: strings.clear }),
               /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(false), className: "px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50", children: strings.cancel }),
               /* @__PURE__ */ jsx(
@@ -2133,6 +2281,7 @@ var TimePicker = forwardRef(function TimePicker2({ value, onChange, min, max, in
 });
 var TimePicker_default = TimePicker;
 var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+var GLOBAL_ATTRIBUTE = /^(aria|data)-/;
 function toInputValue2(value) {
   if (value === null || value === void 0 || value === "") return "";
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : toISODate(value);
@@ -2162,12 +2311,22 @@ var DatePicker = forwardRef(function DatePicker2({
   className = "",
   "aria-label": ariaLabel,
   "aria-describedby": describedBy,
+  "aria-labelledby": labelledBy,
   id,
   name,
   disabled,
   placeholder,
+  required,
+  clearable: clearableProp,
+  form,
+  title,
+  tabIndex,
+  autoFocus,
+  onFocus,
+  onBlur,
   ...rest
 }, ref) {
+  const clearable = clearableProp ?? !required;
   const current = toInputValue2(value);
   const lo = toInputValue2(min);
   const hi = toInputValue2(max);
@@ -2179,7 +2338,14 @@ var DatePicker = forwardRef(function DatePicker2({
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const panelId = useId();
-  const pos = useDropdownPosition(triggerRef, open);
+  const valueId = useId();
+  const pos = useDropdownPosition(triggerRef, open, { popupRef: panelRef });
+  const [hasLabelElement, setHasLabelElement] = useState(false);
+  useBrowserLayoutEffect(() => {
+    const labelled = !!id && (triggerRef.current?.labels?.length ?? 0) > 0;
+    if (labelled !== hasLabelElement) setHasLabelElement(labelled);
+  });
+  const describeValue = !ariaLabel && (!!labelledBy || hasLabelElement);
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (e) => {
@@ -2221,33 +2387,56 @@ var DatePicker = forwardRef(function DatePicker2({
         max: hi || void 0,
         onChange: (event) => onChange?.(fromInputValue(event.target.value)),
         className: inputClasses({ invalid, size, className }),
+        "aria-labelledby": labelledBy,
+        required,
+        form,
+        title,
+        tabIndex,
+        autoFocus,
+        onFocus,
+        onBlur,
         ...rest
       }
     );
   }
+  const triggerAttributes = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => GLOBAL_ATTRIBUTE.test(key))
+  );
+  const todayKey = toISODate(/* @__PURE__ */ new Date());
+  const todayAllowed = (!lo || todayKey >= lo) && (!hi || todayKey <= hi);
+  const placeholderText = placeholder ?? strings.placeholder;
   return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "relative", children: [
-    /* @__PURE__ */ jsx("input", { ref, type: "hidden", name, value: current }),
+    /* @__PURE__ */ jsx("input", { ref, type: "hidden", name, form, value: current }),
     /* @__PURE__ */ jsxs(
       "button",
       {
         ref: triggerRef,
         type: "button",
+        ...triggerAttributes,
         id,
         disabled,
+        title,
+        tabIndex,
+        autoFocus,
+        onFocus,
+        onBlur,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         "aria-controls": open ? panelId : void 0,
-        "aria-describedby": describedBy,
+        "aria-labelledby": labelledBy,
+        "aria-describedby": [describeValue ? valueId : void 0, describedBy].filter(Boolean).join(" ") || void 0,
         "aria-invalid": invalid || void 0,
+        "aria-required": required || void 0,
         "aria-label": ariaLabel ? `${ariaLabel}${current ? `, ${display(current, names)}` : ""}` : void 0,
         onClick: () => setOpen((o) => !o),
         className: `${inputClasses({ invalid, size, className })} flex items-center justify-between text-left`,
         children: [
-          /* @__PURE__ */ jsx("span", { className: current ? "text-gray-900" : "text-gray-400", children: current ? display(current, names) : placeholder ?? strings.placeholder }),
+          /* @__PURE__ */ jsx("span", { className: current ? "text-gray-900" : "text-gray-400", children: current ? display(current, names) : placeholderText }),
           /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0 text-gray-400", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3M4 11h16M5 7h14a1 1 0 011 1v11a1 1 0 01-1 1H5a1 1 0 01-1-1V8a1 1 0 011-1z" }) })
         ]
       }
     ),
+    describeValue && /* @__PURE__ */ jsx("span", { id: valueId, className: "sr-only", children: current ? display(current, names) : placeholderText }),
     open && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -2263,6 +2452,9 @@ var DatePicker = forwardRef(function DatePicker2({
             right: pos?.right,
             top: pos?.top,
             bottom: pos?.bottom,
+            // 288 px where it fits; narrower, never past the box's margins,
+            // in a box that cannot hold that.
+            maxWidth: pos?.maxWidth,
             // Hidden for the first paint until the layout effect measures the
             // trigger, so the panel never flashes at (0,0).
             visibility: pos ? void 0 : "hidden"
@@ -2282,8 +2474,8 @@ var DatePicker = forwardRef(function DatePicker2({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between border-t border-gray-100 pt-2", children: [
-              /* @__PURE__ */ jsx(
+            (clearable || todayAllowed) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between border-t border-gray-100 pt-2", children: [
+              clearable && /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -2296,7 +2488,7 @@ var DatePicker = forwardRef(function DatePicker2({
                   children: strings.clear
                 }
               ),
-              /* @__PURE__ */ jsx(
+              todayAllowed && /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -2305,7 +2497,7 @@ var DatePicker = forwardRef(function DatePicker2({
                     triggerRef.current?.focus();
                     onChange?.(/* @__PURE__ */ new Date());
                   },
-                  className: "rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50",
+                  className: "ml-auto rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50",
                   children: strings.today
                 }
               )
@@ -4269,12 +4461,15 @@ function Accordion({
   }) });
 }
 var SIDE_POS = {
-  top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
-  left: "right-full top-1/2 -translate-y-1/2 mr-1.5",
-  right: "left-full top-1/2 -translate-y-1/2 ml-1.5"
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-3",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-3",
+  left: "right-full top-1/2 -translate-y-1/2 mr-3",
+  right: "left-full top-1/2 -translate-y-1/2 ml-3"
 };
 var GAP2 = 6;
+var ARROW_DEPTH = 6;
+var ARROW_INSET = 16;
+var samePlace = (a, b) => a.left === b.left && a.top === b.top && a.maxWidth === b.maxWidth && a.maxHeight === b.maxHeight && a.side === b.side && a.arrow?.left === b.arrow?.left && a.arrow?.top === b.arrow?.top;
 function Tooltip({ content, side = "top", delay = 200, children }) {
   const [show, setShow] = useState(false);
   const [placed, setPlaced] = useState(null);
@@ -4301,13 +4496,23 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
       if (!wrap || !tip) return;
       const bounds = popupBounds(wrap);
       const maxWidth = Math.max(0, bounds.right - bounds.left - 2 * VIEWPORT_MARGIN);
+      const maxHeight = Math.max(0, bounds.bottom - bounds.top - 2 * VIEWPORT_MARGIN);
       tip.style.maxWidth = `${maxWidth}px`;
+      tip.style.maxHeight = `${maxHeight}px`;
       const size = tip.getBoundingClientRect();
       if (size.width <= 0 || size.height <= 0) return;
       const anchor = wrap.getBoundingClientRect();
-      const at = placeBeside(anchor, size, side, bounds, GAP2);
-      const next = { left: at.left - anchor.left, top: at.top - anchor.top, maxWidth };
-      setPlaced((prev) => prev && prev.left === next.left && prev.top === next.top && prev.maxWidth === next.maxWidth ? prev : next);
+      const at = placeBeside(anchor, size, side, bounds, GAP2 + ARROW_DEPTH);
+      const point = placeArrow(anchor, at, size, ARROW_INSET, ARROW_DEPTH);
+      const next = {
+        left: at.left - anchor.left,
+        top: at.top - anchor.top,
+        maxWidth,
+        maxHeight,
+        side: at.side,
+        arrow: point && { left: point.x - anchor.left, top: point.y - anchor.top }
+      };
+      setPlaced((prev) => prev && samePlace(prev, next) ? prev : next);
     };
     place();
     window.addEventListener("scroll", place, true);
@@ -4329,6 +4534,8 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
   const trigger = isValidElement(children) ? cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
   }) : children;
+  const glass = show ? glassStyle() : void 0;
+  const fill = show ? glassFill() : void 0;
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -4347,6 +4554,8 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
         // its window is wide wraps inside it instead of running past both
         // edges. `whitespace-normal` and `text-start` so a trigger inside a
         // `nowrap` or right-aligned cell does not hand the bubble its own.
+        // `box-border` so the caps measure the whole bubble, padding and
+        // border included, in a host without Tailwind's preflight.
         // Nothing here animates, so there is no motion to reduce.
         /* @__PURE__ */ jsx(
           "span",
@@ -4354,13 +4563,46 @@ function Tooltip({ content, side = "top", delay = 200, children }) {
             ref: tipRef,
             id,
             role: "tooltip",
-            className: `pointer-events-none absolute z-[300] w-max whitespace-normal break-words text-start rounded-md px-2 py-1 text-xs text-gray-800 ${placed ? "" : SIDE_POS[side]}`,
+            className: `pointer-events-none absolute z-[300] box-border w-max overflow-hidden whitespace-normal break-words text-start rounded-md px-2 py-1 text-xs text-gray-800 ${placed ? "" : SIDE_POS[side]}`,
             style: {
-              ...glassStyle(),
-              ...placed && { left: placed.left, top: placed.top, maxWidth: placed.maxWidth }
+              ...glass,
+              ...placed && {
+                left: placed.left,
+                top: placed.top,
+                maxWidth: placed.maxWidth,
+                maxHeight: placed.maxHeight
+              }
             },
             children: content
           }
+        ),
+        show && (!placed || placed.arrow) && // The arrow is the bubble's SIBLING, not its child: the bubble is
+        // `overflow: hidden` for its height cap, and an arrow inside it would
+        // be cut off at the very edge it is meant to stand out from. Drawn after
+        // the bubble on the same layer, so it lies over the bubble's border
+        // where the two meet and there is no seam.
+        //
+        // `data-side` is the side the BUBBLE is on, after any flip; ui.css
+        // turns it into which way the arrow points and which two of its edges
+        // carry the border. Unmeasured, it is the side asked for and ui.css
+        // centres the arrow there, as `SIDE_POS` centres the bubble.
+        //
+        // Decorative: the bubble's text is the description, and the arrow says
+        // nothing a screen reader needs.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "rosh-tooltip-arrow",
+            "data-side": placed?.side ?? side,
+            style: {
+              background: fill,
+              // The bubble's border as one value, for ui.css to put on the two
+              // edges that face outward — the side's own rule picks which.
+              ["--rosh-tooltip-edge"]: glass?.border,
+              ...placed?.arrow && { left: placed.arrow.left, top: placed.arrow.top }
+            }
+          }
         )
       ]
     }
@@ -8419,6 +8661,12 @@ function TopNav({ items, activeKey, onSelect, brand, actions, className }) {
     }
   );
 }
+var TRIGGER_CLASS = "inline-flex items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)] disabled:cursor-not-allowed disabled:opacity-60";
+var OWNS_Z = /(^|[\s:])!?z-/;
+var TYPEAHEAD_MS = 500;
+var CHECK = /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" }) });
+var isLink = (entry) => entry.type === "link" || entry.type === void 0 && typeof entry.href === "string";
+var isFocusable = (entry) => !!entry && entry.type !== "label" && entry.type !== "divider" && !entry.disabled;
 function DropdownMenu({
   trigger,
   items,
@@ -8426,35 +8674,84 @@ function DropdownMenu({
   side = "bottom",
   "aria-label": ariaLabel,
   className = "",
+  triggerClassName,
+  menuClassName = "",
+  minWidth = 180,
+  linkAs,
   disabled
 }) {
   const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(0);
+  const [active, setActive] = useState(-1);
   const wrapRef = useRef(null);
   const triggerRef = useRef(null);
-  const itemRefs = useRef([]);
+  const menuRef = useRef(null);
+  const typed = useRef({ text: "", at: 0 });
   const menuId = useId();
+  const triggerId = useId();
   const close = useCallback((restoreFocus) => {
     setOpen(false);
     if (restoreFocus) triggerRef.current?.focus();
   }, []);
-  const enabledFrom = (from, step) => {
-    for (let i = 0; i < items.length; i += 1) {
-      const at = ((from + step * i) % items.length + items.length) % items.length;
-      if (!items[at]?.disabled) return at;
+  const focusableFrom = (from, step) => {
+    const n = items.length;
+    for (let i = 0; i < n; i += 1) {
+      const at = ((from + step * i) % n + n) % n;
+      if (isFocusable(items[at])) return at;
     }
-    return from;
+    return -1;
   };
+  const surface = () => menuRef.current?.closest("[data-popup-menu-tree]") ?? null;
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (e) => {
-      if (!wrapRef.current?.contains(e.target)) close(false);
+      const target = e.target;
+      if (wrapRef.current?.contains(target) || surface()?.contains(target)) return;
+      close(false);
     };
     document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+    const offOverlay = onOverlayOpen(() => close(false));
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      offOverlay();
+    };
   }, [open, close]);
+  const place = useCallback(() => {
+    const el = surface();
+    const anchor = triggerRef.current;
+    if (!el || !anchor) return;
+    const s = el.style;
+    s.left = "0px";
+    s.top = "0px";
+    s.maxWidth = "none";
+    s.maxHeight = "none";
+    const size = { width: el.offsetWidth, height: el.offsetHeight };
+    const at = placeMenu({
+      trigger: anchor.getBoundingClientRect(),
+      menu: size,
+      bounds: popupBounds(anchor),
+      align,
+      side
+    });
+    s.left = `${at.left}px`;
+    s.top = `${at.top}px`;
+    s.maxWidth = `${at.maxWidth}px`;
+    s.maxHeight = `${at.maxHeight}px`;
+    s.overflowY = size.height > at.maxHeight ? "auto" : "";
+    el.dataset.side = at.side;
+    el.dataset.align = align;
+  }, [align, side]);
+  useBrowserLayoutEffect(() => {
+    if (open) place();
+  });
+  useEffect(() => {
+    if (!open) return;
+    return followAnchor(() => triggerRef.current, place);
+  }, [open, place]);
   useEffect(() => {
-    if (open) itemRefs.current[active]?.focus();
+    if (!open) return;
+    const menu = menuRef.current;
+    const target = isFocusable(items[active]) ? menu?.querySelector(`[data-dropdown-index="${active}"]`) : null;
+    (target ?? menu)?.focus({ preventScroll: true });
   }, [open, active]);
   useEffect(() => {
     if (!open) return;
@@ -8471,80 +8768,212 @@ function DropdownMenu({
   const onTriggerKeyDown = (e) => {
     if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      openAt(enabledFrom(0, 1));
+      openAt(focusableFrom(0, 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      openAt(enabledFrom(items.length - 1, -1));
+      openAt(focusableFrom(items.length - 1, -1));
+    }
+  };
+  const typeahead = (e) => {
+    const now = Date.now();
+    const char = e.key.toLowerCase();
+    const text = now - typed.current.at < TYPEAHEAD_MS ? typed.current.text + char : char;
+    typed.current = { text, at: now };
+    const repeated = [...text].every((c) => c === text[0]);
+    const query = repeated ? text[0] : text;
+    const from = repeated ? active + 1 : Math.max(active, 0);
+    const menu = menuRef.current;
+    const n = items.length;
+    for (let i = 0; i < n; i += 1) {
+      const at = ((from + i) % n + n) % n;
+      if (!isFocusable(items[at])) continue;
+      const label = menu?.querySelector(`[data-dropdown-index="${at}"]`)?.textContent?.trim().toLowerCase() ?? "";
+      if (label.startsWith(query)) {
+        e.preventDefault();
+        setActive(at);
+        return;
+      }
     }
   };
   const onMenuKeyDown = (e) => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setActive(enabledFrom(active + 1, 1));
+      setActive(focusableFrom(active + 1, 1));
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActive(enabledFrom(active - 1, -1));
+      setActive(focusableFrom(active - 1, -1));
     } else if (e.key === "Home") {
       e.preventDefault();
-      setActive(enabledFrom(0, 1));
+      setActive(focusableFrom(0, 1));
     } else if (e.key === "End") {
       e.preventDefault();
-      setActive(enabledFrom(items.length - 1, -1));
+      setActive(focusableFrom(items.length - 1, -1));
     } else if (e.key === "Tab") {
       e.preventDefault();
       close(true);
+    } else if (e.key === " ") {
+      const target = e.target;
+      if (target.matches?.("a[href]")) {
+        e.preventDefault();
+        target.click();
+      }
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      typeahead(e);
     }
   };
-  const select = (item) => {
-    if (item.disabled) return;
+  const choose = (entry) => {
+    if (entry.disabled) return;
     close(true);
-    item.onSelect();
+    entry.onSelect();
+  };
+  const Link = linkAs ?? "a";
+  const rowProps = (i, entry) => ({
+    "data-dropdown-index": i,
+    // One tab stop for the whole menu; the arrows move inside it.
+    tabIndex: i === active ? 0 : -1,
+    onMouseEnter: () => {
+      if (!entry.disabled) setActive(i);
+    }
+  });
+  const renderEntry = (entry, i) => {
+    if (entry.type === "divider") {
+      return /* @__PURE__ */ jsx("div", { role: "separator", children: /* @__PURE__ */ jsx(PopupMenuDivider, {}) }, entry.key);
+    }
+    if (entry.type === "label") {
+      return /* @__PURE__ */ jsx("div", { id: `${menuId}-label-${i}`, children: /* @__PURE__ */ jsx(PopupMenuLabel, { children: entry.label }) }, entry.key);
+    }
+    if (entry.type === "radio") {
+      const look2 = itemLook(false, entry.disabled, "");
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": entry.checked,
+          disabled: entry.disabled,
+          className: look2.className,
+          style: look2.style,
+          onClick: () => choose(entry),
+          ...rowProps(i, entry),
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex h-4 w-4 shrink-0 items-center justify-center", children: entry.checked && CHECK }),
+            entry.icon,
+            entry.label
+          ]
+        },
+        entry.key
+      );
+    }
+    if (isLink(entry)) {
+      const look2 = itemLook(false, entry.disabled, `no-underline ${entry.current ? "font-medium" : ""}`);
+      if (entry.disabled) {
+        return /* @__PURE__ */ jsxs("a", { role: "menuitem", "aria-disabled": "true", className: look2.className, style: look2.style, ...rowProps(i, entry), children: [
+          entry.icon,
+          entry.label
+        ] }, entry.key);
+      }
+      return /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: entry.href,
+          role: "menuitem",
+          "aria-current": entry.current ? "page" : void 0,
+          className: look2.className,
+          style: look2.style,
+          onClick: () => close(true),
+          ...rowProps(i, entry),
+          children: [
+            entry.icon,
+            entry.label
+          ]
+        },
+        entry.key
+      );
+    }
+    const look = itemLook(entry.danger, entry.disabled, "");
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        disabled: entry.disabled,
+        className: look.className,
+        style: look.style,
+        onClick: () => choose(entry),
+        ...rowProps(i, entry),
+        children: [
+          entry.icon,
+          entry.label
+        ]
+      },
+      entry.key
+    );
+  };
+  const renderEntries = () => {
+    const out = [];
+    for (let i = 0; i < items.length; ) {
+      const entry = items[i];
+      if (entry.type !== "radio") {
+        out.push(renderEntry(entry, i));
+        i += 1;
+        continue;
+      }
+      const start = i;
+      const run = [];
+      while (i < items.length && items[i].type === "radio") {
+        run.push(renderEntry(items[i], i));
+        i += 1;
+      }
+      const heading = items[start - 1]?.type === "label" ? `${menuId}-label-${start - 1}` : void 0;
+      out.push(/* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": heading, children: run }, `group:${entry.key}`));
+    }
+    return out;
+  };
+  const menuStyle = {
+    // The popup layer, as every portalled kit popup: above dialogs and the
+    // window stack, so a menu opened in either is drawn over it. A caller that
+    // layered it with a `z-…` class keeps its own.
+    ...OWNS_Z.test(menuClassName) ? {} : { zIndex: Z_LAYERS.popup },
+    minWidth
   };
   return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: `relative inline-flex ${className}`.trim(), children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         ref: triggerRef,
+        id: triggerId,
         type: "button",
         "aria-haspopup": "menu",
         "aria-expanded": open,
         "aria-controls": open ? menuId : void 0,
         "aria-label": ariaLabel,
         disabled,
-        onClick: () => open ? close(false) : openAt(enabledFrom(0, 1)),
+        onClick: () => open ? close(false) : openAt(focusableFrom(0, 1)),
         onKeyDown: onTriggerKeyDown,
-        className: "inline-flex items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 rosh-focus-ring focus-visible:ring-2 focus-visible:ring-[color:var(--rosh-focus-ring-solid)] disabled:cursor-not-allowed disabled:opacity-60",
+        className: triggerClassName ?? TRIGGER_CLASS,
         children: trigger
       }
     ),
-    open && /* @__PURE__ */ jsx(
+    open && // No `onClose`: PopupMenu's own dismissal calls the same callback for
+    // Escape and for a click elsewhere, and those want opposite things.
+    // Escape is the user putting the menu away, so focus goes back to the
+    // trigger; a click elsewhere is them going somewhere, and dragging
+    // focus back would take them off what they just clicked. The handlers
+    // above tell the two apart.
+    /* @__PURE__ */ jsx(PopupMenu, { portal: true, className: menuClassName, style: menuStyle, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: `absolute z-50 ${side === "top" ? "bottom-full mb-1" : "top-full mt-1"} ${align === "end" ? "right-0" : "left-0"}`,
+        ref: menuRef,
+        id: menuId,
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabel ? void 0 : triggerId,
+        tabIndex: -1,
         onKeyDown: onMenuKeyDown,
-        children: /* @__PURE__ */ jsx(PopupMenu, { portal: false, minWidth: 180, children: /* @__PURE__ */ jsx("div", { id: menuId, role: "menu", "aria-orientation": "vertical", "aria-label": ariaLabel, children: items.map((item, i) => /* @__PURE__ */ jsxs(
-          PopupMenuItem,
-          {
-            ref: (el) => {
-              itemRefs.current[i] = el;
-            },
-            role: "menuitem",
-            tabIndex: i === active ? 0 : -1,
-            danger: item.danger,
-            disabled: item.disabled,
-            onMouseEnter: () => {
-              if (!item.disabled) setActive(i);
-            },
-            onClick: () => select(item),
-            children: [
-              item.icon,
-              item.label
-            ]
-          },
-          item.key
-        )) }) })
+        children: renderEntries()
       }
-    )
+    ) })
   ] });
 }
 var APP_UPDATE_POLL_MS = 6e4;
@@ -13673,6 +14102,6 @@ function ChordChart({
   ] });
 }
 
-export { APP_UPDATE_POLL_MS, Accordion, AppUpdateBanner, AttachButton, AttachmentDropZone, AttachmentList, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BoxPlotChart, BrandAssetEditor, BudgetBar, CHART_INK, Calendar, CandlestickChart, Card, CartesianPlot, ChartBrush, ChartDefs, ChartDot, ChartFrame, ChartHighlightProvider, ChartSkeleton, ChartTooltip, ChatTemplate, Checkbox_default, CheckoutTemplate, ChordChart, ColoredBadge, ColumnChart, ComposerAttachments, ContainerFillChart, CountBadge, DAY_MS, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DateTimePicker_default, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker_default, FormErrorSummary, FormField, FormLayoutPage, FunnelChart, GROUP_COLORS, GROUP_COLORS_SOLID, GalleryTemplate, GlobalSearch, Grid, HeatmapChart, HelpCenter, HistogramChart, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, LineChart, ListFooter, ListLoadError, MAX_FRACTION_DIGITS, MENU_MAX_HEIGHT, MOTION, Markdown, MediaUploadField, MediaUploadGrid, Meter, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, POPUP_MAX_WIDTH, POST_PRODUCTION_STATUSES, PageHeader, Pagination, PaperclipGlyph, Paragraph, PieChart, PortalBrandingProvider, ProductionTimeline, RADAR_SERIES_CAP, RadarChart, RadialBarChart, RadioGroup, Radio_default, RangeChart, RankedBars, SCATTER_SERIES_CAP, SERIES_SLOT_COUNT, SERIES_VARS, STAGES, STATUS_VARS, SankeyChart, ScatterChart, SearchableSelect, Segmented, Select_default, SettingRow, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Snippet, Sparkline, Stack, StatCard, StatTile, Statistic, StatusBadge, StatusBadgeProvider, Stepper, SunburstChart, Switch_default, Tabs, TagInput, Text, Textarea_default, TileButton_default, TimePicker_default, TimeSeriesChart, TimelineTrack, Title, Tooltip, TopNav, TreemapChart, WaterfallChart, angleScale, appendKey, applyThemePrefs, arcPath, areaBetween, areaFrom, autoHighlightIndex, backspace, bandScale, binValues, budgetState, bumpPath, calcOverall, calcReportOverall, copyToClipboard, curvePath, dashFor, fillFor, fillId, firstEnabledIndex, fmtSliderDate, formatDate, fromKey, glowId, groundId, groupColors, highlightOpacity, inputClasses, isSeverityTone, ladderScale, lastEnabledIndex, linearPath, linearScale, logScale, maskId, matchTypeahead, mediaFileName, monotonePath, nextEnabledIndex, niceMax, polygonPoints, popupBounds, radiusScale, resolvePortalBrandAsset, resolveSeriesColor, resolveTheme, selectionAt, seriesColor, severityOf, splinePath, squarify, stagger, stepPath, tabButtonId, tabPanelId, toDayMs, toISODate, toKey, useAppUpdate, useClickOutside, useDropdownPosition, useHighlight, usePlotWidth, usePortalBranding, useProductionTimeline, useTheme };
-//# sourceMappingURL=chunk-OLJDJYSU.js.map
-//# sourceMappingURL=chunk-OLJDJYSU.js.map
+export { APP_UPDATE_POLL_MS, Accordion, AppUpdateBanner, AttachButton, AttachmentDropZone, AttachmentList, AuthScreen, Avatar, AvatarGroup, Banner, BarChart, BoxPlotChart, BrandAssetEditor, BudgetBar, CHART_INK, Calendar, CandlestickChart, Card, CartesianPlot, ChartBrush, ChartDefs, ChartDot, ChartFrame, ChartHighlightProvider, ChartSkeleton, ChartTooltip, ChatTemplate, Checkbox_default, CheckoutTemplate, ChordChart, ColoredBadge, ColumnChart, ComposerAttachments, ContainerFillChart, CountBadge, DAY_MS, DashboardTemplate, DataTable, DataTablePage, DatePicker_default, DateRangePicker, DateTimePicker_default, DescriptionList, Divider, DonutChart, Drawer, DropdownMenu, EmailTemplate, EmptyState, ErrorBoundary, ErrorPage, FilePicker_default, FormErrorSummary, FormField, FormLayoutPage, FunnelChart, GROUP_COLORS, GROUP_COLORS_SOLID, GalleryTemplate, GlobalSearch, Grid, HeatmapChart, HelpCenter, HistogramChart, INPUT_BASE, INPUT_SIZES, IconButton_default, Inline, InputNumber_default, Input_default, Kanban, Label, LineChart, ListFooter, ListLoadError, MAX_FRACTION_DIGITS, MENU_MAX_HEIGHT, MOTION, Markdown, MediaUploadField, MediaUploadGrid, Meter, MetricBar, MilestoneTimeline, NativeSelect, NumericKeypad, POPUP_MAX_WIDTH, POST_PRODUCTION_STATUSES, PageHeader, Pagination, PaperclipGlyph, Paragraph, PieChart, PortalBrandingProvider, ProductionTimeline, RADAR_SERIES_CAP, RadarChart, RadialBarChart, RadioGroup, Radio_default, RangeChart, RankedBars, SCATTER_SERIES_CAP, SERIES_SLOT_COUNT, SERIES_VARS, STAGES, STATUS_VARS, SankeyChart, ScatterChart, SearchableSelect, Segmented, Select_default, SettingRow, SidebarActionButton, SidebarGroupLabel, SidebarNavItem, Skeleton, Snippet, Sparkline, Stack, StatCard, StatTile, Statistic, StatusBadge, StatusBadgeProvider, Stepper, SunburstChart, Switch_default, Tabs, TagInput, Text, Textarea_default, TileButton_default, TimePicker_default, TimeSeriesChart, TimelineTrack, Title, Tooltip, TopNav, TreemapChart, WaterfallChart, angleScale, appendKey, applyThemePrefs, arcPath, areaBetween, areaFrom, autoHighlightIndex, backspace, bandScale, binValues, budgetState, bumpPath, calcOverall, calcReportOverall, copyToClipboard, curvePath, dashFor, fillFor, fillId, firstDayOfWeek, firstEnabledIndex, fmtSliderDate, formatDate, fromKey, glowId, groundId, groupColors, highlightOpacity, inputClasses, isSeverityTone, ladderScale, lastEnabledIndex, linearPath, linearScale, logScale, maskId, matchTypeahead, mediaFileName, monotonePath, nextEnabledIndex, niceMax, polygonPoints, popupBounds, radiusScale, resolvePortalBrandAsset, resolveSeriesColor, resolveTheme, selectionAt, seriesColor, severityOf, splinePath, squarify, stagger, stepPath, tabButtonId, tabPanelId, toDayMs, toISODate, toKey, useAppUpdate, useClickOutside, useDropdownPosition, useHighlight, usePlotWidth, usePortalBranding, useProductionTimeline, useTheme };
+//# sourceMappingURL=chunk-YA4EE7ST.js.map
+//# sourceMappingURL=chunk-YA4EE7ST.js.map