@r2digisolutions/components 0.14.4 → 0.14.6

package/dist/components/molecules/Popover/Popover.svelte

@@ -230,7 +230,7 @@
 			ontoggle={onToggle}
 			style={panelStyle}
 			class={[
-				'popover-panel m-0 max-w-[min(20rem,calc(100vw-1rem))] rounded-xl border border-border bg-surface-elevated p-3 shadow-xl outline-none',
+				'popover-panel m-0 rounded-xl border-border bg-surface-elevated p-3 shadow-xl max-w-[min(20rem,calc(100vw-1rem))] border outline-none',
 				panelClass
 			]}
 		>
@@ -241,7 +241,7 @@
 			bind:this={panelEl}
 			role="dialog"
 			class={[
-				'absolute z-50 min-w-48 rounded-xl border border-border bg-surface-elevated p-3 shadow-xl',
+				'min-w-48 rounded-xl border-border bg-surface-elevated p-3 shadow-xl absolute z-50 border',
 				absolutePos[placement],
 				absoluteAlign[align][placement],
 				panelClass

package/dist/components/molecules/Popover/PopoverStory.svelte

@@ -9,12 +9,10 @@
 	let open = $state(false);
 </script>
 
-<div class="flex min-h-40 items-center justify-center">
+<div class="min-h-40 flex items-center justify-center">
 	<Popover bind:open placement={props.placement ?? 'bottom'}>
 		{#snippet trigger()}
-			<Button size="sm" variant="secondary" data-popover-trigger>
-				Open popover
-			</Button>
+			<Button size="sm" variant="secondary" data-popover-trigger>Open popover</Button>
 		{/snippet}
 		<div class="space-y-1">
 			<p class="text-sm font-medium text-primary">Quick actions</p>

package/dist/components/organisms/DesktopShell/DesktopShell.svelte

@@ -71,13 +71,7 @@
 		y?: number;
 	}
 
-	export type DesktopWallpaper =
-		| 'aurora'
-		| 'slate'
-		| 'mint'
-		| 'dusk'
-		| 'paper'
-		| 'custom';
+	export type DesktopWallpaper = 'aurora' | 'slate' | 'mint' | 'dusk' | 'paper' | 'custom';
 
 	export type DesktopShellHeight = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
@@ -138,10 +132,8 @@
 			'bg-[radial-gradient(ellipse_at_20%_0%,rgb(56_189_248_/_0.28),transparent_50%),radial-gradient(ellipse_at_80%_10%,rgb(167_139_250_/_0.22),transparent_45%),linear-gradient(160deg,var(--surface),var(--surface-overlay))]',
 		slate:
 			'bg-[radial-gradient(circle_at_30%_20%,rgb(100_116_139_/_0.3),transparent_50%),linear-gradient(165deg,#0f172a,#1e293b_55%,#334155)]',
-		mint:
-			'bg-[radial-gradient(ellipse_at_top,rgb(52_211_153_/_0.22),transparent_50%),linear-gradient(160deg,var(--surface),rgb(236_253_245))]',
-		dusk:
-			'bg-[radial-gradient(ellipse_at_70%_0%,rgb(251_146_60_/_0.28),transparent_45%),radial-gradient(ellipse_at_10%_80%,rgb(99_102_241_/_0.2),transparent_40%),linear-gradient(165deg,#1e1b4b,#312e81_40%,#7c2d12)]',
+		mint: 'bg-[radial-gradient(ellipse_at_top,rgb(52_211_153_/_0.22),transparent_50%),linear-gradient(160deg,var(--surface),rgb(236_253_245))]',
+		dusk: 'bg-[radial-gradient(ellipse_at_70%_0%,rgb(251_146_60_/_0.28),transparent_45%),radial-gradient(ellipse_at_10%_80%,rgb(99_102_241_/_0.2),transparent_40%),linear-gradient(165deg,#1e1b4b,#312e81_40%,#7c2d12)]',
 		paper:
 			'bg-[linear-gradient(180deg,var(--surface-elevated),var(--surface)),repeating-linear-gradient(0deg,transparent,transparent_23px,rgb(0_0_0_/_0.03)_24px)]'
 	};
@@ -192,7 +184,14 @@
 
 	const DEFAULT_WIDGETS: DesktopWidget[] = [
 		{ id: 'w-weather', kind: 'weather', title: 'Weather', x: 16, y: 16 },
-		{ id: 'w-sticky', kind: 'sticky', title: 'Notes', body: 'Ship desktop polish\n· Icons ✓\n· Menubar ✓', x: 16, y: 140 },
+		{
+			id: 'w-sticky',
+			kind: 'sticky',
+			title: 'Notes',
+			body: 'Ship desktop polish\n· Icons ✓\n· Menubar ✓',
+			x: 16,
+			y: 140
+		},
 		{ id: 'w-stats', kind: 'stats', title: 'Pulse', x: 16, y: 280 }
 	];
 
@@ -245,9 +244,7 @@
 	let contextTarget = $state<ContextTarget>({ type: 'desktop' });
 
 	const openWindows = $derived(
-		windows
-			.filter((w) => !w.closed)
-			.sort((a, b) => (a.rect.z ?? 0) - (b.rect.z ?? 0))
+		windows.filter((w) => !w.closed).sort((a, b) => (a.rect.z ?? 0) - (b.rect.z ?? 0))
 	);
 	const taskbarWindows = $derived(windows.filter((w) => !w.closed));
 	const visibleTaskbar = $derived(taskbarWindows.slice(0, TASKBAR_VISIBLE));
@@ -413,9 +410,7 @@
 		const z = nextZ();
 		emit(
 			windows.map((w) =>
-				w.id === id
-					? { ...w, closed: false, rect: { ...w.rect, z, minimized: false } }
-					: w
+				w.id === id ? { ...w, closed: false, rect: { ...w.rect, z, minimized: false } } : w
 			)
 		);
 		activeId = id;
@@ -424,9 +419,7 @@
 
 	function updateRect(id: string, rect: WindowRect) {
 		emit(
-			windows.map((w) =>
-				w.id === id ? { ...w, rect: { ...rect, z: rect.z ?? w.rect.z } } : w
-			)
+			windows.map((w) => (w.id === id ? { ...w, rect: { ...rect, z: rect.z ?? w.rect.z } } : w))
 		);
 	}
 
@@ -681,7 +674,20 @@
 
 	function resolveIcon(id?: DesktopIconId, kind?: string): DesktopIconId {
 		if (id) return id;
-		if (kind && ['files', 'mail', 'music', 'notes', 'settings', 'stats', 'calendar', 'terminal', 'team'].includes(kind)) {
+		if (
+			kind &&
+			[
+				'files',
+				'mail',
+				'music',
+				'notes',
+				'settings',
+				'stats',
+				'calendar',
+				'terminal',
+				'team'
+			].includes(kind)
+		) {
 			return kind as DesktopIconId;
 		}
 		return 'app';
@@ -698,7 +704,7 @@
 
 <div
 	class={[
-		'relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-surface shadow-sm',
+		'rounded-2xl border-border bg-surface shadow-sm relative flex w-full flex-col overflow-hidden border',
 		HEIGHT[height],
 		className
 	]}
@@ -714,11 +720,11 @@
 
 	{#if showMenubar}
 		<div
-			class="relative z-40 flex shrink-0 items-center gap-2 border-b border-border bg-surface-elevated/95 px-2.5 py-1.5 backdrop-blur"
+			class="gap-2 border-border bg-surface-elevated/95 px-2.5 py-1.5 backdrop-blur relative z-40 flex shrink-0 items-center border-b"
 		>
-			<BrandMark mark={brandMark} name={brand} size="sm" showName class="hidden sm:inline-flex" />
+			<BrandMark mark={brandMark} name={brand} size="sm" showName class="sm:inline-flex hidden" />
 			<BrandMark mark={brandMark} name={brand} size="sm" class="sm:hidden" />
-			<div class="h-4 w-px shrink-0 bg-border" aria-hidden="true"></div>
+			<div class="h-4 bg-border w-px shrink-0" aria-hidden="true"></div>
 			<Menubar items={menubarItems} class="min-w-0 flex-1" onselect={onMenubarSelect} />
 			{#if showPresence}
 				<SessionPresenceBadge size="sm" showLabel={false} />
@@ -731,7 +737,7 @@
 		<div
 			bind:this={desktopEl}
 			class={[
-				'relative min-h-0 flex-1 overflow-hidden',
+				'min-h-0 relative flex-1 overflow-hidden',
 				wallpaper !== 'custom' && WALLPAPER_CLASS[wallpaper]
 			]}
 			style={wallpaperBg}
@@ -741,7 +747,7 @@
 			}}
 		>
 			{#if showDesktopIcons && launcherApps.length}
-				<div class="absolute left-3 top-3 z-[1] flex w-[4.75rem] flex-col gap-0.5">
+				<div class="left-3 top-3 gap-0.5 absolute z-[1] flex w-[4.75rem] flex-col">
 					{#each launcherApps.slice(0, 8) as app (app.id)}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
@@ -752,7 +758,7 @@
 						>
 							<button
 								type="button"
-								class="group flex w-full flex-col items-center gap-1 rounded-xl px-1 py-1.5 text-center transition-colors hover:bg-black/10 dark:hover:bg-white/10"
+								class="group gap-1 rounded-xl px-1 py-1.5 hover:bg-black/10 dark:hover:bg-white/10 flex w-full flex-col items-center text-center transition-colors"
 								onclick={(e) => {
 									e.stopPropagation();
 									openApp(app);
@@ -764,7 +770,7 @@
 									size="lg"
 								/>
 								<span
-									class="line-clamp-2 w-full text-center text-[10px] font-medium leading-tight text-primary"
+									class="font-medium leading-tight text-primary line-clamp-2 w-full text-center text-[10px]"
 								>
 									{app.title}
 								</span>
@@ -775,11 +781,11 @@
 			{/if}
 
 			{#if showWidgets}
-				<div class="pointer-events-none absolute right-3 top-3 z-[1] flex w-44 flex-col gap-2">
+				<div class="right-3 top-3 w-44 gap-2 pointer-events-none absolute z-[1] flex flex-col">
 					{#each widgets as widget (widget.id)}
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
-							class="pointer-events-auto rounded-xl border border-border/70 bg-surface-elevated/90 p-3 shadow-sm backdrop-blur"
+							class="rounded-xl border-border/70 bg-surface-elevated/90 p-3 shadow-sm backdrop-blur pointer-events-auto border"
 							onpointerdown={(e) => e.stopPropagation()}
 							oncontextmenu={(e) => {
 								e.stopPropagation();
@@ -787,33 +793,42 @@
 							}}
 						>
 							{#if widget.kind === 'weather'}
-								<div class="flex items-start gap-2">
+								<div class="gap-2 flex items-start">
 									<span
-										class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-500/15 text-sky-700 dark:text-sky-300"
+										class="h-9 w-9 rounded-lg bg-sky-500/15 text-sky-700 dark:text-sky-300 flex shrink-0 items-center justify-center"
 									>
 										<CloudSun class="h-[18px] w-[18px]" strokeWidth={2} />
 									</span>
 									<div class="min-w-0">
 										<p class="text-xs font-medium text-muted">{widget.title ?? 'Weather'}</p>
-										<p class="text-lg font-semibold tabular-nums text-primary">22°</p>
-										<p class="text-[11px] text-secondary">Partly cloudy</p>
+										<p class="text-lg font-semibold text-primary tabular-nums">22°</p>
+										<p class="text-secondary text-[11px]">Partly cloudy</p>
 									</div>
 								</div>
 							{:else if widget.kind === 'sticky'}
-								<p class="text-[11px] font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-300">
+								<p
+									class="font-semibold tracking-wide text-amber-700 dark:text-amber-300 text-[11px] uppercase"
+								>
 									{widget.title ?? 'Sticky'}
 								</p>
-								<p class="mt-1 whitespace-pre-line text-xs leading-relaxed text-primary">
+								<p class="mt-1 text-xs leading-relaxed text-primary whitespace-pre-line">
 									{widget.body ?? 'Add a note…'}
 								</p>
 							{:else if widget.kind === 'stats'}
-								<p class="mb-2 text-[11px] font-medium text-muted">{widget.title ?? 'Stats'}</p>
+								<p class="mb-2 font-medium text-muted text-[11px]">{widget.title ?? 'Stats'}</p>
 								<div class="space-y-1">
-									<StatCard label="Active" value="128" delta="+4%" trend="up" variant="ghost" class="!p-2" />
+									<StatCard
+										label="Active"
+										value="128"
+										delta="+4%"
+										trend="up"
+										variant="ghost"
+										class="!p-2"
+									/>
 								</div>
 							{:else}
-								<p class="text-sm font-semibold tabular-nums text-primary">{clock}</p>
-								<p class="text-[11px] text-muted">{clockDate}</p>
+								<p class="text-sm font-semibold text-primary tabular-nums">{clock}</p>
+								<p class="text-muted text-[11px]">{clockDate}</p>
 							{/if}
 						</div>
 					{/each}
@@ -856,10 +871,10 @@
 			{#if startOpen}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="absolute bottom-3 left-3 z-[1000] flex w-[19rem] flex-col overflow-hidden rounded-2xl border border-border bg-surface-elevated/95 shadow-xl backdrop-blur"
+					class="bottom-3 left-3 rounded-2xl border-border bg-surface-elevated/95 shadow-xl backdrop-blur absolute z-[1000] flex w-[19rem] flex-col overflow-hidden border"
 					onpointerdown={(e) => e.stopPropagation()}
 				>
-					<div class="flex items-center gap-2 border-b border-border px-3 py-2.5">
+					<div class="gap-2 border-border px-3 py-2.5 flex items-center border-b">
 						<BrandMark mark={brandMark} name={brand} size="sm" showName />
 					</div>
 
@@ -868,7 +883,7 @@
 
 						<div class="max-h-56 space-y-0.5 overflow-y-auto">
 							{#if !filteredApps.length}
-								<p class="px-2 py-4 text-center text-xs text-muted">No apps found</p>
+								<p class="px-2 py-4 text-xs text-muted text-center">No apps found</p>
 							{:else}
 								{#each filteredApps as app (app.id)}
 									<Tile
@@ -894,7 +909,7 @@
 						</div>
 					</div>
 
-					<div class="flex items-center gap-1 border-t border-border p-1.5">
+					<div class="gap-1 border-border p-1.5 flex items-center border-t">
 						<Tooltip content="Cascade">
 							<IconButton label="Cascade windows" size="sm" onclick={cascadeWindows}>
 								<Layers class="h-4 w-4" strokeWidth={2} />
@@ -913,7 +928,7 @@
 						<div class="min-w-0 flex-1"></div>
 						<button
 							type="button"
-							class="inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-[11px] text-muted hover:bg-surface-overlay hover:text-secondary"
+							class="gap-1.5 rounded-lg px-2 py-1 text-muted hover:bg-surface-overlay hover:text-secondary inline-flex items-center text-[11px]"
 							onclick={() => {
 								startOpen = false;
 								commandOpen = true;
@@ -929,7 +944,7 @@
 
 		{#if showTaskbar}
 			<div
-				class="relative z-40 flex shrink-0 items-center gap-2 border-t border-border bg-surface-elevated/95 px-2 py-2 backdrop-blur sm:px-3"
+				class="gap-2 border-border bg-surface-elevated/95 px-2 py-2 backdrop-blur sm:px-3 relative z-40 flex shrink-0 items-center border-t"
 			>
 				{#if showStart}
 					<Tooltip content="Start" side="top">
@@ -972,9 +987,9 @@
 					{@render taskbarLeading()}
 				{/if}
 
-				<div class="flex min-w-0 flex-1 items-center justify-center gap-1 overflow-x-auto px-1">
+				<div class="min-w-0 gap-1 px-1 flex flex-1 items-center justify-center overflow-x-auto">
 					<div
-						class="inline-flex items-center gap-0.5 rounded-2xl border border-border/70 bg-surface/70 p-1 shadow-sm"
+						class="gap-0.5 rounded-2xl border-border/70 bg-surface/70 p-1 shadow-sm inline-flex items-center border"
 					>
 						{#each visibleTaskbar as win (win.id)}
 							<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -988,7 +1003,7 @@
 									<button
 										type="button"
 										class={[
-											'relative flex h-9 w-9 items-center justify-center rounded-xl transition-colors',
+											'h-9 w-9 rounded-xl relative flex items-center justify-center transition-colors',
 											activeId === win.id && !win.rect.minimized
 												? 'bg-brand-500/15 text-brand-700 dark:text-brand-300'
 												: 'text-secondary hover:bg-surface-overlay hover:text-primary',
@@ -1006,7 +1021,7 @@
 										/>
 										{#if activeId === win.id && !win.rect.minimized}
 											<span
-												class="absolute inset-x-2 bottom-0.5 h-0.5 rounded-full bg-brand-500"
+												class="inset-x-2 bottom-0.5 h-0.5 bg-brand-500 absolute rounded-full"
 												aria-hidden="true"
 											></span>
 										{/if}
@@ -1026,7 +1041,7 @@
 							>
 								{#snippet trigger()}
 									<span
-										class="flex h-9 w-9 items-center justify-center rounded-xl text-secondary hover:bg-surface-overlay"
+										class="h-9 w-9 rounded-xl text-secondary hover:bg-surface-overlay flex items-center justify-center"
 										aria-label={`More windows (${overflowTaskbar.length})`}
 									>
 										<MoreHorizontal class="h-4 w-4" strokeWidth={2} />
@@ -1037,7 +1052,7 @@
 					</div>
 				</div>
 
-				<div class="flex shrink-0 items-center gap-1.5">
+				<div class="gap-1.5 flex shrink-0 items-center">
 					{#if showWindowCount}
 						<Badge size="sm" variant="secondary" class="tabular-nums">
 							{taskbarWindows.length - minimizedCount}/{taskbarWindows.length}
@@ -1074,20 +1089,20 @@
 								<button
 									type="button"
 									data-popover-trigger
-									class="flex min-w-[4.5rem] flex-col items-end rounded-xl px-2.5 py-1 text-right transition-colors hover:bg-surface-overlay"
+									class="rounded-xl px-2.5 py-1 hover:bg-surface-overlay flex min-w-[4.5rem] flex-col items-end text-right transition-colors"
 									aria-expanded={clockOpen}
 									aria-haspopup="dialog"
 									onclick={() => {
 										startOpen = false;
 									}}
 								>
-									<span class="text-xs font-semibold tabular-nums text-primary">{clock}</span>
-									<span class="text-[10px] text-muted">{clockDate}</span>
+									<span class="text-xs font-semibold text-primary tabular-nums">{clock}</span>
+									<span class="text-muted text-[10px]">{clockDate}</span>
 								</button>
 							{/snippet}
 							<div class="space-y-3">
-								<div class="border-b border-border pb-2">
-									<p class="text-2xl font-semibold tabular-nums tracking-tight text-primary">
+								<div class="border-border pb-2 border-b">
+									<p class="text-2xl font-semibold tracking-tight text-primary tabular-nums">
 										{clock}
 									</p>
 									<p class="text-sm text-secondary">{clockDate}</p>

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

@@ -43,50 +43,57 @@
 	}
 
 	const itemClass = (item: NavRailItem) => [
-		'relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors',
+		'group 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-surface-overlay text-primary'
+			? 'bg-brand-500/15 text-brand-500'
 			: 'text-secondary hover:bg-surface-overlay hover:text-primary',
 		item.disabled && 'pointer-events-none cursor-not-allowed opacity-40'
 	];
+
+	const glyphClass = (item: NavRailItem) => [
+		'h-5 w-5',
+		value === item.id ? 'text-brand-500' : 'text-secondary group-hover:text-primary'
+	];
 </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 content={item.label} side="right" class="relative w-full justify-center">
+		<RailMark active={value === item.id} length="full" class="z-10" />
+		{#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={glyphClass(item)} strokeWidth={1.75} />
+				{:else}
+					<span class={['text-xs font-semibold', value === item.id && 'text-brand-500']}>
+						{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={glyphClass(item)} strokeWidth={1.75} />
+				{:else}
+					<span class={['text-xs font-semibold', value === item.id && 'text-brand-500']}>
+						{item.label.slice(0, 1)}
+					</span>
+				{/if}
+			</button>
+		{/if}
 	</Tooltip>
 {/snippet}
 
@@ -102,7 +109,7 @@
 		</div>
 	{/if}
 
-	<nav class="gap-1 flex flex-1 flex-col items-center" aria-label="Rail">
+	<nav class="gap-1 flex w-full flex-1 flex-col items-center" aria-label="Rail">
 		{#each items as item (item.id)}
 			{@render railButton(item)}
 		{/each}
@@ -110,7 +117,7 @@
 
 	{#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">
+		<nav class="gap-1 flex w-full flex-col items-center" aria-label="Rail footer">
 			{#each footerItems as item (item.id)}
 				{@render railButton(item)}
 			{/each}

package/dist/components/organisms/NotificationCenter/NotificationCenter.svelte

@@ -14,11 +14,26 @@
 		type?: 'info' | 'success' | 'warning' | 'error';
 	}
 
+	export interface NotificationCenterLabels {
+		title?: string;
+		/** Badge next to the title. `{n}` is replaced with unread count. */
+		newCount?: string;
+		markAllRead?: string;
+		clearAll?: string;
+		empty?: string;
+		/** Trigger aria-label when there are no unread items */
+		trigger?: string;
+		/** Appended to trigger aria-label when unread. `{n}` is unread count. */
+		unreadSuffix?: string;
+	}
+
 	interface NotificationCenterProps {
 		id?: string;
 		items?: NotificationItem[];
 		open?: boolean;
 		class?: string;
+		labels?: NotificationCenterLabels;
+		showClear?: boolean;
 		onitemclick?: (item: NotificationItem) => void;
 		onmarkallread?: () => void;
 		onclear?: () => void;
@@ -29,6 +44,8 @@
 		items = $bindable([]),
 		open = $bindable(false),
 		class: className = '',
+		showClear = true,
+		labels = {},
 		onitemclick,
 		onmarkallread,
 		onclear
@@ -42,6 +59,22 @@
 	const popoverId = $derived(`${baseId}-popover`);
 	const unreadCount = $derived(items.filter((n) => !n.read).length);
 
+	const DEFAULT_LABELS: Required<NotificationCenterLabels> = {
+		title: 'Notifications',
+		newCount: '{n} new',
+		markAllRead: 'Mark all read',
+		clearAll: 'Clear all',
+		empty: 'No notifications',
+		trigger: 'Notifications',
+		unreadSuffix: ', {n} unread'
+	};
+
+	const copy = $derived({ ...DEFAULT_LABELS, ...labels });
+
+	function withCount(template: string, n: number) {
+		return template.replaceAll('{n}', String(n));
+	}
+
 	function positionPopover() {
 		if (!triggerEl || !popoverEl) return;
 		if (!popoverEl.matches(':popover-open')) return;
@@ -136,7 +169,7 @@
 		type="button"
 		popovertarget={popoverId}
 		popovertargetaction="toggle"
-		aria-label={`Notifications${unreadCount > 0 ? `, ${unreadCount} unread` : ''}`}
+		aria-label="{copy.trigger}{unreadCount > 0 ? withCount(copy.unreadSuffix, unreadCount) : ''}"
 		aria-expanded={open}
 		aria-controls={popoverId}
 		class="relative flex h-9 w-9 items-center justify-center rounded-lg text-secondary outline-none transition-colors hover:bg-surface-overlay hover:text-primary focus-visible:ring-2 focus-visible:ring-brand-500/30"
@@ -173,16 +206,16 @@
 		style={popoverStyle}
 		class="notif-panel inset-auto m-0 flex flex-col overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-2xl outline-none"
 		role="dialog"
-		aria-label="Notifications"
+		aria-label={copy.title}
 	>
 		<div class="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
 			<div class="flex items-center gap-2">
-				<h3 class="text-sm font-semibold text-primary">Notifications</h3>
+				<h3 class="text-sm font-semibold text-primary">{copy.title}</h3>
 				{#if unreadCount > 0}
 					<span
 						class="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-medium text-brand-600 dark:bg-brand-900 dark:text-brand-400"
 					>
-						{unreadCount} new
+						{withCount(copy.newCount, unreadCount)}
 					</span>
 				{/if}
 			</div>
@@ -193,16 +226,16 @@
 						onclick={markAllRead}
 						class="rounded-lg px-2 py-1 text-xs font-medium text-brand-600 transition-colors hover:bg-surface-overlay dark:text-brand-400"
 					>
-						Mark all read
+						{copy.markAllRead}
 					</button>
 				{/if}
-				{#if items.length > 0}
+				{#if showClear && items.length > 0}
 					<button
 						type="button"
 						onclick={clear}
 						class="rounded-lg px-2 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-overlay hover:text-primary"
 					>
-						Clear all
+						{copy.clearAll}
 					</button>
 				{/if}
 			</div>
@@ -225,7 +258,7 @@
 							d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
 						/>
 					</svg>
-					<p class="text-sm text-muted">No notifications</p>
+					<p class="text-sm text-muted">{copy.empty}</p>
 				</div>
 			{:else}
 				<div class="divide-y divide-border">

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

@@ -9,11 +9,25 @@ export interface NotificationItem {
     actor?: string;
     type?: 'info' | 'success' | 'warning' | 'error';
 }
+export interface NotificationCenterLabels {
+    title?: string;
+    /** Badge next to the title. `{n}` is replaced with unread count. */
+    newCount?: string;
+    markAllRead?: string;
+    clearAll?: string;
+    empty?: string;
+    /** Trigger aria-label when there are no unread items */
+    trigger?: string;
+    /** Appended to trigger aria-label when unread. `{n}` is unread count. */
+    unreadSuffix?: string;
+}
 interface NotificationCenterProps {
     id?: string;
     items?: NotificationItem[];
     open?: boolean;
     class?: string;
+    labels?: NotificationCenterLabels;
+    showClear?: boolean;
     onitemclick?: (item: NotificationItem) => void;
     onmarkallread?: () => void;
     onclear?: () => void;

package/dist/index.d.ts

@@ -678,7 +678,7 @@ export type { LoginFormVariant, LoginFormAlign } from './components/organisms/Lo
 export { default as Menubar } from './components/organisms/Menubar/Menubar.svelte';
 export type { MenubarItem, MenubarSubItem } from './components/organisms/Menubar/Menubar.svelte';
 export { default as NotificationCenter } from './components/organisms/NotificationCenter/NotificationCenter.svelte';
-export type { NotificationItem } from './components/organisms/NotificationCenter/NotificationCenter.svelte';
+export type { NotificationItem, NotificationCenterLabels } from './components/organisms/NotificationCenter/NotificationCenter.svelte';
 export { default as Kanban } from './components/organisms/Kanban/Kanban.svelte';
 export type { KanbanColumn, KanbanCard, KanbanAssignee, KanbanPriority } from './components/organisms/Kanban/Kanban.svelte';
 export { default as CookieConsent } from './components/organisms/CookieConsent/CookieConsent.svelte';

package/package.json

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