@placeholderco/placeholder-ui 1.0.12 → 2.1.0

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

@@ -1,31 +1,10 @@
 import type { Snippet } from 'svelte';
-import '../styles/index.css';
-interface Props {
-    /** Header/navbar content */
-    header?: Snippet;
-    /** Left sidebar content */
-    aside?: Snippet;
-    /** Right sidebar content */
-    asideRight?: Snippet;
-    /** Footer content */
-    footer?: Snippet;
-    /** Main content */
-    children?: Snippet;
-    /** Width of the left aside */
-    asideWidth?: string;
-    /** Width of the right aside */
-    asideRightWidth?: string;
-    /** Height of the header */
-    headerHeight?: string;
-    /** Height of the footer */
-    footerHeight?: string;
-    /** Whether the header is fixed/sticky */
-    fixedHeader?: boolean;
-    /** Whether the aside is fixed */
-    fixedAside?: boolean;
-    /** Additional class for the shell */
-    class?: string;
+import '../bootstrap.min.css';
+import '../app.css';
+export interface AppShellProps {
+    /** Application content (includes global styles) */
+    children: Snippet;
 }
-declare const AppShell: import("svelte").Component<Props, {}, "">;
+declare const AppShell: import("svelte").Component<AppShellProps, {}, "">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/layout/CustomNavbar.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	
-	interface Props {
+	export interface CustomNavbarProps {
+		/** Header text for the mobile drawer */
 		drawerHeader?: string | undefined;
+		/** Navbar content */
 		children: Snippet;
 	}
 
-	let { drawerHeader = undefined, children }: Props = $props();
+	let { drawerHeader = undefined, children }: CustomNavbarProps = $props();
 
 	// export let drawerHeader: string | undefined = undefined;
 	// export let items: NavbarItem[] = [];
@@ -44,18 +46,18 @@
 	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-primary);
+		background: var(--ui-primary);
 
 		align-items: center;
-		padding: 0 var(--pui-spacing-4);
+		padding: 0 1rem;
 	}
 
 	:global(.dark) header {
-		background: var(--pui-color-black);
+		background: black;
 	}
 </style>

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

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export interface CustomNavbarProps {
+    /** Header text for the mobile drawer */
     drawerHeader?: string | undefined;
+    /** Navbar content */
     children: Snippet;
 }
-declare const CustomNavbar: import("svelte").Component<Props, {}, "">;
+declare const CustomNavbar: import("svelte").Component<CustomNavbarProps, {}, "">;
 type CustomNavbar = ReturnType<typeof CustomNavbar>;
 export default CustomNavbar;

package/dist/layout/Navbar.svelte

@@ -1,102 +1,82 @@
 <script lang="ts">
-	import type { LinkNavbarItem } from "../models/NavbarItem.js";
-	import type { SidenavSection } from "./Sidenav.svelte";
+	import type { NavbarItem } from '../models/NavbarItem.js';
 	import {
-		Link,
 		ThemeSwitcher,
 		ActionIcon,
-		Drawer,
 		iconHamburger,
 		type Hyperlink,
-	} from "../index.js";
-	import { themeState } from "../theme.svelte.js";
-	import type { Snippet } from "svelte";
+		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;
-		drawerButtonPosition?: "left" | "right";
+		/** 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 = [],
-		class: className = "",
+		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",
+		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;
-	});
+		onDrawerButtonClick = undefined
+	}: 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' : ''}">
-		{#if showDrawerButton && drawerButtonPosition === "left"}
+		{@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"
@@ -108,54 +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}
-		<div class="icon-section">
-			{#if iconSection}
-				{@render iconSection()}
+		{#if rightSection}
+			<div class="right">
+				{@render rightSection()}
+			</div>
+		{/if}
+		<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}
-			<ThemeSwitcher
-				darkVariant="secondary-subtle"
-				lightVariant="primary-subtle"
-			/>
-		</div>
-		{#if isCollapsed}
-			<ActionIcon
-				svg={iconHamburger}
-				variant={themeState.isDarkMode
-					? "secondary-subtle"
-					: "primary-subtle"}
-				size="1.25rem"
-				onclick={handleBurgerClick}
-				class="responsive-burger"
-			/>
 		{/if}
-		{#if showDrawerButton && drawerButtonPosition === "right"}
+		{#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"
@@ -164,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) {
@@ -224,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 Hyperlink } from "../index.js";
-import type { Snippet } from "svelte";
-interface Props {
-    drawerHeader?: string | undefined;
+import type { NavbarItem } from '../models/NavbarItem.js';
+import { type Hyperlink } from '../index.js';
+import type { Snippet } from 'svelte';
+/** `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;
-    drawerButtonPosition?: "left" | "right";
+    /** 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;