@placeholderco/placeholder-ui 2.2.1 → 2.2.3

package/dist/layout/Navbar.svelte

@@ -12,10 +12,16 @@
 	import Logo from '../ui/Logo.svelte';
 	import type { Snippet } from 'svelte';
 
-	export type NavbarVariant = 'default' | 'primary';
+	export type NavbarVariant = 'default' | 'primary' | 'site';
 
 	export interface NavbarProps {
-		/** Visual variant. `primary` uses the primary brand colour as the background across all themes */
+		/**
+		 * Visual variant.
+		 * - `primary` uses the primary brand colour as the background across all themes.
+		 * - `site` is a marketing-site header: logo on the left, links pushed to the right with an
+		 *   accent underline on the `active` item. Below 768px the links collapse and the drawer
+		 *   button (enable with `showDrawerButton`) is shown instead.
+		 */
 		variant?: NavbarVariant;
 		/** App navigation link displayed as a header */
 		appNav?: Hyperlink;
@@ -67,10 +73,16 @@
 	}: NavbarProps = $props();
 
 	const isPrimary = $derived(variant === 'primary');
+	const isSite = $derived(variant === 'site');
 </script>
 
-<header class={isPrimary ? 'primary' : ''}>
+<header class={isPrimary ? 'primary' : isSite ? 'site' : ''}>
 	<div class="inner-navbar {className} {inContainer ? 'container' : ''}">
+		{#if isSite && !noLogo}
+			<span class="site-logo">
+				<Logo href={logoHref} />
+			</span>
+		{/if}
 		{@render leftSection?.()}
 		{#if showDrawerButton && drawerButtonPosition === 'left'}
 			<ActionIcon
@@ -122,7 +134,7 @@
 			darkVariant="accent-subtle"
 			lightVariant={isPrimary ? 'accent-subtle' : 'primary-subtle'}
 		/>
-		{#if !viewportState.isMobile && !noLogo}
+		{#if !isSite && !viewportState.isMobile && !noLogo}
 			{#if logoHref}
 				<Logo href={logoHref} fill={isPrimary ? 'white' : undefined} />
 			{:else}
@@ -197,6 +209,112 @@
 		color: var(--ui-accent);
 	}
 
+	/* Site variant: marketing-site header. Logo on the left, links on the right with a 2px
+	   underline that lights up (accent) on the active item. */
+	header.site .inner-navbar .links-container {
+		gap: 1.5rem;
+	}
+
+	header.site .inner-navbar .links-container > :global(a),
+	header.site
+		.inner-navbar
+		.links-container
+		> :global(.navbar-parent)
+		> :global(.navbar-parent-trigger) {
+		font-weight: 500;
+		padding: 0.35rem 0;
+		border-bottom: 2px solid transparent;
+		transition:
+			color 200ms,
+			border-color 200ms;
+	}
+
+	header.site .inner-navbar .links-container > :global(a:hover),
+	header.site
+		.inner-navbar
+		.links-container
+		> :global(.navbar-parent)
+		> :global(.navbar-parent-trigger:hover) {
+		color: var(--ui-tertiary-dark);
+	}
+
+	:global(.dark) header.site .inner-navbar .links-container > :global(a:hover),
+	:global(.dark)
+		header.site
+		.inner-navbar
+		.links-container
+		> :global(.navbar-parent)
+		> :global(.navbar-parent-trigger:hover) {
+		color: var(--ui-accent);
+	}
+
+	header.site .inner-navbar .links-container > :global(a.active),
+	header.site
+		.inner-navbar
+		.links-container
+		> :global(.navbar-parent)
+		> :global(.navbar-parent-trigger.active) {
+		border-bottom-color: var(--ui-accent);
+	}
+
+	/* Brand logo sits on the left and is sized by height so any aspect ratio works */
+	header.site .site-logo {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	header.site .site-logo :global(.logo),
+	header.site .site-logo :global(.pui-icon) {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	header.site .site-logo :global(.pui-icon svg) {
+		height: 40px;
+		width: auto;
+		display: block;
+	}
+
+	/* Primary links are right-aligned in the site variant (unless a growing .middle exists) */
+	header.site .primary.links-container {
+		margin-left: auto;
+	}
+
+	header.site .primary.links-container ~ .secondary,
+	header.site .primary.links-container ~ .right,
+	header.site .primary.links-container ~ :global(.theme-switcher) {
+		margin-left: 0;
+	}
+
+	@media (max-width: 767px) {
+		/* Links collapse into the drawer; the drawer button takes their place */
+		header.site .inner-navbar .links-container {
+			display: none;
+		}
+
+		header.site .site-logo :global(.pui-icon svg) {
+			height: 34px;
+		}
+
+		/* The hidden links containers still count as siblings, so re-apply the auto margin
+		   to the first visible right-hand element */
+		header.site .inner-navbar > .right,
+		header.site .inner-navbar > :global(.theme-switcher) {
+			margin-left: auto;
+		}
+
+		header.site .inner-navbar > .right ~ :global(.theme-switcher) {
+			margin-left: 0;
+		}
+	}
+
+	@media (min-width: 768px) {
+		header.site .inner-navbar :global(.drawer-btn) {
+			display: none;
+		}
+	}
+
 	.inner-navbar {
 		display: flex;
 		align-items: center;

package/dist/layout/Navbar.svelte.d.ts

@@ -1,9 +1,15 @@
 import type { NavbarItem } from '../models/NavbarItem.js';
 import { type Hyperlink } from '../index.js';
 import type { Snippet } from 'svelte';
-export type NavbarVariant = 'default' | 'primary';
+export type NavbarVariant = 'default' | 'primary' | 'site';
 export interface NavbarProps {
-    /** Visual variant. `primary` uses the primary brand colour as the background across all themes */
+    /**
+     * Visual variant.
+     * - `primary` uses the primary brand colour as the background across all themes.
+     * - `site` is a marketing-site header: logo on the left, links pushed to the right with an
+     *   accent underline on the `active` item. Below 768px the links collapse and the drawer
+     *   button (enable with `showDrawerButton`) is shown instead.
+     */
     variant?: NavbarVariant;
     /** App navigation link displayed as a header */
     appNav?: Hyperlink;

package/dist/layout/NavbarItemView.svelte

@@ -25,7 +25,12 @@
 	{@const Component = item.component}
 	<Component {...item.componentProps} />
 {:else if 'href' in item}
-	<Link href={item.href} onclick={item.onclick} class="navbar-item {item.class ?? ''}">
+	<Link
+		href={item.href}
+		onclick={item.onclick}
+		class="navbar-item {item.class ?? ''} {item.active ? 'active' : ''}"
+		ariaCurrent={item.active ? 'page' : undefined}
+	>
 		{#if item.iconSvg}
 			<Icon svg={item.iconSvg} size="1.1em" class="navbar-item-icon" />
 		{/if}
@@ -35,7 +40,7 @@
 	<div class="navbar-parent" use:clickOutside={close}>
 		<button
 			type="button"
-			class="navbar-item navbar-parent-trigger {item.class ?? ''}"
+			class="navbar-item navbar-parent-trigger {item.class ?? ''} {item.active ? 'active' : ''}"
 			aria-expanded={open}
 			aria-haspopup="true"
 			onclick={(e) => {

package/dist/models/NavbarItem.d.ts

@@ -3,6 +3,8 @@ type BaseNavbarItem = {
     alwaysShow?: boolean;
     showInOnly?: undefined | 'Navbar' | 'Drawer';
     class?: string;
+    /** Marks the item as the current page. Adds an `active` class (and `aria-current="page"` on links); the `site` navbar variant underlines it. */
+    active?: boolean;
     /** Custom click handler. For link items, call event.preventDefault() to override the default href navigation. */
     onclick?: (event: MouseEvent) => void;
 };

package/dist/ui/Dialog.svelte

@@ -1,3 +1,32 @@
+<script lang="ts" module>
+	// One lock shared by every instance so a nested dialog closing does not
+	// hand the page its scrollbar back while the parent is still open
+	let lockCount = 0;
+	let savedOverflow = '';
+	let savedPaddingRight = '';
+
+	function lockBodyScroll() {
+		if (lockCount++ > 0) return;
+		const body = document.body;
+		savedOverflow = body.style.overflow;
+		savedPaddingRight = body.style.paddingRight;
+		// Hiding the scrollbar widens the page and shifts everything sideways,
+		// which reads as a flicker behind the backdrop; pad by its width instead
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		if (scrollbarWidth > 0) {
+			const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
+			body.style.paddingRight = `${current + scrollbarWidth}px`;
+		}
+		body.style.overflow = 'hidden';
+	}
+
+	function unlockBodyScroll() {
+		if (--lockCount > 0) return;
+		document.body.style.overflow = savedOverflow;
+		document.body.style.paddingRight = savedPaddingRight;
+	}
+</script>
+
 <script lang="ts">
 	import Paper from '../display/Paper.svelte';
 	import { iconX } from '../icon/index.js';
@@ -110,10 +139,8 @@
 	// Lock body scroll while open; effects only run in the browser, so this is SSR-safe
 	$effect(() => {
 		if (show) {
-			document.body.style.overflow = 'hidden';
-			return () => {
-				document.body.style.overflow = '';
-			};
+			lockBodyScroll();
+			return unlockBodyScroll;
 		}
 	});
 
@@ -193,66 +220,21 @@
 </dialog>
 
 <style>
-	/* Animate transform, not margin — the native dialog centers itself via
-	   `margin: auto`, and a margin animation with `forwards` fill would
-	   permanently override it and pin the dialog to the top of the viewport */
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: translateY(-0.5rem);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-	@keyframes fadeOut {
-		from {
-			opacity: 1;
-			transform: translateY(0);
-		}
-		to {
-			opacity: 0;
-			transform: translateY(-0.5rem);
-		}
-	}
-
-	@keyframes fadeInFull {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-	@keyframes fadeOutFull {
-		from {
-			opacity: 1;
-		}
-		to {
-			opacity: 0;
-		}
-	}
-
-	/* Keyframes for the backdrop pseudo-element */
-	@keyframes backdropFadeIn {
-		from {
-			background: hsl(0 0% 0% / 0%);
-		}
-		to {
-			background: hsl(0 0% 0% / 65%);
-		}
-	}
-	@keyframes backdropFadeOut {
-		from {
-			background: hsl(0 0% 0% / 65%);
-		}
-		to {
-			background: hsl(0 0% 0% / 0%);
-		}
-	}
-
+	/* Open/close is a transition driven by [open] plus @starting-style, not a
+	   keyframe animation. Keyframes with a `forwards` fill kept a transform
+	   applied while open, and the backdrop's static colour could paint for a
+	   frame before its animation took over, showing as a flash on open.
+	   Transitions have no fill state: the closed values are the base rule, the
+	   open values live on [open], and @starting-style supplies the from-values
+	   for the first frame after display switches on */
 	dialog {
+		/* Everything that shapes the box lives here, not on [open]: the close
+		   transition runs after [open] is removed, so rules scoped to it would
+		   drop out while the dialog is still fading. That includes the browser's
+		   own :modal positioning, which stops applying the moment close() runs */
+		position: fixed;
+		inset: 0;
+		flex-direction: column;
 		color: var(--text-color);
 		border: none;
 		/* The dialog element itself is focused by showModal(); don't draw a
@@ -270,22 +252,56 @@
 		max-height: calc(100vh - 2rem);
 		max-height: calc(100dvh - 2rem);
 
-		animation: fadeOut 0.2s forwards;
+		opacity: 0;
+		/* Animate transform, not margin: the native dialog centres itself via
+		   `margin: auto` */
+		transform: translateY(-0.5rem);
 		transition:
+			opacity 0.2s ease,
+			transform 0.2s ease,
 			display 0.2s allow-discrete,
 			overlay 0.2s allow-discrete;
-		&::backdrop {
-			animation: backdropFadeOut 0.2s forwards;
+	}
+
+	dialog[open] {
+		/* Only when [open] — an unconditional author display would override
+		   the UA's display: none on closed dialogs and make them visible */
+		display: flex;
+		opacity: 1;
+		/* `none`, not translateY(0): a transform of any value makes the dialog
+		   the containing block for position: fixed descendants */
+		transform: none;
+	}
+
+	@starting-style {
+		dialog[open] {
+			opacity: 0;
+			transform: translateY(-0.5rem);
 		}
-		&[open] {
-			/* Only when [open] — an unconditional author display would override
-			   the UA's display: none on closed dialogs and make them visible */
-			display: flex;
-			flex-direction: column;
-			animation: fadeIn 0.2s forwards;
-			&::backdrop {
-				animation: backdropFadeIn 0.2s forwards;
-			}
+	}
+
+	dialog::backdrop {
+		background-color: rgb(0 0 0 / 0);
+		transition:
+			background-color 0.2s ease,
+			display 0.2s allow-discrete,
+			overlay 0.2s allow-discrete;
+	}
+
+	dialog[open]::backdrop {
+		background-color: rgb(0 0 0 / 0.65);
+	}
+
+	@starting-style {
+		dialog[open]::backdrop {
+			background-color: rgb(0 0 0 / 0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		dialog,
+		dialog::backdrop {
+			transition-duration: 0.01ms;
 		}
 	}
 
@@ -389,10 +405,6 @@
 		background-color: var(--paper-body-bg);
 	}
 
-	dialog::backdrop {
-		background-color: #0008;
-	}
-
 	.dialog.md {
 		width: 30rem;
 	}
@@ -410,11 +422,9 @@
 		max-width: 100%;
 		max-height: 100%;
 		margin-top: auto;
-		animation: fadeOutFull 0.2s forwards;
-
-		&[open] {
-			animation: fadeInFull 0.2s forwards;
-		}
+		/* Full-screen fades in place; more specific than the @starting-style
+		   rule above, so it wins for both the starting and the open state */
+		transform: none;
 	}
 
 	.dialog.full,

package/dist/ui/Link.svelte

@@ -16,6 +16,8 @@
 		children?: Snippet;
 		/** Click event handler */
 		onclick?: (event: MouseEvent) => void;
+		/** Value for the `aria-current` attribute (e.g. `'page'` for the current page) */
+		ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | undefined;
 	}
 
 	let {
@@ -24,7 +26,8 @@
 		target = undefined,
 		class: classes = '',
 		children,
-		onclick
+		onclick,
+		ariaCurrent = undefined
 	}: LinkProps = $props();
 </script>
 
@@ -33,6 +36,7 @@
 	class={classes}
 	href={href?.startsWith('/') ? resolve(href as any) : href}
 	{rel}
+	aria-current={ariaCurrent}
 	onclick={(e) => interceptLinkClick(e, { href, target, onclick })}
 	data-sveltekit-preload-data="hover"
 >

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

@@ -12,6 +12,8 @@ export interface LinkProps {
     children?: Snippet;
     /** Click event handler */
     onclick?: (event: MouseEvent) => void;
+    /** Value for the `aria-current` attribute (e.g. `'page'` for the current page) */
+    ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | undefined;
 }
 declare const Link: import("svelte").Component<LinkProps, {}, "">;
 type Link = ReturnType<typeof Link>;

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

@@ -84,6 +84,6 @@ export interface TableProps<T = any> {
      * Use with `onsort` when the server returns pre-sorted rows. */
     manualSort?: boolean;
 }
-declare const Table: import("svelte").Component<TableProps<any>, {}, "selectedRows" | "expandedKeys" | "page" | "sortKey" | "sortDirection">;
+declare const Table: import("svelte").Component<TableProps<any>, {}, "page" | "selectedRows" | "expandedKeys" | "sortKey" | "sortDirection">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",