@tangle-network/ui 11.14.0 → 11.15.1

package/src/primitives/metric-strip.test.tsx

@@ -1,181 +1,119 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 import { Metric, MetricStrip } from "./metric-strip";
 
-describe("MetricStrip", () => {
-  it("pairs each label with its value as a described term", () => {
-    render(
-      <MetricStrip>
-        <Metric label="Balance" value="$248.55" />
-      </MetricStrip>,
-    );
-    // The label is wrapped for truncation, so assert the term it belongs to.
-    expect(screen.getByText("Balance").closest("dt")).not.toBeNull();
-    expect(screen.getByText("$248.55").tagName).toBe("DD");
-  });
+afterEach(cleanup);
 
-  // axe's `definition-list` rule allows only dt, dd, script, template and div
-  // as direct children of a dl. The hint is a second dd for this reason: a <p>
-  // between the terms is a violation, and it was one.
-  it("puts only permitted elements directly inside the dl", () => {
+describe("MetricStrip", () => {
+  it("pairs labels, values and qualifiers as native described terms", () => {
     const { container } = render(
       <MetricStrip>
-        <Metric label="Spend" value="$12.00" hint="This month" />
+        <Metric label="Balance" value="$248.55" hint="Personal wallet" />
         <Metric label="Runs" value="41" />
       </MetricStrip>,
     );
-    const dl = container.querySelector("dl") as HTMLElement;
+    expect(screen.getByText("Balance").closest("dt")).not.toBeNull();
+    expect(screen.getByText("$248.55").tagName).toBe("DD");
+    expect(screen.getByText("Personal wallet").tagName).toBe("DD");
+    const dl = container.querySelector("dl")!;
     const permitted = new Set(["DT", "DD", "SCRIPT", "TEMPLATE", "DIV"]);
-    for (const child of Array.from(dl.children)) {
-      expect(permitted).toContain(child.tagName);
-    }
+    for (const child of Array.from(dl.children)) expect(permitted).toContain(child.tagName);
+    expect(dl.querySelectorAll("dt")).toHaveLength(2);
+    expect(dl.querySelectorAll("dd")).toHaveLength(3);
   });
 
-  it("renders the hint as a dd rather than a paragraph", () => {
-    render(
-      <MetricStrip>
-        <Metric label="Spend" value="$12.00" hint="Personal wallet" />
-      </MetricStrip>,
-    );
-    const hint = screen.getByText("Personal wallet");
-    expect(hint.tagName).toBe("DD");
-  });
-
-  it("omits the hint entirely when not given", () => {
+  it("omits absent qualifiers but preserves a numeric zero qualifier inside dd", () => {
     const { container } = render(
       <MetricStrip>
-        <Metric label="Runs" value="41" />
+        <Metric label="Unknown" value="—" />
+        <Metric label="Known zero" value={0} hint={0} />
+        <Metric label="Unavailable" value={null} hint={false} />
+        <Metric label="Empty hint" value="" hint="" />
       </MetricStrip>,
     );
-    expect(container.querySelectorAll("dd")).toHaveLength(1);
+    expect(container.querySelectorAll("dd")).toHaveLength(5);
+    expect(screen.getByText("Unknown").closest("div")!.querySelector("dd")!.textContent).toBe("—");
+    const zero = screen.getByText("Known zero").closest("div")!;
+    expect(Array.from(zero.querySelectorAll("dd")).map((node) => node.textContent)).toEqual(["0", "0"]);
+    expect(Array.from(zero.childNodes).every((node) => node.nodeType === Node.ELEMENT_NODE)).toBe(true);
+    expect(screen.getByText("Unavailable").closest("div")!.querySelector("dd")!.textContent).toBe("");
   });
 
-  // `attention` means a person has to do something, so it shows a pill next to
-  // the label. A zero on its own is not attention.
-  it("shows a pill beside the label only when attention is set", () => {
-    const { rerender, container } = render(
-      <MetricStrip>
-        <Metric label="Balance" value="$0.00" />
-      </MetricStrip>,
-    );
+  it("does not infer attention from zero; explicit danger retains its pill and value tone", () => {
+    const { rerender, container } = render(<MetricStrip><Metric label="Balance" value="$0.00" /></MetricStrip>);
     expect(container.querySelector("svg")).toBeNull();
-
-    rerender(
-      <MetricStrip>
-        <Metric
-          attention={{ tone: "danger", label: "Empty" }}
-          label="Balance"
-          value="$0.00"
-        />
-      </MetricStrip>,
-    );
+    rerender(<MetricStrip><Metric label="Balance" value="$0.00" attention={{ tone: "danger", label: "Empty" }} /></MetricStrip>);
     expect(screen.getByText("Empty")).toBeInTheDocument();
     expect(container.querySelector("svg")).not.toBeNull();
-  });
-
-  it("raises the value's tone only for a danger attention", () => {
-    const { container } = render(
-      <MetricStrip>
-        <Metric
-          attention={{ tone: "danger", label: "Empty" }}
-          label="Balance"
-          value="$0.00"
-        />
-      </MetricStrip>,
-    );
-    const value = screen.getByText("$0.00");
-    expect(value.className).toContain("--surface-danger-text");
+    expect(screen.getByText("$0.00").className).toContain("--surface-danger-text");
     expect(container.querySelectorAll("dd")).toHaveLength(1);
+    rerender(<MetricStrip><Metric label="Balance" value="$0.00" attention={{ tone: "warning", label: "Review" }} /></MetricStrip>);
+    expect(screen.getByText("$0.00").className).not.toContain("--surface-danger-text");
   });
 
-  // The divider is drawn only where it belongs, never drawn and then
-  // suppressed: `border-l` alongside `border-l-0` variants puts both in one
-  // conflict group whose winner is decided by emitted-rule order, and that
-  // resolved the wrong way at every breakpoint — every item kept a left border,
-  // including the first in each row.
-  it("draws the divider without a suppressing counterpart", () => {
-    const { container } = render(
-      <MetricStrip>
-        <Metric label="Balance" value="$0.00" />
-      </MetricStrip>,
-    );
-    const item = (container.querySelector("dl") as HTMLElement)
-      .children[0] as HTMLElement;
-    expect(item.className).not.toContain("border-l-0");
+  it("retains the default two / sm:four grid", () => {
+    const { container } = render(<MetricStrip><Metric label="Runs" value={0} /></MetricStrip>);
+    const dl = container.querySelector("dl")!;
+    expect(dl.className.split(" ")).toEqual(expect.arrayContaining(["grid-cols-2", "sm:grid-cols-4"]));
+    expect(dl.className).not.toContain("lg:grid-cols");
   });
 
-  // The row-start test has to name the same column count the grid does, at each
-  // breakpoint. Nothing in the type system ties them together, so changing the
-  // grid to three columns without moving the divider puts a rule mid-row. Read
-  // both out of the rendered classes and require them to agree, so the coupling
-  // is enforced rather than only described.
-  it("keeps the divider's row-start test matching the grid's column count", () => {
+  it.each([3, 4, 5, 6] as const)("owns the grid and all nonoverlapping row-start guards for %i columns", (columns) => {
     const { container } = render(
-      <MetricStrip>
-        <Metric label="Balance" value="$0.00" />
+      <MetricStrip columns={columns}>
+        {Array.from({ length: columns }, (_, i) => <Metric key={i} label={`Metric ${i}`} value={i} />)}
       </MetricStrip>,
     );
-    const dl = container.querySelector("dl") as HTMLElement;
-    const item = dl.children[0] as HTMLElement;
-
-    // `grid-cols-N` unprefixed is the base breakpoint; `<bp>:grid-cols-N` is that
-    // breakpoint. The divider spells the same breakpoints as `max-<bp>:` / `<bp>:`.
-    const columnsAt = (prefix: string) => {
-      const re = prefix
-        ? new RegExp(`(?:^| )${prefix}:grid-cols-(\\d+)(?: |$)`)
-        : /(?:^| )grid-cols-(\d+)(?: |$)/;
-      const m = dl.className.match(re);
-      return m ? Number(m[1]) : null;
-    };
-    const modulusAt = (prefix: string) => {
-      const m = item.className.match(
-        new RegExp(`(?:^| )${prefix}:\\[&:not\\(:nth-child\\((\\d+)n\\+1\\)\\)\\]:border-l(?: |$)`),
-      );
-      return m ? Number(m[1]) : null;
-    };
-
-    // base grid (below sm) is guarded by the `max-sm:` divider rule
-    expect(modulusAt("max-sm")).toBe(columnsAt(""));
-    // the `sm:` grid is guarded by the `sm:` divider rule
-    expect(modulusAt("sm")).toBe(columnsAt("sm"));
-
-    // Every grid-cols breakpoint the strip declares must have a divider rule.
-    const declared = [...dl.className.matchAll(/(?:^| )(?:([a-z]+):)?grid-cols-\d+(?= |$)/g)]
-      .map((m) => m[1] ?? "");
-    for (const bp of declared) {
-      const guard = bp === "" ? "max-sm" : bp;
-      expect(
-        modulusAt(guard),
-        `grid-cols at "${bp || "base"}" has no matching ${guard}: divider rule`,
-      ).not.toBeNull();
+    const dl = container.querySelector("dl")!;
+    expect(dl).not.toHaveAttribute("columns");
+    expect(dl.className).toContain("max-sm:[&>div:not(:nth-child(2n+1))]:border-l");
+    if (columns <= 4) {
+      expect(dl.className).toContain(`sm:grid-cols-${columns}`);
+      expect(dl.className).toContain(`sm:[&>div:not(:nth-child(${columns}n+1))]:border-l`);
+    } else {
+      expect(dl.className).toContain("sm:grid-cols-3");
+      expect(dl.className).toContain("sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l");
+      expect(dl.className).toContain(`lg:grid-cols-${columns}`);
+      expect(dl.className).toContain(`lg:[&>div:not(:nth-child(${columns}n+1))]:border-l`);
     }
+    expect(dl.className).not.toContain("border-l-0");
+    for (const item of Array.from(dl.children)) expect(item.className).not.toContain("nth-child");
   });
 
-  it("titles the hint too, so a truncated qualifier stays recoverable", () => {
-    render(
-      <MetricStrip>
-        <Metric
-          hint="Personal wallet (0x1234abcd5678efgh)"
-          label="Balance"
-          value="$248.55"
-        />
-      </MetricStrip>,
-    );
-    expect(screen.getByText("Personal wallet (0x1234abcd5678efgh)")).toHaveAttribute(
-      "title",
-      "Personal wallet (0x1234abcd5678efgh)",
-    );
+  it("does not give a standalone Metric a strip divider", () => {
+    const { container } = render(<Metric label="Runs" value={0} />);
+    expect(container.firstElementChild!.className).not.toContain("border-l");
   });
 
-  it("titles a string value so a truncated figure stays readable", () => {
-    render(
-      <MetricStrip>
-        <Metric label="Balance" value="$1,284,003.10" />
+  it("wraps full labels, values and qualifiers without relying on a mouse title", () => {
+    render(<MetricStrip><Metric label="Very long account label without loss" value="$1,284,003.10" hint="Personal wallet (0x1234abcd5678efgh)" /></MetricStrip>);
+    for (const text of ["Very long account label without loss", "$1,284,003.10", "Personal wallet (0x1234abcd5678efgh)"]) {
+      const node = screen.getByText(text);
+      expect(node.className).toContain("[overflow-wrap:anywhere]");
+      expect(node.className).not.toContain("truncate");
+    }
+    expect(screen.getByText("$1,284,003.10")).toHaveAttribute("title", "$1,284,003.10");
+    expect(screen.getByText("Personal wallet (0x1234abcd5678efgh)")).toHaveAttribute("title", "Personal wallet (0x1234abcd5678efgh)");
+  });
+
+  it("preserves refs, attributes, caller classes and fragment/conditional DOM order", () => {
+    const strip = React.createRef<HTMLDListElement>();
+    const item = React.createRef<HTMLDivElement>();
+    const { container } = render(
+      <MetricStrip ref={strip} aria-label="Usage" className="mb-6 sm:grid-cols-3">
+        <><Metric ref={item} data-testid="first" className="max-sm:col-span-2 max-sm:border-b" label="Spend" value={0} /></>
+        {false && <Metric label="Hidden" value={0} />}
+        <Metric className="max-sm:border-l-0!" label="Calls" value={0} />
+        <Metric className="max-sm:border-l!" label="Average" value="—" />
       </MetricStrip>,
     );
-    expect(screen.getByText("$1,284,003.10")).toHaveAttribute(
-      "title",
-      "$1,284,003.10",
-    );
+    expect(strip.current).toBe(container.querySelector("dl"));
+    expect(strip.current).toHaveAttribute("aria-label", "Usage");
+    expect(item.current).toBe(screen.getByTestId("first"));
+    expect(item.current!.className).toContain("max-sm:col-span-2");
+    expect(strip.current!.className).toContain("sm:grid-cols-3");
+    expect(strip.current!.className).not.toContain("sm:grid-cols-4");
+    expect(Array.from(strip.current!.querySelectorAll("dt")).map((node) => node.textContent)).toEqual(["Spend", "Calls", "Average"]);
   });
 });

package/src/primitives/metric-strip.tsx

@@ -2,32 +2,32 @@ import * as React from "react";
 import { cn } from "../lib/utils";
 import { StatusPill, type StatusTone } from "./status-pill";
 
-/**
- * The headline figures for a console page, as ONE statement rather than four.
- *
- * A row of separate stat cards is the default and it is usually wrong here.
- * Each card is a box that must be tall enough for its longest member, so a row
- * mixing "$248.55 / Personal wallet" against a bare "0" leaves the short ones
- * mostly empty; and four bordered boxes read as four unrelated facts when they
- * are four readings of one account. `MetricStrip` puts them on one plane
- * divided by hairlines: same information, one object, no holes.
- *
- * The divider is a border on the item rather than a `divide-*` utility on the
- * parent, because these wrap. `divide-x` draws from DOM order and leaves a
- * stray rule at the start of every wrapped line; a per-item leading border
- * suppressed at each row start does not.
- */
+// Each finite preset owns its grid AND its row-start rules. Keep the strings
+// literal so host Tailwind consumers scanning the published source emit them.
+// Ranges do not overlap: no drawn border is subsequently suppressed.
+const layouts = {
+  3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l",
+  4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l",
+  5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l",
+  6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l",
+} as const;
+
+/** Headline readings on one plane, with native definition-list semantics. */
 export interface MetricStripProps
   extends React.HTMLAttributes<HTMLDListElement> {
   children: React.ReactNode;
+  /** Desktop columns. Default retains the existing two / sm:four layout.
+   * Five and six use three columns between sm and lg. Never inferred from data. */
+  columns?: 3 | 4 | 5 | 6;
 }
 
 const MetricStrip = React.forwardRef<HTMLDListElement, MetricStripProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ className, children, columns = 4, ...props }, ref) => (
     <dl
       ref={ref}
       className={cn(
-        "grid grid-cols-2 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)] sm:grid-cols-4",
+        "grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]",
+        layouts[columns],
         className,
       )}
       {...props}
@@ -43,72 +43,38 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
   value: React.ReactNode;
   /** The qualifying line: which wallet, which window, what the limit is. */
   hint?: React.ReactNode;
-  /** Raises the value's tone and shows a pill beside the label. A metric is
-   *  `attention` only when a person has to DO something — not merely when a
-   *  number is zero. */
+  /** Attention is a caller-owned action requirement, never inferred from zero. */
   attention?: { tone: StatusTone; label: string };
 }
 
-/**
- * One reading inside a `MetricStrip`.
- *
- * `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
- * described term rather than as two loose strings — the semantic that makes a
- * figure legible without the visual grouping.
- *
- * The value is `tabular-nums`: these sit in a row and change on a timer, and
- * proportional digits make the column jitter every time a 1 becomes an 8.
- */
+/** A described term; the strip, not this item, decides where separators belong. */
 const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
   ({ className, label, value, hint, attention, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        // Leading hairline, DRAWN only where a divider belongs — never drawn
-        // and then suppressed. Stating it as `border-l` plus `border-l-0`
-        // variants puts both in one conflict group, where the winner is decided
-        // by emitted-rule order rather than by intent; that resolved the wrong
-        // way at every breakpoint and left a rule down the start of each row.
-        // `:not(:nth-child(Nn+1))` is the row-start test for the column count
-        // at that breakpoint, so no rule ever contradicts another.
-        //
-        // N is COUPLED to the grid template on `MetricStrip`: 2 columns below
-        // `sm`, 4 from `sm`. A new breakpoint there — `md:grid-cols-3`, say —
-        // needs its `md:[&:not(:nth-child(3n+1))]:border-l` here in the same
-        // change, or the dividers land mid-row at that width.
-        "border-border p-4 sm:p-5",
-        "max-sm:[&:not(:nth-child(2n+1))]:border-l",
-        "sm:[&:not(:nth-child(4n+1))]:border-l",
-        className,
-      )}
+      className={cn("min-w-0 border-border p-4 sm:p-5", className)}
       {...props}
     >
-      <dt className="flex items-center gap-2 text-muted-foreground text-sm">
-        <span className="truncate">{label}</span>
+      <dt className="flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm">
+        <span className="min-w-0 whitespace-normal [overflow-wrap:anywhere]">{label}</span>
         {attention && (
           <StatusPill tone={attention.tone}>{attention.label}</StatusPill>
         )}
       </dt>
-      {/* `truncate`, and a step down until the column is wide enough for the
-          longest figure this strip carries. A balance renders as "$248.55" on a
-          funded account and as "$1,284,003.10" on a busy one, and at four
-          columns the wide case has nowhere to go — it either overflows its cell
-          or pushes the whole strip past the page. */}
+      {/* Values and qualifiers must be readable on touch, not only in a hover
+          title. Wrap even unbroken values without making the grid wider. */}
       <dd
         className={cn(
-          "mt-1 truncate font-semibold text-xl tabular-nums tracking-tight lg:text-2xl",
+          "mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl",
           attention?.tone === "danger" && "text-[var(--surface-danger-text)]",
         )}
         title={typeof value === "string" ? value : undefined}
       >
         {value}
       </dd>
-      {hint && (
-        // Titled for the same reason the value is: the line truncates, and a
-        // hint is where the qualifying detail lives — which wallet, which
-        // window — so a clipped one is the case most worth recovering.
+      {hint !== undefined && hint !== null && hint !== false && hint !== "" && (
         <dd
-          className="mt-0.5 truncate text-[var(--text-dim)] text-xs"
+          className="mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs"
           title={typeof hint === "string" ? hint : undefined}
         >
           {hint}

package/src/primitives/select.tsx

@@ -3,7 +3,7 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
-import { focusField } from "../lib/focus";
+import { controlSizes, fieldPresentation } from "../lib/control-presentation";
 import { cn } from "../lib/utils";
 
 const Select = SelectPrimitive.Root;
@@ -14,20 +14,27 @@ const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    /** Default remains 36px; compact follows density, touch is at least 44px. */
+    size?: "default" | "compact" | "touch";
+  }
+>(({ className, children, size = "default", ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      focusField,
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      fieldPresentation,
+      "data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:text-left",
+      // The designed open state: accent border and surface while the menu is up.
+      "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
+      size !== "default" && controlSizes[size],
       className,
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -76,7 +83,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "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 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-foreground shadow-[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 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 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-card text-foreground shadow-[var(--shadow-dropdown)] data-[state=closed]:animate-out data-[state=open]:animate-in",
         position === "popper" &&
           "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
         className,
@@ -119,14 +126,14 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none transition-colors focus:bg-[var(--accent-surface-strong)] focus:text-foreground data-[state=checked]:bg-[var(--accent-surface-strong)] data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-4 w-4 text-[var(--accent-text)]" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>