@hyvor/design 2.1.14 → 2.1.16

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/DetailCard/DetailCard.svelte

@@ -9,7 +9,8 @@
 
 	let { label, content, children }: Props = $props();
 
-	const labelId = `detail-card-${Math.random().toString(36).substring(2, 15)}`;
+	const uid = $props.id();
+	const labelId = `detail-card-${uid}`;
 </script>
 
 <div class="detail-card" role="region" aria-labelledby={labelId}>

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/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;