@xelqun/forms 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xelqun/forms",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "description": "Vue renderer for Xelqun Forms: PHP-defined, schema-driven forms for Laravel + Inertia.",
     "license": "MIT",
     "repository": {

package/resources/css/xelqun.css

@@ -6,12 +6,18 @@
 @source "../js";
 
 @theme inline {
-    --animate-xq-fade-in: xq-fade-in 150ms ease-out;
-    --animate-xq-fade-out: xq-fade-out 100ms ease-in forwards;
-    --animate-xq-toast-in: xq-toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-xq-toast-out: xq-toast-out 150ms ease-in forwards;
-    --animate-xq-dialog-in: xq-dialog-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
-    --animate-xq-dialog-out: xq-dialog-out 100ms ease-in forwards;
+    --animate-xq-fade-in: xq-fade-in var(--xq-duration-base) var(--xq-ease-out);
+    --animate-xq-fade-out: xq-fade-out var(--xq-duration-fast) var(--xq-ease-in) forwards;
+    --animate-xq-toast-in: xq-toast-in var(--xq-duration-slow) var(--xq-ease-out);
+    --animate-xq-toast-out: xq-toast-out var(--xq-duration-base) var(--xq-ease-in) forwards;
+    --animate-xq-dialog-in: xq-dialog-in var(--xq-duration-slow) var(--xq-ease-out);
+    --animate-xq-dialog-out: xq-dialog-out var(--xq-duration-fast) var(--xq-ease-in) forwards;
+    --animate-xq-pop-in: xq-pop-in var(--xq-duration-base) var(--xq-ease-out);
+    --animate-xq-pop-out: xq-pop-out var(--xq-duration-fast) var(--xq-ease-in) forwards;
+    --animate-xq-rise-in: xq-rise-in var(--xq-duration-slow) var(--xq-ease-out) both;
+    --animate-xq-error-in: xq-error-in var(--xq-duration-base) var(--xq-ease-out);
+    --animate-xq-shake: xq-shake var(--xq-duration-slow) var(--xq-ease-out);
+    --animate-xq-check-draw: xq-check-draw var(--xq-duration-base) var(--xq-ease-out) both;
     --color-xq-background: var(--xq-background);
     --color-xq-foreground: var(--xq-foreground);
     --color-xq-card: var(--xq-card);
@@ -288,6 +294,31 @@
     height: auto;
 }
 
+/*
+ * Motion, in one place. Everything that moves reads these, across forms, tables
+ * and panels, so a calmer app changes four lines. Things leave faster than they
+ * arrive, and only opacity, transform and filter animate, so nothing reflows.
+ */
+:root {
+    --xq-duration-fast: 120ms;
+    --xq-duration-base: 200ms;
+    --xq-duration-slow: 320ms;
+    --xq-stagger: 45ms;
+    --xq-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --xq-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --xq-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* One guard for all of it. Not zero, so the events that close a dialog still fire. */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --xq-duration-fast: 1ms;
+        --xq-duration-base: 1ms;
+        --xq-duration-slow: 1ms;
+        --xq-stagger: 0ms;
+    }
+}
+
 @keyframes xq-fade-in {
     from {
         opacity: 0;
@@ -303,7 +334,9 @@
 @keyframes xq-toast-in {
     from {
         opacity: 0;
-        translate: 0 -0.5rem;
+        translate: 0 -0.75rem;
+        scale: 0.96;
+        filter: blur(4px);
     }
 }
 
@@ -311,19 +344,77 @@
     to {
         opacity: 0;
         translate: 1rem 0;
+        filter: blur(2px);
     }
 }
 
 @keyframes xq-dialog-in {
     from {
         opacity: 0;
-        scale: 0.96;
+        scale: 0.94;
+        filter: blur(6px);
     }
 }
 
 @keyframes xq-dialog-out {
+    to {
+        opacity: 0;
+        scale: 0.97;
+        filter: blur(2px);
+    }
+}
+
+/* Grows from whatever opened it, as long as the element sets its transform-origin. */
+@keyframes xq-pop-in {
+    from {
+        opacity: 0;
+        scale: 0.95;
+        filter: blur(3px);
+    }
+}
+
+@keyframes xq-pop-out {
     to {
         opacity: 0;
         scale: 0.98;
     }
 }
+
+@keyframes xq-rise-in {
+    from {
+        opacity: 0;
+        translate: 0 0.5rem;
+        filter: blur(3px);
+    }
+}
+
+@keyframes xq-error-in {
+    from {
+        opacity: 0;
+        translate: 0 -0.25rem;
+    }
+}
+
+@keyframes xq-shake {
+    20% {
+        translate: -5px 0;
+    }
+
+    45% {
+        translate: 4px 0;
+    }
+
+    70% {
+        translate: -2px 0;
+    }
+}
+
+@keyframes xq-check-draw {
+    from {
+        stroke-dashoffset: 24;
+    }
+
+    to {
+        stroke-dashoffset: 0;
+    }
+}

package/resources/js/components/XqAction.vue

@@ -5,6 +5,9 @@ import type { FormStore } from '../core/store';
  * What the button needs from whatever holds it. Outside a form, pass your own.
  */
 export type ActionRunner = Pick<FormStore, 'mountAction' | 'runAction' | 'processing' | 't'>;
+
+/** How the last run went, for as long as the button shows it. */
+export type ActionOutcome = 'done' | 'failed' | null;
 </script>
 
 <script setup lang="ts">
@@ -21,6 +24,7 @@ import XqConfirmDialog from '../ui/XqConfirmDialog.vue';
 import XqDialog from '../ui/XqDialog.vue';
 import XqDialogFooter from '../ui/XqDialogFooter.vue';
 import XqIcon from '../ui/XqIcon.vue';
+import XqActionContent from './XqActionContent.vue';
 import XqForm from './XqForm.vue';
 
 const props = defineProps<{
@@ -29,7 +33,7 @@ const props = defineProps<{
     /** Keep the dialogs and leave the button out, for a menu that has its own. */
     headless?: boolean;
 }>();
-const emit = defineEmits<{ spinner: [showsSpinner: boolean] }>();
+const emit = defineEmits<{ spinner: [showsSpinner: boolean]; outcome: [outcome: ActionOutcome] }>();
 const store = props.runner ?? useFormStore();
 const options = computed(() => props.node.props ?? {});
 const running = ref(false);
@@ -37,6 +41,7 @@ const showsSpinner = ref(false);
 const confirming = ref(false);
 const modalOpen = ref(false);
 const modal = shallowRef<FormStore | null>(null);
+const outcome = ref<ActionOutcome>(null);
 
 const variant = computed(() =>
     options.value.style === 'link'
@@ -49,7 +54,21 @@ const variant = computed(() =>
 // A new tab isn't a visit.
 const isVisit = computed(() => !options.value.openInNewTab && isOwnUrl(options.value.url));
 
+/** Long enough to register, and short enough to be ready for another click. */
+const OUTCOME_DURATION = 1000;
+
 let spinnerTimer: ReturnType<typeof setTimeout> | undefined;
+let outcomeTimer: ReturnType<typeof setTimeout> | undefined;
+
+function showOutcome(next: ActionOutcome): void {
+    clearTimeout(outcomeTimer);
+    outcome.value = next;
+    emit('outcome', next);
+    outcomeTimer = setTimeout(() => {
+        outcome.value = null;
+        emit('outcome', null);
+    }, OUTCOME_DURATION);
+}
 
 // A quick action changes nothing on screen until it's done, so it can't flicker.
 watch(running, (isRunning) => {
@@ -71,6 +90,11 @@ async function run(): Promise<void> {
 
     const result = await store.runAction(props.node, modal.value ?? undefined);
 
+    // A modal keeps its failure to itself, on the field or message that explains it.
+    if (result || !modalOpen.value) {
+        showOutcome(result ? 'done' : 'failed');
+    }
+
     if (result) {
         modalOpen.value = false;
     }
@@ -131,6 +155,7 @@ defineExpose({ open });
 
 onScopeDispose(() => {
     clearTimeout(spinnerTimer);
+    clearTimeout(outcomeTimer);
     closeModal();
 });
 </script>
@@ -161,22 +186,22 @@ onScopeDispose(() => {
                 type="button"
                 :variant="variant"
                 :size="options.style === 'icon' ? 'icon-sm' : 'sm'"
-                :class="showsSpinner && 'pointer-events-none'"
+                :class="
+                    cn(
+                        showsSpinner && 'pointer-events-none',
+                        outcome === 'failed' && 'animate-xq-shake',
+                    )
+                "
                 :disabled="!!options.disabled || store.processing.value"
                 :title="options.tooltip"
                 :aria-label="options.style === 'icon' ? options.label : undefined"
                 :aria-busy="running || undefined"
                 @click="open"
             >
-                <span :class="cn('gap-1.5 inline-flex items-center', showsSpinner && 'invisible')">
+                <XqActionContent :spinning="showsSpinner" :done="outcome === 'done'">
                     <XqIcon v-if="options.icon" :name="options.icon" />
                     <template v-if="options.style !== 'icon'">{{ options.label }}</template>
-                </span>
-                <LoaderCircle
-                    v-if="showsSpinner"
-                    class="motion-safe:animate-spin absolute"
-                    aria-hidden="true"
-                />
+                </XqActionContent>
             </XqButton>
         </template>
         <XqConfirmDialog

package/resources/js/components/XqActionContent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Check, LoaderCircle } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { cn } from '../lib/utils';
+
+/**
+ * What's on a button that runs something: its label, then a spinner if it takes a
+ * while, then a check that draws on when it's done. All three share one spot, so
+ * the button never changes size.
+ */
+const props = defineProps<{ spinning?: boolean; done?: boolean }>();
+
+const isHidden = computed(() => props.spinning || props.done);
+</script>
+
+<template>
+    <span class="grid place-items-center">
+        <span
+            :class="
+                cn(
+                    'gap-1.5 inline-flex items-center transition-[opacity,scale] duration-(--xq-duration-fast) [grid-area:1/1]',
+                    isHidden && 'scale-90 opacity-0',
+                )
+            "
+        >
+            <slot />
+        </span>
+        <span v-if="spinning" class="animate-xq-pop-in [grid-area:1/1]" aria-hidden="true">
+            <LoaderCircle class="motion-safe:animate-spin" />
+        </span>
+        <span v-else-if="done" class="[grid-area:1/1]" aria-hidden="true" data-xq-action-done>
+            <Check class="[&_path]:animate-xq-check-draw [&_path]:[stroke-dasharray:24]" />
+        </span>
+    </span>
+</template>

package/resources/js/components/XqActionGroup.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { LoaderCircle } from 'lucide-vue-next';
 import {
     DropdownMenuContent,
     DropdownMenuItem,
@@ -16,7 +15,10 @@ import type { SchemaNode } from '../schema/types';
 import { actionVariants, optionClass, popoverClass } from '../ui/classes';
 import XqButton from '../ui/XqButton.vue';
 import XqIcon from '../ui/XqIcon.vue';
+import XqMenuGlide from '../ui/XqMenuGlide.vue';
 import XqAction from './XqAction.vue';
+import type { ActionOutcome } from './XqAction.vue';
+import XqActionContent from './XqActionContent.vue';
 import type { ActionRunner } from './XqAction.vue';
 
 /**
@@ -33,6 +35,7 @@ const items = computed(() =>
 const headlessActions = computed(() => items.value.filter((item) => !item.props?.url));
 const hasLabel = computed(() => !!options.value.label);
 const showsSpinner = ref(false);
+const outcome = ref<ActionOutcome>(null);
 const actions = new Map<string, { open: () => Promise<void> }>();
 let selected: string | null = null;
 
@@ -64,32 +67,31 @@ function openSelected(): void {
                     type="button"
                     :variant="hasLabel ? (actionVariants[options.color] ?? 'outline') : 'ghost'"
                     :size="hasLabel ? 'sm' : 'icon-sm'"
-                    :class="showsSpinner && 'pointer-events-none'"
+                    :class="
+                        cn(
+                            showsSpinner && 'pointer-events-none',
+                            outcome === 'failed' && 'animate-xq-shake',
+                        )
+                    "
                     :disabled="store.processing.value"
                     :title="options.tooltip"
                     :aria-label="hasLabel ? undefined : store.t('Actions')"
                     :aria-busy="showsSpinner || undefined"
                 >
-                    <span
-                        :class="cn('gap-1.5 inline-flex items-center', showsSpinner && 'invisible')"
-                    >
+                    <XqActionContent :spinning="showsSpinner" :done="outcome === 'done'">
                         <XqIcon :name="options.icon ?? 'ellipsis-vertical'" />
                         <template v-if="hasLabel">{{ options.label }}</template>
-                    </span>
-                    <LoaderCircle
-                        v-if="showsSpinner"
-                        class="motion-safe:animate-spin absolute"
-                        aria-hidden="true"
-                    />
+                    </XqActionContent>
                 </XqButton>
             </DropdownMenuTrigger>
             <DropdownMenuPortal>
                 <DropdownMenuContent
                     align="end"
                     :side-offset="4"
-                    :class="cn(popoverClass, 'p-1 min-w-40')"
+                    :class="cn(popoverClass, 'p-1 min-w-40 relative')"
                     @close-auto-focus="openSelected"
                 >
+                    <XqMenuGlide />
                     <template v-for="item in items" :key="item.key">
                         <DropdownMenuItem
                             v-if="item.props?.url"
@@ -139,6 +141,7 @@ function openSelected(): void {
                 :runner="store"
                 headless
                 @spinner="showsSpinner = $event"
+                @outcome="outcome = $event"
             />
         </div>
     </div>

package/resources/js/components/XqFieldWrapper.vue

@@ -44,7 +44,12 @@ const hasContentSlots = computed(() =>
 
 <template>
     <div
-        :class="cn('gap-2 grid', inlineLabel && 'sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]')"
+        :class="
+            cn(
+                'gap-2 grid data-invalid:animate-xq-shake',
+                inlineLabel && 'sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]',
+            )
+        "
         :data-xq-path="node.path"
         :data-invalid="error ? '' : undefined"
         :aria-busy="loading || undefined"
@@ -93,7 +98,7 @@ const hasContentSlots = computed(() =>
                 v-if="error && !fused"
                 :id="`${id}-error`"
                 :role="announceError ? 'alert' : undefined"
-                class="text-xs font-medium text-xq-destructive"
+                class="text-xs font-medium animate-xq-error-in text-xq-destructive"
             >
                 {{ error }}
             </p>

package/resources/js/components/XqForm.vue

@@ -5,7 +5,7 @@ import { FUSED_GROUP, HEADING_LEVEL, provideFormStore } from '../composables/con
 import { REGISTRY } from '../composables/registry';
 import { useUnsavedChangesAlert } from '../composables/useUnsavedChangesAlert';
 import { useXqForm } from '../composables/useXqForm';
-import type { FormStore } from '../core/store';
+import type { FormStore, SubmitOptions } from '../core/store';
 import { cn } from '../lib/utils';
 import type { FormSchema } from '../schema/types';
 import XqButton from '../ui/XqButton.vue';
@@ -18,7 +18,7 @@ const props = withDefaults(
         action?: string;
         method?: 'post' | 'put' | 'patch';
         submitLabel?: string;
-        preserveState?: boolean | 'errors';
+        preserveState?: SubmitOptions['preserveState'];
         /** Heading level of top-level section titles. Set it to fit the page around the form. */
         headingLevel?: 2 | 3 | 4 | 5 | 6;
         class?: string;

package/resources/js/components/fields/XqFileUploadField.vue

@@ -416,7 +416,7 @@ onBeforeUnmount(() => {
                     v-for="(file, index) in files"
                     :key="file.value"
                     :data-xq-file="file.value"
-                    class="gap-3 p-2 pr-3 flex items-center rounded-xq-md border border-xq-border bg-xq-background"
+                    class="gap-3 p-2 pr-3 flex items-center rounded-xq-md border border-xq-border bg-xq-card"
                 >
                     <span
                         v-if="canReorder && files.length > 1"
@@ -521,7 +521,7 @@ onBeforeUnmount(() => {
             <div
                 v-for="item in pending"
                 :key="item.id"
-                class="gap-3 p-2 pr-3 flex items-center rounded-xq-md border border-dashed border-xq-border bg-xq-background"
+                class="gap-3 p-2 pr-3 flex items-center rounded-xq-md border border-dashed border-xq-border bg-xq-card"
             >
                 <LoaderCircle class="size-5 motion-safe:animate-spin shrink-0 text-xq-primary" />
                 <div class="min-w-0 gap-1 grid flex-1">
@@ -555,7 +555,7 @@ onBeforeUnmount(() => {
                 :for="id"
                 :class="
                     cn(
-                        'gap-1.5 px-4 py-5 flex cursor-pointer flex-col items-center justify-center border border-dashed border-xq-input bg-xq-background text-center transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-xq-muted/50 has-[input:focus-visible]:border-xq-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-xq-ring/25',
+                        'gap-1.5 px-4 py-5 flex cursor-pointer flex-col items-center justify-center border border-dashed border-xq-input bg-xq-card text-center transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-xq-muted/50 has-[input:focus-visible]:border-xq-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-xq-ring/25',
                         isAvatar ? 'size-24 rounded-full' : 'rounded-xq-md',
                         dragging && 'border-xq-primary bg-xq-primary/5',
                         (error || uploadError) && 'border-xq-destructive',

package/resources/js/components/fields/XqSliderField.vue

@@ -36,7 +36,7 @@ const handles = computed<number[]>({
                     v-for="(_, index) in handles"
                     :key="index"
                     :aria-label="label ?? undefined"
-                    class="size-4 shadow-xs block cursor-pointer rounded-full border border-xq-primary bg-xq-background outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30"
+                    class="size-4 shadow-xs block cursor-pointer rounded-full border border-xq-primary bg-xq-card outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30"
                 />
             </SliderRoot>
             <output v-if="options.tooltips" class="text-sm text-right tabular-nums">

package/resources/js/components/fields/XqToggleButtonsField.vue

@@ -59,7 +59,7 @@ const model = computed<any>({
                 :disabled="option.disabled"
                 :class="
                     cn(
-                        'gap-2 h-9 px-3 text-sm font-medium inline-flex cursor-pointer items-center justify-center border border-xq-input bg-xq-background text-xq-foreground transition-colors outline-none hover:bg-xq-accent focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 disabled:cursor-not-allowed disabled:opacity-50',
+                        'gap-2 h-9 px-3 text-sm font-medium inline-flex cursor-pointer items-center justify-center border border-xq-input bg-xq-card text-xq-foreground transition-colors outline-none hover:bg-xq-accent focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 disabled:cursor-not-allowed disabled:opacity-50',
                         isGrouped
                             ? 'first:ml-0 -ml-px first:rounded-l-xq-md last:rounded-r-xq-md'
                             : 'rounded-xq-md',

package/resources/js/components/layouts/XqSection.vue

@@ -50,15 +50,23 @@ provide(HEADING_LEVEL, Math.min(headingLevel + 1, 6));
                 <ChevronDown
                     :class="
                         cn(
-                            'size-4 transition-transform motion-reduce:transition-none',
+                            'size-4 transition-transform duration-(--xq-duration-slow) ease-(--xq-ease-out)',
                             collapsed && '-rotate-90',
                         )
                     "
                 />
             </button>
         </header>
-        <div v-show="!collapsed" class="xq-grid p-5" :style="gridStyle(options.columns)">
-            <XqNode v-for="child in node.children ?? []" :key="child.key" :node="child" />
+        <div
+            class="grid transition-[grid-template-rows] duration-(--xq-duration-slow) ease-(--xq-ease-out)"
+            :class="collapsed ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]'"
+            :inert="collapsed"
+        >
+            <div class="min-h-0 overflow-hidden">
+                <div class="xq-grid p-5" :style="gridStyle(options.columns)">
+                    <XqNode v-for="child in node.children ?? []" :key="child.key" :node="child" />
+                </div>
+            </div>
         </div>
     </section>
 </template>

package/resources/js/core/store.ts

@@ -42,7 +42,10 @@ export const LOADING_INDICATOR_DELAY = 200;
 export interface SubmitOptions {
     method?: 'post' | 'put' | 'patch';
     data?: Record<string, unknown>;
-    preserveState?: boolean | 'errors';
+    preserveState?:
+        | boolean
+        | 'errors'
+        | ((page: { url: string; props: Record<string, unknown> }) => boolean);
     onSuccess?: (page: unknown) => void;
     onError?: (errors: Record<string, string>) => void;
     onFinish?: () => void;

package/resources/js/ui/XqButton.vue

@@ -7,7 +7,7 @@ import type { HTMLAttributes } from 'vue';
 import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
-    'gap-2 text-sm font-medium [&_svg:not([class*=size-])]:size-4 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-xq-md whitespace-nowrap transition-[color,background-color,box-shadow,opacity] outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/40 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+    'gap-2 text-sm font-medium [&_svg:not([class*=size-])]:size-4 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-xq-md whitespace-nowrap transition-[color,background-color,box-shadow,opacity,scale] duration-(--xq-duration-fast) outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/40 not-disabled:active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-(--xq-duration-base) [&_svg]:ease-(--xq-ease-spring) not-disabled:hover:[&_svg]:scale-110',
     {
         variants: {
             variant: {

package/resources/js/ui/XqCheckbox.vue

@@ -22,14 +22,18 @@ const model = defineModel<boolean>({ default: false });
         @update:model-value="model = $event === true"
         :class="
             cn(
-                'peer size-4 shadow-xs shrink-0 cursor-pointer rounded-[4px] border border-xq-input bg-xq-background transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-xq-destructive data-[state=checked]:border-xq-primary data-[state=checked]:bg-xq-primary data-[state=checked]:text-xq-primary-foreground data-[state=indeterminate]:border-xq-primary data-[state=indeterminate]:bg-xq-primary data-[state=indeterminate]:text-xq-primary-foreground',
+                'peer size-4 shadow-xs shrink-0 cursor-pointer rounded-[4px] border border-xq-input bg-xq-card transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-xq-destructive data-[state=checked]:border-xq-primary data-[state=checked]:bg-xq-primary data-[state=checked]:text-xq-primary-foreground data-[state=indeterminate]:border-xq-primary data-[state=indeterminate]:bg-xq-primary data-[state=indeterminate]:text-xq-primary-foreground',
                 props.class,
             )
         "
     >
         <CheckboxIndicator class="flex items-center justify-center text-current">
             <Minus v-if="indeterminate" class="size-3.5" :stroke-width="3" />
-            <Check v-else class="size-3.5" :stroke-width="3" />
+            <Check
+                v-else
+                class="size-3.5 [&_path]:animate-xq-check-draw [&_path]:[stroke-dasharray:24]"
+                :stroke-width="3"
+            />
         </CheckboxIndicator>
     </CheckboxRoot>
 </template>

package/resources/js/ui/XqCombobox.vue

@@ -20,6 +20,7 @@ import { useSortable } from '../composables/useSortable';
 import { cn } from '../lib/utils';
 import type { SelectMessages, SelectOption } from '../schema/types';
 import { controlClass, groupLabelClass, optionClass, popoverClass, spinnerClass } from './classes';
+import XqMenuGlide from './XqMenuGlide.vue';
 import { groupOptions, moveItem } from './options';
 import { useTranslator } from '../composables/context';
 
@@ -193,7 +194,8 @@ function clear(): void {
                 :side-offset="4"
                 :class="cn(popoverClass, 'max-h-72 min-w-40 w-(--reka-combobox-trigger-width)')"
             >
-                <ComboboxViewport class="p-1">
+                <ComboboxViewport class="p-1 relative">
+                    <XqMenuGlide />
                     <p
                         v-if="searchFailed"
                         role="status"

package/resources/js/ui/XqMenuGlide.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+/**
+ * One highlight that slides between a list's items, passing over the ones
+ * between. Put it first inside a `relative` list. It follows `data-highlighted`,
+ * so the arrow keys move it the same as the pointer. A list without a highlight
+ * of its own, such as a grid of cards, passes `hover-items` instead.
+ */
+const props = defineProps<{ hoverItems?: string; class?: HTMLAttributes['class'] }>();
+
+const element = ref<HTMLElement>();
+const box = ref({ top: 0, left: 0, right: 0, height: 0 });
+const isVisible = ref(false);
+const isGliding = ref(false);
+
+const HIDE_DELAY = 60;
+
+let observer: MutationObserver | undefined;
+let hideTimer: ReturnType<typeof setTimeout> | undefined;
+let hoveredItem: HTMLElement | undefined;
+
+function follow(): void {
+    const list = element.value?.parentElement;
+    const item = hoveredItem ?? list?.querySelector<HTMLElement>('[data-highlighted]');
+
+    clearTimeout(hideTimer);
+
+    if (!list || !item) {
+        // Items drop the highlight for a moment as the pointer crosses between them.
+        hideTimer = setTimeout(() => {
+            isVisible.value = false;
+            isGliding.value = false;
+        }, HIDE_DELAY);
+
+        return;
+    }
+
+    // Layout offsets, because a menu is scaled while it opens and on-screen sizes would be off.
+    // Walked up to the list, because an item's wrapper can be animating and so count as its parent.
+    let top = 0;
+    let left = 0;
+
+    for (let node: HTMLElement | null = item; node && node !== list;) {
+        top += node.offsetTop;
+        left += node.offsetLeft;
+        node = node.offsetParent as HTMLElement | null;
+    }
+
+    isGliding.value = isVisible.value;
+    isVisible.value = true;
+    // Edges in place of a width, because a list can settle its width after the first highlight.
+    box.value = {
+        top,
+        left,
+        right: list.clientWidth - left - item.offsetWidth,
+        height: item.offsetHeight,
+    };
+}
+
+function hoverItem(event: Event): void {
+    const target = event.target as HTMLElement;
+
+    // Crossing the gap between two cards shouldn't drop the highlight.
+    if (target !== event.currentTarget) {
+        hoveredItem = target.closest<HTMLElement>(props.hoverItems!) ?? undefined;
+        follow();
+    }
+}
+
+function leaveItems(): void {
+    hoveredItem = undefined;
+    follow();
+}
+
+onMounted(() => {
+    const list = element.value?.parentElement;
+
+    if (!list) {
+        return;
+    }
+
+    if (props.hoverItems) {
+        list.addEventListener('pointerover', hoverItem);
+        list.addEventListener('pointerleave', leaveItems);
+        list.addEventListener('focusin', hoverItem);
+        list.addEventListener('focusout', leaveItems);
+    }
+
+    observer = new MutationObserver(follow);
+    observer.observe(list, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['data-highlighted'],
+    });
+    follow();
+});
+
+onBeforeUnmount(() => {
+    const list = element.value?.parentElement;
+
+    list?.removeEventListener('pointerover', hoverItem);
+    list?.removeEventListener('pointerleave', leaveItems);
+    list?.removeEventListener('focusin', hoverItem);
+    list?.removeEventListener('focusout', leaveItems);
+    observer?.disconnect();
+    clearTimeout(hideTimer);
+});
+
+const style = computed(() => ({
+    transform: `translateY(${box.value.top}px)`,
+    left: `${box.value.left}px`,
+    right: `${box.value.right}px`,
+    height: `${box.value.height}px`,
+    opacity: isVisible.value ? 1 : 0,
+}));
+</script>
+
+<template>
+    <span
+        ref="element"
+        aria-hidden="true"
+        :class="
+            cn(
+                'top-0 pointer-events-none absolute',
+                isGliding
+                    ? 'transition-[transform,left,right,height,opacity] duration-(--xq-duration-base) ease-(--xq-ease-out)'
+                    : 'transition-opacity duration-(--xq-duration-fast)',
+                props.class || 'rounded-xq-sm bg-xq-accent',
+            )
+        "
+        :style="style"
+        data-xq-menu-glide
+    ></span>
+</template>

package/resources/js/ui/XqRadioGroupItem.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
         :disabled="disabled"
         :class="
             cn(
-                'size-4 shadow-xs aspect-square shrink-0 cursor-pointer rounded-full border border-xq-input bg-xq-background transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-xq-primary',
+                'size-4 shadow-xs aspect-square shrink-0 cursor-pointer rounded-full border border-xq-input bg-xq-card transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-xq-primary',
                 props.class,
             )
         "

package/resources/js/ui/XqSelect.vue

@@ -18,6 +18,7 @@ import type { HTMLAttributes } from 'vue';
 import { cn } from '../lib/utils';
 import type { SelectMessages, SelectOption } from '../schema/types';
 import { controlClass, groupLabelClass, optionClass, popoverClass, spinnerClass } from './classes';
+import XqMenuGlide from './XqMenuGlide.vue';
 import { groupOptions } from './options';
 import { useTranslator } from '../composables/context';
 
@@ -63,6 +64,7 @@ const groups = computed(() => groupOptions(props.options));
                 :class="cn(popoverClass, 'max-h-72 min-w-32 w-(--reka-select-trigger-width)')"
             >
                 <SelectViewport class="p-1">
+                    <XqMenuGlide />
                     <SelectGroup v-for="group in groups" :key="group.label ?? ''">
                         <SelectLabel v-if="group.label" :class="groupLabelClass">{{
                             group.label

package/resources/js/ui/XqSwitch.vue

@@ -21,7 +21,7 @@ const model = defineModel<boolean>({ default: false });
         "
     >
         <SwitchThumb
-            class="size-4 shadow-sm data-[state=unchecked]:translate-x-0.5 pointer-events-none block rounded-full bg-xq-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] motion-reduce:transition-none"
+            class="size-4 shadow-sm data-[state=unchecked]:translate-x-0.5 pointer-events-none block rounded-full bg-xq-background ring-0 transition-transform duration-(--xq-duration-slow) ease-(--xq-ease-spring) data-[state=checked]:translate-x-[calc(100%-1px)] motion-reduce:transition-none"
         />
     </SwitchRoot>
 </template>

package/resources/js/ui/XqTabGlide.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+/**
+ * The mark on the current tab, which leans over to whichever tab is hovered or
+ * focused and settles back after. Put it first inside a `relative` tab list.
+ */
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+
+const element = ref<HTMLElement>();
+const left = ref(0);
+const width = ref(0);
+const isVisible = ref(false);
+const isGliding = ref(false);
+
+let hoveredTab: HTMLElement | undefined;
+let attributeObserver: MutationObserver | undefined;
+let sizeObserver: ResizeObserver | undefined;
+
+function measure(canGlide = true): void {
+    const tab = hoveredTab?.isConnected
+        ? hoveredTab
+        : element.value?.parentElement?.querySelector<HTMLElement>(
+              '[aria-current="page"], [aria-selected="true"]',
+          );
+
+    isGliding.value = canGlide && isVisible.value && Boolean(tab);
+    isVisible.value = Boolean(tab);
+
+    if (tab) {
+        left.value = tab.offsetLeft;
+        width.value = tab.offsetWidth;
+    }
+}
+
+function hoverTab(event: Event): void {
+    const tab = (event.target as HTMLElement).closest<HTMLElement>('a, button:not(:disabled)');
+
+    if (tab) {
+        hoveredTab = tab;
+        measure();
+    }
+}
+
+function leaveTabs(): void {
+    hoveredTab = undefined;
+    measure();
+}
+
+onMounted(() => {
+    const list = element.value?.parentElement;
+
+    if (!list) {
+        return;
+    }
+
+    list.addEventListener('pointerover', hoverTab);
+    list.addEventListener('pointerleave', leaveTabs);
+    list.addEventListener('focusin', hoverTab);
+    list.addEventListener('focusout', leaveTabs);
+
+    attributeObserver = new MutationObserver(() => measure());
+    attributeObserver.observe(list, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['aria-current', 'aria-selected'],
+    });
+
+    // Tabs measure nothing while hidden, and their widths shift when a web font arrives.
+    sizeObserver = new ResizeObserver(() => measure(false));
+    sizeObserver.observe(list);
+    document.fonts?.ready.then(() => measure(false));
+
+    measure(false);
+});
+
+onBeforeUnmount(() => {
+    const list = element.value?.parentElement;
+
+    list?.removeEventListener('pointerover', hoverTab);
+    list?.removeEventListener('pointerleave', leaveTabs);
+    list?.removeEventListener('focusin', hoverTab);
+    list?.removeEventListener('focusout', leaveTabs);
+    attributeObserver?.disconnect();
+    sizeObserver?.disconnect();
+});
+
+const style = computed(() => ({
+    transform: `translateX(${left.value}px)`,
+    width: `${width.value}px`,
+    opacity: isVisible.value ? 1 : 0,
+}));
+</script>
+
+<template>
+    <span
+        ref="element"
+        aria-hidden="true"
+        :class="
+            cn(
+                'left-0 pointer-events-none absolute',
+                isGliding
+                    ? 'transition-[transform,width,opacity] duration-(--xq-duration-base) ease-(--xq-ease-out)'
+                    : 'transition-opacity duration-(--xq-duration-fast)',
+                props.class,
+            )
+        "
+        :style="style"
+        data-xq-tab-glide
+    ></span>
+</template>

package/resources/js/ui/XqTabsList.vue

@@ -2,6 +2,7 @@
 import { TabsList } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../lib/utils';
+import XqTabGlide from './XqTabGlide.vue';
 
 const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
@@ -11,11 +12,15 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>();
         data-slot="xq-tabs-list"
         :class="
             cn(
-                'h-9 gap-1 p-1 inline-flex w-fit max-w-full items-center overflow-x-auto rounded-xq-lg bg-xq-muted text-xq-muted-foreground',
+                'h-9 gap-1 p-1 relative inline-flex w-fit max-w-full items-center overflow-x-auto rounded-xq-lg bg-xq-muted text-xq-muted-foreground',
                 props.class,
             )
         "
     >
+        <XqTabGlide
+            class="inset-y-1 shadow-sm rounded-xq-md bg-xq-background"
+            data-slot="xq-tabs-indicator"
+        />
         <slot />
     </TabsList>
 </template>

package/resources/js/ui/XqTabsTrigger.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
         :disabled="disabled"
         :class="
             cn(
-                'gap-1.5 px-3 text-sm font-medium data-[state=active]:shadow-sm inline-flex h-full cursor-pointer items-center justify-center rounded-xq-md whitespace-nowrap transition-[color,box-shadow] outline-none hover:text-xq-foreground focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-xq-background data-[state=active]:text-xq-foreground',
+                'gap-1.5 px-3 text-sm font-medium relative z-10 inline-flex h-full cursor-pointer items-center justify-center rounded-xq-md whitespace-nowrap transition-[color,box-shadow] outline-none hover:text-xq-foreground focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-xq-foreground',
                 props.class,
             )
         "

package/resources/js/ui/classes.ts

@@ -3,7 +3,7 @@
  * utilities, so they never collide with an app's own design tokens.
  */
 export const controlClass =
-    'w-full min-w-0 rounded-xq-md border border-xq-input bg-xq-background text-sm text-xq-foreground shadow-xs transition-[color,box-shadow,border-color] outline-none placeholder:text-xq-muted-foreground focus-visible:border-xq-ring focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:border-xq-destructive aria-invalid:ring-xq-destructive/20';
+    'w-full min-w-0 rounded-xq-md border border-xq-input bg-xq-card text-sm text-xq-foreground shadow-xs transition-[color,box-shadow,border-color] outline-none placeholder:text-xq-muted-foreground focus-visible:border-xq-ring focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:border-xq-destructive aria-invalid:ring-xq-destructive/20';
 
 /** How an action's color looks on a button. */
 export const actionVariants: Record<string, 'default' | 'destructive' | 'outline'> = {
@@ -15,18 +15,18 @@ export const actionVariants: Record<string, 'default' | 'destructive' | 'outline
 export const spinnerClass = 'size-4 shrink-0 motion-safe:animate-spin text-xq-muted-foreground';
 
 export const popoverClass =
-    'z-50 overflow-hidden rounded-xq-md border border-xq-border bg-xq-popover text-xq-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
+    'z-50 overflow-hidden rounded-xq-md border border-xq-border bg-xq-popover text-xq-popover-foreground shadow-lg origin-(--reka-popper-transform-origin) data-[state=open]:animate-xq-pop-in data-[state=closed]:animate-xq-pop-out';
 
 export const groupLabelClass = 'px-2 py-1.5 text-xs font-medium text-xq-muted-foreground';
 
 export const optionClass =
-    'relative flex w-full cursor-default items-center gap-2 rounded-xq-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-xq-accent data-[highlighted]:text-xq-accent-foreground';
+    'relative flex w-full cursor-default items-center gap-2 rounded-xq-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:text-xq-accent-foreground';
 
 export const dialogOverlayClass =
-    'inset-0 bg-black/50 fixed z-50 backdrop-blur-[2px] motion-safe:data-[state=open]:animate-xq-fade-in motion-safe:data-[state=closed]:animate-xq-fade-out';
+    'inset-0 bg-black/50 fixed z-50 backdrop-blur-[2px] data-[state=open]:animate-xq-fade-in data-[state=closed]:animate-xq-fade-out';
 
 export const dialogContentClass =
-    'shadow-xl fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xq-xl border border-xq-border bg-xq-popover text-xq-popover-foreground outline-none motion-safe:data-[state=open]:animate-xq-dialog-in motion-safe:data-[state=closed]:animate-xq-dialog-out';
+    'shadow-xl fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xq-xl border border-xq-border bg-xq-popover text-xq-popover-foreground outline-none data-[state=open]:animate-xq-dialog-in data-[state=closed]:animate-xq-dialog-out';
 
 /** The tinted circle behind a dialog's icon. */
 export const dialogIconClasses: Record<string, string> = {

package/resources/js/ui/index.ts

@@ -13,10 +13,12 @@ export { default as XqLabel } from './XqLabel.vue';
 export { default as XqPopover } from './XqPopover.vue';
 export { default as XqRadioGroup } from './XqRadioGroup.vue';
 export { default as XqRadioGroupItem } from './XqRadioGroupItem.vue';
+export { default as XqMenuGlide } from './XqMenuGlide.vue';
 export { default as XqSelect } from './XqSelect.vue';
 export { default as XqSwitch } from './XqSwitch.vue';
 export { default as XqTabs } from './XqTabs.vue';
 export { default as XqTabsContent } from './XqTabsContent.vue';
+export { default as XqTabGlide } from './XqTabGlide.vue';
 export { default as XqTabsList } from './XqTabsList.vue';
 export { default as XqTabsTrigger } from './XqTabsTrigger.vue';
 export { default as XqTextarea } from './XqTextarea.vue';