@hyvor/design 2.1.8-beta.1 → 2.1.8-beta.2

package/dist/marketing/Footer/Footer.svelte

@@ -36,6 +36,11 @@
 		recordVisit?: boolean;
 		center?: Snippet;
 		max?: boolean;
+		logoAltText?: string;
+		copyEmailLabel?: string;
+		copiedLabel?: string;
+		gdprText?: string;
+		fromFranceText?: string;
 	}
 
 	let {
@@ -54,13 +59,13 @@
 		affiliate = true,
 		recordVisit = true,
 		center,
-		max = false
+		max = false,
+		logoAltText = 'Logo',
+		copyEmailLabel = 'Copy email',
+		copiedLabel = 'Copied!',
+		gdprText = 'GDPR Compliant',
+		fromFranceText = 'From France'
 	}: Props = $props();
-
-	// 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)
 	);
@@ -134,7 +139,7 @@
 		<div class="mascot-wrap" use:onView={() => (mascotInView = true)}>
 			<img
 				src={mascotLogo}
-				alt="{name} Logo"
+				alt="{name} {logoAltText}"
 				width="100"
 				height="100"
 				class:in-view={mascotInView}
@@ -159,7 +164,7 @@
 								<IconEnvelope size={14} />
 								{email}
 							</a>
-							<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
+							<Tooltip text={emailCopied ? copiedLabel : copyEmailLabel} position="top">
 								<IconButton
 									size="small"
 									variant="invisible"
@@ -210,13 +215,13 @@
 								</svg>
 								<span class="lock"><IconLockFill size={10} /></span>
 							</span>
-							<span class="gdpr-chip-text">GDPR Compliant</span>
+							<span class="gdpr-chip-text">{gdprText}</span>
 						</a>
 					</div>
 				{/if}
 
 				<div class="bottom-right">
-					<div class="france">From France <span class="flag">🇫🇷</span></div>
+					<div class="france">{fromFranceText} <span class="flag">🇫🇷</span></div>
 				</div>
 			</div>
 		</Container>

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

@@ -17,6 +17,11 @@ interface Props {
     recordVisit?: boolean;
     center?: Snippet;
     max?: boolean;
+    logoAltText?: string;
+    copyEmailLabel?: string;
+    copiedLabel?: string;
+    gdprText?: string;
+    fromFranceText?: string;
 }
 declare const Footer: import("svelte").Component<Props, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/marketing/Header/Header.svelte

@@ -20,6 +20,8 @@
 		center?: Snippet;
 		end?: Snippet;
 		max?: boolean;
+		logoAltText?: string;
+		menuLabel?: string;
 	}
 
 	let {
@@ -32,7 +34,9 @@
 		darkToggle = true,
 		center,
 		end,
-		max = false
+		max = false,
+		logoAltText = 'Logo',
+		menuLabel = 'Menu'
 	}: Props = $props();
 
 	let scrolled = $state(false);
@@ -61,7 +65,7 @@
 			<a class="nav-brand" {href}>
 				<img
 					src={logo || `${instance}/api/public/logo/${product}.svg`}
-					alt="{name + (subName ? ' ' + subName : '')} Logo"
+					alt="{name + (subName ? ' ' + subName : '')} {logoAltText}"
 					width="26"
 					height="26"
 				/>
@@ -93,7 +97,7 @@
 		<span class="mobile-nav-wrap">
 			<Dropdown bind:show={mobileOpen} align="end" width={300} contentPadding={8}>
 				{#snippet trigger()}
-					<IconButton variant="invisible" aria-label="Menu">
+					<IconButton variant="invisible" aria-label={menuLabel} aria-expanded={mobileOpen}>
 						{#if mobileOpen}
 							<IconX size={18} />
 						{:else}

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

@@ -10,6 +10,8 @@ interface Props {
     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/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,6 +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,6 +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/package.json

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