torch-glare 2.5.2 → 2.5.4

package/apps/lib/components/FormRenderer/types.ts

@@ -16,7 +16,7 @@ import type {
  */
 
 export type FormRendererDisplay = "page" | "drawer";
-export type FieldDirection = "horizontal" | "vertical";
+export type FieldDirection = "horizontal" | "vertical" | "flexible";
 
 export interface FormRendererProps<T extends FieldValues = FieldValues> {
   /** The form body — `FormRenderer.Section` / field / `FormRenderer.Stepper` JSX. */

package/apps/lib/components/Input.tsx

@@ -62,7 +62,16 @@ interface TrillingProps extends HTMLAttributes<HTMLDivElement> {
 }
 export const Trilling = ({ children, className, ...props }: TrillingProps) => {
   return (
-    <div {...props} className={cn("flex items-center justify-center h-full gap-1 py-1", className)}>
+    // `ps-1` mirrors the inner side of Figma's `EndField-Container` (`p-[4px]`), keeping the field's
+    // text clear of the end button instead of running straight into it.
+    //
+    // Logical, not physical: this slot flips to the left edge in RTL, so a `pl-1` would put the
+    // padding on the outside — measured as 0px of clearance and the button 8px from the edge
+    // instead of 4px. `padding-inline-start` follows the slot.
+    <div
+      {...props}
+      className={cn("flex items-center justify-center h-full gap-1 py-1 ps-1", className)}
+    >
       {children}
     </div>
   );
@@ -135,7 +144,10 @@ input:-webkit-autofill:active {
 
 export const GroupStyles = cva(
   [
-    "flex w-full min-w-0 px-1 justify-center items-center",
+    // 3px, not 4: Figma's `EndField-Container` is `p-[4px]` and its stroke sits *inside* that
+    // padding, so the end button lands 4px from the field's outer edge. CSS `border-box` adds the
+    // 1px border on top of the padding, so 4px here would render 5px. 1 + 3 = 4.
+    "flex w-full min-w-0 px-[3px] justify-center items-center",
     "typography-body-small-regular",
     "border",
     "transition-all duration-200 ease-in-out",
@@ -180,14 +192,17 @@ export const GroupStyles = cva(
           "[&_input]:text-white",
         ],
       },
+      // Radius per Figma's `radius/*` collection: S is `radius/lg` (8px) and M is `radius/xl`
+      // (12px) — a deliberate jump, not consecutive steps. This `Group` is the shared field root,
+      // so it is also what gives `InputField` and `InnerLabelField` their corners.
       size: {
         S: [
           "h-[30px] min-h-[30px]",
-          "rounded-[6px] [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]",
+          "rounded-radius-lg [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]",
         ],
         M: [
           "h-[40px] min-h-[40px]",
-          "rounded-[8px] [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]",
+          "rounded-radius-xl [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]",
         ],
       },
       error: {

package/apps/lib/components/Popover.tsx

@@ -1,11 +1,12 @@
 "use client";
 import { cva, VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
-import React, { useEffect, useRef } from "react";
+import React, { cloneElement, isValidElement, useEffect, useRef } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Slot } from "@radix-ui/react-slot";
 import { Themes } from "../utils/types";
 
+
 interface LocalPopOverProps extends VariantProps<typeof popoverStyles> {
   variant?: "SystemStyle" | "PresentationStyle";
   className?: string;
@@ -32,18 +33,19 @@ PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
-    LocalPopOverProps & {
-      theme?: Themes;
-    }
+  LocalPopOverProps & {
+    theme?: Themes;
+  }
 >(
   (
     {
       className,
       align = "center",
       sideOffset = 4,
-      variant = "SystemStyle",
+      variant = "PresentationStyle",
       overlayBlur = false,
       theme,
+      children,
       ...props
     },
     ref,
@@ -58,7 +60,9 @@ const PopoverContent = React.forwardRef<
             sideOffset={sideOffset}
             className={cn(popoverStyles({ variant, overlayBlur }), className)}
             {...props}
-          />
+          >
+            {children}
+          </PopoverPrimitive.Content>
         </div>
       ) : (
         <PopoverPrimitive.Content
@@ -68,7 +72,9 @@ const PopoverContent = React.forwardRef<
           sideOffset={sideOffset}
           className={cn(popoverStyles({ variant, overlayBlur }), className)}
           {...props}
-        />
+        >
+          {children}
+        </PopoverPrimitive.Content>
       )}
     </PopoverPrimitive.Portal>
   ),
@@ -84,7 +90,7 @@ interface Props<T extends React.ElementType = "li">
 
 // Define the PopoverItem component with a generic type parameter
 const PopoverItem = <T extends React.ElementType = "li">({
-  variant = "SystemStyle",
+  variant = "Default",
   size = "M",
   asChild,
   className,
@@ -103,72 +109,95 @@ const PopoverItem = <T extends React.ElementType = "li">({
     }
   }, [active]);
 
+  const itemClassName = cn(PopoverItemStyles({ variant, size, active }), className);
+
+  // The styles are a two-layer chip (see `PopoverItemStyles`): this element is the container and
+  // the inner div is the row that lights up, which every `[&>div]:` rule targets. It therefore has
+  // to exist in both branches.
+  if (asChild && isValidElement(children)) {
+    // Slot merges the item's props onto the consumer's element (e.g. a Link), so the row div has to
+    // be injected as that element's child — wrapping the Link instead would move the class onto the
+    // wrapper and leave the anchor nested inside the item rather than being it.
+    const child = children as React.ReactElement<{ children?: React.ReactNode }>;
+    return (
+      <Slot className={itemClassName} ref={ref as React.Ref<HTMLElement>}>
+        {cloneElement(child, {}, <div>{child.props.children}</div>)}
+      </Slot>
+    );
+  }
+
   return (
     <Component
       {...(props as React.ComponentPropsWithoutRef<T>)} // Spread the props dynamically
-      className={cn(
-        PopoverItemStyles({
-          variant,
-          size,
-          active,
-        }),
-        className,
-      )}
-      /// <reference path="" />
+      className={itemClassName}
       ref={ref}
     >
-      {children}
+      <div>{children}</div>
     </Component>
   );
 };
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverItem };
 
+
 const PopoverItemStyles = cva(
+  // Ported from `MenuItemStyles` (ContextMenu/DropdownMenu) so a popover row and a menu row are the
+  // same object, minus the menu's grey `rgba(184,192,204,0.36)` container — a popover row sits
+  // directly on the panel. The inner `<div>` is still the row that lights up on hover/focus, and
+  // `PopoverItem` always renders it, including through `asChild`.
   [
-    "text-content-presentation-action-light-primary",
+    "text-content-presentation-global-primary-light typography-body-medium-regular",
     "outline-none",
     "border",
     "border-transparent",
     "flex w-full",
-    "gap-[8px]",
+    "shrink-0", // keep full row height so the popover scrolls instead of squishing
     "items-center",
     "justify-start",
     "text-overflow",
     "overflow-hidden",
-    "px-[12px]",
-    "rounded-[4px]",
+    "p-[2px]",
     "transition-all",
     "ease-in-out",
     "duration-300",
+    "[&>div]:flex",
+    "[&>div]:px-[12px]",
+    "[&>div]:py-[4px]",
+    "[&>div]:gap-2",
+    "[&>div]:w-full",
+    "[&>div]:rounded-[8px]",
+    "[&>div]:items-center",
+    "group",
   ],
   {
     variants: {
       variant: {
+        // The menu uses Radix's `data-highlighted`; a PopoverItem is a plain button, so the
+        // keyboard-highlight equivalent here is `:focus`.
         Default: [
-          "text-content-presentation-action-light-primary",
-          "bg-background-presentation-action-dropdown-primary",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:bg-background-presentation-action-hover",
-          "focus:text-content-presentation-global-primary-inverse",
-          "disabled:text-content-presentation-state-disabled",
-          "disabled:bg-white-00",
+          "text-content-presentation-global-primary-light",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-black-1000",
+          "[&:focus>div]:bg-white-alpha-75",
+          "[&:focus>div]:text-black-1000",
+          "[&:disabled>div]:text-content-presentation-global-primary-light",
+          "[&:disabled>div]:opacity-50",
+          "[&:disabled>div]:hover:bg-transparent",
+          "[&:disabled>div]:hover:shadow-none",
         ],
         Warning: [
-          "text-content-presentation-state-information",
-          "hover:bg-background-presentation-state-information-primary",
-          "focus:bg-background-presentation-state-information-primary",
-          "focus:text-content-presentation-global-primary-inverse",
-          "hover:text-content-presentation-global-primary-inverse",
+          "text-blue-sparkle-200",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-blue-sparkle-700",
+          "[&:focus>div]:bg-white-alpha-75",
+          "[&:focus>div]:text-blue-sparkle-700",
         ],
         Negative: [
-          "text-content-presentation-state-negative",
-          "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:bg-background-presentation-state-negative-primary",
-          "focus:text-content-presentation-global-primary-inverse",
-          "active:text-content-presentation-state-negative",
+          "text-medium-red-200",
+          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
+          "[&>div]:hover:text-medium-red-600",
+          "[&:focus>div]:bg-white-alpha-75",
+          "[&:focus>div]:text-medium-red-600",
         ],
         SystemStyle: [
           "bg-background-system-body-primary",
@@ -198,13 +227,13 @@ const PopoverItemStyles = cva(
           "text-content-presentation-action-light-primary",
         ],
       },
-
-      defaultVariants: {
-        variant: "Default",
-        size: "M",
-        active: false,
-        disabled: false,
-      },
+    },
+    // Same misplacement as `popoverStyles` — a sibling of `variants`, not one of them.
+    defaultVariants: {
+      variant: "Default",
+      size: "M",
+      active: false,
+      disabled: false,
     },
     compoundVariants: [
       {
@@ -239,22 +268,31 @@ const popoverStyles = cva(
           "bg-background-system-body-primary",
           "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
         ],
-        // Adopts the DropdownMenu surface (`menuContentStyles`): backdrop-blurred, borderless
-        // rounded-14 panel with a soft ambient shadow — keeping the original background color.
+        // Figma `Dropdown-Menu-1.0` (1735:159246) — the same surface `menuContentStyles` renders,
+        // so a popover and a dropdown menu are indistinguishable panels.
         PresentationStyle: [
-          "border-transparent",
+          // `border-0`, not `border-transparent`: the base sets `border`, and with `border-box`
+          // that 1px sits on top of the 4px padding, making the panel 2px wider than the design.
+          "border-0",
           "rounded-[14px]",
           "backdrop-blur-[21px]",
-          "bg-background-presentation-form-base",
+          // The design's fill is a raw `rgba(61,64,69,0.72)` with no Figma variable behind it, so it
+          // is spelled out exactly as DropdownMenu/ContextMenu already spell it. It has to be
+          // translucent: over the previous opaque `form-base` the backdrop-blur painted nothing.
+          "bg-[rgba(61,64,69,0.72)]",
           "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
+          // Figma's group-container stacks its rows with a 4px gutter.
+          "flex flex-col gap-1",
         ],
       },
       overlayBlur: {
         true: ["h-fit"],
       },
-      defaultVariants: {
-        variant: "PresentationStyle",
-      },
+    },
+    // Was nested inside `variants`, where cva reads it as a variant group called
+    // "defaultVariants" and no default is ever applied.
+    defaultVariants: {
+      variant: "PresentationStyle",
     },
   },
 );

package/apps/lib/components/SearchableSelect.tsx

@@ -6,7 +6,8 @@ import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Icon, Input, Group } from "./Input";
-import { Button, LoadingIcon } from "./Button";
+import { LoadingIcon } from "./Button";
+import { ActionButton } from "./ActionButton";
 import { useClickOutside } from "../hooks/useClickOutside";
 // Reuse the exact menu-item styling so rows look identical to DropdownMenuItem.
 import { MenuItemStyles } from "./DropdownMenu";
@@ -189,7 +190,11 @@ export function SearchableSelect({
             setDropdownWidth(e.currentTarget.offsetWidth)
           }
           // Trigger styling mirrors the `Select` component's trigger so the two read identically.
-          className={cn("flex w-full items-center gap-1 rounded-[6px] p-[4px]", className)}
+          // `p-[3px]` so the end button lands 4px from the outer edge once the 1px border is added.
+          // The old `rounded-[6px]` here was dead but dangerous: `twMerge` cannot dedupe it against
+          // the Group's `rounded-radius-xl` (custom scale key vs arbitrary value), so both shipped
+          // and the 12px only won on CSS source order.
+          className={cn("flex w-full items-center gap-1 p-[3px]", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           <Input
@@ -212,10 +217,10 @@ export function SearchableSelect({
               "!h-[24px]": size === "M",
             })}
           />
-          {/* Chevron toggle — boxed icon button matching the Select component. */}
-          <Button
+          {/* Chevron toggle — the shared in-field action button (Figma `ActionButton` M). */}
+          <ActionButton
             as="span"
-            buttonType="icon"
+            size="M"
             tabIndex={-1}
             aria-label={open ? "Close" : "Open"}
             onMouseDown={(e: React.MouseEvent) => {
@@ -227,11 +232,7 @@ export function SearchableSelect({
                 setOpen(true);
               }
             }}
-            className={cn(
-              // Same box + open-state fill as the Select trigger's chevron.
-              "h-[32px] w-[32px] shrink-0",
-              open && "bg-background-presentation-action-hover text-white",
-            )}
+            className={cn("shrink-0", open && "bg-background-presentation-action-hover text-white")}
           >
             <i
               className={cn(
@@ -239,7 +240,7 @@ export function SearchableSelect({
                 open && "rotate-180",
               )}
             />
-          </Button>
+          </ActionButton>
         </Group>
       </PopoverTrigger>
 

package/apps/lib/components/SearchableTree.tsx

@@ -5,7 +5,8 @@ import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Icon, Input, Group } from "./Input";
-import { Button, LoadingIcon } from "./Button";
+import { LoadingIcon } from "./Button";
+import { ActionButton } from "./ActionButton";
 import { useClickOutside } from "../hooks/useClickOutside";
 
 /**
@@ -236,7 +237,8 @@ export function SearchableTree<T>({
           onFocus={(e: React.FocusEvent<HTMLDivElement>) =>
             setDropdownWidth(e.currentTarget.offsetWidth)
           }
-          className={cn("flex w-full items-center gap-1 p-1", className)}
+          // 3px + the 1px border = Figma's 4px from the field's outer edge.
+          className={cn("flex w-full items-center gap-1 p-[3px]", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           {/* The field itself is the search input — typing filters the tree. */}
@@ -262,10 +264,10 @@ export function SearchableTree<T>({
               "!h-[24px]": size === "M",
             })}
           />
-          {/* Chevron toggle — boxed icon button matching the Select component. */}
-          <Button
+          {/* Chevron toggle — the shared in-field action button (Figma `ActionButton` M). */}
+          <ActionButton
             as="span"
-            buttonType="icon"
+            size="M"
             tabIndex={-1}
             aria-label={open ? "Close" : "Open"}
             onMouseDown={(e: React.MouseEvent) => {
@@ -278,18 +280,15 @@ export function SearchableTree<T>({
                 setOpen(true);
               }
             }}
-            className={cn(
-              "shrink-0 h-[32px] w-[32px] rounded-[4px]",
-              open && "bg-background-presentation-action-hover text-white",
-            )}
+            className={cn("shrink-0", open && "bg-background-presentation-action-hover text-white")}
           >
             <i
               className={cn(
-                "ri-arrow-down-s-line text-[20px] transition-all duration-100 ease-in-out",
+                "ri-arrow-down-s-line !text-[26px] transition-all duration-100 ease-in-out",
                 open && "rotate-180",
               )}
             />
-          </Button>
+          </ActionButton>
         </Group>
       </PopoverTrigger>
 

package/apps/lib/components/SearchableTreeDialog.tsx

@@ -13,7 +13,8 @@ import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
 import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "./Dialog";
 import { Icon, Input, Group } from "./Input";
-import { Button, LoadingIcon } from "./Button";
+import { LoadingIcon } from "./Button";
+import { ActionButton } from "./ActionButton";
 
 /**
  * SearchableTreeDialog — a field that opens a modal Dialog to pick a node from a tree.
@@ -224,7 +225,8 @@ export function SearchableTreeDialog<T>({
           size={size === "XS" ? "S" : size}
           role="button"
           tabIndex={0}
-          className={cn("flex w-full items-center gap-1 p-1 cursor-pointer", className)}
+          // 3px + the 1px border = Figma's 4px from the field's outer edge.
+          className={cn("flex w-full items-center gap-1 p-[3px] cursor-pointer", className)}
         >
           {icon && <Icon>{icon}</Icon>}
           <span
@@ -237,24 +239,21 @@ export function SearchableTreeDialog<T>({
           >
             {triggerLabel}
           </span>
-          {/* Chevron toggle — boxed icon button matching the Select component. */}
-          <Button
+          {/* Chevron toggle — the shared in-field action button (Figma `ActionButton` M). */}
+          <ActionButton
             as="span"
-            buttonType="icon"
+            size="M"
             tabIndex={-1}
             aria-label={open ? "Close" : "Open"}
-            className={cn(
-              "shrink-0 h-[32px] w-[32px] rounded-[4px]",
-              open && "bg-background-presentation-action-hover text-white",
-            )}
+            className={cn("shrink-0", open && "bg-background-presentation-action-hover text-white")}
           >
             <i
               className={cn(
-                "ri-arrow-down-s-line text-[20px] transition-all duration-100 ease-in-out",
+                "ri-arrow-down-s-line !text-[26px] transition-all duration-100 ease-in-out",
                 open && "rotate-180",
               )}
             />
-          </Button>
+          </ActionButton>
         </Group>
       </DialogTrigger>
 

package/apps/lib/components/SectionBlock.tsx

@@ -14,7 +14,17 @@ const titleBadge = cva(
         Orange: "bg-red-orange-900",
         Purple: "bg-violet-900",
         Pink: "bg-medium-violet-red-900",
-        Gray: "bg-background-presentation-badge-gray",
+        // Per Figma (`FormHeader10`, Color=Gray), which pairs two *variables*: the pill is
+        // `background/presentation/button/primary` and its label `content/presentation/global/
+        // primary-inverse`. They invert together — a light pill with dark text in the dark theme,
+        // dark pill with white text in the light one — so the text token has to ride along on the
+        // variant. It overrides the base `text-[#F4F4F4]` because `titleBadge` goes through `cn`
+        // (tailwind-merge) below; the other seven are dark palette chips that still want that base.
+        //
+        // This previously read `bg-background-presentation-badge-gray`, which is not a token at all:
+        // every badge colour has `-solid`/`-subtle` and none has a bare name, so the utility was
+        // never generated and a Gray badge painted no background whatsoever.
+        Gray: "bg-background-presentation-button-primary text-content-presentation-global-primary-inverse",
       },
     },
     defaultVariants: { color: "Blue" },
@@ -61,7 +71,9 @@ const rail = cva("flex w-full min-w-[300px] flex-col items-start", {
   variants: {
     variant: {
       // Hairline between each direct child (form rows).
-      Default: "divide-y divide-gray-300",
+      // `divide-gray-300` was a hardcoded light gray, so in the dark theme every row separator
+      // rendered as a bright rgb(209,213,219) line. The token follows the theme.
+      Default: "divide-y divide-border-presentation-global-primary",
       // The table draws its own row borders — a divide rule would double up on the
       // table / scroller / end-action siblings.
       Table: "",

package/apps/lib/components/Select.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "../utils/cn";
 import { cva, VariantProps } from "class-variance-authority";
-import { Button } from "./Button";
+import { ActionButton } from "./ActionButton";
 import { Tooltip } from "./Tooltip";
 import { MenuItemStyles } from "./DropdownMenu";
 import { Themes } from "../utils/types";
@@ -61,10 +61,11 @@ const SelectTrigger = React.forwardRef<
             {children}
           </p>
 
-          <Button
+          {/* The shared in-field action button. Its box tracks the trigger height the same way
+              InputField's does — a 30px field takes the 22px button, a 40px field the 32px one. */}
+          <ActionButton
             as={"span"}
-            buttonType="icon"
-            size={"L"}
+            size={size === "XL" ? "M" : size === "S" ? "XS" : "S"}
             className={cn([
               "group-aria-expanded:bg-background-presentation-action-hover",
               "group-aria-expanded:text-white",
@@ -80,7 +81,7 @@ const SelectTrigger = React.forwardRef<
                 { icon: icon },
               )}
             />
-          </Button>
+          </ActionButton>
         </SelectPrimitive.Trigger>
       </Tooltip>
     );
@@ -176,7 +177,7 @@ const SelectItem = React.forwardRef<
   >
     <div>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator className="ml-auto flex shrink-0">
+      <SelectPrimitive.ItemIndicator className="ms-auto flex shrink-0">
         <i className="ri-check-line text-[16px]" />
       </SelectPrimitive.ItemIndicator>
     </div>
@@ -253,7 +254,11 @@ const SelectContentStyles = cva(
 
 const PopoverTriggerStyles = cva(
   [
-    "flex flex-row rounded-[8px] justify-between items-center outline-none",
+    // No radius here — every `size` variant sets its own. `twMerge` does NOT dedupe the
+    // `rounded-radius-*` classes (they are custom scale keys, not values it recognises), so a
+    // radius on the base would survive alongside the variant's and let CSS source order pick the
+    // winner: `md` is generated before `lg`, so a base `lg` would silently beat size S's `md`.
+    "flex flex-row justify-between items-center outline-none",
     "[&_span]:text-content-presentation-action-light-primary",
     "typography-body-small-regular",
     "[&_p]:px-[10px] [&_p]:whitespace-nowrap",
@@ -299,12 +304,31 @@ const PopoverTriggerStyles = cva(
       onTable: {
         true: ["border-transparent", "bg-transparent"],
       },
+      // No `[&_span]:h-/w-` here: the chevron is an `ActionButton` and sizes itself from its own
+      // `size` prop. Those descendant rules used to force its box, and being descendant selectors
+      // they outranked the button's own classes — they also hit the SelectValue text span, which
+      // only escaped being squashed because an inline element ignores width/height.
       size: {
-        S: ["rounded-[6px] [&_span]:h-[22px] [&_span]:w-[22px] [&_p]:typography-body-small-medium"],
-        M: ["[&_span]:h-[26px] [&_span]:w-[26px] [&_p]:typography-body-medium-medium"],
-        L: ["[&_span]:h-[28px] [&_span]:w-[28px] [&_p]:typography-body-large-medium"],
+        // 24px tall — below the field scale's smallest step (30px), so it keeps its own
+        // `radius/md` rather than being rounded up to the 8px a real field would use.
+        // Heights are explicit because the trigger used to be sized by whichever chevron box the
+        // `[&_span]` rules imposed; now that the chevron sizes itself, the field must state its own.
+        //
+        // Every size states its padding so that `2×border + 2×padding + chevron` is exactly the
+        // trigger height — the chevron then sits an equal distance from all four edges instead of
+        // being flush to the border horizontally and centred vertically. Only XL had any padding
+        // before, which is why it was the only size that looked right.
+        //
+        // L and XL are the real field heights (30/40) and land on Figma's 4px. S and M have no
+        // Figma counterpart, so they take 3px — the most that still fits their chevron exactly.
+        S: ["h-[24px] p-[2px] rounded-radius-md [&_p]:typography-body-small-medium"],
+        // 28px and 30px — the field scale's S step (30px) is `radius/lg`.
+        M: ["h-[28px] p-[2px] rounded-radius-lg [&_p]:typography-body-medium-medium"],
+        L: ["h-[30px] p-[3px] rounded-radius-lg [&_p]:typography-body-large-medium"],
+        // 40px tall, so it is exactly InputField M and takes that size's `radius/xl` (12px).
+        // It sat at 8px before — the one place a 40px field in the system rounded like a 30px one.
         XL: [
-          "h-[40px] p-[4px] rounded-[8px] [&_span]:h-[32px] [&_span]:w-[32px] [&_p]:typography-body-large-regular [&_p]:px-[4px]",
+          "h-[40px] p-[3px] rounded-radius-xl [&_p]:typography-body-large-regular [&_p]:px-[4px]",
         ],
       },
     },

package/apps/lib/components/SimpleSelect.tsx

@@ -13,7 +13,7 @@ const SimpleSelectDropDown = ({ className, children, onClick }: SimpleSelectDrop
   return (
     <div
       className={cn(
-        "absolute min-w-[100px] z-[20] top-[27px] left-0",
+        "absolute min-w-[100px] z-[20] top-[27px] start-0",
         dropdownMenuStyles({ variant: "SystemStyle" }),
         className,
       )}
@@ -97,7 +97,7 @@ const SimpleSelectValue = ({
         "w-fit",
         "rounded-[6px]",
         "outline-none",
-        "pl-[8px]",
+        "ps-[8px]",
         className,
       ])}
     >