@r2digisolutions/components 0.10.0 → 0.11.0

package/dist/components/atoms/BrandMark/BrandMark.svelte

@@ -4,9 +4,11 @@
 	export type BrandMarkSize = 'sm' | 'md' | 'lg' | 'xl';
 
 	interface BrandMarkProps {
-		/** 1–2 letter mark, or provide children for a custom glyph */
+		/** 1–2 letter mark, or provide children / logoSrc for a custom glyph */
 		mark?: string;
 		name?: string;
+		/** Official logo image URL (SVG/PNG). Replaces initials / children. */
+		logoSrc?: string;
 		size?: BrandMarkSize;
 		showName?: boolean;
 		class?: string;
@@ -16,6 +18,7 @@
 	const {
 		mark,
 		name = 'Brand',
+		logoSrc,
 		size = 'md',
 		showName = false,
 		class: className = '',
@@ -49,12 +52,15 @@
 <span class={['inline-flex items-center gap-2.5', className]}>
 	<span
 		class={[
-			'inline-flex shrink-0 items-center justify-center bg-brand-500 font-bold tracking-tight text-white shadow-sm',
+			'inline-flex shrink-0 items-center justify-center shadow-sm',
+			logoSrc ? 'overflow-hidden bg-white' : 'bg-brand-500 font-bold tracking-tight text-white',
 			box[size]
 		]}
 		aria-hidden={showName || !!name}
 	>
-		{#if children}
+		{#if logoSrc}
+			<img src={logoSrc} alt="" class="h-[78%] w-[78%] object-contain" />
+		{:else if children}
 			{@render children()}
 		{:else}
 			{initials}

package/dist/components/atoms/BrandMark/BrandMark.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 export type BrandMarkSize = 'sm' | 'md' | 'lg' | 'xl';
 interface BrandMarkProps {
-    /** 1–2 letter mark, or provide children for a custom glyph */
+    /** 1–2 letter mark, or provide children / logoSrc for a custom glyph */
     mark?: string;
     name?: string;
+    /** Official logo image URL (SVG/PNG). Replaces initials / children. */
+    logoSrc?: string;
     size?: BrandMarkSize;
     showName?: boolean;
     class?: string;

package/dist/components/molecules/AuthCard/AuthCard.svelte

@@ -8,6 +8,8 @@
 		description?: string;
 		brand?: string;
 		mark?: string;
+		/** Official brand logo URL (SVG/PNG) for BrandMark */
+		logoSrc?: string;
 		class?: string;
 		footer?: Snippet;
 		children?: Snippet;
@@ -18,6 +20,7 @@
 		description,
 		brand = 'R2 Digi',
 		mark,
+		logoSrc,
 		class: className = '',
 		footer,
 		children
@@ -31,7 +34,7 @@
 	class={`mx-auto w-full max-w-md border border-border shadow-sm ${className}`}
 >
 	<div class="mb-6 flex flex-col items-center gap-3 text-center">
-		<BrandMark name={brand} {mark} size="lg" showName />
+		<BrandMark name={brand} {mark} {logoSrc} size="lg" showName />
 		<div>
 			<h1 class="text-xl font-semibold tracking-tight text-primary">{title}</h1>
 			{#if description}

package/dist/components/molecules/AuthCard/AuthCard.svelte.d.ts

@@ -4,6 +4,8 @@ interface AuthCardProps {
     description?: string;
     brand?: string;
     mark?: string;
+    /** Official brand logo URL (SVG/PNG) for BrandMark */
+    logoSrc?: string;
     class?: string;
     footer?: Snippet;
     children?: Snippet;

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.10.0",
+	"version": "0.11.0",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",