@placeholderco/placeholder-ui 2.2.3 → 2.2.5

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,6 +11,7 @@
 	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' | 'site';
 
@@ -20,7 +21,9 @@
 		 * - `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.
+		 *   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 */
@@ -74,9 +77,13 @@
 
 	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' : isSite ? 'site' : ''}>
+<header class="pui-navbar {isPrimary ? 'primary' : isSite ? 'site' : ''}">
 	<div class="inner-navbar {className} {inContainer ? 'container' : ''}">
 		{#if isSite && !noLogo}
 			<span class="site-logo">
@@ -87,7 +94,7 @@
 		{#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"
@@ -144,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"

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

@@ -8,7 +8,9 @@ export interface NavbarProps {
      * - `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.
+     *   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 */

package/dist/ui/ThemeSwitcher.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { setTheme, themeState } from '../theme.svelte.js';
 
 	import sunSvg from '../icon/sun.svg?raw';
@@ -31,6 +32,17 @@
 		system: 'System theme'
 	};
 
+	// The server always renders the 'system' theme (no localStorage), but the client loads the
+	// saved theme at module load. Rendering the server values until mounted keeps the hydrated
+	// markup identical and avoids a hydration_html_changed warning from the {@html} icon.
+	let mounted = $state(false);
+	onMount(() => {
+		mounted = true;
+	});
+
+	const theme = $derived(mounted ? themeState.theme : 'system');
+	const isDarkMode = $derived(mounted ? themeState.isDarkMode : false);
+
 	function cycleTheme() {
 		const index = themeCycle.indexOf(themeState.theme);
 		setTheme(themeCycle[(index + 1) % themeCycle.length]);
@@ -38,14 +50,14 @@
 </script>
 
 <div class="theme-switcher">
-	{#key themeState.theme}
+	{#key theme}
 		<ActionIcon
-			variant={themeState.isDarkMode ? darkVariant : lightVariant}
-			svg={icons[themeState.theme]}
+			variant={isDarkMode ? darkVariant : lightVariant}
+			svg={icons[theme]}
 			class="action-icon"
 			size="1.6em"
 			onclick={cycleTheme}
-			tooltip={tooltips[themeState.theme]}
+			tooltip={tooltips[theme]}
 		/>
 	{/key}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "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",