@placeholderco/placeholder-ui 2.2.2 → 2.2.4

package/dist/app.css

@@ -46,7 +46,6 @@
 	--ui-link-color: var(--ui-tertiary-dark);
 	--ui-link-hover-color: var(--ui-accent-dark);
 
-
 	/* ---- Surfaces and text (light mode) ---- */
 	--off-white: rgb(221, 221, 221);
 	--input-bg: #fff;
@@ -82,6 +81,13 @@
 	font-family: var(--ui-font-family);
 }
 
+/* The `site` Navbar variant is a taller marketing header. Raising the token here (rather than
+   on the header itself) keeps --page-content-height, Sidenav and Drawer in step with it.
+   :where() keeps specificity at :root level so a consumer's own --header-height still wins. */
+:root:where(:has(.pui-navbar.site)) {
+	--header-height: 68px;
+}
+
 .dark {
 	--input-bg: rgb(33, 37, 41);
 	--page-bg: rgb(36, 37, 40);

package/dist/layout/Navbar.svelte

@@ -11,11 +11,20 @@
 	import Link from '../ui/Link.svelte';
 	import Logo from '../ui/Logo.svelte';
 	import type { Snippet } from 'svelte';
+	import { themeState } from '../theme.svelte.js';
 
-	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. While a site header is on the
+		 *   page, `--header-height` is raised to 68px (see app.css), so `--page-content-height`
+		 *   follows automatically.
+		 */
 		variant?: NavbarVariant;
 		/** App navigation link displayed as a header */
 		appNav?: Hyperlink;
@@ -67,15 +76,25 @@
 	}: NavbarProps = $props();
 
 	const isPrimary = $derived(variant === 'primary');
+	const isSite = $derived(variant === 'site');
+	// Site variant: the drawer button is the only nav control on mobile, so keep it legible on dark
+	const drawerButtonVariant = $derived(
+		isPrimary || (isSite && themeState.isDarkMode) ? 'accent-subtle' : 'secondary-subtle'
+	);
 </script>
 
-<header class={isPrimary ? 'primary' : ''}>
+<header class="pui-navbar {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
 				svg={drawerButtonIcon}
-				variant={isPrimary ? 'accent-subtle' : 'secondary-subtle'}
+				variant={drawerButtonVariant}
 				size="1.25rem"
 				onclick={onDrawerButtonClick}
 				class="drawer-btn drawer-btn-left"
@@ -122,7 +141,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}
@@ -132,7 +151,7 @@
 		{#if showDrawerButton && drawerButtonPosition === 'right'}
 			<ActionIcon
 				svg={drawerButtonIcon}
-				variant={isPrimary ? 'accent-subtle' : 'secondary-subtle'}
+				variant={drawerButtonVariant}
 				size="1.25rem"
 				onclick={onDrawerButtonClick}
 				class="drawer-btn drawer-btn-right"
@@ -197,6 +216,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,17 @@
 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. While a site header is on the
+     *   page, `--header-height` is raised to 68px (see app.css), so `--page-content-height`
+     *   follows automatically.
+     */
     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/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.2",
+  "version": "2.2.4",
   "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",