@dryui/ui 3.0.0 → 4.0.0

package/dist/float-button/float-button-root.svelte

@@ -14,20 +14,60 @@
 		children,
 		class: className,
 		position = 'bottom-right',
+		id,
 		...rest
 	}: Props = $props();
 
+	const generatedId = `dry-fab-${Math.random().toString(36).slice(2, 10)}`;
+	const menuId = $derived(id ?? generatedId);
+
+	let rootEl = $state<HTMLDivElement>();
+
 	setFloatButtonCtx({
 		get open() {
 			return open;
 		},
+		get menuId() {
+			return menuId;
+		},
 		toggle() {
 			open = !open;
+		},
+		close() {
+			open = false;
 		}
 	});
+
+	function focusFirstAction() {
+		rootEl
+			?.querySelector<HTMLElement>('[data-float-button-action]:not([aria-hidden="true"])')
+			?.focus();
+	}
+
+	function focusTrigger() {
+		rootEl?.querySelector<HTMLElement>('[data-float-button-trigger]')?.focus();
+	}
+
+	$effect(() => {
+		if (!open || !rootEl) return;
+		const handle = requestAnimationFrame(focusFirstAction);
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key !== 'Escape') return;
+			e.preventDefault();
+			open = false;
+			requestAnimationFrame(focusTrigger);
+		};
+		window.addEventListener('keydown', onKey);
+		return () => {
+			cancelAnimationFrame(handle);
+			window.removeEventListener('keydown', onKey);
+		};
+	});
 </script>
 
 <div
+	bind:this={rootEl}
+	id={menuId}
 	data-float-button
 	data-position={position}
 	data-state={open ? 'open' : 'closed'}
@@ -39,25 +79,24 @@
 
 <style>
 	[data-float-button] {
-		--dry-fab-offset: var(--dry-space-6);
-		--dry-fab-gap: var(--dry-space-3);
-		--dry-fab-position: fixed;
-		--dry-fab-z-index: var(--dry-layer-overlay);
-
-		position: var(--dry-fab-position);
-		z-index: var(--dry-fab-z-index);
+		position: var(--dry-fab-position, fixed);
+		z-index: var(--dry-fab-z-index, var(--dry-layer-overlay));
+		/* Grid stack with the trigger pinned visually last via `order` (set on
+		   .trigger-slot) so it sits closest to the anchored corner; DOM order
+		   keeps the trigger first for keyboard focus order. */
 		display: grid;
-		justify-items: center;
-		gap: var(--dry-fab-gap);
+		gap: var(--dry-fab-gap, var(--dry-space-3));
 	}
 
 	[data-float-button][data-position='bottom-right'] {
-		bottom: var(--dry-fab-offset);
-		right: var(--dry-fab-offset);
+		bottom: var(--dry-fab-offset, var(--dry-space-6));
+		right: var(--dry-fab-offset, var(--dry-space-6));
+		justify-items: end;
 	}
 
 	[data-float-button][data-position='bottom-left'] {
-		bottom: var(--dry-fab-offset);
-		left: var(--dry-fab-offset);
+		bottom: var(--dry-fab-offset, var(--dry-space-6));
+		left: var(--dry-fab-offset, var(--dry-space-6));
+		justify-items: start;
 	}
 </style>

package/dist/float-button/float-button-trigger.svelte

@@ -16,15 +16,28 @@
 	const btnSize = $derived(size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon');
 </script>
 
-<Button
-	variant="solid"
-	size={btnSize}
-	type="button"
-	aria-expanded={ctx.open}
-	data-state={ctx.open ? 'open' : 'closed'}
-	data-float-button-trigger
-	onclick={() => ctx.toggle()}
-	{...rest}
->
-	{@render children()}
-</Button>
+<div class="trigger-slot">
+	<Button
+		variant="solid"
+		size={btnSize}
+		type="button"
+		aria-expanded={ctx.open}
+		aria-controls={ctx.menuId}
+		data-state={ctx.open ? 'open' : 'closed'}
+		data-float-button-trigger
+		onclick={() => ctx.toggle()}
+		{...rest}
+	>
+		{@render children()}
+	</Button>
+</div>
+
+<style>
+	.trigger-slot {
+		display: grid;
+		/* `order` lets the trigger sit visually last (closest to the anchored
+		   corner) while keeping it first in the DOM for keyboard focus order.
+		   Auto-flow places the actions in rows 1..n above it. */
+		order: 1;
+	}
+</style>

package/dist/format-bytes/format-bytes.svelte

@@ -51,11 +51,8 @@
 
 <style>
 	[data-format-bytes] {
-		--dry-format-bytes-color: var(--dry-color-text-weak);
-		--dry-format-bytes-font-size: var(--dry-type-small-size);
-
-		color: var(--dry-format-bytes-color);
-		font-size: var(--dry-format-bytes-font-size);
+		color: var(--dry-format-bytes-color, var(--dry-color-text-weak));
+		font-size: var(--dry-format-bytes-font-size, var(--dry-type-small-size));
 		font-family: var(--dry-font-sans);
 		font-variant-numeric: tabular-nums;
 		line-height: var(--dry-type-small-leading);

package/dist/format-date/format-date.svelte

@@ -71,12 +71,8 @@
 
 <style>
 	[data-format-date] {
-		/* Component tokens (Tier 3) */
-		--dry-format-date-color: var(--dry-color-text-weak);
-		--dry-format-date-font-size: var(--dry-type-small-size);
-
-		color: var(--dry-format-date-color);
-		font-size: var(--dry-format-date-font-size);
+		color: var(--dry-format-date-color, var(--dry-color-text-weak));
+		font-size: var(--dry-format-date-font-size, var(--dry-type-small-size));
 		font-family: var(--dry-font-sans);
 		font-variant-numeric: var(--dry-numeric-variant);
 		line-height: var(--dry-type-small-leading);

package/dist/format-number/format-number.svelte

@@ -50,12 +50,8 @@
 
 <style>
 	[data-format-number] {
-		/* Component tokens (Tier 3) */
-		--dry-format-number-color: var(--dry-color-text-weak);
-		--dry-format-number-font-size: var(--dry-type-small-size);
-
-		color: var(--dry-format-number-color);
-		font-size: var(--dry-format-number-font-size);
+		color: var(--dry-format-number-color, var(--dry-color-text-weak));
+		font-size: var(--dry-format-number-font-size, var(--dry-type-small-size));
 		font-family: var(--dry-font-sans);
 		font-variant-numeric: tabular-nums;
 		line-height: var(--dry-type-small-leading);

package/dist/gauge/gauge.svelte

@@ -97,10 +97,17 @@
 	[data-gauge] {
 		/* Component tokens (Tier 3) */
 		--dry-gauge-size: 8rem;
-		--dry-gauge-track-color: var(--dry-color-stroke-weak, #e2e8f0);
-		--dry-gauge-fill-color: var(--dry-color-fill-brand, #3b82f6);
+		--dry-gauge-track-color: var(--dry-color-stroke-weak);
+		--dry-gauge-fill-color: var(--dry-color-fill-brand);
 		--dry-gauge-stroke-width: 8;
 
+		/* Threshold zone palette. Consumers can override any slot to retheme
+		   the arc segmentation. Default order: brand, success, warning, error. */
+		--dry-gauge-zone-1: var(--dry-color-fill-brand);
+		--dry-gauge-zone-2: var(--dry-color-fill-success);
+		--dry-gauge-zone-3: var(--dry-color-fill-warning);
+		--dry-gauge-zone-4: var(--dry-color-fill-error);
+
 		aspect-ratio: 1;
 		height: var(--dry-gauge-size);
 	}

package/dist/glass/glass.svelte

@@ -11,7 +11,7 @@
 
 	let {
 		blur = 12,
-		tint = 'rgba(255,255,255,0.08)',
+		tint,
 		saturation = 120,
 		children,
 		class: className,
@@ -23,7 +23,8 @@
 		$effect(() => {
 			node.style.cssText = style || '';
 			node.style.setProperty('--dry-glass-blur', `${Math.max(0, blur)}px`);
-			node.style.setProperty('--dry-glass-tint', tint);
+			if (tint) node.style.setProperty('--dry-glass-tint', tint);
+			else node.style.removeProperty('--dry-glass-tint');
 			node.style.setProperty(
 				'--dry-glass-saturation',
 				`${Math.max(0, Math.min(200, saturation))}%`
@@ -42,7 +43,7 @@
 		backdrop-filter: blur(var(--dry-glass-blur, 12px)) saturate(var(--dry-glass-saturation, 120%));
 		-webkit-backdrop-filter: blur(var(--dry-glass-blur, 12px))
 			saturate(var(--dry-glass-saturation, 120%));
-		background: var(--dry-glass-tint, rgba(255, 255, 255, 0.08));
+		background: var(--dry-glass-tint, var(--dry-color-glass-tint, rgba(255, 255, 255, 0.08)));
 		border-radius: inherit;
 	}
 </style>

package/dist/glow/glow.svelte

@@ -41,11 +41,6 @@
 
 <style>
 	[data-glow] {
-		--dry-glow-color: var(--dry-color-fill-brand);
-		--dry-glow-intensity: 50;
-		--dry-glow-radius: 20px;
-		--dry-glow-blend: screen;
-
 		position: relative;
 		border-radius: inherit;
 	}

package/dist/god-rays/god-rays.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { observeOffscreenState } from '@dryui/primitives/internal/motion';
+	import { observeOffscreenState } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 		color?: string | undefined;
@@ -14,7 +14,7 @@
 	}
 
 	let {
-		color = 'rgba(255, 255, 255, 0.15)',
+		color,
 		rayCount = 12,
 		intensity = 60,
 		center = { x: 0.5, y: 0 },
@@ -38,8 +38,8 @@
 		const stops: string[] = [];
 		for (let i = 0; i < count; i++) {
 			const start = i * sliceDeg;
-			stops.push(`var(--dry-rays-color) ${start}deg`);
-			stops.push(`var(--dry-rays-color) ${start + rayDeg}deg`);
+			stops.push(`var(--dry-rays-color, rgba(255, 255, 255, 0.15)) ${start}deg`);
+			stops.push(`var(--dry-rays-color, rgba(255, 255, 255, 0.15)) ${start + rayDeg}deg`);
 			stops.push(`transparent ${start + rayDeg}deg`);
 			stops.push(`transparent ${start + sliceDeg}deg`);
 		}
@@ -49,7 +49,8 @@
 	function applyRootStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';
-			node.style.setProperty('--dry-rays-color', color);
+			if (color) node.style.setProperty('--dry-rays-color', color);
+			else node.style.removeProperty('--dry-rays-color');
 			node.style.setProperty('--dry-rays-cx', cx);
 			node.style.setProperty('--dry-rays-cy', cy);
 			node.style.setProperty('--dry-rays-intensity', clampedIntensity);
@@ -85,7 +86,6 @@
 
 <style>
 	[data-god-rays] {
-		--dry-rays-color: rgba(255, 255, 255, 0.15);
 		--dry-rays-cx: 50%;
 		--dry-rays-cy: 0%;
 		--dry-rays-intensity: 60;

package/dist/gradient-mesh/gradient-mesh.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
@@ -10,7 +9,7 @@
 		registerPropertyOnce,
 		supportsPropertyRegistration,
 		supportsPointerTracking
-	} from '@dryui/primitives/internal/motion';
+	} from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		colors?: readonly [string, string, string, string];
@@ -20,7 +19,7 @@
 	}
 
 	let {
-		colors = ['#7b68ee', '#38bdf8', '#f472b6', '#4ade80'] as const,
+		colors,
 		speed = 'normal',
 		interactive = false,
 		children: childSnippet,
@@ -29,7 +28,7 @@
 		...rest
 	}: Props = $props();
 
-	let element = $state<HTMLDivElement | null>(null);
+	let element = $state<HTMLDivElement>();
 	let prefersReducedMotion = $state(false);
 	let animated = $state(false);
 	let onScreen = $state(true);
@@ -41,15 +40,6 @@
 	let pendingPointerX = '50%';
 	let pendingPointerY = '50%';
 
-	function captureElement(node: HTMLDivElement) {
-		element = node;
-		return {
-			destroy() {
-				if (element === node) element = null;
-			}
-		};
-	}
-
 	const speedDuration = $derived.by(() => {
 		if (typeof speed === 'number' && Number.isFinite(speed) && speed > 0) {
 			return `${(12 / speed).toFixed(2)}s`;
@@ -99,7 +89,7 @@
 		pointerY = '50%';
 	}
 
-	onMount(() => {
+	$effect(() => {
 		registerPropertyOnce({
 			name: '--dry-mesh-color-1',
 			syntax: '<color>',
@@ -159,23 +149,25 @@
 		};
 	});
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-mesh-color-1', colors[0]);
-			node.style.setProperty('--dry-mesh-color-2', colors[1]);
-			node.style.setProperty('--dry-mesh-color-3', colors[2]);
-			node.style.setProperty('--dry-mesh-color-4', colors[3]);
-			node.style.setProperty('--dry-mesh-duration', speedDuration);
-			node.style.setProperty('--dry-mesh-pointer-x', pointerX);
-			node.style.setProperty('--dry-mesh-pointer-y', pointerY);
-		});
-	}
+	$effect(() => {
+		if (!element) return;
+		element.style.cssText = style || '';
+		if (colors) {
+			for (let i = 0; i < 4; i++) {
+				const value = colors[i];
+				const prop = `--dry-mesh-color-${i + 1}`;
+				if (value) element.style.setProperty(prop, value);
+				else element.style.removeProperty(prop);
+			}
+		}
+		element.style.setProperty('--dry-mesh-duration', speedDuration);
+		element.style.setProperty('--dry-mesh-pointer-x', pointerX);
+		element.style.setProperty('--dry-mesh-pointer-y', pointerY);
+	});
 </script>
 
 <div
-	{@attach captureElement}
-	{@attach applyStyles}
+	bind:this={element}
 	class={className}
 	data-gradient-mesh
 	data-animated={animated || undefined}
@@ -196,10 +188,6 @@
 <style>
 	[data-gradient-mesh] {
 		--dry-mesh-duration: 12s;
-		--dry-mesh-color-1: #7b68ee;
-		--dry-mesh-color-2: #38bdf8;
-		--dry-mesh-color-3: #f472b6;
-		--dry-mesh-color-4: #4ade80;
 		--dry-mesh-pointer-x: 50%;
 		--dry-mesh-pointer-y: 50%;
 
@@ -208,10 +196,22 @@
 		overflow: hidden;
 		border-radius: inherit;
 		background:
-			radial-gradient(ellipse 60% 50% at 20% 20%, var(--dry-mesh-color-1), transparent 70%),
-			radial-gradient(ellipse 50% 60% at 80% 20%, var(--dry-mesh-color-2), transparent 70%),
-			radial-gradient(ellipse 55% 55% at 70% 80%, var(--dry-mesh-color-3), transparent 70%),
-			radial-gradient(ellipse 50% 50% at 25% 75%, var(--dry-mesh-color-4), transparent 70%);
+			radial-gradient(
+				ellipse 60% 50% at 20% 20%,
+				var(--dry-mesh-color-1, #7b68ee),
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 50% 60% at 80% 20%,
+				var(--dry-mesh-color-2, #38bdf8),
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 55% 55% at 70% 80%,
+				var(--dry-mesh-color-3, #f472b6),
+				transparent 70%
+			),
+			radial-gradient(ellipse 50% 50% at 25% 75%, var(--dry-mesh-color-4, #4ade80), transparent 70%);
 	}
 
 	/* Static fallback without @property */
@@ -219,10 +219,10 @@
 		[data-gradient-mesh]:not([data-animated]) {
 			background: linear-gradient(
 				135deg,
-				var(--dry-mesh-color-1) 0%,
-				var(--dry-mesh-color-2) 33%,
-				var(--dry-mesh-color-3) 66%,
-				var(--dry-mesh-color-4) 100%
+				var(--dry-mesh-color-1, #7b68ee) 0%,
+				var(--dry-mesh-color-2, #38bdf8) 33%,
+				var(--dry-mesh-color-3, #f472b6) 66%,
+				var(--dry-mesh-color-4, #4ade80) 100%
 			);
 		}
 	}
@@ -239,12 +239,20 @@
 		background:
 			radial-gradient(
 				ellipse 60% 50% at var(--dry-mesh-pointer-x) var(--dry-mesh-pointer-y),
-				var(--dry-mesh-color-1),
+				var(--dry-mesh-color-1, #7b68ee),
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 50% 60% at 80% 20%,
+				var(--dry-mesh-color-2, #38bdf8),
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 55% 55% at 70% 80%,
+				var(--dry-mesh-color-3, #f472b6),
 				transparent 70%
 			),
-			radial-gradient(ellipse 50% 60% at 80% 20%, var(--dry-mesh-color-2), transparent 70%),
-			radial-gradient(ellipse 55% 55% at 70% 80%, var(--dry-mesh-color-3), transparent 70%),
-			radial-gradient(ellipse 50% 50% at 25% 75%, var(--dry-mesh-color-4), transparent 70%);
+			radial-gradient(ellipse 50% 50% at 25% 75%, var(--dry-mesh-color-4, #4ade80), transparent 70%);
 	}
 
 	[data-gradient-mesh][data-reduced-motion] {

package/dist/halftone/halftone.svelte

@@ -39,24 +39,19 @@
 	const normalizedOpacity = $derived(`${Math.max(0, Math.min(1, opacity))}`);
 	const angleValue = $derived(`${angle}deg`);
 
-	function setHalftoneVars(node: HTMLDivElement) {
-		$effect(() => {
-			node.style.setProperty('--dry-halftone-pattern-size', patternSize);
-			node.style.setProperty('--dry-halftone-dot-radius', dotRadius);
-			node.style.setProperty('--dry-halftone-color', color);
-			node.style.setProperty('--dry-halftone-opacity', normalizedOpacity);
-			node.style.setProperty('--dry-halftone-angle', angleValue);
-		});
-	}
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-halftone-pattern-size', patternSize);
+		el.style.setProperty('--dry-halftone-dot-radius', dotRadius);
+		el.style.setProperty('--dry-halftone-color', color);
+		el.style.setProperty('--dry-halftone-opacity', normalizedOpacity);
+		el.style.setProperty('--dry-halftone-angle', angleValue);
+	});
 </script>
 
-<div
-	{@attach setHalftoneVars}
-	class={className}
-	data-halftone
-	data-dot-size={dotSizeName}
-	{...rest}
->
+<div bind:this={el} class={className} data-halftone data-dot-size={dotSizeName} {...rest}>
 	{#if children}
 		<div data-halftone-content>
 			{@render children()}
@@ -66,12 +61,6 @@
 
 <style>
 	[data-halftone] {
-		--dry-halftone-pattern-size: 12;
-		--dry-halftone-dot-radius: 1.8;
-		--dry-halftone-color: currentColor;
-		--dry-halftone-opacity: 0.3;
-		--dry-halftone-angle: 45deg;
-
 		position: relative;
 		isolation: isolate;
 		border-radius: inherit;
@@ -83,17 +72,17 @@
 		position: absolute;
 		inset: -10%;
 		pointer-events: none;
-		opacity: var(--dry-halftone-opacity);
+		opacity: var(--dry-halftone-opacity, 0.3);
 		mix-blend-mode: multiply;
-		transform: rotate(var(--dry-halftone-angle));
+		transform: rotate(var(--dry-halftone-angle, 45deg));
 		transform-origin: center;
 		background-image: radial-gradient(
 			circle at center,
-			var(--dry-halftone-color) 0 calc(var(--dry-halftone-dot-radius) * 1px),
-			transparent calc((var(--dry-halftone-dot-radius) * 1px) + 0.8px)
+			var(--dry-halftone-color, currentColor) 0 calc(var(--dry-halftone-dot-radius, 1.8) * 1px),
+			transparent calc((var(--dry-halftone-dot-radius, 1.8) * 1px) + 0.8px)
 		);
-		background-size: calc(var(--dry-halftone-pattern-size) * 1px)
-			calc(var(--dry-halftone-pattern-size) * 1px);
+		background-size: calc(var(--dry-halftone-pattern-size, 12) * 1px)
+			calc(var(--dry-halftone-pattern-size, 12) * 1px);
 		background-repeat: repeat;
 	}
 

package/dist/heading/heading.svelte

@@ -27,32 +27,26 @@
 </script>
 
 {#if level === 1}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h1 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h1>
 {:else if level === 2}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h2 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h2>
 {:else if level === 3}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h3 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h3>
 {:else if level === 4}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h4 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h4>
 {:else if level === 5}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h5 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h5>
 {:else}
-	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h6 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h6>

package/dist/hover-card/hover-card-content.svelte

@@ -22,13 +22,15 @@
 
 	const ctx = getHoverCardCtx();
 
+	let contentEl = $state<HTMLDivElement>();
+
 	const overlay = createAnchoredOverlayContent({
 		ctx,
+		contentEl: () => contentEl ?? null,
 		placement: () => placement,
 		offset: () => offset,
-		style: () => style,
-		onContentChange: (contentEl) => {
-			ctx.contentEl = contentEl;
+		onContentChange: (next) => {
+			ctx.contentEl = next;
 		}
 	});
 
@@ -63,8 +65,8 @@
 </script>
 
 <div
-	{@attach overlay.bindContent}
-	{@attach overlay.position}
+	bind:this={contentEl}
+	use:overlay.applyPosition={style}
 	id={ctx.contentId}
 	popover="manual"
 	role="dialog"
@@ -111,6 +113,7 @@
 		border-radius: var(--dry-hover-card-radius);
 		box-shadow: var(--dry-hover-card-shadow);
 		padding: var(--dry-hover-card-padding);
+		font-family: var(--dry-font-sans);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
 		z-index: var(--dry-layer-overlay);

package/dist/hover-card/hover-card.meta.js

@@ -1,7 +1,7 @@
 /** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
 export default {
     name: 'HoverCard',
-    description: 'Card popup on hover with delay-based open/close',
+    description: 'Surface popup on hover with delay-based open/close',
     category: 'overlay',
-    tags: ['hover', 'card', 'preview', 'popup']
+    tags: ['hover', 'preview', 'popup']
 };