@alfakit/vue 0.1.8 → 0.1.10

package/src/components/dev-tools/DevToolsInspector.vue

@@ -81,7 +81,7 @@ const time = (value: number | null) =>
         size="icon"
         :aria-label="t('dev_tools.open', {}, 'Open schema inspector')"
         data-slot="dev-tools-toggle"
-        class="fixed end-4 bottom-4 z-40 rounded-full shadow-md"
+        class="fixed end-4 bottom-16 z-40 rounded-full shadow-md [[data-slot=starter-kit-root]_&]:end-auto [[data-slot=starter-kit-root]_&]:right-4"
       >
         <BracesIcon />
       </Button>

package/src/components/fields/CheckboxListField.vue

@@ -73,7 +73,7 @@ const toggle = (key: string, checked: boolean) => {
     <div class="flex flex-col gap-2">
       <div
         v-if="props.component.searchable || (props.component.bulkToggleable && !readOnly)"
-        class="flex items-center gap-2"
+        class="flex min-w-0 flex-wrap items-center gap-2"
       >
         <Input
           v-if="props.component.searchable"
@@ -82,7 +82,7 @@ const toggle = (key: string, checked: boolean) => {
           :aria-label="props.component.searchPrompt ?? t('search', {}, 'Search')"
           class="h-8"
         />
-        <div v-if="props.component.bulkToggleable && !readOnly" class="flex gap-1">
+        <div v-if="props.component.bulkToggleable && !readOnly" class="flex flex-wrap gap-1">
           <Button
             v-if="!props.component.selectAllAction?.hidden"
             type="button"

package/src/components/fields/DatePickerField.vue

@@ -251,6 +251,7 @@ const weekStartsOn = computed(
         <PopoverContent class="w-auto p-0" align="start">
           <Calendar
             :model-value="calendarValue"
+            :calendar-label="props.component.label || t('form.pick_date', {}, 'Pick a date')"
             :locale="locale"
             :dir="direction"
             :today="toCalendarDate(wallClockNow(props.component.timezone))"

package/src/components/fields/RichEditorSuggestions.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { EditorSuggestions } from '@alfakit/core'
+import { fixedContainingBlockOffset, type EditorSuggestions } from '@alfakit/core'
 import type { Editor } from '@tiptap/vue-3'
+import { computed } from 'vue'
 import { useT } from '../../context'
 import { cn } from '../../lib/utils'
 import { useStore } from '../../composables/use-store'
@@ -13,6 +14,16 @@ const props = defineProps<{
 }>()
 const t = useT()
 const state = useStore(props.suggestions.store)
+// Inside a modal the dialog's transform is the containing block of this fixed list.
+const position = computed(() => {
+  const coords = state.value.coords
+
+  if (!coords) return undefined
+
+  const offset = fixedContainingBlockOffset(props.editor?.view.dom)
+
+  return { left: `${coords.left - offset.x}px`, top: `${coords.bottom + 4 - offset.y}px` }
+})
 </script>
 
 <template>
@@ -23,11 +34,7 @@ const state = useStore(props.suggestions.store)
     :aria-label="t('editor.suggestions', {}, 'Suggestions')"
     data-slot="rich-editor-suggestions"
     class="bg-popover text-popover-foreground fixed z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md"
-    :style="
-      state.coords
-        ? { left: `${state.coords.left}px`, top: `${state.coords.bottom + 4}px` }
-        : undefined
-    "
+    :style="position"
   >
     <div
       v-if="state.loading && state.items.length === 0"

package/src/components/fields/RichEditorToolbarGroup.vue

@@ -44,6 +44,20 @@ const active = computed(() => {
   return buttons.value.some((name) => props.commands[name]?.active?.(props.editor))
 })
 const label = (name: string) => commandLabel(name, props.commands, translate)
+// After a pick, typing goes on in the editor (the command focused it); the menu would
+// otherwise return focus to its trigger. Closing without a pick (Escape) still does.
+let picked = false
+const pick = (name: string) => {
+  picked = true
+  emit('run', name)
+}
+const closeAutoFocus = (event: Event) => {
+  if (!picked) return
+
+  picked = false
+  event.preventDefault()
+  props.editor.commands.focus()
+}
 const pressed = (name: string) => {
   void props.tick
 
@@ -79,6 +93,7 @@ const pressed = (name: string) => {
       align="start"
       :aria-label="props.group.label"
       :class="cn(!props.group.textual && 'flex min-w-0 flex-row gap-0.5')"
+      @close-auto-focus="closeAutoFocus"
     >
       <DropdownMenuItem
         v-for="name in buttons"
@@ -86,7 +101,7 @@ const pressed = (name: string) => {
         :aria-label="props.group.textual ? undefined : label(name)"
         :title="label(name)"
         :class="cn(pressed(name) && 'bg-accent text-accent-foreground')"
-        @select="emit('run', name)"
+        @select="pick(name)"
       >
         <RichEditorToolIcon :name="name" :label="label(name)" :tools="props.tools" />
         <span v-if="props.group.textual">{{ label(name) }}</span>

package/src/components/file-manager/FileManagerView.vue

@@ -1112,7 +1112,8 @@ const onPreviewKeyDown = (event: KeyboardEvent) => {
       :open="dialog?.type === 'createFolder' || dialog?.type === 'rename'"
       @update:open="onDialogOpen"
     >
-      <DialogContent data-slot="file-manager-dialog">
+      <!-- The title and the labelled field say it all: no description. -->
+      <DialogContent data-slot="file-manager-dialog" :aria-describedby="undefined">
         <form class="flex flex-col gap-4" @submit.prevent="submitName">
           <DialogHeader>
             <DialogTitle>
@@ -1396,6 +1397,7 @@ const onPreviewKeyDown = (event: KeyboardEvent) => {
       <DialogContent
         class="flex max-h-[90vh] flex-col sm:max-w-4xl"
         data-slot="file-manager-preview"
+        :aria-describedby="undefined"
         @keydown="onPreviewKeyDown"
       >
         <DialogHeader>

package/src/components/form/FormBlock.vue

@@ -4,6 +4,7 @@ import {
   FormStore,
   applyFormRefresh,
   formActionsVisible,
+  formIdPrefix,
   formIdentity,
   formRefreshFor,
   isImplicitSubmit,
@@ -18,9 +19,16 @@ import {
   wizardProgressStore,
 } from '@alfakit/core'
 import { router } from '@inertiajs/vue3'
-import { computed, onBeforeUnmount, onMounted, onScopeDispose, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, onScopeDispose, useId, watch } from 'vue'
 import { useStore } from '../../composables/use-store'
-import { useActionRunner, useAlfakitProps, usePageSchema, usePanel, useT } from '../../context'
+import {
+  useActionRunner,
+  useAlfakitProps,
+  usePageSchema,
+  usePanel,
+  useStandalone,
+  useT,
+} from '../../context'
 import ActionList from '../actions/ActionList.vue'
 import SchemaRenderer from '../schema/SchemaRenderer.vue'
 import { showToast } from '../notifications/flash-toasts'
@@ -39,9 +47,14 @@ const runner = useActionRunner()
 const t = useT()
 const token = computed(() => page.value?.token ?? '')
 
+// Several standalone components can share a page (and field names): each form gets its own
+// field id prefix, so labels and errors point at their own inputs.
+const standalone = useStandalone()
+const instanceId = useId()
 const store = new FormStore(props.block, {
   token: token.value,
   component: props.block.component,
+  idPrefix: standalone ? formIdPrefix(`form-${instanceId}`) : undefined,
   refreshUrl: panel.value.endpoints.schemaRefresh,
   optionsUrl: panel.value.endpoints.schemaOptions,
   validateUrl: panel.value.endpoints.schemaValidate,

package/src/components/layout/CalloutComponent.vue

@@ -6,7 +6,9 @@ import { colorClass, textColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
 import { usePageActionContext } from '../actions/action-context'
+import { useOptionalFormStore } from '../form/form-context'
 import ActionList from '../actions/ActionList.vue'
+import { useFieldActionContext } from '../schema/field-actions'
 import MixedContent from './MixedContent.vue'
 
 const CALLOUT_COLORS: Record<string, string> = {
@@ -29,7 +31,12 @@ const CALLOUT_ICON_SIZES: Record<string, string> = {
 }
 
 const props = defineProps<{ component: CalloutSchema }>()
-const context = usePageActionContext()
+// Inside a form the actions run as field actions of this component, so `$get` / `$set`
+// reach the form (like a section's header actions).
+const form = useOptionalFormStore()
+const pageContext = usePageActionContext()
+const fieldContext = useFieldActionContext(() => props.component)
+const context = computed(() => (form ? fieldContext.value : pageContext))
 const tone = computed(() => props.component.color ?? props.component.status)
 // `iconColor()`, or the status colour once `color(null)` removed the background.
 const iconColor = computed(
@@ -78,10 +85,16 @@ const iconColor = computed(
         size="sm"
         :class="cn('mt-2', actionsAlignmentClass(props.component.footerActionsAlignment))"
       />
-      <MixedContent :items="props.component.footer" name="callout-footer" class="mt-2" />
+      <MixedContent
+        :items="props.component.footer"
+        :context="context"
+        name="callout-footer"
+        class="mt-2"
+      />
     </div>
     <MixedContent
       :items="props.component.controls"
+      :context="context"
       name="callout-controls"
       class="-me-1 -mt-1 shrink-0 gap-1"
     />

package/src/components/layout/EmptyStateComponent.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
 import type { EmptyStateComponentSchema } from '@alfakit/core'
+import { computed } from 'vue'
 import { colorClass, iconBackgroundColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
 import { usePageActionContext } from '../actions/action-context'
+import { useOptionalFormStore } from '../form/form-context'
 import ActionList from '../actions/ActionList.vue'
+import { useFieldActionContext } from '../schema/field-actions'
 import MixedContent from './MixedContent.vue'
 
 const props = defineProps<{ component: EmptyStateComponentSchema }>()
-const context = usePageActionContext()
+// Inside a form the actions run as field actions of this component, so `$get` / `$set`
+// reach the form (like a section's header actions).
+const form = useOptionalFormStore()
+const pageContext = usePageActionContext()
+const fieldContext = useFieldActionContext(() => props.component)
+const context = computed(() => (form ? fieldContext.value : pageContext))
 </script>
 
 <template>
@@ -49,6 +57,7 @@ const context = usePageActionContext()
     />
     <MixedContent
       :items="props.component.footer"
+      :context="context"
       name="empty-state-footer"
       class="justify-center"
     />

package/src/components/layout/MixedContent.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import type { AnyActionSchema, ContentSlotItem, SchemaComponent } from '@alfakit/core'
+import type {
+  ActionContext,
+  AnyActionSchema,
+  ContentSlotItem,
+  SchemaComponent,
+} from '@alfakit/core'
 import { computed, type HTMLAttributes } from 'vue'
 import { cn } from '../../lib/utils'
 import { usePageActionContext } from '../actions/action-context'
@@ -8,16 +13,19 @@ import RenderComponent from '../schema/RenderComponent.vue'
 
 /**
  * Actions and components placed in a layout component's fixed spot (a section's
- * `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,
- * like section header actions.
+ * `afterHeader()`, a callout's `controls()`). Actions run in the owner's action context
+ * (`context`: inside a form, the owner's field context, so `$get` / `$set` work), else the
+ * page's.
  */
 const props = defineProps<{
   items: ContentSlotItem[] | undefined
   name: string
   class?: HTMLAttributes['class']
+  context?: ActionContext
 }>()
 
-const context = usePageActionContext()
+const pageContext = usePageActionContext()
+const context = computed(() => props.context ?? pageContext)
 
 type Group =
   | { kind: 'actions'; key: string; actions: AnyActionSchema[] }

package/src/components/layout/SectionComponent.vue

@@ -104,7 +104,11 @@ const t = useT()
           :context="context"
           size="sm"
         />
-        <MixedContent :items="props.component.afterHeader" name="section-after-header" />
+        <MixedContent
+          :items="props.component.afterHeader"
+          name="section-after-header"
+          :context="context"
+        />
         <CollapsibleTrigger v-if="props.component.collapsible" as-child>
           <Button
             type="button"
@@ -155,7 +159,11 @@ const t = useT()
               :context="context"
               :class="actionsAlignmentClass(props.component.footerActionsAlignment) || undefined"
             />
-            <MixedContent :items="props.component.footer" name="section-footer-content" />
+            <MixedContent
+              :items="props.component.footer"
+              name="section-footer-content"
+              :context="context"
+            />
           </div>
         </div>
       </CollapsibleContent>
@@ -208,7 +216,11 @@ const t = useT()
           :context="context"
           size="sm"
         />
-        <MixedContent :items="props.component.afterHeader" name="section-after-header" />
+        <MixedContent
+          :items="props.component.afterHeader"
+          name="section-after-header"
+          :context="context"
+        />
         <CollapsibleTrigger v-if="props.component.collapsible" as-child>
           <Button
             type="button"
@@ -250,7 +262,11 @@ const t = useT()
             :context="context"
             :class="actionsAlignmentClass(props.component.footerActionsAlignment) || undefined"
           />
-          <MixedContent :items="props.component.footer" name="section-footer-content" />
+          <MixedContent
+            :items="props.component.footer"
+            name="section-footer-content"
+            :context="context"
+          />
         </div>
       </CollapsibleContent>
     </section>

package/src/components/notifications/NotificationsMenu.vue

@@ -4,9 +4,13 @@ import {
   notificationTintStyles,
   onDatabaseNotificationsSent,
   onOpenDatabaseNotifications,
+  pwaStore,
+  startPwa,
+  togglePushNotifications,
 } from '@alfakit/core'
-import { BellIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'
+import { BellIcon, BellOffIcon, BellRingIcon, CheckCheckIcon, Trash2Icon } from '@lucide/vue'
 import { computed, onMounted, onScopeDispose, ref, watch } from 'vue'
+import { toast } from 'vue-sonner'
 import { useStore } from '../../composables/use-store'
 import { useDirection, useFormatter, usePanel, useT } from '../../context'
 import { cssColor, textColorClasses } from '../../lib/colors'
@@ -94,6 +98,24 @@ onScopeDispose(() => stopOpenListener?.())
 
 onScopeDispose(() => center?.stopPolling())
 const format = useFormatter()
+
+// `pwa(push: true)` in a starter kit: the app's user menu has no AlfaKit entries, so Web
+// Push is turned on or off from the bell's menu.
+const pwa = useStore(pwaStore)
+const pushToggle = computed(
+  () =>
+    Boolean(panel.value.starterKit && panel.value.pwa?.push) && pwa.value.push !== 'unsupported',
+)
+onMounted(() => {
+  if (panel.value.starterKit && panel.value.pwa?.push) startPwa(panel.value.pwa)
+})
+async function togglePush() {
+  const { message } = await togglePushNotifications()
+  const text = t(message.key, {}, message.fallback)
+
+  if (message.error) toast.error(text)
+  else toast.success(text)
+}
 </script>
 
 <template>
@@ -150,6 +172,28 @@ const format = useFormatter()
       <div class="flex items-center justify-between border-b px-3 py-2">
         <span class="text-sm font-semibold">{{ t('notifications', {}, 'Notifications') }}</span>
         <div class="flex items-center gap-1">
+          <Button
+            v-if="pushToggle"
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            data-slot="pwa-push"
+            :disabled="pwa.pushBusy || pwa.push === 'denied'"
+            :title="
+              pwa.push === 'subscribed'
+                ? t('pwa.notifications.disable', {}, 'Turn off notifications')
+                : t('pwa.notifications.enable', {}, 'Turn on notifications')
+            "
+            :aria-label="
+              pwa.push === 'subscribed'
+                ? t('pwa.notifications.disable', {}, 'Turn off notifications')
+                : t('pwa.notifications.enable', {}, 'Turn on notifications')
+            "
+            @click="void togglePush()"
+          >
+            <BellOffIcon v-if="pwa.push === 'subscribed'" />
+            <BellRingIcon v-else />
+          </Button>
           <Button
             v-if="state.unreadCount > 0"
             type="button"

package/src/components/panel/BottomNav.vue

@@ -40,7 +40,7 @@ const url = (item: NavigationItemSchema): string => navigationItemUrl(item) ?? '
     :aria-label="t('navigation', {}, 'Navigation')"
     class="md:hidden"
   >
-    <template v-for="item in items.primary" :key="item.label">
+    <template v-for="item in items.primary" :key="item.url ?? item.label">
       <a
         v-if="item.openInNewTab"
         v-bind="item.extraAttributes ?? {}"
@@ -91,7 +91,7 @@ const url = (item: NavigationItemSchema): string => navigationItemUrl(item) ?? '
         >
           <Link
             v-for="item in overflowLinks"
-            :key="item.label"
+            :key="item.url ?? item.label"
             :href="url(item)"
             :data-active="isNavigationItemActive(item) ? 'true' : undefined"
             class="hover:bg-accent data-[active=true]:bg-accent flex min-h-11 items-center gap-3 rounded-md px-3 font-medium [&_svg]:size-4"

package/src/components/panel/KeyboardShortcuts.vue

@@ -70,7 +70,7 @@ const registrations = computed(() =>
   config.value
     ? JSON.stringify({
         token: page.value?.token ?? '',
-        home: panel.value.url ?? null,
+        home: panel.value.dashboardUrl ?? panel.value.url ?? null,
         commands: (panel.value.commandPalette?.commands ?? []).filter(
           (command) => command.keyBindings?.length && !command.disabled,
         ),

package/src/components/panel/NavGroup.vue

@@ -25,7 +25,7 @@ const contentClass = () => cn(flyout() && 'group-data-[collapsible=icon]:hidden'
   <SidebarGroup v-if="!props.group.label" v-bind="attributes()">
     <SidebarGroupContent>
       <SidebarMenu>
-        <NavItem v-for="item in props.group.items" :key="item.label" :item="item" />
+        <NavItem v-for="item in props.group.items" :key="item.url ?? item.label" :item="item" />
       </SidebarMenu>
     </SidebarGroupContent>
   </SidebarGroup>
@@ -36,7 +36,7 @@ const contentClass = () => cn(flyout() && 'group-data-[collapsible=icon]:hidden'
     </SidebarGroupLabel>
     <SidebarGroupContent :class="contentClass()">
       <SidebarMenu>
-        <NavItem v-for="item in props.group.items" :key="item.label" :item="item" />
+        <NavItem v-for="item in props.group.items" :key="item.url ?? item.label" :item="item" />
       </SidebarMenu>
     </SidebarGroupContent>
     <NavGroupFlyout v-if="flyout()" :group="props.group" />
@@ -67,7 +67,7 @@ const contentClass = () => cn(flyout() && 'group-data-[collapsible=icon]:hidden'
       <CollapsibleContent>
         <SidebarGroupContent :class="contentClass()">
           <SidebarMenu>
-            <NavItem v-for="item in props.group.items" :key="item.label" :item="item" />
+            <NavItem v-for="item in props.group.items" :key="item.url ?? item.label" :item="item" />
           </SidebarMenu>
         </SidebarGroupContent>
       </CollapsibleContent>

package/src/components/panel/NavItem.vue

@@ -63,7 +63,11 @@ const t = useT()
       </CollapsibleTrigger>
       <CollapsibleContent>
         <SidebarMenuSub>
-          <NavSubItem v-for="child in props.item.children" :key="child.label" :item="child" />
+          <NavSubItem
+            v-for="child in props.item.children"
+            :key="child.url ?? child.label"
+            :item="child"
+          />
         </SidebarMenuSub>
       </CollapsibleContent>
     </SidebarMenuItem>

package/src/components/panel/NavSubItem.vue

@@ -65,7 +65,11 @@ const badgeClass = computed(() =>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <SidebarMenuSub>
-          <NavSubItem v-for="child in props.item.children" :key="child.label" :item="child" />
+          <NavSubItem
+            v-for="child in props.item.children"
+            :key="child.url ?? child.label"
+            :item="child"
+          />
         </SidebarMenuSub>
       </CollapsibleContent>
     </Collapsible>

package/src/components/panel/ShortcutsOverlay.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ShortcutListGroup, ShortcutListItem } from '@alfakit/core'
 import {
-  bindingFromEvent,
+  ShortcutRecorder,
   flattenActionGroup,
   saveShortcutOverrides,
   shortcutOverlayGroups,
@@ -76,47 +76,52 @@ const change = (item: ShortcutListItem) => {
   recording.value = item.id
 }
 
-// While recording, the next key press is the new binding (Escape cancels). Listening in the
-// capture phase keeps the key from closing the dialog or running another shortcut.
+// While recording, the keys pressed are the new binding: one key (with modifiers) or a
+// sequence ("g o"), finished a second after the last key (Escape cancels). Listening in
+// the capture phase keeps the keys from closing the dialog or running another shortcut.
 watch(recording, (id, _old, onCleanup) => {
   if (!id || typeof window === 'undefined') return
 
   shortcuts.setPaused(true)
 
-  const listener = (event: KeyboardEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    if (event.key === 'Escape') {
+  const recorder = new ShortcutRecorder({
+    onDone: (binding) => {
       recording.value = null
-      message.value = t('shortcuts.cancelled', {}, 'Change cancelled.')
 
-      return
-    }
+      const conflict = shortcuts.conflict([binding], id)
 
-    const binding = bindingFromEvent(event)
+      if (conflict) {
+        message.value = t(
+          'shortcuts.conflict',
+          { label: conflict.label },
+          `Already used by “${conflict.label}”.`,
+        )
 
-    if (!binding) return
+        return
+      }
 
-    const conflict = shortcuts.conflict([binding], id)
+      void save(id, [binding])
+    },
+  })
 
-    recording.value = null
+  const listener = (event: KeyboardEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
 
-    if (conflict) {
-      message.value = t(
-        'shortcuts.conflict',
-        { label: conflict.label },
-        `Already used by “${conflict.label}”.`,
-      )
+    if (event.key === 'Escape') {
+      recorder.cancel()
+      recording.value = null
+      message.value = t('shortcuts.cancelled', {}, 'Change cancelled.')
 
       return
     }
 
-    void save(id, [binding])
+    recorder.press(event)
   }
 
   window.addEventListener('keydown', listener, true)
   onCleanup(() => {
+    recorder.cancel()
     window.removeEventListener('keydown', listener, true)
     shortcuts.setPaused(false)
   })

package/src/components/table/ColumnManager.vue

@@ -169,7 +169,7 @@ const drop = (name: string) => {
   dropTarget.value = null
 }
 
-const save = async (order: string[]): Promise<boolean> => {
+const save = async (order: string[], options: { reload?: boolean } = {}): Promise<boolean> => {
   const endpoint = panel.value.endpoints.tableColumns
 
   if (!endpoint) return false
@@ -177,7 +177,7 @@ const save = async (order: string[]): Promise<boolean> => {
   saving.value = true
 
   try {
-    await saveColumnOrder(endpoint, props.token, props.component, order)
+    await saveColumnOrder(endpoint, props.token, props.component, order, options)
 
     return true
   } catch (error) {
@@ -273,7 +273,8 @@ const apply = async () => {
   announcement.value = ''
   open.value = false
 
-  if (order) await save(order)
+  // The visibility visit renders the new order too: no second reload racing it.
+  if (order) await save(order, { reload: !columns })
 
   if (columns) visitTable(props.table.identifier, { columns }, ['page'])
 }
@@ -282,7 +283,8 @@ const apply = async () => {
 const reset = async () => {
   if (reorderable.value) {
     orderDraft.value = null
-    await save([])
+    // The visibility visit below renders the defined order too.
+    await save([], { reload: !toggleable.value })
   }
 
   if (toggleable.value) {

package/src/components/table/Spreadsheet.vue

@@ -524,15 +524,20 @@ const vFocus = { mounted: (element: HTMLElement) => element.focus() }
         <DialogHeader>
           <DialogTitle>{{ t('table.spreadsheet.paste_title', {}, 'Paste cells') }}</DialogTitle>
           <DialogDescription>
-            {{
+            <!-- One line per count: translations can't join two sentences. -->
+            <span class="block">{{
               choice(
                 'table.spreadsheet.paste_summary',
                 preview?.plan.changes.length ?? 0,
                 {},
                 ':count cell will change|:count cells will change',
               )
-            }}
-            <template v-if="(preview?.plan.skipped ?? 0) > 0">
+            }}</span>
+            <span
+              v-if="(preview?.plan.skipped ?? 0) > 0"
+              class="block"
+              data-slot="spreadsheet-paste-skipped"
+            >
               {{
                 choice(
                   'table.spreadsheet.paste_skipped',
@@ -541,7 +546,7 @@ const vFocus = { mounted: (element: HTMLElement) => element.focus() }
                   ':count read-only cell is skipped|:count read-only cells are skipped',
                 )
               }}
-            </template>
+            </span>
           </DialogDescription>
         </DialogHeader>
         <div data-slot="spreadsheet-paste" class="flex flex-col gap-3">

package/src/components/translation-manager/TranslationManagerView.vue

@@ -356,7 +356,7 @@ const editLabel = (key: string, locale: string) =>
             <tr>
               <th
                 scope="col"
-                class="bg-muted sticky start-0 z-10 min-w-56 border-b px-3 py-2 text-start font-medium"
+                class="bg-card sticky start-0 z-10 min-w-56 border-b [background-image:linear-gradient(var(--muted),var(--muted))] px-3 py-2 text-start font-medium"
               >
                 {{ t('translation-manager.key', {}, 'Key') }}
               </th>