@softwareone/spi-sv5-library 1.5.2 → 1.5.4

package/dist/Card/Card.svelte

@@ -17,7 +17,6 @@
 	.card {
 		width: 100%;
 		background: #fff;
-		margin-bottom: 24px;
 		border-radius: 16px;
 		box-shadow:
 			0px 1px 16px rgba(107, 113, 128, 0.1),

package/dist/Footer/Footer.svelte

@@ -5,7 +5,7 @@
 	let { homeUrl = '/' }: FooterProps = $props();
 </script>
 
-<div class="footer-section">
+<footer class="footer-section">
 	<a href={homeUrl} title="Home">
 		<img alt="SoftwareOne logo" class="logo-image" src="/softwareone-logo-white.svg" />
 	</a>
@@ -31,7 +31,7 @@
 		</li>
 		<li>© 2025 SoftwareOne. All rights reserved</li>
 	</ul>
-</div>
+</footer>
 
 <style>
 	.footer-section {
@@ -53,8 +53,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 3px;
-		font-size: 12px;
-		letter-spacing: 1px;
+		font-size: 14px;
 	}
 
 	.footer-section a:hover {

package/dist/Header/Header.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-
+	import type { MenuItem } from '../index.js';
+	import Menu from '../Menu/Menu.svelte';
+	import Waffle from '../Waffle/Waffle.svelte';
+	import type { WaffleItem } from '../Waffle/waffleState.svelte.js';
 	import HeaderAccount from './HeaderAccount.svelte';
 	import HeaderLoader from './HeaderLoader.svelte';
 	import HeaderLogo from './HeaderLogo.svelte';
@@ -9,13 +11,12 @@
 		title?: string;
 		homeUrl?: string;
 		hideAccount?: boolean;
-		hideHelp?: boolean;
-		hideNotification?: boolean;
 		accountName?: string;
 		userName?: string;
 		hideLoader?: boolean;
-		menu?: Snippet<[showMenu: boolean]>;
-		waffle?: Snippet<[showWaffle: boolean]>;
+		menuItems?: MenuItem[];
+		waffleItems?: WaffleItem[];
+		profileMenuItems?: MenuItem[];
 	}
 
 	let {
@@ -25,8 +26,9 @@
 		accountName = '',
 		userName = '',
 		hideLoader,
-		menu,
-		waffle
+		menuItems,
+		waffleItems,
+		profileMenuItems
 	}: HeaderProps = $props();
 
 	let showWaffle = $state(false);
@@ -52,12 +54,12 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<div class="header-container">
+<header class="header-container">
 	<nav class="header-section">
 		{#if !hideLoader}
 			<HeaderLoader />
 		{/if}
-		{#if waffle}
+		{#if waffleItems}
 			<button
 				type="button"
 				class={[showWaffle && 'active', 'header-button']}
@@ -67,13 +69,13 @@
 			>
 				<span class="material-icons icon-span">apps</span>
 			</button>
-			{@render waffle(showWaffle)}
+			<Waffle items={waffleItems} bind:showWaffle />
 		{/if}
-		{#if menu}
+		{#if menuItems}
 			<button type="button" class="header-button" onclick={toggleMenu} aria-label="menu button">
 				<span class="material-icons icon-span menu-icon">menu</span>
 			</button>
-			{@render menu(showMenu)}
+			<Menu {menuItems} bind:showMenu />
 		{/if}
 		<a href={homeUrl} title="Home">
 			<HeaderLogo />
@@ -83,12 +85,12 @@
 		</h2>
 	</nav>
 
-	<nav class="header-section">
-		{#if !hideAccount}
-			<HeaderAccount {accountName} {userName} />
-		{/if}
-	</nav>
-</div>
+	{#if !hideAccount}
+		<nav class="header-section">
+			<HeaderAccount {accountName} {userName} {profileMenuItems} />
+		</nav>
+	{/if}
+</header>
 
 <style>
 	.header-button {
@@ -128,9 +130,9 @@
 		gap: 24px;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0px 24px;
+		padding: 0 24px;
 		background: #fff;
-		height: 80px;
+		height: 85px;
 		border-bottom: 3px solid #aeb1b9;
 		position: relative;
 		z-index: 50;

package/dist/Header/Header.svelte.d.ts

@@ -1,15 +1,15 @@
-import type { Snippet } from 'svelte';
+import type { MenuItem } from '../index.js';
+import type { WaffleItem } from '../Waffle/waffleState.svelte.js';
 interface HeaderProps {
     title?: string;
     homeUrl?: string;
     hideAccount?: boolean;
-    hideHelp?: boolean;
-    hideNotification?: boolean;
     accountName?: string;
     userName?: string;
     hideLoader?: boolean;
-    menu?: Snippet<[showMenu: boolean]>;
-    waffle?: Snippet<[showWaffle: boolean]>;
+    menuItems?: MenuItem[];
+    waffleItems?: WaffleItem[];
+    profileMenuItems?: MenuItem[];
 }
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/Header/HeaderAccount.svelte

@@ -1,85 +1,175 @@
 <script lang="ts">
-	import { Avatar } from '../index.js';
+	import { fade } from 'svelte/transition';
+	import { goto } from '$app/navigation';
+	import { Avatar, type MenuItem } from '../index.js';
 
-	interface HeaderAccountProps {
-		accountName?: string;
-		userName?: string;
+	interface Props {
+		accountName: string;
+		userName: string;
+		profileMenuItems?: MenuItem[];
 	}
 
-	let { accountName = 'SoftwareOne', userName = 'John Doe' }: HeaderAccountProps = $props();
+	let { accountName, userName, profileMenuItems }: Props = $props();
+
+	let showProfileItems = $state(false);
+
+	const handleProfile = () => {
+		showProfileItems = !showProfileItems;
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape' && showProfileItems) {
+			showProfileItems = false;
+		}
+	};
 </script>
 
-<div class="account-container">
-	<div class="account-avatar">
-		<Avatar text={userName} />
-	</div>
+<svelte:window onkeydown={handleKeydown} />
+
+{#snippet profile()}
+	<Avatar text={userName} />
 	<div class="account-info">
-		<div class="account-name">{accountName}</div>
-		<div class="account-more">
-			<div class="account-more-name">Operations | {userName}</div>
-		</div>
+		<p class="account-name">{accountName}</p>
+		<p class="account-more-name">Operations | {userName}</p>
 	</div>
+{/snippet}
+
+<div class="container">
+	{#if profileMenuItems}
+		<button
+			onclick={() => (showProfileItems = !showProfileItems)}
+			type="button"
+			class="account-container account-button"
+			aria-expanded={showProfileItems}
+		>
+			{@render profile()}
+		</button>
+	{:else}
+		<div class="account-container">
+			{@render profile()}
+		</div>
+	{/if}
+
+	{#if showProfileItems}
+		<div
+			class="account-backdrop"
+			onclick={handleProfile}
+			onkeydown={handleProfile}
+			role="button"
+			transition:fade={{ duration: 200 }}
+			tabindex="0"
+			aria-label="Close profile menu"
+		></div>
+		<menu class="account-dropdown" transition:fade={{ delay: 50, duration: 250 }}>
+			{#each profileMenuItems as item}
+				<li>
+					<a href={item.url} class="account-menu-item" onclick={() => handleProfile()}>
+						{item.text}
+					</a>
+				</li>
+			{/each}
+		</menu>
+	{/if}
 </div>
 
 <style>
+	.container {
+		position: relative;
+		display: none;
+	}
+
+	@media (min-width: 768px) {
+		.container {
+			display: flex;
+		}
+	}
+
 	.account-container {
 		display: flex;
-		max-width: 300px;
+		width: 256px;
 		align-items: center;
+		padding: 8px;
 		gap: 16px;
-		border-radius: 8px;
-		background: #fff;
 	}
 
-	.account-avatar {
-		display: flex;
-		width: 48px;
-		height: 48px;
-		justify-content: center;
-		align-items: center;
+	.account-button {
+		border-radius: 6px;
+		border: none;
+		height: 66px;
+		background: transparent;
+		cursor: pointer;
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	.account-button:hover {
+		background: #e0e5e8;
 	}
 
 	.account-info {
 		display: flex;
 		flex-direction: column;
-		align-items: flex-start;
+		text-align: left;
+		flex: 1;
+		word-break: break-words;
 	}
 
 	.account-name {
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 1;
-		line-clamp: 1;
-		width: auto;
-		max-width: auto;
-		overflow: hidden;
-		color: #000;
-		text-overflow: ellipsis;
-		font-size: 14px;
-		font-style: normal;
 		font-weight: 500;
+		font-size: 14px;
 		line-height: 20px;
 	}
 
-	.account-more {
+	.account-more-name {
+		font-weight: 400;
+		font-size: 12px;
+		color: #6b7280;
+		line-height: normal;
+	}
+
+	.account-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(243, 244, 246, 0.5);
+		cursor: pointer;
+		z-index: 40;
+	}
+
+	.account-dropdown {
+		position: absolute;
 		display: flex;
-		align-items: center;
-		color: #6b7180;
+		flex-direction: column;
+		width: 250px;
+		top: 70px;
+		gap: 8px;
+		padding: 16px;
+		background: white;
+		border: 1px solid #f3f4f6;
+		border-radius: 0 0 10px 10px;
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+		z-index: 40;
 	}
 
-	.account-more-name {
-		display: -webkit-box;
-		width: auto;
-		max-width: auto;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 1;
-		line-clamp: 1;
-		overflow: hidden;
-		color: #6b7180;
-		text-overflow: ellipsis;
-		font-size: 12px;
-		font-style: normal;
+	.account-menu-item {
+		display: inline-block;
+		width: 100%;
 		font-weight: 400;
-		line-height: normal;
+		font-size: 14px;
+		text-align: left;
+		line-height: 20px;
+		padding: 8px;
+		border-radius: 8px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.account-menu-item:hover {
+		background: #f4f6f8;
+	}
+
+	.account-menu-item:focus,
+	.account-menu-item:focus-visible {
+		background: #eaecff;
 	}
 </style>

package/dist/Header/HeaderAccount.svelte.d.ts

@@ -1,7 +1,9 @@
-interface HeaderAccountProps {
-    accountName?: string;
-    userName?: string;
+import { type MenuItem } from '../index.js';
+interface Props {
+    accountName: string;
+    userName: string;
+    profileMenuItems?: MenuItem[];
 }
-declare const HeaderAccount: import("svelte").Component<HeaderAccountProps, {}, "">;
+declare const HeaderAccount: import("svelte").Component<Props, {}, "">;
 type HeaderAccount = ReturnType<typeof HeaderAccount>;
 export default HeaderAccount;

package/dist/Home/Home.svelte

@@ -7,16 +7,13 @@
 	}
 
 	let { title, homeItems }: HomeProps = $props();
-
-	const hasSingleItem: boolean = homeItems.length === 1;
-	const hasManyItems: boolean = homeItems.length > 1;
 </script>
 
-<h1 class={['home-title', hasSingleItem && 'centered']}>
+<h1 class="home-title">
 	{title}
 </h1>
 
-<section class={['home-container', hasSingleItem && 'centered', hasManyItems && 'grid']}>
+<section class="home-container grid">
 	{#each homeItems as homeItem}
 		<a href={homeItem.url} class="home-item">
 			<img src={homeItem.icon} alt={homeItem.text} />
@@ -36,23 +33,12 @@
 		font-weight: 600;
 	}
 
-	.home-title.centered {
-		display: flex;
-		justify-content: center;
-	}
-
 	.home-container {
 		--black-1: #434952;
 		--black-2: #273444;
 		--white: #fff;
 	}
 
-	.home-container.centered {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
 	.home-container.grid {
 		display: grid;
 		gap: 24px;

package/dist/Menu/Menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
+	import { fade } from 'svelte/transition';
 
 	import MainMenuItem from './MenuItem.svelte';
 	import type { MenuItem } from './SidebarState.svelte';
@@ -10,7 +10,7 @@
 		showMenu: boolean;
 	}
 
-	let { menuItems, showMenu }: MenuProps = $props();
+	let { menuItems, showMenu = $bindable(false) }: MenuProps = $props();
 
 	let activeItem = $state('');
 
@@ -28,10 +28,6 @@
 		return regex.test(pathname);
 	};
 
-	const onClickMenuItem = (menuItem: MenuItem) => {
-		onHandleMenu();
-		goto(menuItem.url);
-	};
 
 	const onHandleMenu = () => {
 		showMenu = !showMenu;
@@ -45,21 +41,24 @@
 </script>
 
 {#if showMenu}
-	<button
+	<div
 		class="menu-principal"
 		onclick={onHandleMenu}
 		onkeypress={onHandleMenu}
+		transition:fade={{ duration: 200 }}
+		role="button"
+		tabindex="0"
 		aria-label="menu principal"
-	></button>
+	></div>
 
-	<nav class="menu-nav">
+	<nav class="menu-nav" transition:fade={{ duration: 250 }}>
 		<menu class="menu-list">
 			{#each menuItems as menuItem}
 				<MainMenuItem
 					item={menuItem}
 					isCollapsed={false}
 					activeItem={activeItem === menuItem.text}
-					onClick={onClickMenuItem}
+					onClick={onHandleMenu}
 				/>
 			{/each}
 		</menu>

package/dist/Menu/Menu.svelte.d.ts

@@ -3,6 +3,6 @@ interface MenuProps {
     menuItems: MenuItem[];
     showMenu: boolean;
 }
-declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+declare const Menu: import("svelte").Component<MenuProps, {}, "showMenu">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/Menu/MenuItem.svelte

@@ -14,8 +14,8 @@
 
 <li>
 	<Tooltip content={isCollapsed ? item.text : ''} position="right">
-		<button
-			type="button"
+		<a
+			href={item.url}
 			class={[
 				'item',
 				isCollapsed ? 'collapsed' : 'expanded',
@@ -25,7 +25,7 @@
 		>
 			<span class="material-icons-outlined icon-span">{item.icon}</span>
 			<h2 class="item-name-span" class:hidden={isCollapsed}>{item.text}</h2>
-		</button>
+		</a>
 	</Tooltip>
 </li>
 

package/dist/Waffle/Waffle.svelte

@@ -8,7 +8,7 @@
 		showWaffle?: boolean;
 	}
 
-	let { items = [], showWaffle = false }: Props = $props();
+	let { items = [], showWaffle = $bindable(false) }: Props = $props();
 
 	const handleTileClick = (item: WaffleItem) => {
 		onHandleWaffle();

package/dist/Waffle/Waffle.svelte.d.ts

@@ -3,6 +3,6 @@ interface Props {
     items?: WaffleItem[];
     showWaffle?: boolean;
 }
-declare const Waffle: import("svelte").Component<Props, {}, "">;
+declare const Waffle: import("svelte").Component<Props, {}, "showWaffle">;
 type Waffle = ReturnType<typeof Waffle>;
 export default Waffle;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.5.2",
+	"version": "1.5.4",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",