@tangle-network/ui 11.22.2 → 11.23.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.23.0
+
+### Minor Changes
+
+- 57f4e3d: `Tag` takes `wrap` to break a long label across lines instead of truncating it, for text that must be read in full without a hover (model-written part names on a phone or on paper).
+
+## 11.22.3
+
+### Patch Changes
+
+- 191de4b: Switch: draw the on state as an `--accent-text` track carrying a `bg-card` thumb. The `bg-primary` track measured 2.4:1 against the dark card and canvas, and its `bg-background` thumb 2.5:1 against the track, so a checked switch did not clear the 3:1 non-text floor in dark themes. Accent text clears 3:1 against the card and the canvas in every theme, which `@tangle-network/brand` now asserts per theme.
+
 ## 11.22.2
 
 ### Patch Changes

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 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),
+	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-[var(--accent-text)] 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 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") })
+	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-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })
 }));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 //#endregion

package/dist/primitives/tag.d.ts

@@ -30,6 +30,12 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "c
    * the label is a string; pass it when the label is not plain text.
    */
   removeLabel?: string;
+  /**
+   * Wraps a long label onto more lines instead of truncating it. Use it where
+   * the full text matters and no hover is available to read a `title`, such
+   * as model-written part names read on a phone or on paper.
+   */
+  wrap?: boolean;
 }
 declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
 //#endregion

package/dist/primitives/tag.js

@@ -6,23 +6,38 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 //#region src/primitives/tag.tsx
 const SIZE = {
-	sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3",
-	md: "h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5"
+	sm: "gap-1 px-2 text-xs [&_svg]:size-3",
+	md: "gap-1.5 px-2.5 text-sm [&_svg]:size-3.5"
 };
-const Tag = React.forwardRef(({ className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, ...props }, ref) => {
+const WRAP = {
+	sm: {
+		box: "items-start",
+		label: "py-[3px]",
+		icon: "h-[22px] items-center"
+	},
+	md: {
+		box: "items-start",
+		label: "py-[3px]",
+		icon: "h-[26px] items-center"
+	}
+};
+const Tag = React.forwardRef(({ className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, wrap = false, ...props }, ref) => {
 	const classes = TONE_CLASSES[tone];
 	const label = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
-		className: cn("inline-flex min-w-0 max-w-full shrink-0 items-center rounded-md border font-medium", SIZE[size], emphasis === "outline" ? classes.outline : classes.surface, onRemove && (size === "sm" ? "pr-0.5" : "pr-1"), className),
+		className: cn("inline-flex min-w-0 max-w-full shrink-0 rounded-md border font-medium", SIZE[size], wrap ? WRAP[size].box : ["items-center", size === "sm" ? "h-6" : "h-7"], emphasis === "outline" ? classes.outline : classes.surface, onRemove && (size === "sm" ? "pr-0.5" : "pr-1"), className),
 		...props,
 		children: [
 			icon ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
-				className: cn("inline-flex shrink-0", classes.icon),
+				className: cn("inline-flex shrink-0", wrap && WRAP[size].icon, classes.icon),
 				children: icon
 			}) : null,
-			/* @__PURE__ */ jsx("span", {
+			wrap ? /* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 [overflow-wrap:anywhere]", WRAP[size].label),
+				children
+			}) : /* @__PURE__ */ jsx("span", {
 				className: "min-w-0 truncate",
 				title: typeof children === "string" ? children : void 0,
 				children
@@ -31,7 +46,7 @@ const Tag = React.forwardRef(({ className, children, tone = "neutral", emphasis
 				type: "button",
 				"aria-label": label,
 				onClick: onRemove,
-				className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']", size === "sm" ? "size-5" : "size-6", focusRing),
+				className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']", size === "sm" ? "size-5" : "size-6", wrap && "mt-px", focusRing),
 				children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
 			}) : null
 		]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.22.2",
+  "version": "11.23.0",
   "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.4",
+    "@tangle-network/brand": "^1.15.6",
     "@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/chip.test.tsx

@@ -124,6 +124,28 @@ describe("Tag", () => {
   });
 });
 
+describe("Tag wrap", () => {
+  const LONG = "Adafruit-BME680-Temperature-Humidity-Pressure-Gas-Sensor-Breakout";
+
+  it("truncates a long label by default and names it in a title", () => {
+    render(<Tag>{LONG}</Tag>);
+    const label = screen.getByText(LONG);
+    expect(label.className).toContain("truncate");
+    expect(label.getAttribute("title")).toBe(LONG);
+    expect(label.parentElement?.className).toContain("h-6");
+  });
+
+  it("wraps a long label across lines when asked, aligned to its first line", () => {
+    render(<Tag wrap size="md">{LONG}</Tag>);
+    const label = screen.getByText(LONG);
+    expect(label.className).not.toContain("truncate");
+    expect(label.className).toContain("[overflow-wrap:anywhere]");
+    expect(label.className).toContain("py-[3px]");
+    expect(label.parentElement?.className).toContain("items-start");
+    expect(label.parentElement?.className).not.toMatch(/(^|\s)h-7(\s|$)/);
+  });
+});
+
 describe("IconTile", () => {
   it("falls back from a broken image to the glyph, then to initials", () => {
     const { container, rerender } = render(<IconTile src="https://example.invalid/logo.png" name="Acme Robotics" />);

package/src/primitives/switch.test.tsx

@@ -24,12 +24,16 @@ describe("Switch", () => {
     expect(stateClasses(thumb, "unchecked")).not.toContain("bg-background");
   });
 
-  it("fills the track with primary once it is on", () => {
+  it("draws its on state as an accent-text track with a card thumb, so a checked switch clears 3:1 in every theme", () => {
     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");
+    const thumb = track.firstElementChild as Element;
+    expect(stateClasses(track, "checked")).toContain("bg-[var(--accent-text)]");
+    expect(stateClasses(track, "checked")).toContain("border-transparent");
+    expect(stateClasses(track, "checked")).not.toContain("bg-primary");
+    expect(stateClasses(thumb, "checked")).toContain("bg-card");
+    expect(stateClasses(thumb, "checked")).not.toContain("bg-background");
   });
 });

package/src/primitives/switch.tsx

@@ -16,7 +16,13 @@ const Switch = React.forwardRef<
       // 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",
+      // On is an --accent-text track carrying a card-coloured thumb. Accent text
+      // is held to text contrast on the card and the canvas, so the track's edge
+      // and the thumb on it (the same pair, inverted) both clear 3:1 in every
+      // theme. The bg-primary fill is tuned to carry white text and measured
+      // 2.4:1 on the dark card, with a bg-background thumb at 2.5:1 on it.
+      // brand's switch-contrast.test.ts asserts these pairs for every theme.
+      "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-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent",
       focusRing,
       className,
     )}
@@ -25,7 +31,7 @@ const Switch = React.forwardRef<
   >
     <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",
+        "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-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground",
       )}
     />
   </SwitchPrimitives.Root>

package/src/primitives/tag-chip.stories.tsx

@@ -224,3 +224,27 @@ export const WorstCase: Story = {
     </BothThemes>
   ),
 };
+
+const PART = "Adafruit-BME680-Temperature-Humidity-Pressure-Gas-Sensor-Breakout";
+
+/** `wrap` keeps the whole label readable: one line matches a fixed tag's height; more lines grow it, with the icon and remove button on the first line. */
+export const Wrap: Story = {
+  render: () => (
+    <BothThemes>
+      <div className="flex w-full max-w-[220px] flex-col items-start gap-2" data-testid="wrap-column">
+        {(["sm", "md"] as const).map((size) => (
+          <div key={size} className="flex flex-col items-start gap-2">
+            <div className="flex items-start gap-2">
+              <Tag size={size} data-probe={`fixed-${size}`}>Short</Tag>
+              <Tag size={size} wrap data-probe={`wrap-one-${size}`}>Short</Tag>
+              <Tag size={size} wrap onRemove={() => {}} data-probe={`wrap-remove-${size}`}>Short</Tag>
+            </div>
+            <Tag size={size} wrap tone="teal" icon={<FileText />} onRemove={() => {}} data-probe={`wrap-long-${size}`}>
+              {PART}
+            </Tag>
+          </div>
+        ))}
+      </div>
+    </BothThemes>
+  ),
+};

package/src/primitives/tag.tsx

@@ -33,16 +33,31 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "c
    * the label is a string; pass it when the label is not plain text.
    */
   removeLabel?: string;
+  /**
+   * Wraps a long label onto more lines instead of truncating it. Use it where
+   * the full text matters and no hover is available to read a `title`, such
+   * as model-written part names read on a phone or on paper.
+   */
+  wrap?: boolean;
 }
 
 const SIZE = {
-  sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3",
-  md: "h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5",
+  sm: "gap-1 px-2 text-xs [&_svg]:size-3",
+  md: "gap-1.5 px-2.5 text-sm [&_svg]:size-3.5",
+} as const;
+
+// A truncating tag has one fixed height. A wrapping tag carries its vertical
+// padding on the label instead, sized so one line is exactly that height
+// (sm: 16px line + 6 + 2px border = 24; md: 20 + 6 + 2 = 28), and aligns the
+// icon and remove button to the first line rather than the middle.
+const WRAP = {
+  sm: { box: "items-start", label: "py-[3px]", icon: "h-[22px] items-center" },
+  md: { box: "items-start", label: "py-[3px]", icon: "h-[26px] items-center" },
 } as const;
 
 const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
   (
-    { className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, ...props },
+    { className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, wrap = false, ...props },
     ref,
   ) => {
     const classes = TONE_CLASSES[tone];
@@ -51,8 +66,9 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
       <span
         ref={ref}
         className={cn(
-          "inline-flex min-w-0 max-w-full shrink-0 items-center rounded-md border font-medium",
+          "inline-flex min-w-0 max-w-full shrink-0 rounded-md border font-medium",
           SIZE[size],
+          wrap ? WRAP[size].box : ["items-center", size === "sm" ? "h-6" : "h-7"],
           emphasis === "outline" ? classes.outline : classes.surface,
           onRemove && (size === "sm" ? "pr-0.5" : "pr-1"),
           className,
@@ -60,15 +76,20 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
         {...props}
       >
         {icon ? (
-          <span aria-hidden="true" className={cn("inline-flex shrink-0", classes.icon)}>
+          <span aria-hidden="true" className={cn("inline-flex shrink-0", wrap && WRAP[size].icon, classes.icon)}>
             {icon}
           </span>
         ) : null}
-        {/* A long label truncates here rather than pushing the remove button
-            out; the title gives its full text on hover. */}
-        <span className="min-w-0 truncate" title={typeof children === "string" ? children : undefined}>
-          {children}
-        </span>
+        {/* By default a long label truncates here rather than pushing the
+            remove button out, and the title gives its full text on hover.
+            `wrap` breaks it across lines instead, even inside one long token. */}
+        {wrap ? (
+          <span className={cn("min-w-0 [overflow-wrap:anywhere]", WRAP[size].label)}>{children}</span>
+        ) : (
+          <span className="min-w-0 truncate" title={typeof children === "string" ? children : undefined}>
+            {children}
+          </span>
+        )}
         {onRemove ? (
           <button
             type="button"
@@ -79,6 +100,8 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
               // the hit area without moving the tag's layout.
               "relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']",
               size === "sm" ? "size-5" : "size-6",
+              // Centred on the first line box (22px sm, 26px md) when wrapping.
+              wrap && "mt-px",
               focusRing,
             )}
           >