@hyvor/design 2.1.13 → 2.1.15

package/dist/components/ButtonGroup/ButtonGroup.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	interface Props {
 		column?: boolean;
+		divider?: boolean;
 		children?: import('svelte').Snippet;
 	}
 
-	let { column = false, children }: Props = $props();
+	let { column = false, divider = true, children }: Props = $props();
 </script>
 
-<div class="button-group" class:column>
+<div class="button-group" class:column class:no-divider={!divider}>
 	{@render children?.()}
 </div>
 
@@ -57,7 +58,7 @@
   margin-top: -1px;
 }
 
-.button-group:not(.column) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+.button-group:not(.no-divider):not(.column) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
   content: "";
   position: absolute;
   top: 22%;
@@ -69,7 +70,7 @@
   pointer-events: none;
 }
 
-.button-group.column :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+.button-group.column:not(.no-divider) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
   content: "";
   position: absolute;
   left: 22%;

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

@@ -1,5 +1,6 @@
 interface Props {
     column?: boolean;
+    divider?: boolean;
     children?: import('svelte').Snippet;
 }
 declare const ButtonGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/Dropdown/DropdownContent.svelte

@@ -46,13 +46,10 @@
 
 		if (position === 'bottom') {
 			contentWrap.style.top = triggerRect.bottom + GAP + 'px';
-			if (contentRect.height + triggerRect.bottom > window.innerHeight) {
-				contentWrap.style.bottom = SPACE_AROUND + 'px';
-			} else {
-				contentWrap.style.bottom = 'auto';
-			}
+			contentWrap.style.bottom = 'auto';
 		} else if (position === 'top') {
-			contentWrap.style.top = triggerRect.top - contentRect.height - GAP + 'px';
+			contentWrap.style.top =
+				Math.max(triggerRect.top - contentRect.height - GAP, SPACE_AROUND) + 'px';
 		} else if (position === 'left') {
 			contentWrap.style.left = triggerRect.left - width - GAP + 'px';
 		} else if (position === 'right') {
@@ -88,6 +85,17 @@
 		} else {
 			contentWrap.style.width = width + 'px';
 		}
+
+		// cap to viewport height; the panel scrolls internally past that
+		let available: number;
+		if (position === 'bottom') {
+			available = window.innerHeight - (triggerRect.bottom + GAP) - SPACE_AROUND;
+		} else if (position === 'top') {
+			available = triggerRect.top - GAP - SPACE_AROUND;
+		} else {
+			available = window.innerHeight - SPACE_AROUND * 2;
+		}
+		contentWrap.style.maxHeight = Math.max(available, 120) + 'px';
 	}
 
 	$effect(() => {
@@ -137,4 +145,12 @@
 <style>.content-wrap {
   position: fixed;
   z-index: 1000000;
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  overflow-y: auto;
+  min-height: 0;
+  overscroll-behavior: contain;
 }</style>

package/dist/components/FileUploader/Media/Media.svelte

@@ -20,7 +20,7 @@
 		nextPage === 1 ? (isLoading = true) : (isLoadingMore = true);
 
 		config
-			.mediaLoad(nextPage)
+			.mediaLoad(nextPage, config.type)
 			.then((results) => {
 				items = nextPage === 1 ? results : [...items, ...results];
 				hasMore = results.length > 0;

package/dist/components/FileUploader/file-uploader.d.ts

@@ -30,7 +30,7 @@ export interface FileUploaderConfig {
     }>;
     allowedMimeTypes?: string[];
     maxFileSizeInMB?: number;
-    mediaLoad?: (page: number) => Promise<MediaItem[]>;
+    mediaLoad?: (page: number, type: UploadType) => Promise<MediaItem[]>;
     unsplashSearch?: (search: string, page: number) => Promise<UnsplashImage[]>;
     excalidraw?: boolean;
 }

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordion.svelte

@@ -244,8 +244,38 @@
 	}
 
 	@media (max-width: 768px) {
+		.hds-all-features-accordion {
+			padding: 56px 0;
+		}
+
+		.section-header {
+			margin-bottom: 32px;
+		}
+
+		.section-header h2 {
+			font-size: 26px;
+		}
+
+		.section-header p {
+			font-size: 0.9rem;
+		}
+
+		.accordion-trigger {
+			gap: 12px;
+			padding: 16px 14px;
+		}
+
+		.cat-label {
+			font-size: 15px;
+		}
+
+		.accordion-content {
+			padding: 4px 14px 20px;
+		}
+
 		.features-grid {
 			grid-template-columns: 1fr;
+			gap: 18px;
 		}
 	}
 </style>

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte

@@ -60,11 +60,24 @@
 	@media (max-width: 992px) {
 		.feature {
 			width: 100%;
-			text-align: center;
 		}
 
 		.icon-bg {
-			display: none;
+			opacity: 0.1;
+		}
+
+		.icon-bg :global(svg) {
+			width: 22px;
+			height: 22px;
+		}
+
+		.title {
+			font-size: 15px;
+		}
+
+		.description {
+			font-size: 13px;
+			margin-top: 4px;
 		}
 	}
 </style>

package/dist/marketing/Footer/Footer.svelte

@@ -374,7 +374,9 @@
 	}
 
 	.footer-center {
-		display: flex;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+		gap: 40px;
 	}
 
 	.footer-center:not(:empty) {
@@ -474,5 +476,30 @@
 			flex-direction: column;
 			align-items: flex-start;
 		}
+
+		.top-row-right {
+			gap: 16px;
+		}
+
+		.footer-center {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			gap: 32px 20px;
+		}
+
+		.footer-center:not(:empty) {
+			padding: 36px 0;
+		}
+
+		.bottom-bar {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 16px;
+		}
+	}
+
+	@media (max-width: 360px) {
+		.footer-center {
+			grid-template-columns: minmax(0, 1fr);
+		}
 	}
 </style>

package/dist/marketing/Footer/FooterLinkList.svelte

@@ -17,7 +17,7 @@
 <style>
 	.link-list {
 		flex: 1;
-		min-width: 150px;
+		min-width: 0;
 	}
 
 	.title {
@@ -27,18 +27,22 @@
 		letter-spacing: 0.05em;
 		color: var(--footer-muted, var(--text-light));
 		margin-bottom: 14px;
+		overflow-wrap: break-word;
 	}
 
 	.links {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
+		min-width: 0;
 	}
 
 	.links :global(a) {
 		font-size: 14px;
 		color: var(--footer-text, var(--text-light));
 		margin-top: 10px;
+		max-width: 100%;
+		overflow-wrap: break-word;
 	}
 	.links :global(a:hover) {
 		color: var(--footer-text-strong, var(--text));

package/dist/marketing/Header/Header.svelte

@@ -114,7 +114,9 @@
 							</div>
 						{/if}
 						{#if end}
-							<div class="mobile-divider"></div>
+							{#if center}
+								<div class="mobile-divider"></div>
+							{/if}
 							<div class="mobile-inner end">
 								{@render end()}
 							</div>
@@ -240,15 +242,30 @@
 		display: flex;
 	}
 
+	/* make every nav link a full-width list row inside the mobile menu */
+	.mobile-content :global(.header-nav-link) {
+		width: 100%;
+		justify-content: flex-start;
+		padding: 8px 10px;
+		border-radius: 12px;
+	}
+
+	/* hide submenu link icon in the mobile menu */
+	.mobile-content :global(.header-nav-link .icon-box),
+	.mobile-content :global(.header-nav-link .start) {
+		display: none;
+	}
+
+	.mobile-content :global(.header-nav-link.rich) {
+		gap: 0;
+	}
+
 	.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/HeaderLanguageToggle.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity';
 	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
 	import HeaderNavLink from './HeaderNavLink.svelte';
+	import HeaderMobileSection from './HeaderMobileSection.svelte';
 	import type {
 		DropdownAlign,
 		DropdownPosition
 	} from '../../components/Dropdown/dropdown.types.js';
 	import type { LanguageOption } from './language.js';
+	import { HEADER_MOBILE_BREAKPOINT } from './breakpoint.js';
 
 	interface Props {
 		languages: LanguageOption[];
@@ -29,9 +32,12 @@
 
 	const currentLanguage = $derived(languages.find((l) => l.code === current) ?? languages[0]);
 
+	// below the breakpoint: render as a collapsible inline section, not a dropdown
+	const mobile = new MediaQuery(`(max-width: ${HEADER_MOBILE_BREAKPOINT}px)`);
+
 	let show = $state(false);
 
-	// close the dropdown once a language link inside it is clicked
+	// close the dropdown when a language link inside it is clicked
 	function closeOnLinkClick(e: MouseEvent) {
 		const target = e.target as HTMLElement;
 		if (target.tagName === 'A' || target.closest('a')) {
@@ -40,36 +46,51 @@
 	}
 </script>
 
+{#snippet languageLink(language: LanguageOption)}
+	<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>
+{/snippet}
+
 {#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>
+	{#if mobile.current}
+		<HeaderMobileSection {label}>
+			{#snippet trailing()}
+				<span class="flag">{currentLanguage.flag}</span>
 			{/snippet}
-		</Dropdown>
-	</div>
+			{#each languages as language (language.code)}
+				{@render languageLink(language)}
+			{/each}
+		</HeaderMobileSection>
+	{:else}
+		<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)}
+							{@render languageLink(language)}
+						{/each}
+					</div>
+				{/snippet}
+			</Dropdown>
+		</div>
+	{/if}
 {/if}
 
 <style>

package/dist/marketing/Header/HeaderMobileSection.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import IconChevronRight from '@hyvor/icons/IconChevronRight';
+
+	interface Props {
+		/** Section heading, shown on the toggle row. */
+		label: string;
+		/** Optional content shown on the toggle row, just before the chevron. */
+		trailing?: Snippet;
+		/** The section content, revealed when expanded. */
+		children: Snippet;
+	}
+
+	let { label, trailing, children }: Props = $props();
+
+	let expanded = $state(false);
+</script>
+
+<div class="section">
+	<button
+		type="button"
+		class="toggle"
+		class:expanded
+		aria-expanded={expanded}
+		onclick={() => (expanded = !expanded)}
+	>
+		<span class="label">{label}</span>
+		<span class="right">
+			{#if trailing}
+				<span class="trailing">{@render trailing()}</span>
+			{/if}
+			<span class="chevron"><IconChevronRight size={12} /></span>
+		</span>
+	</button>
+	{#if expanded}
+		<div class="items" transition:slide={{ duration: 150 }}>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.section {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		width: 100%;
+	}
+
+	.toggle {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		width: 100%;
+		padding: 8px 10px;
+		border: none;
+		background: none;
+		border-radius: 12px;
+		cursor: pointer;
+		font: inherit;
+		text-align: left;
+		color: var(--text-light);
+		transition: background-color 0.15s;
+	}
+
+	.toggle:hover {
+		background: var(--hover, var(--accent-lightest));
+	}
+
+	.label {
+		font-size: 11px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--text-light);
+	}
+
+	.right {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.trailing {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.chevron {
+		display: inline-flex;
+		color: var(--text-light);
+		transition: transform 0.15s ease;
+	}
+
+	.toggle.expanded .chevron {
+		transform: rotate(90deg);
+	}
+
+	.items {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		/* nudge sub-items in so they read as children of the section label */
+		padding-left: 8px;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Section heading, shown on the toggle row. */
+    label: string;
+    /** Optional content shown on the toggle row, just before the chevron. */
+    trailing?: Snippet;
+    /** The section content, revealed when expanded. */
+    children: Snippet;
+}
+declare const HeaderMobileSection: import("svelte").Component<Props, {}, "">;
+type HeaderMobileSection = ReturnType<typeof HeaderMobileSection>;
+export default HeaderMobileSection;

package/dist/marketing/Header/HeaderNavMenu.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
+	import HeaderNavLink from './HeaderNavLink.svelte';
+	import HeaderMobileSection from './HeaderMobileSection.svelte';
+	import IconCaretDown from '@hyvor/icons/IconCaretDown';
+	import type { DropdownAlign } from '../../components/Dropdown/dropdown.types.js';
+	import { HEADER_MOBILE_BREAKPOINT } from './breakpoint.js';
+
+	interface Props {
+		label: string;
+		active?: boolean;
+		children: Snippet;
+		width?: number;
+		align?: DropdownAlign;
+	}
+
+	let { label, active = false, children, width = 300, align = 'center' }: Props = $props();
+
+	// below the breakpoint: render as a collapsible inline section, not a dropdown
+	const mobile = new MediaQuery(`(max-width: ${HEADER_MOBILE_BREAKPOINT}px)`);
+
+	let open = $state(false);
+
+	// close the dropdown when a link inside it is clicked
+	function closeOnLinkClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.tagName === 'A' || target.closest('a')) {
+			open = false;
+		}
+	}
+</script>
+
+{#if mobile.current}
+	<HeaderMobileSection {label}>
+		{@render children()}
+	</HeaderMobileSection>
+{:else}
+	<Dropdown bind:show={open} {width} {align} contentPadding={8}>
+		{#snippet trigger()}
+			<HeaderNavLink active={active || open}>
+				{label}
+				{#snippet end()}<IconCaretDown size={11} />{/snippet}
+			</HeaderNavLink>
+		{/snippet}
+		{#snippet content()}
+			<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+			<div onclick={closeOnLinkClick}>
+				{@render children()}
+			</div>
+		{/snippet}
+	</Dropdown>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { DropdownAlign } from '../../components/Dropdown/dropdown.types.js';
+interface Props {
+    label: string;
+    active?: boolean;
+    children: Snippet;
+    width?: number;
+    align?: DropdownAlign;
+}
+declare const HeaderNavMenu: import("svelte").Component<Props, {}, "">;
+type HeaderNavMenu = ReturnType<typeof HeaderNavMenu>;
+export default HeaderNavMenu;

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

@@ -0,0 +1 @@
+export declare const HEADER_MOBILE_BREAKPOINT = 992;

package/dist/marketing/Header/breakpoint.js

@@ -0,0 +1,2 @@
+// width (px) at/below which the header collapses into the hamburger menu
+export const HEADER_MOBILE_BREAKPOINT = 992;

package/dist/marketing/LogoStrip/LogoStrip.svelte

@@ -26,8 +26,15 @@
 		speed = 34
 	}: Props = $props();
 
-	// render twice for marquee effect
-	const track = $derived(marquee ? [...logos, ...logos] : logos);
+	let containerWidth = $state(0);
+	let setWidths = $state<number[]>([]);
+	const setWidth = $derived(setWidths[0] ?? 0);
+
+	const copies = $derived.by(() => {
+		if (!setWidth || !containerWidth) return 2;
+		const needed = Math.ceil((containerWidth * 2) / setWidth);
+		return Math.min(20, Math.max(2, needed % 2 === 0 ? needed : needed + 1));
+	});
 </script>
 
 {#snippet logoImg(logo: Logo, hidden = false)}
@@ -65,23 +72,27 @@
 	</div>
 
 	{#if marquee}
-		<div class="marquee hds-container-max">
-			<div class="marquee-track">
-				{#each track as logo, i}
-					{@const hidden = i >= logos.length}
-					{#if logo.href}
-						<a
-							href={logo.href}
-							target="_blank"
-							rel="noopener"
-							class="logo-link"
-							tabindex={hidden ? -1 : undefined}
-						>
-							{@render logoImg(logo, hidden)}
-						</a>
-					{:else}
-						{@render logoImg(logo, hidden)}
-					{/if}
+		<div class="marquee hds-container-max" bind:clientWidth={containerWidth}>
+			<div class="marquee-track" style:--ls-copies={copies}>
+				{#each Array.from({ length: copies }) as _, setIndex (setIndex)}
+					{@const hidden = setIndex > 0}
+					<div class="marquee-set" bind:clientWidth={setWidths[setIndex]} aria-hidden={hidden}>
+						{#each logos as logo}
+							{#if logo.href}
+								<a
+									href={logo.href}
+									target="_blank"
+									rel="noopener"
+									class="logo-link"
+									tabindex={hidden ? -1 : undefined}
+								>
+									{@render logoImg(logo, hidden)}
+								</a>
+							{:else}
+								{@render logoImg(logo, hidden)}
+							{/if}
+						{/each}
+					</div>
 				{/each}
 			</div>
 		</div>
@@ -134,9 +145,18 @@
 	.marquee-track {
 		display: flex;
 		align-items: center;
-		gap: 52px;
 		width: max-content;
-		animation: marquee-scroll var(--ls-speed) linear infinite;
+		/* keep a constant per-set speed regardless of how many sets we repeat */
+		animation: marquee-scroll calc(var(--ls-speed) * var(--ls-copies, 2) / 2) linear infinite;
+	}
+
+	.marquee-set {
+		display: flex;
+		align-items: center;
+		flex: none;
+		gap: 52px;
+		/* trailing gap so every set is an identical width and -50% lands cleanly */
+		padding-right: 52px;
 	}
 
 	.marquee:hover .marquee-track {
@@ -148,7 +168,6 @@
 			transform: translateX(0);
 		}
 		to {
-			/* one full set-width, since the track is two identical sets back to back */
 			transform: translateX(-50%);
 		}
 	}
@@ -186,13 +205,18 @@
 
 		.marquee-track {
 			animation: none;
+			width: 100%;
+			padding: 0 15px;
+		}
+
+		.marquee-set {
 			flex-wrap: wrap;
 			justify-content: center;
 			width: 100%;
-			padding: 0 15px;
+			padding-right: 0;
 		}
 
-		.marquee-track :global(.logo[aria-hidden='true']) {
+		.marquee-set:not(:first-child) {
 			display: none;
 		}
 	}

package/dist/marketing/Testimonials/Testimonials.svelte

@@ -3,6 +3,10 @@
 		type: 'text';
 		name: string;
 		role: string;
+		company?: string;
+		companyUrl?: string;
+		imageUrl?: string;
+		summary?: string;
 		quote: string;
 	}
 
@@ -10,6 +14,9 @@
 		type: 'video';
 		name: string;
 		role: string;
+		company: string;
+		companyUrl?: string;
+		imageUrl?: string;
 		videoUrl?: string;
 		posterUrl?: string;
 		summary?: string;
@@ -102,6 +109,24 @@
 	{/if}
 </svelte:head>
 
+{#snippet meta(review: Review)}
+	<div class="role">
+		{review.role}, <br />
+		{#if review.companyUrl}
+			<a
+				class="company"
+				href={review.companyUrl}
+				target="_blank"
+				rel="nofollow noopener noreferrer"
+			>
+				{review.company}
+			</a>
+		{:else}
+			{review.company}
+		{/if}
+	</div>
+{/snippet}
+
 <section class="hds-testimonials" class:handwritten={handwrittenNames}>
 	<div class="hds-container head">
 		<p class="label">{label}</p>
@@ -124,15 +149,34 @@
 			{#if review.type === 'text'}
 				{@const av = identicon(review.name)}
 				<figure class="card text-card hds-box">
-					<svg class="avatar" viewBox="0 0 5 5" style="background: {av.bg}" aria-hidden="true">
-						{#each av.cells as cell}
-							<rect x={cell.x} y={cell.y} width="1" height="1" fill={av.fg} />
-						{/each}
+					{#if review.imageUrl}
+						<img class="avatar photo card-avatar" src={review.imageUrl} alt={review.name} />
+					{:else}
+						<svg
+							class="avatar card-avatar"
+							viewBox="0 0 5 5"
+							style="background: {av.bg}"
+							aria-hidden="true"
+						>
+							{#each av.cells as cell}
+								<rect x={cell.x} y={cell.y} width="1" height="1" fill={av.fg} />
+							{/each}
+						</svg>
+					{/if}
+					<svg class="quote-mark" viewBox="0 0 24 24" aria-hidden="true">
+						<path
+							d="M10 7c-3.3 0-6 2.7-6 6v4h6v-6H7c0-1.7 1.3-3 3-3V7zm10 0c-3.3 0-6 2.7-6 6v4h6v-6h-3c0-1.7 1.3-3 3-3V7z"
+						/>
 					</svg>
+					{#if review.summary}
+						<p class="text-summary">{review.summary}</p>
+					{/if}
 					<blockquote>&ldquo;{review.quote}&rdquo;</blockquote>
 					<figcaption>
-						<span class="name">{review.name}</span>
-						<span class="role">{review.role}</span>
+						<span class="caption-text">
+							<span class="name">{review.name}</span>
+							{@render meta(review)}
+						</span>
 					</figcaption>
 				</figure>
 			{:else}
@@ -160,8 +204,8 @@
 					{#if !playing[i]}
 						<div class="poster-scrim"></div>
 
-						{#if !started[i] && review.summary}
-							<p class="video-summary">"{review.summary}"</p>
+						{#if review.summary}
+							<p class="video-summary">“{review.summary}”</p>
 						{/if}
 
 						<button
@@ -181,8 +225,13 @@
 						</button>
 
 						<figcaption>
-							<span class="name">{review.name}</span>
-							<span class="role">{review.role}</span>
+							{#if review.imageUrl}
+								<img class="avatar photo" src={review.imageUrl} alt={review.name} />
+							{/if}
+							<span class="caption-text">
+								<span class="name">{review.name}</span>
+								{@render meta(review)}
+							</span>
 						</figcaption>
 					{/if}
 				</figure>
@@ -266,6 +315,22 @@
 		flex-direction: column;
 	}
 
+	.quote-mark {
+		width: 40px;
+		height: 40px;
+		margin-bottom: 20px;
+		fill: var(--accent);
+		opacity: 0.14;
+		flex-shrink: 0;
+	}
+
+	.card-avatar {
+		position: absolute;
+		top: 28px;
+		right: 28px;
+		z-index: 1;
+	}
+
 	.avatar {
 		width: 46px;
 		height: 46px;
@@ -275,36 +340,80 @@
 		shape-rendering: crispEdges;
 	}
 
+	.avatar.photo {
+		object-fit: cover;
+	}
+
+	.text-summary {
+		margin: 0 0 14px;
+		font-family: var(--font-serif);
+		font-size: 18px;
+		font-weight: 800;
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+		color: var(--text);
+	}
+
 	blockquote {
 		font-size: 16px;
 		line-height: 1.7;
 		color: var(--text);
-		margin: 20px 0 0;
+		margin: 0 0 20px;
 		flex: 1;
+		font-family: var(--font-serif);
 	}
 
 	.text-card figcaption {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.caption-text {
 		display: flex;
 		flex-direction: column;
-		gap: 0;
+		justify-content: center;
+		gap: 2px;
+		min-width: 0;
 	}
 
 	.name {
 		font-size: 16px;
 		font-weight: 600;
 		color: var(--text);
-		line-height: 1.2;
+		line-height: 1.3;
 	}
 
 	.handwritten .name {
 		font-family: 'Caveat', cursive;
 		font-size: 28px;
 		font-weight: 600;
+		line-height: 1.15;
 	}
 
 	.role {
-		font-size: 13px;
+		font-size: 14px;
+		line-height: 1.35;
 		color: var(--text-light);
+		margin-top: 4px;
+		font-family: var(--font-serif);
+	}
+
+	.company {
+		align-self: flex-start;
+		font-size: 13px;
+		line-height: 1.35;
+		font-weight: 500;
+		color: var(--text);
+		text-decoration: none;
+	}
+
+	a.company:hover {
+		text-decoration: underline;
+	}
+
+	.handwritten .company {
+		font-weight: 600;
 	}
 
 	.video-card {
@@ -344,13 +453,12 @@
 		right: 20px;
 		margin: 0;
 		font-family: var(--font-serif);
-		font-size: 18px;
+		font-size: 16px;
 		font-weight: 800;
 		line-height: 1.25;
 		letter-spacing: -0.01em;
 		color: #fff;
 		text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
-		font-style: italic;
 	}
 
 	.play-btn {
@@ -400,7 +508,12 @@
 		padding: 40px 20px 20px;
 		background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
 		display: flex;
-		flex-direction: column;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.video-card .avatar.photo {
+		border: 2px solid rgba(255, 255, 255, 0.7);
 	}
 
 	.video-card .name {
@@ -411,6 +524,10 @@
 		color: rgba(255, 255, 255, 0.75);
 	}
 
+	.video-card .company {
+		color: rgba(255, 255, 255, 0.9);
+	}
+
 	@media (max-width: 600px) {
 		.scroll-row {
 			--side-padding: max(20px, calc((100vw - 1000px) / 2));

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

@@ -2,12 +2,19 @@ interface TextReview {
     type: 'text';
     name: string;
     role: string;
+    company?: string;
+    companyUrl?: string;
+    imageUrl?: string;
+    summary?: string;
     quote: string;
 }
 interface VideoReview {
     type: 'video';
     name: string;
     role: string;
+    company: string;
+    companyUrl?: string;
+    imageUrl?: string;
     videoUrl?: string;
     posterUrl?: string;
     summary?: string;

package/dist/marketing/index.d.ts

@@ -1,6 +1,7 @@
 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 HeaderNavMenu } from './Header/HeaderNavMenu.svelte';
 export { default as HeaderLanguageToggle } from './Header/HeaderLanguageToggle.svelte';
 export { buildLocalizedUrl } from './Header/language.js';
 export type { LanguageOption } from './Header/language.js';

package/dist/marketing/index.js

@@ -3,6 +3,7 @@ export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte
 // ## Header
 export { default as Header } from './Header/Header.svelte';
 export { default as HeaderNavLink } from './Header/HeaderNavLink.svelte';
+export { default as HeaderNavMenu } from './Header/HeaderNavMenu.svelte';
 export { default as HeaderLanguageToggle } from './Header/HeaderLanguageToggle.svelte';
 export { buildLocalizedUrl } from './Header/language.js';
 // ## Footer

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.13",
+	"version": "2.1.15",
 	"license": "MIT",
 	"private": false,
 	"repository": {