@aleph-alpha/ui-library 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/ui-library",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/system/lib.js",
@@ -71,9 +71,9 @@
     "vitest": "^3.0.0",
     "vue-tsc": "^2.2.12",
     "wait-on": "9.0.3",
-    "@aleph-alpha/eslint-config-frontend": "0.5.0",
     "@aleph-alpha/prettier-config-frontend": "0.4.0",
-    "@aleph-alpha/tsconfig-frontend": "0.5.0"
+    "@aleph-alpha/tsconfig-frontend": "0.5.0",
+    "@aleph-alpha/eslint-config-frontend": "0.5.0"
   },
   "peerDependencies": {
     "@unocss/preset-wind4": ">=66.0.0",

package/src/components/UiDropdownMenu/UiDropdownMenu.stories.ts

@@ -20,6 +20,7 @@ import UiButton from '../UiButton/UiButton.vue';
 import UiIconButton from '../UiIconButton/UiIconButton.vue';
 import UiToggle from '../UiToggle/UiToggle.vue';
 import { UiIcon } from '../UiIcon';
+import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '../UiAvatar';
 
 const meta: Meta<typeof UiDropdownMenu> = {
   title: 'Components/UiDropdownMenu',
@@ -1016,3 +1017,112 @@ export const WithSoftToggleTriggerAndText: Story = {
     },
   },
 };
+
+const avatarTriggerTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiDropdownMenuSeparator,
+  UiButton,
+  UiAvatar,
+  UiAvatarImage,
+  UiAvatarFallback,
+  UiIcon,
+} from '@aleph-alpha/ui-library'
+
+const open = ref(false)
+</script>
+
+<template>
+  <UiDropdownMenu v-model:open="open">
+    <UiDropdownMenuTrigger as-child>
+      <UiButton variant="outline" class="h-auto gap-3 px-3 py-2">
+        <UiAvatar>
+          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <UiAvatarFallback>CN</UiAvatarFallback>
+        </UiAvatar>
+        <div class="flex flex-col items-start overflow-hidden">
+          <span class="truncate text-sm font-medium">Sofia Davis</span>
+          <span class="truncate text-xs text-muted-foreground font-normal">sofia@example.com</span>
+        </div>
+        <UiIcon name="chevrons-up-down" :size="16" class="shrink-0 text-muted-foreground" />
+      </UiButton>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent class="w-56" align="start">
+      <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
+      <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
+      <UiDropdownMenuItem>Notifications</UiDropdownMenuItem>
+      <UiDropdownMenuSeparator />
+      <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+</template>`;
+
+/**
+ * Dropdown menu with a trigger containing an avatar, title, description, and chevron icon.
+ */
+export const WithAvatarTrigger: Story = {
+  render: (args) => ({
+    components: {
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuItem,
+      UiDropdownMenuSeparator,
+      UiButton,
+      UiAvatar,
+      UiAvatarFallback,
+      UiAvatarImage,
+      UiIcon,
+    },
+    setup() {
+      const open = ref(args.open);
+      const modal = ref(args.modal);
+      watch(
+        () => args.open,
+        (v) => {
+          open.value = v;
+        },
+      );
+      watch(
+        () => args.modal,
+        (v) => {
+          modal.value = v;
+        },
+      );
+      return { open, modal };
+    },
+    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
+      <UiDropdownMenuTrigger as-child>
+        <UiButton variant="outline" class="h-auto gap-3 px-3 py-2">
+          <UiAvatar>
+            <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <UiAvatarFallback>CN</UiAvatarFallback>
+          </UiAvatar>
+          <div class="flex flex-col items-start overflow-hidden">
+            <span class="truncate text-sm font-medium">Sofia Davis</span>
+            <span class="truncate text-xs text-muted-foreground font-normal">sofia@example.com</span>
+          </div>
+          <UiIcon name="chevrons-up-down" :size="16" class="shrink-0 text-muted-foreground" />
+        </UiButton>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent class="w-56" align="start">
+        <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
+        <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
+        <UiDropdownMenuItem>Notifications</UiDropdownMenuItem>
+        <UiDropdownMenuSeparator />
+        <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: avatarTriggerTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiField/UiField.vue

@@ -40,7 +40,7 @@
   }
 
   function partitionSlots(groupNames: string[]) {
-    const children = slots.default?.() ?? [];
+    const children = slots.default?.({}) ?? [];
     const group = children.filter((v) => groupNames.includes(getSlotName(v) ?? ''));
     const rest = children.filter((v) => !groupNames.includes(getSlotName(v) ?? ''));
     return { group, rest };
@@ -49,7 +49,7 @@
   const labelPartition = computed(() => partitionSlots(['UiFieldLabel', 'UiFieldDescription']));
 
   const inputPartition = computed(() => {
-    const children = slots.default?.() ?? [];
+    const children = slots.default?.({}) ?? [];
     const content = children.filter((v) => getSlotName(v) === 'UiFieldContent');
     const desc = children.filter((v) => getSlotName(v) === 'UiFieldDescription');
     const rest = children.filter((v) => {

package/src/components/UiField/UiFieldError.vue

@@ -10,7 +10,7 @@
   const props = defineProps<UiFieldErrorProps>();
 
   const slots = useSlots();
-  const hasDefaultSlotContent = computed(() => (slots.default?.().length ?? 0) > 0);
+  const hasDefaultSlotContent = computed(() => (slots.default?.({}).length ?? 0) > 0);
 </script>
 
 <template>

package/src/components/core/badge/Badge.vue

@@ -2,10 +2,13 @@
   import type { PrimitiveProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import type { BadgeVariants } from '.';
+  import type { VHoverVariant } from '@/directives/vHover';
   import { reactiveOmit } from '@vueuse/core';
   import { Primitive } from 'reka-ui';
+  import { computed } from 'vue';
   import { cn } from '@/lib/utils';
   import { badgeVariants } from '.';
+  import { vHover } from '@/directives/vHover';
 
   const props = defineProps<
     PrimitiveProps & {
@@ -14,13 +17,33 @@
     }
   >();
 
-  const delegatedProps = reactiveOmit(props, 'class');
+  type BadgeVariant = NonNullable<BadgeVariants['variant']>;
+
+  const VARIANT_TO_V_HOVER_OVERLAY = new Map<BadgeVariant, VHoverVariant | false>([
+    ['default', 'subtle'],
+    ['secondary', 'default'],
+    ['destructive', 'default'],
+    ['outline', 'default'],
+  ]);
+
+  const delegatedProps = reactiveOmit(props, 'class', 'variant');
+
+  const badgeClass = computed(() => cn(badgeVariants({ variant: props.variant }), props.class));
+
+  const hoverOverlayVariant = computed(
+    () => VARIANT_TO_V_HOVER_OVERLAY.get(props.variant ?? 'default') ?? false,
+  );
 </script>
 
 <template>
+  <Primitive v-if="asChild" data-slot="badge" :class="badgeClass" v-bind="delegatedProps">
+    <slot />
+  </Primitive>
   <Primitive
+    v-else
+    v-hover="hoverOverlayVariant"
     data-slot="badge"
-    :class="cn(badgeVariants({ variant }), props.class)"
+    :class="badgeClass"
     v-bind="delegatedProps"
   >
     <slot />

package/src/components/core/badge/index.ts

@@ -8,12 +8,11 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
         destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-[#FF8D8F] dark:text-black',
-        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+          'border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-[#FF8D8F] dark:text-black',
+        outline: 'text-foreground',
       },
     },
     defaultVariants: {

package/src/components/core/button/Button.vue

@@ -2,9 +2,12 @@
   import type { PrimitiveProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import type { ButtonVariants } from '.';
+  import type { VHoverVariant } from '@/directives/vHover';
   import { Primitive } from 'reka-ui';
+  import { computed } from 'vue';
   import { cn } from '@/lib/utils';
   import { buttonVariants } from '.';
+  import { vHover } from '@/directives/vHover';
 
   interface Props extends PrimitiveProps {
     variant?: ButtonVariants['variant'];
@@ -15,14 +18,39 @@
   const props = withDefaults(defineProps<Props>(), {
     as: 'button',
   });
+
+  type ButtonVariant = NonNullable<ButtonVariants['variant']>;
+
+  /** Background overlay via `v-hover`; `link` uses `overlay-link-hover-subtle` (color) instead. */
+  const VARIANT_TO_V_HOVER_OVERLAY = new Map<ButtonVariant, VHoverVariant | false>([
+    ['default', 'subtle'],
+    ['link', false],
+    ['secondary', 'default'],
+    ['destructive', 'default'],
+    ['outline', 'default'],
+    ['ghost', 'default'],
+  ]);
+
+  const buttonClass = computed(() =>
+    cn(buttonVariants({ variant: props.variant, size: props.size }), props.class),
+  );
+
+  const hoverOverlayVariant = computed(
+    () => VARIANT_TO_V_HOVER_OVERLAY.get(props.variant ?? 'default') ?? false,
+  );
 </script>
 
 <template>
+  <Primitive v-if="asChild" data-slot="button" :as="as" :as-child="true" :class="buttonClass">
+    <slot />
+  </Primitive>
   <Primitive
+    v-else
+    v-hover="hoverOverlayVariant"
     data-slot="button"
     :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :as-child="false"
+    :class="buttonClass"
   >
     <slot />
   </Primitive>

package/src/components/core/button/index.ts

@@ -8,14 +8,14 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:border-transparent focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
-        outline:
-          'border border-input bg-transparent text-foreground shadow-xs hover:bg-hover-default',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'text-foreground hover:bg-hover-default',
-        link: 'text-link underline-offset-4 hover:underline',
+          'bg-destructive text-destructive-foreground focus-visible:border-transparent focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+        outline: 'border border-input bg-transparent text-foreground shadow-xs',
+        secondary: 'bg-secondary text-secondary-foreground',
+        ghost:
+          'text-foreground hover:border-border-button-outlined focus-visible:border-border-button-outlined',
+        link: 'text-link overlay-link-hover-subtle',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',

package/src/directives/index.ts

@@ -0,0 +1 @@
+export { vHover, type VHoverVariant } from './vHover';

package/src/directives/vHover.stories.ts

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent } from 'vue';
+import { vHover } from '@/directives/vHover';
+
+const VHoverDemo = defineComponent({
+  name: 'VHoverDemo',
+  directives: { hover: vHover },
+  methods: {
+    copyVHover(variant: 'subtle' | 'default' | 'strong', e: MouseEvent) {
+      const el = e.currentTarget as HTMLElement;
+      const snippet = `v-hover="'${variant}'"`;
+      navigator.clipboard
+        .writeText(snippet)
+        .then(() => {
+          el.classList.add('copied');
+          setTimeout(() => el.classList.remove('copied'), 1500);
+        })
+        .catch(() => {
+          /* clipboard unavailable (e.g. some test / non-secure contexts) */
+        });
+    },
+  },
+  template: `
+    <div class="p-8 bg-white dark:bg-background min-h-screen">
+      <style>
+        .copy-btn { cursor: pointer; transition: all 0.15s; }
+        .copy-btn:hover { background: rgba(0,0,0,0.05); }
+        .copy-btn.copied { background: #22c55e22; }
+        .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+      </style>
+
+      <div class="mb-6">
+        <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">v-hover</h2>
+        <p class="text-sm text-content-on-surface-muted max-w-2xl">
+          Registers as <code class="text-xs">v-hover</code> when using
+          <code class="text-xs">app.directive('hover', vHover)</code> from the library install.
+          Injects a single overlay layer; visible on <code class="text-xs">:hover</code> when
+          <code class="text-xs">@media (hover: hover)</code> and on <code class="text-xs">:focus-visible</code>.
+          Variants map to
+          <code class="text-xs">--overlay-hover-subtle</code>,
+          <code class="text-xs">--overlay-hover-default</code>, and
+          <code class="text-xs">--overlay-hover-strong</code>.
+          Hover or Tab+focus each tile to compare intensity.
+        </p>
+      </div>
+
+      <div class="flex flex-wrap gap-8">
+        <div class="flex flex-col items-center gap-2">
+          <button
+            type="button"
+            v-hover="'subtle'"
+            class="h-24 w-40 rounded-md bg-background-button-primary-button text-content-on-button-primary-button text-sm font-medium flex items-center justify-center border border-border-surface-default shadow-xs"
+          >
+            subtle
+          </button>
+          <div class="text-center">
+            <span class="text-xs text-content-on-surface-primary font-medium block">subtle</span>
+            <code
+              class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded"
+              @click="copyVHover('subtle', $event)"
+            >v-hover="'subtle'"</code>
+          </div>
+        </div>
+
+        <div class="flex flex-col items-center gap-2">
+          <button
+            type="button"
+            v-hover="'default'"
+            class="h-24 w-40 rounded-md bg-background-button-primary-button text-content-on-button-primary-button text-sm font-medium flex items-center justify-center border border-border-surface-default shadow-xs"
+          >
+            default
+          </button>
+          <div class="text-center">
+            <span class="text-xs text-content-on-surface-primary font-medium block">default</span>
+            <code
+              class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded"
+              @click="copyVHover('default', $event)"
+            >v-hover="'default'"</code>
+          </div>
+        </div>
+
+        <div class="flex flex-col items-center gap-2">
+          <button
+            type="button"
+            v-hover="'strong'"
+            class="h-24 w-40 rounded-md bg-background-button-primary-button text-content-on-button-primary-button text-sm font-medium flex items-center justify-center border border-border-surface-default shadow-xs"
+          >
+            strong
+          </button>
+          <div class="text-center">
+            <span class="text-xs text-content-on-surface-primary font-medium block">strong</span>
+            <code
+              class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded"
+              @click="copyVHover('strong', $event)"
+            >v-hover="'strong'"</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+const meta: Meta<typeof VHoverDemo> = {
+  title: 'Directives/v-hover',
+  component: VHoverDemo,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Overlay hover directive: `false` disables; string `subtle` | `default` | `strong` or `{ variant }`. Used by Button and Badge.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VHoverDemo>;
+
+/**
+ * Three overlay intensities on the same button fill so you can compare subtle, default, and strong.
+ */
+export const Variants: Story = {
+  render: () => ({
+    components: { VHoverDemo },
+    template: '<VHoverDemo />',
+  }),
+};

package/src/directives/vHover.ts

@@ -0,0 +1,70 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+export type VHoverVariant = 'subtle' | 'default' | 'strong';
+
+const OVERLAY_EL = Symbol('vHoverOverlayEl');
+
+type VHoverBinding = VHoverVariant | false | null | undefined | { variant: VHoverVariant };
+
+function resolveVariant(binding: DirectiveBinding<VHoverBinding>): VHoverVariant | null {
+  const v = binding.value;
+  if (v === false || v === null || v === undefined) return null;
+  if (typeof v === 'object' && v !== null && 'variant' in v) {
+    const { variant } = v;
+    if (variant === 'subtle' || variant === 'default' || variant === 'strong') return variant;
+    return null;
+  }
+  if (v === 'subtle' || v === 'default' || v === 'strong') return v;
+  return null;
+}
+
+function detach(el: HTMLElement): void {
+  const overlay = (el as unknown as Record<symbol, HTMLElement>)[OVERLAY_EL];
+  overlay?.remove();
+  delete (el as unknown as Record<symbol, unknown>)[OVERLAY_EL];
+  el.classList.remove('v-hover-root');
+}
+
+function attach(el: HTMLElement, variant: VHoverVariant): void {
+  detach(el);
+
+  el.classList.add('v-hover-root');
+
+  const overlay = document.createElement('span');
+  overlay.className = 'v-hover-overlay';
+  overlay.setAttribute('data-v-hover-variant', variant);
+  overlay.setAttribute('aria-hidden', 'true');
+  el.prepend(overlay);
+  (el as unknown as Record<symbol, HTMLElement>)[OVERLAY_EL] = overlay;
+}
+
+function setVariant(el: HTMLElement, variant: VHoverVariant): void {
+  const overlay = (el as unknown as Record<symbol, HTMLElement>)[OVERLAY_EL];
+  if (overlay?.isConnected) {
+    overlay.setAttribute('data-v-hover-variant', variant);
+  }
+}
+
+export const vHover: ObjectDirective<HTMLElement, VHoverBinding> = {
+  mounted(el, binding) {
+    const variant = resolveVariant(binding);
+    if (variant) attach(el, variant);
+  },
+
+  updated(el, binding) {
+    const variant = resolveVariant(binding);
+    if (!variant) {
+      detach(el);
+      return;
+    }
+    if ((el as unknown as Record<symbol, HTMLElement>)[OVERLAY_EL]?.isConnected) {
+      setVariant(el, variant);
+    } else {
+      attach(el, variant);
+    }
+  },
+
+  unmounted(el) {
+    detach(el);
+  },
+};

package/src/index.ts

@@ -5,6 +5,9 @@
 export * from './components';
 export * from './patterns';
 export * from './templates';
+export * from './directives';
+
+import { vHover } from './directives/vHover';
 
 const components = import.meta.glob(
   ['@/components/**/*.vue', '@/patterns/**/*.vue', '@/templates/**/*.vue'],
@@ -15,6 +18,7 @@ const components = import.meta.glob(
 
 export default {
   install(app, options) {
+    app.directive('hover', vHover);
     Object.values(components).forEach((component: any) => {
       app.component(component.default.__name, component.default);
     });

package/src/patterns/UiDatePicker/__tests__/UiDatePicker.test.ts

@@ -245,7 +245,7 @@ describe('UiDatePicker', () => {
 
   describe('lazy loading optimization', () => {
     test('lazily loads UiCalendar in single mode when popover opens', async () => {
-      const { getByRole, queryByRole, findByRole } = render(UiDatePicker, {
+      const { getByRole, queryByRole, findByRole, findAllByRole } = render(UiDatePicker, {
         props: { mode: 'single', modelValue: new CalendarDate(2025, 1, 15) },
       });
 
@@ -255,13 +255,14 @@ describe('UiDatePicker', () => {
       // Open the popover
       await userEvent.click(getByRole('button'));
 
-      // Calendar should be rendered after async load (findByRole waits for element)
+      // Calendar should be rendered after async load (find* waits for element)
       await findByRole('dialog');
-      await findByRole('grid');
+      const cells = await findAllByRole('gridcell');
+      expect(cells.length).toBeGreaterThan(0);
     });
 
     test('lazily loads UiRangeCalendar in range mode when popover opens', async () => {
-      const { getByRole, queryByRole, findByRole } = render(UiDatePicker, {
+      const { getByRole, queryByRole, findByRole, findAllByRole } = render(UiDatePicker, {
         props: { mode: 'range' },
       });
 
@@ -271,9 +272,10 @@ describe('UiDatePicker', () => {
       // Open the popover
       await userEvent.click(getByRole('button'));
 
-      // RangeCalendar should be rendered after async load (findByRole waits for element)
+      // RangeCalendar should be rendered after async load (find* waits for element)
       await findByRole('dialog');
-      await findByRole('grid');
+      const cells = await findAllByRole('gridcell');
+      expect(cells.length).toBeGreaterThan(0);
     });
 
     test('single mode calendar is fully functional after lazy load', async () => {

package/src/theme/Overlay.stories.ts

@@ -73,8 +73,8 @@ export const Surface: Story = {
 };
 
 /**
- * Hover overlay colors applied to interactive elements on mouse hover.
- * These create visual feedback without changing the element's background color.
+ * Hover overlay tokens used by `v-hover` (`subtle` / `default` / `strong`).
+ * Same three tiers as interactive overlay layers; use these utilities when you need a solid swatch.
  */
 export const Hover: Story = {
   render: () => ({
@@ -90,31 +90,31 @@ export const Hover: Story = {
         
         <div class="mb-6">
           <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">hover</h2>
-          <p class="text-sm text-content-on-surface-muted">Overlay colors for hover states on interactive elements. Click class name to copy.</p>
+          <p class="text-sm text-content-on-surface-muted">Overlay hover tiers (<code class="text-xs">subtle</code>, <code class="text-xs">default</code>, <code class="text-xs">strong</code>). Matches <code class="text-xs">v-hover</code>. Click class name to copy.</p>
         </div>
         
         <div class="flex flex-wrap gap-6">
           <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-overlay-hover-primary-button-hover border border-border-surface-default"></div>
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-subtle border border-border-surface-default"></div>
             <div class="text-center">
-              <span class="text-xs text-content-on-surface-primary block font-medium">primary-button-hover</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-primary-button-hover', this)">bg-overlay-hover-primary-button-hover</code>
+              <span class="text-xs text-content-on-surface-primary block font-medium">subtle</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-subtle', this)">bg-overlay-hover-subtle</code>
             </div>
           </div>
           
           <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-overlay-hover-secondary-button-hover border border-border-surface-default"></div>
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-default border border-border-surface-default"></div>
             <div class="text-center">
-              <span class="text-xs text-content-on-surface-primary block font-medium">secondary-button-hover</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-secondary-button-hover', this)">bg-overlay-hover-secondary-button-hover</code>
+              <span class="text-xs text-content-on-surface-primary block font-medium">default</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-default', this)">bg-overlay-hover-default</code>
             </div>
           </div>
           
           <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-overlay-hover-default-hover border border-border-surface-default"></div>
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-strong border border-border-surface-default"></div>
             <div class="text-center">
-              <span class="text-xs text-content-on-surface-primary block font-medium">default-hover</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-default-hover', this)">bg-overlay-hover-default-hover</code>
+              <span class="text-xs text-content-on-surface-primary block font-medium">strong</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-strong', this)">bg-overlay-hover-strong</code>
             </div>
           </div>
         </div>