@hyvor/design 2.1.7 → 2.1.8-beta.2

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,9 +17,11 @@
 		href?: string;
 		subName?: undefined | string;
 		darkToggle?: boolean;
-		center?: import('svelte').Snippet;
-		end?: import('svelte').Snippet;
+		center?: Snippet;
+		end?: Snippet;
 		max?: boolean;
+		logoAltText?: string;
+		menuLabel?: string;
 	}
 
 	let {
@@ -29,20 +34,40 @@
 		darkToggle = true,
 		center,
 		end,
-		max = false
+		max = false,
+		logoAltText = 'Logo',
+		menuLabel = 'Menu'
 	}: 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">
 			<a class="nav-brand" {href}>
 				<img
 					src={logo || `${instance}/api/public/logo/${product}.svg`}
-					alt="{name + (subName ? ' ' + subName : '')} Logo"
-					width="30"
-					height="30"
+					alt="{name + (subName ? ' ' + subName : '')} {logoAltText}"
+					width="26"
+					height="26"
 				/>
 				<span class="brand-product">
 					<span class="brand">{name}</span>
@@ -70,20 +95,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={menuLabel} aria-expanded={mobileOpen}>
+						{#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 +140,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 +157,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 +167,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 +189,7 @@
 		flex: 1;
 		display: flex;
 		align-items: center;
-		gap: 6px;
+		gap: 2px;
 		justify-content: center;
 	}
 
@@ -192,18 +233,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,9 +7,11 @@ interface Props {
     href?: string;
     subName?: undefined | string;
     darkToggle?: boolean;
-    center?: import('svelte').Snippet;
-    end?: import('svelte').Snippet;
+    center?: Snippet;
+    end?: Snippet;
     max?: boolean;
+    logoAltText?: string;
+    menuLabel?: string;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/marketing/Header/HeaderLanguageToggle.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
+	import HeaderNavLink from './HeaderNavLink.svelte';
+	import type {
+		DropdownAlign,
+		DropdownPosition
+	} from '../../components/Dropdown/dropdown.types.js';
+	import type { LanguageOption } from './language.js';
+
+	interface Props {
+		languages: LanguageOption[];
+		current: string;
+		href: (code: string) => string;
+		showName?: boolean;
+		align?: DropdownAlign;
+		position?: DropdownPosition;
+		label?: string;
+	}
+
+	let {
+		languages,
+		current,
+		href,
+		showName = false,
+		align = 'center',
+		position = 'bottom',
+		label = 'Change language'
+	}: Props = $props();
+
+	const currentLanguage = $derived(languages.find((l) => l.code === current) ?? languages[0]);
+
+	let show = $state(false);
+
+	// close the dropdown once a language link inside it is clicked
+	function closeOnLinkClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.tagName === 'A' || target.closest('a')) {
+			show = false;
+		}
+	}
+</script>
+
+{#if currentLanguage}
+	<div class="header-language-toggle">
+		<Dropdown bind:show {align} {position} contentPadding={8}>
+			{#snippet trigger()}
+				<HeaderNavLink aria-label={label} aria-expanded={show}>
+					<span class="flag">{currentLanguage.flag}</span>
+					{#if showName}{currentLanguage.name}{/if}
+				</HeaderNavLink>
+			{/snippet}
+			{#snippet content()}
+				<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+				<div class="menu" onclick={closeOnLinkClick}>
+					{#each languages as language (language.code)}
+						<HeaderNavLink
+							href={href(language.code)}
+							active={language.code === current}
+							data-lang={language.code}
+							menu
+						>
+							<span class="lang-row">
+								<span class="flag">{language.flag}</span>
+								<span class="name">{language.name}</span>
+								<span class="code">{language.code.toUpperCase()}</span>
+							</span>
+						</HeaderNavLink>
+					{/each}
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+{/if}
+
+<style>
+	.header-language-toggle {
+		position: relative;
+		display: inline-flex;
+		margin-left: 12px;
+		padding-left: 12px;
+	}
+
+	/* a short divider, centered on the toggle, separating it from nav links,
+	   rather than a full-height border-left */
+	.header-language-toggle::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 1px;
+		height: 16px;
+		background: var(--border);
+	}
+
+	.flag {
+		font-size: 15px;
+		line-height: 1;
+	}
+
+	.menu {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.lang-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+	}
+
+	.code {
+		margin-left: auto;
+		padding-left: 8px;
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--text-light);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { DropdownAlign, DropdownPosition } from '../../components/Dropdown/dropdown.types.js';
+import type { LanguageOption } from './language.js';
+interface Props {
+    languages: LanguageOption[];
+    current: string;
+    href: (code: string) => string;
+    showName?: boolean;
+    align?: DropdownAlign;
+    position?: DropdownPosition;
+    label?: string;
+}
+declare const HeaderLanguageToggle: import("svelte").Component<Props, {}, "">;
+type HeaderLanguageToggle = ReturnType<typeof HeaderLanguageToggle>;
+export default HeaderLanguageToggle;

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/Header/language.d.ts

@@ -0,0 +1,18 @@
+export interface LanguageOption {
+    /** language/locale code, e.g. "en", "fr" */
+    code: string;
+    /** an emoji flag shown next to the name */
+    flag: string;
+    name: string;
+}
+/**
+ * Rewrites `path` (the current pathname) from `currentLang` to `targetLang`,
+ * for the common convention where the default language is served without a
+ * prefix and every other language is served under `/{code}`.
+ *
+ * @example
+ * buildLocalizedUrl('/pricing', 'en', 'fr', 'en') // '/fr/pricing'
+ * buildLocalizedUrl('/fr/pricing', 'fr', 'en', 'en') // '/pricing'
+ * buildLocalizedUrl('/fr', 'fr', 'en', 'en') // '/'
+ */
+export declare function buildLocalizedUrl(path: string, currentLang: string, targetLang: string, defaultLang: string): string;

package/dist/marketing/Header/language.js

@@ -0,0 +1,35 @@
+// Shared helpers for marketing sites that serve translated pages on their own
+// URLs (e.g. a SvelteKit `[[lang]]` route param) rather than switching
+// language client-side on one page. This is a different case from
+// `InternationalizationService`/`LanguageToggle` in
+// `$lib/components/Internationalization`, which swap translated strings in
+// place on a single page; use that instead if you don't have per-language
+// routes.
+/**
+ * Rewrites `path` (the current pathname) from `currentLang` to `targetLang`,
+ * for the common convention where the default language is served without a
+ * prefix and every other language is served under `/{code}`.
+ *
+ * @example
+ * buildLocalizedUrl('/pricing', 'en', 'fr', 'en') // '/fr/pricing'
+ * buildLocalizedUrl('/fr/pricing', 'fr', 'en', 'en') // '/pricing'
+ * buildLocalizedUrl('/fr', 'fr', 'en', 'en') // '/'
+ */
+export function buildLocalizedUrl(path, currentLang, targetLang, defaultLang) {
+    let basePath = path;
+    // strip the current language prefix, if any, to get the language-agnostic path
+    if (currentLang !== defaultLang) {
+        const prefix = `/${currentLang}`;
+        if (basePath === prefix) {
+            basePath = '/';
+        }
+        else if (basePath.startsWith(`${prefix}/`)) {
+            basePath = basePath.slice(prefix.length);
+        }
+    }
+    // the default language is served without a prefix
+    if (targetLang === defaultLang) {
+        return basePath;
+    }
+    return basePath === '/' ? `/${targetLang}` : `/${targetLang}${basePath}`;
+}

package/dist/marketing/index.d.ts

@@ -1,5 +1,9 @@
 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 HeaderLanguageToggle } from './Header/HeaderLanguageToggle.svelte';
+export { buildLocalizedUrl } from './Header/language.js';
+export type { LanguageOption } from './Header/language.js';
 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,8 @@
 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 HeaderLanguageToggle } from './Header/HeaderLanguageToggle.svelte';
+export { buildLocalizedUrl } from './Header/language.js';
 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.2",
 	"license": "MIT",
 	"private": false,
 	"repository": {