@aleph-alpha/ui-library 1.18.0 → 1.19.0

package/config.d.ts

@@ -176,6 +176,13 @@ export declare const presetUiLibraryThemeFromTokens: (options?: UiLibraryPresetO
  */
 export declare const presetUiLibraryUtils: () => Preset;
 
+/** Overlay tier keys for the `v-hover` directive (injected hover overlay span). */
+export declare const vHoverOverlayVariants: Readonly<{
+  subtle: 'subtle';
+  default: 'default';
+  strong: 'strong';
+}>;
+
 /**
  * Typography shortcut tuple: [className, cssProperties]
  */

package/config.js

@@ -336,6 +336,11 @@ const buildShadcnVarsFromModeSet = (modeSetName) => {
   // Hover overlays
   const hoverDefault = resolve('overlay.hover.default-hover');
 
+  // Overlay hover surfaces (3-mode overlay.hover → utilities: bg-overlay-hover-*)
+  const overlayHoverDefault = resolve('overlay.hover.default');
+  const overlayHoverSubtle = resolve('overlay.hover.subtle');
+  const overlayHoverStrong = resolve('overlay.hover.strong');
+
   // Modal overlay
   const modalOverlay = resolve('overlay.surface.modal-overlay');
 
@@ -383,6 +388,9 @@ const buildShadcnVarsFromModeSet = (modeSetName) => {
     'ring-offset': background,
     link,
     'hover-default': hoverDefault,
+    'overlay-hover-default': overlayHoverDefault,
+    'overlay-hover-subtle': overlayHoverSubtle,
+    'overlay-hover-strong': overlayHoverStrong,
     'modal-overlay': modalOverlay,
     inverse,
     'inverse-foreground': inverseForeground,
@@ -537,6 +545,9 @@ export const presetUiLibraryThemeFromTokens = (options = {}) => {
     modal: 'oklch(var(--modal))',
     link: 'oklch(var(--link))',
     'hover-default': 'oklch(var(--hover-default))',
+    'overlay-hover-default': 'oklch(var(--overlay-hover-default))',
+    'overlay-hover-subtle': 'oklch(var(--overlay-hover-subtle))',
+    'overlay-hover-strong': 'oklch(var(--overlay-hover-strong))',
     'modal-overlay': 'oklch(var(--modal-overlay))',
     inverse: 'oklch(var(--inverse))',
     'inverse-foreground': 'oklch(var(--inverse-foreground))',
@@ -586,6 +597,93 @@ export const presetUiLibraryThemeFromTokens = (options = {}) => {
   };
 };
 
+/** Overlay tier names for the `v-hover` directive (token-backed hover layer). */
+export const vHoverOverlayVariants = Object.freeze({
+  subtle: 'subtle',
+  default: 'default',
+  strong: 'strong',
+});
+
+const vHoverOverlayCSS = `
+.v-hover-root {
+  position: relative;
+  overflow: hidden;
+}
+.v-hover-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  mix-blend-mode: overlay;
+  transition: opacity 0.2s ease;
+}
+.v-hover-root > :not(.v-hover-overlay) {
+  position: relative;
+  z-index: 1;
+}
+.v-hover-overlay[data-v-hover-variant="subtle"] {
+  background: linear-gradient(
+    0deg,
+    oklch(var(--overlay-hover-subtle, 0% 0 0 / 20%)) 0%,
+    oklch(var(--overlay-hover-subtle, 0% 0 0 / 20%)) 100%
+  );
+}
+.v-hover-overlay[data-v-hover-variant="default"] {
+  background: linear-gradient(
+    0deg,
+    oklch(var(--overlay-hover-default, 0% 0 0 / 50%)) 0%,
+    oklch(var(--overlay-hover-default, 0% 0 0 / 50%)) 100%
+  );
+}
+.v-hover-overlay[data-v-hover-variant="strong"] {
+  background: linear-gradient(
+    0deg,
+    oklch(var(--overlay-hover-strong, 0% 0 0 / 70%)) 0%,
+    oklch(var(--overlay-hover-strong, 0% 0 0 / 70%)) 100%
+  );
+}
+@media (hover: hover) {
+  .v-hover-root:hover .v-hover-overlay {
+    opacity: 1;
+  }
+}
+.v-hover-root:focus-visible .v-hover-overlay {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .v-hover-overlay {
+    transition: none;
+  }
+}
+/* Link variant: mix subtle overlay into text color (not background overlay). */
+.overlay-link-hover-subtle {
+  transition: color 0.2s ease;
+}
+@media (hover: hover) {
+  .overlay-link-hover-subtle:hover {
+    color: color-mix(
+      in oklch,
+      oklch(var(--content-on-surface-link, var(--link))) 88%,
+      oklch(var(--overlay-hover-subtle, 0% 0 0 / 20%)) 12%
+    );
+  }
+}
+.overlay-link-hover-subtle:focus-visible {
+  color: color-mix(
+    in oklch,
+    oklch(var(--content-on-surface-link, var(--link))) 88%,
+    oklch(var(--overlay-hover-subtle, 0% 0 0 / 20%)) 12%
+  );
+}
+@media (prefers-reduced-motion: reduce) {
+  .overlay-link-hover-subtle {
+    transition: none;
+  }
+}
+`.trim();
+
 /**
  * UnoCSS preset with utility rules required by the UI library's components.
  * Adds Tailwind v4 CSS variable syntax (w-(--var), h-(--var), etc.)
@@ -594,6 +692,7 @@ export const presetUiLibraryThemeFromTokens = (options = {}) => {
 export const presetUiLibraryUtils = () =>
   definePreset(() => ({
     name: '@aleph-alpha/ui-library-utils',
+    preflights: [{ getCSS: () => vHoverOverlayCSS }],
     rules: [
       [/^w-\(--(.+)\)$/, ([, name]) => ({ width: `var(--${name})` })],
       [/^max-w-\(--(.+)\)$/, ([, name]) => ({ 'max-width': `var(--${name})` })],
@@ -643,6 +742,7 @@ export const defineUiLibraryConfig = (options = {}) => {
 
   return defineConfig({
     ...getUiLibraryContentConfig(),
+    safelist: ['overlay-link-hover-subtle'],
     presets: [
       presetWind(),
       presetAnimations(),

package/dist/system/index.d.ts

@@ -24,6 +24,7 @@ import { getLocalTimeZone } from '@internationalized/date';
 import { HTMLAttributes } from 'vue';
 import { ImgHTMLAttributes } from 'vue';
 import { Matcher } from 'reka-ui/date';
+import { ObjectDirective } from 'vue';
 import { PointerDownOutsideEvent } from 'reka-ui';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
@@ -4506,6 +4507,7 @@ export declare const UiDatePicker: DefineComponent<__VLS_PublicProps_20, {}, {},
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
 disabled: boolean;
+mode: UiDatePickerMode;
 pagedNavigation: boolean;
 preventDeselect: boolean;
 weekStartsOn: UiDatePickerWeekStartsOn;
@@ -4514,7 +4516,6 @@ fixedWeeks: boolean;
 locale: string;
 numberOfMonths: number;
 readonly: boolean;
-mode: UiDatePickerMode;
 dateFormat: Intl.DateTimeFormatOptions;
 closeOnSelect: boolean;
 rangeSeparator: string;
@@ -7582,4 +7583,12 @@ export declare const useSidebar: <T extends {
     toggleSidebar: () => void;
 };
 
+export declare const vHover: ObjectDirective<HTMLElement, VHoverBinding>;
+
+declare type VHoverBinding = VHoverVariant | false | null | undefined | {
+    variant: VHoverVariant;
+};
+
+export declare type VHoverVariant = 'subtle' | 'default' | 'strong';
+
 export { }