@hyvor/design 2.1.9 → 2.1.11

package/dist/cloud/HyvorBar/BarSupport.svelte

@@ -111,7 +111,7 @@
 						{/snippet}
 					</ActionListItem>
 				</a>
-				<a href={SOCIAL_LINKS.blueksy} target="_blank">
+				<a href={SOCIAL_LINKS.bluesky} target="_blank">
 					<ActionListItem>
 						Bluesky
 						{#snippet start()}

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -2,6 +2,7 @@
 	import ColorPicker from 'svelte-awesome-color-picker';
 	import { clickOutside } from '../index.js';
 	import { createEventDispatcher } from 'svelte';
+	import type { DropdownAlign, DropdownPosition } from '../Dropdown/dropdown.types.js';
 
 	interface Props {
 		color?: string;
@@ -9,6 +10,8 @@
 		show?: boolean;
 		'aria-label'?: string;
 		alpha?: boolean;
+		align?: DropdownAlign;
+		position?: DropdownPosition;
 		oninput?: (color: string) => void;
 		onchange?: (color: string) => void;
 	}
@@ -19,6 +22,8 @@
 		show = $bindable(false),
 		'aria-label': ariaLabel = '',
 		alpha = false,
+		align = 'start',
+		position = 'bottom',
 		oninput,
 		onchange
 	}: Props = $props();
@@ -29,25 +34,79 @@
 	}>();
 
 	let buttonElement: HTMLButtonElement;
+	let wrapElement: HTMLElement | undefined = $state();
 	let pickerTop = $state(0);
 	let pickerLeft = $state(0);
 
+	const GAP = 5;
+	const SPACE_AROUND = 15;
+
 	function updatePosition() {
-		if (buttonElement) {
-			const rect = buttonElement.getBoundingClientRect();
-			pickerLeft = rect.right;
-			pickerTop = rect.bottom;
+		if (!buttonElement || !wrapElement) return;
+
+		const triggerRect = buttonElement.getBoundingClientRect();
+		const contentRect = wrapElement.getBoundingClientRect();
+		const documentWidth = document.documentElement.clientWidth;
+		const width = contentRect.width;
+		const height = contentRect.height;
+
+		let top = triggerRect.bottom + GAP;
+		let left = triggerRect.left;
+
+		if (position === 'bottom') {
+			top = triggerRect.bottom + GAP;
+		} else if (position === 'top') {
+			top = triggerRect.top - height - GAP;
+		} else if (position === 'left') {
+			left = triggerRect.left - width - GAP;
+		} else if (position === 'right') {
+			left = triggerRect.right + GAP;
+		}
+
+		if (position === 'bottom' || position === 'top') {
+			if (align === 'start') {
+				left = Math.min(triggerRect.left, documentWidth - width - SPACE_AROUND);
+			} else if (align === 'center') {
+				left = triggerRect.left + triggerRect.width / 2 - width / 2;
+			} else if (align === 'end') {
+				left = triggerRect.right - width;
+			}
+			left = Math.max(left, SPACE_AROUND);
+		} else {
+			if (align === 'start') {
+				top = triggerRect.top;
+			} else if (align === 'center') {
+				top = triggerRect.top + triggerRect.height / 2 - height / 2;
+			} else if (align === 'end') {
+				top = triggerRect.bottom - height;
+			}
+			top = Math.max(top, SPACE_AROUND);
 		}
+
+		pickerTop = top;
+		pickerLeft = left;
 	}
 
 	$effect(() => {
-		if (show) {
+		// rerun when positioning inputs change
+		position;
+		align;
+		show;
+
+		if (show && wrapElement) {
 			updatePosition();
 			window.addEventListener('scroll', updatePosition, true);
 			window.addEventListener('resize', updatePosition);
-		} else {
-			window.removeEventListener('scroll', updatePosition, true);
-			window.removeEventListener('resize', updatePosition);
+
+			// the color picker widget can change size after it mounts
+			const observer = new MutationObserver(updatePosition);
+			observer.observe(wrapElement, { subtree: true, childList: true });
+
+			return () => {
+				observer.disconnect();
+				window.removeEventListener('scroll', updatePosition, true);
+				window.removeEventListener('resize', updatePosition);
+			};
 		}
 
 		return () => {
@@ -87,6 +146,7 @@
 	{#if show}
 		<div
 			class="color-picker-wrap"
+			bind:this={wrapElement}
 			style:top="{pickerTop}px"
 			style:left="{pickerLeft}px"
 			use:clickOutside={{
@@ -114,7 +174,6 @@
 	}
 	div {
 		position: fixed;
-		width: 0;
 		z-index: 1000;
 	}
 </style>

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

@@ -1,10 +1,13 @@
 import ColorPicker from 'svelte-awesome-color-picker';
+import type { DropdownAlign, DropdownPosition } from '../Dropdown/dropdown.types.js';
 interface Props {
     color?: string;
     size?: number;
     show?: boolean;
     'aria-label'?: string;
     alpha?: boolean;
+    align?: DropdownAlign;
+    position?: DropdownPosition;
     oninput?: (color: string) => void;
     onchange?: (color: string) => void;
 }

package/dist/components/Confetti/confetti.d.ts

@@ -0,0 +1,7 @@
+export declare function confetti(options?: {
+    particleCount?: number;
+    duration?: number;
+    zIndex?: number;
+}): {
+    stop: () => void;
+};

package/dist/components/Confetti/confetti.js

@@ -0,0 +1,102 @@
+export function confetti(options = {}) {
+    const { particleCount = 220, duration = 12000, zIndex = 20000000 } = options;
+    const gravity = 0.18;
+    const drag = 0.96;
+    const canvas = document.createElement('canvas');
+    canvas.style.position = 'fixed';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+    canvas.style.width = '100vw';
+    canvas.style.height = '100vh';
+    canvas.style.pointerEvents = 'none';
+    canvas.style.zIndex = String(zIndex);
+    document.body.appendChild(canvas);
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    const colors = ['#ffba6b', '#8cdaff', '#b5ffb0', '#ff9090', '#ffbfff', '#d894ff', '#fff79b'];
+    const particles = [];
+    let animationFrameId;
+    let timeoutId = null;
+    let running = true;
+    const originX = canvas.width / 2;
+    const originY = canvas.height / 2;
+    const createParticle = () => {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = Math.random() * 16 + 10;
+        return {
+            x: originX + (Math.random() - 0.5) * 40,
+            y: originY + (Math.random() - 0.5) * 40,
+            size: Math.random() * 9 + 5,
+            color: colors[Math.floor(Math.random() * colors.length)],
+            velocityX: Math.cos(angle) * speed,
+            velocityY: Math.sin(angle) * speed,
+            rotation: Math.random() * 360,
+            rotationSpeed: Math.random() * 12 - 6,
+            wobble: Math.random() * Math.PI * 2,
+            wobbleSpeed: Math.random() * 0.1 + 0.05
+        };
+    };
+    const drawParticle = (particle) => {
+        ctx.save();
+        ctx.translate(particle.x, particle.y);
+        ctx.rotate((particle.rotation * Math.PI) / 180);
+        ctx.fillStyle = particle.color;
+        ctx.beginPath();
+        ctx.roundRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size, 1);
+        ctx.fill();
+        ctx.restore();
+    };
+    const updateParticles = () => {
+        for (const particle of particles) {
+            particle.velocityX *= drag;
+            particle.velocityY = particle.velocityY * drag + gravity;
+            particle.wobble += particle.wobbleSpeed;
+            particle.x += particle.velocityX + Math.sin(particle.wobble) * 0.8;
+            particle.y += particle.velocityY;
+            particle.rotation += particle.rotationSpeed;
+        }
+        const remaining = particles.filter((particle) => particle.y - particle.size <= canvas.height);
+        particles.length = 0;
+        particles.push(...remaining);
+    };
+    const render = () => {
+        if (!running)
+            return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (const particle of particles)
+            drawParticle(particle);
+        updateParticles();
+        if (particles.length === 0) {
+            stopConfetti();
+            return;
+        }
+        animationFrameId = requestAnimationFrame(render);
+    };
+    let stopped = false;
+    const stopConfetti = () => {
+        if (stopped)
+            return;
+        stopped = true;
+        running = false;
+        cancelAnimationFrame(animationFrameId);
+        if (timeoutId !== null)
+            clearTimeout(timeoutId);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        canvas.remove();
+    };
+    const startConfetti = () => {
+        particles.length = 0;
+        for (let i = 0; i < particleCount; i++)
+            particles.push(createParticle());
+        running = true;
+        render();
+        if (duration > 0) {
+            timeoutId = window.setTimeout(stopConfetti, duration);
+        }
+    };
+    startConfetti();
+    return {
+        stop: stopConfetti
+    };
+}

package/dist/components/NavLink/NavLinkGroup.svelte

@@ -98,6 +98,7 @@
 		observer.observe(container, {
 			attributes: true,
 			attributeFilter: ['class'],
+			childList: true,
 			subtree: true
 		});
 

package/dist/index.css

@@ -95,3 +95,7 @@ a {
 	font-weight: var(--shiki-dark-font-weight) !important;
 	text-decoration: var(--shiki-dark-text-decoration) !important;
 }
+
+::selection {
+	background-color: var(--selection, var(--accent-light));
+}

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordion.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import Feature from './AllFeaturesAccordionFeature.svelte';
+	import IconChevronDown from '@hyvor/icons/IconChevronDown';
+
+	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">
+							<IconChevronDown size={14} />
+						</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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	interface Props {
+		icon: Component;
+		title: string;
+		description: string;
+		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={30} />
+	</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;
+	}
+
+	.icon-bg {
+		position: absolute;
+		top: 0;
+		right: 4px;
+		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

@@ -0,0 +1,10 @@
+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;