@alfakit/vue 0.1.1 → 0.1.6

package/src/components/fields/FileUploadField.vue

@@ -22,7 +22,7 @@ import {
   fileUploadAccept,
   filesFromClipboard,
   fileUploadPaths,
-  formatBytes,
+  fileManagerSize,
   insertUploadedFile,
   moveRepeaterItem,
   requestJson,
@@ -43,7 +43,7 @@ import {
 } from '@lucide/vue'
 import { computed, ref, shallowRef, watch } from 'vue'
 import { useStore } from '../../composables/use-store'
-import { useChoice, usePanel, useT } from '../../context'
+import { useChoice, useFormatter, usePanel, useT } from '../../context'
 import { cn } from '../../lib/utils'
 import { useField, useFormStore } from '../form/form-context'
 import FieldWrapper from '../schema/FieldWrapper.vue'
@@ -59,6 +59,7 @@ interface LocalFile extends UploadedFile {
 
 const props = defineProps<{ component: FileUploadSchema }>()
 const t = useT()
+const formatter = useFormatter()
 const choice = useChoice()
 const panel = usePanel()
 const {
@@ -424,7 +425,9 @@ const onItemDrop = (event: DragEvent, index: number) => {
 const hints = computed(() =>
   [
     props.component.acceptedFileTypes?.join(', '),
-    props.component.maxSize ? `≤ ${formatBytes(props.component.maxSize * 1024, 0)}` : null,
+    props.component.maxSize
+      ? `≤ ${fileManagerSize(props.component.maxSize * 1024, formatter.value)}`
+      : null,
     props.component.minFiles
       ? choice(
           'form.min_files',
@@ -491,7 +494,7 @@ function cssLength(value: number | string): string {
             type="button"
             variant="ghost"
             size="icon-xs"
-            :aria-label="t('remove', {}, 'Remove')"
+            :aria-label="t('file_upload.remove', { name: file.name }, 'Remove :name')"
             @click="removeEntry(file)"
             ><XIcon
           /></Button>
@@ -525,7 +528,7 @@ function cssLength(value: number | string): string {
                   : file.progress !== undefined && !file.error
                     ? (props.component.uploadingMessage ?? t('form.uploading', {}, 'Uploading…'))
                     : file.size
-                      ? formatBytes(file.size)
+                      ? fileManagerSize(file.size, formatter)
                       : file.temporary
                         ? t('form.uploading', {}, 'Pending')
                         : '')
@@ -541,7 +544,7 @@ function cssLength(value: number | string): string {
                 type="button"
                 variant="ghost"
                 size="icon-xs"
-                :aria-label="t('form.move_up', {}, 'Move up')"
+                :aria-label="t('file_upload.move_up', { name: file.name }, 'Move :name up')"
                 :disabled="index === 0"
                 @click="move(index, index - 1)"
                 ><ChevronUpIcon
@@ -550,7 +553,7 @@ function cssLength(value: number | string): string {
                 type="button"
                 variant="ghost"
                 size="icon-xs"
-                :aria-label="t('form.move_down', {}, 'Move down')"
+                :aria-label="t('file_upload.move_down', { name: file.name }, 'Move :name down')"
                 :disabled="index === files.length - 1"
                 @click="move(index, index + 1)"
                 ><ChevronDownIcon
@@ -562,7 +565,7 @@ function cssLength(value: number | string): string {
               :variant="circle ? 'secondary' : 'ghost'"
               size="icon-xs"
               :class="cn(circle && 'rounded-full shadow')"
-              :aria-label="t('image_editor.title', {}, 'Edit image')"
+              :aria-label="t('file_upload.edit', { name: file.name }, 'Edit :name')"
               :title="t('image_editor.title', {}, 'Edit image')"
               data-action="edit-image"
               @click="void editExisting(file)"
@@ -579,7 +582,7 @@ function cssLength(value: number | string): string {
                 :href="uploadedFileLinks(file).open"
                 target="_blank"
                 rel="noopener noreferrer"
-                :aria-label="`${t('open', {}, 'Open')} ${t('opens_in_new_tab', {}, '(opens in a new tab)')}`"
+                :aria-label="`${t('file_upload.open', { name: file.name }, 'Open :name')} ${t('opens_in_new_tab', {}, '(opens in a new tab)')}`"
                 ><ExternalLinkIcon
               /></a>
             </Button>
@@ -593,7 +596,7 @@ function cssLength(value: number | string): string {
               <a
                 :href="uploadedFileLinks(file).download"
                 download
-                :aria-label="t('download', {}, 'Download')"
+                :aria-label="t('file_upload.download', { name: file.name }, 'Download :name')"
                 ><DownloadIcon
               /></a>
             </Button>
@@ -603,7 +606,7 @@ function cssLength(value: number | string): string {
               :variant="circle ? 'secondary' : 'ghost'"
               size="icon-xs"
               :class="cn(circle && 'rounded-full shadow')"
-              :aria-label="t('remove', {}, 'Remove')"
+              :aria-label="t('file_upload.remove', { name: file.name }, 'Remove :name')"
               @click="removeEntry(file)"
               ><XIcon
             /></Button>

package/src/components/fields/ImageEditorDialog.vue

@@ -11,7 +11,7 @@ import type {
   ImageEditorDragMode,
   ImageEditorState,
 } from '@alfakit/core'
-import { ImageEditor, loadEditorImage } from '@alfakit/core'
+import { ImageEditor, imageEditorOptionsKey, loadEditorImage } from '@alfakit/core'
 import {
   FlipHorizontal2Icon,
   FlipVertical2Icon,
@@ -81,11 +81,15 @@ const release = () => {
   state.value = null
 }
 
+// Restart only for another image or other settings: the schema object itself is new on
+// every render of a template item (a new builder block), which kept restarting the load.
 watch(
-  () => [props.request, props.options] as const,
-  ([request, options], _previous, onCleanup) => {
+  [() => props.request, () => imageEditorOptionsKey(props.options)],
+  ([request], _previous, onCleanup) => {
     if (!request) return
 
+    const options = props.options
+
     let cancelled = false
 
     loadEditorImage(request.file)

package/src/components/fields/KeyValueField.vue

@@ -5,6 +5,7 @@ import {
   reorderedItemKeys,
   resolveItemAction,
   type KeyValueSchema,
+  itemActionIcon,
 } from '@alfakit/core'
 import { ChevronDownIcon, ChevronUpIcon } from '@lucide/vue'
 import { computed, ref } from 'vue'
@@ -60,13 +61,13 @@ const addAction = computed(() =>
 const deleteAction = computed(() =>
   resolveItemAction('delete', props.component, undefined, {
     label: t('form.remove_row', {}, 'Remove row'),
-    icon: 'trash-2',
+    icon: itemActionIcon('key-value', 'delete', 'trash-2'),
   }),
 )
 const reorderAction = computed(() =>
   resolveItemAction('reorder', props.component, undefined, {
     label: t('form.reorder_item', {}, 'Reorder'),
-    icon: 'grip-vertical',
+    icon: itemActionIcon('key-value', 'reorder', 'grip-vertical'),
   }),
 )
 const deletable = computed(

package/src/components/fields/ModalTablePicker.vue

@@ -15,7 +15,7 @@ import {
   SearchIcon,
 } from '@lucide/vue'
 import { computed, onScopeDispose, ref, watch } from 'vue'
-import { useChoice, useT } from '../../context'
+import { useChoice, useFormatter, useT } from '../../context'
 import { cn } from '../../lib/utils'
 import { useFormStore } from '../form/form-context'
 import TableCellContent from '../table/TableCellContent.vue'
@@ -43,6 +43,7 @@ const emit = defineEmits<{
   confirm: [keys: string[], labels: Record<string, string>]
 }>()
 const t = useT()
+const format = useFormatter()
 const choice = useChoice()
 const form = useFormStore()
 const multiple = computed(() => Boolean(props.component.multiple))
@@ -314,7 +315,11 @@ const confirm = () =>
             paging.total !== undefined
               ? t(
                   'table.showing',
-                  { first: paging.from, last: paging.to, total: paging.total },
+                  {
+                    first: format.number(paging.from),
+                    last: format.number(paging.to),
+                    total: format.number(paging.total),
+                  },
                   'Showing :first–:last of :total',
                 )
               : `${paging.from}–${paging.to}`

package/src/components/fields/OneTimeCodeInputField.vue

@@ -43,7 +43,6 @@ const onInput = (event: Event) => {
       inputmode="numeric"
       autocomplete="one-time-code"
       pattern="[0-9]*"
-      :maxlength="props.component.length"
       :model-value="value ?? ''"
       :placeholder="props.component.placeholder"
       :disabled="disabled"
@@ -54,6 +53,7 @@ const onInput = (event: Event) => {
       :aria-describedby="aria['aria-describedby']"
       :aria-required="aria['aria-required']"
       data-slot="one-time-code-input"
+      data-input=""
       class="max-w-56 text-center font-mono text-lg tracking-[0.5em] tabular-nums"
       v-bind="props.component.extraInputAttributes"
       @input="onInput"

package/src/components/fields/RepeaterField.vue

@@ -13,7 +13,7 @@ import {
   removeIndexedState,
   removeRepeaterItem,
   reorderedItemKeys,
-  replacePlaceholder,
+  templateForIndex,
   resolveItemAction,
   virtualizeOptions,
   type ItemActionName,
@@ -82,8 +82,7 @@ const virtual = useVirtualList(
 useScrollToErroredItem(virtual, () => props.component.statePath)
 
 const schemaFor = (index: number): SchemaComponent[] =>
-  props.component.items[index]?.schema ??
-  replacePlaceholder(props.component.template, '__INDEX__', String(index))
+  props.component.items[index]?.schema ?? templateForIndex(props.component.template, index)
 const isCollapsed = (index: number) => collapsed.value[index] ?? props.component.collapsed ?? false
 
 const canAdd = computed(

package/src/components/fields/RichEditorInput.vue

@@ -32,6 +32,7 @@ import {
   toolbarCommands,
   panelUploadOptions,
   uploadTemporaryFile,
+  documentNonce,
 } from '@alfakit/core'
 import { EraserIcon } from '@lucide/vue'
 import Image from '@tiptap/extension-image'
@@ -230,6 +231,8 @@ onBeforeUnmount(() => {
 })
 
 const editor = useEditor({
+  // TipTap injects its base CSS; with the page's CSP nonce a nonce-based policy allows it.
+  injectNonce: documentNonce(),
   extensions: [
     StarterKit.configure({ link: false }),
     Link.configure(linkExtensionOptions(props.component.linkProtocols)),

package/src/components/fields/SelectField.vue

@@ -62,7 +62,7 @@ const plainLabel = (label: string): string =>
         @blur="blur"
       >
         <option v-if="props.component.selectablePlaceholder" value="">
-          {{ props.component.placeholder ?? '' }}
+          {{ props.component.placeholder ?? t('select_option', {}, 'Select an option') }}
         </option>
         <template
           v-for="option in props.component.options"
@@ -97,7 +97,9 @@ const plainLabel = (label: string): string =>
           :aria-readonly="readOnly || undefined"
           class="w-full"
         >
-          <SelectValue :placeholder="props.component.placeholder ?? ''" />
+          <SelectValue
+            :placeholder="props.component.placeholder ?? t('select_option', {}, 'Select an option')"
+          />
         </SelectTrigger>
         <SelectContent>
           <SelectItem

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/fields/item-actions.ts

@@ -4,23 +4,44 @@ import type {
   ItemActionName,
   ItemActionSchema,
 } from '@alfakit/core'
-import { ItemMoveTracker, itemActionContext } from '@alfakit/core'
+import { ItemMoveTracker, itemActionContext, itemActionIcon } from '@alfakit/core'
 import { nextTick, ref, toValue, watch, type MaybeRefOrGetter } from 'vue'
 import { useActionRunner, useT } from '../../context'
 
-/** Default looks of the built-in item actions, for payloads without `itemActions`. */
-export function useItemActionFallbacks(): Record<ItemActionName, ItemActionFallback> {
+/** Default looks of the built-in item actions, for payloads without `itemActions` (icons follow their `alfakit::` aliases). */
+export function useItemActionFallbacks(
+  kind: 'repeater' | 'builder' = 'repeater',
+): Record<ItemActionName, ItemActionFallback> {
   const t = useT()
 
   return {
     add: { label: '', icon: 'plus', variant: 'outline' },
-    delete: { label: t('form.remove_item', {}, 'Remove'), icon: 'trash-2', color: 'danger' },
-    clone: { label: t('form.clone', {}, 'Clone'), icon: 'copy' },
-    reorder: { label: t('form.reorder_item', {}, 'Reorder'), icon: 'grip-vertical' },
-    moveUp: { label: t('form.move_up', {}, 'Move up'), icon: 'chevron-up' },
-    moveDown: { label: t('form.move_down', {}, 'Move down'), icon: 'chevron-down' },
-    collapse: { label: t('form.collapse_item', {}, 'Collapse'), icon: 'chevron-up' },
-    expand: { label: t('form.expand_item', {}, 'Expand'), icon: 'chevron-down' },
+    delete: {
+      label: t('form.remove_item', {}, 'Remove'),
+      icon: itemActionIcon(kind, 'delete', 'trash-2'),
+      color: 'danger',
+    },
+    clone: { label: t('form.clone', {}, 'Clone'), icon: itemActionIcon(kind, 'clone', 'copy') },
+    reorder: {
+      label: t('form.reorder_item', {}, 'Reorder'),
+      icon: itemActionIcon(kind, 'reorder', 'grip-vertical'),
+    },
+    moveUp: {
+      label: t('form.move_up', {}, 'Move up'),
+      icon: itemActionIcon(kind, 'move-up', 'chevron-up'),
+    },
+    moveDown: {
+      label: t('form.move_down', {}, 'Move down'),
+      icon: itemActionIcon(kind, 'move-down', 'chevron-down'),
+    },
+    collapse: {
+      label: t('form.collapse_item', {}, 'Collapse'),
+      icon: itemActionIcon(kind, 'collapse', 'chevron-up'),
+    },
+    expand: {
+      label: t('form.expand_item', {}, 'Expand'),
+      icon: itemActionIcon(kind, 'expand', 'chevron-down'),
+    },
     collapseAll: {
       label: t('form.collapse_all', {}, 'Collapse all'),
       icon: 'chevrons-down-up',

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)
+    }
   },
 )
 
@@ -140,7 +151,8 @@ const trigger = async (action: ActionSchema, ctx: ActionContext) => {
   submitting = true
   submittedBlock = props.block
   store.setProcessing(true)
-  runner.execute(action, ctx, store.state.values)
+  // A click that blurred a live field started a refresh: send the state it returns.
+  store.whenSettled(() => runner.execute(action, ctx, store.state.values))
 }
 
 // Track this form's own submit visit so unrelated reloads finishing meanwhile (polling,
@@ -153,11 +165,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, fieldError } from '@alfakit/core'
 import {
   computed,
   inject,
@@ -70,12 +70,12 @@ export function useField<T = unknown>(field: MaybeRefOrGetter<BaseField>): Field
     return current as T
   })
 
-  const error = computed(() => state.value.errors[path]?.[0])
+  const error = computed(() => fieldError(state.value.errors, path))
   // Fields stay enabled during a live refresh: the store keeps edits made while the request
   // 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/kanban/KanbanBoard.vue

@@ -122,9 +122,21 @@ const template = computed(() =>
     .join(' '),
 )
 
-const setCard = (key: string) => (element: unknown) => {
-  if (element instanceof HTMLElement) cards.set(key, element)
-  else cards.delete(key)
+// A card moved to another column is mounted there before its old element is unmounted, so
+// an unmount only forgets the element it registered itself (else the moved card would lose
+// its entry and the keyboard focus).
+const setCard = (key: string) => {
+  let own: HTMLElement | null = null
+
+  return (element: unknown) => {
+    if (element instanceof HTMLElement) {
+      own = element
+      cards.set(key, element)
+    } else if (own !== null) {
+      if (cards.get(key) === own) cards.delete(key)
+      own = null
+    }
+  }
 }
 
 const focus = (key: string | undefined) => {

package/src/components/kanban/KanbanColumnHeader.vue

@@ -3,7 +3,7 @@ import type { KanbanColumnSchema } from '@alfakit/core'
 import { kanbanWipState } from '@alfakit/core'
 import { ChevronsLeftRightIcon, ChevronsRightLeftIcon, PlusIcon } from '@lucide/vue'
 import { computed } from 'vue'
-import { useT } from '../../context'
+import { useChoice, useT } from '../../context'
 import { cssColor } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -19,6 +19,7 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{ toggle: []; create: [] }>()
 const t = useT()
+const choice = useChoice()
 
 const wip = computed(() => kanbanWipState(props.column))
 const shown = computed(() =>
@@ -41,7 +42,7 @@ const countLabel = computed(() => {
         { shown: column.total, count: column.count },
         ':shown of :count cards',
       )
-    : t('kanban.count', { count: column.count }, ':count cards')
+    : choice('kanban.count', column.count, {}, '{1} :count card|[0,*] :count cards')
 })
 const style = computed(() =>
   props.column.color ? { borderTopColor: cssColor(props.column.color) } : undefined,
@@ -147,10 +148,11 @@ const addLabel = computed(() =>
     </p>
     <p v-if="wip === 'over'" class="text-destructive text-xs">
       {{
-        t(
+        choice(
           'kanban.wip_over',
+          props.column.wipLimit ?? 0,
           { limit: props.column.wipLimit ?? 0 },
-          'Over the limit of :limit cards',
+          '{1} Over the limit of :limit card|[0,*] Over the limit of :limit cards',
         )
       }}
     </p>

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/SectionComponent.vue

@@ -87,11 +87,14 @@ const t = useT()
           <component
             :is="heading"
             v-if="props.component.heading"
-            class="text-base leading-6 font-semibold"
+            class="text-base leading-6 font-semibold break-words"
           >
             {{ props.component.heading }}
           </component>
-          <p v-if="props.component.description" class="text-muted-foreground mt-1 text-sm">
+          <p
+            v-if="props.component.description"
+            class="text-muted-foreground mt-1 text-sm break-words"
+          >
             {{ props.component.description }}
           </p>
         </div>
@@ -188,11 +191,14 @@ const t = useT()
           <component
             :is="heading"
             v-if="props.component.heading"
-            class="text-base leading-6 font-semibold"
+            class="text-base leading-6 font-semibold break-words"
           >
             {{ props.component.heading }}
           </component>
-          <p v-if="props.component.description" class="text-muted-foreground mt-1 text-sm">
+          <p
+            v-if="props.component.description"
+            class="text-muted-foreground mt-1 text-sm break-words"
+          >
             {{ props.component.description }}
           </p>
         </div>

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