@tangle-network/ui 11.22.1 → 11.22.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/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.1",
+  "version": "11.22.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

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/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 />