@hyvor/design 2.1.20-beta.1 → 2.1.20

package/dist/components/Dropdown/Dropdown.svelte

@@ -13,7 +13,6 @@
 		trigger?: Snippet;
 		content?: Snippet;
 		contentPadding?: number;
-		keepInDom?: boolean;
 	}
 
 	let {
@@ -25,18 +24,18 @@
 		position = 'bottom',
 		trigger,
 		content,
-		contentPadding,
-		keepInDom = false
+		contentPadding
 	}: Props = $props();
 
 	let triggerEl: HTMLElement | undefined = $state();
 </script>
 
 <span class="dropdown" class:relative>
-	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 	<span
 		class="trigger"
 		onclick={() => (show = !show)}
+		role="listbox"
+		tabindex="0"
 		onkeyup={(e) => {
 			if (e.key === 'Escape') {
 				show = false;
@@ -47,7 +46,7 @@
 		{@render trigger?.()}
 	</span>
 
-	{#if show || keepInDom}
+	{#if show}
 		<DropdownContent
 			bind:show
 			{width}

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

@@ -10,7 +10,6 @@ interface Props {
     trigger?: Snippet;
     content?: Snippet;
     contentPadding?: number;
-    keepInDom?: boolean;
 }
 declare const Dropdown: import("svelte").Component<Props, {}, "show">;
 type Dropdown = ReturnType<typeof Dropdown>;

package/dist/components/Dropdown/DropdownContent.svelte

@@ -101,7 +101,6 @@
 	$effect(() => {
 		position;
 		align;
-		show;
 		positionWrap();
 	});
 
@@ -130,9 +129,8 @@
 
 <div
 	class="content-wrap {align} {position}"
-	class:visually-hidden={!show}
 	use:clickOutside={{
-		enabled: closeOnOutsideClick && show,
+		enabled: closeOnOutsideClick,
 		callback: () => (show = false)
 	}}
 	bind:this={contentWrap}
@@ -152,10 +150,6 @@
 		flex-direction: column;
 	}
 
-	.content-wrap.visually-hidden {
-		display: none;
-	}
-
 	.content {
 		overflow-y: auto;
 		min-height: 0;

package/dist/components/Tooltip/Tooltip.svelte

@@ -33,7 +33,6 @@
 	let wrap: HTMLDivElement | undefined = $state();
 	let tooltipEl: HTMLDivElement | undefined = $state();
 	let showTimeout: ReturnType<typeof setTimeout>;
-	const tooltipId = $props.id();
 
 	function positionTooltip() {
 		if (wrap && tooltipEl && show) {
@@ -102,7 +101,7 @@
 	class="tooltip-wrap {color}"
 	onmouseenter={handleMouseEnter}
 	onmouseleave={handleMouseLeave}
-	aria-describedby={!disabled && show ? tooltipId : undefined}
+	role="tooltip"
 	bind:this={wrap}
 	{...wrapperProps}
 >
@@ -110,11 +109,9 @@
 
 	{#if !disabled && show}
 		<div
-			id={tooltipId}
 			class="tooltip {position}"
 			style:max-width={maxWidth + 'px'}
 			bind:this={tooltipEl}
-			role="tooltip"
 			transition:fade={{ duration: 100 }}
 		>
 			{#if tooltip}

package/dist/components/directives/clickOutside.d.ts

@@ -5,7 +5,6 @@ interface Options {
 }
 type Input = Options | Function;
 export declare function clickOutside(node: HTMLElement, input: Input): {
-    update(newInput: Input): void;
     destroy(): void;
-};
+} | undefined;
 export {};

package/dist/components/directives/clickOutside.js

@@ -1,9 +1,8 @@
-function normalize(input) {
-    return typeof input === 'function' ? { callback: input } : input;
-}
 export function clickOutside(node, input) {
-    let options = normalize(input);
-    let listening = false;
+    const options = typeof input === 'function' ? { callback: input } : input;
+    const enabled = options.enabled === undefined ? true : options.enabled;
+    if (!enabled)
+        return;
     const handleClick = (event) => {
         if (!node.contains(event.target)) {
             if (options.stopPropagation)
@@ -11,28 +10,11 @@ export function clickOutside(node, input) {
             options.callback();
         }
     };
-    function sync() {
-        const enabled = options.enabled === undefined ? true : options.enabled;
-        if (enabled && !listening) {
-            listening = true;
-            setTimeout(() => {
-                if (listening)
-                    document.addEventListener('click', handleClick);
-            }, 0);
-        }
-        else if (!enabled && listening) {
-            listening = false;
-            document.removeEventListener('click', handleClick);
-        }
-    }
-    sync();
+    setTimeout(() => {
+        document.addEventListener('click', handleClick);
+    }, 0);
     return {
-        update(newInput) {
-            options = normalize(newInput);
-            sync();
-        },
         destroy() {
-            listening = false;
             document.removeEventListener('click', handleClick);
         }
     };

package/dist/marketing/Testimonials/Testimonials.svelte

@@ -28,9 +28,15 @@
 		label?: string;
 		title?: string;
 		reviews: Review[];
+		handwrittenNames?: boolean;
 	}
 
-	let { label = 'Testimonials', title = 'Loved by our customers.', reviews }: Props = $props();
+	let {
+		label = 'Testimonials',
+		title = 'Loved by our customers.',
+		reviews,
+		handwrittenNames = true
+	}: Props = $props();
 
 	let started: boolean[] = $state(reviews.map(() => false));
 	let playing: boolean[] = $state(reviews.map(() => false));
@@ -126,6 +132,12 @@
 	}
 </script>
 
+<svelte:head>
+	{#if handwrittenNames}
+		<link href="https://fonts.bunny.net/css?family=caveat:600,700" rel="stylesheet" />
+	{/if}
+</svelte:head>
+
 {#snippet meta(review: Review)}
 	<div class="role">
 		{review.role}, <br />
@@ -144,7 +156,7 @@
 	</div>
 {/snippet}
 
-<section class="hds-testimonials">
+<section class="hds-testimonials" class:handwritten={handwrittenNames}>
 	<div class="hds-container head">
 		<p class="label">{label}</p>
 		<h2>{@html title}</h2>
@@ -414,16 +426,24 @@
 	}
 
 	.name {
-		font-size: 18px;
+		font-size: 16px;
 		font-weight: 600;
 		color: var(--text);
 		line-height: 1.3;
 	}
 
+	.handwritten .name {
+		font-family: 'Caveat', cursive;
+		font-size: 28px;
+		font-weight: 600;
+		line-height: 1.15;
+	}
+
 	.role {
 		font-size: 14px;
 		line-height: 1.35;
 		color: var(--text-light);
+		margin-top: 4px;
 		font-family: var(--font-serif);
 	}
 
@@ -440,6 +460,10 @@
 		text-decoration: underline;
 	}
 
+	.handwritten .company {
+		font-weight: 600;
+	}
+
 	.video-card {
 		overflow: hidden;
 		padding: 0;

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

@@ -24,6 +24,7 @@ interface Props {
     label?: string;
     title?: string;
     reviews: Review[];
+    handwrittenNames?: boolean;
 }
 declare const Testimonials: import("svelte").Component<Props, {}, "">;
 type Testimonials = ReturnType<typeof Testimonials>;

package/package.json

@@ -1,9 +1,8 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.20-beta.1",
+	"version": "2.1.20",
 	"license": "MIT",
 	"private": false,
-	"sideEffects": false,
 	"repository": {
 		"url": "https://github.com/hyvor/design"
 	},