@hyvor/design 2.1.8-beta.5 → 2.1.9

package/dist/marketing/FAQ/FAQ.svelte

@@ -1,233 +0,0 @@
-<script lang="ts">
-	interface FaqItem {
-		q: string;
-		/** answer content as HTML — also used verbatim as the rich schema's answer text */
-		a: string;
-	}
-
-	interface Props {
-		items: FaqItem[];
-		columns?: 1 | 2;
-		// emit the FAQPage JSON-LD rich schema into <svelte:head>
-		richSchema?: boolean;
-	}
-
-	let { items, columns = 2, richSchema = true }: Props = $props();
-
-	const uid = $props.id();
-
-	// which items go in which column (left-to-right, top-to-bottom within each column),
-	// carrying each item's original index along so column splitting doesn't affect it
-	const cols = $derived.by(() => {
-		const indexed = items.map((item, index) => ({ item, index }));
-		if (columns === 1) return [indexed];
-		const mid = Math.ceil(indexed.length / 2);
-		return [indexed.slice(0, mid), indexed.slice(mid)];
-	});
-
-	// independent open/close state per item, first one open by default
-	let openStates = $state(items.map((_, i) => i === 0));
-
-	function toggle(i: number) {
-		openStates[i] = !openStates[i];
-	}
-
-	// FAQPage rich schema, generated straight from the same array that renders the accordion
-	// (Google's FAQPage guidelines allow a limited set of formatting HTML in the answer text)
-	const richSchemaObj = $derived({
-		'@context': 'https://schema.org',
-		'@type': 'FAQPage',
-		mainEntity: items.map((item) => ({
-			'@type': 'Question',
-			name: item.q,
-			acceptedAnswer: {
-				'@type': 'Answer',
-				text: item.a
-			}
-		}))
-	});
-
-	const richSchemaScript = $derived(
-		'<' + 'script type="application/ld+json">' + JSON.stringify(richSchemaObj) + '<' + '/script>'
-	);
-</script>
-
-<svelte:head>
-	{#if richSchema}
-		{@html richSchemaScript}
-	{/if}
-</svelte:head>
-
-<div class="hds-faq" class:single={columns === 1}>
-	{#each cols as col, colIndex (colIndex)}
-		<div class="faq-col">
-			{#each col as { item, index } (item.q)}
-				<div class="faq" class:open={openStates[index]}>
-					<h3 class="heading">
-						<button
-							class="trigger"
-							id="hds-faq-trigger-{uid}-{index}"
-							onclick={() => toggle(index)}
-							aria-expanded={openStates[index]}
-							aria-controls="hds-faq-panel-{uid}-{index}"
-						>
-							<span class="q">{item.q}</span>
-							<span class="toggle-icon" aria-hidden="true">
-								<span class="line horizontal"></span>
-								<span class="line vertical"></span>
-							</span>
-						</button>
-					</h3>
-
-					<div
-						class="body"
-						class:open={openStates[index]}
-						role="region"
-						id="hds-faq-panel-{uid}-{index}"
-						aria-labelledby="hds-faq-trigger-{uid}-{index}"
-					>
-						<div class="body-inner">
-							<div class="a">{@html item.a}</div>
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-	{/each}
-</div>
-
-<style>
-	.hds-faq {
-		display: flex;
-		gap: 0 60px;
-	}
-
-	.hds-faq.single {
-		display: block;
-	}
-
-	.faq-col {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.faq {
-		border-bottom: 1px solid var(--border);
-	}
-
-	.heading {
-		margin: 0;
-		font-size: inherit;
-		font-weight: inherit;
-	}
-
-	.trigger {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 20px;
-		width: 100%;
-		padding: 20px 0;
-		background: none;
-		border: none;
-		cursor: pointer;
-		text-align: left;
-		color: inherit;
-		font: inherit;
-	}
-
-	.q {
-		font-size: 16px;
-		font-weight: 600;
-		letter-spacing: -0.01em;
-	}
-
-	.toggle-icon {
-		position: relative;
-		flex-shrink: 0;
-		width: 24px;
-		height: 24px;
-		border-radius: 50%;
-		background: var(--accent-light-mid);
-		color: var(--accent);
-		transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
-	}
-
-	.faq.open .toggle-icon {
-		transform: rotate(180deg);
-	}
-
-	.line {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		background: currentColor;
-		border-radius: 2px;
-		transform: translate(-50%, -50%);
-		transition:
-			transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
-			opacity 0.2s ease;
-	}
-
-	.line.horizontal {
-		width: 12px;
-		height: 2px;
-	}
-
-	.line.vertical {
-		width: 2px;
-		height: 12px;
-	}
-
-	.faq.open .line.vertical {
-		transform: translate(-50%, -50%) rotate(90deg);
-		opacity: 0;
-	}
-
-	/* CSS grid row trick: content stays in DOM for SEO, height animates via grid */
-	.body {
-		display: grid;
-		grid-template-rows: 0fr;
-		transition: grid-template-rows 0.3s cubic-bezier(0.65, 0, 0.35, 1);
-	}
-
-	.body.open {
-		grid-template-rows: 1fr;
-	}
-
-	.body-inner {
-		overflow: hidden;
-	}
-
-	.a {
-		padding: 0 30px 22px 0;
-		font-size: 15px;
-		line-height: 1.6;
-		color: var(--text-light);
-		opacity: 0;
-		transform: translateY(-6px);
-		transition:
-			opacity 0.25s ease,
-			transform 0.25s ease;
-	}
-
-	.body.open .a {
-		opacity: 1;
-		transform: translateY(0);
-		transition-delay: 0.08s;
-	}
-
-	/* answers are raw HTML (@html) — style plain <a> tags to match the design
-	   system's Link component, which snippet-based answers would use */
-	.a :global(a) {
-		color: var(--link);
-		text-decoration: underline;
-	}
-
-	@media (max-width: 768px) {
-		.hds-faq {
-			flex-direction: column;
-			gap: 0;
-		}
-	}
-</style>

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

@@ -1,13 +0,0 @@
-interface FaqItem {
-    q: string;
-    /** answer content as HTML — also used verbatim as the rich schema's answer text */
-    a: string;
-}
-interface Props {
-    items: FaqItem[];
-    columns?: 1 | 2;
-    richSchema?: boolean;
-}
-declare const FAQ: import("svelte").Component<Props, {}, "">;
-type FAQ = ReturnType<typeof FAQ>;
-export default FAQ;

package/dist/marketing/FeatureSplit/FeatureSplit.svelte

@@ -1,325 +0,0 @@
-<script lang="ts">
-	import Button from '../../components/Button/Button.svelte';
-	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
-	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
-	import type { Snippet } from 'svelte';
-
-	type ButtonConfig = { href: string; label: string; external?: boolean };
-
-	interface Props {
-		eyebrow: string;
-		title: string | Snippet;
-		description: string;
-		bullets?: string[] | Snippet;
-		button?: ButtonConfig | ButtonConfig[] | null;
-		flip?: boolean;
-		altBg?: boolean;
-		overlap?: boolean;
-		interactiveBullets?: boolean;
-		visual: Snippet<[activeBullet: number]>;
-		after?: Snippet;
-		left?: Snippet;
-		max?: boolean;
-	}
-
-	let {
-		eyebrow,
-		title,
-		description,
-		bullets = [],
-		button = null,
-		flip = false,
-		altBg = false,
-		overlap = false,
-		interactiveBullets = false,
-		visual,
-		after,
-		left,
-		max = false
-	}: Props = $props();
-
-	let inView = $state(false);
-	let activeBullet = $state(0);
-
-	// how long the active bullet's progress bar takes to fill before auto-advancing
-	const AUTO_ADVANCE_MS = 5000;
-
-	$effect(() => {
-		if (!interactiveBullets || !inView) return;
-		if (!Array.isArray(bullets) || bullets.length <= 1) return;
-		activeBullet;
-		const count = bullets.length;
-		const timer = setTimeout(() => {
-			activeBullet = (activeBullet + 1) % count;
-		}, AUTO_ADVANCE_MS);
-		return () => clearTimeout(timer);
-	});
-
-	function onView(node: HTMLElement, callback: () => void) {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				if (entries[0]?.isIntersecting) {
-					callback();
-					observer.disconnect();
-				}
-			},
-			{ threshold: 0.25 }
-		);
-		observer.observe(node);
-		return {
-			destroy() {
-				observer.disconnect();
-			}
-		};
-	}
-</script>
-
-<section class="hds-feature-split" class:alt-bg={altBg}>
-	<div class={max ? 'hds-container-max split' : 'hds-container split'} class:flip class:overlap>
-		<div class="text-col" class:in-view={inView} use:onView={() => (inView = true)}>
-			{#if left}
-				{@render left()}
-			{:else}
-				<span class="eyebrow">{eyebrow}</span>
-				<h2>
-					{#if typeof title === 'string'}
-						{@html title}
-					{:else}
-						{@render title()}
-					{/if}
-				</h2>
-				<p>{description}</p>
-
-				{#if Array.isArray(bullets)}
-					{#if bullets.length}
-						<ul class="bullets" class:interactive={interactiveBullets}>
-							{#each bullets as b, i}
-								<li>
-									{#if interactiveBullets}
-										<button
-											type="button"
-											class="bullet-btn"
-											class:active={activeBullet === i}
-											style="animation-duration: {AUTO_ADVANCE_MS}ms"
-											onclick={() => (activeBullet = i)}
-										>
-											<IconCheckCircleFill size={14} />{b}
-										</button>
-									{:else}
-										<IconCheckCircleFill size={14} />{b}
-									{/if}
-								</li>
-							{/each}
-						</ul>
-					{/if}
-				{:else if bullets}
-					{@render bullets()}
-				{/if}
-
-				{#if button}
-					{@const buttons = Array.isArray(button) ? button : [button]}
-					<div class="buttons">
-						{#each buttons as b}
-							<Button
-								as="a"
-								href={b.href}
-								target={b.external ? '_blank' : undefined}
-								rel={b.external ? 'noopener' : undefined}
-								variant="outline"
-								size="small"
-							>
-								{b.label}
-								{#snippet end()}<IconBoxArrowUpRight size={11} />{/snippet}
-							</Button>
-						{/each}
-					</div>
-				{/if}
-			{/if}
-		</div>
-
-		<div class="visual-col">
-			{@render visual(activeBullet)}
-		</div>
-	</div>
-
-	{#if after}
-		<div class="hds-container-max">
-			{@render after()}
-		</div>
-	{/if}
-</section>
-
-<style>
-	.hds-feature-split {
-		padding: 100px 0;
-		overflow-x: hidden;
-	}
-
-	.alt-bg {
-		background: color-mix(in srgb, var(--accent) 10%, var(--background));
-	}
-
-	.split {
-		display: flex;
-		align-items: center;
-		gap: 72px;
-	}
-
-	.split.flip {
-		flex-direction: row-reverse;
-	}
-
-	.text-col,
-	.visual-col {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.text-col {
-		opacity: 0;
-		transform: translateY(18px);
-		transition:
-			opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
-			transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-
-	.text-col.in-view {
-		opacity: 1;
-		transform: none;
-	}
-	.split.overlap .text-col {
-		z-index: 2;
-	}
-
-	.eyebrow {
-		display: inline-block;
-		font-size: 12px;
-		font-weight: 700;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--accent);
-		margin-bottom: 16px;
-	}
-
-	h2 {
-		font-size: clamp(26px, 3.5vw, 38px);
-		font-weight: 800;
-		letter-spacing: -0.02em;
-		line-height: 1.15;
-		margin: 0 0 16px;
-	}
-
-	p {
-		font-size: 16px;
-		line-height: 1.7;
-		color: var(--text-light);
-		margin: 0 0 28px;
-		max-width: 440px;
-	}
-
-	.bullets {
-		list-style: none;
-		margin: 0 0 32px;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-	}
-
-	.bullets li {
-		display: flex;
-		align-items: flex-start;
-		gap: 10px;
-		font-size: 1rem;
-		text-align: left;
-	}
-
-	.bullets li :global(svg) {
-		color: var(--accent);
-		flex-shrink: 0;
-		margin-top: 0.3em;
-	}
-
-	.bullet-btn {
-		position: relative;
-		display: flex;
-		align-items: flex-start;
-		gap: 10px;
-		width: 100%;
-		padding: 8px 10px;
-		border: none;
-		border-radius: 20px;
-		background-color: transparent;
-		background-image: linear-gradient(
-			color-mix(in srgb, var(--accent) 14%, transparent),
-			color-mix(in srgb, var(--accent) 14%, transparent)
-		);
-		background-repeat: no-repeat;
-		background-position: left center;
-		background-size: 0% 100%;
-		color: var(--text-light);
-		font: inherit;
-		font-size: 1rem;
-		text-align: left;
-		cursor: pointer;
-		transition:
-			background-color 0.2s,
-			color 0.2s;
-	}
-
-	.bullet-btn:hover {
-		background-color: color-mix(in srgb, var(--text) 4%, transparent);
-	}
-
-	.bullet-btn.active {
-		color: var(--text);
-		animation-name: bullet-fill;
-		animation-timing-function: linear;
-		animation-fill-mode: forwards;
-	}
-
-	@keyframes bullet-fill {
-		from {
-			background-size: 0% 100%;
-		}
-		to {
-			background-size: 100% 100%;
-		}
-	}
-
-	.bullets.interactive li :global(svg) {
-		color: var(--text-light);
-	}
-
-	.bullets.interactive li:has(.bullet-btn.active) :global(svg) {
-		color: var(--accent);
-	}
-
-	.buttons {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 12px;
-	}
-
-	@media (max-width: 900px) {
-		.split,
-		.split.flip {
-			flex-direction: column;
-			align-items: stretch;
-			gap: 48px;
-		}
-
-		.text-col {
-			width: 100%;
-			text-align: left;
-		}
-
-		.visual-col {
-			width: 100%;
-		}
-
-		p {
-			max-width: 100%;
-		}
-	}
-</style>

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

@@ -1,24 +0,0 @@
-import type { Snippet } from 'svelte';
-type ButtonConfig = {
-    href: string;
-    label: string;
-    external?: boolean;
-};
-interface Props {
-    eyebrow: string;
-    title: string | Snippet;
-    description: string;
-    bullets?: string[] | Snippet;
-    button?: ButtonConfig | ButtonConfig[] | null;
-    flip?: boolean;
-    altBg?: boolean;
-    overlap?: boolean;
-    interactiveBullets?: boolean;
-    visual: Snippet<[activeBullet: number]>;
-    after?: Snippet;
-    left?: Snippet;
-    max?: boolean;
-}
-declare const FeatureSplit: import("svelte").Component<Props, {}, "">;
-type FeatureSplit = ReturnType<typeof FeatureSplit>;
-export default FeatureSplit;