@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/ui/Dropdown.svelte

@@ -1,31 +1,41 @@
 <!-- drop down component that displays a button, when clicked on the children expand -->
 <script lang="ts">
 	import Button from './Button.svelte';
+	import type { ButtonVariant } from './ButtonVariant.js';
 	import type { Hyperlink } from '../models/Hyperlink.js';
 	import LinkCollection from '../display/LinkCollection.svelte';
 	import { iconChevronDown } from '../icon/index.js';
 
-	interface Props {
+	export interface DropdownProps {
+		/** Whether the dropdown is expanded (bindable) */
 		show?: boolean;
+		/** Text label for the trigger button */
 		label: string | undefined;
+		/** Visual style variant of the trigger button */
+		variant?: ButtonVariant;
+		/** SVG icon for the trigger button */
 		buttonSvg?: string | undefined;
+		/** Navigation links to display (flat array or grouped arrays) */
 		links?: Hyperlink[] | Hyperlink[][];
+		/** Additional CSS classes */
 		class?: string;
+		/** Horizontal alignment of dropdown content relative to button */
 		alignToButton?: 'left' | 'right';
 	}
 
 	let {
 		show = $bindable(false),
 		label,
+		variant = 'primary',
 		buttonSvg = iconChevronDown,
 		links = [],
 		class: classes = '',
 		alignToButton = 'left'
-	}: Props = $props();
+	}: DropdownProps = $props();
 </script>
 
 <div class="dropdown {classes} {alignToButton}">
-	<Button class="ps-2" svg={buttonSvg} onclick={() => (show = !show)}>
+	<Button class="ps-2" {variant} svg={buttonSvg} onclick={() => (show = !show)}>
 		{label}
 	</Button>
 	{#if show}
@@ -54,13 +64,13 @@
 		position: absolute;
 		top: 100%;
 		left: 0;
-		background-color: var(--pui-paper-body-bg);
+		background-color: var(--paper-body-bg);
 		min-width: 160px;
-		box-shadow: var(--pui-shadow-lg);
-		z-index: var(--pui-z-dropdown);
-		border-radius: var(--pui-radius-sm);
+		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+		z-index: 1000;
+		border-radius: 4px;
 		overflow: hidden;
-		border: 1px solid var(--pui-border-default);
+		border: 1px solid var(--border-color);
 	}
 
 	.dropdown-group {
@@ -69,19 +79,19 @@
 	}
 
 	.dropdown-group:not(:last-child) {
-		border-bottom: 1px solid var(--pui-border-default);
+		border-bottom: 1px solid var(--border-color);
 	}
 
 	.dropdown-content :global(a) {
 		display: block;
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
+		padding: 8px 12px;
 		text-decoration: none;
-		color: var(--pui-color-primary);
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-out);
+		color: var(--ui-primary);
+		transition: background-color 0.2s ease;
 	}
 
 	.dropdown-content :global(a:hover) {
-		background-color: var(--pui-bg-hover);
+		background-color: var(--border-color);
 	}
 
 	.dropdown.right .dropdown-content {
@@ -91,7 +101,7 @@
 
 	:global(.dark) {
 		.dropdown-content :global(a) {
-			color: var(--pui-color-secondary);
+			color: var(--ui-accent);
 		}
 	}
 </style>

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

@@ -1,12 +1,21 @@
+import type { ButtonVariant } from './ButtonVariant.js';
 import type { Hyperlink } from '../models/Hyperlink.js';
-interface Props {
+export interface DropdownProps {
+    /** Whether the dropdown is expanded (bindable) */
     show?: boolean;
+    /** Text label for the trigger button */
     label: string | undefined;
+    /** Visual style variant of the trigger button */
+    variant?: ButtonVariant;
+    /** SVG icon for the trigger button */
     buttonSvg?: string | undefined;
+    /** Navigation links to display (flat array or grouped arrays) */
     links?: Hyperlink[] | Hyperlink[][];
+    /** Additional CSS classes */
     class?: string;
+    /** Horizontal alignment of dropdown content relative to button */
     alignToButton?: 'left' | 'right';
 }
-declare const Dropdown: import("svelte").Component<Props, {}, "show">;
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "show">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/ui/Dropzone.svelte

@@ -1,122 +1,224 @@
 <script lang="ts">
-	import { toast } from './Toast.svelte.js';
+	import type { Snippet } from 'svelte';
 	import Loader from './Loader.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import iconCloudUpload from '../icon/cloud-upload.svg?raw';
+	import iconDownload from '../icon/download.svg?raw';
 
-	interface Props {
+	export interface DropzoneProps {
+		/** Show loading state */
 		loading?: boolean;
+		/** Disable the dropzone without showing the loading state */
+		disabled?: boolean;
+		/** Allow multiple file selection */
 		multiple?: boolean;
+		/** Callback when valid files are dropped or selected */
 		onFileSubmit: (files: File[]) => void;
+		/** Callback with files rejected by accept, maxSize or maxFiles validation */
+		onReject?: (files: File[]) => void;
+		/** Accepted file types (e.g., "image/*,.pdf") */
 		accept?: string;
+		/** Maximum file size in bytes */
+		maxSize?: number;
+		/** Maximum number of files per drop or selection (only applies when multiple) */
+		maxFiles?: number;
+		/** Icon shown above the label (raw SVG string, defaults to the cloud upload icon) */
+		icon?: string;
+		/** Icon shown while files are dragged over (raw SVG string, defaults to the download icon) */
+		dragOverIcon?: string;
+		/** Label text (defaults to "Click to upload or drag and drop") */
+		label?: string;
+		/** Sublabel text under the label (defaults to a hint built from accept/maxSize) */
+		sublabel?: string;
+		/** Width override (any CSS width value, defaults to 100%) */
+		width?: string;
+		/** Height override (any CSS height value) */
+		height?: string;
+		/** Custom content rendered inside the dropzone instead of the label */
+		children?: Snippet;
 	}
 
-	let { loading = false, multiple = false, onFileSubmit, accept }: Props = $props();
+	let {
+		loading = false,
+		disabled = false,
+		multiple = false,
+		onFileSubmit,
+		onReject,
+		accept,
+		maxSize,
+		maxFiles,
+		icon = iconCloudUpload,
+		dragOverIcon = iconDownload,
+		label,
+		sublabel,
+		width,
+		height,
+		children
+	}: DropzoneProps = $props();
 
-	let dragzoneElement: HTMLElement;
 	let fileInput: HTMLInputElement;
-	let dragOver: boolean = $state(false);
-	let labelText = $derived(dragOver ? 'Drop files here' : 'Click here or drag a file');
+	// Counter instead of a boolean: dragleave fires when crossing child elements
+	let dragDepth = $state(0);
+	let dragOver = $derived(dragDepth > 0);
+	let labelText = $derived(
+		dragOver ? 'Drop files here' : label || 'Click to upload or drag and drop'
+	);
+	let iconSvg = $derived(dragOver ? dragOverIcon : icon);
+	let sublabelText = $derived.by(() => {
+		if (sublabel !== undefined) return sublabel;
+		const hints = [];
+		if (accept) hints.push(accept);
+		if (maxSize) hints.push(`up to ${formatBytes(maxSize)}`);
+		return hints.length ? hints.join(' · ') : '';
+	});
+
+	function formatBytes(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		const units = ['KB', 'MB', 'GB'];
+		const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length);
+		return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(1))} ${units[i - 1]}`;
+	}
 
-	function handleClick(e: Event) {
-		e.preventDefault();
-		fileInput!.click();
+	function matchesAccept(file: File): boolean {
+		if (!accept) return true;
+		return accept.split(',').some((token) => {
+			const type = token.trim().toLowerCase();
+			if (!type) return false;
+			if (type === '*/*') return true;
+			if (type.startsWith('.')) return file.name.toLowerCase().endsWith(type);
+			if (type.endsWith('/*')) return file.type.toLowerCase().startsWith(type.slice(0, -1));
+			return file.type.toLowerCase() === type;
+		});
 	}
 
-	function handleFileSubmission(files: File[]) {
-		onFileSubmit(files);
+	function submitFiles(files: File[]) {
+		let accepted = files.filter(
+			(file) => matchesAccept(file) && (!maxSize || file.size <= maxSize)
+		);
+		let rejected = files.filter((file) => !accepted.includes(file));
+
+		const limit = multiple ? maxFiles : 1;
+		if (limit && accepted.length > limit) {
+			rejected = [...rejected, ...accepted.slice(limit)];
+			accepted = accepted.slice(0, limit);
+		}
+
+		if (accepted.length) onFileSubmit(accepted);
+		if (rejected.length) onReject?.(rejected);
 	}
 
-	function handleFiles(event: DragEvent) {
+	function handleDrop(event: DragEvent) {
 		event.preventDefault();
+		dragDepth = 0;
+		if (loading || disabled) return;
 		const files = event.dataTransfer?.files;
-		if (files) {
-			let array = Array.from(files);
-
-			if (!multiple && array.length > 1) array = [array[0]];
-
-			handleFileSubmission(array);
-		}
-		dragOver = false;
+		if (files?.length) submitFiles(Array.from(files));
 	}
 
-	function handleDragOver(event: DragEvent) {
+	function handleDragEnter(event: DragEvent) {
 		event.preventDefault();
-		dragOver = true;
+		dragDepth++;
 	}
 
 	function handleDragLeave(event: DragEvent) {
 		event.preventDefault();
-		dragOver = false;
+		dragDepth = Math.max(0, dragDepth - 1);
 	}
 
 	function handleInputChange(event: Event) {
-		let fileList: FileList | null = (event.currentTarget as HTMLInputElement)?.files;
-		if (fileList) {
-			handleFileSubmission(Array.from(fileList));
-		} else {
-			toast.error('No file selected');
-		}
+		const input = event.currentTarget as HTMLInputElement;
+		if (input.files?.length) submitFiles(Array.from(input.files));
+		// Reset so selecting the same file again re-fires change
+		input.value = '';
 	}
 </script>
 
 <input
 	type="file"
-	id="file-input"
-	multiple
+	{multiple}
+	{accept}
 	onchange={handleInputChange}
 	bind:this={fileInput}
 	class="hidden"
-	accept={accept ? accept : '*.*'}
 />
 <button
-	bind:this={dragzoneElement}
+	type="button"
 	class="dropzone"
 	class:dragover={dragOver}
-	disabled={loading}
-	ondragenter={handleDragOver}
+	style:width
+	style:height
+	disabled={loading || disabled}
+	aria-busy={loading}
+	aria-label={labelText}
+	ondragenter={handleDragEnter}
 	ondragover={(ev) => ev.preventDefault()}
 	ondragleave={handleDragLeave}
-	ondrop={handleFiles}
-	onclick={(e) => handleClick(e)}
+	ondrop={handleDrop}
+	onclick={() => fileInput.click()}
 >
 	{#if loading}
 		<Loader fullScreen />
+	{:else if children}
+		{@render children()}
 	{:else}
-		{labelText}
+		<span class="dropzone-content">
+			<Icon svg={iconSvg} size="32px" class="dropzone-icon" />
+			<span class="dropzone-label">{labelText}</span>
+			{#if sublabelText}
+				<span class="dropzone-sublabel">{sublabelText}</span>
+			{/if}
+		</span>
 	{/if}
 </button>
 
 <style>
 	.dropzone {
-		border: 1px dashed var(--pui-border-default);
-		padding: var(--pui-spacing-4);
+		width: 100%;
+		border: 1px dashed var(--border-color);
+		padding: 1rem;
 		text-align: center;
 		cursor: pointer;
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-		border-radius: var(--pui-radius-lg);
+		transition: all 0.2s ease-in-out;
+		border-radius: 6px;
 		flex-grow: 1;
-		background-color: var(--pui-input-bg);
-		color: var(--pui-text-primary);
+		background: var(--paper-body-bg);
+		color: var(--text-color);
 	}
 
-	.dropzone:hover,
+	.dropzone:hover:not(:disabled),
 	.dropzone.dragover {
-		background-color: var(--pui-bg-hover);
-		border-color: var(--pui-color-primary);
+		background: var(--page-bg);
 	}
 
-	.hidden {
-		display: none;
+	.dropzone:disabled {
+		cursor: not-allowed;
+		opacity: 0.65;
+	}
+
+	.dropzone-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		height: 100%;
+	}
+
+	.dropzone-content :global(.dropzone-icon) {
+		opacity: 0.65;
+		margin-bottom: 0.25rem;
 	}
 
-	:global(.dark) .dropzone {
-		background-color: var(--pui-input-bg);
-		border-color: var(--pui-border-default);
-		color: var(--pui-text-primary);
+	.dropzone-label {
+		font-weight: 500;
 	}
 
-	:global(.dark) .dropzone:hover,
-	:global(.dark) .dropzone.dragover {
-		background-color: var(--pui-bg-hover);
-		border-color: var(--pui-color-secondary);
+	.dropzone-sublabel {
+		font-size: 0.8125rem;
+		opacity: 0.65;
+	}
+
+	.hidden {
+		display: none;
 	}
 </style>

package/dist/ui/Dropzone.svelte.d.ts

@@ -1,9 +1,36 @@
-interface Props {
+import type { Snippet } from 'svelte';
+export interface DropzoneProps {
+    /** Show loading state */
     loading?: boolean;
+    /** Disable the dropzone without showing the loading state */
+    disabled?: boolean;
+    /** Allow multiple file selection */
     multiple?: boolean;
+    /** Callback when valid files are dropped or selected */
     onFileSubmit: (files: File[]) => void;
+    /** Callback with files rejected by accept, maxSize or maxFiles validation */
+    onReject?: (files: File[]) => void;
+    /** Accepted file types (e.g., "image/*,.pdf") */
     accept?: string;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Maximum number of files per drop or selection (only applies when multiple) */
+    maxFiles?: number;
+    /** Icon shown above the label (raw SVG string, defaults to the cloud upload icon) */
+    icon?: string;
+    /** Icon shown while files are dragged over (raw SVG string, defaults to the download icon) */
+    dragOverIcon?: string;
+    /** Label text (defaults to "Click to upload or drag and drop") */
+    label?: string;
+    /** Sublabel text under the label (defaults to a hint built from accept/maxSize) */
+    sublabel?: string;
+    /** Width override (any CSS width value, defaults to 100%) */
+    width?: string;
+    /** Height override (any CSS height value) */
+    height?: string;
+    /** Custom content rendered inside the dropzone instead of the label */
+    children?: Snippet;
 }
-declare const Dropzone: import("svelte").Component<Props, {}, "">;
+declare const Dropzone: import("svelte").Component<DropzoneProps, {}, "">;
 type Dropzone = ReturnType<typeof Dropzone>;
 export default Dropzone;

package/dist/ui/Link.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
+	import { interceptLinkClick } from '../util/interceptLinkClick.js';
 	import type { Snippet } from 'svelte';
 
-	interface Props {
+	export interface LinkProps {
+		/** URL to navigate to */
 		href?: string;
+		/** Relationship attribute for the link */
 		rel?: string;
+		/** Link target attribute */
 		target?: '_self' | '_blank' | undefined;
+		/** Additional CSS classes */
 		class?: string;
+		/** Link content */
 		children?: Snippet;
+		/** Click event handler */
 		onclick?: (event: MouseEvent) => void;
 	}
 
@@ -17,15 +25,15 @@
 		class: classes = '',
 		children,
 		onclick
-	}: Props = $props();
+	}: LinkProps = $props();
 </script>
 
 <a
 	{target}
 	class={classes}
-	{href}
+	href={href?.startsWith('/') ? resolve(href as any) : href}
 	{rel}
-	{onclick}
+	onclick={(e) => interceptLinkClick(e, { href, target, onclick })}
 	data-sveltekit-preload-data="hover"
 >
 	{@render children?.()}

package/dist/ui/Link.svelte.d.ts

@@ -1,12 +1,18 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export interface LinkProps {
+    /** URL to navigate to */
     href?: string;
+    /** Relationship attribute for the link */
     rel?: string;
+    /** Link target attribute */
     target?: '_self' | '_blank' | undefined;
+    /** Additional CSS classes */
     class?: string;
+    /** Link content */
     children?: Snippet;
+    /** Click event handler */
     onclick?: (event: MouseEvent) => void;
 }
-declare const Link: import("svelte").Component<Props, {}, "">;
+declare const Link: import("svelte").Component<LinkProps, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;

package/dist/ui/Loader.svelte

@@ -2,13 +2,16 @@
 	import Icon from '../icon/Icon.svelte';
 	import loaderSvg from '../icon/loader.svg?raw';
 
-	interface Props {
+	export interface LoaderProps {
+		/** Display as full-screen overlay */
 		fullScreen?: boolean;
+		/** Custom size for the loader icon */
 		sizeOverride?: string;
+		/** Additional CSS classes */
 		class?: string;
 	}
 
-	let { fullScreen = false, sizeOverride = '50px', class: classes = '' }: Props = $props();
+	let { fullScreen = false, sizeOverride = '50px', class: classes = '' }: LoaderProps = $props();
 
 	// export let fullScreen: boolean = false;
 	// export let sizeOverride: string = '50px';
@@ -17,22 +20,11 @@
 	// export { classes as class };
 </script>
 
-<span class="loader {classes} {fullScreen && 'full-screen'}">
+<span class="loader flex {classes} {fullScreen && 'full-screen'}">
 	<Icon size={sizeOverride} class="spin" svg={loaderSvg} />
 </span>
 
 <style>
-	.loader {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--pui-loader-color, var(--pui-color-primary));
-	}
-
-	:global(.dark) .loader {
-		color: var(--pui-loader-color, var(--pui-color-secondary));
-	}
-
 	@keyframes -global-ckw {
 		from {
 			transform: rotate(0deg);
@@ -42,24 +34,37 @@
 		}
 	}
 
+	/* loader
+		text-accent
+		absolute
+		top-0
+		z-30
+		left-0
+		w-full
+		h-full
+		flex
+		items-center
+		justify-center
+		bg-neutral-200/75
+		dark:bg-neutral-700/75 */
 	.full-screen {
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
-		z-index: var(--pui-z-sticky);
+		z-index: 30;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		background-color: rgba(255, 255, 255, 0.75);
-		border-radius: var(--pui-radius-base);
-		color: var(--pui-color-primary);
+		border-radius: 0.25rem;
+		color: var(--ui-primary);
 	}
 
 	:global(.dark) .full-screen {
 		background-color: rgba(0, 0, 0, 0.75);
-		color: var(--pui-color-secondary);
+		color: var(--ui-accent);
 	}
 
 	:global(span.spin) {

package/dist/ui/Loader.svelte.d.ts

@@ -1,8 +1,11 @@
-interface Props {
+export interface LoaderProps {
+    /** Display as full-screen overlay */
     fullScreen?: boolean;
+    /** Custom size for the loader icon */
     sizeOverride?: string;
+    /** Additional CSS classes */
     class?: string;
 }
-declare const Loader: import("svelte").Component<Props, {}, "">;
+declare const Loader: import("svelte").Component<LoaderProps, {}, "">;
 type Loader = ReturnType<typeof Loader>;
 export default Loader;

package/dist/ui/Logo.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { themeState } from '../theme.svelte.js';
+	import { brandState } from '../uiTheme.svelte.js';
+	import Icon from '../icon/Icon.svelte';
+	import Link from './Link.svelte';
+	import placeholderLogo from '../icon/logo-placeholder.svg?raw';
+
+	export interface LogoProps {
+		/** Additional CSS classes */
+		class?: string;
+		/** URL to navigate to when logo is clicked */
+		href?: string;
+		/** Override the logo fill colour (defaults to theme-aware primary/white) */
+		fill?: string;
+		/**
+		 * Raw SVG markup to render. Falls back to the logo registered via
+		 * `applyTheme({ logo })` / `setLogo()`, then to a generic placeholder.
+		 */
+		svg?: string;
+	}
+
+	let {
+		class: classes = '',
+		href = '/',
+		fill: fillOverride = undefined,
+		svg = undefined
+	}: LogoProps = $props();
+
+	const fill = $derived(fillOverride ?? (themeState.isDarkMode ? 'white' : 'var(--ui-primary)'));
+	const logoSvg = $derived(svg ?? brandState.logo ?? placeholderLogo);
+</script>
+
+<Link {href}>
+	<span class="logo {classes}">
+		<Icon svg={logoSvg} {fill} stroke="none" />
+	</span>
+</Link>

package/dist/ui/Logo.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface LogoProps {
+    /** Additional CSS classes */
+    class?: string;
+    /** URL to navigate to when logo is clicked */
+    href?: string;
+    /** Override the logo fill colour (defaults to theme-aware primary/white) */
+    fill?: string;
+    /**
+     * Raw SVG markup to render. Falls back to the logo registered via
+     * `applyTheme({ logo })` / `setLogo()`, then to a generic placeholder.
+     */
+    svg?: string;
+}
+declare const Logo: import("svelte").Component<LogoProps, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;