@tangle-network/ui 11.32.0 → 11.32.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @tangle-network/ui
 
+## 11.32.1
+
+### Patch Changes
+
+- c94bde7: Fix shared defects from the Hospitality design audit.
+  
+  Brand: dark `--destructive` is now a light red carrying dark ink (`0 90% 77%` on `0 60% 10%`), so `text-destructive` clears AA (at least 4.5:1) on the canvas, card, popover and muted planes of every dark theme; it measured 2.5:1 on Hospitality's dark card. Destructive fills keep their foreground at 8:1. The `--font-sans` and `--font-display` stacks name `"Inter Variable"` ahead of `"Inter"`, and the README now recommends `@fontsource-variable/inter` so apps render every weight the scale uses. Brand still loads no fonts itself.
+  
+  UI: the `tabs` SegmentedControl scrolls the selected tab into view inside the strip (never the page) and fades the edge that has more tabs past it; tab items take a 44px hit height on coarse pointers; labels keep one weight in both variants, so changing the selection no longer shifts the row. SelectTrigger values end in an ellipsis with a gap before the chevron instead of clipping mid-glyph. Plain-text code fences (`text`, `txt`, `plain`, `plaintext`) show no language label.
+
 ## 11.32.0
 
 ### Minor Changes

package/dist/lib/control-presentation.js

@@ -28,6 +28,11 @@ const controlSquare = {
 * page on focus for anything smaller.
 */
 const fieldTouchText = "pointer-coarse:text-base";
+/**
+* A control that is shorter than 44px on a fine pointer still gets a 44px hit
+* height on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+*/
+const touchTarget = "pointer-coarse:min-h-11";
 /** Field sizes: the control scale with field padding. */
 const fieldSizes = {
 	sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, "px-2.5"),
@@ -40,4 +45,4 @@ const controlSizes = {
 };
 const fieldPresentation = cn(focusField, controlMotion, "min-w-0 bg-[var(--field-surface,var(--bg-input))] text-foreground", "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]", "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");
 //#endregion
-export { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText };
+export { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText, touchTarget };

package/dist/markdown/code-block.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/markdown/code-block.d.ts
-/** The Shiki grammar for a fence language, or undefined for plain text. */
 export declare function codeBlockGrammar(language: string | undefined): string | undefined;
 export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   code: string;

package/dist/markdown/code-block.js

@@ -123,6 +123,12 @@ const LANGUAGE_NAMES = {
 	dockerfile: "Dockerfile"
 };
 /** The Shiki grammar for a fence language, or undefined for plain text. */
+const PLAIN_TEXT = /* @__PURE__ */ new Set([
+	"text",
+	"txt",
+	"plain",
+	"plaintext"
+]);
 function codeBlockGrammar(language) {
 	if (!language) return void 0;
 	const id = language.toLowerCase();
@@ -191,7 +197,7 @@ const CodeBlock = memo(({ code, language, label, filename, showLineNumbers = fal
 			active = false;
 		};
 	}, [code, grammar]);
-	const languageName = grammar ? LANGUAGE_NAMES[grammar] : language;
+	const languageName = grammar ? LANGUAGE_NAMES[grammar] : PLAIN_TEXT.has(language?.toLowerCase() ?? "") ? void 0 : language;
 	const headerLabel = label ?? (filename ? void 0 : languageName);
 	const hasHeader = Boolean(filename || headerLabel);
 	const mode = light === void 0 ? {} : { "data-theme": light ? "light" : "dark" };

package/dist/primitives/segmented-control.d.ts

@@ -17,6 +17,12 @@ import * as React from "react";
  *     that darken on hover. This keeps the selected segment as the
  *     single visual anchor instead of the whole group competing with
  *     itself.
+ *   - Every label keeps one weight. Selection is colour plus surface or
+ *     underline, so changing the value never reflows the row.
+ *
+ * The tabs variant scrolls sideways when its options outgrow the row: the
+ * selected tab is kept in view, and a faded edge shows that more tabs sit
+ * past it.
  */
 export interface SegmentedControlOption<T extends string = string> {
   value: T;

package/dist/primitives/segmented-control.js

@@ -1,12 +1,61 @@
 "use client";
 import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import "../lib/control-presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/segmented-control.tsx
+/** Width of the faded edge that marks more tabs past the strip, in px. */
+const TAB_EDGE_FADE = 24;
+const tabEdgeFade = [
+	"data-[overflow-start]:[mask-image:linear-gradient(to_right,transparent,#000_24px)]",
+	"data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]",
+	"data-[overflow-start]:data-[overflow-end]:[mask-image:linear-gradient(to_right,transparent,#000_24px,#000_calc(100%-24px),transparent)]"
+];
 function SegmentedControl({ value, onValueChange, options, variant = "row", className, ...rest }) {
 	if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production" && !rest["aria-label"] && !rest["aria-labelledby"]) console.warn("[SegmentedControl] role=\"radiogroup\" requires either aria-label or aria-labelledby for accessibility.");
 	const optionRefs = React.useRef(/* @__PURE__ */ new Map());
+	const stripRef = React.useRef(null);
+	const [overflow, setOverflow] = React.useState({
+		start: false,
+		end: false
+	});
+	const tabs = variant === "tabs";
+	const measureOverflow = React.useCallback(() => {
+		const strip = stripRef.current;
+		if (!strip) return;
+		const start = strip.scrollLeft > 1;
+		const end = strip.scrollLeft + strip.clientWidth < strip.scrollWidth - 1;
+		setOverflow((prev) => prev.start === start && prev.end === end ? prev : {
+			start,
+			end
+		});
+	}, []);
+	React.useLayoutEffect(() => {
+		if (!tabs) return;
+		const strip = stripRef.current;
+		const option = optionRefs.current.get(value);
+		if (strip && option) {
+			const start = option.offsetLeft;
+			const end = start + option.offsetWidth;
+			if (start < strip.scrollLeft + TAB_EDGE_FADE) strip.scrollLeft = Math.max(0, start - TAB_EDGE_FADE);
+			else if (end > strip.scrollLeft + strip.clientWidth - TAB_EDGE_FADE) strip.scrollLeft = end - strip.clientWidth + TAB_EDGE_FADE;
+		}
+		measureOverflow();
+	}, [
+		tabs,
+		value,
+		options.length,
+		measureOverflow
+	]);
+	React.useEffect(() => {
+		if (!tabs || typeof ResizeObserver === "undefined") return;
+		const strip = stripRef.current;
+		if (!strip) return;
+		const observer = new ResizeObserver(measureOverflow);
+		observer.observe(strip);
+		return () => observer.disconnect();
+	}, [tabs, measureOverflow]);
 	const hasMatch = options.some((o) => o.value === value);
 	const handleKeyDown = (e) => {
 		if (options.length === 0) return;
@@ -29,8 +78,12 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		"aria-label": rest["aria-label"],
 		"aria-labelledby": rest["aria-labelledby"],
 		"data-testid": rest["data-testid"],
+		"data-overflow-start": overflow.start || void 0,
+		"data-overflow-end": overflow.end || void 0,
+		ref: stripRef,
 		onKeyDown: handleKeyDown,
-		className: cn("flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
+		onScroll: tabs ? measureOverflow : void 0,
+		className: cn("flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1", variant === "tabs" && ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade], className),
 		children: options.map((option, i) => {
 			const active = option.value === value;
 			const focusable = active || !hasMatch && i === 0;
@@ -47,7 +100,11 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 				onClick: () => {
 					if (!active) onValueChange(option.value);
 				},
-				className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-[color,background-color,border-color,box-shadow]", variant === "row" && ["rounded-md px-3 py-1.5", focusRing], variant === "tabs" && ["rounded-none border-b-2 -mb-px px-4 py-2", focusRingInset], active ? variant === "row" ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold" : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold" : variant === "row" ? "border border-transparent text-muted-foreground hover:text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
+				className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]", variant === "row" && ["rounded-md px-3 py-1.5", focusRing], variant === "tabs" && [
+					"shrink-0 rounded-none border-b-2 -mb-px px-4 py-2",
+					"pointer-coarse:min-h-11",
+					focusRingInset
+				], active ? variant === "row" ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)]" : "border-[var(--accent-text)] text-[var(--accent-text)]" : variant === "row" ? "border border-transparent text-muted-foreground hover:text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
 				children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.adornment && /* @__PURE__ */ jsx("span", {
 					className: cn("text-xs", active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"),
 					children: option.adornment

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 w-full items-center justify-between whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, fieldTouchText, "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 === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size], className),
+	className: cn("flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, fieldTouchText, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:truncate [&>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 === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size], className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.32.0",
+  "version": "11.32.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -150,7 +150,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.21.0",
+    "@tangle-network/brand": "^1.22.0",
     "@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/lib/control-presentation.ts

@@ -46,6 +46,12 @@ export const controlSquare = {
  */
 export const fieldTouchText = "pointer-coarse:text-base";
 
+/**
+ * A control that is shorter than 44px on a fine pointer still gets a 44px hit
+ * height on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+ */
+export const touchTarget = "pointer-coarse:min-h-11";
+
 /** Field sizes: the control scale with field padding. */
 export const fieldSizes = {
   sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, "px-2.5"),

package/src/markdown/code-block.test.tsx

@@ -14,6 +14,13 @@ afterEach(() => {
 
 describe("CodeBlock scoped semantic colors", () => {
   it("keeps code readable before the renderer loads, then applies live semantic colors and line numbers", async () => {
+    // Shiki stops tokenizing a line after 500ms and paints the rest in the last
+    // token's color. The first pass over a cold grammar also compiles its
+    // patterns, which on a loaded host can take longer than that. Warm the
+    // grammar first: this test checks the color mapping, not cold-start time.
+    const warm = render(<CodeBlock code={'const message = "hello";'} language="javascript" />);
+    await waitFor(() => expect(warm.container.querySelector("[data-highlighted]")).not.toBeNull(), { timeout: 10_000 });
+    warm.unmount();
     const { container } = render(<CodeBlock code={'const message = "hello";'} language="javascript" showLineNumbers />);
     // Plain code already carries its line numbers, so highlighting shifts no layout.
     expect(container.querySelector("pre code")?.textContent?.replace(/^1/, "")).toBe('const message = "hello";');
@@ -116,6 +123,17 @@ describe("CodeBlock", () => {
     expect(getByText("Python")).toBeInTheDocument();
   });
 
+  it.each(["text", "TXT", "plain", "plaintext"])("shows no %s label on a plain-text fence, only its copy control", (language) => {
+    const { container, queryByText } = render(
+      <CodeBlock code={"x"} language={language}>
+        <CopyButton text="x" />
+      </CodeBlock>,
+    );
+    expect(container.querySelector(".border-b")).toBeNull();
+    expect(queryByText(language)).toBeNull();
+    expect(container.querySelector('button[title="Copy to clipboard"]')).not.toBeNull();
+  });
+
   it("renders no header when neither label nor language is set", () => {
     const { container } = render(<CodeBlock code={"x"} />);
     // The header is the only element carrying a bottom border.

package/src/markdown/code-block.tsx

@@ -94,6 +94,8 @@ const LANGUAGE_NAMES: Record<string, string> = {
 };
 
 /** The Shiki grammar for a fence language, or undefined for plain text. */
+const PLAIN_TEXT = new Set(["text", "txt", "plain", "plaintext"]);
+
 export function codeBlockGrammar(language: string | undefined): string | undefined {
   if (!language) return undefined;
   const id = language.toLowerCase();
@@ -177,7 +179,8 @@ export const CodeBlock = memo(
       return () => { active = false; };
     }, [code, grammar]);
 
-    const languageName = grammar ? LANGUAGE_NAMES[grammar] : language;
+    // A plain-text fence names no language worth showing; it keeps its copy control.
+    const languageName = grammar ? LANGUAGE_NAMES[grammar] : PLAIN_TEXT.has(language?.toLowerCase() ?? "") ? undefined : language;
     const headerLabel = label ?? (filename ? undefined : languageName);
     const hasHeader = Boolean(filename || headerLabel);
     const mode = light === undefined ? {} : { "data-theme": light ? "light" : "dark" };

package/src/primitives/control-presentation.test.tsx

@@ -117,3 +117,19 @@ describe("shared control presentation", () => {
     expect(buttonVariants()).toContain("motion-reduce:active:scale-100");
   });
 });
+
+describe("SelectTrigger with a value longer than the trigger", () => {
+  it("ends the value in an ellipsis with a gap before the chevron", () => {
+    const value = "Luna — ReCenter Guest Concierge & Practitioner Desk";
+    render(<Select value="concierge"><SelectTrigger aria-label="Agent" className="w-40"><SelectValue>{value}</SelectValue></SelectTrigger></Select>);
+    const trigger = screen.getByLabelText("Agent");
+    const classes = trigger.className.split(" ");
+    // line-clamp cannot ellipsize a nowrap line: it clipped mid-glyph under the chevron.
+    expect(trigger.className).not.toContain("line-clamp");
+    expect(classes).toContain("[&>span]:truncate");
+    expect(classes).toContain("[&>span]:min-w-0");
+    expect(classes).toContain("gap-2");
+    // The rule targets the value span, which Radix renders as the trigger's direct child.
+    expect(trigger.querySelector(":scope > span")?.textContent).toBe(value);
+  });
+});

package/src/primitives/segmented-control.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from "vitest"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { SegmentedControl, type SegmentedControlOption } from "./segmented-control"
@@ -346,3 +346,90 @@ describe("SegmentedControl test ids", () => {
     expect(screen.getByTestId("workbench-tab-code")).toHaveAttribute("aria-checked", "true")
   })
 })
+
+describe("SegmentedControl tabs on a narrow strip", () => {
+  // jsdom has no layout. Model a 250px strip holding six 100px tabs, so the
+  // strip scrolls and some tabs sit past its edges.
+  const STRIP = 250
+  const TAB = 100
+  const scroll = new WeakMap<Element, number>()
+  const overrides: Array<[object, string, PropertyDescriptor | undefined]> = []
+  const define = (proto: object, key: string, descriptor: PropertyDescriptor) => {
+    overrides.push([proto, key, Object.getOwnPropertyDescriptor(proto, key)])
+    Object.defineProperty(proto, key, { configurable: true, ...descriptor })
+  }
+  const isStrip = (el: Element) => el.getAttribute("role") === "radiogroup"
+  const index = (el: Element) => Array.from(el.parentElement?.children ?? []).indexOf(el)
+
+  beforeEach(() => {
+    define(HTMLElement.prototype, "offsetLeft", { get(this: HTMLElement) { return isStrip(this) ? 0 : index(this) * TAB } })
+    define(HTMLElement.prototype, "offsetWidth", { get(this: HTMLElement) { return isStrip(this) ? STRIP : TAB } })
+    define(Element.prototype, "clientWidth", { get(this: Element) { return isStrip(this) ? STRIP : TAB } })
+    define(Element.prototype, "scrollWidth", { get(this: Element) { return isStrip(this) ? this.children.length * TAB : TAB } })
+    define(Element.prototype, "scrollLeft", {
+      get(this: Element) { return scroll.get(this) ?? 0 },
+      set(this: Element, v: number) { scroll.set(this, v) },
+    })
+  })
+  afterEach(() => {
+    for (const [proto, key, original] of overrides.reverse()) {
+      if (original) Object.defineProperty(proto, key, original)
+      else delete (proto as Record<string, unknown>)[key]
+    }
+    overrides.length = 0
+  })
+
+  const work: SegmentedControlOption[] = ["Today", "Messages", "Tasks", "Operations", "Payments", "People"].map(
+    (label) => ({ value: label.toLowerCase(), label }),
+  )
+
+  it("scrolls the strip, not the page, so the selected tab is in view", () => {
+    const { rerender } = render(
+      <SegmentedControl aria-label="Work" variant="tabs" value="payments" onValueChange={vi.fn()} options={work} />,
+    )
+    const strip = screen.getByRole("radiogroup")
+    // Payments spans 400-500px: its right edge plus the 24px fade fits the 250px view.
+    expect(strip.scrollLeft).toBe(500 - STRIP + 24)
+
+    rerender(<SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />)
+    expect(strip.scrollLeft).toBe(0)
+  })
+
+  it("fades the edge that has more tabs past it", () => {
+    const { rerender } = render(
+      <SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />,
+    )
+    const strip = screen.getByRole("radiogroup")
+    expect(strip).toHaveAttribute("data-overflow-end", "true")
+    expect(strip).not.toHaveAttribute("data-overflow-start")
+    expect(strip.className).toContain("data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]")
+
+    rerender(<SegmentedControl aria-label="Work" variant="tabs" value="people" onValueChange={vi.fn()} options={work} />)
+    expect(strip).toHaveAttribute("data-overflow-start", "true")
+    expect(strip).not.toHaveAttribute("data-overflow-end")
+  })
+
+  it("leaves a strip that fits unmasked", () => {
+    render(<SegmentedControl aria-label="Work" variant="tabs" value="all" onValueChange={vi.fn()} options={options.slice(0, 2)} />)
+    const strip = screen.getByRole("radiogroup")
+    expect(strip).not.toHaveAttribute("data-overflow-start")
+    expect(strip).not.toHaveAttribute("data-overflow-end")
+  })
+})
+
+describe("SegmentedControl stable labels and touch targets", () => {
+  it.each(["row", "tabs"] as const)("keeps one label weight whichever %s option is selected", (variant) => {
+    render(<SegmentedControl aria-label="Scope" variant={variant} value="personal" onValueChange={vi.fn()} options={options} />)
+    for (const radio of screen.getAllByRole("radio")) {
+      expect(radio.className).toContain("font-medium")
+      expect(radio.className).not.toMatch(/font-(semibold|bold)/)
+    }
+  })
+
+  it("gives each tab a 44px hit height on a coarse pointer", () => {
+    render(<SegmentedControl aria-label="Scope" variant="tabs" value="all" onValueChange={vi.fn()} options={options} />)
+    for (const radio of screen.getAllByRole("radio")) {
+      expect(radio.className).toContain("pointer-coarse:min-h-11")
+    }
+  })
+})

package/src/primitives/segmented-control.tsx

@@ -3,6 +3,7 @@
 declare const process: { env: { NODE_ENV?: string } } | undefined
 
 import * as React from "react"
+import { touchTarget } from "../lib/control-presentation"
 import { focusRing, focusRingInset } from "../lib/focus"
 import { cn } from "../lib/utils"
 
@@ -23,6 +24,12 @@ import { cn } from "../lib/utils"
  *     that darken on hover. This keeps the selected segment as the
  *     single visual anchor instead of the whole group competing with
  *     itself.
+ *   - Every label keeps one weight. Selection is colour plus surface or
+ *     underline, so changing the value never reflows the row.
+ *
+ * The tabs variant scrolls sideways when its options outgrow the row: the
+ * selected tab is kept in view, and a faded edge shows that more tabs sit
+ * past it.
  */
 export interface SegmentedControlOption<T extends string = string> {
   value: T
@@ -49,6 +56,15 @@ export interface SegmentedControlProps<T extends string = string>
   "data-testid"?: string
 }
 
+/** Width of the faded edge that marks more tabs past the strip, in px. */
+const TAB_EDGE_FADE = 24
+// Fade whichever edge has tabs past it; the two-attribute rule wins on specificity.
+const tabEdgeFade = [
+  "data-[overflow-start]:[mask-image:linear-gradient(to_right,transparent,#000_24px)]",
+  "data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]",
+  "data-[overflow-start]:data-[overflow-end]:[mask-image:linear-gradient(to_right,transparent,#000_24px,#000_calc(100%-24px),transparent)]",
+]
+
 export function SegmentedControl<T extends string = string>({
   value,
   onValueChange,
@@ -69,6 +85,44 @@ export function SegmentedControl<T extends string = string>({
   }
 
   const optionRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map())
+  const stripRef = React.useRef<HTMLDivElement>(null)
+  const [overflow, setOverflow] = React.useState({ start: false, end: false })
+  const tabs = variant === "tabs"
+
+  const measureOverflow = React.useCallback(() => {
+    const strip = stripRef.current
+    if (!strip) return
+    const start = strip.scrollLeft > 1
+    const end = strip.scrollLeft + strip.clientWidth < strip.scrollWidth - 1
+    setOverflow((prev) => (prev.start === start && prev.end === end ? prev : { start, end }))
+  }, [])
+
+  // Keep the selected tab inside the strip. Only the strip scrolls: the page
+  // never moves, which scrollIntoView cannot promise.
+  React.useLayoutEffect(() => {
+    if (!tabs) return
+    const strip = stripRef.current
+    const option = optionRefs.current.get(value)
+    if (strip && option) {
+      const start = option.offsetLeft
+      const end = start + option.offsetWidth
+      if (start < strip.scrollLeft + TAB_EDGE_FADE) {
+        strip.scrollLeft = Math.max(0, start - TAB_EDGE_FADE)
+      } else if (end > strip.scrollLeft + strip.clientWidth - TAB_EDGE_FADE) {
+        strip.scrollLeft = end - strip.clientWidth + TAB_EDGE_FADE
+      }
+    }
+    measureOverflow()
+  }, [tabs, value, options.length, measureOverflow])
+
+  React.useEffect(() => {
+    if (!tabs || typeof ResizeObserver === "undefined") return
+    const strip = stripRef.current
+    if (!strip) return
+    const observer = new ResizeObserver(measureOverflow)
+    observer.observe(strip)
+    return () => observer.disconnect()
+  }, [tabs, measureOverflow])
 
   const hasMatch = options.some((o) => o.value === value)
 
@@ -98,13 +152,17 @@ export function SegmentedControl<T extends string = string>({
       aria-label={rest["aria-label"]}
       aria-labelledby={rest["aria-labelledby"]}
       data-testid={rest["data-testid"]}
+      data-overflow-start={overflow.start || undefined}
+      data-overflow-end={overflow.end || undefined}
+      ref={stripRef}
       onKeyDown={handleKeyDown}
+      onScroll={tabs ? measureOverflow : undefined}
       className={cn(
         "flex gap-1",
         variant === "row" &&
           "flex-wrap items-center rounded-lg border border-border bg-card p-1",
         variant === "tabs" &&
-          "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
+          ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade],
         className,
       )}
     >
@@ -127,17 +185,17 @@ export function SegmentedControl<T extends string = string>({
               if (!active) onValueChange(option.value)
             }}
             className={cn(
-              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-[color,background-color,border-color,box-shadow]",
+              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]",
               variant === "row" && ["rounded-md px-3 py-1.5", focusRing],
               // The strip scrolls horizontally, which would clip an outer ring.
-              variant === "tabs" && ["rounded-none border-b-2 -mb-px px-4 py-2", focusRingInset],
+              variant === "tabs" && ["shrink-0 rounded-none border-b-2 -mb-px px-4 py-2", touchTarget, focusRingInset],
               // Active styling is the ONLY styled state — unselected
               // segments stay transparent on purpose so they don't
               // compete visually with the selection.
               active
                 ? variant === "row"
-                  ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold"
-                  : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold"
+                  ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)]"
+                  : "border-[var(--accent-text)] text-[var(--accent-text)]"
                 : variant === "row"
                   ? "border border-transparent text-muted-foreground hover:text-foreground"
                   : "border-transparent text-muted-foreground hover:text-foreground",

package/src/primitives/select.stories.tsx

@@ -162,3 +162,18 @@ export const Overview: Story = {
     </div>
   ),
 }
+
+/** A value longer than its trigger ends in an ellipsis before the chevron. */
+export const LongValue: Story = {
+  render: () => (
+    <Select defaultValue="concierge">
+      <SelectTrigger className="w-48">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="concierge">Luna — ReCenter Guest Concierge</SelectItem>
+        <SelectItem value="practitioner">Luna — ReCenter Wellness &amp; Practitioner Desk</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}

package/src/primitives/select.tsx

@@ -22,10 +22,12 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex w-full items-center justify-between whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50",
       fieldPresentation,
       fieldTouchText,
-      "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left",
+      // A long value ends in an ellipsis before the chevron: line-clamp cannot
+      // ellipsize a nowrap line, so it clipped mid-glyph under the icon.
+      "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:truncate [&>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 === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size],