@nurix/ui-component-library 1.1.4-stage.116 → 1.1.4-stage.118

package/dist/index.d.mts

@@ -1408,6 +1408,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#1d4885";
             readonly borderDestructive: "#b91c1c";
             readonly borderInput: "#e5e5e5";
+            readonly borderInputHover: "#dadada";
             readonly hovOpacityPrimary: "#0a0a0a0d";
             readonly hovOpacitySecondary: "#0a0a0a0d";
             readonly hovSolidPrimary: "#fafafa";
@@ -1494,6 +1495,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#bfdbfe";
             readonly borderDestructive: "#f87171";
             readonly borderInput: "#262626";
+            readonly borderInputHover: "#404040";
             readonly hovOpacityPrimary: "#ffffff0d";
             readonly hovOpacitySecondary: "#ffffff1a";
             readonly hovSolidPrimary: "#262626";

package/dist/index.d.ts

@@ -1408,6 +1408,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#1d4885";
             readonly borderDestructive: "#b91c1c";
             readonly borderInput: "#e5e5e5";
+            readonly borderInputHover: "#dadada";
             readonly hovOpacityPrimary: "#0a0a0a0d";
             readonly hovOpacitySecondary: "#0a0a0a0d";
             readonly hovSolidPrimary: "#fafafa";
@@ -1494,6 +1495,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#bfdbfe";
             readonly borderDestructive: "#f87171";
             readonly borderInput: "#262626";
+            readonly borderInputHover: "#404040";
             readonly hovOpacityPrimary: "#ffffff0d";
             readonly hovOpacitySecondary: "#ffffff1a";
             readonly hovSolidPrimary: "#262626";

package/dist/index.js

@@ -6974,6 +6974,7 @@ var DEFAULT_THEME = {
       borderBrand: "#1d4885",
       borderDestructive: "#b91c1c",
       borderInput: "#e5e5e5",
+      borderInputHover: "#dadada",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#0a0a0a0d",
       hovOpacitySecondary: "#0a0a0a0d",
@@ -7065,6 +7066,7 @@ var DEFAULT_THEME = {
       borderBrand: "#bfdbfe",
       borderDestructive: "#f87171",
       borderInput: "#262626",
+      borderInputHover: "#404040",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#ffffff0d",
       hovOpacitySecondary: "#ffffff1a",
@@ -7305,14 +7307,19 @@ var INPUT_TOKENS = {
   // Borderless: used in table-like contexts (key-value editor). No visible
   // border at rest. Focus reveals the brand border. No hover/pressed overlay.
   fieldBgBorderless: "bg-transparent",
-  // Base border + focus-within treatment.
-  // Hover/pressed are painted via a pseudo-element overlay (see fieldOverlay) to avoid layout shift.
-  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:[border-radius:inherit] before:transition-colors before:bg-transparent hover:before:bg-interaction-hov-opacity-primary active:before:bg-interaction-pressed-opacity-primary [&>*]:relative [&>*]:z-10",
+  // Base border + focus-within treatment. Hover darkens the border (Figma
+  // hover variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
+  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening for the active (non-invalid, non-disabled)
+  // state. Applied conditionally by the component so it does not override
+  // the destructive border on invalid fields.
+  fieldHover: "hover:border-token-input-hover",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
   fieldBaseBorderless: "border border-transparent focus-within:border-token-brand disabled:pointer-events-none [&>*]:relative [&>*]:z-10",
-  fieldDisabled: "border-token-xlight hover:before:bg-transparent active:before:bg-transparent",
+  fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Leading/trailing icon slots (Figma: 16px, text-fg-grey-secondary)
   slotIcon: "shrink-0 size-4 [&>svg]:size-4 text-fg-grey-secondary",
@@ -7358,6 +7365,7 @@ var Input = React2.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
@@ -7376,9 +7384,10 @@ var Input = React2.forwardRef(
                 inputSize === "sm" ? INPUT_TOKENS.fieldSizeSm : INPUT_TOKENS.fieldSizeMd,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBgBorderless : inputVariant === "white" ? INPUT_TOKENS.fieldBgWhite : INPUT_TOKENS.fieldBgGrey,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBaseBorderless : INPUT_TOKENS.fieldBase,
+                inputVariant !== "borderless" && !isDisabled && !isInvalid && INPUT_TOKENS.fieldHover,
                 isDisabled && INPUT_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                (invalid || supportingTextType === "error") && INPUT_TOKENS.fieldInvalid
+                isInvalid && INPUT_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_TOKENS.radius[input_border_radius],
@@ -7522,7 +7531,10 @@ var INPUT_GROUP_TOKENS = {
   field: "flex h-[var(--input-height,40px)] w-full items-center gap-2 overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none",
+  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening (Figma hover variant: #dadada). Applied
+  // conditionally by the component so it does not override invalid/disabled.
+  fieldHover: "hover:border-token-input-hover",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   fieldDisabled: "border-token-xlight",
   // Inner input area
@@ -7531,7 +7543,8 @@ var INPUT_GROUP_TOKENS = {
   segment: "shrink-0 flex items-center text-xs font-normal text-fg-placeholder px-3",
   segmentDivider: "border-token-light",
   // Textarea
-  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none",
+  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none transition-colors",
+  textareaHover: "hover:border-token-input-hover",
   textareaInvalid: "border-token-destructive focus-visible:border-token-destructive",
   textareaDisabled: "border-token-xlight",
   radius: {
@@ -7581,6 +7594,7 @@ var InputGroup = React4.forwardRef(
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
     const isActive = forceState === "active";
+    const isInvalid = !!invalid;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
@@ -7595,9 +7609,10 @@ var InputGroup = React4.forwardRef(
                 INPUT_GROUP_TOKENS.field,
                 inputVariant === "white" ? INPUT_GROUP_TOKENS.fieldBgWhite : INPUT_GROUP_TOKENS.fieldBgGrey,
                 INPUT_GROUP_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && INPUT_GROUP_TOKENS.fieldHover,
                 isDisabled && INPUT_GROUP_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                invalid && INPUT_GROUP_TOKENS.fieldInvalid
+                isInvalid && INPUT_GROUP_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_GROUP_TOKENS.radius[input_border_radius],
@@ -7690,16 +7705,18 @@ var TEXTAREA_TOKENS = {
   labelRow: "flex items-center gap-[2px] text-xs font-medium leading-4 tracking-normal text-fg-black",
   mandatory: "text-fg-destructive",
   // Base shared field layout/typography.
-  // `relative` + `overflow-hidden` so the `before:` overlay respects the
-  // field's rounded corners via [border-radius:inherit].
   field: "relative flex min-h-[80px] w-full flex-col overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  // Base border + focus treatment.
-  // Hover/pressed are painted via a pseudo-element overlay (see fieldBase) to avoid layout shift.
+  // Base border + focus treatment. Hover darkens the border (Figma hover
+  // variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   // Focus ring uses outline (not ring) so it doesn't contribute to box size.
-  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:[border-radius:inherit] before:transition-colors before:bg-transparent hover:before:bg-interaction-hov-opacity-primary active:before:bg-interaction-pressed-opacity-primary [&>*]:relative [&>*]:z-10",
-  fieldDisabled: "border-token-xlight hover:before:bg-transparent active:before:bg-transparent",
+  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening. Applied conditionally by the component so
+  // it does not override invalid/disabled borders.
+  fieldHover: "hover:border-token-input-hover",
+  fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Textarea itself.
   // `selection:` applies styles to the user's text selection (::selection):
@@ -7744,6 +7761,7 @@ var Textarea = React5.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
@@ -7761,9 +7779,10 @@ var Textarea = React5.forwardRef(
                 TEXTAREA_TOKENS.field,
                 inputVariant === "white" ? TEXTAREA_TOKENS.fieldBgWhite : TEXTAREA_TOKENS.fieldBgGrey,
                 TEXTAREA_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && TEXTAREA_TOKENS.fieldHover,
                 isDisabled && TEXTAREA_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand outline outline-2 outline-token-brand outline-offset-2",
-                (invalid || supportingTextType === "error") && TEXTAREA_TOKENS.fieldInvalid
+                isInvalid && TEXTAREA_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: TEXTAREA_TOKENS.radius[input_border_radius],
@@ -8072,14 +8091,25 @@ var NAVIGATION_TOKENS = {
     // Shared base — focus ring uses design system pattern.
     base: "inline-flex items-center cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline outline-token-brand focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",
     // ----- Page Top Tab -----
-    // Figma 5229:66149 — px-12 py-8, rounded-12, 1.5px underline when selected.
-    // Same padding across states to prevent layout shift on selection.
+    // Figma 5229:66149 — px-12 py-8, rounded-12 (all corners), 1.5px
+    // underline rendered just outside the rounded pill. Same padding
+    // across states to prevent layout shift on selection. The pill itself
+    // does NOT visually merge with the underline; the underline sits
+    // below the pill as a separate horizontal bar that is brand-coloured
+    // for selected, 5% black on hover-unselected, and transparent at rest.
     topBase: "justify-center gap-2 px-3 py-2 rounded-xl relative",
     topBaseSelected: "justify-center gap-2 px-3 py-2 rounded-xl relative",
     topLabelSelected: "text-base font-semibold leading-6 text-fg-brand shrink-0",
     topLabelUnselected: "text-base font-semibold leading-6 text-fg-grey-primary shrink-0",
-    // 1.5px brand underline (selected).
-    topHighlight: "pointer-events-none absolute bottom-0 left-0 right-0 h-[1.5px] rounded-sm bg-token-brand-primary",
+    // 1.5px underline anchored ~6px BELOW the rounded pill (Figma 5229:66149
+    // places the bar at `top-[46px]` for a 40px pill — a 6px breathing gap
+    // between pill bottom and bar). Coloured per state via the *Selected /
+    // *Hover / *Default modifiers.
+    topHighlight: "pointer-events-none absolute -bottom-1.5 left-0 right-0 h-[1.5px] rounded-sm transition-colors",
+    topHighlightSelected: "bg-token-brand-primary",
+    // Faint 5% black bar on hover of unselected — matches Figma 5229:66155.
+    topHighlightHover: "bg-transparent group-hover/tab:bg-interaction-hov-opacity-primary",
+    topHighlightDefault: "bg-transparent",
     // Interaction layers specific to top tab.
     topHoverUnselected: "hover:bg-interaction-hov-solid-primary",
     topHoverSelected: "hover:bg-interaction-hov-solid-primary",
@@ -8269,6 +8299,7 @@ var TabsTrigger = React12.forwardRef(
           selected ? selectedClass : NAVIGATION_TOKENS.tab.unselected,
           hoverClass,
           pressedClass,
+          v2 === "top" && "group/tab",
           className
         ),
         disabled,
@@ -8279,7 +8310,16 @@ var TabsTrigger = React12.forwardRef(
         children: [
           iconLeft ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(NAVIGATION_TOKENS.tab.iconWrap, iconColor), children: iconLeft }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(NAVIGATION_TOKENS.tab.labelBase, labelClass), children }),
-          v2 === "top" && selected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: NAVIGATION_TOKENS.tab.topHighlight })
+          v2 === "top" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "span",
+            {
+              className: cn(
+                NAVIGATION_TOKENS.tab.topHighlight,
+                selected ? NAVIGATION_TOKENS.tab.topHighlightSelected : NAVIGATION_TOKENS.tab.topHighlightHover
+              ),
+              "aria-hidden": "true"
+            }
+          )
         ]
       }
     );
@@ -8857,6 +8897,7 @@ var UI_COLOR_KEY_TO_CSS_VAR = {
   borderBrand: "--border-brand",
   borderDestructive: "--border-destructive",
   borderInput: "--border-input",
+  borderInputHover: "--border-input-hover",
   // Interaction tokens (Figma: color > interaction)
   hovOpacityPrimary: "--hov-opacity-primary",
   hovOpacitySecondary: "--hov-opacity-secondary",
@@ -9227,8 +9268,12 @@ var import_lucide_react6 = require("lucide-react");
 var SELECT_TOKENS = {
   // Main select container
   container: {
-    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10
-    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none data-[state=open]:border-token-brand",
+    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10.
+    // Hover darkens the border to match Figma (#dadada) — `data-[state=open]`
+    // and `disabled:` use higher specificity (attribute / pseudo-class) so they
+    // override the hover border when the dropdown is open or the trigger is
+    // disabled.
+    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
     // bg variants: default = input (grey), white = card
     bgDefault: "bg-token-white",
     bgWhite: "bg-token-white",
@@ -10709,9 +10754,9 @@ var TOAST_TOKENS = {
   // Inner content row — Figma: px-16 py-12, gap-12, items-center, full width
   innerRow: "flex gap-3 items-center px-4 py-3 w-full",
   icon: {
-    success: "text-fg-success shrink-0 [&>svg]:size-4",
-    error: "text-fg-destructive shrink-0 [&>svg]:size-4",
-    default: "text-fg-black shrink-0 [&>svg]:size-4"
+    success: "text-fg-success shrink-0 size-4",
+    error: "text-fg-destructive shrink-0 size-4",
+    default: "text-fg-black shrink-0 size-4"
   },
   // Title + subtext column — Figma: flex-1, flex-col, gap-0
   content: "flex flex-col flex-1 min-w-0",
@@ -11446,7 +11491,24 @@ var TABLE_TOKENS = {
    *  element itself and stays visible through the scroll.
    *  A second outer shadow extends to the right so users can tell the column
    *  is pinned even when the bordering unpinned column is visually similar. */
-  pinnedLastBorder: "shadow-[inset_-1px_0_0_0_hsl(var(--border-xlight)),6px_0_8px_-4px_rgba(0,0,0,0.08)]",
+  // Pinned-column right edge — Figma 5087:54840.
+  //   • `inset` shadow draws a 1px hairline at the cell's right edge.
+  //   • `before:` pseudo paints the elevation gradient INSIDE the cell at
+  //     its right edge. CSS `border-collapse: collapse` plus the cell's
+  //     own `overflow-hidden` (needed for text truncation) blocks an
+  //     outer drop-shadow from rendering, so we simulate the shadow with
+  //     an absolutely-positioned gradient that fades from transparent to
+  //     ~10% black across the last 8px of the cell. The pinned column
+  //     reads as elevated above the scrolling content beside it without
+  //     us having to drop overflow-hidden everywhere.
+  // Pinned-column right edge — Figma 5087:54840.
+  //   • Inset 1px hairline (border-light) so the column always has a clear
+  //     boundary line.
+  //   • Outer drop-shadow extending right INTO the unpinned area below it.
+  //     Using strong x-offset / -spread so the shadow only paints to the
+  //     right (not on top/bottom). Sticky cell sits at z-20, unpinned cells
+  //     at z-0, so the shadow is always painted above the scrolling content.
+  pinnedLastBorder: "shadow-[inset_-1px_0_0_0_hsl(var(--border-light)),12px_0_12px_-8px_rgba(0,0,0,0.18)]",
   // ── Checkbox column — Figma: w-40, px-12 py-8
   checkboxCell: "w-10 px-3 py-2",
   // ── Actions column ──
@@ -12038,8 +12100,10 @@ var FILTER_SELECT_TOKENS = {
     // Disabled
     disabled: "disabled:opacity-50 disabled:pointer-events-none"
   },
-  // Left icon — Figma: icon/black, 16px
-  icon: "shrink-0 size-4 text-fg-black",
+  // Left icon — Figma: icon/black, 16px. Force `stroke-width: 1.5` on inner
+  // SVG so lucide icons (which default to 2) read at the same visual weight
+  // as the lighter HugeiconsIcon strokes used elsewhere in the bar.
+  icon: "shrink-0 size-4 text-fg-black [&]:[stroke-width:1.5]",
   // Label — Label/sm: Nunito medium 12/16 black.
   // The "Without Label" variant (used as right pill inside CompoundFilterSelect — Figma
   // 5427:32334) shows the selected value as the label itself in text/brand, Subtext/xs
@@ -12067,7 +12131,7 @@ var FILTER_SELECT_TOKENS = {
       // Symmetric 4px padding on all sides — prevents the extra whitespace
       // below the last list item / footer that used to come from `pb-2`.
       "p-1 rounded-[16px] shadow-sm",
-      "min-w-[196px] font-sans",
+      "min-w-[196px] min-h-[144px] font-sans",
       "outline-none"
     ].join(" "),
     // Date dropdown — tight 4px padding on all sides so the calendar / presets
@@ -12271,8 +12335,10 @@ var FILTER_SELECT_TOKENS = {
       "w-full resize-none",
       "min-h-[114px] px-2 py-1",
       "rounded-[12px] bg-token-white",
-      // Figma shows brand/primary border on the focused textarea. Reserve 1px.
-      "border border-solid border-token-brand",
+      // Reserve 1px border so focus state doesn't shift layout. The brand
+      // colour only paints while the textarea actually has focus.
+      "border border-solid border-token-light",
+      "focus:border-token-brand",
       "font-sans text-xs font-normal leading-4 text-fg-black",
       "placeholder:text-fg-placeholder",
       "outline-none transition-colors"
@@ -12289,10 +12355,11 @@ var FILTER_SELECT_TOKENS = {
       "focus-within:border-token-brand"
     ].join(" "),
     // Compact variant — used by the duration filter so the dropdown doesn't
-    // stretch edge-to-edge. Matches Figma numeric field for duration (~96px).
+    // stretch edge-to-edge. Sized to roughly match a single field of the
+    // range layout so single/range modes feel visually consistent.
     wrapperCompact: [
       "flex items-center gap-2",
-      "w-24 px-3 h-8 min-h-[32px]",
+      "w-[88px] px-3 h-8 min-h-[32px]",
       "rounded-[12px] bg-token-white",
       "border border-solid border-token-light",
       "transition-colors",
@@ -12947,8 +13014,9 @@ var CalendarMonthCaption = ({
       onDateChange == null ? void 0 : onDateChange({ start: date == null ? void 0 : date.start, end: d });
     }
   };
+  const phantomSlotClass = "size-8 shrink-0";
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-1 w-full px-0 py-1", children: [
-    isFirst && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    isFirst ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         type: "button",
@@ -12958,8 +13026,8 @@ var CalendarMonthCaption = ({
         disabled: !previousMonth,
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronLeft, { className: "size-4" })
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1 flex-1 justify-start", children: [
+    ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: phantomSlotClass, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1 flex-1 justify-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         MonthSelectPill,
         {
@@ -12991,7 +13059,7 @@ var CalendarMonthCaption = ({
         }
       )
     ] }),
-    isLast && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    isLast ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         type: "button",
@@ -13001,7 +13069,7 @@ var CalendarMonthCaption = ({
         disabled: !nextMonth,
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronRight, { className: "size-4" })
       }
-    )
+    ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: phantomSlotClass, "aria-hidden": "true" })
   ] });
 };
 var DEFAULT_DURATION_UNITS = [
@@ -13066,7 +13134,20 @@ var FilterSelect = React37.forwardRef(
     const open = controlledOpen != null ? controlledOpen : internalOpen;
     const [searchQuery, setSearchQuery] = React37.useState("");
     const triggerRef = React37.useRef(null);
+    const searchInputRef = React37.useRef(null);
+    const numericInputRef = React37.useRef(null);
+    const rangeMinInputRef = React37.useRef(null);
     const [triggerWidth, setTriggerWidth] = React37.useState(null);
+    const focusActiveBodyInput = React37.useCallback(() => {
+      requestAnimationFrame(() => {
+        var _a5, _b5;
+        if (isRangeMode) {
+          (_a5 = rangeMinInputRef.current) == null ? void 0 : _a5.focus();
+        } else {
+          (_b5 = numericInputRef.current) == null ? void 0 : _b5.focus();
+        }
+      });
+    }, [isRangeMode]);
     const [focusedMonth, setFocusedMonth] = React37.useState(
       () => {
         var _a5;
@@ -13393,8 +13474,13 @@ var FilterSelect = React37.forwardRef(
       setDraggedValue(null);
       setDragOverValue(null);
     }, []);
-    const isCompactBody = type === "duration" || type === "numeric_with_operands" && !isRangeMode;
-    const bodyMinWidth = isCompactBody ? Math.max(160, triggerWidth != null ? triggerWidth : 0) : Math.max(196, triggerWidth != null ? triggerWidth : 0);
+    const isCompactBody = type === "duration";
+    const supportsRangeOperand = type === "numeric_with_operands" && operands.some(
+      (op) => op.value === "Is between" || op.label === "Is between" || /between/i.test(op.value) || /between/i.test(op.label)
+    );
+    const numericWithOperandsWidth = 224;
+    const bodyMinWidth = supportsRangeOperand ? Math.max(numericWithOperandsWidth, triggerWidth != null ? triggerWidth : 0) : isCompactBody ? Math.max(160, triggerWidth != null ? triggerWidth : 0) : Math.max(196, triggerWidth != null ? triggerWidth : 0);
+    const bodyMaxWidth = supportsRangeOperand ? Math.max(numericWithOperandsWidth, triggerWidth != null ? triggerWidth : 0) : void 0;
     const renderFooterClear = (onClick, labelText, ariaLabel) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: FILTER_SELECT_TOKENS.footer.wrapper, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
@@ -13521,7 +13607,7 @@ var FilterSelect = React37.forwardRef(
                 maxHeight: type === "date" ? void 0 : dropdownMaxHeight,
                 minHeight: loading ? dropdownMaxHeight : void 0,
                 minWidth: bodyMinWidth,
-                maxWidth: type === "date" ? void 0 : void 0
+                maxWidth: bodyMaxWidth
               },
               side: "bottom",
               align: "start",
@@ -13551,7 +13637,7 @@ var FilterSelect = React37.forwardRef(
                     autoFocus: true
                   }
                 ) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} text`)
+                showClearBtn && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} text`)
               ] }) : type === "text_with_operands" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "p-1 flex flex-col gap-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -13576,7 +13662,7 @@ var FilterSelect = React37.forwardRef(
                     }
                   )
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   handleTextClear,
                   footerActionLabel,
                   `${footerActionLabel} filter`
@@ -13596,25 +13682,29 @@ var FilterSelect = React37.forwardRef(
                   ),
                   unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                 ] }) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} number`)
+                showClearBtn && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} number`)
               ] }) : type === "numeric_with_operands" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "p-1 flex flex-col gap-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     OperandDropdown,
                     {
                       value: operand != null ? operand : "",
-                      onChange: (v2) => onOperandChange == null ? void 0 : onOperandChange(v2),
+                      onChange: (v2) => {
+                        onOperandChange == null ? void 0 : onOperandChange(v2);
+                        focusActiveBodyInput();
+                      },
                       options: operands,
                       placeholder: operandPlaceholder,
                       container,
                       themeClass
                     }
                   ),
-                  isRangeMode ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
+                  isRangeMode ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "input",
                         {
+                          ref: rangeMinInputRef,
                           type: "text",
                           inputMode: "numeric",
                           pattern: "[0-9]*",
@@ -13638,7 +13728,7 @@ var FilterSelect = React37.forwardRef(
                       )
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "input",
                         {
@@ -13668,6 +13758,7 @@ var FilterSelect = React37.forwardRef(
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       {
+                        ref: numericInputRef,
                         type: "number",
                         value: text != null ? text : "",
                         onChange: (e) => onTextChange == null ? void 0 : onTextChange(e.target.value),
@@ -13679,7 +13770,7 @@ var FilterSelect = React37.forwardRef(
                     unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onTextChange == null ? void 0 : onTextChange("");
                     onOperandChange == null ? void 0 : onOperandChange("");
@@ -13735,7 +13826,7 @@ var FilterSelect = React37.forwardRef(
                     unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onRangeMinChange == null ? void 0 : onRangeMinChange("");
                     onRangeMaxChange == null ? void 0 : onRangeMaxChange("");
@@ -13769,7 +13860,7 @@ var FilterSelect = React37.forwardRef(
                     }
                   )
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onTextChange == null ? void 0 : onTextChange("");
                     onDurationUnitChange == null ? void 0 : onDurationUnitChange("");
@@ -13812,7 +13903,7 @@ var FilterSelect = React37.forwardRef(
                             preset.value
                           );
                         }) }),
-                        (showClearBtn || hasContentToClear) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                        showClearBtn && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                           "div",
                           {
                             className: FILTER_SELECT_TOKENS.datePresetSidebarAction.wrapper,
@@ -13895,7 +13986,7 @@ var FilterSelect = React37.forwardRef(
                                 // inside our custom MonthCaption on the outer edges.
                                 Nav: () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {})
                               },
-                              className: "p-0 font-sans [&_.rdp-day_button]:rounded-[8px]"
+                              className: "p-0 font-sans [&_.rdp-day_button]:rounded-[8px] [&_.rdp-months]:gap-3"
                             }
                           )
                         }
@@ -13903,7 +13994,7 @@ var FilterSelect = React37.forwardRef(
                     ]
                   }
                 ),
-                datePresets === false && (showClearBtn || hasContentToClear) && renderFooterClear(
+                datePresets === false && showClearBtn && renderFooterClear(
                   handleDateClear,
                   footerActionLabel,
                   `${footerActionLabel} date range`
@@ -13918,11 +14009,13 @@ var FilterSelect = React37.forwardRef(
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       {
+                        ref: searchInputRef,
                         type: "text",
                         value: searchQuery,
                         onChange: (e) => setSearchQuery(e.target.value),
                         placeholder: searchPlaceholder || "Search...",
                         "aria-label": "Search options",
+                        autoFocus: true,
                         className: FILTER_SELECT_TOKENS.searchBar.input
                       }
                     ),
@@ -13999,7 +14092,7 @@ var FilterSelect = React37.forwardRef(
                       String(item.value)
                     );
                   }) }),
-                  showClearBtn && selectedItems.length > 0 && renderFooterClear(
+                  showClearBtn && renderFooterClear(
                     handleClearAll,
                     footerActionLabel,
                     `${footerActionLabel} all selected items`
@@ -14156,8 +14249,12 @@ function CompoundFilterSelect({
               // Force children's rounded corners to be right-only and remove left border to overlap
               "[&>*]:!rounded-none [&>*]:!rounded-r-[16px]",
               "[&_button[data-state]]:!rounded-none [&_button[data-state]]:!rounded-r-[16px]",
-              // Paint the FilterSelect label in brand blue, regular weight (Figma 5427:32334).
-              "[&_[data-filter-label]]:!text-fg-brand",
+              // Paint the FilterSelect label in brand blue when it carries a value
+              // (Figma 5427:32334). When the right pill is empty / showing a
+              // placeholder, render the label in placeholder grey instead so it
+              // reads as a hint rather than a real selection.
+              "[&_button[data-has-value]_[data-filter-label]]:!text-fg-brand",
+              "[&_button:not([data-has-value])_[data-filter-label]]:!text-fg-placeholder",
               "[&_[data-filter-label]]:!font-normal",
               // In a compound pill, the right-side label IS the value — there is no
               // separate label/value split to divide. Hide the internal separator
@@ -15729,8 +15826,10 @@ var CHAT_BUBBLE_TOKENS = {
     timestampRow: "flex items-center justify-end gap-2 pr-5"
   },
   user: {
-    // Row: avatar first, then text (no bubble).
-    row: "flex items-end gap-1 w-full",
+    // Row: avatar first, then text (no bubble). `pr-5` mirrors the
+    // 16px avatar + 4px gap on the left so message text doesn't run flush
+    // to the container's right edge.
+    row: "flex items-end gap-1 w-full pr-5",
     // 16px grey circle holding the user icon.
     avatar: "shrink-0 size-4 rounded-full bg-token-grey flex items-center justify-center text-fg-grey-secondary [&>svg]:size-3",
     // Message text — per Figma: 14px regular, grey-secondary.