@hyvor/design 2.1.7 → 2.1.8-beta.1

package/dist/cloud/HyvorBar/BarSupport.svelte

@@ -111,7 +111,7 @@
 						{/snippet}
 					</ActionListItem>
 				</a>
-				<a href={SOCIAL_LINKS.blueksy} target="_blank">
+				<a href={SOCIAL_LINKS.bluesky} target="_blank">
 					<ActionListItem>
 						Bluesky
 						{#snippet start()}

package/dist/cloud/HyvorBar/Organization/BarOrganization.svelte

@@ -28,7 +28,7 @@
 	position="bottom"
 	text="Switch Organization"
 	disabled={disableTooltip}
-	wrapperProps={{ style: 'height: 100%' }}
+	style="height: 100%"
 >
 	<button class="wrap" onclick={() => (show = true)} bind:this={trigger}>
 		<div class="data">

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,43 +1,22 @@
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
-	import { tick, onMount } from 'svelte';
+	import { tick, onMount, onDestroy } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props {
-		text?: string;
-		position?: 'top' | 'bottom' | 'left' | 'right';
-		color?: 'black' | 'accent' | 'soft' | 'danger';
-		show?: boolean;
-		maxWidth?: number;
-		disabled?: boolean;
-		delay?: number;
-		children?: Snippet;
-		tooltip?: Snippet;
-		wrapperProps?: HTMLAttributes<HTMLDivElement>;
-	}
 
-	let {
-		text = '',
-		position = 'top',
-		color = 'black',
-		show = $bindable(false),
-		maxWidth = 300,
-		disabled = false,
-		delay = 100,
-		children,
-		tooltip,
-		wrapperProps = {}
-	}: Props = $props();
-
-	let wrap: HTMLDivElement | undefined = $state();
-	let tooltipEl: HTMLDivElement | undefined = $state();
-	let showTimeout: ReturnType<typeof setTimeout>;
+	export let text: string = '';
+	export let position: 'top' | 'bottom' | 'left' | 'right' = 'top';
+	export let color: 'black' | 'accent' | 'soft' | 'danger' = 'black';
+	export let show = false;
+	export let maxWidth: number = 300;
+	export let disabled = false;
+
+	let wrap: HTMLDivElement;
+	let tooltip: HTMLDivElement;
 
 	function positionTooltip() {
-		if (wrap && tooltipEl && show) {
+		if (wrap && tooltip && show) {
 			const wrapRect = wrap.getBoundingClientRect();
-			const tooltipRect = tooltipEl.getBoundingClientRect();
+			const tooltipRect = tooltip.getBoundingClientRect();
 
 			let top, left;
 
@@ -57,41 +36,36 @@
 				left = position === 'left' ? leftVal : wrapRect.right + 10;
 			}
 
-			tooltipEl.style.top = top + 'px';
-			tooltipEl.style.left = left + 'px';
+			tooltip.style.top = top + 'px';
+			tooltip.style.left = left + 'px';
 		}
 	}
 
-	function handleMouseEnter() {
+	async function handleMouseEnter() {
 		if (!disabled) {
-			clearTimeout(showTimeout);
-			showTimeout = setTimeout(async () => {
-				show = true;
-				await tick();
-				positionTooltip();
-			}, delay);
+			show = true;
+			await tick();
+			positionTooltip();
 		}
 	}
 
 	function handleMouseLeave() {
-		clearTimeout(showTimeout);
 		show = false;
 	}
 
-	$effect(() => {
+	$: {
 		if (text) {
 			tick().then(() => {
 				positionTooltip();
 			});
 		}
-	});
+	}
 
 	onMount(() => {
 		positionTooltip();
 		document.addEventListener('scroll', positionTooltip);
 
 		return () => {
-			clearTimeout(showTimeout);
 			document.removeEventListener('scroll', positionTooltip);
 		};
 	});
@@ -99,23 +73,23 @@
 
 <div
 	class="tooltip-wrap {color}"
-	onmouseenter={handleMouseEnter}
-	onmouseleave={handleMouseLeave}
+	on:mouseenter={handleMouseEnter}
+	on:mouseleave={handleMouseLeave}
 	role="tooltip"
 	bind:this={wrap}
-	{...wrapperProps}
+	{...$$restProps}
 >
-	{@render children?.()}
+	<slot />
 
 	{#if !disabled && show}
 		<div
 			class="tooltip {position}"
 			style:max-width={maxWidth + 'px'}
-			bind:this={tooltipEl}
+			bind:this={tooltip}
 			transition:fade={{ duration: 100 }}
 		>
-			{#if tooltip}
-				{@render tooltip()}
+			{#if $$slots.tooltip}
+				<slot name="tooltip" />
 			{:else}
 				{text}
 			{/if}

package/dist/components/Tooltip/Tooltip.svelte.d.ts

@@ -1,17 +1,37 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props {
-    text?: string;
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    color?: 'black' | 'accent' | 'soft' | 'danger';
-    show?: boolean;
-    maxWidth?: number;
-    disabled?: boolean;
-    delay?: number;
-    children?: Snippet;
-    tooltip?: Snippet;
-    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
 }
-declare const Tooltip: import("svelte").Component<Props, {}, "show">;
-type Tooltip = ReturnType<typeof Tooltip>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    text?: string | undefined;
+    position?: "top" | "bottom" | "left" | "right" | undefined;
+    color?: "black" | "accent" | "soft" | "danger" | undefined;
+    show?: boolean | undefined;
+    maxWidth?: number | undefined;
+    disabled?: boolean | undefined;
+}, {
+    default: {};
+    tooltip: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    tooltip: {};
+}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
 export default Tooltip;

package/dist/marketing/Footer/Footer.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import Container from '../Container/Container.svelte';
+	import IconEnvelope from '@hyvor/icons/IconEnvelope';
 	import IconCopy from '@hyvor/icons/IconCopy';
 	import IconDiscord from '@hyvor/icons/IconDiscord';
-	import IconEnvelope from '@hyvor/icons/IconEnvelope';
 	import IconGithub from '@hyvor/icons/IconGithub';
 	import IconLinkedin from '@hyvor/icons/IconLinkedin';
 	import IconTwitterX from '@hyvor/icons/IconTwitterX';
 	import IconYoutube from '@hyvor/icons/IconYoutube';
-	import Link from '../../components/Link/Link.svelte';
+	import IconBluesky from '@hyvor/icons/IconBluesky';
+	import IconLockFill from '@hyvor/icons/IconLockFill';
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import Tooltip from '../../components/Tooltip/Tooltip.svelte';
 	import LanguageToggle from '../../components/Internationalization/LanguageToggle.svelte';
-	import IconBluesky from '@hyvor/icons/IconBluesky';
 	import { SOCIAL_LINKS, type Socials } from '../social.js';
 	import Affiliate from '../Affiliate/Affiliate.svelte';
 	import RecordVisit from './RecordVisit.svelte';
@@ -19,104 +20,207 @@
 	const year = new Date().getFullYear();
 
 	interface Props {
+		name?: string;
+		subname?: string;
+		product?: string;
+		instance?: string;
+		logo?: string;
+		background?: string;
+		backgroundDark?: string;
+		card?: boolean;
 		email?: string | null;
 		social?: Partial<Socials>;
-		center?: import('svelte').Snippet;
+		languageToggle?: boolean;
+		gdpr?: boolean;
 		affiliate?: boolean;
 		recordVisit?: boolean;
+		center?: Snippet;
 		max?: boolean;
 	}
 
 	let {
+		name = 'HYVOR',
+		subname,
+		product,
+		instance = 'https://hyvor.com',
+		logo,
+		background,
+		backgroundDark,
+		card = false,
 		email = null,
-		social = $bindable({} as Record<string, string | null>),
-		center,
+		social = {},
+		languageToggle = true,
+		gdpr = true,
 		affiliate = true,
 		recordVisit = true,
+		center,
 		max = false
 	}: Props = $props();
 
-	social = {
-		...SOCIAL_LINKS,
-		...social
-	};
+	// same "explicit logo, else derive from product" pattern as Header — pass
+	// `product` (e.g. "blogs") for the mascot to follow that product's logo
+	// automatically, or `logo` to override it directly. Neither given means
+	// no mascot.
+	const mascotLogo = $derived(
+		logo || (product ? `${instance}/api/public/logo/${product}.svg` : undefined)
+	);
 
-	let emailCopied = $state(false);
+	const socialLinks = $derived({ ...SOCIAL_LINKS, ...social });
 
-	function handleCopy() {
-		navigator.clipboard.writeText(email!);
+	const SOCIAL_PLATFORMS = [
+		{ key: 'x', icon: IconTwitterX, label: 'X (Twitter)' },
+		{ key: 'github', icon: IconGithub, label: 'GitHub' },
+		{ key: 'discord', icon: IconDiscord, label: 'Discord' },
+		{ key: 'linkedin', icon: IconLinkedin, label: 'LinkedIn' },
+		{ key: 'youtube', icon: IconYoutube, label: 'YouTube' },
+		{ key: 'bluesky', icon: IconBluesky, label: 'Bluesky' }
+	] as const satisfies { key: keyof Socials; icon: unknown; label: string }[];
+
+	let emailCopied = $state(false);
+	function handleCopyEmail() {
+		if (!email) return;
+		navigator.clipboard.writeText(email);
 		emailCopied = true;
-		setTimeout(() => {
-			emailCopied = false;
-		}, 1000);
+		setTimeout(() => (emailCopied = false), 1000);
+	}
+
+	// the floating mascot (only shown when a `logo` is given) tilts/fades in
+	// once it's scrolled into view, instead of just appearing on page load
+	let mascotInView = $state(false);
+	function onView(node: HTMLElement, callback: () => void) {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting) {
+					setTimeout(callback, 400);
+					observer.disconnect();
+				}
+			},
+			{ threshold: 0.3 }
+		);
+		observer.observe(node);
+		return {
+			destroy() {
+				observer.disconnect();
+			}
+		};
 	}
+
+	// a single 5-pointed star (outer/inner vertices alternating), centered on
+	// its own origin — reused via `transform="translate(...)"` per position
+	// below, rather than a plain dot, for the EU ring on the GDPR badge
+	function starPath(outerR: number, innerR: number) {
+		const points: string[] = [];
+		for (let i = 0; i < 10; i++) {
+			const angle = -Math.PI / 2 + (i * Math.PI) / 5;
+			const r = i % 2 === 0 ? outerR : innerR;
+			points.push(`${(r * Math.cos(angle)).toFixed(2)},${(r * Math.sin(angle)).toFixed(2)}`);
+		}
+		return `M${points.join('L')}Z`;
+	}
+	const gdprStarPath = starPath(1.7, 0.68);
+
+	// positions for the 12-star EU ring on the small GDPR badge
+	const gdprStars = Array.from({ length: 12 }, (_, i) => {
+		const angle = (i * 30 * Math.PI) / 180;
+		return {
+			x: 16 + 12 * Math.cos(angle),
+			y: 16 + 12 * Math.sin(angle)
+		};
+	});
 </script>
 
-<footer>
-	<Container {max}>
-		<div class="footer-top">
-			<div class="footer-top-left">
-				{#if email}
-					<div class="email-wrap">
-						<Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
-							{#snippet start()}
-								<IconEnvelope />
-							{/snippet}
-							{email}
-						</Link>
-						<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
-							<IconButton
-								size="small"
-								variant="invisible"
-								on:click={handleCopy}
-								on:mouseleave={() => (emailCopied = false)}
-							>
-								<IconCopy size={12} />
-							</IconButton>
-						</Tooltip>
-					</div>
-				{/if}
+<div class="footer-outer">
+	{#if mascotLogo}
+		<div class="mascot-wrap" use:onView={() => (mascotInView = true)}>
+			<img
+				src={mascotLogo}
+				alt="{name} Logo"
+				width="100"
+				height="100"
+				class:in-view={mascotInView}
+			/>
+		</div>
+	{/if}
 
-				<div class="social-media">
-					{#if social.github}
-						<a href={social.github} target="_blank" rel="nofollow"><IconGithub /></a>
-					{/if}
-					{#if social.discord}
-						<a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
-					{/if}
-					{#if social.blueksy}
-						<a href={social.blueksy} target="_blank" rel="nofollow"><IconBluesky /></a>
-					{/if}
-					{#if social.x}
-						<a href={social.x} target="_blank" rel="nofollow"><IconTwitterX /></a>
+	<footer class:card style:--footer-bg={background} style:--footer-bg-dark={backgroundDark}>
+		<Container {max}>
+			<div class="top-row">
+				<div class="brand">
+					<span>{name}</span>
+					{#if subname}
+						<div class="subname">{subname}</div>
 					{/if}
-					{#if social.youtube}
-						<a href={social.youtube} target="_blank" rel="nofollow"><IconYoutube /></a>
+				</div>
+
+				<div class="top-row-right">
+					{#if email}
+						<div class="email-wrap">
+							<a class="email" href="mailto:{email}">
+								<IconEnvelope size={14} />
+								{email}
+							</a>
+							<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
+								<IconButton
+									size="small"
+									variant="invisible"
+									onclick={handleCopyEmail}
+									onmouseleave={() => (emailCopied = false)}
+								>
+									<IconCopy size={12} />
+								</IconButton>
+							</Tooltip>
+						</div>
 					{/if}
-					{#if social.linkedin}
-						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
+
+					<div class="socials">
+						{#each SOCIAL_PLATFORMS as platform (platform.key)}
+							{@const href = socialLinks[platform.key]}
+							{#if href}
+								<a {href} target="_blank" rel="nofollow" aria-label={platform.label}>
+									<platform.icon size={16} />
+								</a>
+							{/if}
+						{/each}
+					</div>
+
+					{#if languageToggle}
+						<span class="language-toggle-wrap">
+							<LanguageToggle align="end" position="top" staticPage />
+						</span>
 					{/if}
 				</div>
 			</div>
 
-			<div class="footer-top-right">
-				<span class="language-toggle-wrap">
-					<LanguageToggle align="end" position="top" staticPage />
-				</span>
+			<div class="footer-center">
+				{@render center?.()}
 			</div>
-		</div>
 
-		<div class="footer-center">
-			{@render center?.()}
-		</div>
+			<div class="bottom-bar">
+				<div>HYVOR &copy; {year}</div>
+
+				{#if gdpr}
+					<div class="bottom-center">
+						<a class="gdpr-chip" href="https://hyvor.com/compliance" target="_blank">
+							<span class="gdpr-chip-icon">
+								<svg class="ring" viewBox="0 0 32 32" aria-hidden="true">
+									<circle cx="16" cy="16" r="16" fill="#173a8a" />
+									{#each gdprStars as s}
+										<path d={gdprStarPath} fill="#ffcd3c" transform="translate({s.x}, {s.y})" />
+									{/each}
+								</svg>
+								<span class="lock"><IconLockFill size={10} /></span>
+							</span>
+							<span class="gdpr-chip-text">GDPR Compliant</span>
+						</a>
+					</div>
+				{/if}
 
-		<div class="footer-bottom">
-			<div class="footer-bottom-left">
-				HYVOR © {year}
+				<div class="bottom-right">
+					<div class="france">From France <span class="flag">🇫🇷</span></div>
+				</div>
 			</div>
-			<div class="footer-bottom-right">From France 🇫🇷</div>
-		</div>
-	</Container>
+		</Container>
+	</footer>
 
 	{#if affiliate}
 		<Affiliate />
@@ -125,57 +229,252 @@
 	{#if recordVisit}
 		<RecordVisit />
 	{/if}
-</footer>
+</div>
 
 <style>
-	footer {
-		border-top: 1px solid var(--border);
+	.footer-outer {
+		position: relative;
+		margin-top: 100px;
 	}
 
-	.footer-top {
-		padding-top: 60px;
+	.mascot-wrap {
+		position: absolute;
+		z-index: 10;
 		display: flex;
-		align-items: flex-start;
+		justify-content: center;
+		pointer-events: none;
+		left: 0;
+		bottom: 100%;
+		transform: translate(-35%, 45%) rotate(20deg);
+	}
+
+	.mascot-wrap img {
+		opacity: 0;
+	}
+
+	.mascot-wrap img.in-view {
+		animation: mascot-tilt-in 0.8s ease forwards;
+	}
+
+	@keyframes mascot-tilt-in {
+		0% {
+			opacity: 0;
+			transform: rotate(-14deg) scale(0.9) translateY(16px);
+		}
+		55% {
+			opacity: 1;
+			transform: rotate(10deg) scale(1.06) translateY(-4px);
+		}
+		100% {
+			opacity: 1;
+			transform: rotate(0deg) scale(1) translateY(0);
+		}
 	}
-	.footer-center {
+
+	@media (prefers-reduced-motion: reduce) {
+		.mascot-wrap img {
+			opacity: 1;
+		}
+		.mascot-wrap img.in-view {
+			animation: none;
+		}
+	}
+
+	footer {
+		--footer-text: var(--text);
+		--footer-text-strong: var(--text);
+		--footer-muted: var(--text-light);
+		--footer-border: var(--border);
+		--footer-hover: var(--accent);
+
+		position: relative;
+		z-index: 1;
+		background: var(--footer-bg, transparent);
+		color: var(--footer-text);
 		padding-top: 50px;
 	}
-	.footer-top-left {
-		flex: 1;
+
+	/*
+		`backgroundDark` only when needed for dark mode - not complusory
+	*/
+	:global(:root.dark) footer {
+		background: var(--footer-bg-dark, var(--footer-bg, transparent));
+	}
+
+	footer.card {
+		--footer-text: rgba(255, 255, 255, 0.75);
+		--footer-text-strong: #fff;
+		--footer-muted: rgba(255, 255, 255, 0.45);
+		--footer-border: rgba(255, 255, 255, 0.08);
+		--footer-hover: #fff;
+	}
+
+	.top-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 20px;
+		padding-bottom: 40px;
+		border-bottom: 1px solid var(--footer-border);
+	}
+
+	.brand {
+		font-size: 16px;
+		font-weight: 700;
+		color: var(--footer-text-strong);
+	}
+
+	.subname {
+		font-size: 13px;
+		font-weight: 400;
+		color: var(--footer-muted);
 	}
-	.footer-top-right {
+
+	.top-row-right {
 		display: flex;
+		align-items: center;
+		gap: 24px;
+		flex-wrap: wrap;
 	}
+
 	.email-wrap {
 		display: inline-flex;
 		align-items: center;
-		gap: 4px;
-		margin-bottom: 15px;
+		gap: 2px;
 	}
-	.social-media a {
-		display: inline-block;
-		padding: 3px;
-		margin-right: 8px;
-		color: var(--text-light);
+
+	.email {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 13px;
+		color: var(--footer-text);
 	}
-	.social-media a:first-child {
-		padding-left: 0;
+
+	.email:hover {
+		color: var(--footer-hover);
 	}
-	.social-media a:hover {
-		color: var(--accent);
+
+	.socials {
+		display: flex;
+		align-items: center;
+		gap: 14px;
 	}
 
-	.footer-bottom {
-		padding-top: 50px;
-		padding-bottom: 30px;
+	.socials a {
+		color: var(--footer-text);
 		display: flex;
 	}
-	.footer-bottom-left {
-		flex: 1;
+
+	.socials a:hover {
+		color: var(--footer-hover);
 	}
 
 	.language-toggle-wrap {
-		margin-left: 8px;
 		font-size: 18px;
 	}
+
+	.footer-center:not(:empty) {
+		padding: 48px 0;
+	}
+
+	/* only if there is no center element - to prevent double border apperance */
+	.footer-center:not(:empty) + .bottom-bar {
+		border-top: 1px solid var(--footer-border);
+	}
+
+	.bottom-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 10px;
+		padding: 24px 0 32px;
+		font-size: 13px;
+		color: var(--footer-muted);
+	}
+
+	.bottom-right {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		flex-wrap: wrap;
+	}
+
+	.france {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.gdpr-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		padding: 5px 12px 5px 5px;
+		border-radius: 100px;
+		background: #1f2f57;
+		color: #fff;
+		opacity: 0.9;
+		transition: opacity 0.15s ease;
+	}
+
+	.gdpr-chip:hover {
+		opacity: 1;
+	}
+
+	.gdpr-chip-icon {
+		position: relative;
+		width: 22px;
+		height: 22px;
+		flex-shrink: 0;
+	}
+
+	.gdpr-chip-icon .ring {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+
+	.gdpr-chip-icon .lock {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+	}
+
+	.gdpr-chip-text {
+		font-size: 11px;
+		font-weight: 800;
+		letter-spacing: 0.02em;
+		color: #fff;
+	}
+
+	/* emoji glyphs are pre-colored — never let the surrounding muted text
+	   color dim or filter them */
+	.flag {
+		color: initial;
+		filter: none;
+	}
+
+	@media (max-width: 560px) {
+		.mascot-wrap {
+			/* keep it clear of the brand wordmark that sits right below it */
+			margin-bottom: -40px;
+		}
+
+		footer {
+			padding-top: 130px;
+		}
+
+		.top-row {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+	}
 </style>

package/dist/marketing/Footer/Footer.svelte.d.ts

@@ -1,12 +1,23 @@
+import type { Snippet } from 'svelte';
 import { type Socials } from '../social.js';
 interface Props {
+    name?: string;
+    subname?: string;
+    product?: string;
+    instance?: string;
+    logo?: string;
+    background?: string;
+    backgroundDark?: string;
+    card?: boolean;
     email?: string | null;
     social?: Partial<Socials>;
-    center?: import('svelte').Snippet;
+    languageToggle?: boolean;
+    gdpr?: boolean;
     affiliate?: boolean;
     recordVisit?: boolean;
+    center?: Snippet;
     max?: boolean;
 }
-declare const Footer: import("svelte").Component<Props, {}, "social">;
+declare const Footer: import("svelte").Component<Props, {}, "">;
 type Footer = ReturnType<typeof Footer>;
 export default Footer;

package/dist/marketing/Footer/FooterLinkList.svelte

@@ -17,12 +17,16 @@
 <style>
 	.link-list {
 		flex: 1;
+		min-width: 150px;
 	}
 
 	.title {
-		font-weight: 600;
+		font-size: 12px;
+		font-weight: 700;
 		text-transform: uppercase;
-		margin-bottom: 10px;
+		letter-spacing: 0.05em;
+		color: var(--footer-muted, var(--text-light));
+		margin-bottom: 14px;
 	}
 
 	.links {
@@ -32,9 +36,12 @@
 	}
 
 	.links :global(a) {
-		margin-top: 12px;
+		font-size: 14px;
+		color: var(--footer-text, var(--text-light));
+		margin-top: 10px;
 	}
 	.links :global(a:hover) {
+		color: var(--footer-text-strong, var(--text));
 		text-decoration: underline;
 	}
 </style>

package/dist/marketing/Header/Header.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
 	import Container from './../Container/Container.svelte';
 	import DarkToggle from '../../components/Dark/DarkToggle.svelte';
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
 	import IconList from '@hyvor/icons/IconList';
+	import IconX from '@hyvor/icons/IconX';
 	import HeaderNotification from './HeaderNotification.svelte';
 
 	interface Props {
@@ -14,8 +17,8 @@
 		href?: string;
 		subName?: undefined | string;
 		darkToggle?: boolean;
-		center?: import('svelte').Snippet;
-		end?: import('svelte').Snippet;
+		center?: Snippet;
+		end?: Snippet;
 		max?: boolean;
 	}
 
@@ -31,9 +34,27 @@
 		end,
 		max = false
 	}: Props = $props();
+
+	let scrolled = $state(false);
+	let mobileOpen = $state(false);
+
+	onMount(() => {
+		const onScroll = () => (scrolled = window.scrollY > 8);
+		onScroll();
+		window.addEventListener('scroll', onScroll, { passive: true });
+		return () => window.removeEventListener('scroll', onScroll);
+	});
+
+	// close the mobile menu once a link inside it is clicked
+	function closeOnLinkClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.tagName === 'A' || target.closest('a')) {
+			mobileOpen = false;
+		}
+	}
 </script>
 
-<header>
+<header class:scrolled>
 	<HeaderNotification {instance} {product} />
 	<Container as="nav" {max}>
 		<div class="nav-start">
@@ -41,8 +62,8 @@
 				<img
 					src={logo || `${instance}/api/public/logo/${product}.svg`}
 					alt="{name + (subName ? ' ' + subName : '')} Logo"
-					width="30"
-					height="30"
+					width="26"
+					height="26"
 				/>
 				<span class="brand-product">
 					<span class="brand">{name}</span>
@@ -70,20 +91,30 @@
 		</div>
 
 		<span class="mobile-nav-wrap">
-			<Dropdown align="end" width={300}>
+			<Dropdown bind:show={mobileOpen} align="end" width={300} contentPadding={8}>
 				{#snippet trigger()}
-					<IconButton variant="invisible">
-						<IconList size={18} />
+					<IconButton variant="invisible" aria-label="Menu">
+						{#if mobileOpen}
+							<IconX size={18} />
+						{:else}
+							<IconList size={18} />
+						{/if}
 					</IconButton>
 				{/snippet}
 				{#snippet content()}
-					<div class="mobile-content">
-						<div class="mobile-inner center">
-							{@render center?.()}
-						</div>
-						<div class="mobile-inner end">
-							{@render end?.()}
-						</div>
+					<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+					<div class="mobile-content" onclick={closeOnLinkClick}>
+						{#if center}
+							<div class="mobile-inner">
+								{@render center()}
+							</div>
+						{/if}
+						{#if end}
+							<div class="mobile-divider"></div>
+							<div class="mobile-inner end">
+								{@render end()}
+							</div>
+						{/if}
 					</div>
 				{/snippet}
 			</Dropdown>
@@ -105,10 +136,15 @@
 		width: 100%;
 		z-index: 100;
 		background-color: var(--background, var(--accent-lightest));
-		border-bottom: 1px solid var(--border);
+		border-bottom: 1px solid transparent;
 		height: var(--header-height);
 		display: flex;
 		flex-direction: column;
+		transition: border-color 0.2s ease;
+	}
+
+	header.scrolled {
+		border-bottom-color: var(--border);
 	}
 
 	header :global(> nav) {
@@ -117,7 +153,9 @@
 		flex: 1;
 	}
 	.nav-brand {
-		display: inline-block;
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
 		line-height: inherit;
 		white-space: nowrap;
 		color: inherit;
@@ -125,11 +163,10 @@
 		font-weight: 600;
 	}
 	.nav-brand img {
-		vertical-align: middle;
+		display: block;
 	}
 
 	.brand-product {
-		vertical-align: middle;
 		display: inline-flex;
 		flex-direction: column;
 		justify-content: center;
@@ -148,7 +185,7 @@
 		flex: 1;
 		display: flex;
 		align-items: center;
-		gap: 6px;
+		gap: 2px;
 		justify-content: center;
 	}
 
@@ -192,18 +229,21 @@
 	.mobile-inner {
 		display: flex;
 		flex-direction: column;
-	}
-	.mobile-content {
-		gap: 10px;
+		gap: 2px;
 	}
 
 	.mobile-content :global(.button) {
 		display: flex;
 	}
 
-	/* 
-		Scroll padding top is used to prevent the content from being hidden behind the header
-		https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
+	.mobile-divider {
+		height: 1px;
+		background: var(--border);
+		margin: 6px 4px;
+	}
+
+	/*
+		used to prevent the content from being hidden behind the header
 	*/
 	:global(html) {
 		scroll-padding-top: calc(var(--header-height) + 20px);

package/dist/marketing/Header/Header.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 interface Props {
     product: string;
     instance?: string;
@@ -6,8 +7,8 @@ interface Props {
     href?: string;
     subName?: undefined | string;
     darkToggle?: boolean;
-    center?: import('svelte').Snippet;
-    end?: import('svelte').Snippet;
+    center?: Snippet;
+    end?: Snippet;
     max?: boolean;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;

package/dist/marketing/Header/HeaderNavLink.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href?: string;
+		active?: boolean;
+		menu?: boolean;
+		target?: string;
+		rel?: string;
+		start?: Snippet;
+		children?: Snippet;
+		end?: Snippet;
+		description?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+		[key: string]: unknown;
+	}
+
+	let {
+		href,
+		active = false,
+		menu = false,
+		target,
+		rel,
+		start,
+		children,
+		end,
+		description,
+		onclick,
+		...rest
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	{href}
+	{target}
+	{rel}
+	{onclick}
+	role={href ? undefined : 'button'}
+	tabindex={href ? undefined : 0}
+	class="header-nav-link"
+	class:active
+	class:menu={menu || !!description}
+	class:rich={!!description}
+	{...rest}
+>
+	{#if description}
+		{#if start}
+			<span class="icon-box">{@render start()}</span>
+		{/if}
+		<span class="text-stack">
+			<span class="title">{@render children?.()}</span>
+			<span class="desc">{@render description()}</span>
+		</span>
+	{:else}
+		{#if start}
+			<span class="start">{@render start()}</span>
+		{/if}
+		{@render children?.()}
+		{#if end}
+			<span class="end">{@render end()}</span>
+		{/if}
+	{/if}
+</svelte:element>
+
+<style>
+	.header-nav-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 16px;
+		border-radius: 20px;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--text-light);
+		text-decoration: none;
+		white-space: nowrap;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			0.15s background-color,
+			0.15s color;
+	}
+
+	.header-nav-link:hover {
+		background: var(--hover, var(--accent-lightest));
+		color: var(--text);
+	}
+
+	.header-nav-link.active {
+		background: var(--accent-light);
+		color: var(--text);
+	}
+
+	.header-nav-link.menu {
+		width: 100%;
+		padding: 8px 10px;
+		border-radius: 12px;
+	}
+
+	.start,
+	.end {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	/* icon + title + description layout, see `description` above */
+	.header-nav-link.rich {
+		align-items: flex-start;
+		gap: 10px;
+		white-space: normal;
+	}
+
+	.icon-box {
+		flex: none;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		border-radius: 8px;
+		background: var(--accent-light);
+		color: var(--accent);
+	}
+
+	.header-nav-link.rich.active .icon-box {
+		background: var(--background);
+	}
+
+	.text-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		padding-top: 1px;
+	}
+
+	.title {
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--text);
+	}
+
+	.desc {
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--text-light);
+	}
+</style>

package/dist/marketing/Header/HeaderNavLink.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    href?: string;
+    active?: boolean;
+    menu?: boolean;
+    target?: string;
+    rel?: string;
+    start?: Snippet;
+    children?: Snippet;
+    end?: Snippet;
+    description?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const HeaderNavLink: import("svelte").Component<Props, {}, "">;
+type HeaderNavLink = ReturnType<typeof HeaderNavLink>;
+export default HeaderNavLink;

package/dist/marketing/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte';
 export { default as Header } from './Header/Header.svelte';
+export { default as HeaderNavLink } from './Header/HeaderNavLink.svelte';
 export { default as Container } from './Container/Container.svelte';
 export { default as Docs } from './Docs/Docs.svelte';
 export { default as DocsImage } from './Docs/DocsImage.svelte';

package/dist/marketing/index.js

@@ -1,5 +1,6 @@
 export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte';
 export { default as Header } from './Header/Header.svelte';
+export { default as HeaderNavLink } from './Header/HeaderNavLink.svelte';
 export { default as Container } from './Container/Container.svelte';
 export { default as Docs } from './Docs/Docs.svelte';
 export { default as DocsImage } from './Docs/DocsImage.svelte';

package/dist/marketing/social.d.ts

@@ -1,6 +1,6 @@
 export declare const SOCIAL_LINKS: {
     readonly x: "https://x.com/HyvorHQ";
-    readonly blueksy: "https://bsky.app/profile/hyvor.com";
+    readonly bluesky: "https://bsky.app/profile/hyvor.com";
     readonly discord: "https://discord.com/invite/2WRJxQB";
     readonly github: "https://github.com/hyvor";
     readonly youtube: "https://www.youtube.com/@HYVOR";

package/dist/marketing/social.js

@@ -1,6 +1,6 @@
 export const SOCIAL_LINKS = {
     x: 'https://x.com/HyvorHQ',
-    blueksy: 'https://bsky.app/profile/hyvor.com',
+    bluesky: 'https://bsky.app/profile/hyvor.com',
     discord: 'https://discord.com/invite/2WRJxQB',
     github: 'https://github.com/hyvor',
     youtube: 'https://www.youtube.com/@HYVOR',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.7",
+	"version": "2.1.8-beta.1",
 	"license": "MIT",
 	"private": false,
 	"repository": {