@brumaombra/ui-vintage 0.8.2 → 0.9.1

package/src/components/message-dialog/MessageDialog.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed } from 'vue';
-import { AlertCircleIcon, InformationCircleIcon, Tick02Icon } from '@hugeicons/core-free-icons';
+import AlertCircleIcon from '@hugeicons/core-free-icons/AlertCircleIcon';
+import InformationCircleIcon from '@hugeicons/core-free-icons/InformationCircleIcon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';
 import { Button } from '../ui/button';
 import { getUiVintageRuntimeMessage } from '../../lib/i18n';
@@ -36,21 +38,21 @@ const defaultMessageIcon = computed(() => {
 // Resolved container classes for the message icon
 const messageIconClasses = computed(() => {
     const current = currentDialog.value;
-    if (!current) return 'border-(--border) bg-surface';
-    if (current.options.type === 'error') return 'border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30';
-    if (current.options.type === 'warning') return 'border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/30';
-    if (current.options.type === 'success') return 'border-green-200 bg-green-50 dark:border-green-900/50 dark:bg-green-950/30';
-    return 'border-(--border) bg-surface';
+    if (!current) return 'border-border bg-surface';
+    if (current.options.type === 'error') return 'border-destructive/25 bg-destructive/10';
+    if (current.options.type === 'warning') return 'border-warning/25 bg-warning/10';
+    if (current.options.type === 'success') return 'border-success/25 bg-success/10';
+    return 'border-border bg-surface';
 });
 
 // Resolved glyph color classes
 const messageGlyphClasses = computed(() => {
     const current = currentDialog.value;
-    if (!current) return 'text-blue-600';
-    if (current.options.type === 'error') return 'text-red-600';
-    if (current.options.type === 'warning') return 'text-amber-600';
-    if (current.options.type === 'success') return 'text-green-600';
-    return 'text-blue-600';
+    if (!current) return 'text-info';
+    if (current.options.type === 'error') return 'text-destructive';
+    if (current.options.type === 'warning') return 'text-warning';
+    if (current.options.type === 'success') return 'text-success';
+    return 'text-info';
 });
 
 // Close the dialog when the shell requests it
@@ -91,7 +93,7 @@ const handleOpenChange = (open: boolean) => {
 
             <!-- Dialog actions -->
             <AlertDialogFooter class="items-end">
-                <Button variant="secondary" :disabled="messageDialogState.busy" @click="resolveActiveMessageDialog">
+                <Button variant="secondary" @click="resolveActiveMessageDialog">
                     <HugeiconsIcon v-if="currentDialog.options.closeButtonIcon" :icon="currentDialog.options.closeButtonIcon" class="size-4" />
                     {{ resolvedCloseText }}
                 </Button>

package/src/components/message-dialog/message-dialog-state.ts

@@ -24,7 +24,6 @@ interface MessageDialogRequest {
 
 interface MessageDialogState {
     current: MessageDialogRequest | null;
-    busy: boolean;
     isOpen: boolean;
 }
 
@@ -39,7 +38,6 @@ const MESSAGE_DIALOG_ROOT_ID = 'ui-vintage-message-dialog-root';
 // Shared message dialog state
 export const messageDialogState: MessageDialogState = reactive({
     current: null,
-    busy: false,
     isOpen: false
 });
 
@@ -104,7 +102,6 @@ const enqueueMessageDialog = (request: MessageDialogRequest) => {
 
 // Clear the active dialog and continue the queue
 const clearCurrentMessageDialog = () => {
-    messageDialogState.busy = false;
     messageDialogState.isOpen = false;
     messageDialogState.current = null;
     openNextMessageDialog();
@@ -141,7 +138,7 @@ export const closeMessageDialog = () => {
 // Resolve the active message dialog
 export const resolveActiveMessageDialog = () => {
     const current = messageDialogState.current;
-    if (!current || messageDialogState.busy) return;
+    if (!current || !messageDialogState.isOpen) return;
     current.resolve();
     scheduleCloseCurrentMessageDialog();
 };

package/src/components/message-toast/MessageToast.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from '@hugeicons/core-free-icons';
+import AlertCircleIcon from '@hugeicons/core-free-icons/AlertCircleIcon';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import CheckmarkCircle02Icon from '@hugeicons/core-free-icons/CheckmarkCircle02Icon';
+import InformationCircleIcon from '@hugeicons/core-free-icons/InformationCircleIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
 import { getUiVintageRuntimeMessage } from '../../lib/i18n';
@@ -30,18 +33,18 @@ const getToastIcon = (toast: MessageToastItem) => {
 
 // Resolve the tinted icon tile classes for each toast type
 const toneClasses: Record<MessageToastType, string> = {
-    success: 'border-green-200 bg-green-50 text-green-600 dark:border-green-900/50 dark:bg-green-950/30 dark:text-green-400',
-    info: 'border-blue-200 bg-blue-50 text-blue-600 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-400',
-    warning: 'border-amber-200 bg-amber-50 text-amber-600 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-400',
-    error: 'border-red-200 bg-red-50 text-red-600 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400'
+    success: 'border-success/25 bg-success/10 text-success',
+    info: 'border-info/25 bg-info/10 text-info',
+    warning: 'border-warning/25 bg-warning/10 text-warning',
+    error: 'border-destructive/25 bg-destructive/10 text-destructive'
 };
 
 // Progress bar color for each toast type
 const progressClasses: Record<MessageToastType, string> = {
-    success: 'bg-green-500',
-    info: 'bg-blue-500',
-    warning: 'bg-amber-500',
-    error: 'bg-red-500'
+    success: 'bg-success',
+    info: 'bg-info',
+    warning: 'bg-warning',
+    error: 'bg-destructive'
 };
 
 const toasts = computed(() => messageToastState.toasts);
@@ -86,11 +89,17 @@ const getToastStyle = (toast: MessageToastItem, index: number) => {
     };
 };
 
+// Toast content elements currently watched by the observer, by toast id
+const observedElements = new Map<number, HTMLElement>();
+
 // Measure toast content heights so the stack can lay itself out
 const resizeObserver = typeof ResizeObserver !== 'undefined'
     ? new ResizeObserver((entries) => {
         for (const entry of entries) {
             const id = Number((entry.target as HTMLElement).dataset.toastId);
+
+            // Skip late notifications for toasts that already left
+            if (observedElements.get(id) !== entry.target) continue;
             heights.set(id, (entry.target as HTMLElement).offsetHeight);
         }
     })
@@ -99,7 +108,10 @@ const resizeObserver = typeof ResizeObserver !== 'undefined'
 // Register toast content elements with the observer
 const observeToast = (element: unknown) => {
     if (element instanceof HTMLElement && resizeObserver) {
-        heights.set(Number(element.dataset.toastId), element.offsetHeight);
+        const id = Number(element.dataset.toastId);
+        if (observedElements.get(id) === element) return;
+        heights.set(id, element.offsetHeight);
+        observedElements.set(id, element);
         resizeObserver.observe(element);
     }
 };
@@ -153,6 +165,11 @@ const handleAction = async (toast: MessageToastItem) => {
 // Forget measurements of removed toasts
 const handleAfterLeave = (element: Element) => {
     const id = Number((element as HTMLElement).dataset.toastId);
+    const content = observedElements.get(id);
+    if (content) {
+        resizeObserver?.unobserve(content);
+        observedElements.delete(id);
+    }
     heights.delete(id);
     leaveDirection.delete(id);
 };
@@ -167,6 +184,7 @@ watch(() => toasts.value.length, (length) => {
 // Stop observing on unmount
 onBeforeUnmount(() => {
     resizeObserver?.disconnect();
+    observedElements.clear();
 });
 </script>
 

package/src/components/message-toast/message-toast-state.ts

@@ -52,6 +52,7 @@ const MAX_TOASTS = 5;
 const MESSAGE_TOAST_ROOT_ID = 'ui-vintage-message-toast-root';
 
 const toastTimers = new Map<number, ToastTimer>();
+const pendingToastIds = new Set<number>();
 let messageToastMountPromise: Promise<void> | null = null;
 let nextToastId = 0;
 
@@ -143,6 +144,13 @@ export const resumeMessageToasts = () => {
 export const closeMessageToast = (id?: number) => {
     const ids = id === undefined ? messageToastState.toasts.map(toast => toast.id) : [id];
 
+    // Cancel toasts that were requested but are still waiting for the toaster to mount
+    if (id === undefined) {
+        pendingToastIds.clear();
+    } else {
+        pendingToastIds.delete(id);
+    }
+
     // Clear timers and remove the toasts from the stack
     for (const toastId of ids) {
         stopToastTimer(toastId);
@@ -170,11 +178,23 @@ export const showMessageToast = (options: ShowMessageToastOptions) => {
         duration
     };
 
+    // Toasts are client-only: never store them in the module state shared across server requests
+    if (typeof document === 'undefined') {
+        return id;
+    }
+
     // Expose the newest toast synchronously, as the single-toast API always did
     messageToastState.current = { message: toast.message, type: toast.type };
 
     // Mount first so the enter transition runs once the renderer exists
+    pendingToastIds.add(id);
     void ensureMessageToastMounted().then(() => {
+        // Skip toasts that were closed before the toaster finished mounting
+        if (!pendingToastIds.delete(id)) {
+            syncLegacyState();
+            return;
+        }
+
         // Push the newest toast on top and trim the overflow
         messageToastState.toasts = [toast, ...messageToastState.toasts];
         for (const overflow of messageToastState.toasts.slice(MAX_TOASTS)) {

package/src/components/page-header/PageHeader.vue

@@ -27,7 +27,7 @@ const hasSlotContent = computed(() => {
 
 // Get size classes based on size prop
 const getSizeClasses = (size: string) => {
-    const baseClasses = 'font-bold text-foreground';
+    const baseClasses = 'font-semibold tracking-tight text-foreground';
 
     // Return classes based on size
     switch (size) {

package/src/components/progress-component/ProgressComponent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useId } from 'vue';
 import { Progress } from '../ui/progress';
 
 // Props
@@ -12,14 +13,17 @@ const props = withDefaults(defineProps<{
     bottomLeftLabel: '',
     bottomRightLabel: ''
 });
+
+// Name the progress bar after the visible title
+const titleId = useId();
 </script>
 
 <template>
     <div class="space-y-3">
-        <!-- Header with icon and label -->
+        <!-- Header with label and value -->
         <div class="flex items-center justify-between">
             <!-- Title of the progress bar -->
-            <span class="text-sm font-semibold text-foreground">
+            <span :id="titleId" class="text-sm font-semibold text-foreground">
                 {{ props.title }}
             </span>
 
@@ -30,7 +34,7 @@ const props = withDefaults(defineProps<{
         </div>
 
         <!-- Progress bar -->
-        <Progress :model-value="props.value" :max="props.max" />
+        <Progress :model-value="props.value" :max="props.max" :aria-labelledby="titleId" />
 
         <!-- Bottom labels -->
         <div v-if="props.bottomLeftLabel || props.bottomRightLabel" class="flex items-center justify-between text-xs">

package/src/components/single-value-card/SingleValueCard.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
-import { ArrowDownRight01Icon, ArrowUpRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowDownRight01Icon from '@hugeicons/core-free-icons/ArrowDownRight01Icon';
+import ArrowUpRight01Icon from '@hugeicons/core-free-icons/ArrowUpRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { AnimatedNumber } from '../ui/animated-number';
-import { Card, CardContent } from '../ui/card';
+import { Card } from '../ui/card';
 import { cn } from '../../lib/utils';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
@@ -33,11 +34,11 @@ const props = withDefaults(defineProps<{
 const valueClass = computed(() => {
     switch (props.valueColor) {
         case 'green':
-            return 'text-green-600 dark:text-green-400';
+            return 'text-success';
         case 'red':
-            return 'text-red-600 dark:text-red-400';
+            return 'text-destructive';
         case 'gray':
-            return 'text-gray-600 dark:text-gray-400';
+            return 'text-muted-foreground';
         default:
             return 'text-foreground';
     }
@@ -46,45 +47,43 @@ const valueClass = computed(() => {
 // Trend badge presentation
 const trendIsPositive = computed(() => (props.trend ?? 0) >= 0);
 const formattedTrend = computed(() => `${trendIsPositive.value ? '+' : ''}${props.trend}%`);
+
+// Value shown without the count-up (numbers are formatted only when formatOptions is given)
+const staticValue = computed(() => typeof props.value === 'number' && props.formatOptions ? new Intl.NumberFormat(undefined, props.formatOptions).format(props.value) : props.value);
 </script>
 
 <template>
-    <Card :class="cn('group/stat flex-row items-center p-4!', props.class)">
-        <CardContent class="w-full flex-row items-center gap-0 p-0!">
-            <!-- Icon -->
-            <Card color="gray" class="mr-4 flex size-12 shrink-0 items-center justify-center p-0! transition-[rotate,scale,border-color] duration-500 ease-bounce group-hover/stat:-rotate-6 group-hover/stat:scale-105 group-hover/stat:border-primary/50">
-                <HugeiconsIcon :icon="props.icon" class="size-5 transition-colors duration-300 group-hover/stat:text-primary" />
-            </Card>
-
-            <!-- Content -->
-            <div class="flex min-w-0 flex-1 flex-col">
-                <!-- Label -->
-                <span class="mb-1 truncate text-xs font-semibold text-muted-foreground">
-                    {{ props.label }}
-                </span>
+    <Card :class="cn('gap-0! p-4!', props.class)">
+        <!-- Label and icon -->
+        <div class="flex items-start justify-between gap-3">
+            <span class="min-w-0 text-[11px] font-semibold leading-5 tracking-wider text-muted-foreground uppercase">
+                {{ props.label }}
+            </span>
+            <span aria-hidden="true" class="flex size-8 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+                <HugeiconsIcon :icon="props.icon" class="size-4" />
+            </span>
+        </div>
 
-                <!-- Value and trend -->
-                <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
-                    <span :class="['text-2xl font-bold md:text-xl', valueClass]">
-                        <AnimatedNumber v-if="props.animate && typeof props.value === 'number'" :value="props.value" :format-options="props.formatOptions" />
-                        <template v-else>{{ props.value }}</template>
-                    </span>
+        <!-- Value and trend -->
+        <div class="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1">
+            <span :class="['text-2xl font-semibold tracking-tight tabular-nums', valueClass]">
+                <AnimatedNumber v-if="props.animate && typeof props.value === 'number'" :value="props.value" :format-options="props.formatOptions" />
+                <template v-else>{{ staticValue }}</template>
+            </span>
 
-                    <!-- Trend badge -->
-                    <span v-if="props.trend !== null" :class="cn('inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[11px] font-bold', trendIsPositive ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-red-500/10 text-red-600 dark:text-red-400')">
-                        <HugeiconsIcon :icon="trendIsPositive ? ArrowUpRight01Icon : ArrowDownRight01Icon" class="size-3" />
-                        {{ formattedTrend }}
-                    </span>
-                    <span v-if="props.trend !== null && props.trendLabel" class="text-[11px] text-muted-foreground">
-                        {{ props.trendLabel }}
-                    </span>
-                </div>
+            <!-- Trend badge -->
+            <span v-if="props.trend !== null" :class="cn('inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[11px] font-semibold tabular-nums', trendIsPositive ? 'bg-success/10 text-success' : 'bg-destructive/10 text-destructive')">
+                <HugeiconsIcon :icon="trendIsPositive ? ArrowUpRight01Icon : ArrowDownRight01Icon" class="size-3" />
+                {{ formattedTrend }}
+            </span>
+            <span v-if="props.trend !== null && props.trendLabel" class="text-[11px] text-muted-foreground">
+                {{ props.trendLabel }}
+            </span>
+        </div>
 
-                <!-- Description -->
-                <span v-if="props.description" class="mt-1 text-xs text-muted-foreground">
-                    {{ props.description }}
-                </span>
-            </div>
-        </CardContent>
+        <!-- Description -->
+        <span v-if="props.description" class="mt-1 text-xs leading-5 text-muted-foreground">
+            {{ props.description }}
+        </span>
     </Card>
-</template>
+</template>

package/src/components/slider-form-component/SliderFormComponent.vue

@@ -57,6 +57,6 @@ const handleUpdateModelValue = (value?: number[]) => {
         </div>
 
         <!-- Slider control -->
-        <Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" @update:model-value="handleUpdateModelValue" />
+        <Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" :thumb-label="props.label" @update:model-value="handleUpdateModelValue" />
     </Card>
 </template>

package/src/components/stat-strip/StatStrip.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { AnimatedNumber } from '../ui/animated-number';
+import { cn } from '../../lib/utils';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
+
+// Props
+const props = withDefaults(defineProps<{
+    items: Array<{
+        label: string;
+        value: string | number;
+        icon?: HugeiconsIconDefinition;
+        formatOptions?: Intl.NumberFormatOptions;
+    }>;
+    animate?: boolean;
+    class?: HTMLAttributes['class'];
+}>(), {
+    animate: true
+});
+</script>
+
+<template>
+    <!-- Compact row of stats in one bordered strip -->
+    <ul v-if="props.items.length > 0" data-slot="stat-strip" :class="cn('inline-flex max-w-full flex-wrap items-stretch overflow-hidden rounded border border-border bg-card text-xs shadow-elevated-sm', props.class)">
+        <li v-for="(item, index) in props.items" :key="item.label" :class="['flex items-center gap-2 px-4 py-2.5', index > 0 && 'border-l border-border']">
+            <HugeiconsIcon v-if="item.icon" :icon="item.icon" class="size-4 shrink-0 text-primary" />
+            <span class="font-semibold text-foreground tabular-nums">
+                <AnimatedNumber v-if="props.animate && typeof item.value === 'number'" :value="item.value" :format-options="item.formatOptions" />
+                <template v-else-if="typeof item.value === 'number'">{{ new Intl.NumberFormat(undefined, item.formatOptions).format(item.value) }}</template>
+                <template v-else>{{ item.value }}</template>
+            </span>
+            <span class="text-muted-foreground">{{ item.label }}</span>
+        </li>
+    </ul>
+</template>

package/src/components/stat-strip/index.ts

@@ -0,0 +1,2 @@
+export { default } from './StatStrip.vue';
+export { default as StatStrip } from './StatStrip.vue';

package/src/components/switch-form-component/SwitchFormComponent.vue

@@ -20,17 +20,17 @@ const emits = defineEmits<{
     <Card class="flex flex-col gap-2 px-4 py-3 sm:gap-3!">
         <!-- Switch label and control -->
         <div class="flex items-center justify-between gap-4">
-            <!-- Switch label -->
-            <div class="text-sm font-semibold">
+            <!-- Switch label (names the switch and toggles it on click) -->
+            <label :for="props.id" class="cursor-pointer text-sm font-semibold">
                 {{ props.label }}
-            </div>
+            </label>
 
             <!-- Switch control -->
-            <Switch :id="props.id" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
+            <Switch :id="props.id" :aria-describedby="`${props.id}-description`" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
         </div>
 
         <!-- Description -->
-        <div class="text-xs text-muted-foreground">
+        <div :id="`${props.id}-description`" class="text-xs text-muted-foreground">
             {{ props.description }}
         </div>
     </Card>

package/src/components/text-link/TextLink.vue

@@ -31,7 +31,7 @@ const handleClick = (event: MouseEvent) => {
 </script>
 
 <template>
-    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-(--text-primary-light) hover:underline dark:text-(--text-primary-dark)" @click="handleClick">
+    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
         {{ props.text }}
     </component>
 </template>

package/src/components/theme-selector/ThemeSelector.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { LaptopIcon, Moon01Icon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import LaptopIcon from '@hugeicons/core-free-icons/LaptopIcon';
+import Moon01Icon from '@hugeicons/core-free-icons/Moon01Icon';
+import Sun01Icon from '@hugeicons/core-free-icons/Sun01Icon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';
@@ -98,8 +101,8 @@ onUnmounted(() => {
         <!-- Theme options -->
         <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
             <Command :model-value="currentTheme">
-                <CommandList>
-                    <CommandGroup :heading="t('uiVintage.theme.title')">
+                <CommandList :aria-label="t('uiVintage.theme.title')">
+                    <CommandGroup :heading="t('uiVintage.theme.title')" stagger>
                         <CommandItem v-for="option in themeOptions" :key="option.key" :value="option.key" @select="handleSelectTheme(option.key)">
                             <HugeiconsIcon :icon="option.icon" class="size-4" />
                             <span class="flex-1">{{ option.label }}</span>

package/src/components/theme-selector/theme-transition.ts

@@ -27,8 +27,14 @@ export const isDarkTheme = (theme: ThemeMode) => {
 // Read the persisted theme mode
 export const getStoredTheme = (): ThemeMode => {
     if (typeof localStorage === 'undefined') return 'auto';
-    const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-    return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
+
+    // Storage can throw when the browser blocks it (privacy settings, sandboxed frames)
+    try {
+        const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+        return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
+    } catch {
+        return 'auto';
+    }
 };
 
 // Apply the selected theme to the document and persist it
@@ -37,7 +43,13 @@ export const applyTheme = (theme: ThemeMode) => {
     const root = document.documentElement;
     root.classList.remove('light', 'dark');
     root.classList.add(isDarkTheme(theme) ? 'dark' : 'light');
-    localStorage.setItem(THEME_STORAGE_KEY, theme);
+
+    // Persisting is best effort: the theme still applies when storage is blocked
+    try {
+        localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch {
+        // Ignore storage errors
+    }
 };
 
 // Apply a theme with a circular reveal that grows from the origin point (View Transitions API)

package/src/components/ui/accordion/Accordion.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { computed, ref, useId } from 'vue';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../card';
 import { cn } from '../../../lib/utils';
@@ -26,6 +26,7 @@ const emits = defineEmits<{
 }>();
 
 const contentId = useId();
+const triggerId = useId();
 const internalExpanded = ref(props.initiallyExpanded);
 
 // Support both controlled (v-model:open) and uncontrolled usage
@@ -40,34 +41,33 @@ const toggleExpanded = () => {
 </script>
 
 <template>
-    <Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden sm:gap-0! p-0! data-[state=open]:border-primary/25', props.class)">
+    <Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden p-0!', props.class)">
         <!-- Header -->
-        <button type="button" :aria-expanded="expanded" :aria-controls="contentId" class="group/trigger flex w-full cursor-pointer items-center justify-between gap-4 p-5 text-left outline-none focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
-            <div class="flex min-w-0 items-center gap-3">
-                <!-- Icon -->
-                <div v-if="props.icon" class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[border-color,color] duration-200 group-hover/trigger:border-primary/60 group-data-[state=open]/accordion:border-primary/60 md:size-10">
-                    <HugeiconsIcon :icon="props.icon" :class="cn('size-4 text-muted-foreground transition-colors duration-200 group-hover/trigger:text-primary group-data-[state=open]/accordion:text-primary', props.iconClass)" />
-                </div>
+        <button :id="triggerId" type="button" :aria-expanded="expanded" :aria-controls="contentId" class="group/trigger flex w-full cursor-pointer items-center gap-3 px-5 py-3.5 text-left outline-none focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
+            <!-- Icon -->
+            <span v-if="props.icon" class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+                <HugeiconsIcon :icon="props.icon" :class="cn('size-3.5', props.iconClass)" />
+            </span>
 
-                <!-- Title -->
-                <div class="text-left text-sm font-semibold text-foreground md:text-base!">
-                    {{ props.title }}
-                </div>
-            </div>
+            <!-- Title -->
+            <span class="min-w-0 flex-1 text-sm font-semibold text-foreground">
+                {{ props.title }}
+            </span>
+
+            <!-- Optional content before the toggle icon -->
+            <slot name="trailing" />
 
             <!-- Toggle icon -->
-            <div class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[rotate,border-color,background-color] duration-[420ms] ease-spring group-hover/trigger:border-primary/50 group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:border-primary/50 group-data-[state=open]/accordion:bg-primary/10">
-                <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-muted-foreground transition-colors duration-200 group-hover/trigger:text-primary group-data-[state=open]/accordion:text-primary" />
-            </div>
+            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 shrink-0 text-muted-foreground transition-[rotate,color] duration-[420ms] ease-spring group-hover/trigger:text-primary group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:text-primary" />
         </button>
 
         <!-- Content -->
-        <div :id="contentId" role="region" :aria-hidden="!expanded" :inert="!expanded || undefined" :class="['grid transition-[grid-template-rows,opacity] duration-[380ms] ease-out-expo', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
+        <div :id="contentId" role="region" :aria-labelledby="triggerId" :aria-hidden="!expanded" :inert="!expanded || undefined" :class="['grid transition-[grid-template-rows,opacity] duration-[380ms] ease-out-expo', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
             <div class="overflow-hidden">
-                <div :class="['px-5 pb-5 transition-[translate,filter] duration-[420ms] ease-spring', expanded ? 'translate-y-0 blur-0' : '-translate-y-2 blur-[2px]']">
+                <div :class="['border-t border-border px-5 py-4 transition-[translate,filter] duration-[420ms] ease-spring', expanded ? 'translate-y-0 blur-none' : '-translate-y-2 blur-[2px]']">
                     <slot />
                 </div>
             </div>
         </div>
     </Card>
-</template>
+</template>

package/src/components/ui/alert/AlertTitle.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-bold tracking-tight text-current', props.class)">
+    <div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-semibold tracking-tight text-current', props.class)">
         <slot />
     </div>
 </template>

package/src/components/ui/alert/index.ts

@@ -11,5 +11,5 @@ export type AlertColors = {
 };
 
 export const alertClasses: (props?: ClassProp) => string = cva(
-    'relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm',
+    'relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 content-start items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm',
 );

package/src/components/ui/avatar/AvatarFallback.vue

@@ -25,7 +25,8 @@ const initials = computed(() => getInitials(props.name));
 </script>
 
 <template>
-    <AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :aria-label="props.name || undefined" :class="cn('flex size-full items-center justify-center bg-surface font-bold uppercase text-muted-foreground', textClass, shapeClass, props.class)">
+    <!-- With a name the initials act as an image of the person, so screen readers announce the name instead of the letters -->
+    <AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :role="props.name ? 'img' : undefined" :aria-label="props.name || undefined" :class="cn('flex size-full items-center justify-center bg-surface font-semibold uppercase text-muted-foreground', textClass, shapeClass, props.class)">
         <slot>{{ initials }}</slot>
     </AvatarFallback>
 </template>