chore(deps): update @cloudflare/kumo to 2.15.0

.changeset/kumo-2-15.md

@@ -0,0 +1,13 @@
+---
+"@emdash-cms/admin": patch
+"@emdash-cms/blocks": patch
+"@emdash-cms/cloudflare": patch
+"@emdash-cms/plugin-forms": patch
+"@emdash-cms/plugin-field-kit": patch
+"@emdash-cms/plugin-ai-moderation": patch
+"@emdash-cms/plugin-ai-search": patch
+---
+
+Updates `@cloudflare/kumo` to 2.15.0. These packages now require exactly `@cloudflare/kumo@2.15.0`, so sites and plugins that install Kumo themselves should upgrade to that version to match the admin's prebuilt styles. Update `emdash` and the Forms, Field Kit, AI Moderation and AI Search plugins together: their earlier releases require Kumo 2.6.0, and these plugin releases need an `emdash` release with this change. Updating only one side leaves Kumo 2.15 next to an admin built for 2.6.
+
+In the admin, Select menus now open below their field instead of over it, and text sized `text-base` or `text-lg` has a taller line (1.5), so labels and headings take slightly more height. Kumo's `DropdownMenu` now spaces item icons itself, so plugin admin pages should remove any margin classes such as `me-2` from the elements they pass as an item's `icon`.

e2e/tests/portable-text-table.spec.ts

@@ -267,6 +267,10 @@ test.describe("Portable Text tables", () => {
 			await more.click();
 			const menu = page.locator('[role="menu"]:visible');
 			await expect(menu).toBeVisible();
+			await expect(menu).not.toHaveAttribute("data-starting-style");
+			await menu.evaluate((element) =>
+				Promise.all(element.getAnimations().map((animation) => animation.finished)),
+			);
 			for (const index of [0, 1, 0, 1]) {
 				const toggle = menu.getByRole("menuitemcheckbox").nth(index);
 				await toggle.scrollIntoViewIfNeeded();
@@ -549,6 +553,7 @@ test.describe("Portable Text table responsive accessibility", () => {
 			{ width: 1440, height: 900 },
 		]) {
 			await page.setViewportSize(viewport);
+			await expect(page.locator("[data-ending-style]")).toHaveCount(0);
 			const geometry = await wrapper.evaluate((element) => ({
 				page: document.documentElement.scrollWidth - document.documentElement.clientWidth,
 				scroll: element.scrollWidth,

e2e/tests/visual-regression.spec.ts

@@ -355,9 +355,9 @@ test.describe("visual regression", () => {
 			tableShot,
 		);
 		await page.keyboard.press("Escape");
-		await visualAction(admin, "Select table");
+		await visualAction(admin, "تحديد الجدول");
 		await page.locator("#field-body [data-emdash-table-trigger]").click();
-		await expect(page.getByRole("menuitem", { name: /Delete.*rows/ })).toBeDisabled();
+		await expect(page.getByRole("menuitem", { name: "حذف الصفوف", exact: true })).toBeDisabled();
 		await expect(page.locator('[role="menu"]:visible')).toHaveScreenshot(
 			"table-d-delete-disabled.png",
 			tableShot,
@@ -407,11 +407,11 @@ test.describe("visual regression", () => {
 		await page.setViewportSize({ width: 375, height: 812 });
 		view = await openTableVisual(admin, 3, 3, false, LOCALES[1], "dark");
 		await visualAction(admin, "تبديل صف الرأس");
-		await visualAction(admin, "Toggle header column");
+		await visualAction(admin, "تبديل عمود الرأس");
 		await settleTableGeometry(admin);
 		await expect(view.table).toHaveScreenshot("table-h-header-row-column.png", tableShot);
 		await visualAction(admin, "تبديل صف الرأس");
-		await visualAction(admin, "Toggle header column");
+		await visualAction(admin, "تبديل عمود الرأس");
 		await settleTableGeometry(admin);
 		await expect(view.table).toHaveScreenshot("table-h-body-only.png", tableShot);
 

packages/admin/src/components/BylineCreditsEditor.tsx

@@ -721,15 +721,15 @@ function SortableBylineRow({
 				<DropdownMenu.Content className="origin-[var(--transform-origin)] p-1 transition-[transform,scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:duration-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 motion-reduce:transition-none">
 					<DropdownMenu.Item
 						className="py-1 data-highlighted:bg-kumo-fill"
-						icon={<Tag className="me-1.5 size-3.5" aria-hidden="true" />}
+						icon={<Tag className="size-3.5" aria-hidden="true" />}
 						onClick={onOpenRole}
 					>
 						{credit.roleLabel ? t`Edit role` : t`Set role`}
 					</DropdownMenu.Item>
 					{onEdit ? (
 						<DropdownMenu.Item
 							className="py-1 data-highlighted:bg-kumo-fill"
-							icon={<PencilSimple className="me-1.5 size-3.5" aria-hidden="true" />}
+							icon={<PencilSimple className="size-3.5" aria-hidden="true" />}
 							onClick={onEdit}
 						>
 							{t`Edit byline`}
@@ -738,7 +738,7 @@ function SortableBylineRow({
 					<DropdownMenu.Separator className="my-0.5" />
 					<DropdownMenu.Item
 						className="py-1"
-						icon={<UserMinus className="me-1.5 size-3.5" aria-hidden="true" />}
+						icon={<UserMinus className="size-3.5" aria-hidden="true" />}
 						variant="danger"
 						onClick={onRemove}
 					>

packages/admin/src/components/ContentList.tsx

@@ -1566,7 +1566,7 @@ function ContentListItem({
 				<RowActionsMenu label={t`Actions for ${title}`}>
 					<DropdownMenu.LinkItem
 						closeOnClick
-						icon={<Pencil className="me-2 size-4" aria-hidden="true" />}
+						icon={<Pencil className="size-4" aria-hidden="true" />}
 						render={
 							<Link
 								to="/content/$collection/$id"
@@ -1580,7 +1580,7 @@ function ContentListItem({
 					{item.status === "published" && item.slug && (
 						<DropdownMenu.LinkItem
 							closeOnClick
-							icon={<ArrowSquareOut className="me-2 size-4" aria-hidden="true" />}
+							icon={<ArrowSquareOut className="size-4" aria-hidden="true" />}
 							href={contentUrl(collection, item.slug, urlPattern, {
 								locale: item.locale,
 								i18n,
@@ -1595,7 +1595,7 @@ function ContentListItem({
 					)}
 					{onDuplicate && (
 						<DropdownMenu.Item
-							icon={<Copy className="me-2 size-4" aria-hidden="true" />}
+							icon={<Copy className="size-4" aria-hidden="true" />}
 							onClick={() => onDuplicate(item.id)}
 						>
 							{t`Duplicate`}
@@ -1604,7 +1604,7 @@ function ContentListItem({
 					<DropdownMenu.Separator />
 					<DropdownMenu.Item
 						variant="danger"
-						icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+						icon={<Trash className="size-4" aria-hidden="true" />}
 						onClick={() => setTrashOpen(true)}
 					>
 						{t`Move to trash`}
@@ -1771,15 +1771,15 @@ function TrashedListItem({
 			<td className="text-end">
 				<RowActionsMenu label={t`Actions for ${title}`}>
 					<DropdownMenu.Item
-						icon={<ArrowCounterClockwise className="me-2 size-4" aria-hidden="true" />}
+						icon={<ArrowCounterClockwise className="size-4" aria-hidden="true" />}
 						onClick={() => onRestore?.(item.id)}
 					>
 						{t`Restore`}
 					</DropdownMenu.Item>
 					<DropdownMenu.Separator />
 					<DropdownMenu.Item
 						variant="danger"
-						icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+						icon={<Trash className="size-4" aria-hidden="true" />}
 						onClick={() => setDeleteOpen(true)}
 					>
 						{t`Delete permanently`}

packages/admin/src/components/ContentTypeList.tsx

@@ -369,7 +369,7 @@ function ContentTypeRow({ collection, canReorder, onRequestDelete }: ContentType
 				<RowActionsMenu label={t`Actions for ${collection.label}`}>
 					<DropdownMenu.LinkItem
 						closeOnClick
-						icon={<Pencil className="me-2 size-4" aria-hidden="true" />}
+						icon={<Pencil className="size-4" aria-hidden="true" />}
 						aria-label={t`Edit ${collection.label}`}
 						render={<Link to="/content-types/$slug" params={{ slug: collection.slug }} />}
 					>
@@ -380,7 +380,7 @@ function ContentTypeRow({ collection, canReorder, onRequestDelete }: ContentType
 							<DropdownMenu.Separator />
 							<DropdownMenu.Item
 								variant="danger"
-								icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+								icon={<Trash className="size-4" aria-hidden="true" />}
 								aria-label={t`Delete ${collection.label}`}
 								onClick={() => onRequestDelete?.(collection)}
 							>

packages/admin/src/components/DataTable.tsx

@@ -46,7 +46,8 @@ export function DataTable({ className, children, ...props }: React.ComponentProp
 					// th's own alignment class, such as text-end.
 					"[:where(&)_th]:text-start",
 					"[&_th]:border-b-0 [&_th]:bg-transparent [&_th]:px-4 [&_th]:py-3.5 [&_th]:font-normal [&_th]:whitespace-nowrap [&_th]:text-kumo-subtle",
-					"[&_td]:border-kumo-line [&_td]:bg-kumo-base [&_td]:px-4 [&_td]:py-3.5",
+					"[&_td]:border-b [&_td]:border-kumo-line [&_td]:bg-kumo-base [&_td]:px-4 [&_td]:py-3.5",
+					"[&_tbody_tr:last-child_td]:border-b-0",
 					"[&_tr[data-selected]_td]:bg-kumo-tint",
 					"[&_tbody_tr:first-child_td]:border-t",
 					"[&_tbody_tr:first-child_td:first-child]:rounded-ss-xl [&_tbody_tr:first-child_td:last-child]:rounded-se-xl",

packages/admin/src/components/ImageFieldRenderer.tsx

@@ -362,14 +362,14 @@ export function ImageFieldRenderer({
 			/>
 			<DropdownMenu.Content align="end" className="min-w-40">
 				<DropdownMenu.Item
-					icon={<ImageSquare className="me-1.5 size-4" aria-hidden="true" />}
+					icon={<ImageSquare className="size-4" aria-hidden="true" />}
 					onClick={() => openPicker("image")}
 				>
 					{t`Replace`}
 				</DropdownMenu.Item>
 				{canEditPrimaryAsset && (
 					<DropdownMenu.Item
-						icon={<PencilSimple className="me-1.5 size-4" aria-hidden="true" />}
+						icon={<PencilSimple className="size-4" aria-hidden="true" />}
 						onClick={() => {
 							setPickerTarget("image");
 							void assetEditor.openAssetEditor(objectValue!.id, mobileImageActionsRef.current);
@@ -381,7 +381,7 @@ export function ImageFieldRenderer({
 				<DropdownMenu.Separator />
 				<DropdownMenu.Item
 					variant="danger"
-					icon={<X className="me-1.5 size-4" aria-hidden="true" />}
+					icon={<X className="size-4" aria-hidden="true" />}
 					onClick={handleRemove}
 				>
 					{t`Remove`}

packages/admin/src/components/MediaPickerModal.tsx

@@ -1092,7 +1092,7 @@ export function MediaPickerModal({
 										onValueChange={changeSource}
 										tabs={sourceTabs.map((source) => ({
 											value: source.id,
-											className: "my-px h-[34px] rounded-[7px] px-3",
+											className: `my-px h-[34px] rounded-[7px] ${source.id === "local" || source.id === URL_SOURCE || source.icon ? "ps-2.5 pe-3" : "px-3"}`,
 											render: (props) => <button {...props} disabled={uploadQueue.hasUnfinished} />,
 											label: (
 												<span className="flex items-center gap-2">

packages/admin/src/components/MenuList.tsx

@@ -121,7 +121,7 @@ export function MenuList() {
 							)}
 						/>
 						<Dialog
-							className="flex max-h-[calc(100dvh-2rem)] min-w-0 w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:w-[32rem]"
+							className="flex max-h-[calc(100dvh-2rem)] min-w-0 w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:w-lg"
 							size="lg"
 						>
 							<form onSubmit={handleCreate} className="flex min-h-0 flex-1 flex-col">

packages/admin/src/components/RelationList.tsx

@@ -235,15 +235,15 @@ function RelationRow({
 			<td className="text-end">
 				<RowActionsMenu label={t`Actions for ${relation.slug}`}>
 					<DropdownMenu.Item
-						icon={<Pencil className="me-2 size-4" aria-hidden="true" />}
+						icon={<Pencil className="size-4" aria-hidden="true" />}
 						onClick={onEdit}
 					>
 						{t`Edit`}
 					</DropdownMenu.Item>
 					<DropdownMenu.Separator />
 					<DropdownMenu.Item
 						variant="danger"
-						icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+						icon={<Trash className="size-4" aria-hidden="true" />}
 						aria-label={t`Delete ${relation.slug}`}
 						onClick={onDelete}
 					>

packages/admin/src/components/Sections.tsx

@@ -161,7 +161,7 @@ export function Sections() {
 							)}
 						/>
 						<Dialog
-							className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:w-[32rem]"
+							className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:w-lg"
 							size="lg"
 						>
 							<form onSubmit={handleCreate} className="flex min-h-0 flex-1 flex-col">
@@ -453,15 +453,15 @@ function SectionCard({
 						/>
 						<DropdownMenu.Content align="end">
 							<DropdownMenu.Item
-								icon={<Copy className="me-2 size-4" aria-hidden="true" />}
+								icon={<Copy className="size-4" aria-hidden="true" />}
 								onClick={onCopySlug}
 							>
 								{t`Copy slug`}
 							</DropdownMenu.Item>
 							<DropdownMenu.Separator />
 							<DropdownMenu.Item
 								variant="danger"
-								icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+								icon={<Trash className="size-4" aria-hidden="true" />}
 								aria-label={section.source === "theme" ? undefined : t`Delete ${section.title}`}
 								disabled={section.source === "theme"}
 								onClick={onDelete}

packages/admin/src/components/TaxonomyManager.tsx

@@ -315,7 +315,7 @@ function TermRow({
 				<td className="text-end">
 					<RowActionsMenu label={t`Actions for ${term.label}`}>
 						<DropdownMenu.Item
-							icon={<Pencil className="me-2 size-4" aria-hidden="true" />}
+							icon={<Pencil className="size-4" aria-hidden="true" />}
 							onClick={() => onEdit(term)}
 						>
 							{t`Edit`}
@@ -325,21 +325,21 @@ function TermRow({
 								{stranded && (
 									<DropdownMenu.Label
 										id={strandedReasonId}
-										className="max-w-60 text-sm font-normal text-pretty text-kumo-subtle"
+										className="max-w-60 px-2! text-sm font-normal text-pretty text-kumo-subtle"
 									>
 										{t`${term.label} can't be moved here — its parent has no translation in this locale, so this list isn't the group it belongs to.`}
 									</DropdownMenu.Label>
 								)}
 								<DropdownMenu.Item
-									icon={<ArrowUp className="me-2 size-4" aria-hidden="true" />}
+									icon={<ArrowUp className="size-4" aria-hidden="true" />}
 									aria-describedby={stranded ? strandedReasonId : undefined}
 									disabled={stranded || place <= 0}
 									onClick={() => onMove(parentId, siblings, movable, term, -1)}
 								>
 									{t`Move up`}
 								</DropdownMenu.Item>
 								<DropdownMenu.Item
-									icon={<ArrowDown className="me-2 size-4" aria-hidden="true" />}
+									icon={<ArrowDown className="size-4" aria-hidden="true" />}
 									aria-describedby={stranded ? strandedReasonId : undefined}
 									disabled={stranded || place >= movable.length - 1}
 									onClick={() => onMove(parentId, siblings, movable, term, 1)}
@@ -350,7 +350,7 @@ function TermRow({
 						)}
 						{canTranslate && onTranslate && (
 							<DropdownMenu.Item
-								icon={<Translate className="me-2 size-4" aria-hidden="true" />}
+								icon={<Translate className="size-4" aria-hidden="true" />}
 								onClick={() => onTranslate(term)}
 							>
 								{t`Translate`}
@@ -359,7 +359,7 @@ function TermRow({
 						<DropdownMenu.Separator />
 						<DropdownMenu.Item
 							variant="danger"
-							icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+							icon={<Trash className="size-4" aria-hidden="true" />}
 							aria-label={t`Delete ${term.label}`}
 							onClick={() => onDelete(term)}
 						>
@@ -1230,7 +1230,7 @@ export function TaxonomyManager({ taxonomyName, onDeleted }: TaxonomyManagerProp
 							{taxonomyName === "tag" && (
 								<>
 									<DropdownMenu.Item
-										icon={<StackSimple className="me-2 size-4" aria-hidden="true" />}
+										icon={<StackSimple className="size-4" aria-hidden="true" />}
 										onClick={() => setCreateTaxonomyOpen(true)}
 									>
 										{t`New taxonomy`}
@@ -1240,7 +1240,7 @@ export function TaxonomyManager({ taxonomyName, onDeleted }: TaxonomyManagerProp
 							)}
 							<DropdownMenu.Item
 								variant="danger"
-								icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+								icon={<Trash className="size-4" aria-hidden="true" />}
 								onClick={() => setDeleteTaxonomyOpen(true)}
 							>
 								{t`Delete taxonomy`}

packages/admin/src/components/calendar/CalendarFilters.tsx

@@ -139,14 +139,13 @@ export function CalendarFilters({
 			/>
 			<DropdownMenu.Content
 				align="end"
-				// Kumo's menu animates on Radix's data-state, which Base UI never sets, so this uses its popover transition.
 				className="max-h-[min(32rem,var(--available-height))] w-[max(15rem,var(--anchor-width))] origin-(--transform-origin) overflow-y-auto transition-[transform,scale,opacity] duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:scale-90 data-starting-style:opacity-0 motion-reduce:transition-none"
 			>
 				{groups.map((group, index) => {
 					const selected: readonly string[] = value[group.key];
 					return (
 						<DropdownMenu.Group key={group.key} className={index > 0 ? "mt-1" : undefined}>
-							<DropdownMenu.Label className="pt-2 pb-1 text-xs text-kumo-subtle">
+							<DropdownMenu.Label className="px-2! pt-2 pb-1 text-xs text-kumo-subtle">
 								{group.label}
 							</DropdownMenu.Label>
 							{group.options.map((option) => (
@@ -155,7 +154,7 @@ export function CalendarFilters({
 									checked={selected.includes(option.value)}
 									closeOnClick={false}
 									// Kumo's own check mark is hidden in favor of the drawn checkbox.
-									className="group gap-2.5 px-2 [&>[data-checked]]:hidden"
+									className="group gap-2.5 px-2! [&>[data-checked]]:hidden"
 									onCheckedChange={(checked) => {
 										const next = checked
 											? [...selected, option.value]

packages/admin/src/components/comments/CommentInbox.tsx

@@ -585,7 +585,7 @@ function CommentRow({
 					<RowActionsMenu label={t`Actions for comment by ${author}`}>
 						{comment.status !== "spam" && (
 							<DropdownMenu.Item
-								icon={<Warning className="me-2 size-4" aria-hidden="true" />}
+								icon={<Warning className="size-4" aria-hidden="true" />}
 								disabled={isStatusPending}
 								onClick={() => onStatusChange(comment.id, "spam")}
 							>
@@ -594,7 +594,7 @@ function CommentRow({
 						)}
 						{comment.status !== "trash" && (
 							<DropdownMenu.Item
-								icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+								icon={<Trash className="size-4" aria-hidden="true" />}
 								disabled={isStatusPending}
 								onClick={() => onStatusChange(comment.id, "trash")}
 							>
@@ -606,7 +606,7 @@ function CommentRow({
 								<DropdownMenu.Separator />
 								<DropdownMenu.Item
 									variant="danger"
-									icon={<Trash className="me-2 size-4" aria-hidden="true" />}
+									icon={<Trash className="size-4" aria-hidden="true" />}
 									disabled={isStatusPending}
 									onClick={() => onDelete(comment.id)}
 								>

packages/admin/src/components/editor/CodeBlockNode.tsx

@@ -41,10 +41,10 @@ import {
 } from "./codeBlockLanguages";
 import { useAttachedKey } from "./useAttachedKey.js";
 
-// Each `rounded-none`/`border-0` makes tailwind-merge drop Kumo's physical class. Keep it
-// before its logical replacement, or tailwind-merge drops the replacement too.
+// Kumo's Toolbar sets physical corner and divider classes on its children from the root's
+// child selectors, which outrank a child's own classes. Important logical classes win in RTL.
 const TOOLBAR_BUTTON_LOGICAL_EDGES =
-	"first:rounded-none first:rounded-s-lg last:rounded-none last:rounded-e-lg not-first:border-0 not-first:border-s";
+	"first:rounded-s-lg! first:rounded-e-none! last:rounded-s-none! last:rounded-e-lg! not-first:border-s! not-first:border-e-0!";
 
 const ADMIN_CODE_BLOCK_LOWLIGHT_KEY = Symbol.for("emdash:admin-code-block-lowlight");
 const globalStore = globalThis as Record<symbol, unknown>;