@hyvor/design 2.1.20-beta.2 → 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/index.css

@@ -1,89 +1,4 @@
-/* <variables> */
-:root {
-	/**
-    * Each app should have its own accent colors
-    * --accent should be usable with light text
-    * --accent-light and --accent-lightest should be usable with dark text
-    */
-	--accent: #000;
-	--accent-light: #bdbdbd;
-	--accent-lightest: #fafafa;
-	--accent-light-mid: #818181;
-	--accent-text: #fff;
-
-	--border: #e1e1e1;
-
-	--text: #000;
-	--text-light: #777;
-	--text-white: #fff;
-
-	/*
-    * Generally used colors
-    * In most cases, no need to extend these colors
-    */
-	--green-light: #cadfca;
-	--green: #4b874b;
-	--green-dark: #335c33;
-
-	--red-dark: #ab2525;
-	--red: #c05959;
-	--red-light: #ffdfdf;
-
-	--blue-dark: #334b81;
-	--blue: #5875b9;
-	--blue-light: #dae5ff;
-
-	--orange-dark: #8b5b04;
-	--orange: #a98526;
-	--orange-light: #efe3b4;
-
-	--gray-light: #ddd;
-	--gray: #999;
-	--gray-dark: #555;
-
-	--hover: #fafafa;
-	--hover-dark: #f0f0f0;
-
-	--link: #1d85d2;
-
-	--input: #f3f3f3;
-	--input-hover: #ccc;
-	/* checkbox/radio */
-
-	--box-shadow: 0 0 30px #0000000d;
-	--box-shadow-light: 0 0 10px 6px rgba(0, 0, 0, 0.06);
-	--box-radius: 20px;
-	--box-background: #fff;
-
-	--line-height-content: 28px;
-	--header-height: 55px;
-
-	--font-sans-serif: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
-	--font-serif: 'Source Serif 4', serif;
-}
-
-:root.dark {
-	--background: #000;
-
-	--text: #fff;
-	--text-light: #999;
-	--box-background: #1c1c1c;
-
-	--accent-light: #555;
-	--accent-lightest: #2d2d2d;
-
-	--border: #4a4a4a;
-	--link: #7cb6e1;
-	--hover: #232323;
-
-	--input: #333;
-}
-/* </variables> */
-
-
-/**
- * Global styles
- */
+/* font */
 :root {
 	font-family: var(--font-sans-serif);
 	font-size: 16px;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import './variables.css';
 import './index.css';
 import '@fontsource/readex-pro/400.css';
 import '@fontsource/readex-pro/600.css';

package/dist/index.js

@@ -1,3 +1,4 @@
+import './variables.css';
 import './index.css';
 import '@fontsource/readex-pro/400.css';
 import '@fontsource/readex-pro/600.css';

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/dist/variables.css

@@ -0,0 +1,80 @@
+/* variables */
+:root {
+	/**
+    * Each app should have its own accent colors
+    * --accent should be usable with light text
+    * --accent-light and --accent-lightest should be usable with dark text
+    */
+	--accent: #000;
+	--accent-light: #bdbdbd;
+	--accent-lightest: #fafafa;
+	--accent-light-mid: #818181;
+	--accent-text: #fff;
+
+	--border: #e1e1e1;
+
+	--text: #000;
+	--text-light: #777;
+	--text-white: #fff;
+
+	/*
+    * Generally used colors
+    * In most cases, no need to extend these colors
+    */
+	--green-light: #cadfca;
+	--green: #4b874b;
+	--green-dark: #335c33;
+
+	--red-dark: #ab2525;
+	--red: #c05959;
+	--red-light: #ffdfdf;
+
+	--blue-dark: #334b81;
+	--blue: #5875b9;
+	--blue-light: #dae5ff;
+
+	--orange-dark: #8b5b04;
+	--orange: #a98526;
+	--orange-light: #efe3b4;
+
+	--gray-light: #ddd;
+	--gray: #999;
+	--gray-dark: #555;
+
+	--hover: #fafafa;
+	--hover-dark: #f0f0f0;
+
+	--link: #1d85d2;
+
+	--input: #f3f3f3;
+	--input-hover: #ccc;
+	/* checkbox/radio */
+
+	--box-shadow: 0 0 30px #0000000d;
+	--box-shadow-light: 0 0 10px 6px rgba(0, 0, 0, 0.06);
+	--box-radius: 20px;
+	--box-background: #fff;
+
+	--line-height-content: 28px;
+	--header-height: 55px;
+
+	--font-sans-serif: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
+	--font-serif: 'Source Serif 4', serif;
+}
+
+:root.dark {
+	--background: #000;
+
+	--text: #fff;
+	--text-light: #999;
+	--box-background: #1c1c1c;
+
+	--accent-light: #555;
+	--accent-lightest: #2d2d2d;
+
+	--border: #4a4a4a;
+	--link: #7cb6e1;
+	--hover: #232323;
+
+	--input: #333;
+}

package/package.json

@@ -1,13 +1,8 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.20-beta.2",
+	"version": "2.1.20",
 	"license": "MIT",
 	"private": false,
-	"sideEffects": [
-		"./dist/index.js",
-		"./dist/index.css",
-		"**/*.css"
-	],
 	"repository": {
 		"url": "https://github.com/hyvor/design"
 	},