@tangle-network/ui 11.32.2 → 11.34.0

package/src/files/file-artifact-pane.tsx

@@ -20,6 +20,8 @@ export interface FileArtifactPaneEditorOptions {
   enabled?: boolean;
   /** Persisted baseline when content is the current draft. */
   savedContent?: string;
+  /** Whether the draft has unsaved edits, when the host tracks that itself. Overrides `savedContent`. */
+  dirty?: boolean;
   mode?: DocumentEditorMode;
   defaultMode?: DocumentEditorMode;
   onModeChange?: (mode: DocumentEditorMode) => void;
@@ -158,6 +160,7 @@ export function FileArtifactPane({
           hideTitleBlock={hideTitleBlock}
           markdown={content ?? ""}
           savedMarkdown={editor.savedContent}
+          dirty={editor.dirty}
           urlTransform={urlTransform}
           mode={editor.mode}
           defaultMode={editor.defaultMode}

package/src/lib/control-presentation.ts

@@ -1,4 +1,5 @@
 import { focusField } from "./focus";
+import { ixField } from "./interaction";
 import { cn } from "./utils";
 
 // Time-valued tokens only: --transition-fast is a legacy duration + easing
@@ -66,16 +67,21 @@ export const controlSizes = {
   touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base",
 } as const;
 
-// --input is the shadcn border/track role, NOT a field background. --bg-input
-// resolves the recessed well inside every canonical/named light/dark scope.
+// --input is the shadcn border/track role, NOT a field background. The fill is
+// `ixField`'s `--well`, the brand's surface-context variable: the page well at
+// the top level, re-declared by each card level so a field is never the colour
+// of the plane it sits on. `ixField` also replaces focusField's resting
+// `border-border` and neutral hover with `--field-border` and the green hover
+// edge; focusField's `:focus` border and halo are kept exactly.
 // An autofill inset shadow coexists with the Tailwind focus ring; never hide
 // autofill with a seconds-long background transition or clear the focus halo.
 // --field-surface lets a context raise its fields: Toolbar sets it to the card
 // surface so filters on the page canvas read as controls, not as holes in it.
 export const fieldPresentation = cn(
   focusField,
+  ixField,
   controlMotion,
-  "min-w-0 bg-[var(--field-surface,var(--bg-input))] text-foreground",
+  "min-w-0 text-foreground",
   "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]",
-  "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]",
+  "autofill:shadow-[inset_0_0_0_1000px_var(--field-surface,var(--well))] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]",
 );

package/src/lib/focus.ts

@@ -1,3 +1,5 @@
+import { ixField } from "./interaction";
+
 /**
  * The focus treatment every control shares, in two shapes over one palette
  * (`--focus-border`, `--focus-halo` and `--border-strong` from
@@ -42,9 +44,13 @@ export const focusField =
  * compose your own classes instead of this helper. The field selector is
  * written out in full because Tailwind reads class names statically.
  * Base styles use its marker class to clear the inner editor fallback outline.
+ *
+ * The container is the field, so it takes `ixField` (lib/interaction.ts): its
+ * own well fill, the `--field-border` hairline and the green hover edge. The
+ * borderless field inside stays transparent.
  */
 export const focusFieldWithin =
-  "focus-field-within border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]";
+  `focus-field-within transition-[border-color,box-shadow] duration-150 ease-out ${ixField} has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]`;
 
 /** Error state for a field: a danger hairline and the same focus shape in danger. Compose after `focusField`. */
 export const focusFieldInvalid =

package/src/lib/interaction.ts

@@ -0,0 +1,64 @@
+/**
+ * The interaction states every control shares: one palette in five shapes, all
+ * read from `@tangle-network/brand`'s `--ix-*` tokens (tokens.css), which derive
+ * from the focus ring hue `--hsl-ring`. So hover, press, after-click and
+ * selected are the same green in Hospitality and the same indigo on the spine
+ * as the keyboard focus ring.
+ *
+ *   hover     1px edge at .45 plus a 4px halo at .16 (`--ix-hover`)
+ *   press     1px edge at .95 plus a 4px halo at .30 (`--ix-press`)
+ *   after     a control focused by a mouse click keeps a soft ring (`--ix-after`)
+ *   selected  a tint plus a 1px inset ring at .85 (`--ix-sel-bg`, `--ix-sel-ring`)
+ *
+ * The keyboard focus-visible glow stays exactly as `focusRing` / `focusField`
+ * (lib/focus.ts) draw it. Tailwind composes `--tw-ring-shadow` with
+ * `--tw-shadow`, so these shadows coexist with that ring, and
+ * `focus-visible:shadow-none` drops the hover glow while the keyboard ring shows.
+ *
+ * Every class is written out in full because Tailwind reads class names
+ * statically.
+ */
+
+/** Bordered or filled control: green edge on hover, deeper on press, a persistent soft ring after a mouse click. */
+export const ixControl =
+  "hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] " +
+  "focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] " +
+  "active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none";
+
+/** The after-click part of `ixControl` alone, for a field that opens a menu (SelectTrigger). */
+export const ixControlAfter =
+  "focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)]";
+
+/** Ghost, icon, link and bare controls: a wash, never a glow (too noisy in sidebars and toolbars). */
+export const ixControlSoft = "hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)]";
+
+/**
+ * Field: its own well and a visible border; hover replaces `focusField`'s
+ * neutral `--border-strong`. The well is the `--well` context variable, which a
+ * card re-declares for its descendants, so a field never takes its parent's
+ * colour. `--field-surface` still lets a context such as Toolbar pick the fill.
+ */
+export const ixField =
+  "bg-[var(--field-surface,var(--well))] border-[var(--field-border)] shadow-[var(--shadow-well)] " +
+  "hover:border-[var(--ix-hover-border)] hover:shadow-[var(--shadow-well),var(--ix-hover)]";
+
+/** Selected / on / current: tint plus a 1px inset green ring. */
+export const ixSelected =
+  "aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] " +
+  "aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] " +
+  "aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] " +
+  "data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] " +
+  "data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]";
+
+/** Underline tab: 2px green underline plus a faint tint, never a box; a faint underline on hover. */
+export const ixTabUnderline =
+  "hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] " +
+  "data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] " +
+  "aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]";
+
+/** List row / menu item: wash plus inset edge on hover or keyboard highlight; checked = selected. */
+export const ixRow =
+  "hover:bg-[var(--ix-hover-bg)] hover:shadow-[inset_0_0_0_1px_var(--ix-hover-border)] " +
+  "data-[highlighted]:bg-[var(--ix-sel-bg)] data-[highlighted]:shadow-[inset_0_0_0_1px_var(--ix-hover-border)] " +
+  "focus:bg-[var(--ix-sel-bg)] data-[state=checked]:bg-[var(--ix-sel-bg)] data-[state=checked]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] " +
+  "active:shadow-[inset_0_0_0_1px_hsl(var(--hsl-ring))]";

package/src/markdown/markdown-table.test.tsx

@@ -45,6 +45,15 @@ describe("Markdown tables", () => {
     expect(document.body.innerHTML).not.toContain("text-xs");
   });
 
+  it("contains its screen-reader status line, so a table deep in a scrolling panel cannot stretch the page", () => {
+    render(<Markdown>{TABLE}</Markdown>);
+    const status = screen.getByRole("status");
+    expect(status.className).toContain("sr-only");
+    // The status is absolutely positioned; the card it sits in must be its containing block.
+    const card = status.closest(".not-prose") as HTMLElement;
+    expect(card.className.split(" ")).toEqual(expect.arrayContaining(["relative", "overflow-hidden"]));
+  });
+
   it("copies the table as CSV with quoting and formula-safe cells", async () => {
     const writeText = vi.fn().mockResolvedValue(undefined);
     Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });

package/src/markdown/markdown-table.tsx

@@ -138,7 +138,11 @@ export function MarkdownTable({ node, className, children, ...props }: Component
     return { csv: tableCsv([...header, ...body]), kinds: columnKinds(body), rowCount: body.length };
   }, [node]);
   return (
-    <div className="not-prose my-4 overflow-hidden rounded-lg border border-border bg-card">
+    // `relative` makes the card the containing block of the copy control's
+    // screen-reader status line. Without it that absolutely positioned line
+    // resolves against the nearest positioned ancestor, often the page, and a
+    // table far down a scrolling panel stretches the page past the viewport.
+    <div className="not-prose relative my-4 overflow-hidden rounded-lg border border-border bg-card">
       <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-1">
         <span className="text-sm text-muted-foreground">{rowCount === 1 ? "1 row" : `${rowCount} rows`}</span>
         <CopyCsvButton csv={csv} />

package/src/primitives/button.tsx

@@ -3,29 +3,35 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText } from "../lib/control-presentation";
 import { focusRing } from "../lib/focus";
+import { ixControl, ixControlSoft, ixSelected } from "../lib/interaction";
 import { cn } from "../lib/utils";
 
 // Sizes follow the shared control scale (control-presentation.ts): sm, md and
 // lg match Input, Textarea and SelectTrigger at the same size. xl is a display
 // call to action outside that scale.
+//
+// Interaction (lib/interaction.ts): a variant with a border or a fill takes
+// `ixControl` (green edge and glow on hover, press and after a click); ghost,
+// link and bare take `ixControlSoft`, a wash that never glows. A toggle button
+// (any `aria-pressed`) adds `ixControl` + `ixSelected` whatever its variant.
 const buttonVariants = cva(
   `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97]",
+          `bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] ${ixControl}`,
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97]",
+          `bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] ${ixControl}`,
         outline:
-          "border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground",
+          `border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground ${ixControl}`,
         secondary:
-          "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97]",
+          `bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] ${ixControl}`,
         ghost:
-          "hover:bg-muted hover:text-foreground text-muted-foreground border border-transparent",
-        link: "text-[var(--accent-text)] underline-offset-4 hover:underline",
+          `hover:text-foreground text-muted-foreground border border-transparent ${ixControlSoft}`,
+        link: `text-[var(--accent-text)] underline-offset-4 hover:underline ${ixControlSoft}`,
         sandbox:
-          "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]",
+          `bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] ${ixControl}`,
       },
       size: {
         default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
@@ -50,7 +56,20 @@ const buttonVariants = cva(
 // every surface, size and type class. It is for pressable rows, tiles and pills
 // that draw their own layout; anything that reads as a button uses a styled
 // variant and a size.
-const bareButton = `${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
+const bareButton = `${focusRing} ${ixControlSoft} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
+
+/** One Button render's classes: variant and size, the toggle states, then the caller's. */
+function buttonClassName(
+  variant: ButtonProps["variant"],
+  size: ButtonProps["size"],
+  pressed: React.AriaAttributes["aria-pressed"],
+  className: string | undefined,
+) {
+  const toggle = pressed === undefined ? undefined : `${ixControl} ${ixSelected}`;
+  return variant === "bare"
+    ? cn(bareButton, toggle, className)
+    : cn(buttonVariants({ variant, size }), toggle, className);
+}
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -115,7 +134,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       // Keep slotted content intact: its action name must survive loading too.
       return (
         <Slot
-          className={variant === "bare" ? cn(bareButton, className) : cn(buttonVariants({ variant, size, className }))}
+          className={buttonClassName(variant, size, props["aria-pressed"], className)}
           ref={ref}
           {...props}
           {...(isDisabled ? disabledHandlers(props) : {})}
@@ -140,7 +159,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <button
-        className={variant === "bare" ? cn(bareButton, className) : cn(buttonVariants({ variant, size, className }))}
+        className={buttonClassName(variant, size, props["aria-pressed"], className)}
         ref={ref}
         {...props}
         disabled={disabled || loading}

package/src/primitives/card.tsx

@@ -1,17 +1,31 @@
 import * as React from "react";
+import { ixControl } from "../lib/interaction";
 import { cn } from "../lib/utils";
 import { Heading } from "./heading";
 
+/**
+ * A card is one level of the brand surface ladder. It carries
+ * `data-slot="card"`, and the brand's surface-context rule (tokens.css)
+ * re-declares `--card` and `--well` for everything inside it: a Card or a
+ * `bg-card` box inside a card paints the raised level, one inside that the
+ * raised-2 level, and a field in any of them takes the well that is the
+ * opposite step from its parent. Nesting needs no prop and no app selector.
+ */
 const Card = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & {
     variant?: "default" | "glass" | "sandbox" | "elevated";
-    /** Decorative border feedback only. Put actions in a native button or link. */
+    /** Decorative hover feedback only (the shared green edge). Put actions in a native button or link. */
     hover?: boolean;
+    /**
+     * The card is itself the control, such as a card wrapped in a link: it takes
+     * the full control states (hover glow, press, the ring after a click).
+     */
+    interactive?: boolean;
   }
->(({ className, variant = "default", hover = false, ...props }, ref) => {
+>(({ className, variant = "default", hover = false, interactive = false, ...props }, ref) => {
   const variants = {
-    default: "bg-card border-border",
+    default: "bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)]",
     elevated: "bg-muted/50 border-border shadow-[var(--shadow-card)]",
     glass: "bg-card/80 backdrop-blur-xl border-border shadow-[var(--shadow-card)]",
     sandbox: "bg-muted/50 border-primary/20 shadow-[var(--shadow-accent)]",
@@ -21,12 +35,13 @@ const Card = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow]",
+        "rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow,background-color]",
         "duration-[var(--transition-default)]",
         variants[variant],
-        hover && "hover:border-[var(--border-strong)]",
+        (hover || interactive) && ixControl,
         className,
       )}
+      data-slot="card"
       {...props}
     />
   );
@@ -69,7 +84,9 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
+    // Two lines at most: a guard, not a copy budget. Long copy belongs in help
+    // text or a disclosure.
+    className={cn("text-muted-foreground text-sm line-clamp-2", className)}
     {...props}
   />
 ));

package/src/primitives/control-presentation.test.tsx

@@ -12,10 +12,13 @@ afterEach(cleanup);
 
 describe("shared control presentation", () => {
   it("uses the field well, not the border/track alias, with scoped foreground and time-only motion", () => {
-    expect(fieldPresentation).toContain("bg-[var(--field-surface,var(--bg-input))]");
+    // The well is the brand's --well context variable; Toolbar can still pick the fill.
+    expect(fieldPresentation).toContain("bg-[var(--field-surface,var(--well))]");
     expect(fieldPresentation.split(" ")).not.toContain("bg-input");
     expect(fieldPresentation.split(" ")).not.toContain("bg-card");
-    expect(fieldPresentation).toContain("border-border");
+    // ixField's --field-border replaces focusField's resting border-border.
+    expect(fieldPresentation.split(" ")).toContain("border-[var(--field-border)]");
+    expect(fieldPresentation.split(" ")).not.toContain("border-border");
     expect(fieldPresentation).toContain("text-foreground");
     expect(fieldPresentation).not.toContain("duration-150");
     expect(controlMotion).toContain("duration-[var(--duration-fast)]");
@@ -100,7 +103,7 @@ describe("shared control presentation", () => {
     expect(input.current).toHaveAttribute("aria-invalid", "true");
     expect(input.current!.className).toContain("autofill:shadow-");
     expect(input.current!.className.split(" ")).toContain("bg-card");
-    expect(input.current!.className).not.toContain("bg-[var(--field-surface,var(--bg-input))]");
+    expect(input.current!.className).not.toContain("bg-[var(--field-surface,var(--well))]");
     expect(textarea.current).toBeDisabled();
     expect(trigger.current).toBe(screen.getByLabelText("Choice"));
     expect(trigger.current).toBeDisabled();

package/src/primitives/date-picker.test.tsx

@@ -128,7 +128,7 @@ describe("raised fields in a Toolbar", () => {
     );
     expect(screen.getByTestId("toolbar").className).toContain("[--field-surface:hsl(var(--card))]");
     for (const name of ["Format", "Elsewhere"]) {
-      expect(screen.getByRole("combobox", { name }).className).toContain("bg-[var(--field-surface,var(--bg-input))]");
+      expect(screen.getByRole("combobox", { name }).className).toContain("bg-[var(--field-surface,var(--well))]");
     }
   });
 });

package/src/primitives/dropdown-menu.tsx

@@ -1,6 +1,7 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
+import { ixRow } from "../lib/interaction";
 import { cn } from "../lib/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
@@ -24,8 +25,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
-      "focus:bg-accent data-[state=open]:bg-muted/50",
+      "flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]",
+      "data-[state=open]:bg-[var(--ix-sel-bg)]",
+      ixRow,
       inset && "pl-8",
       className,
     )}
@@ -45,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -68,7 +70,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
+        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]",
         "data-[state=closed]:animate-out data-[state=open]:animate-in",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -91,8 +93,9 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
-      "focus:bg-muted/50 focus:text-foreground",
+      "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]",
+      "focus:text-foreground",
+      ixRow,
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -109,8 +112,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
-      "focus:bg-muted/50 focus:text-foreground",
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]",
+      "focus:text-foreground",
+      ixRow,
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -135,8 +139,9 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
-      "focus:bg-muted/50 focus:text-foreground",
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]",
+      "focus:text-foreground",
+      ixRow,
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}