@botiverse/raft-ui 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.9.4](https://github.com/botiverse/raft-design/compare/v0.9.3...v0.9.4) (2026-10-20)
+
+### Changed
+
+- Clickable text no longer sits underlined at rest: it underlines on hover in its own colour and never turns pink. This covers `TextLink` (both emphases; `strong` no longer turns its underline pink on hover), `MessageItemSenderButton`, `@` mentions, the forwarded-bundle and translation text actions, empty-state description links (now semibold so they stand apart from the hint text), the video-preview failure action and toast actions. Disabled ones do not underline. Rendered Markdown links are the one exception: they keep a faint underline at rest (link blue at 40%), because colour alone is below 3:1 against body text, and on hover the underline goes full strength and the text darkens. ([#594](https://github.com/botiverse/raft-design/pull/594))
+
+### Fixed
+
+- `MessageItemSenderButton` shows its hover state again when the app wraps it, for example in a tooltip trigger. ([#594](https://github.com/botiverse/raft-design/pull/594))
+- A `SelectItem` with a `SelectItemDescription` is named by its `SelectItemText` alone and described by the description, so screen readers no longer read the two run together as the option's name. Items without a description are unchanged. ([#575](https://github.com/botiverse/raft-design/pull/575))
+
+## [0.9.3](https://github.com/botiverse/raft-design/compare/v0.9.2...v0.9.3) (2026-10-20)
+
+### Fixed
+
+- Message reference chips sit on the sentence's baseline. Chips with a leading icon (task, joint channel, thread, link) sat 3px high and text-only chips like `#general` 1px high, which also pushed lines apart (26px instead of 24px). Height, colors and padding are unchanged. ([#583](https://github.com/botiverse/raft-design/pull/583))
+- `InlineCode` in a message centres its letters in the fill (they sat about 0.6px low). ([#583](https://github.com/botiverse/raft-design/pull/583))
+
 ## [0.9.2](https://github.com/botiverse/raft-design/compare/v0.9.1...v0.9.2) (2026-10-19)
 
 ### Fixed

package/dist/index.d.mts

@@ -1617,14 +1617,14 @@ export declare function SelectItemLeading({ className, ...props }: SelectItemLea
 type SelectItemIndicatorProps = StyledProps<Select$1.ItemIndicator.Props>;
 export declare function SelectItemIndicator({ className, children, ...props }: SelectItemIndicatorProps): import("react").JSX.Element;
 type SelectItemTextProps = StyledProps<Select$1.ItemText.Props>;
-export declare function SelectItemText({ className, ...props }: SelectItemTextProps): import("react").JSX.Element;
+export declare function SelectItemText({ className, id, ...props }: SelectItemTextProps): import("react").JSX.Element;
 type SelectItemDescriptionProps = StyledProps<ComponentPropsWithRef<"span">>;
 /**
  * A second line under an option's label: what it means, not its name again.
  * It sits beside `SelectItemText`, not inside it, so the selected value in the
  * trigger stays the label alone. The option grows to fit it.
  */
-export declare function SelectItemDescription({ className, ...props }: SelectItemDescriptionProps): import("react").JSX.Element;
+export declare function SelectItemDescription({ className, id, ...props }: SelectItemDescriptionProps): import("react").JSX.Element;
 type SelectLabelProps = StyledProps<Select$1.Label.Props>;
 export declare function SelectLabel({ className, ...props }: SelectLabelProps): import("react").JSX.Element;
 type SelectGroupProps = StyledProps<Select$1.Group.Props>;
@@ -1993,6 +1993,7 @@ declare const messageItem: import("tailwind-variants/lite").TVReturnType<{
   content: string[];
   header: string;
   sender: string[];
+  senderButton: string[];
   senderBadges: string[];
   meta: string[];
   time: string[];
@@ -2018,6 +2019,7 @@ declare const messageItem: import("tailwind-variants/lite").TVReturnType<{
   content: string[];
   header: string;
   sender: string[];
+  senderButton: string[];
   senderBadges: string[];
   meta: string[];
   time: string[];
@@ -2043,6 +2045,7 @@ declare const messageItem: import("tailwind-variants/lite").TVReturnType<{
   content: string[];
   header: string;
   sender: string[];
+  senderButton: string[];
   senderBadges: string[];
   meta: string[];
   time: string[];

package/dist/index.mjs

@@ -844,13 +844,13 @@ function FormSection({ className, render, title, status, description, children,
 const textLinkVariants = tv({
 	base: [
 		"rounded-[2px]",
-		"underline decoration-[1.5px] underline-offset-[3px]",
+		"decoration-[1.5px] underline-offset-[3px] not-disabled:hover:underline",
 		"outline-none focus-visible:shadow-focus",
-		"disabled:cursor-not-allowed disabled:text-foreground-disabled disabled:no-underline"
+		"disabled:cursor-not-allowed disabled:text-foreground-disabled"
 	],
 	variants: { variant: {
 		muted: ["font-medium text-foreground-muted", "hover:text-foreground"],
-		strong: ["font-semibold text-foreground", "hover:decoration-attention"]
+		strong: ["font-semibold text-foreground"]
 	} },
 	defaultVariants: { variant: "muted" }
 });
@@ -5554,13 +5554,25 @@ function SelectList({ className, ...props }) {
 		...props
 	});
 }
+const SelectItemPartsContext = createContext(null);
 function SelectItem({ className, ...props }) {
 	const chrome = useSelectChrome();
 	const { item } = select({ chrome });
-	return /* @__PURE__ */ jsx(Select$1.Item, {
-		"data-slot": "select-item",
-		className: item({ className }),
-		...props
+	const [textId, setTextId] = useState();
+	const [descriptionId, setDescriptionId] = useState();
+	const parts = useMemo(() => ({
+		setTextId,
+		setDescriptionId
+	}), []);
+	return /* @__PURE__ */ jsx(SelectItemPartsContext.Provider, {
+		value: parts,
+		children: /* @__PURE__ */ jsx(Select$1.Item, {
+			"data-slot": "select-item",
+			className: item({ className }),
+			"aria-labelledby": descriptionId && textId ? textId : void 0,
+			"aria-describedby": descriptionId,
+			...props
+		})
 	});
 }
 function SelectItemLeading({ className, ...props }) {
@@ -5584,9 +5596,17 @@ function SelectItemIndicator({ className, children, ...props }) {
 		children: children ?? defaultIndicator
 	});
 }
-function SelectItemText({ className, ...props }) {
+function SelectItemText({ className, id, ...props }) {
 	const { itemText } = select();
+	const generatedId = useId();
+	const textId = id ?? generatedId;
+	const setTextId = useContext(SelectItemPartsContext)?.setTextId;
+	useLayoutEffect(() => {
+		setTextId?.(textId);
+		return () => setTextId?.(void 0);
+	}, [setTextId, textId]);
 	return /* @__PURE__ */ jsx(Select$1.ItemText, {
+		id: textId,
 		"data-slot": "select-item-text",
 		className: itemText({ className }),
 		...props
@@ -5597,9 +5617,17 @@ function SelectItemText({ className, ...props }) {
 * It sits beside `SelectItemText`, not inside it, so the selected value in the
 * trigger stays the label alone. The option grows to fit it.
 */
-function SelectItemDescription({ className, ...props }) {
+function SelectItemDescription({ className, id, ...props }) {
 	const { itemDescription } = select();
+	const generatedId = useId();
+	const descriptionId = id ?? generatedId;
+	const setDescriptionId = useContext(SelectItemPartsContext)?.setDescriptionId;
+	useLayoutEffect(() => {
+		setDescriptionId?.(descriptionId);
+		return () => setDescriptionId?.(void 0);
+	}, [setDescriptionId, descriptionId]);
 	return /* @__PURE__ */ jsx("span", {
+		id: descriptionId,
 		"data-slot": "select-item-description",
 		className: itemDescription({ className }),
 		...props
@@ -6473,7 +6501,7 @@ const inlineCode = tv({
 			"inline border-0 px-1 align-baseline",
 			"[font-size:0.875em] leading-[1.3em] font-normal",
 			"wrap-anywhere",
-			"rounded-sticker bg-fill-muted py-px text-foreground"
+			"rounded-sticker bg-fill-muted pt-[calc(1px-0.0275em)] pb-[calc(1px+0.0275em)] text-foreground"
 		] }
 	} },
 	defaultVariants: { appearance: "default" }
@@ -6508,7 +6536,9 @@ const markdown = tv({
 		paragraph: ["mb-1 last:mb-0"],
 		link: [
 			"select-text underline decoration-2 underline-offset-2",
-			"rounded-[2px] text-foreground-link hover:decoration-attention-500",
+			"rounded-[2px]",
+			"text-foreground-link hover:text-[color-mix(in_oklab,var(--foreground-link)_80%,var(--foreground))]",
+			"decoration-foreground-link/40 hover:decoration-current",
 			"outline-none focus-visible:shadow-focus"
 		],
 		mark: searchHit,
@@ -6722,6 +6752,11 @@ function MarkdownCheckbox({ className, ...props }) {
 }
 //#endregion
 //#region src/components/message-item/message-item.recipe.ts
+const sender = [
+	"min-w-0 shrink-0 truncate",
+	"text-subhead font-bold text-foreground",
+	"rounded-[2px] outline-none focus-visible:shadow-focus"
+];
 const messageItem = tv({
 	slots: {
 		root: [
@@ -6748,12 +6783,11 @@ const messageItem = tv({
 		],
 		content: ["min-w-0 flex-1", "text-body text-foreground"],
 		header: "mb-px flex min-w-0 items-center gap-1.5 overflow-hidden",
-		sender: [
-			"min-w-0 shrink-0 truncate",
-			"data-[slot=message-item-sender-button]:cursor-pointer",
-			"text-subhead font-bold text-foreground",
-			"data-[slot=message-item-sender-button]:hover:underline data-[slot=message-item-sender-button]:hover:decoration-[1.5px] data-[slot=message-item-sender-button]:hover:underline-offset-[3px]",
-			"rounded-[2px] outline-none focus-visible:shadow-focus"
+		sender,
+		senderButton: [
+			...sender,
+			"cursor-pointer",
+			"decoration-[1.5px] underline-offset-[3px] hover:underline"
 		],
 		senderBadges: ["inline-flex shrink-0 items-center gap-1"],
 		meta: ["min-w-0 truncate", "text-caption text-foreground-hint"],
@@ -6926,10 +6960,10 @@ function MessageItemSender({ className, render, ...props }) {
 	});
 }
 function MessageItemSenderButton({ className, render, ...props }) {
-	const { sender } = messageItem();
+	const { senderButton } = messageItem();
 	const defaultProps = {
 		type: "button",
-		className: sender({ className })
+		className: senderButton({ className })
 	};
 	return useRender({
 		defaultTagName: "button",
@@ -7352,7 +7386,7 @@ function MessageReactionTooltipMeta({ className, render, ...props }) {
 //#endregion
 //#region src/components/message-item/message-reference.recipe.ts
 const chip = (fill) => [
-	"h-[22px] items-center gap-0.5 rounded-sticker px-1.5 has-[>svg]:pl-[3px] align-[1px]",
+	"items-baseline gap-0.5 rounded-sticker px-1.5 py-px has-[>svg]:pl-[3px]",
 	"[font-size:0.875em] leading-5 font-semibold",
 	"[&_svg]:size-3.5 [&_svg]:text-foreground-muted",
 	fill
@@ -7381,11 +7415,7 @@ const messageReference = tv({
 			"bg-brand inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
 			"hover:press-overlay-sticker"
 		] },
-		secondary: { root: [
-			"inline cursor-pointer font-bold text-foreground",
-			"underline decoration-foreground-hint decoration-[1.5px] underline-offset-[3px]",
-			"hover:decoration-foreground"
-		] },
+		secondary: { root: ["inline cursor-pointer font-bold text-foreground", "decoration-foreground decoration-[1.5px] underline-offset-[3px] hover:underline"] },
 		accent: { root: linkChip("bg-attention-soft") },
 		muted: { root: linkChip("bg-inactive-soft") },
 		info: { root: linkChip("bg-info-soft") },
@@ -8836,7 +8866,7 @@ const messageVideoPreview = tv({ slots: {
 	failureTitle: [],
 	failureAction: [
 		"inline-flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-white/75 [font:inherit]",
-		"hover:text-white",
+		"decoration-[1.5px] underline-offset-[3px] hover:text-white hover:underline",
 		"outline-1 outline-offset-2 outline-transparent focus-visible:outline-white",
 		"[&_svg]:size-[13px]"
 	],
@@ -8960,7 +8990,7 @@ const messageForwardedBundle = tv({
 		items: ["relative", ""],
 		footerAction: [
 			"inline-flex items-center gap-1 rounded-[2px] text-footnote font-semibold text-foreground",
-			"underline decoration-[1.5px] underline-offset-[3px] hover:decoration-attention-500",
+			"decoration-[1.5px] underline-offset-[3px] hover:underline",
 			"outline-none focus-visible:shadow-focus"
 		]
 	},
@@ -9490,16 +9520,14 @@ const messageTranslation = tv({ slots: {
 	translationProgressTrack: ["h-1"],
 	translationAction: [
 		"inline-flex items-center gap-1",
-		"underline",
 		"rounded-[2px] font-sans text-caption font-semibold text-foreground",
-		"decoration-[1.5px] underline-offset-[3px] hover:decoration-attention-500",
+		"decoration-[1.5px] underline-offset-[3px] hover:underline",
 		"outline-none focus-visible:shadow-focus"
 	],
 	translationRetryAction: [
 		"inline-flex items-center gap-1",
-		"underline",
 		"rounded-[2px] font-sans text-caption font-semibold text-foreground",
-		"decoration-[1.5px] underline-offset-[3px] hover:decoration-attention-500",
+		"decoration-[1.5px] underline-offset-[3px] hover:underline",
 		"outline-none focus-visible:shadow-focus"
 	]
 } });
@@ -12113,7 +12141,8 @@ const emptyState = tv({ slots: {
 	title: ["mb-2 w-full max-w-full text-center text-balance", "font-sans text-headline font-bold text-foreground-muted"],
 	description: [
 		"mx-auto w-full text-center text-pretty",
-		"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground",
+		"[&>a]:font-semibold [&>a]:decoration-[1.5px] [&>a]:underline-offset-[3px]",
+		"[&>a]:hover:text-foreground [&>a]:hover:underline",
 		"max-w-[300px] text-callout text-foreground-hint"
 	],
 	actions: ["mt-5"]
@@ -12568,7 +12597,7 @@ const toastStyles = tv({
 			"relative inset-auto order-1 size-auto shrink-0 whitespace-nowrap",
 			"border-0 bg-transparent p-0 shadow-none",
 			"font-sans text-callout font-bold text-foreground-on-hud",
-			"underline decoration-[1.5px] underline-offset-[3px]",
+			"decoration-[1.5px] underline-offset-[3px] not-disabled:hover:underline",
 			"after:absolute after:-inset-x-2 after:-inset-y-3 after:rounded-control after:content-['']",
 			"active:after:bg-foreground-on-hud/15",
 			"focus-visible:outline-2 focus-visible:outline-foreground-on-hud",
@@ -12664,7 +12693,7 @@ const toastAction = tv({ slots: {
 		"relative order-2 inline-flex shrink-0 items-center justify-center whitespace-nowrap select-none",
 		"border-0 bg-transparent p-0",
 		"font-sans text-callout font-bold text-foreground-on-hud",
-		"underline decoration-[1.5px] underline-offset-[3px]",
+		"decoration-[1.5px] underline-offset-[3px] not-disabled:not-aria-disabled:hover:underline",
 		"after:absolute after:-inset-x-2 after:-inset-y-3 after:rounded-control after:content-['']",
 		"active:after:bg-foreground-on-hud/15",
 		"outline-1 outline-offset-2 outline-transparent focus-visible:outline-2 focus-visible:outline-foreground-on-hud",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",