@brumaombra/ui-vintage 0.8.2 → 0.9.0

package/src/components/ui/select/SelectItemContent.vue

@@ -36,7 +36,7 @@ const props = defineProps<{
 
             <!-- Description -->
             <span v-if="props.description" data-slot="select-item-content-description" :class="cn(
-                'font-regular text-[11px] sm:text-xs leading-4 sm:leading-5 text-muted-foreground',
+                'font-normal text-[11px] sm:text-xs leading-4 sm:leading-5 text-muted-foreground',
                 props.descriptionClass
             )
                 ">

package/src/components/ui/select/SelectTrigger.vue

@@ -6,6 +6,7 @@ import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
+import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = withDefaults(defineProps<SelectTriggerProps & {
@@ -15,10 +16,13 @@ const props = withDefaults(defineProps<SelectTriggerProps & {
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
 const forwardedProps = useForwardProps(delegatedProps);
+
+// Let a surrounding Field label point to this control
+const fieldControlId = useFieldControlId();
 </script>
 
 <template>
-    <SelectTrigger data-slot="select-trigger" :data-size="size" v-bind="forwardedProps" :class="cn(
+    <SelectTrigger :id="fieldControlId" data-slot="select-trigger" :data-size="size" v-bind="forwardedProps" :class="cn(
         'group/select-trigger uv-field flex w-fit cursor-pointer items-center justify-between gap-2 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold whitespace-nowrap text-foreground shadow-elevated-sm outline-none data-placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60 data-[size=default]:h-13 data-[size=sm]:h-10 sm:text-sm',
         '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',

package/src/components/ui/sidebar/Sidebar.vue

@@ -78,7 +78,7 @@ function handleMobileSidebarClick(event: MouseEvent) {
             props.class
         )
             " v-bind="$attrs">
-            <div data-sidebar="sidebar" class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
+            <div data-sidebar="sidebar" class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded group-data-[variant=floating]:border group-data-[variant=floating]:shadow-elevated-sm">
                 <slot />
             </div>
         </div>

package/src/components/ui/sidebar/SidebarGroupAction.vue

@@ -10,7 +10,7 @@ const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(
 
 <template>
     <Primitive data-slot="sidebar-group-action" data-sidebar="group-action" :as="as" :as-child="asChild" :class="cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         'after:absolute after:-inset-2 md:after:hidden',
         'group-data-[collapsible=icon]:hidden',
         props.class

package/src/components/ui/sidebar/SidebarGroupLabel.vue

@@ -10,7 +10,7 @@ const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(
 
 <template>
     <Primitive data-slot="sidebar-group-label" data-sidebar="group-label" :as="as" :as-child="asChild" :class="cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:px-1.5 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded px-2 text-xs font-semibold outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:px-1.5 [&>svg]:size-4 [&>svg]:shrink-0',
         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
         props.class
     )

package/src/components/ui/sidebar/SidebarInset.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
     <main data-slot="sidebar-inset" :class="cn(
         'bg-background relative flex w-full flex-1 flex-col',
-        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded md:peer-data-[variant=inset]:shadow-elevated-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
         props.class
     )
         ">

package/src/components/ui/sidebar/SidebarMenuAction.vue

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<PrimitiveProps & {
 
 <template>
     <Primitive data-slot="sidebar-menu-action" data-sidebar="menu-action" :class="cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         'after:absolute after:-inset-2 md:after:hidden',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',

package/src/components/ui/sidebar/SidebarMenuBadge.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 
 <template>
     <div data-slot="sidebar-menu-badge" data-sidebar="menu-badge" :class="cn(
-        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-semibold tabular-nums select-none',
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded px-1 text-xs font-semibold tabular-nums select-none',
         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',

package/src/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -14,11 +14,11 @@ const width = '72%';
 
 <template>
     <div data-slot="sidebar-menu-skeleton" data-sidebar="menu-skeleton" :class="cn(
-        'flex h-8 items-center gap-2 rounded-md px-2 group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5',
+        'flex h-8 items-center gap-2 rounded px-2 group-data-[compact=true]/sidebar-wrapper:h-7 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5',
         props.class
     )
         ">
-        <Skeleton v-if="showIcon" class="size-4 rounded-md group-data-[compact=true]/sidebar-wrapper:size-3.5" data-sidebar="menu-skeleton-icon" />
+        <Skeleton v-if="showIcon" class="size-4 rounded group-data-[compact=true]/sidebar-wrapper:size-3.5" data-sidebar="menu-skeleton-icon" />
 
         <Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
     </div>

package/src/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<PrimitiveProps & {
 
 <template>
     <Primitive data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" :as="as" :as-child="asChild" :data-size="size" :data-active="isActive" :class="cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-h-7 min-w-0 -translate-x-px items-center gap-2 rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-h-7 min-w-0 -translate-x-px items-center gap-2 rounded px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' &&

package/src/components/ui/sidebar/SidebarProvider.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes, Ref } from 'vue';
-import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { useEventListener, useMediaQuery, useMounted, useVModel } from '@vueuse/core';
+import { useCookie } from 'nuxt/app';
 import { TooltipProvider } from 'reka-ui';
 import { computed, ref } from 'vue';
 import { cn } from '../../../lib/utils';
@@ -13,7 +14,7 @@ const props = withDefaults(defineProps<{
     compact?: boolean;
     class?: HTMLAttributes['class'];
 }>(), {
-    defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+    defaultOpen: undefined,
     open: undefined,
     compact: false
 });
@@ -23,19 +24,29 @@ const emits = defineEmits<{
     'update:open': [open: boolean];
 }>();
 
-const isMobile = useMediaQuery('(max-width: 768px)');
+// Remembered open state, read per instance on both server and client so the first render matches
+const sidebarCookie = useCookie<boolean | null>(SIDEBAR_COOKIE_NAME, {
+    default: () => null,
+    maxAge: SIDEBAR_COOKIE_MAX_AGE,
+    path: '/'
+});
+
+// The mobile layout only exists in the browser: render the desktop markup until hydration is done
+const isMounted = useMounted();
+const matchesMobile = useMediaQuery('(max-width: 768px)');
+const isMobile = computed(() => isMounted.value && matchesMobile.value);
 const openMobile = ref(false);
 
 const open = useVModel(props, 'open', emits, {
-    defaultValue: props.defaultOpen ?? false,
+    defaultValue: props.defaultOpen ?? sidebarCookie.value !== false,
     passive: (props.open === undefined) as false
 }) as Ref<boolean>;
 
 function setOpen(value: boolean) {
     open.value = value; // emits('update:open', value)
 
-    // This sets the cookie to keep the sidebar state.
-    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    // Keep the sidebar state for the next visit
+    sidebarCookie.value = value;
 }
 
 function setOpenMobile(value: boolean) {

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

@@ -44,14 +44,14 @@ export type SidebarMenuButtonVariants = {
 export const sidebarMenuButtonVariants: (
     props?: SidebarMenuButtonVariants & ClassProp
 ) => string = cva(
-    'peer/menu-button flex w-full items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,min-height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
+    'peer/menu-button flex w-full items-center gap-2 rounded p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,min-height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
     {
         variants: {
             variant: {
                 default:
                     'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
                 outline:
-                    'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
+                    'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
             },
             size: {
                 default:

package/src/components/ui/sidebar/utils.ts

@@ -12,7 +12,7 @@ export const [useSidebar, provideSidebarContext] = createContext<{
     state: ComputedRef<'expanded' | 'collapsed'>;
     open: Ref<boolean>;
     setOpen: (value: boolean) => void;
-    isMobile: Ref<boolean>;
+    isMobile: Readonly<Ref<boolean>>;
     openMobile: Ref<boolean>;
     setOpenMobile: (value: boolean) => void;
     toggleSidebar: () => void;

package/src/components/ui/slider/Slider.vue

@@ -7,13 +7,14 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<SliderRootProps & {
+    thumbLabel?: string;
     class?: HTMLAttributes['class'];
 }>();
 
 // Emits
 const emits = defineEmits<SliderRootEmits>();
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'thumbLabel');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
@@ -23,12 +24,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         props.class
     )" v-bind="forwarded">
         <!-- Track -->
-        <SliderTrack data-slot="slider-track" class="relative grow overflow-hidden rounded bg-muted transition-[height,width] duration-200 ease-spring data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 group-hover/slider:data-[orientation=horizontal]:h-2.5 group-hover/slider:data-[orientation=vertical]:w-2.5">
+        <SliderTrack data-slot="slider-track" class="relative grow overflow-hidden rounded bg-muted data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2">
             <!-- Filled range -->
-            <SliderRange data-slot="slider-range" class="absolute bg-primary bg-[linear-gradient(90deg,transparent,rgb(255_255_255/0.22))] data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+            <SliderRange data-slot="slider-range" class="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
         </SliderTrack>
 
         <!-- Thumbs -->
-        <SliderThumb v-for="(_, key) in modelValue" :key="key" data-slot="slider-thumb" class="block size-5 shrink-0 cursor-grab rounded border-2 border-primary bg-white shadow-elevated-md outline-none [transition:scale_300ms_var(--ease-spring),box-shadow_200ms] hover:scale-110 hover:shadow-[0_0_0_6px_color-mix(in_oklab,var(--primary)_16%,transparent)] focus-visible:shadow-[0_0_0_6px_color-mix(in_oklab,var(--primary)_24%,transparent)] active:scale-125 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50" />
+        <SliderThumb v-for="(_, key) in modelValue" :key="key" data-slot="slider-thumb" :aria-label="props.thumbLabel" class="block size-5 shrink-0 cursor-grab rounded border-2 border-primary bg-card shadow-elevated-sm outline-none transition-[background-color,box-shadow] duration-150 hover:bg-[color-mix(in_oklab,var(--primary)_10%,var(--card))] focus-visible:ring-[3px] focus-visible:ring-ring/45 active:cursor-grabbing active:bg-[color-mix(in_oklab,var(--primary)_15%,var(--card))] disabled:pointer-events-none disabled:opacity-50" />
     </SliderRoot>
 </template>

package/src/components/ui/spinner/Spinner.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
-import { getUiVintageRuntimeMessage } from '../../../lib/i18n';
+import { useUiVintageMessage } from '../../../lib/i18n';
 import { cn } from '../../../lib/utils';
 
 // Props
@@ -14,7 +14,8 @@ const props = withDefaults(defineProps<{
     label: ''
 });
 
-const resolvedLabel = computed(() => props.label || getUiVintageRuntimeMessage('uiVintage.buttons.loading', 'Loading'));
+const message = useUiVintageMessage();
+const resolvedLabel = computed(() => props.label || message('uiVintage.buttons.loading', 'Loading'));
 
 // Size classes
 const sizeClasses: Record<NonNullable<typeof props.size>, string> = {

package/src/components/ui/stepper/StepperDescription.vue

@@ -5,10 +5,12 @@ import { reactiveOmit } from '@vueuse/core';
 import { StepperDescription } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
-// Props
-const props = defineProps<StepperDescriptionProps & {
+// Props (rendered as inline text by default: the stepper trigger is a button, which can't hold headings or paragraphs)
+const props = withDefaults(defineProps<StepperDescriptionProps & {
     class?: HTMLAttributes['class'];
-}>();
+}>(), {
+    as: 'span'
+});
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>

package/src/components/ui/stepper/StepperIndicator.vue

@@ -22,10 +22,10 @@ const state = computed(() => itemContext.state.value);
 
 <template>
     <StepperIndicator v-slot="{ step }" data-slot="stepper-indicator" :data-state="state" v-bind="delegatedProps" :class="cn(
-        'relative inline-flex size-9 shrink-0 items-center justify-center rounded-full border-2 border-border bg-card text-sm font-bold text-muted-foreground ring-0 ring-primary/15 tabular-nums',
+        'relative inline-flex size-9 shrink-0 items-center justify-center rounded border border-border bg-card text-xs font-semibold text-muted-foreground tabular-nums',
         '[transition:color_150ms,background-color_220ms,border-color_220ms,box-shadow_380ms_var(--ease-spring),transform_380ms_var(--ease-spring)]',
         'group-hover/stepper-trigger:border-border-strong group-active/stepper-trigger:scale-95 group-active/stepper-trigger:duration-75',
-        'data-[state=active]:border-primary data-[state=active]:text-primary data-[state=active]:ring-4 data-[state=active]:group-hover/stepper-trigger:border-primary',
+        'data-[state=active]:border-primary data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:group-hover/stepper-trigger:border-primary',
         'data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground data-[state=completed]:group-hover/stepper-trigger:border-primary',
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
         props.class

package/src/components/ui/stepper/StepperTitle.vue

@@ -5,10 +5,12 @@ import { reactiveOmit } from '@vueuse/core';
 import { StepperTitle } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
-// Props
-const props = defineProps<StepperTitleProps & {
+// Props (rendered as inline text by default: the stepper trigger is a button, which can't hold headings or paragraphs)
+const props = withDefaults(defineProps<StepperTitleProps & {
     class?: HTMLAttributes['class'];
-}>();
+}>(), {
+    as: 'span'
+});
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>

package/src/components/ui/switch/Switch.vue

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '../../../lib/utils';
+import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = defineProps<SwitchRootProps & {
@@ -15,13 +16,16 @@ const emits = defineEmits<SwitchRootEmits>();
 
 const delegatedProps = reactiveOmit(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+// Let a surrounding Field label point to this control
+const fieldControlId = useFieldControlId(() => props.id);
 </script>
 
 <template>
-    <SwitchRoot v-slot="slotProps" data-slot="switch" v-bind="forwarded" :class="cn(
+    <SwitchRoot v-slot="slotProps" data-slot="switch" v-bind="forwarded" :id="fieldControlId" :class="cn(
         'group/switch peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded border border-input bg-secondary shadow-elevated-sm outline-none',
         '[transition:background-color_200ms,border-color_200ms,box-shadow_250ms] hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-60',
-        'data-[state=checked]:border-primary data-[state=checked]:bg-accent data-[state=checked]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--primary)_14%,transparent)]',
+        'data-[state=checked]:border-primary data-[state=checked]:bg-accent',
         props.class
     )">
         <SwitchThumb data-slot="switch-thumb" :class="cn(

package/src/components/ui/tabs/TabsList.vue

@@ -21,7 +21,7 @@ const delegatedProps = reactiveOmit(props, 'class', 'indicatorClass');
     )">
         <!-- Sliding active indicator -->
         <TabsIndicator data-slot="tabs-indicator" :class="cn(
-            'absolute -z-10 rounded border border-primary bg-surface shadow-elevated-sm transition-[translate,width,height] duration-[380ms] ease-spring',
+            'absolute -z-10 rounded border border-primary/40 bg-primary/10 transition-[translate,width,height] duration-[380ms] ease-spring',
             'group-aria-[orientation=horizontal]/tabs-list:inset-y-1 group-aria-[orientation=horizontal]/tabs-list:left-0 group-aria-[orientation=horizontal]/tabs-list:w-(--reka-tabs-indicator-size) group-aria-[orientation=horizontal]/tabs-list:translate-x-(--reka-tabs-indicator-position)',
             'group-aria-[orientation=vertical]/tabs-list:inset-x-1 group-aria-[orientation=vertical]/tabs-list:top-0 group-aria-[orientation=vertical]/tabs-list:h-(--reka-tabs-indicator-size) group-aria-[orientation=vertical]/tabs-list:translate-y-(--reka-tabs-indicator-position)',
             props.indicatorClass

package/src/components/ui/tabs/TabsTrigger.vue

@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
         'relative inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap text-muted-foreground outline-none select-none',
         '[transition:color_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:text-foreground active:scale-[0.97] focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:pointer-events-none disabled:opacity-50',
         'data-[state=active]:text-primary data-[state=inactive]:hover:bg-accent/60',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:transition-transform [&_svg]:duration-300 [&_svg]:ease-bounce data-[state=active]:[&_svg]:scale-110',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
         props.class
     )" v-bind="forwardedProps">
         <slot />

package/src/components/ui/textarea/Textarea.vue

@@ -2,6 +2,7 @@
 import type { HTMLAttributes } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { cn } from '../../../lib/utils';
+import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = defineProps<{
@@ -19,10 +20,13 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     passive: true,
     defaultValue: props.defaultValue
 });
+
+// Let a surrounding Field label point to this control
+const fieldControlId = useFieldControlId();
 </script>
 
 <template>
-    <textarea v-model="modelValue" data-slot="textarea" :class="cn(
+    <textarea :id="fieldControlId" v-model="modelValue" data-slot="textarea" :class="cn(
         'uv-field flex field-sizing-content min-h-30 w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
         'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60',
         'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',

package/src/components/ui/time-picker/TimePicker.vue

@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<{
     inputClass?: HTMLAttributes['class'];
 }>(), {
     defaultValue: '',
-    step: 1,
+    step: 60,
     disabled: false
 });
 
@@ -43,7 +43,7 @@ const time = computed({
 
 <template>
     <Input v-model="time" type="time" :step="props.step" :min="props.min" :max="props.max" :disabled="props.disabled" :class="cn(
-        'cursor-pointer font-normal hover:border-(--border-hover-light) hover:bg-(--bg-selected-light) dark:hover:border-(--border-hover-dark) dark:hover:bg-(--bg-selected-dark) [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-70 hover:[&::-webkit-calendar-picker-indicator]:opacity-100',
+        'cursor-pointer font-normal hover:border-border-strong hover:bg-accent [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-70 hover:[&::-webkit-calendar-picker-indicator]:opacity-100',
         props.inputClass,
         props.class
     )

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -85,7 +85,7 @@ const indicatorStyle = computed<CSSProperties>(() => ({
         <span v-if="isSingle" data-slot="toggle-group-indicator" aria-hidden="true" :style="indicatorStyle" :class="cn(
             'pointer-events-none absolute top-0 left-0 z-0 rounded-sm border',
             animated && '[transition:transform_380ms_var(--ease-spring),width_380ms_var(--ease-spring),height_380ms_var(--ease-spring),opacity_180ms_var(--ease-snappy)]',
-            props.highlight ? 'border-primary/40 bg-primary/10 shadow-[0_0_0_3px_color-mix(in_oklab,var(--primary)_10%,transparent)]' : 'border-border-strong bg-surface shadow-elevated-sm'
+            props.highlight ? 'border-primary/40 bg-primary/10' : 'border-border-strong bg-surface shadow-elevated-sm'
         )" />
 
         <slot v-bind="slotProps" />

package/src/components/ui/tooltip/TooltipContent.vue

@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
     <TooltipPortal>
         <TooltipContent data-slot="tooltip-content" v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-            'uv-floating-motion bg-foreground text-background z-50 w-fit max-w-72 rounded-md px-3 py-1.5 text-xs font-semibold text-balance shadow-elevated-lg',
+            'uv-floating-motion bg-foreground text-background z-50 w-fit max-w-72 rounded px-3 py-1.5 text-xs font-semibold text-balance shadow-elevated-lg',
             props.class
         )
             ">

package/src/i18n/de.json

@@ -3,6 +3,7 @@
         "common": {
             "breadcrumb": "Brotkrumennavigation",
             "more": "Mehr",
+            "home": "Startseite",
             "empty": {
                 "title": "Hier gibt es noch nichts",
                 "description": "Zurzeit gibt es keine Inhalte zum Anzeigen."
@@ -10,7 +11,8 @@
             "loading": {
                 "title": "Wird geladen...",
                 "description": "Bitte warte einen Moment, wahrend wir die Inhalte laden."
-            }
+            },
+            "logo": "{name}-Logo"
         },
         "buttons": {
             "remove": "Entfernen",
@@ -50,7 +52,10 @@
             "description": "Nach einem auszuführenden Befehl suchen..."
         },
         "datePicker": {
-            "placeholder": "Datum auswählen"
+            "placeholder": "Datum auswählen",
+            "month": "Monat",
+            "year": "Jahr",
+            "time": "Uhrzeit"
         },
         "terminal": {
             "title": "Terminal",
@@ -60,7 +65,9 @@
         "code": {
             "title": "Code",
             "copy": "Code kopieren",
-            "copied": "Code kopiert"
+            "copied": "Code kopiert",
+            "position": "Zeile {line}, Spalte {column}",
+            "plainText": "Nur-Text"
         },
         "footer": {
             "madeWith": "Gemacht mit",
@@ -71,14 +78,20 @@
             "readingProgress": "Lesefortschritt",
             "readMore": "Weiterlesen",
             "goToPost": "Zum Beitrag",
+            "new": "Neu",
             "tableOfContents": "Inhaltsverzeichnis",
             "tableOfContentsDescription": "Zu einem Abschnitt dieses Artikels springen",
+            "tableOfContentsSections": "{count} Abschnitt | {count} Abschnitte",
             "openTableOfContents": "Inhaltsverzeichnis offnen",
             "closeTableOfContents": "Inhaltsverzeichnis schliessen",
             "loadMoreWithNumbers": "Mehr laden ({current}/{total})",
             "author": "Autor",
             "publishedDate": "Veroffentlicht",
             "lastUpdatedDate": "Aktualisiert",
+            "readingTime": "Lesezeit",
+            "readingTimeValue": "{minutes} Min.",
+            "category": "Kategorie",
+            "breadcrumbBlog": "Blog",
             "carouselNavigation": "Karussellnavigation",
             "goToSlide": "Zur Folie {index} wechseln",
             "previousSlide": "Vorherige Folie",
@@ -97,9 +110,6 @@
                 "copied": "Link kopiert"
             }
         },
-        "select": {
-            "defaultPlaceholder": "Option auswahlen"
-        },
         "errorPage": {
             "notFound": {
                 "title": "Seite nicht gefunden",

package/src/i18n/en.json

@@ -3,6 +3,7 @@
         "common": {
             "breadcrumb": "Breadcrumb",
             "more": "More",
+            "home": "Home",
             "empty": {
                 "title": "Nothing here yet",
                 "description": "There is no content to show right now."
@@ -10,7 +11,8 @@
             "loading": {
                 "title": "Loading...",
                 "description": "Please wait a moment while we load the content."
-            }
+            },
+            "logo": "{name} logo"
         },
         "buttons": {
             "remove": "Remove",
@@ -50,7 +52,10 @@
             "description": "Search for a command to run..."
         },
         "datePicker": {
-            "placeholder": "Pick a date"
+            "placeholder": "Pick a date",
+            "month": "Month",
+            "year": "Year",
+            "time": "Time"
         },
         "terminal": {
             "title": "Terminal",
@@ -60,7 +65,9 @@
         "code": {
             "title": "Code",
             "copy": "Copy code",
-            "copied": "Code copied"
+            "copied": "Code copied",
+            "position": "Ln {line}, Col {column}",
+            "plainText": "Plain text"
         },
         "footer": {
             "madeWith": "Made with",
@@ -71,14 +78,20 @@
             "readingProgress": "Reading progress",
             "readMore": "Read more",
             "goToPost": "Go to post",
+            "new": "New",
             "tableOfContents": "Table of contents",
             "tableOfContentsDescription": "Jump to a section of this article",
+            "tableOfContentsSections": "{count} section | {count} sections",
             "openTableOfContents": "Open table of contents",
             "closeTableOfContents": "Close table of contents",
             "loadMoreWithNumbers": "Load more ({current}/{total})",
             "author": "Author",
             "publishedDate": "Published",
             "lastUpdatedDate": "Updated",
+            "readingTime": "Reading time",
+            "readingTimeValue": "{minutes} min",
+            "category": "Category",
+            "breadcrumbBlog": "Blog",
             "carouselNavigation": "Carousel navigation",
             "goToSlide": "Go to slide {index}",
             "previousSlide": "Previous slide",
@@ -97,9 +110,6 @@
                 "copied": "Link copied"
             }
         },
-        "select": {
-            "defaultPlaceholder": "Select an option"
-        },
         "errorPage": {
             "notFound": {
                 "title": "Page not found",