@hyvor/design 2.1.8-beta.2 → 2.1.8

package/dist/marketing/Header/Header.svelte

@@ -1,12 +1,9 @@
 <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 {
@@ -17,11 +14,9 @@
 		href?: string;
 		subName?: undefined | string;
 		darkToggle?: boolean;
-		center?: Snippet;
-		end?: Snippet;
+		center?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
 		max?: boolean;
-		logoAltText?: string;
-		menuLabel?: string;
 	}
 
 	let {
@@ -34,40 +29,20 @@
 		darkToggle = true,
 		center,
 		end,
-		max = false,
-		logoAltText = 'Logo',
-		menuLabel = 'Menu'
+		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 class:scrolled>
+<header>
 	<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 : '')} {logoAltText}"
-					width="26"
-					height="26"
+					alt="{name + (subName ? ' ' + subName : '')} Logo"
+					width="30"
+					height="30"
 				/>
 				<span class="brand-product">
 					<span class="brand">{name}</span>
@@ -95,30 +70,20 @@
 		</div>
 
 		<span class="mobile-nav-wrap">
-			<Dropdown bind:show={mobileOpen} align="end" width={300} contentPadding={8}>
+			<Dropdown align="end" width={300}>
 				{#snippet trigger()}
-					<IconButton variant="invisible" aria-label={menuLabel} aria-expanded={mobileOpen}>
-						{#if mobileOpen}
-							<IconX size={18} />
-						{:else}
-							<IconList size={18} />
-						{/if}
+					<IconButton variant="invisible">
+						<IconList size={18} />
 					</IconButton>
 				{/snippet}
 				{#snippet content()}
-					<!-- 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 class="mobile-content">
+						<div class="mobile-inner center">
+							{@render center?.()}
+						</div>
+						<div class="mobile-inner end">
+							{@render end?.()}
+						</div>
 					</div>
 				{/snippet}
 			</Dropdown>
@@ -140,15 +105,10 @@
 		width: 100%;
 		z-index: 100;
 		background-color: var(--background, var(--accent-lightest));
-		border-bottom: 1px solid transparent;
+		border-bottom: 1px solid var(--border);
 		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) {
@@ -157,9 +117,7 @@
 		flex: 1;
 	}
 	.nav-brand {
-		display: inline-flex;
-		align-items: center;
-		gap: 8px;
+		display: inline-block;
 		line-height: inherit;
 		white-space: nowrap;
 		color: inherit;
@@ -167,10 +125,11 @@
 		font-weight: 600;
 	}
 	.nav-brand img {
-		display: block;
+		vertical-align: middle;
 	}
 
 	.brand-product {
+		vertical-align: middle;
 		display: inline-flex;
 		flex-direction: column;
 		justify-content: center;
@@ -189,7 +148,7 @@
 		flex: 1;
 		display: flex;
 		align-items: center;
-		gap: 2px;
+		gap: 6px;
 		justify-content: center;
 	}
 
@@ -233,21 +192,18 @@
 	.mobile-inner {
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
+	}
+	.mobile-content {
+		gap: 10px;
 	}
 
 	.mobile-content :global(.button) {
 		display: flex;
 	}
 
-	.mobile-divider {
-		height: 1px;
-		background: var(--border);
-		margin: 6px 4px;
-	}
-
-	/*
-		used to prevent the content from being hidden behind the header
+	/* 
+		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
 	*/
 	:global(html) {
 		scroll-padding-top: calc(var(--header-height) + 20px);

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

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

package/dist/marketing/index.d.ts

@@ -1,9 +1,5 @@
 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,8 +1,5 @@
 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 bluesky: "https://bsky.app/profile/hyvor.com";
+    readonly blueksy: "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',
-    bluesky: 'https://bsky.app/profile/hyvor.com',
+    blueksy: '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.8-beta.2",
+	"version": "2.1.8",
 	"license": "MIT",
 	"private": false,
 	"repository": {

package/dist/marketing/Header/HeaderLanguageToggle.svelte

@@ -1,121 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-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

@@ -1,148 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,35 +0,0 @@
-// 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}`;
-}