@joewinke/jatui 0.1.33 → 0.2.0

package/dist/components/shell/Sidebar.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+	/**
+	 * Sidebar — app-shell navigation panel.
+	 *
+	 * Modes:
+	 *   expanded  — full labels visible
+	 *   icon      — icon-only rail (no width transition — labels/groups hide via class swap)
+	 *   collapsed — completely hidden; mobile uses a Drawer overlay
+	 *
+	 * Pass a sidebarState from createSidebarState() (shell.ts) for persistence
+	 * and active-item tracking. Without it, the sidebar is stateless.
+	 */
+
+	import type { Snippet } from 'svelte';
+	import type { SidebarState } from './shell.js';
+
+	interface Props {
+		/** Sidebar context from createSidebarState() */
+		sidebarState?: SidebarState | null;
+		/** Fixed width in expanded mode (CSS value) */
+		width?: string;
+		/** Width in icon-only mode */
+		iconWidth?: string;
+		/** Show the collapse toggle button */
+		showToggle?: boolean;
+		/** Sidebar header content (e.g. logo) */
+		header?: Snippet;
+		/** Sidebar footer content (e.g. user info) */
+		footer?: Snippet;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let {
+		sidebarState = null,
+		width = '240px',
+		iconWidth = '56px',
+		showToggle = true,
+		header,
+		footer,
+		children,
+		class: className = ''
+	}: Props = $props();
+
+	const mode = $derived(sidebarState?.mode ?? 'expanded');
+	const mobileOpen = $derived(sidebarState?.mobileOpen ?? false);
+
+	function closeMobile() {
+		sidebarState?.setMobileOpen(false);
+	}
+
+	function handleOverlayKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
+			closeMobile();
+		}
+	}
+
+	function handleSidebarKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && mobileOpen) {
+			closeMobile();
+		}
+	}
+</script>
+
+<!-- Mobile backdrop -->
+<div
+	class="jatui-sidebar-backdrop"
+	class:visible={mobileOpen}
+	onclick={closeMobile}
+	onkeydown={handleOverlayKeydown}
+	role="presentation"
+	aria-hidden="true"
+></div>
+
+<!-- Sidebar panel -->
+<aside
+	class="jatui-sidebar {className}"
+	class:mode-expanded={mode === 'expanded'}
+	class:mode-icon={mode === 'icon'}
+	class:mode-collapsed={mode === 'collapsed'}
+	class:mobile-open={mobileOpen}
+	style="--sidebar-width: {width}; --sidebar-icon-width: {iconWidth};"
+	aria-label="Main navigation"
+	onkeydown={handleSidebarKeydown}
+>
+	<!-- Header slot -->
+	{#if header}
+		<div class="jatui-sidebar-header">
+			{@render header()}
+		</div>
+	{/if}
+
+	<!-- Toggle button -->
+	{#if showToggle && sidebarState}
+		<button
+			type="button"
+			class="jatui-sidebar-toggle"
+			onclick={() => sidebarState!.toggleCollapse()}
+			aria-label={mode === 'icon' ? 'Expand sidebar' : 'Collapse sidebar'}
+			title={mode === 'icon' ? 'Expand sidebar' : 'Collapse sidebar'}
+		>
+			<svg
+				class="jatui-sidebar-toggle-icon"
+				class:flipped={mode === 'icon'}
+				width="16"
+				height="16"
+				viewBox="0 0 16 16"
+				fill="none"
+				aria-hidden="true"
+			>
+				<path
+					d="M10 3L5 8L10 13"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+	{/if}
+
+	<!-- Nav items -->
+	<nav class="jatui-sidebar-nav" aria-label="Navigation">
+		<ul class="jatui-sidebar-list">
+			{#if children}
+				{@render children()}
+			{/if}
+		</ul>
+	</nav>
+
+	<!-- Footer slot -->
+	{#if footer}
+		<div class="jatui-sidebar-footer">
+			{@render footer()}
+		</div>
+	{/if}
+</aside>
+
+<style>
+	/* Backdrop for mobile overlay */
+	.jatui-sidebar-backdrop {
+		display: none;
+		position: fixed;
+		inset: 0;
+		z-index: 39;
+		background: color-mix(in oklch, var(--color-base-300) 60%, transparent);
+		backdrop-filter: blur(2px);
+		opacity: 0;
+		transition: opacity var(--motion-enter) var(--motion-glide);
+	}
+
+	@media (max-width: 767px) {
+		.jatui-sidebar-backdrop.visible {
+			display: block;
+			opacity: 1;
+		}
+	}
+
+	/* Sidebar panel */
+	.jatui-sidebar {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background: var(--color-base-200);
+		border-right: var(--jatui-border-w) solid var(--color-base-300);
+		overflow: hidden;
+		flex-shrink: 0;
+
+		/* Width driven by mode class — no animated width transitions */
+		width: var(--sidebar-width);
+	}
+
+	/* Icon mode — swap to narrow width without transition */
+	.jatui-sidebar.mode-icon {
+		width: var(--sidebar-icon-width);
+	}
+
+	/* Collapsed — hidden on desktop */
+	.jatui-sidebar.mode-collapsed {
+		width: 0;
+		border-right-width: 0;
+	}
+
+	/* Mobile: always hidden until mobile-open, slides in as overlay */
+	@media (max-width: 767px) {
+		.jatui-sidebar {
+			position: fixed;
+			top: 0;
+			left: 0;
+			height: 100dvh;
+			z-index: 40;
+			width: var(--sidebar-width) !important;
+			transform: translateX(-100%);
+			transition: transform var(--motion-enter) var(--motion-glide);
+		}
+
+		.jatui-sidebar.mobile-open {
+			transform: translateX(0);
+		}
+	}
+
+	/* Header */
+	.jatui-sidebar-header {
+		padding: var(--jatui-space-xl);
+		border-bottom: var(--jatui-border-w) solid var(--color-base-300);
+		flex-shrink: 0;
+		overflow: hidden;
+	}
+
+	/* Toggle button */
+	.jatui-sidebar-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		padding: var(--jatui-space-base) var(--jatui-space-xl);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
+		flex-shrink: 0;
+		transition: color var(--motion-instant) var(--motion-glide);
+	}
+
+	.jatui-sidebar-toggle:hover {
+		color: var(--color-base-content);
+	}
+
+	.jatui-sidebar-toggle-icon {
+		transition: transform var(--motion-fast) var(--motion-glide);
+	}
+
+	.jatui-sidebar-toggle-icon.flipped {
+		transform: rotate(180deg);
+	}
+
+	/* Nav */
+	.jatui-sidebar-nav {
+		flex: 1;
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding: var(--jatui-space-base) var(--jatui-space-base);
+		scrollbar-width: thin;
+	}
+
+	.jatui-sidebar-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-xs);
+	}
+
+	/* Footer */
+	.jatui-sidebar-footer {
+		padding: var(--jatui-space-xl);
+		border-top: var(--jatui-border-w) solid var(--color-base-300);
+		flex-shrink: 0;
+		overflow: hidden;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-sidebar-backdrop {
+			transition: none;
+		}
+		.jatui-sidebar-toggle-icon {
+			transition: none;
+		}
+		@media (max-width: 767px) {
+			.jatui-sidebar {
+				transition: none;
+			}
+		}
+	}
+</style>

package/dist/components/shell/Sidebar.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+     * Sidebar — app-shell navigation panel.
+     *
+     * Modes:
+     *   expanded  — full labels visible
+     *   icon      — icon-only rail (no width transition — labels/groups hide via class swap)
+     *   collapsed — completely hidden; mobile uses a Drawer overlay
+     *
+     * Pass a sidebarState from createSidebarState() (shell.ts) for persistence
+     * and active-item tracking. Without it, the sidebar is stateless.
+     */
+import type { Snippet } from 'svelte';
+import type { SidebarState } from './shell.js';
+interface Props {
+    /** Sidebar context from createSidebarState() */
+    sidebarState?: SidebarState | null;
+    /** Fixed width in expanded mode (CSS value) */
+    width?: string;
+    /** Width in icon-only mode */
+    iconWidth?: string;
+    /** Show the collapse toggle button */
+    showToggle?: boolean;
+    /** Sidebar header content (e.g. logo) */
+    header?: Snippet;
+    /** Sidebar footer content (e.g. user info) */
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/shell/SidebarGroup.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SidebarState } from './shell.js';
+
+	interface Props {
+		/** Group heading label */
+		label?: string;
+		/** Whether this group is collapsible */
+		collapsible?: boolean;
+		/** Initial expanded state for collapsible groups */
+		expanded?: boolean;
+		/** Icon in the group header */
+		icon?: Snippet;
+		/** Sidebar context state (passed down from Sidebar) */
+		sidebarState?: SidebarState | null;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let {
+		label,
+		collapsible = false,
+		expanded = $bindable(true),
+		icon,
+		sidebarState = null,
+		children,
+		class: className = ''
+	}: Props = $props();
+
+	const iconOnly = $derived(sidebarState?.mode === 'icon');
+
+	function toggleGroup() {
+		if (collapsible) expanded = !expanded;
+	}
+</script>
+
+<li class="jatui-sidebar-group {className}" class:icon-only={iconOnly}>
+	{#if label && !iconOnly}
+		{#if collapsible}
+			<button
+				type="button"
+				class="jatui-sidebar-group-header collapsible"
+				onclick={toggleGroup}
+				aria-expanded={expanded}
+			>
+				{#if icon}
+					<span class="jatui-sidebar-group-icon" aria-hidden="true">
+						{@render icon()}
+					</span>
+				{/if}
+				<span class="jatui-sidebar-group-label">{label}</span>
+				<svg
+					class="jatui-sidebar-group-chevron"
+					class:rotated={!expanded}
+					width="12"
+					height="12"
+					viewBox="0 0 12 12"
+					fill="none"
+					aria-hidden="true"
+				>
+					<path
+						d="M2 4L6 8L10 4"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		{:else}
+			<span class="jatui-sidebar-group-header">
+				{#if icon}
+					<span class="jatui-sidebar-group-icon" aria-hidden="true">
+						{@render icon()}
+					</span>
+				{/if}
+				<span class="jatui-sidebar-group-label">{label}</span>
+			</span>
+		{/if}
+	{/if}
+
+	<!-- Items wrapper: collapses via grid-template-rows -->
+	<div
+		class="jatui-sidebar-group-items"
+		class:collapsed={collapsible && !expanded}
+	>
+		<ul class="jatui-sidebar-group-list">
+			{#if children}
+				{@render children()}
+			{/if}
+		</ul>
+	</div>
+</li>
+
+<style>
+	.jatui-sidebar-group {
+		list-style: none;
+	}
+
+	.jatui-sidebar-group-header {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base);
+		padding: var(--jatui-space-sm) var(--jatui-space-xl);
+		margin-top: var(--jatui-space-lg);
+		font-size: 0.6875rem;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
+		width: 100%;
+		border: none;
+		background: transparent;
+		text-align: left;
+	}
+
+	button.jatui-sidebar-group-header {
+		cursor: pointer;
+		border-radius: var(--jatui-radius-selector);
+		transition: background-color var(--motion-instant) var(--motion-glide);
+	}
+
+	button.jatui-sidebar-group-header:hover {
+		background: color-mix(in oklch, var(--color-base-content) 6%, transparent);
+	}
+
+	.jatui-sidebar-group-icon {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.jatui-sidebar-group-label {
+		flex: 1;
+	}
+
+	.jatui-sidebar-group-chevron {
+		flex-shrink: 0;
+		transition: transform var(--motion-fast) var(--motion-glide);
+	}
+
+	.jatui-sidebar-group-chevron.rotated {
+		transform: rotate(-90deg);
+	}
+
+	/* Collapse via grid-template-rows — no height/overflow animation */
+	.jatui-sidebar-group-items {
+		display: grid;
+		grid-template-rows: 1fr;
+		transition: grid-template-rows var(--motion-enter) var(--motion-glide);
+		overflow: hidden;
+	}
+
+	.jatui-sidebar-group-items.collapsed {
+		grid-template-rows: 0fr;
+	}
+
+	.jatui-sidebar-group-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		min-height: 0;
+	}
+
+	/* In icon-only mode, remove group label spacing */
+	.jatui-sidebar-group.icon-only .jatui-sidebar-group-header {
+		display: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-sidebar-group-chevron {
+			transition: none;
+		}
+		.jatui-sidebar-group-items {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/shell/SidebarGroup.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { SidebarState } from './shell.js';
+interface Props {
+    /** Group heading label */
+    label?: string;
+    /** Whether this group is collapsible */
+    collapsible?: boolean;
+    /** Initial expanded state for collapsible groups */
+    expanded?: boolean;
+    /** Icon in the group header */
+    icon?: Snippet;
+    /** Sidebar context state (passed down from Sidebar) */
+    sidebarState?: SidebarState | null;
+    children?: Snippet;
+    class?: string;
+}
+declare const SidebarGroup: import("svelte").Component<Props, {}, "expanded">;
+type SidebarGroup = ReturnType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/components/shell/SidebarItem.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SidebarState } from './shell.js';
+
+	interface Props {
+		/** Unique ID used to track the active item */
+		id: string;
+		/** Display label */
+		label: string;
+		/** Optional icon slot */
+		icon?: Snippet;
+		/** Href for anchor-based nav. If omitted, renders as a button */
+		href?: string;
+		/** Badge content (count or dot) */
+		badge?: number | string;
+		/** Disabled state */
+		disabled?: boolean;
+		/** Sidebar context state */
+		sidebarState?: SidebarState | null;
+		/** Called when item is activated */
+		onclick?: (id: string) => void;
+		class?: string;
+	}
+
+	let {
+		id,
+		label,
+		icon,
+		href,
+		badge,
+		disabled = false,
+		sidebarState = null,
+		onclick,
+		class: className = ''
+	}: Props = $props();
+
+	const isActive = $derived(sidebarState?.activeId === id);
+	const iconOnly = $derived(sidebarState?.mode === 'icon');
+
+	function handleClick(e: MouseEvent) {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		sidebarState?.setActive(id);
+		onclick?.(id);
+	}
+</script>
+
+{#snippet itemContent()}
+	{#if icon}
+		<span class="jatui-sidebar-item-icon" aria-hidden="true">
+			{@render icon()}
+		</span>
+	{/if}
+	{#if !iconOnly}
+		<span class="jatui-sidebar-item-label">{label}</span>
+		{#if badge !== undefined && badge !== null}
+			<span class="badge badge-sm ml-auto" class:badge-primary={isActive}>
+				{badge}
+			</span>
+		{/if}
+	{:else if badge !== undefined && badge !== null}
+		<span
+			class="badge badge-xs badge-primary absolute -top-0.5 -right-0.5"
+			aria-label="{badge} notifications"
+		></span>
+	{/if}
+{/snippet}
+
+{#if href}
+	<li class={className}>
+		<a
+			{href}
+			class="jatui-sidebar-item"
+			class:active={isActive}
+			class:disabled
+			class:icon-only={iconOnly}
+			aria-current={isActive ? 'page' : undefined}
+			aria-disabled={disabled || undefined}
+			aria-label={iconOnly ? label : undefined}
+			onclick={handleClick}
+			title={iconOnly ? label : undefined}
+		>
+			{@render itemContent()}
+		</a>
+	</li>
+{:else}
+	<li class={className}>
+		<button
+			type="button"
+			class="jatui-sidebar-item"
+			class:active={isActive}
+			class:disabled
+			class:icon-only={iconOnly}
+			{disabled}
+			aria-current={isActive ? 'page' : undefined}
+			aria-label={iconOnly ? label : undefined}
+			onclick={handleClick}
+			title={iconOnly ? label : undefined}
+		>
+			{@render itemContent()}
+		</button>
+	</li>
+{/if}
+
+<style>
+	.jatui-sidebar-item {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-lg);
+		width: 100%;
+		padding: var(--jatui-space-base) var(--jatui-space-xl);
+		border-radius: var(--jatui-radius-selector);
+		font-size: 0.875rem;
+		color: var(--color-base-content);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		text-decoration: none;
+		transition:
+			background-color var(--motion-instant) var(--motion-glide),
+			color var(--motion-instant) var(--motion-glide);
+		position: relative;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.jatui-sidebar-item:hover:not(.disabled) {
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+
+	.jatui-sidebar-item.active {
+		background: color-mix(in oklch, var(--color-primary) 12%, transparent);
+		color: var(--color-primary);
+		font-weight: 500;
+	}
+
+	.jatui-sidebar-item.disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.jatui-sidebar-item.icon-only {
+		justify-content: center;
+		padding: var(--jatui-space-base);
+	}
+
+	.jatui-sidebar-item-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	.jatui-sidebar-item-label {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-sidebar-item {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/shell/SidebarItem.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { SidebarState } from './shell.js';
+interface Props {
+    /** Unique ID used to track the active item */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional icon slot */
+    icon?: Snippet;
+    /** Href for anchor-based nav. If omitted, renders as a button */
+    href?: string;
+    /** Badge content (count or dot) */
+    badge?: number | string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Sidebar context state */
+    sidebarState?: SidebarState | null;
+    /** Called when item is activated */
+    onclick?: (id: string) => void;
+    class?: string;
+}
+declare const SidebarItem: import("svelte").Component<Props, {}, "">;
+type SidebarItem = ReturnType<typeof SidebarItem>;
+export default SidebarItem;