@hyvor/design 2.1.8-beta.1 → 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,8 +14,8 @@
 		href?: string;
 		subName?: undefined | string;
 		darkToggle?: boolean;
-		center?: Snippet;
-		end?: Snippet;
+		center?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
 		max?: boolean;
 	}
 
@@ -34,27 +31,9 @@
 		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 class:scrolled>
+<header>
 	<HeaderNotification {instance} {product} />
 	<Container as="nav" {max}>
 		<div class="nav-start">
@@ -62,8 +41,8 @@
 				<img
 					src={logo || `${instance}/api/public/logo/${product}.svg`}
 					alt="{name + (subName ? ' ' + subName : '')} Logo"
-					width="26"
-					height="26"
+					width="30"
+					height="30"
 				/>
 				<span class="brand-product">
 					<span class="brand">{name}</span>
@@ -91,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="Menu">
-						{#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>
@@ -136,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) {
@@ -153,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;
@@ -163,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;
@@ -185,7 +148,7 @@
 		flex: 1;
 		display: flex;
 		align-items: center;
-		gap: 2px;
+		gap: 6px;
 		justify-content: center;
 	}
 
@@ -229,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,8 +6,8 @@ interface Props {
     href?: string;
     subName?: undefined | string;
     darkToggle?: boolean;
-    center?: Snippet;
-    end?: Snippet;
+    center?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
     max?: boolean;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;

package/dist/marketing/index.d.ts

@@ -1,6 +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 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,6 +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 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.1",
+	"version": "2.1.8",
 	"license": "MIT",
 	"private": false,
 	"repository": {

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;