@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/ui/Drawer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { SidenavItem, SidenavSection } from '../layout/Sidenav.svelte';
+	import type { SidenavItem, SidenavItemAction, SidenavSection } from '../layout/Sidenav.svelte';
 	import Icon from '../icon/Icon.svelte';
 	import Link from './Link.svelte';
 	import ActionIcon from './ActionIcon.svelte';
@@ -8,23 +8,41 @@
 	import { fade, fly } from 'svelte/transition';
 	import { slide } from 'svelte/transition';
 
-	interface Props {
+	export interface DrawerProps {
+		/** Whether the drawer is open (bindable) */
 		open?: boolean;
+		/** Side from which the drawer slides in */
 		position?: 'left' | 'right';
+		/** Width of the drawer */
 		width?: string;
+		/** Close drawer when clicking outside */
 		closeOnClickOutside?: boolean;
+		/** Close drawer when pressing Escape key */
 		closeOnEscape?: boolean;
+		/** Auto-close on larger screens */
 		closeForLargeScreens?: boolean;
+		/** Breakpoint for large screen detection */
 		largeScreenBreakpoint?: number;
+		/** Navigation sections (for sidenav-style drawer) */
 		sections?: SidenavSection[];
+		/** Sections pinned to the bottom */
 		bottomSections?: SidenavSection[];
+		/** Title displayed in the drawer header */
 		title?: string;
+		/** Additional CSS classes */
 		class?: string;
+		/** Custom header content */
 		header?: Snippet;
+		/** Custom footer content */
 		footer?: Snippet;
+		/** Main drawer content */
 		children?: Snippet;
+		/** Callback when drawer closes */
 		onclose?: () => void;
+		/** Callback when a navigation item is clicked */
 		onItemClick?: (item: SidenavItem) => void;
+		/** When item action buttons are shown: on hover/focus or always visible */
+		actionsVisible?: 'hover' | 'always';
 	}
 
 	let {
@@ -43,8 +61,9 @@
 		footer,
 		children,
 		onclose,
-		onItemClick
-	}: Props = $props();
+		onItemClick,
+		actionsVisible = 'hover'
+	}: DrawerProps = $props();
 
 	let expandedSections: Set<string> = $state(new Set());
 
@@ -66,7 +85,11 @@
 	}
 
 	function handleWindowResize() {
-		if (closeForLargeScreens && typeof window !== 'undefined' && window.innerWidth > largeScreenBreakpoint) {
+		if (
+			closeForLargeScreens &&
+			typeof window !== 'undefined' &&
+			window.innerWidth > largeScreenBreakpoint
+		) {
 			close();
 		}
 	}
@@ -100,6 +123,12 @@
 		item.onclick?.();
 	}
 
+	function handleActionClick(action: SidenavItemAction, item: SidenavItem, e: MouseEvent) {
+		// Keep the action independent of the item's own navigation/expand behaviour
+		e.stopPropagation();
+		action.onclick?.(item, e);
+	}
+
 	// Body scroll lock
 	$effect(() => {
 		if (typeof document !== 'undefined') {
@@ -119,6 +148,106 @@
 	const flyDirection = $derived(position === 'left' ? -320 : 320);
 </script>
 
+{#snippet itemActions(item: SidenavItem)}
+	{#if item.actions && item.actions.length > 0}
+		<span class="nav-actions" class:always={actionsVisible === 'always'}>
+			{#each item.actions as action}
+				<ActionIcon
+					svg={action.iconSvg}
+					size="0.875rem"
+					variant={action.variant ?? 'secondary-subtle'}
+					tooltip={action.label}
+					onclick={(e) => handleActionClick(action, item, e)}
+				/>
+			{/each}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet sectionList(sects: SidenavSection[])}
+	{#each sects as section}
+		{#if section.title}
+			<div class="section-title">{section.title}</div>
+		{/if}
+		<ul class="nav-list">
+			{#each section.items as item}
+				<li class="nav-item">
+					<div class="nav-item-row" class:active={item.active}>
+						{#if item.href && !(item.items && item.items.length > 0)}
+							<Link
+								href={item.href}
+								class="nav-link {item.active ? 'active' : ''}"
+								onclick={() => handleLinkClick(item)}
+							>
+								{#if item.iconSvg}
+									<Icon svg={item.iconSvg} size="1.25em" />
+								{/if}
+								<span class="nav-label">{item.label}</span>
+							</Link>
+						{:else}
+							<button
+								type="button"
+								class="nav-link"
+								class:active={item.active}
+								class:has-children={item.items && item.items.length > 0}
+								onclick={(e) => handleItemClick(item, e)}
+							>
+								{#if item.iconSvg}
+									<Icon svg={item.iconSvg} size="1.25em" />
+								{/if}
+								<span class="nav-label">{item.label}</span>
+								{#if item.items && item.items.length > 0}
+									<Icon
+										svg={iconChevronRight}
+										size="0.75em"
+										class="chevron {isExpanded(item.label) ? 'expanded' : ''}"
+									/>
+								{/if}
+							</button>
+						{/if}
+						{@render itemActions(item)}
+					</div>
+					{#if item.items && item.items.length > 0 && isExpanded(item.label)}
+						<ul class="sub-nav-list" transition:slide={{ duration: 200 }}>
+							{#each item.items as subItem}
+								<li class="sub-nav-item">
+									<div class="nav-item-row" class:active={subItem.active}>
+										{#if subItem.href}
+											<Link
+												href={subItem.href}
+												class="sub-nav-link {subItem.active ? 'active' : ''}"
+												onclick={() => handleLinkClick(subItem)}
+											>
+												{#if subItem.iconSvg}
+													<Icon svg={subItem.iconSvg} size="1em" />
+												{/if}
+												<span class="nav-label">{subItem.label}</span>
+											</Link>
+										{:else}
+											<button
+												type="button"
+												class="sub-nav-link"
+												class:active={subItem.active}
+												onclick={() => handleLinkClick(subItem)}
+											>
+												{#if subItem.iconSvg}
+													<Icon svg={subItem.iconSvg} size="1em" />
+												{/if}
+												<span class="nav-label">{subItem.label}</span>
+											</button>
+										{/if}
+										{@render itemActions(subItem)}
+									</div>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/each}
+{/snippet}
+
 <svelte:window onresize={handleWindowResize} onkeydown={handleKeydown} />
 
 {#if open}
@@ -167,81 +296,7 @@
 			{#if hasNavContent}
 				<!-- Navigation sections -->
 				<nav class="drawer-nav">
-					{#each sections as section}
-						{#if section.title}
-							<div class="section-title">{section.title}</div>
-						{/if}
-						<ul class="nav-list">
-							{#each section.items as item}
-								<li class="nav-item">
-									{#if item.href && !(item.items && item.items.length > 0)}
-										<Link
-											href={item.href}
-											class="nav-link {item.active ? 'active' : ''}"
-											onclick={() => handleLinkClick(item)}
-										>
-											{#if item.iconSvg}
-												<Icon svg={item.iconSvg} size="1.25em" />
-											{/if}
-											<span class="nav-label">{item.label}</span>
-										</Link>
-									{:else}
-										<button
-											type="button"
-											class="nav-link"
-											class:active={item.active}
-											class:has-children={item.items && item.items.length > 0}
-											onclick={(e) => handleItemClick(item, e)}
-										>
-											{#if item.iconSvg}
-												<Icon svg={item.iconSvg} size="1.25em" />
-											{/if}
-											<span class="nav-label">{item.label}</span>
-											{#if item.items && item.items.length > 0}
-												<Icon
-													svg={iconChevronRight}
-													size="0.75em"
-													class="chevron {isExpanded(item.label) ? 'expanded' : ''}"
-												/>
-											{/if}
-										</button>
-										{#if item.items && item.items.length > 0 && isExpanded(item.label)}
-											<ul class="sub-nav-list" transition:slide={{ duration: 200 }}>
-												{#each item.items as subItem}
-													<li class="sub-nav-item">
-														{#if subItem.href}
-															<Link
-																href={subItem.href}
-																class="sub-nav-link {subItem.active ? 'active' : ''}"
-																onclick={() => handleLinkClick(subItem)}
-															>
-																{#if subItem.iconSvg}
-																	<Icon svg={subItem.iconSvg} size="1em" />
-																{/if}
-																<span>{subItem.label}</span>
-															</Link>
-														{:else}
-															<button
-																type="button"
-																class="sub-nav-link"
-																class:active={subItem.active}
-																onclick={() => handleLinkClick(subItem)}
-															>
-																{#if subItem.iconSvg}
-																	<Icon svg={subItem.iconSvg} size="1em" />
-																{/if}
-																<span>{subItem.label}</span>
-															</button>
-														{/if}
-													</li>
-												{/each}
-											</ul>
-										{/if}
-									{/if}
-								</li>
-							{/each}
-						</ul>
-					{/each}
+					{@render sectionList(sections)}
 				</nav>
 			{:else if children}
 				{@render children()}
@@ -251,41 +306,7 @@
 		<!-- Bottom sections -->
 		{#if bottomSections.length > 0}
 			<nav class="drawer-bottom">
-				{#each bottomSections as section}
-					{#if section.title}
-						<div class="section-title">{section.title}</div>
-					{/if}
-					<ul class="nav-list">
-						{#each section.items as item}
-							<li class="nav-item">
-								{#if item.href}
-									<Link
-										href={item.href}
-										class="nav-link {item.active ? 'active' : ''}"
-										onclick={() => handleLinkClick(item)}
-									>
-										{#if item.iconSvg}
-											<Icon svg={item.iconSvg} size="1.25em" />
-										{/if}
-										<span class="nav-label">{item.label}</span>
-									</Link>
-								{:else}
-									<button
-										type="button"
-										class="nav-link"
-										class:active={item.active}
-										onclick={() => handleLinkClick(item)}
-									>
-										{#if item.iconSvg}
-											<Icon svg={item.iconSvg} size="1.25em" />
-										{/if}
-										<span class="nav-label">{item.label}</span>
-									</button>
-								{/if}
-							</li>
-						{/each}
-					</ul>
-				{/each}
+				{@render sectionList(bottomSections)}
 			</nav>
 		{/if}
 
@@ -302,8 +323,8 @@
 	.drawer-backdrop {
 		position: fixed;
 		inset: 0;
-		background-color: var(--pui-bg-overlay);
-		z-index: var(--pui-z-modal-backdrop);
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1040;
 	}
 
 	.drawer {
@@ -314,21 +335,21 @@
 		flex-direction: column;
 		width: var(--drawer-width);
 		max-width: 100vw;
-		background-color: var(--pui-paper-body-bg);
-		border-right: 1px solid var(--pui-border-default);
-		z-index: var(--pui-z-modal);
+		background-color: var(--paper-body-bg);
+		border-right: 1px solid var(--border-color);
+		z-index: 1050;
 		overflow: hidden;
 	}
 
 	.drawer-left {
 		left: 0;
-		border-right: 1px solid var(--pui-border-default);
+		border-right: 1px solid var(--border-color);
 		border-left: none;
 	}
 
 	.drawer-right {
 		right: 0;
-		border-left: 1px solid var(--pui-border-default);
+		border-left: 1px solid var(--border-color);
 		border-right: none;
 	}
 
@@ -336,18 +357,18 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: var(--pui-spacing-4);
-		padding: var(--pui-spacing-3) var(--pui-spacing-4);
-		border-bottom: 1px solid var(--pui-border-default);
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--border-color);
 		flex-shrink: 0;
-		min-height: 46px;
+		min-height: var(--header-height);
 	}
 
 	.drawer-title {
 		margin: 0;
-		font-size: var(--pui-font-size-lg);
-		font-weight: var(--pui-font-weight-semibold);
-		color: var(--pui-text-primary);
+		font-size: 1.125rem;
+		font-weight: 600;
+		color: var(--text-color);
 		flex: 1;
 	}
 
@@ -363,28 +384,28 @@
 	}
 
 	.drawer-nav {
-		padding: var(--pui-spacing-2) 0;
+		padding: 0.5rem 0;
 	}
 
 	.drawer-bottom {
 		flex-shrink: 0;
-		border-top: 1px solid var(--pui-border-default);
-		padding: var(--pui-spacing-2) 0;
+		border-top: 1px solid var(--border-color);
+		padding: 0.5rem 0;
 	}
 
 	.drawer-footer {
-		padding: var(--pui-spacing-4);
-		border-top: 1px solid var(--pui-border-default);
+		padding: 1rem;
+		border-top: 1px solid var(--border-color);
 		flex-shrink: 0;
 	}
 
 	.section-title {
-		padding: var(--pui-spacing-3) var(--pui-spacing-4) var(--pui-spacing-2);
-		font-size: var(--pui-font-size-xs);
-		font-weight: var(--pui-font-weight-semibold);
+		padding: 0.75rem 1rem 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
 		text-transform: uppercase;
-		letter-spacing: var(--pui-letter-spacing-wide);
-		color: var(--pui-text-muted);
+		letter-spacing: 0.05em;
+		color: var(--text-muted, #6b7280);
 	}
 
 	.nav-list {
@@ -397,44 +418,76 @@
 		margin: 0;
 	}
 
+	/* Row wraps the nav link/button together with its action buttons. The row (not the
+	   link) carries the hover/active background so it spans the full width, including the
+	   action-button area. */
+	.nav-item-row {
+		display: flex;
+		align-items: center;
+		transition: background-color 0.15s ease;
+	}
+
+	.nav-item-row :global(.nav-link),
+	.nav-item-row button.nav-link,
+	.nav-item-row :global(.sub-nav-link),
+	.nav-item-row button.sub-nav-link {
+		flex: 1;
+		min-width: 0;
+	}
+
+	/* Action buttons: revealed on hover/focus by default, or always when opted in */
+	.nav-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+		flex-shrink: 0;
+		padding-right: 0.5rem;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.15s ease;
+	}
+
+	.nav-actions.always,
+	.nav-item-row:hover .nav-actions,
+	.nav-item-row:focus-within .nav-actions {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
 	.nav-item :global(.nav-link),
-	.nav-item > button.nav-link {
+	.nav-item button.nav-link {
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-3);
+		gap: 0.75rem;
 		width: 100%;
-		padding: var(--pui-spacing-2_5) var(--pui-spacing-4);
-		font-size: var(--pui-font-size-base);
-		font-weight: var(--pui-font-weight-medium);
-		color: var(--pui-text-primary);
+		padding: 0.625rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--text-color);
 		background: none;
 		border: none;
 		text-decoration: none;
 		cursor: pointer;
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-out), color var(--pui-transition-fast) var(--pui-ease-out);
+		transition: color 0.15s ease;
 		text-align: left;
 	}
 
-	.nav-item :global(.nav-link:hover),
-	.nav-item > button.nav-link:hover {
-		background-color: var(--pui-bg-hover);
+	.nav-item > .nav-item-row:hover {
+		background-color: rgba(var(--ui-primary-rgbc), 0.08);
 	}
 
-	:global(.dark) .nav-item :global(.nav-link:hover),
-	:global(.dark) .nav-item > button.nav-link:hover {
-		background-color: var(--pui-bg-hover);
+	:global(.dark) .nav-item > .nav-item-row:hover {
+		background-color: rgba(var(--ui-primary-rgbc), 0.2);
 	}
 
-	.nav-item :global(.nav-link.active),
-	.nav-item > button.nav-link.active {
-		background-color: rgba(var(--pui-color-secondary-rgb), 0.2);
-		border-left: 3px solid var(--pui-color-secondary);
+	.nav-item > .nav-item-row.active {
+		background-color: rgba(var(--ui-accent-rgbc), 0.2);
+		border-left: 3px solid var(--ui-accent);
 	}
 
-	:global(.dark) .nav-item :global(.nav-link.active),
-	:global(.dark) .nav-item > button.nav-link.active {
-		background-color: rgba(var(--pui-color-primary-rgb), 0.3);
-		border-left: 3px solid var(--pui-color-primary);
+	:global(.dark) .nav-item > .nav-item-row.active {
+		background-color: rgba(var(--ui-primary-rgbc), 0.3);
+		border-left: 3px solid var(--ui-primary);
 	}
 
 	.nav-label {
@@ -445,7 +498,7 @@
 	}
 
 	.nav-link :global(.chevron) {
-		transition: transform var(--pui-transition-fast) var(--pui-ease-out);
+		transition: transform 0.2s ease;
 		flex-shrink: 0;
 	}
 
@@ -457,7 +510,7 @@
 		list-style: none;
 		margin: 0;
 		padding: 0;
-		background-color: var(--pui-bg-hover);
+		background-color: rgba(var(--ui-primary-rgbc), 0.03);
 	}
 
 	:global(.dark) .sub-nav-list {
@@ -469,42 +522,42 @@
 	}
 
 	.sub-nav-item :global(.sub-nav-link),
-	.sub-nav-item > button.sub-nav-link {
+	.sub-nav-item button.sub-nav-link {
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 		width: 100%;
-		padding: var(--pui-spacing-2) var(--pui-spacing-4) var(--pui-spacing-2) var(--pui-spacing-11);
-		font-size: var(--pui-font-size-sm);
-		font-weight: var(--pui-font-weight-normal);
-		color: var(--pui-text-primary);
+		padding: 0.5rem 1rem 0.5rem 2.75rem;
+		font-size: 0.8125rem;
+		font-weight: 400;
+		color: var(--text-color);
 		background: none;
 		border: none;
 		text-decoration: none;
 		cursor: pointer;
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-out), color var(--pui-transition-fast) var(--pui-ease-out);
+		transition: color 0.15s ease;
 		text-align: left;
 	}
 
-	.sub-nav-item :global(.sub-nav-link:hover),
-	.sub-nav-item > button.sub-nav-link:hover {
-		background-color: var(--pui-bg-active);
+	.sub-nav-item > .nav-item-row:hover {
+		background-color: rgba(var(--ui-primary-rgbc), 0.08);
+	}
+
+	:global(.dark) .sub-nav-item > .nav-item-row:hover {
+		background-color: rgba(var(--ui-primary-rgbc), 0.2);
 	}
 
-	:global(.dark) .sub-nav-item :global(.sub-nav-link:hover),
-	:global(.dark) .sub-nav-item > button.sub-nav-link:hover {
-		background-color: var(--pui-bg-active);
+	.sub-nav-item > .nav-item-row.active {
+		border-left: 3px solid var(--ui-accent);
 	}
 
-	.sub-nav-item :global(.sub-nav-link.active),
-	.sub-nav-item > button.sub-nav-link.active {
-		font-weight: var(--pui-font-weight-medium);
-		border-left: 3px solid var(--pui-color-secondary);
+	:global(.dark) .sub-nav-item > .nav-item-row.active {
+		border-left: 3px solid var(--ui-primary);
 	}
 
-	:global(.dark) .sub-nav-item :global(.sub-nav-link.active),
-	:global(.dark) .sub-nav-item > button.sub-nav-link.active {
-		border-left: 3px solid var(--pui-color-primary);
+	.sub-nav-item > .nav-item-row.active :global(.sub-nav-link),
+	.sub-nav-item > .nav-item-row.active button.sub-nav-link {
+		font-weight: 500;
 	}
 
 	/* Scrollbar styling */
@@ -517,8 +570,8 @@
 	}
 
 	.drawer-content::-webkit-scrollbar-thumb {
-		background-color: var(--pui-color-gray-700);
-		border-radius: var(--pui-radius-sm);
+		background-color: #343434;
+		border-radius: 3px;
 		border: none;
 	}
 </style>

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

@@ -1,23 +1,41 @@
 import type { Snippet } from 'svelte';
 import type { SidenavItem, SidenavSection } from '../layout/Sidenav.svelte';
-interface Props {
+export interface DrawerProps {
+    /** Whether the drawer is open (bindable) */
     open?: boolean;
+    /** Side from which the drawer slides in */
     position?: 'left' | 'right';
+    /** Width of the drawer */
     width?: string;
+    /** Close drawer when clicking outside */
     closeOnClickOutside?: boolean;
+    /** Close drawer when pressing Escape key */
     closeOnEscape?: boolean;
+    /** Auto-close on larger screens */
     closeForLargeScreens?: boolean;
+    /** Breakpoint for large screen detection */
     largeScreenBreakpoint?: number;
+    /** Navigation sections (for sidenav-style drawer) */
     sections?: SidenavSection[];
+    /** Sections pinned to the bottom */
     bottomSections?: SidenavSection[];
+    /** Title displayed in the drawer header */
     title?: string;
+    /** Additional CSS classes */
     class?: string;
+    /** Custom header content */
     header?: Snippet;
+    /** Custom footer content */
     footer?: Snippet;
+    /** Main drawer content */
     children?: Snippet;
+    /** Callback when drawer closes */
     onclose?: () => void;
+    /** Callback when a navigation item is clicked */
     onItemClick?: (item: SidenavItem) => void;
+    /** When item action buttons are shown: on hover/focus or always visible */
+    actionsVisible?: 'hover' | 'always';
 }
-declare const Drawer: import("svelte").Component<Props, {}, "open">;
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;