impact-nova 2.2.2 → 2.2.4

package/dist/components/forms/date-picker/week-range-picker.js

@@ -2,34 +2,34 @@ import { jsx as u, jsxs as T } from "react/jsx-runtime";
 import * as l from "react";
 import { Cross as Me, CalendarMonth as Ge } from "impact-nova-icons";
 import { format as g } from "date-fns";
-import { cn as G } from "../../../lib/utils.js";
-import { usePickerDismissActionsRef as Je, usePickerFooterDismissNudge as Qe, createRangePickerOpenChangeHandler as Ue, parseDateInput as J, normalizeOrderedRange as Xe, compareDates as Ze, flashRangeReorder as _e, isDateInputInvalid as oe, resolveRangeFieldBlur as V, resolveRangePickerDismissFlash as $e, deferRangeInputBlur as Ye, maskDateInput as se, resolveDateInputOnBlur as O } from "./date-input-behavior.js";
-import { useFieldChrome as Fe } from "../../../lib/primitives/use-field-chrome.js";
-import { Popover as et, PopoverAnchor as tt, PopoverContent as rt } from "../../feedback/popover/popover.js";
-import { Calendar as nt } from "../../data-display/calendar/calendar.js";
-import { buildDateBoundsMatcher as ot } from "../../../lib/date-bounds-matcher.js";
-import { Tooltip as ie, TooltipTrigger as le, TooltipContent as ae } from "../../feedback/tooltip/tooltip.js";
-import { resolveWeekSelection as st } from "../../../lib/fiscal-calendar.js";
-import { useImpactNovaI18n as it } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as lt } from "../../../i18n/getDateFnsLocale.js";
-import { coerceWeekRangeApply as at, isWeekRangeSelection as ct } from "./calendar-selection-adapters.js";
+import { cn as J } from "../../../lib/utils.js";
+import { usePickerDismissActionsRef as Je, usePickerFooterDismissNudge as Qe, createRangePickerOpenChangeHandler as Ue, parseDateInput as Q, normalizeOrderedRange as Xe, compareDates as Ze, flashRangeReorder as _e, isDateInputInvalid as se, resolveRangeFieldBlur as V, resolveRangePickerDismissFlash as $e, handlePickerSurfacePointerDown as Ye, deferRangeInputBlur as Fe, maskDateInput as ie, resolveDateInputOnBlur as O } from "./date-input-behavior.js";
+import { useFieldChrome as et } from "../../../lib/primitives/use-field-chrome.js";
+import { Popover as tt, PopoverAnchor as rt, PopoverContent as nt } from "../../feedback/popover/popover.js";
+import { Calendar as ot } from "../../data-display/calendar/calendar.js";
+import { buildDateBoundsMatcher as st } from "../../../lib/date-bounds-matcher.js";
+import { Tooltip as le, TooltipTrigger as ae, TooltipContent as ce } from "../../feedback/tooltip/tooltip.js";
+import { resolveWeekSelection as it } from "../../../lib/fiscal-calendar.js";
+import { useImpactNovaI18n as lt } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as at } from "../../../i18n/getDateFnsLocale.js";
+import { coerceWeekRangeApply as ct, isWeekRangeSelection as ft } from "./calendar-selection-adapters.js";
 const x = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, S = (t) => t?.from ? { from: t.from, to: t.to } : void 0;
-function ce(t, a) {
+function fe(t, a) {
   return !t && !a ? !0 : !t || !a ? !1 : t.startDate.getTime() === a.startDate.getTime();
 }
-function ft(t, a) {
-  return !t && !a ? !0 : !t || !a ? !1 : ce(t.from, a.from) && ce(t.to, a.to);
+function dt(t, a) {
+  return !t && !a ? !0 : !t || !a ? !1 : fe(t.from, a.from) && fe(t.to, a.to);
 }
-const dt = l.forwardRef(
+const pt = l.forwardRef(
   ({
     value: t,
     onChange: a,
     format: o = "MM/dd/yyyy",
-    placeholder: fe,
-    minDate: de,
-    maxDate: pe,
-    startMonth: me,
-    endMonth: ue,
+    placeholder: de,
+    minDate: pe,
+    maxDate: me,
+    startMonth: ue,
+    endMonth: ge,
     showFooter: k = !0,
     calendarType: L = "calendar",
     fiscalMode: j = "basic",
@@ -38,29 +38,29 @@ const dt = l.forwardRef(
     fiscalYearStartMonth: z = 1,
     weekStartsOn: H = 1,
     disabled: d,
-    className: ge,
-    error: ke,
-    isError: Re,
-    size: Q,
-    label: De,
-    helperText: he,
-    helperTextPosition: ye = "absolute",
-    required: ve,
-    prefix: pt,
-    prefixClick: mt,
-    ...xe
-  }, be) => {
-    const U = ke ?? Re, Ce = Fe({
-      label: De,
-      helperText: he,
-      helperTextPosition: ye,
-      error: U,
-      required: ve,
+    className: ke,
+    error: Re,
+    isError: De,
+    size: U,
+    label: he,
+    helperText: ye,
+    helperTextPosition: ve = "absolute",
+    required: xe,
+    prefix: mt,
+    prefixClick: ut,
+    ...be
+  }, Ce) => {
+    const X = Re ?? De, we = et({
+      label: he,
+      helperText: ye,
+      helperTextPosition: ve,
+      error: X,
+      required: xe,
       disabled: d ?? void 0,
       rootClassName: "w-full min-w-[240px]"
-    }), { locale: X, t: E } = it(), s = l.useMemo(() => lt(X), [X]), Z = fe ?? E("datePicker.selectWeekRange"), _ = l.useRef(null), Ie = l.useRef(null), $ = l.useRef(null), N = l.useRef(null), M = l.useRef(null);
-    l.useImperativeHandle(be, () => _.current);
-    const [p, R] = l.useState(!1), Y = Je(), { footerFlashKey: we, footerFlashTarget: Ee, popoverHandlers: We } = Qe(k, p, Y, $), W = l.useRef(!1), [c, D] = l.useState(t), [m, h] = l.useState(t?.from ? g(t.from.startDate, o, { locale: s }) : ""), [y, v] = l.useState(x(t) ? g(x(t), o, { locale: s }) : ""), [Pe, P] = l.useState(t?.from?.startDate || /* @__PURE__ */ new Date());
+    }), { locale: Z, t: E } = lt(), s = l.useMemo(() => at(Z), [Z]), _ = de ?? E("datePicker.selectWeekRange"), M = l.useRef(null), $ = l.useRef(null), Y = l.useRef(null), N = l.useRef(null), G = l.useRef(null);
+    l.useImperativeHandle(Ce, () => M.current);
+    const [p, R] = l.useState(!1), F = Je(), { footerFlashKey: Ie, footerFlashTarget: Ee, popoverHandlers: Pe } = Qe(k, p, F, Y), P = l.useRef(!1), [c, D] = l.useState(t), [m, h] = l.useState(t?.from ? g(t.from.startDate, o, { locale: s }) : ""), [y, v] = l.useState(x(t) ? g(x(t), o, { locale: s }) : ""), [We, W] = l.useState(t?.from?.startDate || /* @__PURE__ */ new Date());
     l.useEffect(() => {
       h(t?.from ? g(t.from.startDate, o, { locale: s }) : ""), v(x(t) ? g(x(t), o, { locale: s }) : ""), D(t);
     }, [t, o, s]);
@@ -69,23 +69,23 @@ const dt = l.forwardRef(
         disabled: d ?? void 0,
         showFooter: k,
         containerRef: N,
-        popoverContentRef: M,
+        popoverContentRef: G,
         setOpen: R
       })(e),
       [d, k]
-    ), F = l.useRef(!1);
+    ), ee = l.useRef(!1);
     l.useEffect(() => {
-      if (p && !F.current) {
-        const e = J(m, o, s);
-        e.parsed ? P(e.parsed) : c?.from ? P(c.from.startDate) : t?.from && P(t.from.startDate);
+      if (p && !ee.current) {
+        const e = Q(m, o, s);
+        e.parsed ? W(e.parsed) : c?.from ? W(c.from.startDate) : t?.from && W(t.from.startDate);
       }
-      F.current = p;
+      ee.current = p;
     }, [p, m, o, s, c?.from, t?.from]);
     const Se = (e) => {
-      const r = ct(e) ? e : void 0;
+      const r = ft(e) ? e : void 0;
       D(r), r?.from ? (h(g(r.from.startDate, o, { locale: s })), v(g(x(r), o, { locale: s }))) : (h(""), v("")), !k && r?.from && r?.to && r.from.startDate.getTime() !== r.to.startDate.getTime() && (a?.(r), R(!1));
     }, b = l.useCallback(
-      (e) => st(e, {
+      (e) => it(e, {
         calendarType: L,
         fiscalMode: j,
         selectionMode: K,
@@ -108,60 +108,60 @@ const dt = l.forwardRef(
         (i, f) => Ze(i.startDate, f.startDate)
       );
       return n.swapped && (n.from && h(g(n.from.startDate, o, { locale: s })), n.to && v(g(x({ from: n.from, to: n.to }), o, { locale: s })), _e(N.current)), { from: n.from, to: n.to };
-    }, [o, s]), ee = (e) => {
-      const r = at(e, S(c)), n = B(r?.from, r?.to), i = n.from ? { from: n.from, to: n.to } : void 0;
+    }, [o, s]), te = (e) => {
+      const r = ct(e, S(c)), n = B(r?.from, r?.to), i = n.from ? { from: n.from, to: n.to } : void 0;
       D(i), a?.(i), R(!1);
     }, A = () => {
       D(t), h(t?.from ? g(t.from.startDate, o, { locale: s }) : ""), v(x(t) ? g(x(t), o, { locale: s }) : ""), R(!1);
-    }, te = () => {
+    }, re = () => {
       D(void 0), h(""), v(""), a?.(void 0), k || R(!1);
     }, Be = (e) => {
-      const r = se(e.target.value, o, m);
+      const r = ie(e.target.value, o, m);
       if (h(r), r === "") {
         const f = { to: c?.to };
         D(f), k || a?.(void 0);
         return;
       }
-      const { parsed: n, isValid: i } = J(r, o, s);
+      const { parsed: n, isValid: i } = Q(r, o, s);
       if (i && n) {
-        const w = { from: b(n), to: c?.to };
-        D(w), c?.to && v(g(x(w), o, { locale: s })), P(n), k || a?.(S(w));
+        const I = { from: b(n), to: c?.to };
+        D(I), c?.to && v(g(x(I), o, { locale: s })), W(n), k || a?.(S(I));
       }
     }, Ne = (e) => {
-      const r = se(e.target.value, o, y);
+      const r = ie(e.target.value, o, y);
       if (v(r), r === "") {
         const f = { from: c?.from };
         D(f), k || a?.(S(f));
         return;
       }
-      const { parsed: n, isValid: i } = J(r, o, s);
+      const { parsed: n, isValid: i } = Q(r, o, s);
       if (i && n) {
-        const f = b(n), w = { from: c?.from, to: f };
-        D(w), c?.from && h(g(c.from.startDate, o, { locale: s })), P(n), k || a?.(S(w));
+        const f = b(n), I = { from: c?.from, to: f };
+        D(I), c?.from && h(g(c.from.startDate, o, { locale: s })), W(n), k || a?.(S(I));
       }
     }, Ae = () => {
-      const e = O(m, o, C, s), r = O(y, o, I, s);
-      e.resetToCommitted ? h(C) : e.parsed && h(e.display), r.resetToCommitted ? v(I) : r.parsed && v(r.display);
+      const e = O(m, o, C, s), r = O(y, o, w, s);
+      e.resetToCommitted ? h(C) : e.parsed && h(e.display), r.resetToCommitted ? v(w) : r.parsed && v(r.display);
       let n = e.parsed ? b(e.parsed) : c?.from, i = r.parsed ? b(r.parsed) : c?.to;
       n && i && ({ from: n, to: i } = B(n, i));
       const f = n ? { from: n, to: i } : void 0;
       f ? (D(f), a?.(f)) : !m && !y && (D(void 0), a?.(void 0));
-    }, re = () => {
-      Ye(
+    }, ne = () => {
+      Fe(
         N,
-        M,
+        G,
         () => {
-          const e = V(m, o, C, s), r = V(y, o, I, s);
-          e.resetToCommitted ? h(C) : e.parsed && h(e.display), r.resetToCommitted ? v(I) : r.parsed && v(r.display);
+          const e = V(m, o, C, s), r = V(y, o, w, s);
+          e.resetToCommitted ? h(C) : e.parsed && h(e.display), r.resetToCommitted ? v(w) : r.parsed && v(r.display);
           let n = e.parsed ? b(e.parsed) : e.resetToCommitted ? t?.from : c?.from, i = r.parsed ? b(r.parsed) : r.resetToCommitted ? t?.to : c?.to;
           n && i && ({ from: n, to: i } = B(n, i));
           const f = n || i ? { from: n, to: i } : void 0;
           D(f), k || (f ? a?.(f) : !m && !y && a?.(void 0));
         }
       );
-    }, ne = () => {
+    }, oe = () => {
       if (p && k) {
-        ee();
+        te();
         return;
       }
       if (!p) {
@@ -169,12 +169,12 @@ const dt = l.forwardRef(
           Ae();
           return;
         }
-        const e = O(m, o, C, s), r = O(y, o, I, s);
+        const e = O(m, o, C, s), r = O(y, o, w, s);
         if (e.parsed || r.parsed) return;
-        W.current = !0, R(!0);
+        P.current = !0, R(!0);
       }
-    }, C = t?.from ? g(t.from.startDate, o, { locale: s }) : "", I = x(t) ? g(x(t), o, { locale: s }) : "", Ve = C !== m, Oe = I !== y, Le = oe(m, o, s), je = oe(y, o, s), Ke = "Start Date", qe = "End Date", ze = l.useCallback(() => {
-      const e = V(m, o, C, s), r = V(y, o, I, s);
+    }, C = t?.from ? g(t.from.startDate, o, { locale: s }) : "", w = x(t) ? g(x(t), o, { locale: s }) : "", Ve = C !== m, Oe = w !== y, Le = se(m, o, s), je = se(y, o, s), Ke = "Start Date", qe = "End Date", ze = l.useCallback(() => {
+      const e = V(m, o, C, s), r = V(y, o, w, s);
       let n = e.parsed ? b(e.parsed) : e.resetToCommitted ? t?.from : c?.from, i = r.parsed ? b(r.parsed) : r.resetToCommitted ? t?.to : c?.to;
       n && i && ({ from: n, to: i } = B(n, i));
       const f = n || i ? { from: n, to: i } : void 0;
@@ -182,17 +182,17 @@ const dt = l.forwardRef(
         startInput: m,
         endInput: y,
         committedStart: C,
-        committedEnd: I,
+        committedEnd: w,
         committedRange: t,
         pendingRange: S(c),
         computeEffectiveRange: () => f,
-        rangesEqual: (w, He) => ft(w, He)
+        rangesEqual: (I, He) => dt(I, He)
       });
     }, [
       m,
       y,
       C,
-      I,
+      w,
       t,
       c,
       o,
@@ -201,73 +201,81 @@ const dt = l.forwardRef(
       b
     ]);
     return l.useLayoutEffect(() => {
-      Y.current = {
+      F.current = {
         onDismiss: A,
         resolveFlash: ze
       };
     }), /* @__PURE__ */ u(
       "div",
       {
-        ref: $,
+        ref: Y,
         "data-component": "week-range-picker",
         "data-disabled": d || void 0,
-        children: Ce.wrapControl(
-          /* @__PURE__ */ T(et, { open: d ? !1 : p, onOpenChange: Te, children: [
-            /* @__PURE__ */ u(tt, { asChild: !0, children: /* @__PURE__ */ T(
+        children: we.wrapControl(
+          /* @__PURE__ */ T(tt, { open: d ? !1 : p, onOpenChange: Te, children: [
+            /* @__PURE__ */ u(rt, { asChild: !0, children: /* @__PURE__ */ T(
               "div",
               {
                 ref: N,
                 "data-state": p ? "open" : "closed",
-                className: G(
+                onPointerDown: (e) => Ye({
+                  disabled: d,
+                  event: e,
+                  onOpen: () => R(!0),
+                  focusField: (r) => {
+                    r === "end" ? $.current?.focus() : M.current?.focus();
+                  }
+                }),
+                className: J(
                   "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
-                  U ? "border-destructive hover:border-destructive" : "border-field",
-                  Q === "sm" ? "h-6" : Q === "md" ? "h-[28px]" : "h-8",
+                  X ? "border-destructive hover:border-destructive" : "border-field",
+                  U === "sm" ? "h-6" : U === "md" ? "h-[28px]" : "h-8",
                   d && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
                   "cursor-pointer",
-                  ge
+                  ke
                 ),
                 children: [
                   /* @__PURE__ */ T("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
                     /* @__PURE__ */ u(
                       "input",
                       {
-                        ref: _,
+                        ref: M,
                         type: "text",
                         value: m,
                         onChange: Be,
-                        onBlur: re,
+                        onBlur: ne,
                         onClick: () => !d && R(!0),
                         onKeyDown: (e) => {
-                          e.key === "Enter" && !d && (e.preventDefault(), ne()), e.key === "ArrowDown" && !p && !d && (e.preventDefault(), W.current = !0, R(!0)), e.key === "Escape" && p && (e.preventDefault(), A());
+                          e.key === "Enter" && !d && (e.preventDefault(), oe()), e.key === "ArrowDown" && !p && !d && (e.preventDefault(), P.current = !0, R(!0)), e.key === "Escape" && p && (e.preventDefault(), A());
                         },
-                        placeholder: p ? o : Z,
+                        placeholder: p ? o : _,
                         disabled: !!d,
                         "aria-label": Ke,
                         "data-field": "start",
-                        className: G(
+                        className: J(
                           "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
                           Le ? "text-destructive" : Ve ? "text-content-placeholder" : ""
                         ),
-                        ...xe
+                        ...be
                       }
                     ),
                     /* @__PURE__ */ u(
                       "input",
                       {
-                        ref: Ie,
+                        ref: $,
                         type: "text",
                         value: y,
                         onChange: Ne,
-                        onBlur: re,
+                        onBlur: ne,
                         onClick: () => !d && R(!0),
                         onKeyDown: (e) => {
-                          e.key === "Enter" && !d && (e.preventDefault(), ne()), e.key === "ArrowDown" && !p && !d && (e.preventDefault(), W.current = !0, R(!0)), e.key === "Escape" && p && (e.preventDefault(), A());
+                          e.key === "Enter" && !d && (e.preventDefault(), oe()), e.key === "ArrowDown" && !p && !d && (e.preventDefault(), P.current = !0, R(!0)), e.key === "Escape" && p && (e.preventDefault(), A());
                         },
-                        placeholder: p ? o : Z,
+                        placeholder: p ? o : _,
                         disabled: !!d,
                         "aria-label": qe,
                         "data-field": "end",
-                        className: G(
+                        className: J(
                           "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
                           je ? "text-destructive" : Oe ? "text-content-placeholder" : ""
                         )
@@ -275,59 +283,59 @@ const dt = l.forwardRef(
                     )
                   ] }),
                   /* @__PURE__ */ T("div", { className: "flex items-center gap-1 shrink-0", children: [
-                    t?.from && !d && /* @__PURE__ */ T(ie, { children: [
-                      /* @__PURE__ */ u(le, { asChild: !0, children: /* @__PURE__ */ u(
+                    t?.from && !d && /* @__PURE__ */ T(le, { children: [
+                      /* @__PURE__ */ u(ae, { asChild: !0, children: /* @__PURE__ */ u(
                         "button",
                         {
                           type: "button",
                           tabIndex: 0,
                           "aria-label": E("calendar.clear"),
                           onClick: (e) => {
-                            e.stopPropagation(), te();
+                            e.stopPropagation(), re();
                           },
                           className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
                           children: /* @__PURE__ */ u(Me, { className: "size-3 hover:text-content text-content-icon" })
                         }
                       ) }),
-                      /* @__PURE__ */ u(ae, { variant: "tertiary", side: "top", children: E("calendar.clear") })
+                      /* @__PURE__ */ u(ce, { variant: "tertiary", side: "top", children: E("calendar.clear") })
                     ] }),
-                    /* @__PURE__ */ T(ie, { children: [
-                      /* @__PURE__ */ u(le, { asChild: !0, children: /* @__PURE__ */ u("button", { type: "button", tabIndex: 0, "aria-label": E("datePicker.selectWeekRange"), onClick: (e) => {
+                    /* @__PURE__ */ T(le, { children: [
+                      /* @__PURE__ */ u(ae, { asChild: !0, children: /* @__PURE__ */ u("button", { type: "button", tabIndex: 0, "aria-label": E("datePicker.selectWeekRange"), onClick: (e) => {
                         e.stopPropagation(), d || R(!p);
                       }, onKeyDown: (e) => {
-                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), d || (W.current = !0, R(!p)));
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), d || (P.current = !0, R(!p)));
                       }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ u(Ge, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
-                      /* @__PURE__ */ u(ae, { variant: "tertiary", side: "top", children: E("datePicker.selectWeekRange") })
+                      /* @__PURE__ */ u(ce, { variant: "tertiary", side: "top", children: E("datePicker.selectWeekRange") })
                     ] })
                   ] })
                 ]
               }
             ) }),
             /* @__PURE__ */ u(
-              rt,
+              nt,
               {
-                ref: M,
+                ref: G,
                 className: "w-auto p-0",
                 align: "start",
                 "aria-label": E("datePicker.selectWeekRange"),
                 onOpenAutoFocus: (e) => {
-                  W.current || e.preventDefault(), W.current = !1;
+                  P.current || e.preventDefault(), P.current = !1;
                 },
-                ...We,
+                ...Pe,
                 children: /* @__PURE__ */ u(
-                  nt,
+                  ot,
                   {
                     pickerType: "week",
                     weekMode: "range",
                     selectedWeeks: S(c),
-                    footerFlashKey: we,
+                    footerFlashKey: Ie,
                     footerFlashTarget: Ee,
                     onWeekSelect: Se,
-                    month: Pe,
-                    onMonthChange: P,
-                    disabled: ot(de, pe),
-                    startMonth: me,
-                    endMonth: ue,
+                    month: We,
+                    onMonthChange: W,
+                    disabled: st(pe, me),
+                    startMonth: ue,
+                    endMonth: ge,
                     showFooter: k,
                     calendarType: L,
                     fiscalMode: j,
@@ -335,9 +343,9 @@ const dt = l.forwardRef(
                     fiscalMonthPattern: q,
                     fiscalYearStartMonth: z,
                     weekStartsOn: H,
-                    onApply: ee,
+                    onApply: te,
                     onCancel: A,
-                    onClear: te,
+                    onClear: re,
                     captionLayout: "dropdown"
                   }
                 )
@@ -349,7 +357,7 @@ const dt = l.forwardRef(
     );
   }
 );
-dt.displayName = "WeekRangePicker";
+pt.displayName = "WeekRangePicker";
 export {
-  dt as WeekRangePicker
+  pt as WeekRangePicker
 };

package/dist/impact-nova-base.scss

@@ -190,12 +190,16 @@
     overflow: visible !important;
   }
 
-  /* Prevent focus ring clipping on containers with overflow hidden */
-  [data-component="statistics-card"]:has(:focus-visible),
-  [data-component="card"]:has(:focus-visible) {
+  /* Prevent focus ring clipping on KPI cards (no internal scroll surface). */
+  [data-component="statistics-card"]:has(:focus-visible) {
     overflow: visible !important;
   }
 
+  /* Inset focus ring for card footer actions inside overflow-hidden cards. */
+  [data-component="card"] [data-component="card-footer"] button:focus-visible {
+    outline-offset: -2px !important;
+  }
+
   /* Prevent focus ring clipping on tabs list - use overflow visible only */
   [data-tabs="list"]:has(:focus-visible) {
     overflow: visible !important;
@@ -208,11 +212,12 @@
   }
 
   /* Generic rule for containers that might clip focus rings.
-     Scroll/layout panels are excluded so focus does not break overflow containment. */
+     Scroll surfaces and their ancestors are excluded so focus does not break overflow containment. */
   [data-component]:has(:focus-visible):not(
+    [data-scroll-surface],
     [data-component="filter-panel-body"],
     [data-component="sheet-content"]
-  ) {
+  ):not(:has([data-scroll-surface])) {
     overflow: visible !important;
   }
 

package/dist/impact-nova-components.css

@@ -158,9 +158,10 @@
 
 /* ponytail: Quartz theme sets transition:all on header cells. Column virtualization updates
    `left` every horizontal-scroll frame — transitioning `all` makes headers lag behind the body.
-   Preserve AG Grid's column-move / auto-size animations via :not() guards. */
-.ag-root-wrapper:not(.ag-column-moving):not(.ag-animate-autosize) .ag-header-cell,
-.ag-root-wrapper:not(.ag-column-moving):not(.ag-animate-autosize) .ag-header-group-cell {
+   Preserve AG Grid's column-move animations via :not(.ag-column-moving); still kill autosize
+   width transitions on headers so min-height sheet open does not fade header labels. */
+.ag-root-wrapper:not(.ag-column-moving) .ag-header-cell,
+.ag-root-wrapper:not(.ag-column-moving) .ag-header-group-cell {
   transition: none;
 }
 
@@ -174,7 +175,8 @@
   background-color: var(--ag-header-background-color);
 }
 
-/* Pinned column depth — header: boundary cell. Body: row container (parent overflow:hidden clips cell shadow). */
+/* Pinned column depth — left header: boundary leaf cell. Right header/body: row container
+   (AG Grid v36 nests group headers inside .ag-grid-container-wrapper, not as direct children). */
 .ag-header-cell-last-left-pinned {
   box-shadow: 1px 0px 12px 0px color-mix(in srgb, var(--color-primary) 12%, transparent);
   clip-path: inset(0 -12px 0 0);
@@ -187,7 +189,9 @@
   z-index: 2;
 }
 
-.ag-header-cell-first-right-pinned {
+.ag-header-cell-first-right-pinned,
+.ag-header-row > .ag-grid-pinned-right-cells .ag-header-group-cell {
+  border-left: var(--ag-pinned-column-border);
   box-shadow: -1px 0px 12px 0px color-mix(in srgb, var(--color-primary) 12%, transparent);
   clip-path: inset(0 0 0 -12px);
   z-index: 2;