@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/layout/Navbar.svelte

@@ -1,91 +1,82 @@
 <script lang="ts">
-	import type { LinkNavbarItem } from '../models/NavbarItem.js';
-	import type { SidenavSection } from './Sidenav.svelte';
-	import { Link, ThemeSwitcher, ActionIcon, Drawer, iconHamburger, type Hyperlink } from '../index.js';
-	import { themeState } from '../theme.svelte.js';
+	import type { NavbarItem } from '../models/NavbarItem.js';
+	import {
+		ThemeSwitcher,
+		ActionIcon,
+		iconHamburger,
+		type Hyperlink,
+		viewportState
+	} from '../index.js';
+	import NavbarItemView from './NavbarItemView.svelte';
+	import Link from '../ui/Link.svelte';
+	import Logo from '../ui/Logo.svelte';
 	import type { Snippet } from 'svelte';
 
-	interface Props {
-		drawerHeader?: string | undefined;
+	/** `midnight` is a legacy alias for `primary`. */
+	export type NavbarVariant = 'default' | 'primary' | 'midnight';
+
+	export interface NavbarProps {
+		/** Visual variant. `primary` uses the primary brand colour as the background across all themes */
+		variant?: NavbarVariant;
+		/** App navigation link displayed as a header */
 		appNav?: Hyperlink;
-		items?: LinkNavbarItem[];
-		secondaryItems?: LinkNavbarItem[];
+		/** Primary navigation items. Items with `subItems` fold out a vertical sub-list; items with `iconSvg` show a leading icon */
+		items?: NavbarItem[];
+		/** Secondary navigation items (right side) */
+		secondaryItems?: NavbarItem[];
+		/** Hide the logo */
+		noLogo?: boolean;
+		/** Custom URL for the logo link */
+		logoHref?: string;
+		/** Additional CSS classes */
 		class?: string;
+		/** Constrain navbar width to container */
 		inContainer?: boolean;
+		/** Custom content for the left section */
+		leftSection?: Snippet;
+		/** Custom content for the middle section */
 		middleSection?: Snippet;
+		/** Custom content for the right section */
 		rightSection?: Snippet;
-		/** Icons displayed to the left of the ThemeSwitcher, visible even when collapsed on mobile */
-		iconSection?: Snippet;
-		/** Enable responsive collapse to burger menu on small screens (default: true) */
-		responsive?: boolean;
-		/** Breakpoint in pixels at which the navbar collapses (default: 768) */
-		responsiveBreakpoint?: number;
-		// Drawer button options
+		/** Show mobile drawer toggle button */
 		showDrawerButton?: boolean;
+		/** Position of the drawer toggle button */
 		drawerButtonPosition?: 'left' | 'right';
+		/** Custom icon for the drawer toggle button */
 		drawerButtonIcon?: string;
+		/** Callback when drawer toggle is clicked */
 		onDrawerButtonClick?: () => void;
 	}
 
 	let {
-		drawerHeader = undefined,
+		variant = 'default',
 		appNav = undefined,
 		items = [],
 		secondaryItems = [],
+		noLogo = false,
+		logoHref = undefined,
 		class: className = '',
 		inContainer = false,
+		leftSection = undefined,
 		middleSection = undefined,
 		rightSection = undefined,
-		iconSection = undefined,
-		responsive = true,
-		responsiveBreakpoint = 768,
 		// Drawer button options
 		showDrawerButton = false,
 		drawerButtonPosition = 'right',
 		drawerButtonIcon = iconHamburger,
 		onDrawerButtonClick = undefined
-	}: Props = $props();
-
-	let drawerOpen = $state(false);
-	let windowWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 1024);
-	const isCollapsed = $derived(responsive && windowWidth <= responsiveBreakpoint);
-
-	const drawerSections = $derived.by((): SidenavSection[] => {
-		const sections: SidenavSection[] = [];
-		if (items.length > 0) {
-			sections.push({
-				items: items.map((item) => ({
-					label: item.label,
-					href: item.href,
-					iconSvg: item.iconSvg
-				}))
-			});
-		}
-		if (secondaryItems.length > 0) {
-			sections.push({
-				items: secondaryItems.map((item) => ({
-					label: item.label,
-					href: item.href,
-					iconSvg: item.iconSvg
-				}))
-			});
-		}
-		return sections;
-	});
+	}: NavbarProps = $props();
 
-	function handleBurgerClick() {
-		drawerOpen = true;
-	}
+	const isPrimary = $derived(variant === 'primary' || variant === 'midnight');
 </script>
 
-<svelte:window onresize={() => (windowWidth = window.innerWidth)} />
-
-<header>
+<header class={isPrimary ? 'primary' : ''}>
 	<div class="inner-navbar {className} {inContainer ? 'container' : ''}">
+		{@render leftSection?.()}
 		{#if showDrawerButton && drawerButtonPosition === 'left'}
 			<ActionIcon
 				svg={drawerButtonIcon}
-				variant="secondary-subtle"
+				variant={isPrimary ? 'accent-subtle' : 'secondary-subtle'}
 				size="1.25rem"
 				onclick={onDrawerButtonClick}
 				class="drawer-btn drawer-btn-left"
@@ -97,49 +88,52 @@
 			</div>
 		{/if}
 
-		{#if !isCollapsed}
+		{#if items.length > 0}
 			<div class="primary links-container">
 				{#each items as item}
-					<Link href={item.href}>{item.label}</Link>
+					<NavbarItemView {item} />
 				{/each}
 			</div>
 		{/if}
 
-		<div class="middle">
-			{@render middleSection?.()}
-		</div>
-
-		{#if !isCollapsed}
+		{#if middleSection}
+			<div class="middle">
+				{@render middleSection()}
+			</div>
+		{/if}
+		<!-- <ActionIcon
+			class="hamburger"
+			variant={$isDarkMode ? 'auto-subtle' : 'primary'}
+			onclick={toggleDrawer}
+			svg={iconHamburger}
+		/> -->
+		{#if secondaryItems.length > 0}
 			<div class="secondary links-container">
 				{#each secondaryItems as item}
-					{#if item.href.indexOf('/') === 0}
-						<Link href={item.href}>{item.label}</Link>
-					{:else}
-						<a href={item.href}>{item.label}</a>
-					{/if}
+					<NavbarItemView {item} />
 				{/each}
 			</div>
-			{@render rightSection?.()}
 		{/if}
-		{#if iconSection}
-			<div class="icon-section">
-				{@render iconSection()}
+		{#if rightSection}
+			<div class="right">
+				{@render rightSection()}
 			</div>
 		{/if}
-		<ThemeSwitcher darkVariant="secondary-subtle" lightVariant="primary-subtle" />
-		{#if isCollapsed}
-			<ActionIcon
-				svg={iconHamburger}
-				variant={themeState.isDarkMode ? 'secondary-subtle' : 'primary-subtle'}
-				size="1.25rem"
-				onclick={handleBurgerClick}
-				class="responsive-burger"
-			/>
+		<ThemeSwitcher
+			darkVariant="accent-subtle"
+			lightVariant={isPrimary ? 'accent-subtle' : 'primary-subtle'}
+		/>
+		{#if !viewportState.isMobile && !noLogo}
+			{#if logoHref}
+				<Logo href={logoHref} fill={isPrimary ? 'white' : undefined} />
+			{:else}
+				<Logo fill={isPrimary ? 'white' : undefined} />
+			{/if}
 		{/if}
 		{#if showDrawerButton && drawerButtonPosition === 'right'}
 			<ActionIcon
 				svg={drawerButtonIcon}
-				variant="secondary-subtle"
+				variant={isPrimary ? 'accent-subtle' : 'secondary-subtle'}
 				size="1.25rem"
 				onclick={onDrawerButtonClick}
 				class="drawer-btn drawer-btn-right"
@@ -148,55 +142,116 @@
 	</div>
 </header>
 
-{#if responsive}
-	<Drawer
-		bind:open={drawerOpen}
-		title={drawerHeader ?? appNav?.text ?? ''}
-		sections={drawerSections}
-		closeForLargeScreens={true}
-		largeScreenBreakpoint={responsiveBreakpoint}
-	/>
-{/if}
-
 <style>
 	header {
 		position: sticky;
 		top: 0;
-		z-index: var(--pui-z-sticky);
-		height: 46px;
+		z-index: 40;
+		height: var(--header-height);
 		display: flex;
-		background: var(--pui-color-white);
-		border-bottom: 1px solid var(--pui-border-default);
+		background: white;
+		border-bottom: 0.666667px solid rgb(222, 226, 230);
 	}
 
 	.links-container {
 		display: flex;
-		gap: var(--pui-spacing-4);
+		gap: 1rem;
 	}
 
 	:global(.dark) header {
-		background: var(--pui-color-black);
+		background: black;
+		border: none;
+	}
+
+	/* Primary variant: primary brand background regardless of theme */
+	header.primary,
+	:global(.dark) header.primary {
+		background: var(--ui-primary);
 		border: none;
 	}
 
+	header.primary .inner-navbar {
+		color: white;
+	}
+
+	/* Top-level links/triggers: white, turning accent on hover (matches dark navbar).
+	   Use `>` so these rules don't leak into the fold-out sub-list panels, which keep
+	   their own (paper) colour scheme regardless of the primary variant. */
+	header.primary .inner-navbar .links-container > :global(a),
+	header.primary
+		.inner-navbar
+		.links-container
+		> :global(.navbar-parent)
+		> :global(.navbar-parent-trigger),
+	header.primary .inner-navbar .header-hero :global(a) {
+		color: white;
+		transition: color 200ms;
+	}
+
+	header.primary .inner-navbar .links-container > :global(a:hover),
+	header.primary
+		.inner-navbar
+		.links-container
+		> :global(.navbar-parent)
+		> :global(.navbar-parent-trigger:hover),
+	header.primary .inner-navbar .header-hero :global(a:hover) {
+		color: var(--ui-accent);
+	}
+
 	.inner-navbar {
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-4);
+		gap: 1rem;
 
 		margin: 0 auto;
-		padding: 0 var(--pui-spacing-4);
+		padding: 0 1em;
 		height: 100%;
 		width: 100%;
-		color: var(--pui-color-primary);
+		color: var(--ui-primary);
 	}
 
 	.middle {
 		flex-grow: 1;
 	}
 
-	.inner-navbar :global(.responsive-burger) {
-		flex-shrink: 0;
+	/* Without a growing .middle, the first right-side element pushes the group to the
+	   edge via auto margin. When .middle is present its flex-grow consumes the free
+	   space first, so these margins resolve to 0 and have no effect. */
+	.secondary,
+	.right,
+	.inner-navbar > :global(.theme-switcher) {
+		margin-left: auto;
+	}
+
+	.secondary ~ .right,
+	.secondary ~ :global(.theme-switcher),
+	.right ~ :global(.theme-switcher) {
+		margin-left: 0;
+	}
+
+	.hidden-when-small {
+		display: none;
+	}
+
+	.inner-navbar :global(.hamburger) {
+		margin-left: auto;
+	}
+
+	@media (max-width: 640px) {
+		.hidden-when-small {
+			display: block;
+		}
+
+		.inner-navbar :global(.hamburger) {
+			display: none;
+		}
+	}
+
+	.top-header {
+		border-bottom-width: 1px;
+		border-bottom-style: solid;
+		border-color: var(--border-color);
+		height: 1.5rem;
 	}
 
 	.inner-navbar :global(.cu-icon) {
@@ -208,17 +263,10 @@
 	}
 
 	.inner-navbar :global(.drawer-btn-left) {
-		margin-right: var(--pui-spacing-1);
+		margin-right: 0.25rem;
 	}
 
 	.inner-navbar :global(.drawer-btn-right) {
-		margin-left: var(--pui-spacing-2);
-	}
-
-	.icon-section {
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-1);
-		flex-shrink: 0;
+		margin-left: 0.5rem;
 	}
 </style>

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

@@ -1,26 +1,40 @@
-import type { LinkNavbarItem } from '../models/NavbarItem.js';
+import type { NavbarItem } from '../models/NavbarItem.js';
 import { type Hyperlink } from '../index.js';
 import type { Snippet } from 'svelte';
-interface Props {
-    drawerHeader?: string | undefined;
+/** `midnight` is a legacy alias for `primary`. */
+export type NavbarVariant = 'default' | 'primary' | 'midnight';
+export interface NavbarProps {
+    /** Visual variant. `primary` uses the primary brand colour as the background across all themes */
+    variant?: NavbarVariant;
+    /** App navigation link displayed as a header */
     appNav?: Hyperlink;
-    items?: LinkNavbarItem[];
-    secondaryItems?: LinkNavbarItem[];
+    /** Primary navigation items. Items with `subItems` fold out a vertical sub-list; items with `iconSvg` show a leading icon */
+    items?: NavbarItem[];
+    /** Secondary navigation items (right side) */
+    secondaryItems?: NavbarItem[];
+    /** Hide the logo */
+    noLogo?: boolean;
+    /** Custom URL for the logo link */
+    logoHref?: string;
+    /** Additional CSS classes */
     class?: string;
+    /** Constrain navbar width to container */
     inContainer?: boolean;
+    /** Custom content for the left section */
+    leftSection?: Snippet;
+    /** Custom content for the middle section */
     middleSection?: Snippet;
+    /** Custom content for the right section */
     rightSection?: Snippet;
-    /** Icons displayed to the left of the ThemeSwitcher, visible even when collapsed on mobile */
-    iconSection?: Snippet;
-    /** Enable responsive collapse to burger menu on small screens (default: true) */
-    responsive?: boolean;
-    /** Breakpoint in pixels at which the navbar collapses (default: 768) */
-    responsiveBreakpoint?: number;
+    /** Show mobile drawer toggle button */
     showDrawerButton?: boolean;
+    /** Position of the drawer toggle button */
     drawerButtonPosition?: 'left' | 'right';
+    /** Custom icon for the drawer toggle button */
     drawerButtonIcon?: string;
+    /** Callback when drawer toggle is clicked */
     onDrawerButtonClick?: () => void;
 }
-declare const Navbar: import("svelte").Component<Props, {}, "">;
+declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;
 export default Navbar;

package/dist/layout/NavbarItemDisplay.svelte

@@ -1,6 +1,6 @@
 <!-- <script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import Link from '../ui/Link.svelte';
+	import Icon from "../icon/Icon.svelte";
+	import Link from "../ui/Link.svelte";
 	import type { NavbarItem } from "../models/NavbarItem.js";
 
     export let item: NavbarItem;

package/dist/layout/NavbarItemView.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import type { NavbarItem } from '../models/NavbarItem.js';
+	import Link from '../ui/Link.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import { iconChevronDown, iconChevronRight } from '../icon/index.js';
+	import { clickOutside } from '../util/ClickOutside.js';
+	// Self-import enables recursive rendering of nested sub-lists (Svelte 5 replacement for svelte:self)
+	import Self from './NavbarItemView.svelte';
+
+	export interface NavbarItemViewProps {
+		/** The navigation item to render */
+		item: NavbarItem;
+		/** Nesting depth. 0 = top level (sub-list folds down), >0 = nested (flies out to the side) */
+		depth?: number;
+	}
+
+	let { item, depth = 0 }: NavbarItemViewProps = $props();
+
+	let open = $state(false);
+
+	const close = () => (open = false);
+</script>
+
+{#if 'component' in item}
+	{@const Component = item.component}
+	<Component {...item.componentProps} />
+{:else if 'href' in item}
+	<Link href={item.href} onclick={item.onclick} class="navbar-item {item.class ?? ''}">
+		{#if item.iconSvg}
+			<Icon svg={item.iconSvg} size="1.1em" class="navbar-item-icon" />
+		{/if}
+		<span>{item.label}</span>
+	</Link>
+{:else}
+	<div class="navbar-parent" use:clickOutside={close}>
+		<button
+			type="button"
+			class="navbar-item navbar-parent-trigger {item.class ?? ''}"
+			aria-expanded={open}
+			aria-haspopup="true"
+			onclick={(e) => {
+				item.onclick?.(e);
+				open = !open;
+			}}
+		>
+			{#if item.iconSvg}
+				<Icon svg={item.iconSvg} size="1.1em" class="navbar-item-icon" />
+			{/if}
+			<span>{item.label}</span>
+			{#if item.subItems?.length}
+				<Icon
+					svg={depth > 0 ? iconChevronRight : iconChevronDown}
+					size="0.85em"
+					class="navbar-chevron"
+				/>
+			{/if}
+		</button>
+		{#if open && item.subItems?.length}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="navbar-submenu"
+				class:flyout={depth > 0}
+				style={item.submenuWidth ? `width: ${item.submenuWidth}; min-width: ${item.submenuWidth};` : ''}
+				onclick={(e) => {
+					// Close the fold-out once an actual link is chosen (but not when toggling a nested parent)
+					if ((e.target as HTMLElement).closest('a')) close();
+				}}
+			>
+				{#each item.subItems as subItem}
+					<Self item={subItem} depth={depth + 1} />
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.navbar-parent {
+		position: relative;
+		display: inline-flex;
+	}
+
+	/* Shared look for links and parent triggers so they line up in the navbar row */
+	:global(.navbar-item) {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+
+	/* Match the global `header a` link styling so triggers and links look identical.
+	   A <button> doesn't inherit those rules, so set the colours explicitly. */
+	.navbar-parent-trigger {
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		color: var(--ui-primary);
+		cursor: pointer;
+		transition: color 200ms;
+	}
+
+	.navbar-parent-trigger:hover {
+		color: var(--ui-accent-dark);
+	}
+
+	:global(.dark) .navbar-parent-trigger {
+		color: white;
+	}
+
+	:global(.dark) .navbar-parent-trigger:hover {
+		color: var(--ui-accent);
+	}
+
+	:global(.navbar-item-icon) {
+		flex-shrink: 0;
+	}
+
+	:global(.navbar-chevron) {
+		flex-shrink: 0;
+		opacity: 0.7;
+	}
+
+	/* Fold-out vertical sub-list */
+	.navbar-submenu {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		margin-top: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 12rem;
+		background-color: var(--paper-body-bg);
+		border: 1px solid var(--border-color);
+		border-radius: 0.375rem;
+		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+		z-index: 1000;
+	}
+
+	/* Nested sub-lists fly out to the side instead of downward */
+	.navbar-submenu.flyout {
+		top: 0;
+		left: 100%;
+		margin-top: 0;
+		margin-left: 0.25rem;
+	}
+
+	/* Items inside the panel always use the panel's own colour scheme,
+	   regardless of the navbar variant (matches the Dropdown component). */
+	.navbar-submenu :global(.navbar-item) {
+		width: 100%;
+		padding: 0.4rem 0.6rem;
+		color: var(--ui-primary);
+		text-decoration: none;
+		transition: background-color 0.15s ease;
+	}
+
+	.navbar-submenu :global(.navbar-item:first-child) {
+		border-top-left-radius: 0.25rem;
+		border-top-right-radius: 0.25rem;
+	}
+
+	.navbar-submenu :global(.navbar-item:last-child) {
+		border-bottom-left-radius: 0.25rem;
+		border-bottom-right-radius: 0.25rem;
+	}
+
+	.navbar-submenu :global(.navbar-item:hover) {
+		background-color: var(--border-color);
+		color: var(--ui-primary);
+	}
+
+	:global(.dark) .navbar-submenu :global(.navbar-item) {
+		color: var(--ui-accent);
+	}
+
+	:global(.dark) .navbar-submenu :global(.navbar-item:hover) {
+		color: var(--ui-accent);
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { NavbarItem } from '../models/NavbarItem.js';
+export interface NavbarItemViewProps {
+    /** The navigation item to render */
+    item: NavbarItem;
+    /** Nesting depth. 0 = top level (sub-list folds down), >0 = nested (flies out to the side) */
+    depth?: number;
+}
+declare const NavbarItemView: import("svelte").Component<NavbarItemViewProps, {}, "">;
+type NavbarItemView = ReturnType<typeof NavbarItemView>;
+export default NavbarItemView;