@aspect-ops/exon-ui 0.3.0 → 0.4.0

package/dist/components/GlobalHeader/GlobalHeader.svelte

@@ -42,22 +42,27 @@
 
 	let mobileMenuOpen = $state(false);
 	let openDropdown = $state<number | null>(null);
+	let openMobileSubmenu = $state<number | null>(null);
 	let isScrollingUp = $state(true);
 	let lastScrollY = $state(0);
 	let headerElement: HTMLElement | null = $state(null);
 
 	function toggleMobileMenu() {
 		mobileMenuOpen = !mobileMenuOpen;
-		if (mobileMenuOpen) {
-			document.body.style.overflow = 'hidden';
-		} else {
-			document.body.style.overflow = '';
+		if (typeof document !== 'undefined') {
+			if (mobileMenuOpen) {
+				document.body.style.overflow = 'hidden';
+			} else {
+				document.body.style.overflow = '';
+			}
 		}
 	}
 
 	function closeMobileMenu() {
 		mobileMenuOpen = false;
-		document.body.style.overflow = '';
+		if (typeof document !== 'undefined') {
+			document.body.style.overflow = '';
+		}
 	}
 
 	function toggleDropdown(index: number) {
@@ -68,6 +73,10 @@
 		openDropdown = null;
 	}
 
+	function toggleMobileSubmenu(index: number) {
+		openMobileSubmenu = openMobileSubmenu === index ? null : index;
+	}
+
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape') {
 			if (mobileMenuOpen) {
@@ -102,10 +111,12 @@
 	});
 
 	onDestroy(() => {
-		if (showOnScroll) {
+		if (typeof window !== 'undefined' && showOnScroll) {
 			window.removeEventListener('scroll', handleScroll);
 		}
-		document.body.style.overflow = '';
+		if (typeof document !== 'undefined') {
+			document.body.style.overflow = '';
+		}
 	});
 
 	const variantClass = $derived(
@@ -140,21 +151,49 @@
 		<nav class="global-header__nav" aria-label="Main navigation">
 			<ul class="global-header__nav-list">
 				{#each navItems as item, index}
-					<li class="global-header__nav-item">
+					<li
+						class="global-header__nav-item"
+						onmouseenter={() => item.children && item.children.length > 0 && (openDropdown = index)}
+						onmouseleave={() => item.children && item.children.length > 0 && (openDropdown = null)}
+					>
 						{#if item.children && item.children.length > 0}
-							<button
-								type="button"
-								class="global-header__nav-link global-header__nav-link--dropdown"
-								onclick={() => toggleDropdown(index)}
-								aria-expanded={openDropdown === index}
-								aria-haspopup="true"
-							>
-								{#if item.icon}
-									<span class="global-header__nav-icon">{item.icon}</span>
-								{/if}
-								{item.label}
-								<span class="global-header__dropdown-arrow" aria-hidden="true">▼</span>
-							</button>
+							{#if item.href}
+								<div class="global-header__nav-item-split">
+									<a
+										href={item.href}
+										class="global-header__nav-link global-header__nav-link--with-dropdown"
+									>
+										{#if item.icon}
+											<span class="global-header__nav-icon">{item.icon}</span>
+										{/if}
+										{item.label}
+									</a>
+									<button
+										type="button"
+										class="global-header__dropdown-toggle"
+										onclick={() => toggleDropdown(index)}
+										aria-expanded={openDropdown === index}
+										aria-haspopup="true"
+										aria-label="Toggle {item.label} menu"
+									>
+										<span class="global-header__dropdown-arrow" aria-hidden="true">▼</span>
+									</button>
+								</div>
+							{:else}
+								<button
+									type="button"
+									class="global-header__nav-link global-header__nav-link--dropdown"
+									onclick={() => toggleDropdown(index)}
+									aria-expanded={openDropdown === index}
+									aria-haspopup="true"
+								>
+									{#if item.icon}
+										<span class="global-header__nav-icon">{item.icon}</span>
+									{/if}
+									{item.label}
+									<span class="global-header__dropdown-arrow" aria-hidden="true">▼</span>
+								</button>
+							{/if}
 
 							{#if openDropdown === index}
 								<ul class="global-header__dropdown" role="menu">
@@ -224,32 +263,51 @@
 			{:else}
 				<nav class="global-header__mobile-nav" aria-label="Mobile navigation">
 					<ul class="global-header__mobile-nav-list">
-						{#each navItems as item}
+						{#each navItems as item, index}
 							<li class="global-header__mobile-nav-item">
 								{#if item.children && item.children.length > 0}
 									<div class="global-header__mobile-nav-group">
-										<span class="global-header__mobile-nav-label">
-											{#if item.icon}
-												<span class="global-header__nav-icon">{item.icon}</span>
-											{/if}
-											{item.label}
-										</span>
-										<ul class="global-header__mobile-nav-sublist">
-											{#each item.children as child}
-												<li>
-													<a
-														href={child.href || '#'}
-														class="global-header__mobile-nav-link"
-														onclick={closeMobileMenu}
-													>
-														{#if child.icon}
-															<span class="global-header__nav-icon">{child.icon}</span>
-														{/if}
-														{child.label}
-													</a>
-												</li>
-											{/each}
-										</ul>
+										<div class="global-header__mobile-nav-header">
+											<a
+												href={item.href || '#'}
+												class="global-header__mobile-nav-link global-header__mobile-nav-link--parent"
+												onclick={closeMobileMenu}
+											>
+												{#if item.icon}
+													<span class="global-header__nav-icon">{item.icon}</span>
+												{/if}
+												{item.label}
+											</a>
+											<button
+												type="button"
+												class="global-header__mobile-toggle"
+												onclick={() => toggleMobileSubmenu(index)}
+												aria-expanded={openMobileSubmenu === index}
+												aria-label="Toggle {item.label} submenu"
+											>
+												<span class="global-header__mobile-toggle-icon">
+													{openMobileSubmenu === index ? '−' : '+'}
+												</span>
+											</button>
+										</div>
+										{#if openMobileSubmenu === index}
+											<ul class="global-header__mobile-nav-sublist">
+												{#each item.children as child}
+													<li>
+														<a
+															href={child.href || '#'}
+															class="global-header__mobile-nav-link global-header__mobile-nav-link--child"
+															onclick={closeMobileMenu}
+														>
+															{#if child.icon}
+																<span class="global-header__nav-icon">{child.icon}</span>
+															{/if}
+															{child.label}
+														</a>
+													</li>
+												{/each}
+											</ul>
+										{/if}
 									</div>
 								{:else}
 									<a
@@ -275,12 +333,6 @@
 				</nav>
 			{/if}
 		</div>
-		<button
-			type="button"
-			class="global-header__overlay"
-			aria-label="Close menu"
-			onclick={closeMobileMenu}
-		></button>
 	{/if}
 </header>
 
@@ -408,6 +460,44 @@
 		text-align: left;
 	}
 
+	.global-header__nav-item-split {
+		display: flex;
+		align-items: center;
+		gap: 0;
+	}
+
+	.global-header__nav-link--with-dropdown {
+		flex: 1;
+		padding-right: var(--space-xs, 0.25rem);
+	}
+
+	.global-header__dropdown-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--space-sm, 0.5rem);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font-family: inherit;
+		color: var(--header-text-color);
+		border-radius: var(--radius-md, 0.375rem);
+		transition: all var(--transition-fast, 150ms ease);
+		/* Touch target minimum */
+		min-height: var(--touch-target-min, 44px);
+		min-width: 2rem;
+	}
+
+	.global-header__dropdown-toggle:hover {
+		background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.global-header__dropdown-toggle:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
 	.global-header__nav-icon {
 		display: inline-flex;
 		align-items: center;
@@ -419,7 +509,8 @@
 		transition: transform var(--transition-fast, 150ms ease);
 	}
 
-	.global-header__nav-link[aria-expanded='true'] .global-header__dropdown-arrow {
+	.global-header__nav-link[aria-expanded='true'] .global-header__dropdown-arrow,
+	.global-header__dropdown-toggle[aria-expanded='true'] .global-header__dropdown-arrow {
 		transform: rotate(180deg);
 	}
 
@@ -536,27 +627,21 @@
 	}
 
 	.global-header__mobile-menu {
-		position: fixed;
-		top: 0;
+		position: absolute;
+		top: 100%;
+		left: 0;
 		right: 0;
-		bottom: 0;
-		width: min(80vw, 20rem);
+		width: 100%;
 		background: var(--color-bg, #ffffff);
-		border-left: 1px solid var(--header-border-color);
+		border-top: 1px solid var(--header-border-color);
+		border-bottom: 1px solid var(--header-border-color);
 		padding: var(--space-lg, 1.5rem);
 		overflow-y: auto;
-		z-index: calc(var(--header-z-index) + 2);
-		animation: slide-in 200ms ease-out;
+		max-height: calc(100vh - var(--header-height));
+		z-index: calc(var(--header-z-index) - 1);
+		animation: slide-down 200ms ease-out;
 		font-family: inherit;
-	}
-
-	.global-header__overlay {
-		position: fixed;
-		inset: 0;
-		background: rgba(0, 0, 0, 0.4);
-		z-index: calc(var(--header-z-index) + 1);
-		animation: fade-in 200ms ease-out;
-		cursor: pointer;
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 	}
 
 	.global-header__mobile-nav-list {
@@ -602,25 +687,62 @@
 		gap: var(--space-xs, 0.25rem);
 	}
 
-	.global-header__mobile-nav-label {
+	.global-header__mobile-nav-header {
 		display: flex;
 		align-items: center;
-		gap: var(--space-sm, 0.5rem);
-		padding: var(--space-md, 1rem);
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.global-header__mobile-nav-link--parent {
+		flex: 1;
+		padding-right: var(--space-xs, 0.25rem);
+	}
+
+	.global-header__mobile-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem);
+		background: transparent;
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		color: var(--header-text-color);
+	}
+
+	.global-header__mobile-toggle:hover {
+		background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	.global-header__mobile-toggle:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.global-header__mobile-toggle-icon {
+		font-size: 1.25rem;
 		font-weight: 600;
-		font-size: var(--text-sm, 0.875rem);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--color-text-muted, #6b7280);
+		line-height: 1;
 	}
 
 	.global-header__mobile-nav-sublist {
 		list-style: none;
 		margin: 0;
-		padding-left: var(--space-md, 1rem);
+		padding-left: var(--space-lg, 1.5rem);
 		display: flex;
 		flex-direction: column;
 		gap: var(--space-xs, 0.25rem);
+		margin-top: var(--space-xs, 0.25rem);
+		animation: slide-down 200ms ease-out;
+	}
+
+	.global-header__mobile-nav-link--child {
+		font-size: var(--text-sm, 0.875rem);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
 	}
 
 	.global-header__mobile-actions {
@@ -632,21 +754,14 @@
 		gap: var(--space-sm, 0.5rem);
 	}
 
-	@keyframes slide-in {
-		from {
-			transform: translateX(100%);
-		}
-		to {
-			transform: translateX(0);
-		}
-	}
-
-	@keyframes fade-in {
+	@keyframes slide-down {
 		from {
 			opacity: 0;
+			transform: translateY(-1rem);
 		}
 		to {
 			opacity: 1;
+			transform: translateY(0);
 		}
 	}
 
@@ -675,8 +790,7 @@
 			display: none;
 		}
 
-		.global-header__mobile-menu,
-		.global-header__overlay {
+		.global-header__mobile-menu {
 			display: none;
 		}
 	}

package/dist/components/HeroLeftAligned/HeroLeftAligned.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import type { HeroLeftAlignedProps } from '../../types/index.js';
+
+	interface Props extends HeroLeftAlignedProps {
+		children?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		subtitle,
+		backgroundImage,
+		backgroundColor = 'var(--color-primary, #3b82f6)',
+		textColor = 'var(--color-text-inverse, #ffffff)',
+		overlayOpacity = 0.7,
+		height = 'auto',
+		class: className = '',
+		children,
+		actions
+	}: Props = $props();
+</script>
+
+<section
+	class="hero-left-aligned {className}"
+	style="background-color: {backgroundColor}; color: {textColor}; --overlay-opacity: {overlayOpacity}; min-height: {height};"
+	role="banner"
+>
+	<!-- Background Image with Overlay -->
+	{#if backgroundImage}
+		<div
+			class="hero-left-aligned__background"
+			style="background-image: url({backgroundImage});"
+			aria-hidden="true"
+		></div>
+		<div class="hero-left-aligned__overlay" style="background-color: {backgroundColor};"></div>
+	{/if}
+
+	<!-- Content Container -->
+	<div class="hero-left-aligned__container">
+		<div class="hero-left-aligned__content">
+			<!-- Title -->
+			<h1 class="hero-left-aligned__title">
+				{@html title}
+			</h1>
+
+			<!-- Subtitle -->
+			{#if subtitle}
+				<p class="hero-left-aligned__subtitle">
+					{@html subtitle}
+				</p>
+			{/if}
+
+			<!-- Custom Content Slot -->
+			{#if children}
+				<div class="hero-left-aligned__body">
+					{@render children()}
+				</div>
+			{/if}
+
+			<!-- Actions (Buttons) -->
+			{#if actions}
+				<div class="hero-left-aligned__actions">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>
+
+<style>
+	.hero-left-aligned {
+		position: relative;
+		overflow: hidden;
+		min-height: 700px;
+		font-family: var(--font-family, system-ui, sans-serif);
+		animation: heroFadeIn 1s ease-out;
+	}
+
+	@keyframes heroFadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.hero-left-aligned__background {
+		position: absolute;
+		inset: 0;
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: 120% center;
+		opacity: calc(1 - var(--overlay-opacity, 0.7));
+	}
+
+	.hero-left-aligned__overlay {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(to right, var(--color-primary, currentColor) 0%, transparent 60%);
+		opacity: 0.85;
+	}
+
+	.hero-left-aligned__container {
+		position: relative;
+		z-index: 10;
+		max-width: var(--max-width, 80rem);
+		margin: 0 auto;
+		padding: var(--space-xl, 3rem) var(--space-lg, 1.5rem);
+		padding-right: var(--space-2xl, 4rem);
+	}
+
+	.hero-left-aligned__content {
+		max-width: 64rem;
+		text-align: left;
+	}
+
+	.hero-left-aligned__title {
+		font-size: var(--text-5xl, 3rem);
+		font-weight: 700;
+		line-height: 1.1;
+		letter-spacing: -0.02em;
+		margin-bottom: var(--space-lg, 1.5rem);
+		color: inherit;
+	}
+
+	.hero-left-aligned__subtitle {
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: 600;
+		line-height: 1.6;
+		margin-bottom: var(--space-xl, 3rem);
+		max-width: 48rem;
+		opacity: 0.95;
+	}
+
+	.hero-left-aligned__body {
+		margin-bottom: var(--space-xl, 3rem);
+	}
+
+	.hero-left-aligned__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-md, 1rem);
+	}
+
+	/* Responsive Styles */
+	@media (min-width: 768px) {
+		.hero-left-aligned__container {
+			padding: var(--space-2xl, 4rem) var(--space-xl, 3rem);
+			padding-right: var(--space-3xl, 6rem);
+		}
+
+		.hero-left-aligned__title {
+			font-size: var(--text-6xl, 3.75rem);
+			margin-bottom: var(--space-xl, 3rem);
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.hero-left-aligned__container {
+			padding: var(--space-3xl, 6rem) var(--space-2xl, 4rem);
+		}
+
+		.hero-left-aligned__title {
+			font-size: var(--text-7xl, 4.5rem);
+		}
+
+		.hero-left-aligned__subtitle {
+			font-size: var(--text-xl, 1.25rem);
+		}
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.hero-left-aligned {
+			--color-primary: var(--color-primary-dark, #3b82f6);
+			--color-text-inverse: var(--color-text-inverse-dark, #f9fafb);
+		}
+	}
+</style>

package/dist/components/HeroLeftAligned/HeroLeftAligned.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HeroLeftAlignedProps } from '../../types/index.js';
+interface Props extends HeroLeftAlignedProps {
+    children?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+}
+declare const HeroLeftAligned: import("svelte").Component<Props, {}, "">;
+type HeroLeftAligned = ReturnType<typeof HeroLeftAligned>;
+export default HeroLeftAligned;