@r2digisolutions/components 0.10.0 → 0.12.0

package/dist/components/organisms/AuthShell/AuthShell.svelte

@@ -7,6 +7,8 @@
 
 	interface AuthShellProps {
 		brand?: string;
+		/** Official brand logo URL (SVG/PNG) for BrandMark */
+		logoSrc?: string;
 		tagline?: string;
 		footer?: string;
 		headline?: string;
@@ -26,6 +28,7 @@
 
 	const {
 		brand = 'R2DigiSolutions',
+		logoSrc,
 		tagline = 'Build faster with a cohesive design system.',
 		footer = '© R2DigiSolutions. All rights reserved.',
 		headline = 'Sign in to continue',
@@ -52,8 +55,10 @@
 	{:else}
 		<div
 			class={[
-				'relative flex h-full min-h-0 flex-col justify-between overflow-hidden bg-gradient-to-br from-brand-600 via-brand-700 to-brand-950 text-white',
-				compact ? 'gap-4 px-5 py-5' : 'gap-6 p-8 sm:p-10'
+				'flex flex-col justify-between overflow-hidden bg-gradient-to-br from-brand-600 via-brand-700 to-brand-950 text-white',
+				compact
+					? 'relative gap-4 px-5 py-5'
+					: 'absolute inset-0 gap-6 p-8 sm:p-10'
 			]}
 		>
 			<div
@@ -67,7 +72,7 @@
 
 			<div class={['relative z-10', compact ? 'space-y-3' : 'space-y-6']}>
 				<div class="flex items-center gap-2.5">
-					<BrandMark name={brand} size={compact ? 'sm' : 'md'} />
+					<BrandMark name={brand} {logoSrc} size={compact ? 'sm' : 'md'} />
 					<span class={['font-semibold tracking-tight text-white', compact ? 'text-sm' : 'text-base']}>
 						{brand}
 					</span>
@@ -90,7 +95,7 @@
 				</div>
 				{#if !compact && highlights.length}
 					<ul class="hidden space-y-2.5 pt-1 text-sm text-white/75 sm:block">
-						{#each highlights as item}
+						{#each highlights as item (item)}
 							<li class="flex items-start gap-2">
 								<span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-white/80"></span>
 								{item}
@@ -110,28 +115,33 @@
 <div
 	class={[
 		'flex w-full flex-col overflow-hidden bg-surface',
+		// h-dvh (not height:100%): % collapses when html/body have no explicit height
 		fillParent && 'h-full min-h-0',
-		!fillParent && fullHeight && 'h-full min-h-dvh',
+		!fillParent && fullHeight && 'h-dvh min-h-dvh',
 		!fillParent && !fullHeight && 'min-h-[32rem]',
 		className
 	]}
-	style:height={fillParent ? '100%' : fullHeight ? '100%' : undefined}
-	style:min-height={fillParent ? '100%' : fullHeight ? '100dvh' : '32rem'}
+	style:height={fillParent ? '100%' : undefined}
+	style:min-height={fillParent ? '100%' : !fullHeight ? '32rem' : undefined}
 >
 	<div
 		class={[
 			'flex h-full min-h-0 w-full flex-1 flex-col',
-			showAside && 'lg:flex-row',
+			showAside && 'lg:flex-row lg:items-stretch',
 			asideSide === 'right' && 'lg:flex-row-reverse'
 		]}
 	>
 		{#if showAside}
-			<aside class="relative hidden h-full min-h-0 w-full overflow-hidden lg:block lg:w-1/2">
+			<aside
+				class="relative hidden min-h-0 w-full overflow-hidden lg:block lg:h-auto lg:w-1/2 lg:self-stretch"
+			>
 				{@render marketingPanel(false)}
 			</aside>
 		{/if}
 
-		<section class="relative flex h-full min-h-0 w-full flex-1 flex-col bg-surface">
+		<section
+			class="relative flex min-h-0 w-full flex-1 flex-col bg-surface lg:h-auto lg:self-stretch"
+		>
 			<div
 				class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-brand-500/5 via-transparent to-transparent"
 				aria-hidden="true"
@@ -144,7 +154,7 @@
 					</div>
 				{:else}
 					<div class="shrink-0 px-5 pt-6 text-center lg:hidden">
-						<BrandMark name={brand} showName size="md" class="justify-center" />
+						<BrandMark name={brand} {logoSrc} showName size="md" class="justify-center" />
 						<p class="mt-2 text-sm text-muted">{tagline}</p>
 					</div>
 				{/if}

package/dist/components/organisms/AuthShell/AuthShell.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 export type AuthAsideSide = 'left' | 'right' | 'none';
 interface AuthShellProps {
     brand?: string;
+    /** Official brand logo URL (SVG/PNG) for BrandMark */
+    logoSrc?: string;
     tagline?: string;
     footer?: string;
     headline?: string;

package/dist/components/organisms/NavRail/NavRail.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/organisms/NavRail/NavRail.stories.js

@@ -0,0 +1,11 @@
+import NavRailStory from './NavRailStory.svelte';
+const meta = {
+    title: 'Organisms/NavRail',
+    component: NavRailStory,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {};

package/dist/components/organisms/NavRail/NavRail.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import Tooltip from '../../atoms/Tooltip/Tooltip.svelte';
+	import RailMark from '../../atoms/RailMark/RailMark.svelte';
+	import Divider from '../../atoms/Divider/Divider.svelte';
+
+	export type NavRailIcon = Component<{
+		class?: string;
+		size?: number | string;
+		strokeWidth?: number | string;
+	}>;
+
+	export interface NavRailItem {
+		id: string;
+		label: string;
+		href?: string;
+		icon?: NavRailIcon;
+		disabled?: boolean;
+	}
+
+	interface NavRailProps {
+		items?: NavRailItem[];
+		footerItems?: NavRailItem[];
+		value?: string;
+		class?: string;
+		brand?: Snippet;
+		onchange?: (id: string) => void;
+	}
+
+	let {
+		items = [],
+		footerItems = [],
+		value = $bindable(''),
+		class: className = '',
+		brand,
+		onchange
+	}: NavRailProps = $props();
+
+	function select(id: string, disabled?: boolean) {
+		if (disabled) return;
+		value = id;
+		onchange?.(id);
+	}
+
+	const itemClass = (item: NavRailItem) => [
+		'relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors',
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+		value === item.id
+			? 'bg-brand-50 text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
+			: 'text-secondary hover:bg-surface-overlay hover:text-primary',
+		item.disabled && 'pointer-events-none cursor-not-allowed opacity-40'
+	];
+</script>
+
+{#snippet railButton(item: NavRailItem)}
+	<Tooltip content={item.label} side="right">
+		<span class="relative inline-flex">
+			<RailMark active={value === item.id} length="short" inset="sm" />
+			{#if item.href && !item.disabled}
+				<a
+					href={item.href}
+					aria-label={item.label}
+					aria-current={value === item.id ? 'page' : undefined}
+					class={itemClass(item)}
+					onclick={() => select(item.id, item.disabled)}
+				>
+					{#if item.icon}
+						<item.icon class="h-5 w-5" strokeWidth={1.75} />
+					{:else}
+						<span class="text-xs font-semibold">{item.label.slice(0, 1)}</span>
+					{/if}
+				</a>
+			{:else}
+				<button
+					type="button"
+					aria-label={item.label}
+					aria-current={value === item.id ? 'page' : undefined}
+					disabled={item.disabled}
+					class={itemClass(item)}
+					onclick={() => select(item.id, item.disabled)}
+				>
+					{#if item.icon}
+						<item.icon class="h-5 w-5" strokeWidth={1.75} />
+					{:else}
+						<span class="text-xs font-semibold">{item.label.slice(0, 1)}</span>
+					{/if}
+				</button>
+			{/if}
+		</span>
+	</Tooltip>
+{/snippet}
+
+<aside
+	class={[
+		'w-14 border-border bg-surface-elevated py-3 flex h-full shrink-0 flex-col items-center border-r',
+		className
+	]}
+>
+	{#if brand}
+		<div class="mb-3 px-2 flex items-center justify-center">
+			{@render brand()}
+		</div>
+	{/if}
+
+	<nav class="gap-1 flex flex-1 flex-col items-center" aria-label="Rail">
+		{#each items as item (item.id)}
+			{@render railButton(item)}
+		{/each}
+	</nav>
+
+	{#if footerItems.length > 0}
+		<div class="w-8 py-2"><Divider /></div>
+		<nav class="gap-1 flex flex-col items-center" aria-label="Rail footer">
+			{#each footerItems as item (item.id)}
+				{@render railButton(item)}
+			{/each}
+		</nav>
+	{/if}
+</aside>

package/dist/components/organisms/NavRail/NavRail.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Component, Snippet } from 'svelte';
+export type NavRailIcon = Component<{
+    class?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+}>;
+export interface NavRailItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: NavRailIcon;
+    disabled?: boolean;
+}
+interface NavRailProps {
+    items?: NavRailItem[];
+    footerItems?: NavRailItem[];
+    value?: string;
+    class?: string;
+    brand?: Snippet;
+    onchange?: (id: string) => void;
+}
+declare const NavRail: Component<NavRailProps, {}, "value">;
+type NavRail = ReturnType<typeof NavRail>;
+export default NavRail;

package/dist/components/organisms/NavRail/NavRailStory.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import NavRail, { type NavRailItem } from './NavRail.svelte';
+	import BrandMark from '../../atoms/BrandMark/BrandMark.svelte';
+
+	const items: NavRailItem[] = [
+		{ id: 'home', label: 'Dashboard', href: '#' },
+		{ id: 'atom', label: 'Atom', href: '#' },
+		{ id: 'crm', label: 'CRM', href: '#' }
+	];
+
+	const footerItems: NavRailItem[] = [{ id: 'settings', label: 'Ajustes', href: '#' }];
+
+	let value = $state('atom');
+</script>
+
+<div class="rounded-xl border-border bg-surface h-[28rem] overflow-hidden border">
+	<div class="flex h-full">
+		<NavRail {items} {footerItems} bind:value>
+			{#snippet brand()}
+				<BrandMark mark="R2" size="sm" />
+			{/snippet}
+		</NavRail>
+		<div class="p-6 text-sm text-secondary flex flex-1 items-center justify-center">
+			Selected: <span class="ml-1 font-medium text-primary">{value}</span>
+		</div>
+	</div>
+</div>

package/dist/components/organisms/NavRail/NavRailStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const NavRailStory: import("svelte").Component<Record<string, never>, {}, "">;
+type NavRailStory = ReturnType<typeof NavRailStory>;
+export default NavRailStory;

package/dist/components/organisms/Navbar/Navbar.svelte

@@ -68,42 +68,37 @@
 
 <header
 	class={[
-		'relative z-40 w-full bg-surface-elevated',
-		bordered && 'border-b border-border',
-		sticky && 'sticky top-0',
+		'bg-surface-elevated relative z-40 w-full',
+		bordered && 'border-border border-b',
+		sticky && 'top-0 sticky',
 		blur && 'bg-surface-elevated/85 backdrop-blur-md',
 		className
 	]}
 >
 	<div
-		class={[
-			'mx-auto flex w-full items-center gap-3 px-4 sm:gap-4 sm:px-6',
-			height,
-			maxWidthClass
-		]}
+		class={['gap-3 px-4 sm:gap-4 sm:px-6 mx-auto flex w-full items-center', height, maxWidthClass]}
 	>
+		{#if leading}
+			<div class="flex shrink-0 items-center">{@render leading()}</div>
+		{/if}
 		{#if showBrand}
-			<div class="flex shrink-0 items-center gap-2">
-				{#if leading}
-					{@render leading()}
-				{:else}
-					<span
-						class={[
-							'flex items-center justify-center rounded-lg bg-brand-500 font-bold text-white',
-							size === 'lg' ? 'h-8 w-8 text-xs' : 'h-7 w-7 text-[11px]'
-						]}
-						aria-hidden="true"
-					>
-						{brand.slice(0, 1).toUpperCase()}
-					</span>
-				{/if}
+			<div class="gap-2 flex shrink-0 items-center">
+				<span
+					class={[
+						'rounded-lg bg-brand-500 font-bold text-white flex items-center justify-center',
+						size === 'lg' ? 'h-8 w-8 text-xs' : 'h-7 w-7 text-[11px]'
+					]}
+					aria-hidden="true"
+				>
+					{brand.slice(0, 1).toUpperCase()}
+				</span>
 				<span class={['font-semibold tracking-tight text-primary', brandSize]}>{brand}</span>
 			</div>
 		{/if}
 
 		<nav
 			class={[
-				'hidden h-full min-w-0 items-stretch gap-0.5 md:flex',
+				'min-w-0 gap-0.5 md:flex hidden h-full items-stretch',
 				centerLinks ? 'flex-1 justify-center' : 'flex-1',
 				!showBrand && !centerLinks && 'flex-1'
 			]}
@@ -116,14 +111,14 @@
 					disabled={link.disabled}
 					onclick={() => select(link.id, link.disabled)}
 					class={[
-						'relative flex items-center gap-1.5 px-3 font-medium transition-colors',
-						'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500/30',
+						'gap-1.5 px-3 font-medium relative flex items-center transition-colors',
+						'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
 						linkSize,
 						variant === 'underline' && 'border-b-2',
 						variant === 'underline' &&
 							(active
 								? 'border-brand-500 text-primary'
-								: 'border-transparent text-secondary hover:text-primary'),
+								: 'text-secondary hover:text-primary border-transparent'),
 						variant === 'pills' && 'my-2 rounded-lg',
 						variant === 'pills' &&
 							(active
@@ -137,7 +132,7 @@
 					{link.label}
 					{#if link.badge !== undefined && link.badge !== ''}
 						<span
-							class="rounded-full bg-brand-50 px-1.5 py-0.5 text-[10px] font-semibold text-brand-700 dark:bg-brand-950/50 dark:text-brand-300"
+							class="bg-brand-50 px-1.5 py-0.5 font-semibold text-brand-700 dark:bg-brand-950/50 dark:text-brand-300 rounded-full text-[10px]"
 						>
 							{link.badge}
 						</span>
@@ -147,7 +142,7 @@
 		</nav>
 
 		<nav
-			class="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto md:hidden"
+			class="min-w-0 gap-0.5 md:hidden flex flex-1 items-center overflow-x-auto"
 			aria-label="Primary"
 		>
 			{#each links as link (link.id)}
@@ -156,8 +151,8 @@
 					disabled={link.disabled}
 					onclick={() => select(link.id, link.disabled)}
 					class={[
-						'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors',
-						'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+						'px-3 py-1 text-xs font-medium shrink-0 rounded-full transition-colors',
+						'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none',
 						value === link.id
 							? 'bg-brand-50 text-brand-700 dark:bg-brand-950/50 dark:text-brand-300'
 							: 'text-secondary hover:bg-surface-overlay',
@@ -170,7 +165,7 @@
 		</nav>
 
 		{#if actions}
-			<div class="ml-auto flex shrink-0 items-center gap-2">
+			<div class="gap-2 ml-auto flex shrink-0 items-center">
 				{@render actions()}
 			</div>
 		{/if}

package/dist/components/organisms/Sidebar/Sidebar.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { Component, Snippet } from 'svelte';
 	import Divider from '../../atoms/Divider/Divider.svelte';
 
+	export type SidebarIcon = Component<{
+		class?: string;
+		size?: number | string;
+		strokeWidth?: number | string;
+	}>;
+
 	export interface SidebarItem {
 		id: string;
 		label: string;
 		href?: string;
+		icon?: SidebarIcon;
 		disabled?: boolean;
 	}
 
@@ -20,7 +27,10 @@
 		groups?: SidebarGroup[];
 		value?: string;
 		collapsed?: boolean;
+		/** Show the collapse toggle. Default true. */
+		collapsible?: boolean;
 		class?: string;
+		header?: Snippet;
 		footer?: Snippet;
 		onchange?: (id: string) => void;
 	}
@@ -30,7 +40,9 @@
 		groups = [],
 		value = $bindable(''),
 		collapsed = $bindable(false),
+		collapsible = true,
 		class: className = '',
+		header,
 		footer,
 		onchange
 	}: SidebarProps = $props();
@@ -40,76 +52,119 @@
 		value = id;
 		onchange?.(id);
 	}
+
+	function itemClass(item: SidebarItem) {
+		return [
+			'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors',
+			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+			value === item.id
+				? 'bg-brand-50 font-medium text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
+				: 'text-secondary hover:bg-surface-overlay hover:text-primary',
+			item.disabled && 'pointer-events-none cursor-not-allowed opacity-40',
+			collapsed && 'justify-center'
+		];
+	}
 </script>
 
+{#snippet itemGlyph(item: SidebarItem)}
+	{#if item.icon}
+		<item.icon class="h-4 w-4 shrink-0" strokeWidth={1.75} />
+	{:else}
+		<span
+			class="h-6 w-6 rounded-md bg-surface-overlay font-semibold flex shrink-0 items-center justify-center text-[11px]"
+		>
+			{item.label.slice(0, 1)}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet navItem(item: SidebarItem)}
+	{#if item.href && !item.disabled}
+		<a
+			href={item.href}
+			title={collapsed ? item.label : undefined}
+			aria-current={value === item.id ? 'page' : undefined}
+			class={itemClass(item)}
+			onclick={() => select(item.id, item.disabled)}
+		>
+			{@render itemGlyph(item)}
+			{#if !collapsed}
+				<span class="truncate">{item.label}</span>
+			{/if}
+		</a>
+	{:else}
+		<button
+			type="button"
+			disabled={item.disabled}
+			title={collapsed ? item.label : undefined}
+			aria-current={value === item.id ? 'page' : undefined}
+			class={itemClass(item)}
+			onclick={() => select(item.id, item.disabled)}
+		>
+			{@render itemGlyph(item)}
+			{#if !collapsed}
+				<span class="truncate">{item.label}</span>
+			{/if}
+		</button>
+	{/if}
+{/snippet}
+
 <aside
 	class={[
-		'flex h-full flex-col border-r border-border bg-surface-elevated transition-[width] duration-200',
+		'border-border bg-surface-elevated flex h-full flex-col border-r transition-[width] duration-200',
 		collapsed ? 'w-[4.25rem]' : 'w-60',
 		className
 	]}
 >
 	<div
 		class={[
-			'flex items-center gap-2 px-3 py-4',
-			collapsed ? 'justify-center' : 'justify-between'
+			'gap-2 px-3 py-4 flex items-center',
+			collapsed ? 'justify-center' : header || !collapsible ? 'justify-start' : 'justify-between'
 		]}
 	>
-		{#if !collapsed}
-			<span class="truncate text-sm font-semibold text-primary">{brand}</span>
+		{#if header && !collapsed}
+			<div class="min-w-0 flex-1">{@render header()}</div>
+		{:else if !collapsed}
+			<span class="text-sm font-semibold text-primary truncate">{brand}</span>
+		{/if}
+		{#if collapsible}
+			<button
+				type="button"
+				onclick={() => (collapsed = !collapsed)}
+				class="rounded-lg p-2 text-secondary hover:bg-surface-overlay hover:text-primary focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none"
+				aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+			>
+				<svg
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					aria-hidden="true"
+				>
+					{#if collapsed}
+						<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h10M4 18h16" />
+					{:else}
+						<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+					{/if}
+				</svg>
+			</button>
 		{/if}
-		<button
-			type="button"
-			onclick={() => (collapsed = !collapsed)}
-			class="rounded-lg p-2 text-secondary hover:bg-surface-overlay hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
-			aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-		>
-			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-				{#if collapsed}
-					<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h10M4 18h16" />
-				{:else}
-					<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-				{/if}
-			</svg>
-		</button>
 	</div>
 
-	<nav class="flex-1 overflow-y-auto px-2 pb-3">
+	<nav class="px-2 pb-3 flex-1 overflow-y-auto">
 		{#each groups as group, gi (group.id)}
 			{#if group.label && !collapsed}
-				<p class="mb-1 mt-3 px-2 text-[11px] font-semibold uppercase tracking-wide text-muted">
+				<p class="mb-1 mt-3 px-2 font-semibold tracking-wide text-muted text-[11px] uppercase">
 					{group.label}
 				</p>
 			{:else if gi > 0}
 				<div class="my-2 px-2"><Divider /></div>
 			{/if}
-			<ul class="flex flex-col gap-0.5">
+			<ul class="gap-0.5 flex flex-col">
 				{#each group.items as item (item.id)}
 					<li>
-						<button
-							type="button"
-							disabled={item.disabled}
-							onclick={() => select(item.id, item.disabled)}
-							title={collapsed ? item.label : undefined}
-							class={[
-								'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors',
-								'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
-								value === item.id
-									? 'bg-brand-50 font-medium text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
-									: 'text-secondary hover:bg-surface-overlay hover:text-primary',
-								item.disabled && 'cursor-not-allowed opacity-40',
-								collapsed && 'justify-center'
-							]}
-						>
-							<span
-								class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface-overlay text-[11px] font-semibold"
-							>
-								{item.label.slice(0, 1)}
-							</span>
-							{#if !collapsed}
-								<span class="truncate">{item.label}</span>
-							{/if}
-						</button>
+						{@render navItem(item)}
 					</li>
 				{/each}
 			</ul>
@@ -117,7 +172,7 @@
 	</nav>
 
 	{#if footer}
-		<div class={['border-t border-border p-3', collapsed && 'flex justify-center']}>
+		<div class={['border-border p-3 border-t', collapsed && 'flex justify-center']}>
 			{@render footer()}
 		</div>
 	{/if}

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

@@ -1,8 +1,14 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
+export type SidebarIcon = Component<{
+    class?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+}>;
 export interface SidebarItem {
     id: string;
     label: string;
     href?: string;
+    icon?: SidebarIcon;
     disabled?: boolean;
 }
 export interface SidebarGroup {
@@ -15,10 +21,13 @@ interface SidebarProps {
     groups?: SidebarGroup[];
     value?: string;
     collapsed?: boolean;
+    /** Show the collapse toggle. Default true. */
+    collapsible?: boolean;
     class?: string;
+    header?: Snippet;
     footer?: Snippet;
     onchange?: (id: string) => void;
 }
-declare const Sidebar: import("svelte").Component<SidebarProps, {}, "value" | "collapsed">;
+declare const Sidebar: Component<SidebarProps, {}, "value" | "collapsed">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;