@tangle-network/ui 11.22.0 → 11.22.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.22.2
+
+### Patch Changes
+
+- e78325b: Input, Textarea, Select and the terminal prompt draw placeholder text in `--text-dim`, the faintest text tier, instead of `muted-foreground`. An empty field's example text no longer looks like an entered value; `--text-dim` still clears 4.5:1 on the field well in both themes.
+
+## 11.22.1
+
+### Patch Changes
+
+- eb11ddd: Switch: draw the off state as an outlined track with a filled thumb in `muted-foreground`, which clears 3:1 against the card and the canvas. The old filled `bg-input` track and `bg-background` thumb looked like one flat shape in both themes, so an unchecked switch could not be seen.
+
 ## 11.22.0
 
 ### Minor Changes

package/dist/primitives/input.js

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/input.tsx
-const inputVariants = cva(cn("flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation), {
+const inputVariants = cva(cn("flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation), {
 	variants: {
 		variant: {
 			default: "",
@@ -78,7 +78,7 @@ const Textarea = React.forwardRef(({ className, variant: _variant, size = "defau
 	const errorId = error ? `${textareaId}-error` : void 0;
 	const textarea = /* @__PURE__ */ jsx("textarea", {
 		id: textareaId,
-		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", size === "compact" && "min-h-24 px-3 py-2", size === "touch" && "text-base", className),
+		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm", "placeholder:text-[var(--text-dim)]", "disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", size === "compact" && "min-h-24 px-3 py-2", size === "touch" && "text-base", className),
 		ref,
 		...props,
 		"aria-describedby": descriptionIds(describedBy, hintId, errorId),

package/dist/primitives/select.js

@@ -11,7 +11,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("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", "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),
+	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left", "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: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,

package/dist/primitives/switch.js

@@ -6,10 +6,10 @@ import { jsx } from "react/jsx-runtime";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 //#region src/primitives/switch.tsx
 const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[background-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", focusRing, className),
+	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
 	...props,
 	ref,
-	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") })
+	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })
 }));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 //#endregion

package/dist/primitives/terminal-display.js

@@ -97,7 +97,7 @@ const TerminalInput = React.forwardRef(({ className, onSubmit, variant: _variant
 				value,
 				onChange: (e) => setValue(e.target.value),
 				onKeyDown: handleKeyDown,
-				className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
+				className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-[var(--text-dim)]",
 				...props
 			}),
 			/* @__PURE__ */ jsx(TerminalCursor, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.22.0",
+  "version": "11.22.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.15.2",
+    "@tangle-network/brand": "^1.15.4",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/input.tsx

@@ -10,7 +10,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 const inputVariants = cva(
   cn(
-    "flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+    "flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
     fieldPresentation,
   ),
   {
@@ -117,7 +117,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         id={textareaId}
         className={cn(
           "flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm",
-          "placeholder:text-muted-foreground",
+          "placeholder:text-[var(--text-dim)]",
           "disabled:cursor-not-allowed disabled:opacity-50",
           fieldPresentation,
           error && focusFieldInvalid,

package/src/primitives/placeholder-tone.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { Input, Textarea } from "./input"
+import { Select, SelectTrigger, SelectValue } from "./select"
+
+/**
+ * An empty field's example text must not read as an entered value.
+ *
+ * Placeholders used `text-muted-foreground`, which is `--text-muted`: the tier
+ * one step below body text (#4c4c4c against #2d2d2d in light). An empty PTIN
+ * field showing "P01234567" then looked like saved data. `--text-dim` is the
+ * faintest TEXT tier — still 4.5:1 on every plane including the field well,
+ * which tokens.test.ts asserts — so it is the quietest colour that is still
+ * legible, and three tier steps from the value.
+ */
+const PLACEHOLDER_TIER = "--text-dim"
+
+function placeholderColours(el: HTMLElement): string[] {
+  return el.className
+    .split(/\s+/)
+    .filter((cls) => /^(?:placeholder|data-\[placeholder\]):text-/.test(cls))
+}
+
+function expectQuietPlaceholder(el: HTMLElement, what: string) {
+  const colours = placeholderColours(el)
+  expect(colours, `${what} must declare a placeholder colour`).not.toEqual([])
+  for (const cls of colours) {
+    expect(cls, `${what} placeholder must use ${PLACEHOLDER_TIER}`).toContain(
+      `var(${PLACEHOLDER_TIER})`,
+    )
+    expect(cls, `${what} placeholder must not be faded with alpha`).not.toMatch(/\/\d{1,3}$/)
+  }
+}
+
+describe("placeholder text sits on the faintest text tier", () => {
+  it("Input", () => {
+    render(<Input aria-label="PTIN" placeholder="P01234567" />)
+    expectQuietPlaceholder(screen.getByLabelText("PTIN"), "Input")
+  })
+
+  it("Textarea", () => {
+    render(<Textarea aria-label="Notes" placeholder="Details" />)
+    expectQuietPlaceholder(screen.getByLabelText("Notes"), "Textarea")
+  })
+
+  it("SelectTrigger", () => {
+    render(
+      <Select>
+        <SelectTrigger aria-label="Filing status">
+          <SelectValue placeholder="Choose" />
+        </SelectTrigger>
+      </Select>,
+    )
+    expectQuietPlaceholder(screen.getByLabelText("Filing status"), "SelectTrigger")
+  })
+})

package/src/primitives/select.tsx

@@ -22,9 +22,9 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "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",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       fieldPresentation,
-      "data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:text-left",
+      "data-[placeholder]:text-[var(--text-dim)] [&>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],

package/src/primitives/switch.test.tsx

@@ -0,0 +1,35 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Switch } from "./switch";
+
+afterEach(cleanup);
+
+/** The classes that apply in a state: unprefixed ones, plus that state's variant. */
+function stateClasses(el: Element, state: "checked" | "unchecked"): string[] {
+  return (el.getAttribute("class") ?? "")
+    .split(/\s+/)
+    .filter((c) => !c.startsWith("data-[") || c.startsWith(`data-[state=${state}]:`))
+    .map((c) => c.replace(`data-[state=${state}]:`, ""));
+}
+
+describe("Switch", () => {
+  it("draws its off state in muted-foreground, so an unchecked switch is visible on a card or the canvas", () => {
+    render(<Switch aria-label="Reminders" />);
+    const track = screen.getByRole("switch", { name: "Reminders" });
+    const thumb = track.firstElementChild as Element;
+    expect(track).toHaveAttribute("data-state", "unchecked");
+    expect(stateClasses(track, "unchecked")).toContain("border-muted-foreground");
+    expect(stateClasses(track, "unchecked")).not.toContain("bg-input");
+    expect(stateClasses(thumb, "unchecked")).toContain("bg-muted-foreground");
+    expect(stateClasses(thumb, "unchecked")).not.toContain("bg-background");
+  });
+
+  it("fills the track with primary once it is on", () => {
+    render(<Switch aria-label="Reminders" />);
+    const track = screen.getByRole("switch", { name: "Reminders" });
+    fireEvent.click(track);
+    expect(track).toHaveAttribute("data-state", "checked");
+    expect(stateClasses(track, "checked")).toContain("bg-primary");
+    expect(stateClasses(track.firstElementChild as Element, "checked")).toContain("bg-background");
+  });
+});

package/src/primitives/switch.tsx

@@ -11,7 +11,12 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[background-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      // Off is an outlined track with a filled thumb, both in muted-foreground,
+      // which clears 3:1 against the card and the canvas in both themes (a
+      // switch's boundary is non-text content). The old bg-input track under a
+      // bg-background thumb read as one flat shape, so an off switch was not
+      // visible at all. --border-strong was tried and measured 2.2:1 on a white card.
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent",
       focusRing,
       className,
     )}
@@ -20,7 +25,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        "pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground",
       )}
     />
   </SwitchPrimitives.Root>

package/src/primitives/terminal-display.tsx

@@ -174,7 +174,7 @@ const TerminalInput = React.forwardRef<HTMLInputElement, TerminalInputProps>(
           value={value}
           onChange={(e) => setValue(e.target.value)}
           onKeyDown={handleKeyDown}
-          className="flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground"
+          className="flex-1 bg-transparent text-foreground outline-none placeholder:text-[var(--text-dim)]"
           {...props}
         />
         <TerminalCursor />