@botiverse/raft-ui 0.83.0 → 0.85.0

package/dist/components/list-row/list-row.recipe.mjs

@@ -7,7 +7,6 @@ const listRow = tv({
 			"group/list-row flex w-full min-w-0 items-center gap-3 py-3 text-left",
 			"font-sans no-underline",
 			"[--list-row-ink:var(--foreground)] [--list-row-ink-2:var(--foreground-muted)] [--list-row-ink-3:var(--foreground-hint)]",
-			"[--list-row-status-space:0px]",
 			"text-(--list-row-ink)",
 			"not-disabled:not-aria-disabled:data-[tone=unread]:[--list-row-ink-2:var(--foreground)]",
 			"not-disabled:not-aria-disabled:data-[tone=muted]:[--list-row-ink:var(--foreground-muted)]",
@@ -19,7 +18,7 @@ const listRow = tv({
 			"aria-disabled:[--list-row-ink-2:var(--foreground-disabled)] aria-disabled:[--list-row-ink-3:var(--foreground-disabled)]"
 		],
 		icon: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"],
-		body: ["flex min-w-0 flex-1 flex-col gap-0.5", "-mb-(--list-row-status-space,0px)"],
+		body: ["flex min-w-0 flex-1 flex-col gap-0.5"],
 		line: ["flex min-w-0 items-center gap-2"],
 		title: [
 			"min-w-0 flex-1 truncate",
@@ -35,17 +34,17 @@ const listRow = tv({
 	variants: {
 		variant: {
 			default: { root: "min-h-16 pointer-coarse:min-h-14 pointer-coarse:py-2 [--list-row-rule-start:63px]" },
-			plain: { root: [
-				"py-(--settings-row-inset) pb-[calc(var(--settings-row-inset)+var(--list-row-status-space))]",
-				"has-[>[data-slot=list-row-body]>[data-slot=save-status]]:[--list-row-status-space:calc(--spacing(1)+var(--text-footnote--line-height))]",
-				"[--list-row-rule-start:16px]"
-			] },
+			plain: { root: ["py-(--settings-row-inset)", "[--list-row-rule-start:16px]"] },
 			entry: { root: "" }
 		},
 		interactive: {
 			true: {},
 			false: {}
 		},
+		attached: {
+			true: {},
+			false: {}
+		},
 		cell: {
 			false: { root: [
 				"relative px-4",
@@ -67,6 +66,7 @@ const listRow = tv({
 	compoundVariants: [
 		{
 			cell: false,
+			attached: false,
 			variant: ["default", "plain"],
 			class: { root: [
 				"before:pointer-events-none before:absolute before:top-0 before:right-0 before:hidden",
@@ -74,6 +74,17 @@ const listRow = tv({
 				"[[data-slot=list-row]+&]:before:block [li+li>&]:before:block"
 			] }
 		},
+		{
+			variant: "plain",
+			attached: true,
+			class: { root: "pt-0" }
+		},
+		{
+			variant: "plain",
+			attached: true,
+			interactive: true,
+			class: { root: "min-h-control" }
+		},
 		{
 			cell: false,
 			interactive: true,
@@ -92,6 +103,7 @@ const listRow = tv({
 	defaultVariants: {
 		variant: "default",
 		interactive: true,
+		attached: false,
 		cell: false,
 		wrap: false
 	}

package/dist/components/message-action-card/message-action-card-content.recipe.mjs

@@ -1,7 +1,7 @@
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/message-action-card/message-action-card-content.recipe.ts
 const messageActionCardContent = tv({ slots: {
-	root: ["p-3", "flex flex-col gap-2 px-3 pt-0 pb-3"],
+	root: ["flex flex-col gap-2 pt-0"],
 	panel: [
 		"h-(--collapsible-panel-height) overflow-hidden",
 		"transition-[height] duration-200 ease-out motion-reduce:transition-none",
@@ -44,8 +44,8 @@ const messageActionCardContent = tv({ slots: {
 		"[&>svg]:mt-[calc((1lh-14px)/2)] [&>svg]:text-foreground-muted"
 	],
 	completion: ["inline-flex items-center gap-1.5 text-footnote text-foreground-muted", "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-foreground"],
-	actions: ["flex flex-wrap items-center justify-end", "mt-1 gap-2"],
-	actionsNote: ["min-w-0 flex-1 basis-40", "text-footnote text-foreground-muted"]
+	actions: ["mt-1"],
+	actionsNote: ["min-w-0 basis-full", "text-footnote text-foreground-muted"]
 } });
 //#endregion
 export { messageActionCardContent };

package/dist/components/message-action-card/message-action-card.mjs

@@ -1,5 +1,6 @@
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Badge } from "../badge/badge.mjs";
+import { messageCard } from "../message-embed/message-embed.recipe.mjs";
 import { useLabelValueFit } from "../../lib/label-value-fit.mjs";
 import { MessageEmbed, MessageEmbedContent, MessageEmbedHeader } from "../message-embed/message-embed.mjs";
 import { messageActionCard } from "./message-action-card.recipe.mjs";
@@ -25,6 +26,7 @@ function MessageActionCard({ className, render, open, defaultOpen = true, onOpen
 		defaultOpen,
 		onOpenChange,
 		render: /* @__PURE__ */ jsx(MessageEmbed, {
+			size: "item",
 			className: root({ className }),
 			render,
 			...props
@@ -36,7 +38,7 @@ function MessageActionCardContent({ className, render, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		className: panel(),
 		children: /* @__PURE__ */ jsx(MessageEmbedContent, {
-			className: root({ className }),
+			className: messageCard().inset({ className: root({ className }) }),
 			render,
 			...props
 		})
@@ -129,8 +131,9 @@ function MessageActionCardCollapseTrigger({ className, ...props }) {
 }
 function MessageActionCardHeader({ className, render, ...props }) {
 	const { header } = messageActionCard();
+	const { inset, heading } = messageCard();
 	return /* @__PURE__ */ jsx(MessageEmbedHeader, {
-		className: header({ className }),
+		className: inset({ className: heading({ className: header({ className }) }) }),
 		render,
 		...props
 	});
@@ -290,10 +293,11 @@ function MessageActionCardCompletion({ className, render, ...props }) {
 }
 function MessageActionCardActions({ className, render, ...props }) {
 	const { actions } = messageActionCardContent();
+	const { actionRow } = messageCard();
 	return useRender({
 		defaultTagName: "div",
 		render,
-		props: mergeProps({ className: actions({ className }) }, props),
+		props: mergeProps({ className: actionRow({ className: actions({ className }) }) }, props),
 		state: { slot: "message-action-card-actions" }
 	});
 }

package/dist/components/message-action-card/message-action-card.recipe.mjs

@@ -2,12 +2,8 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/message-action-card/message-action-card.recipe.ts
 const messageActionCard = tv({
 	slots: {
-		root: ["w-full", "group/action-card mt-2 max-w-[440px]"],
-		header: [
-			"flex items-start",
-			"gap-2 px-3 pt-3 pb-2 group-data-closed/action-card:pb-3",
-			"text-subhead font-bold text-foreground"
-		],
+		root: ["group/action-card mt-2"],
+		header: ["flex items-start", "gap-2 pb-2 group-data-closed/action-card:pb-3"],
 		headerIcon: [
 			"flex shrink-0 items-center justify-center",
 			"[&>svg]:shrink-0",

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

@@ -13,7 +13,7 @@ const messageImageGallery = tv({
 			"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
 		],
 		action: [
-			"absolute z-10 hidden items-center justify-center",
+			"absolute z-raised hidden items-center justify-center",
 			"focus:flex",
 			"group-hover/img:flex",
 			"right-[calc(var(--control-embedded-inset)-1px)] bottom-[calc(var(--control-embedded-inset)-1px)] size-8 rounded-chip border-[1.5px] border-line-strong",

package/dist/components/message-embed/index.d.mts

@@ -1,2 +1,3 @@
 import { MessageEmbed, MessageEmbedContent, MessageEmbedContentProps, MessageEmbedFooter, MessageEmbedFooterProps, MessageEmbedHeader, MessageEmbedHeaderProps, MessageEmbedProps } from "./message-embed.mjs";
-export { MessageEmbed, MessageEmbedContent, type MessageEmbedContentProps, MessageEmbedFooter, type MessageEmbedFooterProps, MessageEmbedHeader, type MessageEmbedHeaderProps, type MessageEmbedProps };
+import { messageCard, messageEmbed } from "./message-embed.recipe.mjs";
+export { MessageEmbed, MessageEmbedContent, type MessageEmbedContentProps, MessageEmbedFooter, type MessageEmbedFooterProps, MessageEmbedHeader, type MessageEmbedHeaderProps, type MessageEmbedProps, messageCard, messageEmbed };

package/dist/components/message-embed/message-embed.d.mts

@@ -1,7 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-embed/message-embed.d.ts
 type DivProps = useRender.ComponentProps<"div">;
-export declare function MessageEmbed({ interactive, className, render, ...props }: MessageEmbedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function MessageEmbed({ interactive, size, className, render, ...props }: MessageEmbedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedHeader({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedContent({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedFooter({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
@@ -13,6 +13,13 @@ export type MessageEmbedProps = DivProps & {
    * @default false
    */
   interactive?: boolean;
+  /**
+   * The card's width, one of the two a card in a message has
+   * (cards-in-messages.md): `item` for a card that opens one thing, at most
+   * 400px and the message's width on a phone; `content` for a card that
+   * shows other messages, at most 560px. Unset, the card sets no width.
+   */
+  size?: "item" | "content";
 };
 export type MessageEmbedHeaderProps = DivProps;
 export type MessageEmbedContentProps = DivProps;

package/dist/components/message-embed/message-embed.mjs

@@ -2,8 +2,8 @@ import { messageEmbed } from "./message-embed.recipe.mjs";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-embed/message-embed.tsx
-function MessageEmbed({ interactive = false, className, render, ...props }) {
-	const { root } = messageEmbed();
+function MessageEmbed({ interactive = false, size, className, render, ...props }) {
+	const { root } = messageEmbed({ size });
 	const defaultProps = {
 		"data-interactive": interactive ? "true" : void 0,
 		className: root({ className })

package/dist/components/message-embed/message-embed.recipe.d.mts

@@ -0,0 +1,160 @@
+//#region src/components/message-embed/message-embed.recipe.d.ts
+export declare const messageEmbed: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    item: {
+      root: string[];
+    };
+    content: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  content: string[];
+  footer: string[];
+}, undefined, {
+  size: {
+    item: {
+      root: string[];
+    };
+    content: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  content: string[];
+  footer: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    item: {
+      root: string[];
+    };
+    content: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  content: string[];
+  footer: string[];
+}>>;
+export declare const messageCard: import("tailwind-variants/lite").TVReturnType<{
+  [key: string]: {
+    [key: string]: {
+      actionGroup?: import("tailwind-variants/lite").ClassValue;
+      actionRow?: import("tailwind-variants/lite").ClassValue;
+      actions?: import("tailwind-variants/lite").ClassValue;
+      body?: import("tailwind-variants/lite").ClassValue;
+      eyebrow?: import("tailwind-variants/lite").ClassValue;
+      heading?: import("tailwind-variants/lite").ClassValue;
+      inset?: import("tailwind-variants/lite").ClassValue;
+      meta?: import("tailwind-variants/lite").ClassValue;
+      popover?: import("tailwind-variants/lite").ClassValue;
+      source?: import("tailwind-variants/lite").ClassValue;
+      sourceFooter?: import("tailwind-variants/lite").ClassValue;
+      sourceHost?: import("tailwind-variants/lite").ClassValue;
+      sourceHostText?: import("tailwind-variants/lite").ClassValue;
+      sourceIcon?: import("tailwind-variants/lite").ClassValue;
+      sourceName?: import("tailwind-variants/lite").ClassValue;
+      title?: import("tailwind-variants/lite").ClassValue;
+    } | import("tailwind-variants/lite").ClassValue;
+  };
+} | {
+  [x: string]: {
+    [x: string]: {
+      actionGroup?: import("tailwind-variants/lite").ClassValue;
+      actionRow?: import("tailwind-variants/lite").ClassValue;
+      actions?: import("tailwind-variants/lite").ClassValue;
+      body?: import("tailwind-variants/lite").ClassValue;
+      eyebrow?: import("tailwind-variants/lite").ClassValue;
+      heading?: import("tailwind-variants/lite").ClassValue;
+      inset?: import("tailwind-variants/lite").ClassValue;
+      meta?: import("tailwind-variants/lite").ClassValue;
+      popover?: import("tailwind-variants/lite").ClassValue;
+      source?: import("tailwind-variants/lite").ClassValue;
+      sourceFooter?: import("tailwind-variants/lite").ClassValue;
+      sourceHost?: import("tailwind-variants/lite").ClassValue;
+      sourceHostText?: import("tailwind-variants/lite").ClassValue;
+      sourceIcon?: import("tailwind-variants/lite").ClassValue;
+      sourceName?: import("tailwind-variants/lite").ClassValue;
+      title?: import("tailwind-variants/lite").ClassValue;
+    } | import("tailwind-variants/lite").ClassValue;
+  };
+} | {}, {
+  source: string[];
+  sourceIcon: string[];
+  sourceName: string[];
+  sourceHost: string[];
+  sourceHostText: string[];
+  sourceFooter: string[];
+  body: string[];
+  eyebrow: string[];
+  title: string[];
+  heading: string[];
+  meta: string[];
+  actions: string[];
+  actionRow: string[];
+  actionGroup: string[];
+  inset: string[];
+  popover: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: {
+      actionGroup?: import("tailwind-variants/lite").ClassValue;
+      actionRow?: import("tailwind-variants/lite").ClassValue;
+      actions?: import("tailwind-variants/lite").ClassValue;
+      body?: import("tailwind-variants/lite").ClassValue;
+      eyebrow?: import("tailwind-variants/lite").ClassValue;
+      heading?: import("tailwind-variants/lite").ClassValue;
+      inset?: import("tailwind-variants/lite").ClassValue;
+      meta?: import("tailwind-variants/lite").ClassValue;
+      popover?: import("tailwind-variants/lite").ClassValue;
+      source?: import("tailwind-variants/lite").ClassValue;
+      sourceFooter?: import("tailwind-variants/lite").ClassValue;
+      sourceHost?: import("tailwind-variants/lite").ClassValue;
+      sourceHostText?: import("tailwind-variants/lite").ClassValue;
+      sourceIcon?: import("tailwind-variants/lite").ClassValue;
+      sourceName?: import("tailwind-variants/lite").ClassValue;
+      title?: import("tailwind-variants/lite").ClassValue;
+    } | import("tailwind-variants/lite").ClassValue;
+  };
+} | {}, {
+  source: string[];
+  sourceIcon: string[];
+  sourceName: string[];
+  sourceHost: string[];
+  sourceHostText: string[];
+  sourceFooter: string[];
+  body: string[];
+  eyebrow: string[];
+  title: string[];
+  heading: string[];
+  meta: string[];
+  actions: string[];
+  actionRow: string[];
+  actionGroup: string[];
+  inset: string[];
+  popover: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<unknown, {
+  source: string[];
+  sourceIcon: string[];
+  sourceName: string[];
+  sourceHost: string[];
+  sourceHostText: string[];
+  sourceFooter: string[];
+  body: string[];
+  eyebrow: string[];
+  title: string[];
+  heading: string[];
+  meta: string[];
+  actions: string[];
+  actionRow: string[];
+  actionGroup: string[];
+  inset: string[];
+  popover: string[];
+}>>;
+//#endregion

package/dist/components/message-embed/message-embed.recipe.mjs

@@ -1,15 +1,54 @@
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/message-embed/message-embed.recipe.ts
-const messageEmbed = tv({ slots: {
-	root: [
-		"group block min-w-0 text-left",
-		"rounded-container border border-line-hairline bg-layer-card",
-		"outline-none focus-visible:shadow-focus",
-		"data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium"
+const messageEmbed = tv({
+	slots: {
+		root: [
+			"group block min-w-0 text-left",
+			"rounded-container border border-line-hairline bg-layer-card",
+			"outline-none focus-visible:shadow-focus",
+			"data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium",
+			"not-data-[frame=bar]:*:data-[slot=message-embed-content]:first:rounded-t-[calc(var(--radius-container)-1px)] not-data-[frame=bar]:*:data-[slot=message-embed-content]:first:overflow-clip",
+			"not-data-[frame=bar]:*:data-[slot=message-embed-content]:last:rounded-b-[calc(var(--radius-container)-1px)] not-data-[frame=bar]:*:data-[slot=message-embed-content]:last:overflow-clip"
+		],
+		header: ["min-w-0", "px-3 py-2"],
+		content: ["min-w-0"],
+		footer: ["min-w-0", "px-3 py-2"]
+	},
+	variants: { size: {
+		item: { root: ["w-full max-w-[400px] max-md:max-w-none"] },
+		content: { root: ["w-full max-w-[560px]"] }
+	} }
+});
+const messageCard = tv({ slots: {
+	source: [
+		"flex min-w-0 items-center gap-1.5",
+		"border-b border-line-hairline px-3 py-2",
+		"font-sans text-caption text-foreground-muted"
 	],
-	header: ["min-w-0", "px-3 py-2"],
-	content: ["min-w-0"],
-	footer: ["min-w-0", "px-3 py-2"]
+	sourceIcon: ["inline-flex size-4 shrink-0 items-center justify-center", "*:size-full *:shrink-0 [&>img]:rounded-[2px] [&>img]:object-cover"],
+	sourceName: ["min-w-0 truncate", "font-semibold text-foreground"],
+	sourceHost: ["flex min-w-0 items-baseline", "before:shrink-0 before:pe-1.5 before:content-['·']"],
+	sourceHostText: ["min-w-0 truncate"],
+	sourceFooter: [
+		"m-0 truncate",
+		"border-t border-line-hairline px-3 py-2",
+		"font-sans text-caption text-foreground-muted"
+	],
+	body: ["flex min-w-0 flex-col gap-1.5", "p-3"],
+	eyebrow: ["m-0 truncate", "font-mono text-mono-meta text-foreground-muted"],
+	title: [
+		"m-0 line-clamp-2",
+		"font-sans text-subhead font-bold text-foreground",
+		"[&_a]:rounded-[2px] [&_a]:decoration-[1.5px] [&_a]:underline-offset-[3px] [&_a]:hover:underline",
+		"[&_a]:outline-none [&_a]:focus-visible:shadow-focus"
+	],
+	heading: ["font-sans text-subhead font-bold text-foreground"],
+	meta: ["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", "m-0 font-sans text-callout text-foreground-muted"],
+	actions: ["flex flex-wrap items-center justify-end gap-2", "px-3 pb-3"],
+	actionRow: ["flex flex-wrap items-center justify-end gap-2"],
+	actionGroup: ["flex min-w-0 max-w-full flex-wrap items-center justify-end gap-2", "ms-auto"],
+	inset: ["p-3"],
+	popover: ["w-[400px] max-w-(--available-width)"]
 } });
 //#endregion
-export { messageEmbed };
+export { messageCard, messageEmbed };

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

@@ -56,6 +56,7 @@ function MessageForwardedBundle({ className, fullWidth = false, render, ...props
 	return /* @__PURE__ */ jsx(MessageForwardedBundleFoldContext.Provider, {
 		value: fold,
 		children: /* @__PURE__ */ jsx(MessageEmbed, {
+			size: fullWidth ? void 0 : "content",
 			className: root({ className }),
 			render,
 			...props

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

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/message-forwarded-bundle/message-forwarded-bundle.recipe.ts
 const messageForwardedBundle = tv({
 	slots: {
-		root: ["mt-1 max-w-[min(34rem,100%)]"],
+		root: ["mt-1"],
 		header: ["flex flex-wrap items-center justify-between", "gap-2"],
 		headerContent: ["flex min-w-0 items-center", "gap-2"],
 		headerLabel: ["inline-flex shrink-0 items-center", "gap-1 text-footnote font-bold text-foreground-muted [&_svg]:size-3.5"],

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

@@ -81,7 +81,7 @@ const messageItem = tv({
 			"dark:shadow-[0_0_0_3px_var(--mi-row-fill,transparent),0_0_0_3px_var(--layer-canvas)]"
 		],
 		edited: ["ms-1 whitespace-nowrap", "text-caption text-foreground-hint"],
-		trailing: ["absolute end-0 bottom-0 z-10 flex h-lh items-center", "select-none! **:select-none!"],
+		trailing: ["absolute end-0 bottom-0 z-raised flex h-lh items-center", "select-none! **:select-none!"],
 		body: [
 			"wrap-break-word select-text",
 			"**:select-text",
@@ -93,7 +93,7 @@ const messageItem = tv({
 		attachments: ["stack-y-2", "mt-2"],
 		footer: ["mt-1.5 flex flex-wrap items-center gap-1.5"],
 		toolbar: [
-			"absolute z-20 flex items-center",
+			"absolute z-control flex items-center",
 			"opacity-(--mi-toolbar-opacity,0)",
 			"[pointer-events:var(--mi-toolbar-pe,none)]",
 			"top-[-18px] md:pointer-fine:top-[calc(-1*(var(--control-height)+8px)/2)] right-3 gap-1 overflow-visible rounded-container p-1",

package/dist/components/message-list/message-list.recipe.mjs

@@ -14,7 +14,7 @@ const messageList = tv({
 		dateDividerRule: ["flex-1", "min-w-3 border-t border-line-hairline"],
 		dateDividerChip: ["inline-flex items-center", "font-mono text-mono-meta whitespace-nowrap text-foreground-hint"],
 		endFade: [
-			"pointer-events-none absolute inset-x-0 bottom-0 z-5",
+			"pointer-events-none absolute inset-x-0 bottom-0 z-raised",
 			"h-timeline-section",
 			"bg-linear-to-t from-layer-canvas to-transparent"
 		],
@@ -35,7 +35,7 @@ const messageList = tv({
 });
 const messageListJump = tv({
 	slots: {
-		controls: ["absolute inset-x-0 z-10 mx-auto", "flex w-fit max-w-[calc(100%-1.5rem)] flex-wrap items-center justify-center gap-x-2 gap-y-3"],
+		controls: ["absolute inset-x-0 z-float mx-auto", "flex w-fit max-w-[calc(100%-1.5rem)] flex-wrap items-center justify-center gap-x-2 gap-y-3"],
 		group: ["inline-flex shrink-0 items-stretch", "*:data-[slot=message-list-jump-pill]:rounded-e-none"],
 		dismiss: [
 			"rounded-s-none border-s-0",

package/dist/components/message-quoted-preview/message-quoted-preview.mjs

@@ -7,6 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 function MessageQuotedPreview({ className, render, ...props }) {
 	const { root } = messageQuotedPreview();
 	return /* @__PURE__ */ jsx(MessageEmbed, {
+		"data-frame": "bar",
 		className: root({ className }),
 		render,
 		...props
@@ -126,6 +127,7 @@ function MessageQuotedPreviewAttachment({ className, render, ...props }) {
 function MessageQuotedPreviewLoading({ className, render, ...props }) {
 	const { loading } = messageQuotedPreview();
 	return /* @__PURE__ */ jsx(MessageEmbed, {
+		"data-frame": "bar",
 		className: loading({ className }),
 		render,
 		...props

package/dist/components/message-replies/message-replies.mjs

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-replies/message-replies.tsx
 function MessageReplies({ className, render, ...props }) {
 	const { root } = messageReplies();
-	const { root: embedRoot } = messageEmbed();
+	const { root: embedRoot } = messageEmbed({ size: "content" });
 	const defaultProps = { className: embedRoot({ className: root({ className }) }) };
 	return useRender({
 		defaultTagName: "button",

package/dist/components/message-replies/message-replies.recipe.mjs

@@ -4,7 +4,7 @@ const messageReplies = tv({ slots: {
 	root: [
 		"group/message-replies flex min-w-0 w-full flex-col text-left",
 		"transition-colors focus-visible:keyboard:outline-1 focus-visible:keyboard:outline-line-strong",
-		"mt-2 max-w-[480px] gap-1 rounded-container border-0 px-2.5 py-2",
+		"mt-2 gap-1 border-0 px-2.5 py-2",
 		"bg-fill-muted text-foreground-muted hover:overlay-subtle active:overlay-medium",
 		"focus-visible:outline-none focus-visible:shadow-focus"
 	],

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

@@ -17,8 +17,8 @@ const mobileNav = tv({ slots: {
 		"[&_svg]:shrink-0",
 		"isolate min-w-0 flex-col justify-start gap-[7px] border-0 px-0 pt-1 pb-0",
 		"font-sans text-[10px]/3 font-semibold text-foreground-hint",
-		"*:relative *:z-10 [&_svg]:size-[22px] [&_svg]:stroke-2",
-		"before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:z-0 before:-translate-x-1/2",
+		"*:relative *:z-raised [&_svg]:size-[22px] [&_svg]:stroke-2",
+		"before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:z-base before:-translate-x-1/2",
 		"before:h-[30px] before:w-14 before:rounded-control before:border-[1.5px] before:border-transparent before:content-['']",
 		"active:before:bg-fill-medium",
 		"data-[selected=true]:font-bold data-[selected=true]:text-foreground",

package/dist/components/notification-center/notification-center.mjs

@@ -162,7 +162,7 @@ function NotificationCenterPopup({ viewport = "desktop", size = "md", className,
 			side,
 			sideOffset,
 			sticky,
-			className: "isolate z-50 outline-none",
+			className: "isolate z-popup outline-none",
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				"aria-label": props["aria-label"] ?? "Notification center",
 				"data-slot": "notification-center-popup",

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

@@ -61,7 +61,7 @@ const panelHeader = tv({
 			"flex h-(--shell-header-height,var(--header-height)) shrink-0 items-center gap-3 max-md:gap-2",
 			panelHeadEdges,
 			"border-b border-line-seam bg-layer-canvas text-foreground",
-			"max-md:sticky max-md:top-0 max-md:z-30"
+			"max-md:sticky max-md:top-0 max-md:z-chrome"
 		]
 	}, {
 		slots: ["sectionHeader"],

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

@@ -21,7 +21,7 @@ const panelSplitAction = tv({ base: [
 const splitActionMainParts = [
 	"pointer-events-auto rounded-e-none",
 	"after:end-0",
-	"focus-visible:z-1 aria-pressed:z-1 data-pressed:z-1",
+	"focus-visible:z-raised aria-pressed:z-raised data-pressed:z-raised",
 	"bg-(--split-action-main-tint,transparent)",
 	"group-hover/split-action:bg-fill-subtle",
 	"hover:bg-fill-medium active:bg-fill-medium"
@@ -40,7 +40,7 @@ const panelSplitActionMenu = tv({
 		"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:start-0 after:inset-e-[-21.5px] md:pointer-fine:after:-end-[calc(var(--spacing-control-hit)+1.5px)]",
-		"focus-visible:z-1",
+		"focus-visible:z-raised",
 		"[[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)]",
 		"bg-(--split-action-menu-tint,transparent)",

package/dist/components/popover/popover.d.mts

@@ -13,8 +13,17 @@ export declare function PopoverPopup({ className, ...props }: PopoverPopupProps)
 export type PopoverContentProps = StyledProps<Popover.Popup.Props> & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
   container?: PopoverPortalProps["container"];
   portalProps?: PopoverPortalProps;
+  /**
+   * `item` for a popover about an app's item, such as the question before
+   * its link previews are shown: 400px, and `PopoverBody`, `PopoverTitle`
+   * and `PopoverActions` take a card's parts and 12px inset, like the item
+   * card (PreviewCard `size="item"`). Choose it by what the popover is
+   * about, not by its parts.
+   * @default "default"
+   */
+  size?: "default" | "item";
 };
-export declare function PopoverContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, container, portalProps, className, ...props }: PopoverContentProps): import("react").JSX.Element;
+export declare function PopoverContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, container, portalProps, size, className, ...props }: PopoverContentProps): import("react").JSX.Element;
 export type PopoverViewportProps = StyledProps<Popover.Viewport.Props>;
 export declare function PopoverViewport({ className, ...props }: PopoverViewportProps): import("react").JSX.Element;
 export type PopoverHeaderProps = ComponentPropsWithRef<"div">;
@@ -32,7 +41,7 @@ export declare function PopoverArrow({ className, ...props }: PopoverArrowProps)
 export type PopoverBackdropProps = StyledProps<Popover.Backdrop.Props>;
 export declare function PopoverBackdrop({ className, ...props }: PopoverBackdropProps): import("react").JSX.Element;
 export type PopoverBodyProps = ComponentPropsWithRef<"div">;
-/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges. */
+/** The panel's text: a `PopoverTitle` and a `PopoverDescription`, 16px in from its edges (12px in a `size="item"` popover). */
 export declare function PopoverBody({ className, ...props }: PopoverBodyProps): import("react").JSX.Element;
 export type PopoverActionsProps = ComponentPropsWithRef<"div">;
 /** The panel's buttons, at its end, under `PopoverBody`: the way out first, then the confirm button. */