@tangle-network/ui 11.31.2 → 11.31.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.31.3
+
+### Patch Changes
+
+- 58bce3d: FilterField labels read at 14px (`text-sm`) instead of 12px, so a toolbar's field labels meet the same type floor as the controls beside them.
+
 ## 11.31.2
 
 ### Patch Changes

package/dist/primitives/toolbar.js

@@ -28,7 +28,7 @@ const FilterField = React.forwardRef(({ className, label, htmlFor, children, ...
 	...props,
 	children: [/* @__PURE__ */ jsx("label", {
 		htmlFor,
-		className: "whitespace-nowrap text-muted-foreground text-xs",
+		className: "whitespace-nowrap text-muted-foreground text-sm",
 		children: label
 	}), children]
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.31.2",
+  "version": "11.31.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/primitives/toolbar.test.tsx

@@ -89,4 +89,15 @@ describe("FilterField", () => {
       screen.getByRole("combobox"),
     );
   });
+
+  it("sets its label on the 14px step of the shared scale, never smaller", () => {
+    render(
+      <FilterField htmlFor="status" label="Status">
+        <select id="status" />
+      </FilterField>,
+    );
+    const label = screen.getByText("Status");
+    expect(label.className).toMatch(/\btext-sm\b/);
+    expect(label.className).not.toMatch(/\btext-xs\b|text-\[/);
+  });
 });

package/src/primitives/toolbar.tsx

@@ -95,9 +95,10 @@ const FilterField = React.forwardRef<HTMLDivElement, FilterFieldProps>(
       className={cn("flex shrink-0 items-center gap-2", className)}
       {...props}
     >
+      {/* 14px, the floor for any text a product shows; a 12px label beside a 14px control reads as a footnote. */}
       <label
         htmlFor={htmlFor}
-        className="whitespace-nowrap text-muted-foreground text-xs"
+        className="whitespace-nowrap text-muted-foreground text-sm"
       >
         {label}
       </label>