@r2digisolutions/components 0.9.5 → 0.9.7

package/dist/components/atoms/Button/Button.svelte

@@ -40,7 +40,7 @@
 
 	const variantClasses: Record<ButtonVariant, string> = {
 		primary:
-			'bg-brand-500 text-white hover:bg-brand-600 active:bg-brand-700 focus-visible:ring-brand-500 shadow-sm hover:shadow-md active:scale-[0.98]',
+			'bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800 focus-visible:ring-brand-500 shadow-sm hover:shadow-md active:scale-[0.98]',
 		secondary:
 			'bg-surface-elevated text-primary border border-border hover:bg-surface-overlay hover:border-border-strong focus-visible:ring-brand-500 shadow-sm active:scale-[0.98]',
 		ghost:

package/dist/components/atoms/StepMark/StepMark.svelte

@@ -26,8 +26,7 @@
 			'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',
 			dims,
 			state === 'complete' && 'bg-brand-500 text-white',
-			state === 'current' &&
-				'bg-brand-500/15 text-brand-700 ring-2 ring-brand-500/40 dark:text-brand-300',
+			state === 'current' && 'bg-brand-500 text-white',
 			state === 'upcoming' && 'bg-surface-overlay text-muted ring-1 ring-border'
 		]}
 		aria-current={state === 'current' ? 'step' : undefined}

package/dist/components/molecules/FormActions/FormActions.svelte

@@ -18,6 +18,8 @@
 		fullWidth?: boolean;
 		align?: 'start' | 'end' | 'between';
 		showCancel?: boolean;
+		/** Hide the primary submit control (e.g. file-upload step that auto-advances). */
+		showSubmit?: boolean;
 		/**
 		 * plain = bare row
 		 * bar = bordered footer chrome inside a card
@@ -44,6 +46,7 @@
 		fullWidth = true,
 		align = 'end',
 		showCancel = true,
+		showSubmit = true,
 		variant = 'bar',
 		size = 'md',
 		hint = '',
@@ -69,12 +72,11 @@
 
 <div
 	class={[
-		'flex w-full flex-col gap-3 sm:flex-row sm:items-center',
+		'gap-3 sm:flex-row sm:items-center flex w-full flex-col',
 		alignClasses[align],
-		variant === 'bar' &&
-			'rounded-b-2xl border-t border-border bg-surface/50 px-4 py-3 sm:px-5',
+		variant === 'bar' && 'rounded-b-2xl border-border bg-surface/50 px-4 py-3 sm:px-5 border-t',
 		variant === 'sticky' &&
-			'shrink-0 border-t border-border bg-surface-elevated/95 px-4 py-3 shadow-[0_-8px_24px_rgb(0,0,0,0.06)] backdrop-blur-md dark:shadow-black/30 sm:px-5',
+			'border-border bg-surface-elevated/95 px-4 py-3 backdrop-blur-md dark:shadow-black/30 sm:px-5 shrink-0 border-t shadow-[0_-8px_24px_rgb(0,0,0,0.06)]',
 		variant === 'plain' && 'gap-2',
 		className
 	]}
@@ -82,7 +84,7 @@
 	aria-label="Form actions"
 >
 	{#if hint || extra || dangerLabel}
-		<div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+		<div class="min-w-0 gap-2 flex flex-1 flex-wrap items-center">
 			{#if dangerLabel}
 				<Button
 					type="button"
@@ -103,13 +105,13 @@
 			{/if}
 		</div>
 	{:else if align === 'between'}
-		<div class="hidden flex-1 sm:block" aria-hidden="true"></div>
+		<div class="sm:block hidden flex-1" aria-hidden="true"></div>
 	{/if}
 
 	<div
 		class={[
-			'flex items-center gap-2',
-			fullWidth && 'w-full flex-col-reverse sm:w-auto sm:flex-row'
+			'gap-2 flex items-center',
+			fullWidth && 'sm:w-auto sm:flex-row w-full flex-col-reverse'
 		]}
 	>
 		{#if showCancel}
@@ -118,21 +120,23 @@
 				variant="secondary"
 				{size}
 				disabled={busy}
-				class={fullWidth ? 'w-full sm:w-auto' : ''}
+				class={fullWidth ? 'sm:w-auto w-full' : ''}
 				onclick={() => oncancel?.()}
 			>
 				{resolvedCancelLabel}
 			</Button>
 		{/if}
-		<Button
-			type="submit"
-			{size}
-			loading={resolvedLoading}
-			disabled={busy || submitDisabled}
-			class={fullWidth ? 'w-full sm:w-auto' : ''}
-			onclick={() => onsubmit?.()}
-		>
-			{resolvedSubmitLabel}
-		</Button>
+		{#if showSubmit}
+			<Button
+				type="submit"
+				{size}
+				loading={resolvedLoading}
+				disabled={busy || submitDisabled}
+				class={fullWidth ? 'sm:w-auto w-full' : ''}
+				onclick={() => onsubmit?.()}
+			>
+				{resolvedSubmitLabel}
+			</Button>
+		{/if}
 	</div>
 </div>

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

@@ -13,6 +13,8 @@ interface FormActionsProps {
     fullWidth?: boolean;
     align?: 'start' | 'end' | 'between';
     showCancel?: boolean;
+    /** Hide the primary submit control (e.g. file-upload step that auto-advances). */
+    showSubmit?: boolean;
     /**
      * plain = bare row
      * bar = bordered footer chrome inside a card

package/dist/components/molecules/Stepper/Stepper.svelte

@@ -103,7 +103,7 @@
 			variant === 'dots' ? circleSize.dot : circleSize.box,
 			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
 			state === 'complete' && 'border-brand-500 bg-brand-500 text-white',
-			state === 'current' && 'border-brand-500 bg-surface-elevated text-brand-600',
+			state === 'current' && 'border-brand-500 bg-brand-500 text-white',
 			state === 'error' && 'border-red-500 bg-red-50 text-red-600 dark:bg-red-950/40 dark:text-red-400',
 			state === 'upcoming' && 'border-border bg-surface-elevated text-muted'
 		];

package/dist/components/molecules/TimePicker/TimePicker.svelte

@@ -112,7 +112,7 @@
 		const viewTop = vv?.offsetTop ?? 0;
 		const gap = 8;
 		const pad = 8;
-		const estimated = { panelW: Math.max(trigger.width, 192), panelH: 280 };
+		const estimated = { panelW: 208, panelH: 280 };
 		const canMeasure = opts.measure !== false && !!panelEl?.matches(':popover-open');
 		const panelW = Math.min(
 			canMeasure && panelEl?.offsetWidth ? panelEl.offsetWidth : estimated.panelW,
@@ -139,13 +139,12 @@
 		if (panelEl) {
 			const s = panelEl.style;
 			s.setProperty('margin', '0');
-			s.setProperty('inset', 'auto');
+			s.removeProperty('inset');
 			s.setProperty('top', `${Math.round(top)}px`);
 			s.setProperty('left', `${Math.round(left)}px`);
 			s.setProperty('right', 'auto');
 			s.setProperty('bottom', 'auto');
-			s.setProperty('width', 'max-content');
-			s.setProperty('min-width', `${Math.round(Math.min(panelW, trigger.width))}px`);
+			s.setProperty('width', '13rem');
 			s.setProperty('visibility', placed ? 'visible' : 'hidden');
 		}
 	}
@@ -263,16 +262,16 @@
 	});
 </script>
 
-<div class={['w-full min-w-[12rem] max-w-[16rem]', className]}>
+<div class={['w-full max-w-[16rem] min-w-[12rem]', className]}>
 	{#if label}
-		<span class="mb-1.5 block text-sm font-medium text-primary">{label}</span>
+		<span class="mb-1.5 text-sm font-medium text-primary block">{label}</span>
 	{/if}
 
 	<div
 		bind:this={triggerEl}
 		class={[
-			'flex h-10 w-full items-center overflow-hidden rounded-xl border border-border bg-surface-elevated transition-colors',
-			open && 'border-brand-500 ring-2 ring-brand-500/20',
+			'h-10 rounded-xl border-border bg-surface-elevated flex w-full items-center overflow-hidden border transition-colors',
+			open && 'border-brand-500 ring-brand-500/20 ring-2',
 			disabled && 'opacity-60'
 		]}
 	>
@@ -285,13 +284,13 @@
 			aria-haspopup="dialog"
 			aria-controls={panelId}
 			class={[
-				'flex h-full min-w-0 flex-1 items-center gap-2 px-3.5 text-left text-sm',
+				'min-w-0 gap-2 px-3.5 text-sm flex h-full flex-1 items-center text-left',
 				'hover:bg-surface-overlay focus-visible:outline-none',
 				disabled && 'cursor-not-allowed'
 			]}
 		>
 			<svg
-				class="h-4 w-4 shrink-0 text-muted"
+				class="h-4 w-4 text-muted shrink-0"
 				viewBox="0 0 24 24"
 				fill="none"
 				stroke="currentColor"
@@ -312,10 +311,16 @@
 			<button
 				type="button"
 				onclick={clear}
-				class="h-full px-3 text-muted hover:bg-surface-overlay hover:text-primary"
+				class="px-3 text-muted hover:bg-surface-overlay hover:text-primary h-full"
 				aria-label="Clear"
 			>
-				<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<svg
+					class="h-3.5 w-3.5"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+				>
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 				</svg>
 			</button>
@@ -332,18 +337,18 @@
 		onbeforetoggle={handleBeforeToggle}
 		ontoggle={handleToggle}
 		data-placed={placed ? true : undefined}
-		class="timepicker-popover m-0 overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-xl outline-none"
+		class="timepicker-popover m-0 w-52 rounded-2xl border-border bg-surface-elevated shadow-xl overflow-hidden border outline-none"
 	>
-		<div class="grid grid-cols-2 divide-x divide-border">
+		<div class="divide-border grid grid-cols-2 divide-x">
 			<div class="flex flex-col">
 				<span
-					class="border-b border-border px-3 py-2 text-center text-[11px] font-medium tracking-wide text-muted uppercase"
+					class="border-border px-3 py-2 font-medium tracking-wide text-muted border-b text-center text-[11px] uppercase"
 				>
 					Hour
 				</span>
 				<div
 					bind:this={hourListEl}
-					class="max-h-52 overflow-y-auto p-1.5"
+					class="max-h-52 p-1.5 overflow-y-auto"
 					role="listbox"
 					aria-label="Hours"
 				>
@@ -356,8 +361,8 @@
 							aria-selected={selectedH === h}
 							onclick={() => pickHour(h)}
 							class={[
-								'w-full rounded-lg px-2 py-1.5 text-sm transition-colors',
-								'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+								'rounded-lg px-2 py-1.5 text-sm w-full transition-colors',
+								'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none',
 								disabledHour && 'cursor-not-allowed opacity-30',
 								selectedH === h
 									? 'bg-brand-500 font-semibold text-white'
@@ -371,13 +376,13 @@
 			</div>
 			<div class="flex flex-col">
 				<span
-					class="border-b border-border px-3 py-2 text-center text-[11px] font-medium tracking-wide text-muted uppercase"
+					class="border-border px-3 py-2 font-medium tracking-wide text-muted border-b text-center text-[11px] uppercase"
 				>
 					Min
 				</span>
 				<div
 					bind:this={minuteListEl}
-					class="max-h-52 overflow-y-auto p-1.5"
+					class="max-h-52 p-1.5 overflow-y-auto"
 					role="listbox"
 					aria-label="Minutes"
 				>
@@ -390,8 +395,8 @@
 							aria-selected={selectedM === m}
 							onclick={() => pickMinute(m)}
 							class={[
-								'w-full rounded-lg px-2 py-1.5 text-sm transition-colors',
-								'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+								'rounded-lg px-2 py-1.5 text-sm w-full transition-colors',
+								'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none',
 								disabledMin && 'cursor-not-allowed opacity-30',
 								selectedM === m
 									? 'bg-brand-500 font-semibold text-white'
@@ -412,8 +417,12 @@
 	.timepicker-popover {
 		position: fixed;
 		inset: unset;
+		top: auto;
+		right: auto;
+		bottom: auto;
+		left: auto;
 		margin: 0;
-		width: max-content;
+		width: 13rem;
 		height: max-content;
 	}
 

package/package.json

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