@hyvor/design 2.1.8-beta.5 → 2.1.9

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,11 +14,9 @@
 		href?: string;
 		subName?: undefined | string;
 		darkToggle?: boolean;
-		center?: Snippet;
-		end?: Snippet;
+		center?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
 		max?: boolean;
-		logoAltText?: string;
-		menuLabel?: string;
 	}
 
 	let {
@@ -34,40 +29,20 @@
 		darkToggle = true,
 		center,
 		end,
-		max = false,
-		logoAltText = 'Logo',
-		menuLabel = 'Menu'
+		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">
 			<a class="nav-brand" {href}>
 				<img
 					src={logo || `${instance}/api/public/logo/${product}.svg`}
-					alt="{name + (subName ? ' ' + subName : '')} {logoAltText}"
-					width="26"
-					height="26"
+					alt="{name + (subName ? ' ' + subName : '')} Logo"
+					width="30"
+					height="30"
 				/>
 				<span class="brand-product">
 					<span class="brand">{name}</span>
@@ -95,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={menuLabel} aria-expanded={mobileOpen}>
-						{#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>
@@ -140,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) {
@@ -157,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;
@@ -167,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;
@@ -189,7 +148,7 @@
 		flex: 1;
 		display: flex;
 		align-items: center;
-		gap: 2px;
+		gap: 6px;
 		justify-content: center;
 	}
 
@@ -233,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,11 +6,9 @@ interface Props {
     href?: string;
     subName?: undefined | string;
     darkToggle?: boolean;
-    center?: Snippet;
-    end?: Snippet;
+    center?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
     max?: boolean;
-    logoAltText?: string;
-    menuLabel?: string;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/marketing/index.d.ts

@@ -1,9 +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 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';
@@ -12,17 +8,3 @@ export type { NavSectionConfig, NavConfig, NavPageConfig, NavFoldingSectionConfi
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';
 export { default as Document } from './Document/Document.svelte';
-export { default as Hero } from './Hero/Hero.svelte';
-export { default as FeatureSplit } from './FeatureSplit/FeatureSplit.svelte';
-export { default as Testimonials } from './Testimonials/Testimonials.svelte';
-export { default as FullTrialSignup } from './FullTrialSignup/FullTrialSignup.svelte';
-export { default as SpotlightSplit } from './SpotlightSplit/SpotlightSplit.svelte';
-export { default as Seal } from './Seal/Seal.svelte';
-export { default as GdprSeal } from './Seal/GdprSeal.svelte';
-export { default as CcpaSeal } from './Seal/CcpaSeal.svelte';
-export { default as SsoSeal } from './Seal/SsoSeal.svelte';
-export { default as IsoSeal } from './Seal/IsoSeal.svelte';
-export { default as LogoStrip } from './LogoStrip/LogoStrip.svelte';
-export { default as AllFeaturesAccordion } from './AllFeaturesAccordion/AllFeaturesAccordion.svelte';
-export { default as AllFeaturesAccordionFeature } from './AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte';
-export { default as FAQ } from './FAQ/FAQ.svelte';

package/dist/marketing/index.js

@@ -1,8 +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 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';
@@ -10,17 +7,3 @@ export { loadDocsPage } from './Docs/fulldocs.js';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';
 export { default as Document } from './Document/Document.svelte';
-export { default as Hero } from './Hero/Hero.svelte';
-export { default as FeatureSplit } from './FeatureSplit/FeatureSplit.svelte';
-export { default as Testimonials } from './Testimonials/Testimonials.svelte';
-export { default as FullTrialSignup } from './FullTrialSignup/FullTrialSignup.svelte';
-export { default as SpotlightSplit } from './SpotlightSplit/SpotlightSplit.svelte';
-export { default as Seal } from './Seal/Seal.svelte';
-export { default as GdprSeal } from './Seal/GdprSeal.svelte';
-export { default as CcpaSeal } from './Seal/CcpaSeal.svelte';
-export { default as SsoSeal } from './Seal/SsoSeal.svelte';
-export { default as IsoSeal } from './Seal/IsoSeal.svelte';
-export { default as LogoStrip } from './LogoStrip/LogoStrip.svelte';
-export { default as AllFeaturesAccordion } from './AllFeaturesAccordion/AllFeaturesAccordion.svelte';
-export { default as AllFeaturesAccordionFeature } from './AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte';
-export { default as FAQ } from './FAQ/FAQ.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.5",
+	"version": "2.1.9",
 	"license": "MIT",
 	"private": false,
 	"repository": {

package/dist/components/Button/ButtonGroup.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	interface Props {
-		children?: import('svelte').Snippet;
-	}
-
-	let { children }: Props = $props();
-</script>
-
-<div class="button-group">
-	{@render children?.()}
-</div>
-
-<style>
-	.button-group {
-		display: inline-flex;
-		gap: 6px;
-	}
-</style>

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordion.svelte

@@ -1,251 +0,0 @@
-<script lang="ts">
-	import IconCaretDown from '@hyvor/icons/IconCaretDown';
-	import type { Component } from 'svelte';
-	import Feature from './AllFeaturesAccordionFeature.svelte';
-
-	interface FeatureItem {
-		icon: Component;
-		title: string;
-		description: string;
-	}
-
-	interface Category {
-		label: string;
-		icon: Component;
-		color?: string;
-		features: FeatureItem[];
-	}
-
-	interface Props {
-		title?: string;
-		description?: string;
-		categories: Category[];
-		defaultOpenIndex?: number;
-		accentColor?: string;
-		accentColorDark?: string;
-	}
-
-	let {
-		title = "And There's More...",
-		description = '',
-		categories,
-		defaultOpenIndex = 0,
-		accentColor,
-		accentColorDark
-	}: Props = $props();
-
-	let openIndex = $state(defaultOpenIndex);
-
-	function toggle(i: number) {
-		openIndex = openIndex === i ? -1 : i;
-	}
-</script>
-
-<section
-	class="hds-all-features-accordion hds-container"
-	style:--afa-accent={accentColor}
-	style:--afa-accent-dark={accentColorDark}
->
-	<div class="section-header">
-		<h2>{title}</h2>
-		{#if description}
-			<p>{description}</p>
-		{/if}
-	</div>
-
-	<div class="accordion">
-		{#each categories as cat, i}
-			{@const CatIcon = cat.icon}
-			{@const catColor = cat.color || 'var(--accent)'}
-			<div class="accordion-item" class:open={openIndex === i}>
-				<h3 class="accordion-heading">
-					<button
-						class="accordion-trigger"
-						id="hds-accordion-trigger-{i}"
-						onclick={() => toggle(i)}
-						aria-expanded={openIndex === i}
-						aria-controls="hds-accordion-panel-{i}"
-						style="--cat-color: {catColor}"
-					>
-						<span class="cat-icon" aria-hidden="true">
-							<CatIcon size={18} />
-						</span>
-						<span class="cat-label">{cat.label}</span>
-						<span class="cat-count">{cat.features.length} features</span>
-						<span class="chevron" class:rotated={openIndex === i} aria-hidden="true">
-							<IconCaretDown size={16} />
-						</span>
-					</button>
-				</h3>
-
-				<div
-					class="accordion-body"
-					class:open={openIndex === i}
-					role="region"
-					id="hds-accordion-panel-{i}"
-					aria-labelledby="hds-accordion-trigger-{i}"
-				>
-					<div class="accordion-body-inner">
-						<div class="accordion-content">
-							<ul class="features-grid">
-								{#each cat.features as feat}
-									<Feature
-										icon={feat.icon}
-										title={feat.title}
-										description={feat.description}
-										color={catColor}
-									/>
-								{/each}
-							</ul>
-						</div>
-					</div>
-				</div>
-			</div>
-		{/each}
-	</div>
-</section>
-
-<style>
-	.hds-all-features-accordion {
-		padding: 80px 0;
-	}
-
-	.section-header {
-		text-align: center;
-		margin-bottom: 48px;
-	}
-
-	.section-header h2 {
-		font-size: 32px;
-		font-weight: 700;
-		margin: 0 0 6px;
-		font-family: var(--font-serif);
-	}
-
-	.section-header p {
-		font-size: 1rem;
-		color: var(--text-light);
-		margin: 0;
-	}
-
-	.accordion {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	.accordion-item {
-		border-radius: 16px;
-		transition: background 0.2s ease;
-	}
-
-	.accordion-item.open {
-		background: color-mix(in srgb, var(--afa-accent, var(--accent)) 6%, transparent);
-	}
-
-	:global(:root.dark) .accordion-item.open {
-		background: color-mix(
-			in srgb,
-			var(--afa-accent-dark, var(--afa-accent, var(--accent))) 6%,
-			transparent
-		);
-	}
-
-	.accordion-heading {
-		margin: 0;
-		font-size: inherit;
-		font-weight: inherit;
-	}
-
-	.accordion-trigger {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		gap: 14px;
-		padding: 18px 20px;
-		background: none;
-		border: none;
-		border-radius: inherit;
-		cursor: pointer;
-		text-align: left;
-		transition: background 0.15s;
-		color: var(--text);
-	}
-
-	.accordion-item:not(.open) .accordion-trigger:hover {
-		background: var(--hover);
-	}
-
-	.cat-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 34px;
-		height: 34px;
-		border-radius: 10px;
-		color: var(--cat-color);
-		background: color-mix(in srgb, var(--cat-color) 16%, transparent);
-		flex-shrink: 0;
-	}
-
-	.cat-label {
-		font-size: 16px;
-		font-weight: 600;
-		flex: 1;
-	}
-
-	.cat-count {
-		font-size: 13px;
-		color: var(--text-light);
-	}
-
-	.chevron {
-		display: flex;
-		align-items: center;
-		color: var(--text-light);
-		transition: transform 0.2s;
-	}
-
-	.chevron.rotated {
-		transform: rotate(180deg);
-	}
-
-	/* CSS grid row trick: content stays in DOM for SEO, height animates via grid */
-	.accordion-body {
-		display: grid;
-		grid-template-rows: 0fr;
-		transition: grid-template-rows 0.22s ease;
-	}
-
-	.accordion-body.open {
-		grid-template-rows: 1fr;
-	}
-
-	.accordion-body-inner {
-		overflow: hidden;
-	}
-
-	.accordion-content {
-		padding: 8px 20px 28px;
-	}
-
-	.features-grid {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 28px 20px;
-		margin: 0;
-		padding: 0;
-	}
-
-	/* Override AllFeaturesAccordionFeature's width since we're using grid now */
-	/* TODO */
-	.features-grid :global(.feature) {
-		width: auto;
-	}
-
-	@media (max-width: 768px) {
-		.features-grid {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>

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

@@ -1,23 +0,0 @@
-import type { Component } from 'svelte';
-interface FeatureItem {
-    icon: Component;
-    title: string;
-    description: string;
-}
-interface Category {
-    label: string;
-    icon: Component;
-    color?: string;
-    features: FeatureItem[];
-}
-interface Props {
-    title?: string;
-    description?: string;
-    categories: Category[];
-    defaultOpenIndex?: number;
-    accentColor?: string;
-    accentColorDark?: string;
-}
-declare const AllFeaturesAccordion: Component<Props, {}, "">;
-type AllFeaturesAccordion = ReturnType<typeof AllFeaturesAccordion>;
-export default AllFeaturesAccordion;

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">
-	import type { Component } from 'svelte';
-
-	interface Props {
-		icon: Component;
-		title: string;
-		description: string;
-		// any CSS color, e.g. 'var(--green)' or '#4b874b' — defaults to the
-		// theme accent so this works out of the box on any product
-		color?: string;
-	}
-
-	let { icon, title, description, color = 'var(--accent)' }: Props = $props();
-
-	const SvelteComponent = $derived(icon);
-</script>
-
-<li class="feature">
-	<div class="icon-bg" style:color aria-hidden="true">
-		<SvelteComponent size={52} />
-	</div>
-	<div class="content">
-		<h4 class="title">{title}</h4>
-		<p class="description">{description}</p>
-	</div>
-</li>
-
-<style>
-	.feature {
-		position: relative;
-		width: calc(33.33% - 15px);
-		list-style: none;
-		overflow: hidden;
-	}
-
-	.content {
-		position: relative;
-		z-index: 1;
-	}
-
-	/* a large, faint watermark of the feature's own icon, sitting behind the
-	   title/description rather than as a small marker above them */
-	.icon-bg {
-		position: absolute;
-		top: 50%;
-		right: -8px;
-		transform: translateY(-50%);
-		z-index: 0;
-		opacity: 0.14;
-		pointer-events: none;
-	}
-
-	.title {
-		font-weight: 600;
-		font-size: 20px;
-		margin: 0;
-	}
-
-	.description {
-		font-size: 16px;
-		margin: 10px 0 0;
-		color: var(--text-light);
-	}
-
-	@media (max-width: 992px) {
-		.feature {
-			width: 100%;
-			text-align: center;
-		}
-
-		.icon-bg {
-			display: none;
-		}
-	}
-</style>

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordionFeature.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Component } from 'svelte';
-interface Props {
-    icon: Component;
-    title: string;
-    description: string;
-    color?: string;
-}
-declare const AllFeaturesAccordionFeature: Component<Props, {}, "">;
-type AllFeaturesAccordionFeature = ReturnType<typeof AllFeaturesAccordionFeature>;
-export default AllFeaturesAccordionFeature;