@heyramzi/ui 2.16.0 → 2.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/thread/thread-body.svelte

@@ -17,7 +17,8 @@
 <div class="flex flex-col items-start gap-1">
 	<p
 		class={cn(
-			"text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty",
+			// A long unbroken word, such as a class name, otherwise widens a narrow rail.
+			"max-w-full text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty wrap-break-word",
 			long && !open && "line-clamp-6",
 			className,
 		)}

package/src/thread/thread.svelte

@@ -46,6 +46,8 @@
 		onAnchor?: (comment: ThreadComment) => void;
 		/** Whose comments carry the edit and delete buttons. A rich comment can't be edited here. */
 		canEdit?: (comment: ThreadComment) => boolean;
+		/** False hides the visible title, for a thread already named by its tab. Screen readers still get it. */
+		heading?: boolean;
 		class?: string;
 	}
 
@@ -66,6 +68,7 @@
 		onResolve,
 		onAnchor,
 		canEdit = () => false,
+		heading = true,
 		class: className,
 	}: Props = $props();
 
@@ -273,8 +276,8 @@
 {/snippet}
 
 <section aria-label={labels.title} class={cn("flex flex-col gap-3", className)}>
-	<div class="flex h-7 items-center justify-between">
-		<h2 class="text-xs font-medium text-muted-foreground">{labels.title}</h2>
+	<div class={cn("flex h-7 items-center justify-between", !heading && resolved === 0 && "sr-only")}>
+		<h2 class={cn("text-xs font-medium text-muted-foreground", !heading && "sr-only")}>{labels.title}</h2>
 		{#if resolved > 0}
 			<button
 				type="button"