@hyvor/design 2.1.1 → 2.1.2

package/dist/components/Base/Base.svelte

@@ -14,7 +14,7 @@
 	let { dark = false, children }: Props = $props();
 </script>
 
-<div id="base">
+<div id="hds-base">
 	{@render children?.()}
 </div>
 

package/dist/components/Callout/Callout.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import IconCheckCircle from '@hyvor/icons/IconCheckCircle';
+	import IconExclamationCircle from '@hyvor/icons/IconExclamationCircle';
+	import IconExclamationTriangle from '@hyvor/icons/IconExclamationTriangle';
+	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
+
+	const defaultIcons = {
+		soft: undefined,
+		info: IconInfoCircle,
+		success: IconCheckCircle,
+		warning: IconExclamationCircle,
+		danger: IconExclamationTriangle
+	};
 
 	const {
 		type = 'soft',
@@ -7,34 +19,59 @@
 		children = undefined,
 		text = undefined,
 		icon = undefined,
-		...rest
+		showIcon = true,
+		fg = undefined,
+		bg = undefined
 	}: {
 		type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
 		title?: string | Snippet;
 		icon?: Snippet;
+		/** Whether to show an icon. Defaults to the icon matching `type`, unless a custom `icon` snippet is given. */
+		showIcon?: boolean;
 		text?: string | Snippet;
 		children?: Snippet;
-		[key: string]: any;
+		/** Custom text color. Overrides `type`. If `bg` is not set, a matching background is derived from it. */
+		fg?: string;
+		/** Custom background color. Overrides `type`. If `fg` is not set, a matching text color is derived from it. */
+		bg?: string;
 	} = $props();
+
+	const DefaultIcon = $derived(defaultIcons[type]);
+
+	const style = $derived.by(() => {
+		if (fg === undefined && bg === undefined) {
+			return undefined;
+		}
+
+		const finalFg = fg ?? `color-mix(in srgb, ${bg} 55%, black)`;
+		const finalBg = bg ?? `color-mix(in srgb, ${fg} 15%, white)`;
+
+		return `color: ${finalFg}; background-color: ${finalBg};`;
+	});
 </script>
 
-<div class={'callout ' + type} {...rest}>
+{#snippet iconContent()}
+	{#if icon}
+		{@render icon()}
+	{:else}
+		<DefaultIcon />
+	{/if}
+{/snippet}
+
+<div class={'callout ' + type} {style}>
 	{#if typeof title === 'string'}
 		<div class="title-wrap">
-			{#if icon}
-				<span
-					class="title-icon
-		"
-				>
-					{@render icon()}
+			{#if showIcon}
+				<span class="title-icon">
+					{@render iconContent()}
 				</span>
 			{/if}
 			<div class="title">{title}</div>
 		</div>
 	{:else if title !== undefined}
 		<div class="title-wrap">
-			{#if icon}
-				<span class="title-icon">{@render icon()}</span>
+			{#if showIcon}
+				<span class="title-icon">{@render iconContent()}</span>
 			{/if}
 
 			<div class="title">{@render title?.()}</div>
@@ -42,8 +79,8 @@
 	{/if}
 
 	<div class="text-wrap">
-		{#if icon && !title}
-			<span class="icon">{@render icon()}</span>
+		{#if showIcon && !title}
+			<span class="icon">{@render iconContent()}</span>
 		{/if}
 
 		<div class="text">
@@ -61,7 +98,7 @@
 
 <style>
 	.callout {
-		padding: 15px 25px;
+		padding: 10px 20px;
 		border-radius: var(--box-radius);
 		line-height: var(--line-height-content);
 	}
@@ -92,16 +129,16 @@
 	}
 
 	.title-wrap {
-		margin-bottom: 4px;
 		display: flex;
 		align-items: center;
 		font-weight: 600;
-		font-size: 18px;
 	}
 
 	.title-icon {
-		vertical-align: middle;
-		margin-right: 8px;
+		margin-right: 6px;
+		display: inline-flex;
+		height: var(--line-height-content);
+		align-items: center;
 	}
 
 	.text-wrap {
@@ -110,7 +147,22 @@
 	}
 
 	.icon {
-		margin-right: 8px;
-		font-size: 18px;
+		margin-right: 6px;
+		font-size: 16px;
+		display: inline-flex;
+		height: var(--line-height-content);
+		align-items: center;
+	}
+
+	.text :global(p) {
+		margin: 0.5em 0;
+	}
+
+	.text :global(p:first-child) {
+		margin-top: 0;
+	}
+
+	.text :global(p:last-child) {
+		margin-bottom: 0;
 	}
 </style>

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

@@ -3,9 +3,14 @@ type $$ComponentProps = {
     type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
     title?: string | Snippet;
     icon?: Snippet;
+    /** Whether to show an icon. Defaults to the icon matching `type`, unless a custom `icon` snippet is given. */
+    showIcon?: boolean;
     text?: string | Snippet;
     children?: Snippet;
-    [key: string]: any;
+    /** Custom text color. Overrides `type`. If `bg` is not set, a matching background is derived from it. */
+    fg?: string;
+    /** Custom background color. Overrides `type`. If `fg` is not set, a matching text color is derived from it. */
+    bg?: string;
 };
 declare const Callout: import("svelte").Component<$$ComponentProps, {}, "">;
 type Callout = ReturnType<typeof Callout>;

package/dist/components/Modal/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ModalFooter from './ModalFooter.svelte';
 	import type { Footer } from './modal-types.js';
+	import { portal } from './portal.js';
 	import IconX from '@hyvor/icons/IconX';
 	import IconButton from './../IconButton/IconButton.svelte';
 	import { fade, scale } from 'svelte/transition';
@@ -15,6 +16,7 @@
 		width?: string;
 		height?: string;
 		bare?: boolean;
+		appendToBody?: boolean;
 		id?: string;
 		role?: 'dialog' | 'alertdialog';
 		closeOnOutsideClick?: boolean;
@@ -34,6 +36,7 @@
 		width,
 		height,
 		bare = false,
+		appendToBody = false,
 		id = 'modal',
 		role = 'alertdialog',
 		closeOnOutsideClick = true,
@@ -101,6 +104,7 @@
 		role="presentation"
 		class="wrap"
 		bind:this={wrapEl}
+		use:portal={appendToBody ? '#hds-base' : false}
 		transition:fade|global={{ duration: 100 }}
 		onclick={(e) => handleClose(e)}
 	>
@@ -127,11 +131,7 @@
 
 					<div class="close-wrap">
 						{#if hasClose}
-							<IconButton
-								variant="invisible"
-								on:click={handleCancel}
-								aria-label="Close modal"
-							>
+							<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
 								<IconX size={25} />
 							</IconButton>
 						{/if}

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

@@ -7,6 +7,7 @@ interface Props {
     width?: string;
     height?: string;
     bare?: boolean;
+    appendToBody?: boolean;
     id?: string;
     role?: 'dialog' | 'alertdialog';
     closeOnOutsideClick?: boolean;

package/dist/components/Modal/portal.d.ts

@@ -0,0 +1,4 @@
+export declare function portal(node: HTMLElement, target?: string | HTMLElement | false): {
+    update: (t: string | HTMLElement | false) => void;
+    destroy(): void;
+};

package/dist/components/Modal/portal.js

@@ -0,0 +1,25 @@
+export function portal(node, target = false) {
+    const originalParent = node.parentNode;
+    const originalNextSibling = node.nextSibling;
+    function resolveTarget(t) {
+        if (typeof t !== 'string')
+            return t;
+        return document.querySelector(t) ?? document.body;
+    }
+    function place(t) {
+        if (t === false) {
+            if (originalParent && node.parentNode !== originalParent) {
+                originalParent.insertBefore(node, originalNextSibling);
+            }
+            return;
+        }
+        resolveTarget(t).appendChild(node);
+    }
+    place(target);
+    return {
+        update: place,
+        destroy() {
+            node.remove();
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.1",
+	"version": "2.1.2",
 	"license": "MIT",
 	"private": false,
 	"repository": {