@hyvor/design 2.1.2 → 2.1.4

package/dist/components/TabNav/TabNav.svelte

@@ -1,17 +1,49 @@
 <script lang="ts">
 	import { setContext } from 'svelte';
+	import type { TabNavState } from './tabnav.js';
 
-	interface Props {
-		basePath?: string;
+	type Props = (
+		| {
+				basePath?: undefined;
+				pathname?: undefined;
+				goto?: undefined;
+		  }
+		| {
+				basePath: string;
+				// SvelteKit's `page.url.pathname`, e.g. `import { page } from '$app/state'`.
+				pathname: string;
+				// SvelteKit's `goto`, e.g. `import { goto } from '$app/navigation'`.
+				goto: (url: string, opts?: { replaceState?: boolean }) => void;
+		  }
+	) & {
 		replaceState?: boolean;
 		children?: import('svelte').Snippet;
-	}
+	};
+
+	let { children, basePath, replaceState = false, pathname: pathnameProp, goto }: Props = $props();
+
+	let fallbackPathname = $state(typeof window !== 'undefined' ? window.location.pathname : '');
+
+	$effect(() => {
+		if (!basePath || pathnameProp !== undefined) return;
 
-	let { children, basePath, replaceState = false }: Props = $props();
+		const onPopState = () => {
+			fallbackPathname = window.location.pathname;
+		};
+		window.addEventListener('popstate', onPopState);
+		return () => window.removeEventListener('popstate', onPopState);
+	});
 
-	const tabNavState = {
+	const tabNavState: TabNavState = {
 		basePath,
-		replaceState
+		replaceState,
+		goto,
+		get pathname() {
+			return pathnameProp ?? fallbackPathname;
+		},
+		set pathname(value: string) {
+			fallbackPathname = value;
+		}
 	};
 
 	setContext('tab-nav-state', tabNavState);

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

@@ -1,8 +1,17 @@
-interface Props {
-    basePath?: string;
+type Props = ({
+    basePath?: undefined;
+    pathname?: undefined;
+    goto?: undefined;
+} | {
+    basePath: string;
+    pathname: string;
+    goto: (url: string, opts?: {
+        replaceState?: boolean;
+    }) => void;
+}) & {
     replaceState?: boolean;
     children?: import('svelte').Snippet;
-}
+};
 declare const TabNav: import("svelte").Component<Props, {}, "">;
 type TabNav = ReturnType<typeof TabNav>;
 export default TabNav;

package/dist/components/TabNav/TabNavItem.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import { page } from '$app/state';
-	import { goto } from '$app/navigation';
 	import type { TabNavState } from './tabnav.js';
 
 	interface Props {
@@ -28,8 +26,7 @@
 		if (active) return true;
 
 		if (tabNavState.basePath) {
-			const currentUrl = page.url.pathname;
-			return currentUrl === getTabPath();
+			return tabNavState.pathname === getTabPath();
 		}
 
 		return false;
@@ -37,7 +34,14 @@
 
 	function handleClick(event: MouseEvent) {
 		if (tabNavState.basePath) {
-			goto(getTabPath());
+			const path = getTabPath();
+
+			if (tabNavState.goto) {
+				tabNavState.goto(path, { replaceState: tabNavState.replaceState });
+				tabNavState.pathname = path;
+			} else {
+				window.location.href = path;
+			}
 		}
 		onclick?.(event);
 	}

package/dist/components/TabNav/tabnav.d.ts

@@ -1,4 +1,8 @@
 export interface TabNavState {
     basePath: string | undefined;
     replaceState: boolean;
+    pathname: string;
+    goto?: (url: string, opts?: {
+        replaceState?: boolean;
+    }) => void;
 }

package/dist/index.css

@@ -1,6 +1,6 @@
 /* font */
 :root {
-	font-family: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
+	font-family: var(--font-sans-serif);
 	font-size: 16px;
 	font-weight: 400;
 	text-rendering: optimizeLegibility;

package/dist/index.d.ts

@@ -2,3 +2,5 @@ import './variables.scss';
 import './index.css';
 import '@fontsource/readex-pro/400.css';
 import '@fontsource/readex-pro/600.css';
+import '@fontsource/source-serif-4/400.css';
+import '@fontsource/source-serif-4/600.css';

package/dist/index.js

@@ -2,3 +2,5 @@ import './variables.scss';
 import './index.css';
 import '@fontsource/readex-pro/400.css';
 import '@fontsource/readex-pro/600.css';
+import '@fontsource/source-serif-4/400.css';
+import '@fontsource/source-serif-4/600.css';

package/dist/marketing/Docs/Docs.svelte

@@ -64,6 +64,7 @@
 	<div class="nav-wrap">
 		<button
 			class="mobile-toggle hds-box"
+			class:open={mobileNavOpen}
 			onclick={(e) => {
 				e.stopPropagation();
 				mobileNavOpen = !mobileNavOpen;
@@ -76,7 +77,9 @@
 				{/if}
 				<span class="name">{page.name}</span>
 			</div>
-			<IconList size={18} />
+			<span class="mobile-toggle-icon">
+				<IconList size={18} />
+			</span>
 		</button>
 
 		<nav
@@ -113,9 +116,11 @@
 	</div>
 
 	<div class="content-wrap hds-box">
-		<content class:wide={page.wide} bind:this={contentEl}>
-			<page.content />
-		</content>
+		{#key page.slug}
+			<content class:wide={page.wide} bind:this={contentEl}>
+				<page.content />
+			</content>
+		{/key}
 	</div>
 
 	{#if !page.wide}
@@ -175,6 +180,7 @@
 			width: 100%;
 			padding: 10px 20px;
 			cursor: pointer;
+			transition: 0.15s background-color ease;
 		}
 		.mobile-toggle:hover {
 			background-color: var(--hover);
@@ -184,6 +190,14 @@
 			flex: 1;
 			text-align: left;
 		}
+
+		.mobile-toggle-icon {
+			display: inline-flex;
+			transition: 0.2s transform ease;
+		}
+		.mobile-toggle.open .mobile-toggle-icon {
+			transform: rotate(90deg);
+		}
 		.category,
 		.sep {
 			color: var(--text-light);
@@ -204,6 +218,18 @@
 		}
 		nav.open {
 			display: block;
+			animation: nav-open 0.2s ease-out;
+		}
+	}
+
+	@keyframes nav-open {
+		from {
+			opacity: 0;
+			transform: translateY(-6px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
 		}
 	}
 
@@ -261,6 +287,11 @@
 		flex: 1;
 		padding: 30px 45px;
 		min-width: 0;
+		background-image: radial-gradient(
+			ellipse 700px 300px at top right,
+			var(--accent-lightest),
+			transparent 70%
+		);
 	}
 
 	content {
@@ -268,11 +299,23 @@
 		margin: auto;
 		width: 650px;
 		max-width: 100%;
+		animation: content-in 0.35s ease;
 	}
 	content.wide {
 		width: 100%;
 	}
 
+	@keyframes content-in {
+		from {
+			opacity: 0;
+			transform: translateY(6px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
 	/* content styles */
 
 	content :global(p),
@@ -288,6 +331,7 @@
 		margin: 0 0 30px;
 		position: relative;
 		display: table;
+		font-family: var(--font-serif);
 		&:after {
 			position: absolute;
 			content: '';
@@ -295,6 +339,7 @@
 			left: 0px;
 			width: 30%;
 			height: 3px;
+			border-radius: 2px;
 			background: var(--accent);
 			margin-top: 10px;
 		}
@@ -302,6 +347,14 @@
 	content :global(a:not(.no-link-color a)) {
 		color: var(--link);
 		text-decoration: underline;
+		text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
+		transition: 0.15s text-decoration-color ease;
+	}
+	content :global(a:not(.no-link-color a):hover) {
+		text-decoration-color: var(--link);
+	}
+	content :global(p) {
+		margin: 0 0 16px;
 	}
 	content :global(li) {
 		margin-bottom: 8px;
@@ -340,6 +393,8 @@
 		transform: translateY(-50%);
 		display: inline-flex;
 		align-items: center;
+		color: var(--accent-light);
+		transition: 0.15s opacity ease;
 	}
 
 	content {

package/dist/marketing/Docs/NavItem.svelte

@@ -53,19 +53,29 @@
 	.nav-item {
 		display: flex;
 		align-items: center;
-		padding: 7px 22px;
+		padding: 7px 25px;
 		font-size: 14px;
-		border-left: 3px solid transparent;
-		transition: 0.1s background-color ease;
+		position: relative;
+		transition: 0.15s background-color ease;
 		width: 100%;
 		text-align: initial;
 	}
 
 	.nav-item.active {
-		border-left: 3px solid var(--accent);
 		background-color: var(--accent-lightest);
 	}
 
+	.nav-item.active::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 2px;
+		bottom: 2px;
+		width: 3px;
+		border-radius: 2px;
+		background: var(--accent);
+	}
+
 	.nav-item:not(.active):hover {
 		background-color: var(--hover);
 	}

package/dist/variables.scss

@@ -55,8 +55,11 @@
 	--box-radius: 20px;
 	--box-background: #fff;
 
-	--line-height-content: 26px;
+	--line-height-content: 28px;
 	--header-height: 55px;
+
+	--font-sans-serif: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
+	--font-serif: 'Source Serif 4', serif;
 }
 
 :root.dark {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.2",
+	"version": "2.1.4",
 	"license": "MIT",
 	"private": false,
 	"repository": {
@@ -60,6 +60,7 @@
 	"dependencies": {
 		"@apidevtools/json-schema-ref-parser": "^15.5.1",
 		"@fontsource/readex-pro": "^5.2.11",
+		"@fontsource/source-serif-4": "^5.3.0",
 		"@hyvor/icons": "^1.1.1",
 		"deepmerge-ts": "^7.1.5",
 		"emojibase-data": "^17.0.0",