@alfakit/vue 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/vue",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Vue 3 + shadcn-vue renderer for Alfakit, the Laravel admin panel builder by Alfa Six.",
   "license": "MIT",
   "author": "Alfa Six (https://alfasixbh.com)",
@@ -96,7 +96,7 @@
     "reka-ui": "^2.11.0",
     "tailwind-merge": "^3.7.0",
     "vue-sonner": "^2.0.9",
-    "@alfakit/core": "0.1.1"
+    "@alfakit/core": "0.1.2"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^3.0.0",
@@ -119,7 +119,7 @@
     "provenance": true
   },
   "scripts": {
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json && cp src/styles.css dist/styles.css && cp ../core/themes.css dist/themes.css && cp ../core/standalone.css dist/standalone.css && node ../../scripts/eject-manifest.mjs .",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json && cp src/styles.css dist/styles.css && cp ../core/themes.css dist/themes.css && cp ../core/components.css dist/components.css && cp ../core/standalone.css dist/standalone.css && node ../../scripts/eject-manifest.mjs .",
     "dev": "vite build --watch",
     "typecheck": "vue-tsc --noEmit",
     "test": "vitest run"

package/src/components/actions/ActionButton.vue

@@ -4,6 +4,8 @@ import {
   bindsKeyBindings,
   formatKeyBinding,
   iconButtonSize,
+  isActionLoading,
+  isActionProcessing,
   registerKeyBindings,
   resolveActionSize,
 } from '@alfakit/core'
@@ -47,9 +49,12 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 })
 
 const runner = useActionRunner()
-const loading = useStoreSelector(runner.store, (state) => state.loading === props.action.name)
+// Only this run (this record's button), not the same action in every table row.
+const loading = useStoreSelector(runner.store, (state) =>
+  isActionLoading(state, props.action, props.context),
+)
 const processing = useStoreSelector(runner.store, (state) =>
-  state.modals.some((modal) => modal.action.name === props.action.name && modal.processing),
+  isActionProcessing(state, props.action, props.context),
 )
 
 const variant = computed(
@@ -87,7 +92,7 @@ function buttonClasses(action: ActionSchema, kind: ActionSchema['variant']): str
       return colorClass(ghostButtonColorClasses, color, 'gray')
     case 'link':
       return cn(
-        'h-auto p-0 underline-offset-4 hover:underline',
+        'h-auto p-0 underline-offset-4 hover:underline has-[>svg]:px-0',
         colorClass(textColorClasses, color, 'primary'),
       )
     case 'icon-button':
@@ -278,9 +283,12 @@ const disabledTooltip = computed(() => Boolean(props.action.disabled && tooltip.
     </TooltipTrigger>
     <TooltipContent>
       {{ tooltip }}
-      <kbd v-if="shortcut" class="ms-2 rounded border border-white/20 px-1 font-mono text-[10px]">{{
-        formatKeyBinding(shortcut)
-      }}</kbd>
+      <kbd
+        v-if="shortcut"
+        dir="ltr"
+        class="ms-2 rounded border border-white/20 px-1 font-mono text-[10px]"
+        >{{ formatKeyBinding(shortcut) }}</kbd
+      >
     </TooltipContent>
   </Tooltip>
   <template v-else>

package/src/components/actions/ActionModal.vue

@@ -2,6 +2,7 @@
 import type { OpenModal } from '@alfakit/core'
 import {
   actionFormComponent,
+  formIdPrefix,
   actionFormParams,
   confirmModalClose,
   FormStore,
@@ -103,6 +104,8 @@ const form = (() => {
   return new FormStore(schema.value.form, {
     token: context.token,
     component: actionFormComponent(action, context),
+    // Own field ids: the modal opens over a form whose fields may share names.
+    idPrefix: formIdPrefix(actionFormComponent(action, context)),
     record: context.record ?? null,
     refreshUrl: panel.value.endpoints.schemaRefresh,
     optionsUrl: panel.value.endpoints.schemaOptions,
@@ -513,7 +516,6 @@ const hasBody = computed(() =>
           </Button>
         </div>
       </DialogFooter>
-      <span class="sr-only">{{ t('close', {}, 'Close') }}</span>
     </DialogContent>
   </Dialog>
 </template>

package/src/components/fields/ColorPickerField.vue

@@ -45,6 +45,7 @@ const onAlpha = (event: Event) =>
       <Input
         :id="id"
         :name="props.component.name"
+        dir="ltr"
         :model-value="value ?? ''"
         :placeholder="props.component.placeholder ?? (isHex ? '#000000' : props.component.format)"
         :disabled="disabled"

package/src/components/fields/ComboboxSelect.vue

@@ -210,7 +210,7 @@ const removeTag = (event: Event, key: string) => {
           )
         "
       >
-        <span class="flex flex-1 flex-wrap items-center gap-1 text-start">
+        <span class="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start">
           <span v-if="selected.length === 0" class="text-muted-foreground">{{
             props.component.placeholder ?? t('select_option', {}, 'Select an option')
           }}</span>

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/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/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/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>