@botiverse/raft-ui 0.52.3 → 0.53.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [0.53.0](https://github.com/botiverse/raft-design/compare/v0.52.4...v0.53.0) (2026-10-30)
+
+### Changed
+
+- **`ChatIcon` is `MessageIcon`'s plain bubble:** the three dots inside are gone, so a message and a chat share one icon. `ChatIcon` stays exported as an alias; `DirectMessageIcon`, `ThreadIcon`, `CommentIcon` and `FeedbackIcon` keep their marks. ([#901](https://github.com/botiverse/raft-design/pull/901))
+
+### Design System
+
+- **A message and a chat share one icon:** the plain bubble; the other kinds of conversation keep their own mark. ([#901](https://github.com/botiverse/raft-design/pull/901))
+  - Docs: https://raft-design.botiverse.build/components/icons/
+- **RadioGroup: nothing chosen when the pick is consent:** leave the group empty when choosing an option grants something, so nobody consents by default. ([#900](https://github.com/botiverse/raft-design/pull/900))
+  - Docs: https://raft-design.botiverse.build/components/radio-group/
+- **"Entry points on an edge take a band" is withdrawn** until the Assistant's form settles. ([#899](https://github.com/botiverse/raft-design/pull/899))
+
+## [0.52.4](https://github.com/botiverse/raft-design/compare/v0.52.3...v0.52.4) (2026-10-30)
+
+### Fixed
+
+- **0.52.3 carried unrelated class rewrites by accident; they are undone:** 33 components had their classes rewritten into canonical Tailwind forms along with the disabled Select fix (for example the task chip's `text-[12px] leading-4` became `text-[12px]/4`). Those files are back to 0.52.2 exactly; only the disabled Select fix from 0.52.3 remains. Skip 0.52.3 and upgrade to 0.52.4. ([#897](https://github.com/botiverse/raft-design/pull/897))
+
 ## [0.52.3](https://github.com/botiverse/raft-design/compare/v0.52.2...v0.52.3) (2026-10-30)
 
 ### Fixed

package/dist/components/activity-inbox/activity-inbox-sidebar.recipe.mjs

@@ -10,11 +10,11 @@ const activityInboxSidebar = tv({ slots: {
 	sidebarBody: ["bg-layer-canvas"],
 	sidebarContent: [
 		"py-0",
-		"**:data-[slot=sidebar-group-label]:mt-3 **:data-[slot=sidebar-group-label]:mb-0",
-		"**:data-[slot=sidebar-group-label]:flex **:data-[slot=sidebar-group-label]:items-center **:data-[slot=sidebar-group-label]:gap-2",
-		"**:data-[slot=sidebar-group-label]:px-5 **:data-[slot=sidebar-group-label]:py-0",
-		"**:data-[slot=sidebar-group-label]:font-sans **:data-[slot=sidebar-group-label]:text-footnote **:data-[slot=sidebar-group-label]:font-bold",
-		"**:data-[slot=sidebar-group-label]:text-foreground-hint **:data-[slot=sidebar-group-label]:normal-case **:data-[slot=sidebar-group-label]:tracking-normal",
+		"[&_[data-slot=sidebar-group-label]]:mt-3 [&_[data-slot=sidebar-group-label]]:mb-0",
+		"**:data-[slot=sidebar-group-label]:flex **:data-[slot=sidebar-group-label]:items-center [&_[data-slot=sidebar-group-label]]:gap-2",
+		"[&_[data-slot=sidebar-group-label]]:px-5 [&_[data-slot=sidebar-group-label]]:py-0",
+		"**:data-[slot=sidebar-group-label]:font-sans **:data-[slot=sidebar-group-label]:text-footnote [&_[data-slot=sidebar-group-label]]:font-bold",
+		"**:data-[slot=sidebar-group-label]:text-foreground-hint **:data-[slot=sidebar-group-label]:normal-case [&_[data-slot=sidebar-group-label]]:tracking-normal",
 		"**:data-activity-inbox-show-all:whitespace-nowrap"
 	]
 } });

package/dist/components/app-rail/app-rail.recipe.mjs

@@ -39,7 +39,7 @@ const appRail = tv({ slots: {
 		"absolute -right-1 -top-1 inline-flex items-center justify-center",
 		"h-4 min-w-4 rounded-sticker px-1",
 		"bg-attention-400 text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
-		"font-mono text-[10px]/4 font-bold  tabular-nums"
+		"font-mono text-[10px] font-bold leading-4 tabular-nums"
 	],
 	itemIndicator: ["pointer-events-none absolute", "-top-1 -right-1"]
 } });

package/dist/components/app-shell/app-shell.mjs

@@ -176,7 +176,7 @@ function AppShellMainSlot({ className, overlay = false, render, ...props }) {
 	const collapsible = useOptionalAppShellSidebar()?.collapsible ?? false;
 	const defaultProps = {
 		"data-slot": "app-shell-main-slot",
-		className: mainSlot({ className: cn(className, collapsible && ["absolute inset-0  ", "group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"]) })
+		className: mainSlot({ className: cn(className, collapsible && ["absolute inset-y-0 right-0 left-0", "group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"]) })
 	};
 	return useRender({
 		defaultTagName: "main",

package/dist/components/badge/badge.mjs

@@ -8,7 +8,7 @@ const badge = tv({
 		"inline-flex h-[22px] w-fit min-w-0 max-w-full shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap rounded-chip px-1.5",
 		"font-sans text-caption font-semibold normal-case tracking-normal",
 		"transition-[filter,opacity] duration-100",
-		"[&_svg]:size-3.5 [&_svg]:shrink-0 **:data-[slot='spinner']:size-3 **:data-[slot='spinner']:text-xs",
+		"[&_svg]:size-3.5 [&_svg]:shrink-0 [&_[data-slot='spinner']]:size-3 [&_[data-slot='spinner']]:text-xs",
 		"*:data-[slot=status]:lead-dot",
 		"disabled:cursor-not-allowed disabled:bg-fill-muted disabled:text-foreground-disabled disabled:opacity-100 disabled:inset-ring-0",
 		"supports-[anchor-scope:all]:pointer-coarse:enabled:[anchor-name:--badge] supports-[anchor-scope:all]:pointer-coarse:enabled:[anchor-scope:--badge]",

package/dist/components/banner/banner.mjs

@@ -67,7 +67,7 @@ const banner = tv({
 	defaultVariants: { size: "md" },
 	compoundVariants: [{
 		size: "sm",
-		class: { root: "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((--spacing(8)-1lh)/2+(--spacing(1)))]" }
+		class: { root: "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((--spacing(8)-1lh)/2+--spacing(1))]" }
 	}]
 });
 /**

package/dist/components/combobox/combobox.mjs

@@ -38,9 +38,9 @@ const combobox = tv({
 			"flex min-w-0 items-center gap-2",
 			"outline-none",
 			"[&>svg]:pointer-events-none [&>svg]:shrink-0",
-			"**:data-[slot='combobox-clear']:size-control-embedded **:data-[slot='combobox-clear']:px-0 **:data-[slot='combobox-clear']:shrink-0",
+			"**:data-[slot='combobox-clear']:size-control-embedded [&_[data-slot='combobox-clear']]:px-0 **:data-[slot='combobox-clear']:shrink-0",
 			"[&>[data-slot=combobox-clear]:last-child]:me-[calc(var(--control-embedded-inset)-0.75rem-1px)]",
-			"**:data-[slot='combobox-trigger-indicator']:size-4",
+			"[&_[data-slot='combobox-trigger-indicator']]:size-4",
 			"[&_[data-slot='combobox-trigger-indicator']>svg]:shrink-0",
 			"min-h-control rounded-control border-[1.5px] border-line-field bg-layer-card px-3 py-0",
 			"font-sans text-body text-foreground",

package/dist/components/composer/composer-attachment.recipe.mjs

@@ -6,12 +6,12 @@ const composerAttachment = tv({
 			"flex flex-wrap gap-2",
 			"has-data-[slot=composer-attachments-scroll-area]:relative",
 			"has-data-[slot=composer-attachments-scroll-area]:block",
-			"has-data-[slot=composer-attachments-scroll-area]:min-w-0",
+			"has-[[data-slot=composer-attachments-scroll-area]]:min-w-0",
 			"has-data-[slot=sortable-composer-attachments-list]:block",
-			"has-data-[slot=sortable-composer-attachments-list]:min-w-0",
+			"has-[[data-slot=sortable-composer-attachments-list]]:min-w-0",
 			"pt-1.5 pe-1.5",
-			"has-data-[slot=composer-attachments-scroll-area]:p-0",
-			"has-data-[slot=sortable-composer-attachments-list]:pt-0"
+			"has-[[data-slot=composer-attachments-scroll-area]]:p-0",
+			"has-[[data-slot=sortable-composer-attachments-list]]:pt-0"
 		],
 		attachmentsScrollArea: ["relative w-full min-w-0"],
 		attachmentsViewport: [
@@ -50,7 +50,7 @@ const composerAttachment = tv({
 		],
 		attachmentUploadProgressBar: [
 			"absolute z-20 h-1 overflow-hidden",
-			"inset-x-1.5 bottom-1.5  w-auto rounded-[2px]",
+			"right-1.5 bottom-1.5 left-1.5 w-auto rounded-[2px]",
 			"bg-layer-card"
 		],
 		attachmentUploadProgressBarIndicator: ["block h-full", "rounded-[inherit] bg-info"],

package/dist/components/copyable-code/copyable-code.mjs

@@ -18,7 +18,7 @@ const copyableCode = tv({
 		action: [
 			"shrink-0",
 			"**:data-[slot=button]:transition-[color,background-color,box-shadow]",
-			"**:data-[slot=button]:duration-150 **:data-[slot=button]:ease-out"
+			"**:data-[slot=button]:duration-150 [&_[data-slot=button]]:ease-out"
 		],
 		iconSwap: [
 			"relative inline-grid",

package/dist/components/dialog/dialog.mjs

@@ -61,9 +61,9 @@ const dialog = tv({
 		bar: {
 			false: {},
 			true: {
-				header: ["flex h-14 shrink-0 items-center gap-2 border-b px-5 py-0", "border-line-seam pt-0 *:data-[slot=dialog-close]:my-0"],
-				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "p-0   first:pt-0 text-foreground"],
-				footer: ["shrink-0 border-t px-5 py-3", "border-line-seam py-3  first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
+				header: ["flex h-14 shrink-0 items-center gap-2 border-b px-5 py-0", "border-line-seam pt-0 [&>[data-slot=dialog-close]]:my-0"],
+				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "px-0 pt-0 pb-0 first:pt-0 text-foreground"],
+				footer: ["shrink-0 border-t px-5 py-3", "border-line-seam pt-3 pb-3 first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
 			}
 		},
 		layer: {

package/dist/components/dropdown-menu/dropdown-menu.mjs

@@ -22,7 +22,7 @@ const dropdownMenu = tv({ slots: {
 		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
-		"data-checked:font-bold data-selected:font-bold data-[emphasis=strong]:font-bold",
+		"data-checked:font-bold data-[selected]:font-bold data-[emphasis=strong]:font-bold",
 		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
 		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"

package/dist/components/empty-state/empty-state.mjs

@@ -6,8 +6,8 @@ const emptyState = tv({ slots: {
 	root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 py-12 text-center"],
 	content: [
 		"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-center",
-		"*:data-[slot=empty-state-icon]:mb-0",
-		"*:data-[slot=empty-state-title]:mb-0"
+		"[&>[data-slot=empty-state-icon]]:mb-0",
+		"[&>[data-slot=empty-state-title]]:mb-0"
 	],
 	icon: ["mb-4 inline-flex items-center justify-center [&_svg]:shrink-0", "text-foreground-hint [&_svg]:size-9"],
 	title: ["mb-2 w-full max-w-full text-center text-balance", "font-sans text-headline font-bold text-foreground-muted"],

package/dist/components/file-preview/file-preview.recipe.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/file-preview/file-preview.recipe.ts
 const filePreview = tv({
 	slots: {
-		root: ["relative flex size-10  shrink-0 items-center justify-center"],
+		root: ["relative flex h-10 w-10 shrink-0 items-center justify-center"],
 		document: ["relative h-10 w-8 stack-y-1.5 rounded-md rounded-tr-[15%] p-1.5 ring-1", "bg-layer-card shadow-none ring-line-hairline"],
 		file: ["relative flex h-10 w-8 items-center justify-center rounded-md rounded-tr-[15%] ring-1", "bg-layer-card shadow-none ring-line-hairline"],
 		code: ["relative flex h-10 w-8 items-center justify-center rounded-md rounded-tr-[15%] ring-1", "bg-layer-card shadow-none ring-line-hairline"],
@@ -31,7 +31,7 @@ const filePreview = tv({
 	},
 	variants: { placement: {
 		corner: { badge: "absolute -right-1.5 bottom-0.5 z-10" },
-		inline: { badge: "inline-flex h-3.5 w-7 shrink-0 items-center justify-center p-0 " }
+		inline: { badge: "inline-flex h-3.5 w-7 shrink-0 items-center justify-center px-0 py-0" }
 	} },
 	defaultVariants: { placement: "corner" }
 });

package/dist/components/files/files.recipe.mjs

@@ -23,7 +23,7 @@ const files = tv({ slots: {
 		"[&_svg]:size-4.5 [&_svg]:shrink-0",
 		"has-data-[slot=file-preview]:overflow-visible has-data-[slot=file-preview]:border-0 has-data-[slot=file-preview]:bg-transparent",
 		"size-9 rounded-chip border-0 bg-fill-muted text-foreground-muted",
-		"has-data-[slot=file-preview]:size-9"
+		"has-[[data-slot=file-preview]]:size-9"
 	],
 	image: [
 		"block size-full",

package/dist/components/icons/conversation-icons.d.mts

@@ -2,7 +2,11 @@ import { SVGProps } from "react";
 //#region src/components/icons/conversation-icons.d.ts
 export type ConversationIconProps = SVGProps<SVGSVGElement>;
 export declare function MessageIcon(props: ConversationIconProps): import("react").JSX.Element;
-export declare function ChatIcon(props: ConversationIconProps): import("react").JSX.Element;
+/**
+ * A chat: the same plain speech bubble as MessageIcon. Raft draws no
+ * difference between a message and a chat (stdrc and Artea, 2026-10-30).
+ */
+export declare const ChatIcon: typeof MessageIcon;
 export declare function DirectMessageIcon(props: ConversationIconProps): import("react").JSX.Element;
 export declare function ThreadIcon(props: ConversationIconProps): import("react").JSX.Element;
 /** A comment, said about a passage: MessageIcon's bubble with quote marks. */

package/dist/components/icons/conversation-icons.mjs

@@ -17,46 +17,11 @@ function MessageIcon(props) {
 		children: /* @__PURE__ */ jsx("path", { d: "M14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L9.5 13.25H14.25C15.35 13.25 16.25 12.35 16.25 11.25V4.25C16.25 3.15 15.35 2.25 14.25 2.25Z" })
 	});
 }
-function ChatIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: 18,
-		height: 18,
-		viewBox: "0 0 18 18",
-		"aria-hidden": "true",
-		focusable: "false",
-		fill: "none",
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: 1.5,
-		...props,
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L9.5 13.25H14.25C15.35 13.25 16.25 12.35 16.25 11.25V4.25C16.25 3.15 15.35 2.25 14.25 2.25Z" }),
-			/* @__PURE__ */ jsx("circle", {
-				cx: 6.5,
-				cy: 7.75,
-				r: .75,
-				fill: "currentColor",
-				stroke: "none"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: 9,
-				cy: 7.75,
-				r: .75,
-				fill: "currentColor",
-				stroke: "none"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: 11.5,
-				cy: 7.75,
-				r: .75,
-				fill: "currentColor",
-				stroke: "none"
-			})
-		]
-	});
-}
+/**
+* A chat: the same plain speech bubble as MessageIcon. Raft draws no
+* difference between a message and a chat (stdrc and Artea, 2026-10-30).
+*/
+const ChatIcon = MessageIcon;
 function DirectMessageIcon(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",

package/dist/components/lightbox/lightbox.mjs

@@ -20,9 +20,9 @@ const lightbox = tv({ slots: {
 	header: [
 		"pointer-events-auto shrink-0",
 		"flex items-center gap-3 pb-3",
-		"pt-[calc(env(safe-area-inset-top,0px)+(--spacing(3)))]",
-		"pl-[calc(env(safe-area-inset-left,0px)+(--spacing(4)))]",
-		"pr-[calc(env(safe-area-inset-right,0px)+(--spacing(4)))]",
+		"pt-[calc(env(safe-area-inset-top,0px)+--spacing(3))]",
+		"pl-[calc(env(safe-area-inset-left,0px)+--spacing(4))]",
+		"pr-[calc(env(safe-area-inset-right,0px)+--spacing(4))]",
 		"bg-transparent shadow-none",
 		headEdgePull
 	],
@@ -60,7 +60,7 @@ const lightbox = tv({ slots: {
 		"focus-visible:outline-transparent focus-visible:shadow-focus",
 		"[&_svg]:size-5.5"
 	],
-	infoDock: ["pointer-events-none absolute inset-x-6 bottom-20  z-10 flex justify-center"],
+	infoDock: ["pointer-events-none absolute right-6 bottom-20 left-6 z-10 flex justify-center"],
 	infoBar: [
 		"pointer-events-auto flex items-center",
 		"w-[clamp(144px,20vw,224px)] max-w-[calc(100vw-48px)] min-w-36",
@@ -76,7 +76,7 @@ const lightbox = tv({ slots: {
 		"*:data-[slot=button]:after:inset-x-[-3px] *:data-[slot=button]:first:after:left-[-9.5px] *:data-[slot=button]:last:after:right-[-9.5px]",
 		"pointer-coarse:*:data-[slot=button]:after:inset-y-[-9.5px]"
 	],
-	thumbnailStrip: ["pointer-events-none absolute inset-x-0 bottom-4  z-10", "flex items-center justify-center gap-1.5"],
+	thumbnailStrip: ["pointer-events-none absolute right-0 bottom-4 left-0 z-10", "flex items-center justify-center gap-1.5"],
 	thumbnail: [
 		"group/lightbox-thumb pointer-events-auto relative size-12 overflow-hidden",
 		"transition-[border-color,opacity,box-shadow] duration-150",

package/dist/components/message-attachment/message-image-gallery.recipe.mjs

@@ -27,17 +27,17 @@ const messageImageGallery = tv({
 		{
 			count: 1,
 			single: false,
-			class: { row: "auto-rows-32 @min-[360px]/gallery:auto-rows-36" }
+			class: { row: "auto-rows-[8rem] @min-[360px]/gallery:auto-rows-[9rem]" }
 		},
 		{
 			count: 2,
 			single: false,
-			class: { row: "auto-rows-32 @min-[360px]/gallery:auto-rows-36" }
+			class: { row: "auto-rows-[8rem] @min-[360px]/gallery:auto-rows-[9rem]" }
 		},
 		{
 			count: 3,
 			single: false,
-			class: { row: "auto-rows-28 @min-[360px]/gallery:auto-rows-32" }
+			class: { row: "auto-rows-[7rem] @min-[360px]/gallery:auto-rows-[8rem]" }
 		}
 	],
 	variants: {
@@ -47,7 +47,7 @@ const messageImageGallery = tv({
 			3: { row: "grid-cols-2" }
 		},
 		/** A single-image gallery keeps the image's proportions instead of a row height. */
-		single: { true: { item: ["inline-block w-fit max-w-104 justify-self-start", "rounded-container"] } },
+		single: { true: { item: ["inline-block w-fit max-w-[26rem] justify-self-start", "rounded-container"] } },
 		/** Set from an item layout: the cell owns its media sizing. */
 		laidOut: { true: { item: "[&_img]:block [&_img]:size-full" } },
 		/** How the media fills its cell: cropped, or fully visible on a neutral backdrop. */

package/dist/components/message-forwarded-bundle/message-forwarded-bundle.recipe.mjs

@@ -72,9 +72,9 @@ const messageForwardedBundleGallery = tv({
 		tile: ["[&_img]:block [&_img]:size-full [&_img]:object-cover"]
 	},
 	variants: { count: {
-		1: { row: "grid-cols-1 auto-rows-32 @min-[360px]/bundle:auto-rows-36" },
-		2: { row: "grid-cols-2 auto-rows-32 @min-[360px]/bundle:auto-rows-36" },
-		3: { row: "grid-cols-2 auto-rows-28 @min-[360px]/bundle:auto-rows-32 @min-[360px]/bundle:grid-cols-3" }
+		1: { row: "grid-cols-1 auto-rows-[8rem] @min-[360px]/bundle:auto-rows-[9rem]" },
+		2: { row: "grid-cols-2 auto-rows-[8rem] @min-[360px]/bundle:auto-rows-[9rem]" },
+		3: { row: "grid-cols-2 auto-rows-[7rem] @min-[360px]/bundle:auto-rows-[8rem] @min-[360px]/bundle:grid-cols-3" }
 	} }
 });
 //#endregion

package/dist/components/message-item/message-reaction.recipe.mjs

@@ -46,7 +46,7 @@ const messageReaction = tv({ slots: {
 	quickRow: [
 		"flex shrink-0 items-center",
 		"justify-between gap-0.5 bg-layer-popover px-0.75 py-0",
-		"*:[[role=menuitem]]:size-9 *:[[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
+		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
 	],
 	quickButton: [
 		"flex items-center justify-center",
@@ -58,7 +58,7 @@ const messageReaction = tv({ slots: {
 	pickerContent: [
 		"inline-flex items-center",
 		"min-w-0 flex-row gap-0.5 p-1",
-		"*:[[role=menuitem]]:size-9 *:[[role=menuitem]]:p-0"
+		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0"
 	],
 	pickerStatic: [
 		"inline-flex items-center",

package/dist/components/mobile-nav/mobile-nav-server.mjs

@@ -25,7 +25,7 @@ const mobileNavServer = tv({ slots: {
 		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
 		"font-sans text-callout font-medium text-foreground",
 		"hover:bg-brand-soft active:bg-brand-soft focus-visible:bg-brand-soft",
-		"aria-current:font-bold",
+		"aria-[current=true]:font-bold",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
 		"[&>svg]:text-foreground-muted",
 		"*:data-[slot=avatar]:size-5 *:data-[slot=avatar]:shrink-0"

package/dist/components/panel/panel-header.recipe.mjs

@@ -66,7 +66,7 @@ const panelHeader = tv({
 		slots: ["sectionHeader"],
 		class: [
 			"max-md:bg-layer-frame max-md:text-foreground-on-frame",
-			"max-md:*:data-[slot=panel-header-icon]:hidden",
+			"max-md:[&>[data-slot=panel-header-icon]]:hidden",
 			"max-md:**:data-[slot=panel-title]:text-foreground-on-frame",
 			"max-md:**:data-[slot=panel-meta]:text-foreground-on-frame-muted",
 			"max-md:**:data-[slot=panel-action]:text-foreground-on-frame",

package/dist/components/panel/panel-split-action.recipe.mjs

@@ -39,7 +39,7 @@ const panelSplitActionMenu = tv({
 	base: [
 		"pointer-events-auto min-w-0 rounded-s-none px-0",
 		"w-6 me-5 md:pointer-fine:w-5 md:pointer-fine:me-0",
-		"after:inset-s-0 after:inset-e-[-21.5px] md:pointer-fine:after:-inset-e-[calc(var(--spacing-control-hit)+1.5px)]",
+		"after:start-0 after:inset-e-[-21.5px] md:pointer-fine:after:-end-[calc(var(--spacing-control-hit)+1.5px)]",
 		"focus-visible:z-1",
 		"[[data-split-action-main][data-pressed]~&]:[--split-action-menu-tint:var(--fill-subtle)]",
 		"[[data-split-action-main][aria-pressed=true]~&]:[--split-action-menu-tint:var(--fill-subtle)]",

package/dist/components/progress/progress.mjs

@@ -51,7 +51,7 @@ const progress = tv({
 		indicator: [
 			"block h-full bg-(--progress-indicator)",
 			"transition-[width,background-color] duration-200 ease-out",
-			"data-indeterminate:absolute data-indeterminate:inset-y-0 data-indeterminate:w-1/2",
+			"data-indeterminate:absolute data-[indeterminate]:inset-y-0 data-indeterminate:w-1/2",
 			"data-indeterminate:origin-left data-indeterminate:animate-[raft-progress-indeterminate_1.4s_ease-in-out_infinite]",
 			"rounded-[inherit] inset-ring-[1.5px] inset-ring-sticker-ink"
 		]

package/dist/components/resizable/resizable.recipe.mjs

@@ -5,10 +5,10 @@ const resizable = tv({ slots: {
 	panel: ["min-h-0 min-w-0"],
 	handle: [
 		"right-0 z-10 cursor-ew-resize touch-none select-none",
-		"relative -mx-1.5  flex w-3 shrink-0 items-center justify-center pointer-coarse:-mx-3  pointer-coarse:w-6",
+		"relative -ml-1.5 -mr-1.5 flex w-3 shrink-0 items-center justify-center pointer-coarse:-ml-3 pointer-coarse:-mr-3 pointer-coarse:w-6",
 		"before:pointer-events-none before:absolute before:transition-colors before:content-['']",
 		"focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-2 focus-visible:before:outline-foreground",
-		"data-[orientation=horizontal]:-my-1.5  data-[orientation=horizontal]:mx-0  data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:cursor-ns-resize",
+		"data-[orientation=horizontal]:-mt-1.5 data-[orientation=horizontal]:-mb-1.5 data-[orientation=horizontal]:ml-0 data-[orientation=horizontal]:mr-0 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:cursor-ns-resize",
 		"bg-transparent",
 		"before:top-0 before:left-[5px] pointer-coarse:before:left-[11px] before:h-full before:w-px before:translate-none before:rounded-none",
 		"before:bg-transparent",

package/dist/components/switch/switch.mjs

@@ -22,7 +22,7 @@ const switchRecipe = tv({ slots: {
 		"pointer-events-none block",
 		"transition-transform ease-out",
 		"motion-reduce:transition-none",
-		"size-[22px] rounded-full bg-layer-card shadow-[0_0_0_1.5px_var(--line-strong)] data-checked:translate-x-5",
+		"size-[22px] rounded-full bg-layer-card shadow-[0_0_0_1.5px_var(--line-strong)] data-[checked]:translate-x-5",
 		"duration-220 ease-slide",
 		"data-checked:bg-sticker-paper data-checked:shadow-[0_0_0_1.5px_var(--sticker-ink)]",
 		"data-disabled:bg-fill-muted data-disabled:shadow-[0_0_0_1.5px_var(--foreground-disabled)]",

package/dist/components/task-board/task-board-column.recipe.mjs

@@ -10,7 +10,7 @@ const taskBoardColumn = tv({ slots: {
 		"group flex w-full touch-manipulation items-center justify-between text-left outline-none",
 		"min-h-8 gap-2 rounded-control",
 		"font-sans text-footnote font-bold text-foreground-muted",
-		"data-panel-open:mb-2",
+		"data-[panel-open]:mb-2",
 		"focus-visible:shadow-focus"
 	],
 	heading: ["flex min-w-0 items-center", "gap-2"],

package/dist/components/task-card/task-card-status.recipe.mjs

@@ -5,9 +5,9 @@ const taskCardStatus = tv({ base: [
 	"transition-[filter,opacity] duration-100 outline-none",
 	"data-[busy=true]:pointer-events-none data-[busy=true]:cursor-wait data-[busy=true]:opacity-dimmed data-[busy=true]:disabled:opacity-100",
 	"h-[22px] gap-1.5 rounded-chip border-0 px-[7px] py-0",
-	"font-sans text-[12px]/4  font-semibold text-foreground",
+	"font-sans text-[12px] leading-4 font-semibold text-foreground",
 	"[&:not(:has([data-slot=task-card-status-label]))]:hidden",
-	"**:data-[slot=task-card-status-label]:inline-flex **:data-[slot=task-card-status-label]:items-center **:data-[slot=task-card-status-label]:gap-1.5",
+	"**:data-[slot=task-card-status-label]:inline-flex **:data-[slot=task-card-status-label]:items-center [&_[data-slot=task-card-status-label]]:gap-1.5",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-3 [&_svg:not([data-slot=task-status-icon])]:-mx-0.5 [&_svg[data-slot=task-status-icon]]:size-2.5",
 	"[button&]:cursor-pointer [button&]:enabled:hover:overlay-medium [button&]:enabled:active:overlay-medium",
 	"disabled:cursor-default disabled:opacity-100",

package/dist/components/tasks/task-chip.mjs

@@ -26,7 +26,7 @@ const taskChip = tv({
 			closed: { root: ["bg-task-status-closed-soft"] }
 		},
 		variant: {
-			default: { root: ["h-[22px] items-baseline gap-1.5 rounded-chip px-[7px] py-[3px] [&>svg]:self-center", "text-[12px]/4 "] },
+			default: { root: ["h-[22px] items-baseline gap-1.5 rounded-chip px-[7px] py-[3px] [&>svg]:self-center", "text-[12px] leading-4"] },
 			inline: {}
 		},
 		size: {

package/dist/components/text/text.mjs

@@ -17,12 +17,12 @@ const heading = tv({
 	base: ["m-0 font-heading font-medium text-foreground"],
 	variants: {
 		level: {
-			1: ["text-[56px]/16 tracking-[-0.01em] "],
-			2: ["text-5xl/14 tracking-[-0.01em] "],
-			3: ["text-[40px]/12 tracking-[-0.01em] "],
-			4: ["text-[32px]/10 tracking-[-0.005em] "],
-			5: ["text-2xl/8 "],
-			6: ["text-xl/7 "]
+			1: ["text-[56px] tracking-[-0.01em] leading-16"],
+			2: ["text-5xl tracking-[-0.01em] leading-14"],
+			3: ["text-[40px] tracking-[-0.01em] leading-12"],
+			4: ["text-[32px] tracking-[-0.005em] leading-10"],
+			5: ["text-2xl leading-8"],
+			6: ["text-xl leading-7"]
 		},
 		variant: textColorVariants
 	},
@@ -32,10 +32,10 @@ const sans = tv({
 	base: ["m-0 font-sans font-normal"],
 	variants: {
 		size: {
-			large: ["text-lg/7  text-foreground"],
-			body: ["text-base/6  text-foreground"],
-			small: ["text-sm/5  text-foreground-muted"],
-			caption: ["text-xs/4  text-foreground-muted"],
+			large: ["text-lg leading-7 text-foreground"],
+			body: ["text-base leading-6 text-foreground"],
+			small: ["text-sm leading-5 text-foreground-muted"],
+			caption: ["text-xs leading-4 text-foreground-muted"],
 			group: ["text-footnote font-bold text-foreground-hint"]
 		},
 		variant: textColorVariants
@@ -46,9 +46,9 @@ const mono = tv({
 	base: ["m-0 font-mono font-normal"],
 	variants: {
 		size: {
-			code: ["text-sm/5  text-foreground"],
-			meta: ["text-xs/4  text-foreground-muted"],
-			tabular: ["text-sm/5 tabular-nums  text-foreground"]
+			code: ["text-sm leading-5 text-foreground"],
+			meta: ["text-xs leading-4 text-foreground-muted"],
+			tabular: ["text-sm tabular-nums leading-5 text-foreground"]
 		},
 		variant: textColorVariants
 	},

package/dist/components/textarea/textarea.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/textarea/textarea.tsx
 const textarea = tv({ slots: { root: [
-	"block w-full min-h-[calc(var(--field-line-height)*3+(--spacing(6)))] resize-y pl-3 pr-(--ta-pr,0.75rem)",
+	"block w-full min-h-[calc(var(--field-line-height)*3+--spacing(6))] resize-y pl-3 pr-(--ta-pr,0.75rem)",
 	"scroll-pb-(--ta-scroll-pb,0)",
 	"font-heading text-field font-field outline-none",
 	"py-2.5",
@@ -17,7 +17,7 @@ const textareaCounter = tv({
 	slots: { root: [
 		"font-mono tabular-nums",
 		"text-mono-meta text-foreground-hint",
-		"group-data-invalid/field:font-bold group-data-invalid/field:text-danger-strong"
+		"group-data-[invalid]/field:font-bold group-data-invalid/field:text-danger-strong"
 	] },
 	variants: { overLimit: {
 		true: { root: ["font-bold text-danger-strong"] },

package/dist/components/thread-panel/thread-panel.recipe.mjs

@@ -18,7 +18,7 @@ const threadPanel = tv({ slots: {
 	actions: panelHeadActions,
 	search: [
 		"relative z-20 flex shrink-0 items-center gap-1.5 py-2",
-		"*:data-[slot=input-group]:min-w-0 *:data-[slot=input-group]:flex-1",
+		"[&>[data-slot=input-group]]:min-w-0 *:data-[slot=input-group]:flex-1",
 		"border-b border-line-hairline bg-layer-canvas px-5"
 	],
 	searchTrailing: ["ml-auto flex shrink-0 items-center gap-1.5"],

package/dist/components/tooltip/tooltip.mjs

@@ -20,13 +20,13 @@ const tooltip = tv({
 			"rounded-chip bg-layer-hud text-foreground-on-hud",
 			"font-sans font-medium",
 			"shadow-float",
-			"has-data-[slot=kbd]:py-1 has-data-[slot=kbd]:pr-2.5"
+			"has-[[data-slot=kbd]]:py-1 has-[[data-slot=kbd]]:pr-2.5"
 		],
 		body: [
 			"block min-w-0 text-footnote whitespace-normal wrap-break-word",
-			"**:data-[slot=kbd]:relative **:data-[slot=kbd]:z-10 **:data-[slot=kbd]:ml-1.5",
-			"**:data-[slot=kbd]:h-4 **:data-[slot=kbd]:min-w-4 **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:py-0",
-			"**:data-[slot=kbd]:text-[12px]/4  **:data-[slot=kbd]:font-normal"
+			"**:data-[slot=kbd]:relative **:data-[slot=kbd]:z-10 [&_[data-slot=kbd]]:ml-1.5",
+			"[&_[data-slot=kbd]]:h-4 [&_[data-slot=kbd]]:min-w-4 [&_[data-slot=kbd]]:px-1 [&_[data-slot=kbd]]:py-0",
+			"**:data-[slot=kbd]:text-[12px] **:data-[slot=kbd]:leading-4 [&_[data-slot=kbd]]:font-normal"
 		],
 		bodyIcon: ["shrink-0 [&>svg]:block [&>svg]:size-3.5 [&>svg]:shrink-0"],
 		bodyText: ["min-w-0 flex-1"],

package/dist/components/workspace-button/workspace-button.mjs

@@ -9,7 +9,7 @@ function WorkspaceButton({ className, children, ...props }) {
 		variant: "on-frame",
 		size: "md",
 		"data-slot": "workspace-button",
-		className: cn("max-w-full min-w-0 shrink justify-start gap-2", "*:data-[slot=button-content]:max-w-full *:data-[slot=button-content]:min-w-0", className),
+		className: cn("max-w-full min-w-0 shrink justify-start gap-2", "*:data-[slot=button-content]:max-w-full [&>[data-slot=button-content]]:min-w-0", className),
 		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
 			"aria-hidden": true,
 			"data-slot": "workspace-button-chevron",

package/package.json

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