@alfakit/vue 0.1.0 → 0.1.2

package/src/components/fields/TableColumnHeaders.vue

@@ -5,6 +5,11 @@ import { cn } from '../../lib/utils'
 
 /** Header cells shared by the Repeater and RepeatableEntry tables. */
 const props = defineProps<{ columns: TableColumnSchema[] }>()
+
+// A fixed `width()` (`9rem`, `120px`) is also the column's minimum, so the table scrolls
+// sideways instead of squeezing its fields; percentages stay flexible.
+const widthStyle = (width?: string | null) =>
+  !width ? undefined : width.trim().endsWith('%') ? { width } : { width, minWidth: width }
 </script>
 
 <template>
@@ -12,7 +17,7 @@ const props = defineProps<{ columns: TableColumnSchema[] }>()
     v-for="(column, index) in props.columns"
     :key="`${column.name ?? 'column'}-${index}`"
     scope="col"
-    :style="column.width ? { width: column.width } : undefined"
+    :style="widthStyle(column.width)"
     :class="
       cn(
         'text-muted-foreground px-3 py-2 text-xs font-medium',

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

@@ -436,7 +436,7 @@ const onPreviewKeyDown = (event: KeyboardEvent) => {
       </label>
       <nav
         :aria-label="tt('breadcrumb', {}, 'Folder path')"
-        class="min-w-0 flex-1"
+        class="min-w-0 flex-[1_1_12rem]"
         data-slot="file-manager-breadcrumb"
       >
         <ol class="flex min-w-0 flex-wrap items-center gap-1 text-sm">

package/src/components/form/FormBlock.vue

@@ -14,6 +14,7 @@ import {
   registerFormSubmitter,
   registerPageForm,
   resolvePartialProps,
+  shouldResyncForm,
   wizardProgressStore,
 } from '@alfakit/core'
 import { router } from '@inertiajs/vue3'
@@ -102,6 +103,10 @@ watch(token, (value) => store.setToken(value))
 // block may arrive before or after Inertia's `success` event, so handle both orders.
 let submittedBlock: FormBlockSchema | null = null
 let refillPending = false
+// Another action succeeded and its new block has not arrived yet.
+let resyncPending = false
+// The block when the latest non-GET visit started, to tell whether its response arrived.
+let visitBlock: FormBlockSchema | null = null
 
 watch(
   () => props.block,
@@ -110,6 +115,12 @@ watch(
       refillPending = false
       store.fill(block)
     }
+
+    if (resyncPending) {
+      resyncPending = false
+
+      if (!store.isDirty) store.fill(block)
+    }
   },
 )
 
@@ -153,11 +164,24 @@ const offStart = router.on('start', (event) => {
   if (submitting && !submitVisit && visit.method !== 'get') {
     submitVisit = visit.id
   }
+
+  if (visit.method !== 'get') visitBlock = props.block
 })
 
 const offSuccess = router.on('success', (event) => {
   const id = submitVisit
 
+  // Another action changed the record: show the server's new form unless it holds edits.
+  if (!id && shouldResyncForm(pageFlash(event.detail.page), store)) {
+    if (props.block !== visitBlock) {
+      store.fill(props.block)
+    } else {
+      resyncPending = true
+    }
+
+    return
+  }
+
   if (!id || (event.detail.visitId ?? id) !== id) return
 
   // A halted action (rate limit, `halt()`) saved nothing: keep what the user typed.

package/src/components/form/form-context.ts

@@ -1,5 +1,5 @@
 import type { BaseField, FieldAriaAttributes, FormState, FormStore } from '@alfakit/core'
-import { fieldAria } from '@alfakit/core'
+import { fieldAria, fieldDomId } from '@alfakit/core'
 import {
   computed,
   inject,
@@ -75,7 +75,7 @@ export function useField<T = unknown>(field: MaybeRefOrGetter<BaseField>): Field
   // is in flight, so locking inputs would only swallow keystrokes.
   const disabled = computed(() => Boolean(toValue(field).disabled))
   const readOnly = computed(() => Boolean(toValue(field).readOnly))
-  const id = toValue(field).id ?? `alfakit-${path.replace(/[^a-zA-Z0-9_-]/g, '-')}`
+  const id = toValue(field).id ?? fieldDomId(store.idPrefix, path)
   const aria = computed(() => fieldAria(id, toValue(field), error.value))
 
   return {

package/src/components/layout/FusedGroupComponent.vue

@@ -40,6 +40,7 @@ const errors = computed(() =>
     <span
       v-if="props.component.label"
       :id="labelId"
+      data-slot="label"
       class="text-sm leading-none font-medium select-none"
     >
       {{ props.component.label }}

package/src/components/layout/TabsComponent.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
 import type { TabsSchema } from '@alfakit/core'
-import { readPersisted, schemaGapClass, writePersisted } from '@alfakit/core'
+import {
+  componentHasErrors,
+  readPersisted,
+  schemaGapClass,
+  tabFromQuery,
+  tabQueryValue,
+  tabToReveal,
+  writePersisted,
+} from '@alfakit/core'
 import { usePage } from '@inertiajs/vue3'
 import { computed, onMounted, ref, watch } from 'vue'
+import { useStoreSelector } from '../../composables/use-store'
+import { useT } from '../../context'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
+import { useOptionalFormStore } from '../form/form-context'
 import SchemaRenderer from '../schema/SchemaRenderer.vue'
 import Tabs from '../ui/Tabs.vue'
 import TabsContent from '../ui/TabsContent.vue'
@@ -17,11 +28,15 @@ const props = defineProps<{ component: TabsSchema }>()
 const tabs = computed(() => props.component.schema ?? [])
 // The page URL (not `window.location`) so the server renders the same tab as the browser.
 const page = usePage()
+// The tab's readable value (`?tab=billing-address`), or its key in links from older versions.
 const fromQuery = props.component.queryStringKey
-  ? new URL(page.url, 'http://localhost').searchParams.get(props.component.queryStringKey)
+  ? tabFromQuery(
+      tabs.value,
+      new URL(page.url, 'http://localhost').searchParams.get(props.component.queryStringKey),
+    )
   : null
 const active = ref<string>(
-  tabs.value.find((tab) => tab.key === fromQuery)?.key ??
+  fromQuery ??
     tabs.value[Math.max(0, props.component.activeTab - 1)]?.key ??
     tabs.value[0]?.key ??
     '',
@@ -39,6 +54,36 @@ onMounted(() => {
   if (stored && tabs.value.some((tab) => tab.key === stored)) active.value = stored
 })
 
+// Tabs holding a field with a validation error are marked, and when a submit brings new
+// errors while the open tab has none, the first tab with an error opens.
+const TAB_INVALID_CLASSES =
+  'text-destructive data-[state=active]:text-destructive dark:text-destructive dark:data-[state=active]:text-destructive'
+const t = useT()
+const store = useOptionalFormStore()
+const errors = useStoreSelector(
+  store?.store ?? {
+    get: () => ({ errors: {} as Record<string, string[]> }),
+    subscribe: () => () => {},
+  },
+  (state) => state.errors,
+)
+const invalidTabs = computed(
+  () =>
+    new Set(
+      tabs.value.filter((tab) => componentHasErrors(tab, errors.value)).map((tab) => tab.key),
+    ),
+)
+
+watch(
+  errors,
+  (next, previous) => {
+    const reveal = tabToReveal(tabs.value, active.value, previous ?? {}, next)
+
+    if (reveal !== null) active.value = reveal
+  },
+  { immediate: true },
+)
+
 function changeTab(value: string) {
   active.value = value
 
@@ -52,8 +97,9 @@ watch(
   (value) => {
     if (!props.component.queryStringKey || typeof window === 'undefined') return
 
+    const tab = tabs.value.find((item) => item.key === value)
     const url = new URL(window.location.href)
-    url.searchParams.set(props.component.queryStringKey, value)
+    url.searchParams.set(props.component.queryStringKey, tab ? tabQueryValue(tab) : value)
     window.history.replaceState(window.history.state, '', url)
   },
   { immediate: true },
@@ -87,11 +133,21 @@ watch(
         )
       "
     >
-      <TabsTrigger v-for="tab in tabs" :key="tab.key" :value="tab.key">
+      <TabsTrigger
+        v-for="tab in tabs"
+        :key="tab.key"
+        :value="tab.key"
+        :data-invalid="invalidTabs.has(tab.key) || undefined"
+        :class="invalidTabs.has(tab.key) ? TAB_INVALID_CLASSES : undefined"
+      >
         <Icon v-if="tab.icon && tab.iconPosition !== 'after'" :name="tab.icon" />
         {{ tab.label }}
         <Icon v-if="tab.icon && tab.iconPosition === 'after'" :name="tab.icon" />
         <TabBadge :tab="tab" />
+        <template v-if="invalidTabs.has(tab.key)">
+          <span aria-hidden="true" class="bg-destructive size-1.5 shrink-0 rounded-full"></span>
+          <span class="sr-only">({{ t('translatable.has_errors') }})</span>
+        </template>
       </TabsTrigger>
     </TabsList>
     <TabsContent

package/src/components/notifications/NotificationsMenu.vue

@@ -67,6 +67,17 @@ watch(open, (isOpen) => {
   if (isOpen) void center?.load()
 })
 
+// Every visit brings the server's unread count (another user after impersonating, or
+// notifications read in another tab): follow it instead of waiting for the next poll.
+watch(
+  () => config.value?.unreadCount,
+  (count) => {
+    if (center && typeof count === 'number' && count !== center.store.get().unreadCount) {
+      center.store.update({ unreadCount: count })
+    }
+  },
+)
+
 // Realtime notifications announce stored ones, so the unread count updates right away.
 let stopListening: (() => void) | null = null
 onMounted(() => {

package/src/components/panel/GlobalSearch.vue

@@ -144,6 +144,7 @@ onBeforeUnmount(() => stopListening?.())
       >
       <kbd
         v-if="hydrated && suffix?.type === 'keyBinding'"
+        dir="ltr"
         class="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline"
         >{{ formatKeyBinding(suffix.keyBinding) }}</kbd
       >

package/src/components/panel/ShortcutKeys.vue

@@ -26,6 +26,7 @@ const steps = computed(() => shortcutSteps(props.binding))
         t('shortcuts.then', {}, 'then')
       }}</span>
       <kbd
+        dir="ltr"
         class="bg-muted text-muted-foreground rounded border px-1.5 font-mono text-[10px] leading-5"
         >{{ step }}</kbd
       >

package/src/components/panel/TenantMenu.vue

@@ -154,7 +154,7 @@ const tenants = computed(() =>
       <DropdownMenuItem v-else-if="tenancy.profileUrl" as-child>
         <Link :href="tenancy.profileUrl" class="w-full"
           ><Icon name="alfakit::panels.tenant-menu.profile-button" :fallback="SettingsIcon" />
-          {{ t('tenancy.profile', {}, 'Settings') }}</Link
+          {{ tenancy.profileLabel ?? t('tenancy.profile', {}, 'Settings') }}</Link
         >
       </DropdownMenuItem>
       <MenuItemEntries v-if="tenancy.menu" :items="tenancy.menu" menu="tenantMenu" />
@@ -162,7 +162,7 @@ const tenants = computed(() =>
       <DropdownMenuItem v-else-if="tenancy.registrationUrl" as-child>
         <Link :href="tenancy.registrationUrl" class="w-full"
           ><Icon name="alfakit::panels.tenant-menu.registration-button" :fallback="PlusIcon" />
-          {{ t('tenancy.register', {}, 'New') }}</Link
+          {{ tenancy.registrationLabel ?? t('tenancy.register', {}, 'New') }}</Link
         >
       </DropdownMenuItem>
     </DropdownMenuContent>

package/src/components/table/GroupHeaderRow.vue

@@ -3,6 +3,7 @@ import type { TableRecordGroupSchema } from '@alfakit/core'
 import { ChevronDownIcon, ChevronRightIcon } from '@lucide/vue'
 import { computed } from 'vue'
 import { useT } from '../../context'
+import { colorClass, textColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import Checkbox from '../ui/Checkbox.vue'
 import TableCell from '../ui/TableCell.vue'
@@ -20,6 +21,11 @@ const props = defineProps<{
 const emit = defineEmits<{ toggle: [] }>()
 const t = useT()
 
+// An enum group shows its `HasIcon` icon, in its `HasColor` colour, before the title.
+const groupIconClass = computed(
+  () => `size-4 shrink-0 ${colorClass(textColorClasses, props.group.color, 'gray')}`,
+)
+
 const toggleLabel = computed(
   () =>
     `${props.collapsed ? t('table_grouping.expand', {}, 'Expand group') : t('table_grouping.collapse', {}, 'Collapse group')}: ${props.group.title}`,
@@ -56,6 +62,12 @@ const toggleLabel = computed(
             class="size-4 shrink-0"
             aria-hidden="true"
           />
+          <Icon
+            v-if="props.group.icon"
+            :name="props.group.icon"
+            :class="groupIconClass"
+            aria-hidden="true"
+          />
           <span class="flex flex-col items-start">
             <span class="font-medium">{{ props.group.title }}</span>
             <span
@@ -65,6 +77,21 @@ const toggleLabel = computed(
             >
           </span>
         </button>
+        <span
+          v-else-if="props.group.icon"
+          data-slot="table-group-title"
+          class="flex items-center gap-2"
+        >
+          <Icon :name="props.group.icon" :class="groupIconClass" aria-hidden="true" />
+          <span class="flex flex-col items-start">
+            <span class="font-medium">{{ props.group.title }}</span>
+            <span
+              v-if="props.group.description"
+              class="text-muted-foreground text-xs font-normal"
+              >{{ props.group.description }}</span
+            >
+          </span>
+        </span>
         <span v-else class="flex flex-col items-start">
           <span class="font-medium">{{ props.group.title }}</span>
           <span v-if="props.group.description" class="text-muted-foreground text-xs font-normal">{{

package/src/components/table/SelectCell.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { SelectColumnSchema } from '@alfakit/core'
 import { isOptionGroup } from '@alfakit/core'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { cn } from '../../lib/utils'
 import { useCellUpdate, type CellProps } from './cell-update'
 
 const props = defineProps<CellProps>()
 const schema = computed(() => props.column as SelectColumnSchema)
 const { update, saving, error } = useCellUpdate(props)
+const errorId = useId()
 const value = ref(
   props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),
 )
@@ -29,7 +30,9 @@ const onChange = (event: Event) => {
     <select
       :value="value"
       :disabled="Boolean(props.cell.disabled) || saving"
+      :aria-label="props.column.label || props.column.name"
       :aria-invalid="error ? true : undefined"
+      :aria-describedby="error ? errorId : undefined"
       :class="
         cn(
           'border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 min-w-32 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]',
@@ -48,6 +51,6 @@ const onChange = (event: Event) => {
         {{ option.label }}
       </option>
     </select>
-    <span v-if="error" class="text-destructive block text-xs">{{ error }}</span>
+    <span v-if="error" :id="errorId" class="text-destructive block text-xs">{{ error }}</span>
   </span>
 </template>

package/src/components/table/TextInputCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TextInputColumnSchema } from '@alfakit/core'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { colorClass, textColorClasses } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -10,9 +10,13 @@ import { useCellUpdate, type CellProps } from './cell-update'
 const props = defineProps<CellProps>()
 const schema = computed(() => props.column as TextInputColumnSchema)
 const { update, saving, error } = useCellUpdate(props)
-const initial =
-  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state)
-const value = ref(initial)
+const errorId = useId()
+// The saved value: follows the cell after the table reloads, so changing the input back to
+// an earlier value is saved too.
+const initial = computed(() =>
+  props.cell.state === null || props.cell.state === undefined ? '' : String(props.cell.state),
+)
+const value = ref(initial.value)
 // `prefix()` / `suffix()`: text affixes around the input, like the TextInput field.
 const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
 </script>
@@ -57,7 +61,9 @@ const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
           :step="schema.step"
           :inputmode="schema.inputMode"
           :disabled="Boolean(props.cell.disabled) || saving"
+          :aria-label="props.column.label || props.column.name"
           :aria-invalid="error ? true : undefined"
+          :aria-describedby="error ? errorId : undefined"
           :class="
             cn(
               'h-8 min-w-32',
@@ -92,6 +98,6 @@ const grouped = computed(() => Boolean(props.cell.prefix || props.cell.suffix))
         >{{ props.cell.suffix }}</span
       >
     </span>
-    <span v-if="error" class="text-destructive block text-xs">{{ error }}</span>
+    <span v-if="error" :id="errorId" class="text-destructive block text-xs">{{ error }}</span>
   </span>
 </template>

package/src/lib/Icon.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { iconAlias, iconAliasOverride, iconSource, isIconAlias } from '@alfakit/core'
-import { computed, onMounted, type Component, type HTMLAttributes } from 'vue'
+import { computed, type Component, type HTMLAttributes } from 'vue'
 import { useOptionalRegistry } from '../context'
-import { iconMap, markIconsMounted, resolveIcon } from './icons'
+import { useAppMounted } from './hydration'
+import { iconMap, resolveIcon } from './icons'
 import { cn } from './utils'
 
 /**
@@ -22,8 +23,8 @@ const props = defineProps<{
 // `createAlfakit({ components: { 'panel:icon': MyIcon } })` renders every named icon with
 // another icon set; it receives `name`, `fallback` and `class`.
 const custom = useOptionalRegistry()?.resolve('panel:icon')
-// Named icons render once the page has hydrated (the server render shows none).
-onMounted(markIconsMounted)
+// Named icons render once this app has hydrated (the server render shows none).
+const mounted = useAppMounted()
 
 const fallbackName = computed(() =>
   typeof props.fallback === 'string' ? props.fallback : undefined,
@@ -49,7 +50,7 @@ const source = computed(() =>
 const component = computed(() => {
   if (source.value?.type !== 'name' || custom) return null
 
-  const icons = iconMap()
+  const icons = iconMap(mounted.value)
 
   // Nothing until the icon map has loaded (and during the server render and hydration).
   if (!icons) return null

package/src/lib/hydration.ts

@@ -0,0 +1,35 @@
+import { getCurrentInstance, onMounted, ref, type AppContext, type Ref } from 'vue'
+
+/**
+ * Whether each app has mounted (hydrated). Kept per app, not per module: loaded icon chunks
+ * and lazy components outlive an app, so a second app hydrating in the same page would
+ * otherwise draw content its server markup does not contain.
+ */
+const mountedApps = new WeakMap<AppContext, Ref<boolean>>()
+
+/**
+ * Call in a component's setup: `false` until the component's app has mounted (so during
+ * the server render and hydration), then `true` for every component in that app, so
+ * content rendered later draws at once (reactive). Lazily loaded parts (named icons, heavy
+ * fields) render their server markup until then, whatever has loaded already.
+ */
+export function useAppMounted(): Ref<boolean> {
+  const context = getCurrentInstance()?.appContext
+
+  // Outside a component there is no hydration to wait for.
+  if (!context) return ref(true)
+
+  let mounted = mountedApps.get(context)
+
+  if (!mounted) {
+    mounted = ref(false)
+    mountedApps.set(context, mounted)
+  }
+
+  const flag = mounted
+  onMounted(() => {
+    flag.value = true
+  })
+
+  return flag
+}

package/src/lib/icons.ts

@@ -1,4 +1,4 @@
-import { defineAsyncComponent, ref, shallowRef, type Component } from 'vue'
+import { defineAsyncComponent, shallowRef, type Component } from 'vue'
 import type * as IconModules from './icon-modules'
 
 /**
@@ -13,7 +13,7 @@ import type * as IconModules from './icon-modules'
 export type IconMap = typeof IconModules
 
 const loadedMap = shallowRef<IconMap | null>(null)
-const mounted = ref(false)
+
 let pending: Promise<IconMap> | undefined
 
 const cache = new Map<string, Component | null>()
@@ -37,19 +37,14 @@ export function preloadIcons(): void {
   loadIconMap()
 }
 
-/** `<Icon>`s call this once mounted: from then on named icons render (after hydration). */
-export function markIconsMounted(): void {
-  mounted.value = true
-}
-
 /**
- * The icon map once it has loaded in the browser and the page has hydrated, else `null`
- * (reactive). Starts loading it.
+ * The icon map once it has loaded in the browser and the `<Icon>`'s app has mounted
+ * (`useAppMounted()`), else `null` (reactive). Starts loading it.
  */
-export function iconMap(): IconMap | null {
+export function iconMap(mounted: boolean): IconMap | null {
   if (!loadedMap.value) loadIconMap()
 
-  return mounted.value ? loadedMap.value : null
+  return mounted ? loadedMap.value : null
 }
 
 /**

package/src/lib/lazy.ts

@@ -1,9 +1,10 @@
-import { defineAsyncComponent, defineComponent, h, onMounted, ref, type Component } from 'vue'
+import { defineAsyncComponent, defineComponent, h, type Component } from 'vue'
+import { useAppMounted } from './hydration'
 
 /**
  * A component whose code (and heavy dependencies such as Tiptap or Chart.js) loads on
  * first use. The server render and hydration show `fallback` and never start the import;
- * once loaded, later renders show the component straight away.
+ * once the app has mounted, a loaded component renders straight away.
  */
 export function lazyComponent(
   name: string,
@@ -27,11 +28,9 @@ export function lazyComponent(
     name,
     inheritAttrs: false,
     setup(_, { attrs }) {
-      const mounted = ref(false)
+      const mounted = useAppMounted()
 
-      onMounted(() => (mounted.value = true))
-
-      return () => h(loaded ?? (mounted.value ? Async : fallback), attrs)
+      return () => h(mounted.value ? (loaded ?? Async) : fallback, attrs)
     },
   })
 }

package/src/standalone/AlfakitToaster.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { resolveToastPosition, type ToastPosition } from '@alfakit/core'
+import { resolveToastPosition, STARTER_KIT_TOASTER_ID, type ToastPosition } from '@alfakit/core'
 import { onMounted, onUnmounted } from 'vue'
+import { setToasterId } from '../components/notifications/flash-toasts'
 import Toaster from '../components/ui/Toaster.vue'
 import { useOptionalAlfakit } from '../context'
 import { claimToaster, createStandaloneContext, ensureFlashToasts } from './runtime'
@@ -38,15 +39,24 @@ let release: (() => void) | null = null
 onMounted(() => {
   if (!props.claimed) release = claimToaster()
 
+  // Our own toaster gets an id, so a `<Toaster />` the app's layout already mounts (the
+  // starter kits have one) doesn't show every Alfakit toast a second time.
+  if (props.toaster) setToasterId(STARTER_KIT_TOASTER_ID)
+
   ensureFlashToasts(context.registry)
 })
 
-onUnmounted(() => release?.())
+onUnmounted(() => {
+  release?.()
+
+  if (props.toaster) setToasterId(undefined)
+})
 </script>
 
 <template>
   <Toaster
     v-if="props.toaster"
+    :id="STARTER_KIT_TOASTER_ID"
     :position="resolveToastPosition(props.position, props.dir)"
     :dir="props.dir"
     rich-colors

package/src/starter-kit/widgets/SearchTrigger.vue

@@ -50,6 +50,7 @@ function request() {
     <span class="sr-only sm:not-sr-only sm:flex-1 sm:text-start">{{ placeholder }}</span>
     <kbd
       v-if="hydrated && binding"
+      dir="ltr"
       class="bg-muted hidden rounded px-1 font-mono text-[10px] sm:inline"
       >{{ formatKeyBinding(binding) }}</kbd
     >

package/src/starter-kit/widgets/TenantChooser.vue

@@ -63,7 +63,7 @@ const visible = computed(
         <DropdownMenuSeparator v-if="tenancy.tenants.length > 0" />
         <DropdownMenuItem @select="router.visit(tenancy.registrationUrl!)">
           <Icon name="alfakit::panels.tenant-menu.registration-button" :fallback="PlusIcon" />
-          {{ t('tenancy.register', {}, 'New') }}
+          {{ tenancy.registrationLabel ?? t('tenancy.register', {}, 'New') }}
         </DropdownMenuItem>
       </template>
     </DropdownMenuContent>