@rovula/ui 0.1.22 → 0.1.23

package/dist/esm/types/patterns/menu/Menu.d.ts

@@ -61,9 +61,11 @@ export type MenuProps = {
     side?: "top" | "right" | "bottom" | "left";
     sideOffset?: number;
     contentClassName?: string;
+    /** data-testid attached to the menu content element */
+    testId?: string;
 };
 export declare const Menu: {
-    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, }: MenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { DropdownMenuItem as MenuItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuLabel as MenuLabel, } from "../../components/DropdownMenu/DropdownMenu";

package/dist/esm/types/patterns/menu/Menu.stories.d.ts

@@ -4,7 +4,7 @@ import { Menu, MenuItemType } from "./Menu";
 declare const meta: {
     title: string;
     component: {
-        ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, }: import("./Menu").MenuProps): import("react/jsx-runtime").JSX.Element;
+        ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, }: import("./Menu").MenuProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     parameters: {
@@ -22,6 +22,7 @@ declare const meta: {
         side?: "top" | "right" | "bottom" | "left" | undefined;
         sideOffset?: number | undefined;
         contentClassName?: string | undefined;
+        testId?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/index.d.ts

@@ -1426,9 +1426,11 @@ type MenuProps = {
     side?: "top" | "right" | "bottom" | "left";
     sideOffset?: number;
     contentClassName?: string;
+    /** data-testid attached to the menu content element */
+    testId?: string;
 };
 declare const Menu: {
-    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, }: MenuProps): react_jsx_runtime.JSX.Element;
+    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, }: MenuProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/patterns/menu/Menu.js

@@ -86,7 +86,7 @@ function renderMenuItems(items, selectedValues, onSelect) {
 //   - Full a11y / WAI-ARIA
 //   - Sub-menu support via DropdownMenuSub
 // ---------------------------------------------------------------------------
-export const Menu = ({ trigger, items, selectedValues = [], onSelect, header, open, onOpenChange, align = "start", side = "bottom", sideOffset = 4, contentClassName, }) => (_jsxs(DropdownMenuRoot, { open: open, onOpenChange: onOpenChange, children: [trigger && (_jsx(DropdownMenuTrigger, { asChild: true, children: trigger })), _jsxs(DropdownMenuContent, { align: align, side: side, sideOffset: sideOffset, className: contentClassName, children: [header && (_jsx("div", { className: "sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]", children: header })), renderMenuItems(items, selectedValues, onSelect)] })] }));
+export const Menu = ({ trigger, items, selectedValues = [], onSelect, header, open, onOpenChange, align = "start", side = "bottom", sideOffset = 4, contentClassName, testId, }) => (_jsxs(DropdownMenuRoot, { open: open, onOpenChange: onOpenChange, children: [trigger && (_jsx(DropdownMenuTrigger, { asChild: true, children: trigger })), _jsxs(DropdownMenuContent, { align: align, side: side, sideOffset: sideOffset, className: contentClassName, "data-testid": testId, children: [header && (_jsx("div", { className: "sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]", children: header })), renderMenuItems(items, selectedValues, onSelect)] })] }));
 Menu.displayName = "Menu";
 // ---------------------------------------------------------------------------
 // Re-exports — backward compat for consumers using Menu's sub-components

package/dist/src/theme/global.css

@@ -1020,13 +1020,13 @@
   --page-bg-main-xspector: #091d33;
   --page-bg-main-report-xspector-light-mode: #ffffff;
   --page-bg-main-skyller: #ffffff;
-  --page-bg-circle-top-g-in-xspector: #003d6c;
+  --page-bg-circle-top-g-in-xspector: #042c57;
   --page-bg-circle-top-g-in-report-xspector-light-mode: #adcad6;
   --page-bg-circle-top-g-in-skyller: #cfe4fd;
   --page-bg-circle-top-g-out-xspector: rgba(9 29 51 / 0);
   --page-bg-circle-top-g-out-report-xspector-light-mode: rgba(255 255 255 / 0);
   --page-bg-circle-top-g-out-skyller: rgba(255 255 255 / 0);
-  --page-bg-circle-bottom-g-in-xspector: #003d6c;
+  --page-bg-circle-bottom-g-in-xspector: #042c57;
   --page-bg-circle-bottom-g-in-report-xspector-light-mode: #adcad6;
   --page-bg-circle-bottom-g-in-skyller: #bed0f9;
   --page-bg-circle-bottom-g-out-xspector: rgba(9 29 51 / 0);
@@ -1035,7 +1035,7 @@
   --text-white-xspector: #ffffff;
   --text-white-report-xspector-light-mode: #ffffff;
   --text-white-skyller: #ffffff;
-  --modal-line-xspector: rgba(158 158 158 / 0.24);
+  --modal-line-xspector: #4a4a4a;
   --modal-line-report-xspector-light-mode: #cfcfcf;
   --modal-line-skyller: #d4d4d4;
   --bg-bg4-xspector: #0f2a46;
@@ -1044,15 +1044,45 @@
   --bg-bg5-xspector: #000000;
   --bg-bg5-report-xspector-light-mode: #000000;
   --bg-bg5-skyller: #000000;
-  --bg-stroke3-xspector: #000000;
-  --bg-stroke3-report-xspector-light-mode: #000000;
-  --bg-stroke3-skyller: #000000;
+  --bg-stroke3-xspector: #2d2e30;
+  --bg-stroke3-report-xspector-light-mode: #e5e5e5;
+  --bg-stroke3-skyller: #d4d4d4;
   --bg-stroke4-xspector: #000000;
   --bg-stroke4-report-xspector-light-mode: #000000;
   --bg-stroke4-skyller: #000000;
   --bg-stroke5-xspector: #000000;
   --bg-stroke5-report-xspector-light-mode: #000000;
   --bg-stroke5-skyller: #000000;
+  --table-bg-main-xspector: #091a2a;
+  --table-bg-main-report-xspector-light-mode: #e5e5e5;
+  --table-bg-main-skyller: #f5f5f5;
+  --table-bg-line-xspector: #1c3955;
+  --table-bg-line-report-xspector-light-mode: #d2d2d2;
+  --table-bg-line-skyller: #ececec;
+  --table-bg-a-xspector: #0c2845;
+  --table-bg-a-report-xspector-light-mode: #f3f3f3;
+  --table-bg-a-skyller: #fdfdfd;
+  --table-bg-b-xspector: #0f2f50;
+  --table-bg-b-report-xspector-light-mode: #f3f3f3;
+  --table-bg-b-skyller: #f1f1f1;
+  --table-panel-hover-xspector: #343638;
+  --table-panel-hover-report-xspector-light-mode: #d4d4d4;
+  --table-panel-hover-skyller: #eff6fe;
+  --table-bg-hover-xspector: #103861;
+  --table-bg-hover-report-xspector-light-mode: #ffffff;
+  --table-bg-hover-skyller: #eff6fe;
+  --table-panel-sub-line-xspector: #393b3f;
+  --table-panel-sub-line-report-xspector-light-mode: #d4d4d4;
+  --table-panel-sub-line-skyller: #ececec;
+  --table-panel-main-line-xspector: #606b77;
+  --table-panel-main-line-report-xspector-light-mode: #d4d4d4;
+  --table-panel-main-line-skyller: #d4d4d4;
+  --table-panel-selected-xspector: #6f6700;
+  --table-panel-selected-report-xspector-light-mode: #d4d4d4;
+  --table-panel-selected-skyller: #bfdbfd;
+  --modal-dropdown-surface-xspector: #252628;
+  --modal-dropdown-surface-report-xspector-light-mode: #ffffff;
+  --modal-dropdown-surface-skyller: #ffffff;
   /* BUTTON RADIUS */
   --button-l-round: 8px;
   --button-l-rem-round: 0.5rem;
@@ -1444,6 +1474,16 @@
   --bg-stroke3: var(--bg-stroke3-report-xspector-light-mode);
   --bg-stroke4: var(--bg-stroke4-report-xspector-light-mode);
   --bg-stroke5: var(--bg-stroke5-report-xspector-light-mode);
+  --table-bg-main: var(--table-bg-main-report-xspector-light-mode);
+  --table-bg-line: var(--table-bg-line-report-xspector-light-mode);
+  --table-bg-a: var(--table-bg-a-report-xspector-light-mode);
+  --table-bg-b: var(--table-bg-b-report-xspector-light-mode);
+  --table-bg-hover: var(--table-bg-hover-report-xspector-light-mode);
+  --table-panel-hover: var(--table-panel-hover-report-xspector-light-mode);
+  --table-panel-sub-line: var(--table-panel-sub-line-report-xspector-light-mode);
+  --table-panel-main-line: var(--table-panel-main-line-report-xspector-light-mode);
+  --table-panel-selected: var(--table-panel-selected-report-xspector-light-mode);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-report-xspector-light-mode);
 }
 
 :root[data-theme="xspector"] {
@@ -1798,6 +1838,16 @@
   --bg-stroke3: var(--bg-stroke3-xspector);
   --bg-stroke4: var(--bg-stroke4-xspector);
   --bg-stroke5: var(--bg-stroke5-xspector);
+  --table-bg-main: var(--table-bg-main-xspector);
+  --table-bg-line: var(--table-bg-line-xspector);
+  --table-bg-a: var(--table-bg-a-xspector);
+  --table-bg-b: var(--table-bg-b-xspector);
+  --table-bg-hover: var(--table-bg-hover-xspector);
+  --table-panel-hover: var(--table-panel-hover-xspector);
+  --table-panel-sub-line: var(--table-panel-sub-line-xspector);
+  --table-panel-main-line: var(--table-panel-main-line-xspector);
+  --table-panel-selected: var(--table-panel-selected-xspector);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-xspector);
 }
 
 :root[data-theme="skyller"] {
@@ -2152,6 +2202,16 @@
   --bg-stroke3: var(--bg-stroke3-skyller);
   --bg-stroke4: var(--bg-stroke4-skyller);
   --bg-stroke5: var(--bg-stroke5-skyller);
+  --table-bg-main: var(--table-bg-main-skyller);
+  --table-bg-line: var(--table-bg-line-skyller);
+  --table-bg-a: var(--table-bg-a-skyller);
+  --table-bg-b: var(--table-bg-b-skyller);
+  --table-bg-hover: var(--table-bg-hover-skyller);
+  --table-panel-hover: var(--table-panel-hover-skyller);
+  --table-panel-sub-line: var(--table-panel-sub-line-skyller);
+  --table-panel-main-line: var(--table-panel-main-line-skyller);
+  --table-panel-selected: var(--table-panel-selected-skyller);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-skyller);
 }
 
 :root {
@@ -3898,6 +3958,10 @@ input[type=number] {
   margin-right: -0.5rem;
 }
 
+.-mt-3 {
+  margin-top: -0.75rem;
+}
+
 .-mt-\[30px\] {
   margin-top: -30px;
 }
@@ -5104,6 +5168,11 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--bg-stroke2) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-bg-stroke3 {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--bg-stroke3) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -6218,6 +6287,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--input-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-modal-dropdown-surface {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--modal-dropdown-surface) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
+
 .bg-modal-highlight {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--modal-highlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -9612,6 +9686,30 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:ring-\[var\(--action-button-icon-active-border\)\]:focus-visible {
+  --tw-ring-color: var(--action-button-icon-active-border);
+}
+
+.focus-visible\:ring-\[var\(--action-button-icon-default-border\)\]:focus-visible {
+  --tw-ring-color: var(--action-button-icon-default-border);
+}
+
+.focus-visible\:ring-\[var\(--action-button-outline-active-border\)\]:focus-visible {
+  --tw-ring-color: var(--action-button-outline-active-border);
+}
+
+.focus-visible\:ring-\[var\(--action-button-outline-default-border\)\]:focus-visible {
+  --tw-ring-color: var(--action-button-outline-default-border);
+}
+
+.focus-visible\:ring-\[var\(--action-button-solid-active-border\)\]:focus-visible {
+  --tw-ring-color: var(--action-button-solid-active-border);
+}
+
+.focus-visible\:ring-\[var\(--action-button-solid-default-border\)\]:focus-visible {
+  --tw-ring-color: var(--action-button-solid-default-border);
+}
+
 .focus-visible\:ring-gray-500:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/ActionButton/ActionButton.styles.ts

@@ -1,7 +1,9 @@
 import { cva } from "class-variance-authority";
 
 export const actionButtonVariants = cva(
-  ["box-border flex items-center justify-center"],
+  [
+    "box-border flex items-center justify-center outline-none focus-visible:outline-none",
+  ],
   {
     variants: {
       variant: {
@@ -9,17 +11,20 @@ export const actionButtonVariants = cva(
           "bg-action-button-solid-default border-action-button-solid-default text-action-button-solid-default fill-action-button-solid-default",
           "hover:bg-action-button-solid-hover hover:border-action-button-solid-hover hover:text-action-button-solid-hover hover:fill-action-button-solid-hover",
           "active:bg-action-button-solid-pressed active:border-action-button-solid-pressed active:text-action-button-solid-pressed active:fill-action-button-solid-pressed",
+          "focus-visible:ring-none focus-visible:ring-offset-2 focus-visible:ring-[var(--action-button-solid-default-border)]",
         ],
         outline: [
           "ring-1 ring-inset",
           "bg-action-button-outline-default text-action-button-outline-default fill-action-button-outline-default ring-[var(--action-button-outline-default-border)]",
           "hover:bg-action-button-outline-hover hover:text-action-button-outline-hover hover:fill-action-button-outline-hover hover:ring-[var(--action-button-outline-hover-border)]",
           "active:bg-action-button-outline-pressed active:text-action-button-outline-pressed active:fill-action-button-outline-pressed active:ring-[var(--action-button-outline-pressed-border)]",
+          "focus-visible:ring-none focus-visible:ring-[var(--action-button-outline-default-border)]",
         ],
         icon: [
           "bg-action-button-icon-default border-action-button-icon-default text-action-button-icon-default fill-action-button-icon-default",
           "hover:bg-action-button-icon-hover hover:border-action-button-icon-hover hover:text-action-button-icon-hover hover:fill-action-button-icon-hover",
           "active:bg-action-button-icon-pressed active:border-action-button-icon-pressed active:text-action-button-icon-pressed active:fill-action-button-icon-pressed",
+          "focus-visible:ring-none focus-visible:ring-offset-2 focus-visible:ring-[var(--action-button-icon-default-border)]",
         ],
       },
       size: {
@@ -48,6 +53,7 @@ export const actionButtonVariants = cva(
           "bg-action-button-solid-active border-action-button-solid-active text-action-button-solid-active fill-action-button-solid-active",
           "hover:bg-action-button-solid-active-hover hover:border-action-button-solid-active-hover hover:text-action-button-solid-active-hover hover:fill-action-button-solid-active-hover",
           "active:bg-action-button-solid-active-pressed active:border-action-button-solid-active-pressed active:text-action-button-solid-active-pressed active:fill-action-button-solid-active-pressed",
+          "focus-visible:ring-[var(--action-button-solid-active-border)]",
         ],
       },
       {
@@ -57,6 +63,7 @@ export const actionButtonVariants = cva(
           "bg-action-button-outline-active text-action-button-outline-active fill-action-button-outline-active ring-[var(--action-button-outline-active-border)]",
           "hover:bg-action-button-outline-active-hover hover:text-action-button-outline-active-hover hover:fill-action-button-outline-active-hover hover:ring-[var(--action-button-outline-active-hover-border)]",
           "active:bg-action-button-outline-active-pressed active:text-action-button-outline-active-pressed active:fill-action-button-outline-active-pressed active:ring-[var(--action-button-outline-active-pressed-border)]",
+          "focus-visible:ring-[var(--action-button-outline-active-border)]",
         ],
       },
       {
@@ -66,6 +73,7 @@ export const actionButtonVariants = cva(
           "bg-action-button-icon-active border-action-button-icon-active text-action-button-icon-active fill-action-button-icon-active",
           "hover:bg-action-button-icon-active-hover hover:border-action-button-icon-active-hover hover:text-action-button-icon-active-hover hover:fill-action-button-icon-active-hover",
           "active:bg-action-button-icon-active-pressed active:border-action-button-icon-active-pressed active:text-action-button-icon-active-pressed active:fill-action-button-icon-active-pressed",
+          "focus-visible:ring-[var(--action-button-icon-active-border)]",
         ],
       },
       {

package/src/components/Dropdown/Dropdown.tsx

@@ -289,9 +289,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
              */}
             <ComboboxOptions
               className={cn(
-                "absolute top-full left-0 w-full mt-1 z-[51]",
+                "absolute top-full left-0 w-full -mt-3 z-[51]",
                 "min-w-[154px] max-h-60 overflow-y-auto",
-                "rounded-lg bg-modal-surface text-text-g-contrast-high",
+                "rounded-md bg-modal-dropdown-surface border border-bg-stroke3 text-text-g-contrast-high",
                 optionContainerClassName,
               )}
               style={{ boxShadow: "var(--dropdown-menu-shadow)" }}

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -51,7 +51,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
@@ -73,7 +73,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
@@ -252,10 +252,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn(
-      "h-px bg-[var(--dropdown-menu-seperator-bg)]",
-      className,
-    )}
+    className={cn("h-px bg-[var(--dropdown-menu-seperator-bg)]", className)}
     {...props}
   />
 ));

package/src/components/TextInput/TextInput.tsx

@@ -19,11 +19,7 @@ import {
   searchIconVariant,
   segmentedIconWrapperVariant,
 } from "./TextInput.styles";
-import {
-  CircleAlert,
-  CircleX,
-  Search,
-} from "lucide-react";
+import { CircleAlert, CircleX, Search } from "lucide-react";
 import { cn } from "@/utils/cn";
 
 export type InputProps = {
@@ -107,7 +103,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       normalizeOnCommit,
       ...props
     },
-    ref
+    ref,
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const _id = id || `${type}-${label}-input`;
@@ -122,16 +118,16 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       (error || !!errorMessage
         ? "error"
         : warning || !!warningMessage
-          ? "warning"
-          : "default");
+        ? "warning"
+        : "default");
     const isError = feedbackStatus === "error";
     const isWarning = feedbackStatus === "warning";
     const feedbackMessage =
       feedbackStatus === "error"
         ? errorMessage
         : feedbackStatus === "warning"
-          ? warningMessage
-          : helperText;
+        ? warningMessage
+        : helperText;
 
     const inputClassname = inputVariant({
       size,
@@ -187,7 +183,6 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       position: "end",
     });
 
-
     const handleChange = useCallback(
       (e: ChangeEvent<HTMLInputElement>) => {
         if (normalize) {
@@ -195,7 +190,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         }
         props.onChange?.(e);
       },
-      [normalize, props.onChange]
+      [normalize, props.onChange],
     );
 
     const commitValue = useCallback(
@@ -212,7 +207,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           } as unknown as ChangeEvent<HTMLInputElement>);
         }
       },
-      [trimOnCommit, normalizeOnCommit, props.onChange]
+      [trimOnCommit, normalizeOnCommit, props.onChange],
     );
 
     const handleBlur = useCallback(
@@ -220,7 +215,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         if (trimOnCommit || normalizeOnCommit) commitValue(e);
         props.onBlur?.(e);
       },
-      [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur]
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur],
     );
 
     const handleKeyDown = useCallback(
@@ -230,7 +225,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         }
         props.onKeyDown?.(e);
       },
-      [trimOnCommit, normalizeOnCommit, commitValue, props.onKeyDown]
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onKeyDown],
     );
 
     const displayValue =
@@ -276,7 +271,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             className={cn(
               inlineStartIconWrapperClassname,
               "flex",
-              classes?.iconSearchWrapper
+              classes?.iconSearchWrapper,
             )}
           >
             {renderStartIcon()}
@@ -289,7 +284,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           <div
             className={cn(
               inlineStartIconWrapperClassname,
-              classes?.iconSearchWrapper
+              classes?.iconSearchWrapper,
             )}
           >
             <div
@@ -306,7 +301,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         <div
           className={cn(
             startSegmentIconWrapperClassname,
-            classes?.startIconWrapper
+            classes?.startIconWrapper,
           )}
           onClick={handleOnClickLeftSectionIcon}
         >
@@ -333,7 +328,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             className={cn(
               inlineEndIconWrapperClassname,
               "flex",
-              classes?.iconWrapper
+              classes?.iconWrapper,
             )}
           >
             {renderEndIcon()}
@@ -347,7 +342,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             className={cn(
               inlineEndIconWrapperClassname,
               "flex",
-              classes?.iconWrapper
+              classes?.iconWrapper,
             )}
           >
             <div
@@ -362,7 +357,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
       return (
         <div
-          className={cn(endSegmentIconWrapperClassname, classes?.endIconWrapper)}
+          className={cn(
+            endSegmentIconWrapperClassname,
+            classes?.endIconWrapper,
+          )}
           onClick={handleOnClickRightSectionIcon}
         >
           {endIcon}
@@ -392,14 +390,20 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             value={displayValue}
             className={cn(inputClassname, props.className)}
             onChange={normalize ? handleChange : props.onChange}
-            onBlur={trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur}
-            onKeyDown={trimOnCommit || normalizeOnCommit ? handleKeyDown : props.onKeyDown}
+            onBlur={
+              trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur
+            }
+            onKeyDown={
+              trimOnCommit || normalizeOnCommit
+                ? handleKeyDown
+                : props.onKeyDown
+            }
           />
           {hasSearchIcon && !hasLeftSectionIcon && (
             <div
               className={cn(
                 inlineStartIconWrapperClassname,
-                classes?.iconSearchWrapper
+                classes?.iconSearchWrapper,
               )}
             >
               <Search className={cn(searchIconClassname, classes?.icon)} />
@@ -409,7 +413,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
           {hasClearIcon && !hasRightSectionIcon && (
             <div
-              className={cn(inlineEndIconWrapperClassname, classes?.iconWrapper)}
+              className={cn(
+                inlineEndIconWrapperClassname,
+                classes?.iconWrapper,
+              )}
               style={{
                 display:
                   keepCloseIconOnValue && props.value ? "flex" : undefined,
@@ -420,7 +427,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
                   iconActionClassname,
                   // 'fill-none stroke-current',
                   // "fill-none stroke-input-default-text hover:stroke-input-filled-text active:stroke-input-filled-text",
-                  classes?.icon
+                  classes?.icon,
                 )}
                 onMouseDown={handleClearInput}
               />
@@ -453,8 +460,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
                     isError
                       ? "text-input-error"
                       : isWarning
-                        ? "text-warning"
-                        : "text-input-filled-text"
+                      ? "text-warning"
+                      : "text-input-filled-text",
                   )}
                 />
               </span>
@@ -467,7 +474,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 export default TextInput;

package/src/patterns/menu/Menu.tsx

@@ -79,6 +79,8 @@ export type MenuProps = {
   side?: "top" | "right" | "bottom" | "left";
   sideOffset?: number;
   contentClassName?: string;
+  /** data-testid attached to the menu content element */
+  testId?: string;
 };
 
 // ---------------------------------------------------------------------------
@@ -246,6 +248,7 @@ export const Menu = ({
   side = "bottom",
   sideOffset = 4,
   contentClassName,
+  testId,
 }: MenuProps) => (
   <DropdownMenuRoot open={open} onOpenChange={onOpenChange}>
     {trigger && (
@@ -256,6 +259,7 @@ export const Menu = ({
       side={side}
       sideOffset={sideOffset}
       className={contentClassName}
+      data-testid={testId}
     >
       {header && (
         <div className="sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]">

package/src/theme/presets/colors.js

@@ -159,6 +159,20 @@ module.exports = {
         "bg-stroke4": withColorMixin("--bg-stroke4"),
         "bg-stroke5": withColorMixin("--bg-stroke5"),
 
+        // Table
+        "table-bg-main": withColorMixin("--table-bg-main"),
+        "table-bg-line": withColorMixin("--table-bg-line"),
+        "table-bg-a": withColorMixin("--table-bg-a"),
+        "table-bg-b": withColorMixin("--table-bg-b"),
+        "table-bg-hover": withColorMixin("--table-bg-hover"),
+        "table-panel-hover": withColorMixin("--table-panel-hover"),
+        "table-panel-sub-line": withColorMixin("--table-panel-sub-line"),
+        "table-panel-main-line": withColorMixin("--table-panel-main-line"),
+        "table-panel-selected": withColorMixin("--table-panel-selected"),
+
+        // Modal dropdown surface
+        "modal-dropdown-surface": withColorMixin("--modal-dropdown-surface"),
+
         // Common
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

package/src/theme/themes/variable-mapping.css

@@ -353,6 +353,16 @@
   --bg-stroke3: var(--bg-stroke3-report-xspector-light-mode);
   --bg-stroke4: var(--bg-stroke4-report-xspector-light-mode);
   --bg-stroke5: var(--bg-stroke5-report-xspector-light-mode);
+  --table-bg-main: var(--table-bg-main-report-xspector-light-mode);
+  --table-bg-line: var(--table-bg-line-report-xspector-light-mode);
+  --table-bg-a: var(--table-bg-a-report-xspector-light-mode);
+  --table-bg-b: var(--table-bg-b-report-xspector-light-mode);
+  --table-bg-hover: var(--table-bg-hover-report-xspector-light-mode);
+  --table-panel-hover: var(--table-panel-hover-report-xspector-light-mode);
+  --table-panel-sub-line: var(--table-panel-sub-line-report-xspector-light-mode);
+  --table-panel-main-line: var(--table-panel-main-line-report-xspector-light-mode);
+  --table-panel-selected: var(--table-panel-selected-report-xspector-light-mode);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-report-xspector-light-mode);
 }
 
 :root[data-theme="xspector"] {
@@ -707,6 +717,16 @@
   --bg-stroke3: var(--bg-stroke3-xspector);
   --bg-stroke4: var(--bg-stroke4-xspector);
   --bg-stroke5: var(--bg-stroke5-xspector);
+  --table-bg-main: var(--table-bg-main-xspector);
+  --table-bg-line: var(--table-bg-line-xspector);
+  --table-bg-a: var(--table-bg-a-xspector);
+  --table-bg-b: var(--table-bg-b-xspector);
+  --table-bg-hover: var(--table-bg-hover-xspector);
+  --table-panel-hover: var(--table-panel-hover-xspector);
+  --table-panel-sub-line: var(--table-panel-sub-line-xspector);
+  --table-panel-main-line: var(--table-panel-main-line-xspector);
+  --table-panel-selected: var(--table-panel-selected-xspector);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-xspector);
 }
 
 :root[data-theme="skyller"] {
@@ -1061,4 +1081,14 @@
   --bg-stroke3: var(--bg-stroke3-skyller);
   --bg-stroke4: var(--bg-stroke4-skyller);
   --bg-stroke5: var(--bg-stroke5-skyller);
+  --table-bg-main: var(--table-bg-main-skyller);
+  --table-bg-line: var(--table-bg-line-skyller);
+  --table-bg-a: var(--table-bg-a-skyller);
+  --table-bg-b: var(--table-bg-b-skyller);
+  --table-bg-hover: var(--table-bg-hover-skyller);
+  --table-panel-hover: var(--table-panel-hover-skyller);
+  --table-panel-sub-line: var(--table-panel-sub-line-skyller);
+  --table-panel-main-line: var(--table-panel-main-line-skyller);
+  --table-panel-selected: var(--table-panel-selected-skyller);
+  --modal-dropdown-surface: var(--modal-dropdown-surface-skyller);
 }