@selvajs/ui 6.5.1-beta.0 → 6.6.0-beta.2

package/src/lib/components/preview/Group.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { LayoutItem, InputLayoutItem, OutputLayoutItem } from '@selvajs/schemas';
 	import type { Snippet } from 'svelte';
-	import * as Card from '$lib/components/primitives/card';
 	import { ChevronDown } from '@lucide/svelte';
 	import { buildVisibilityMap, itemKey } from '$lib/schema/visibility-rules';
 
@@ -20,7 +19,7 @@
 			]
 		>;
 		outputSnippet: Snippet<[layoutItem: OutputLayoutItem]>;
-		/** When true, renders items flat without the Card wrapper, header, or collapse toggle. */
+		/** When true, renders items without the header or collapse toggle. */
 		flat?: boolean;
 	}
 
@@ -37,110 +36,84 @@
 		flat = false
 	}: Props = $props();
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			onToggle();
-		}
-	}
-
-	// One visibility evaluation per item per render; columnStarts and gridItem both read it.
 	const visibilityMap = $derived(buildVisibilityMap(items, values));
 
-	// Hidden items must not consume a slot here, because gridItem skips them entirely —
-	// counting them would offset every following item's column.
-	const columnStarts = $derived.by(() => {
-		const positions: number[] = [];
-		let col = 0;
-		for (const item of items) {
-			if (item.type === 'linebreak') {
-				positions.push(0);
-				col = 0;
-				continue;
-			}
-			const visibility = visibilityMap[itemKey(item)];
-			if (!visibility.visible) {
-				positions.push(0);
-				continue;
-			}
-			const span = Math.min(Math.max(1, item.span ?? 1), columns);
-			if (col + span > columns) col = 0;
-			positions.push(col);
-			col = (col + span) % columns;
-		}
-		return positions;
-	});
+	// Below this a label and its control stop fitting side by side, so a wide group
+	// sheds columns as its panel narrows instead of squeezing every input.
+	const MIN_COLUMN_WIDTH = 160;
+	const COLUMN_GAP = 16;
+
+	let gridWidth = $state(0);
+	const effectiveColumns = $derived(
+		gridWidth === 0
+			? columns
+			: Math.max(
+					1,
+					Math.min(columns, Math.floor((gridWidth + COLUMN_GAP) / (MIN_COLUMN_WIDTH + COLUMN_GAP)))
+				)
+	);
 </script>
 
-{#if flat}
-	<div class="p-6">
-		<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
-			{#each items as layoutItem, i (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
-				{@render gridItem(layoutItem, columns, columnStarts[i] === 0)}
-			{/each}
-		</div>
+{#snippet grid()}
+	<div
+		class="schema-grid"
+		style="--schema-cols: {effectiveColumns}; --column-gap: {COLUMN_GAP}px;"
+		bind:clientWidth={gridWidth}
+	>
+		{#each items as layoutItem (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
+			{@render gridItem(layoutItem)}
+		{/each}
 	</div>
-{:else}
-	<Card.Root class="gap-0 py-0 pt-0 overflow-hidden">
-		<Card.Header
-			class="pt-4 pb-4! cursor-pointer border-b border-border bg-muted transition-colors select-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
-			role="button"
-			tabindex={0}
+{/snippet}
+
+<section class="shadow-xs rounded-xl bg-card">
+	{#if flat}
+		<div class="p-4">
+			{@render grid()}
+		</div>
+	{:else}
+		<button
+			type="button"
+			class="gap-3 px-4 py-3.5 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
 			aria-expanded={!collapsed}
 			onclick={onToggle}
-			onkeydown={handleKeydown}
 		>
-			<Card.Title>{label}</Card.Title>
-			{#if description}
-				<Card.Description>{description}</Card.Description>
-			{/if}
-			<Card.Action>
-				<ChevronDown
-					class="h-4 w-4 text-muted-foreground transition-transform duration-200 {collapsed
-						? ''
-						: 'rotate-180'}"
-				/>
-			</Card.Action>
-		</Card.Header>
-		<div class="content-wrapper" class:collapsed>
+			<span class="min-w-0 flex-1">
+				<span class="text-base font-semibold leading-snug block text-foreground">{label}</span>
+				{#if description}
+					<span class="text-xs mt-0.5 leading-snug block text-muted-foreground">{description}</span>
+				{/if}
+			</span>
+			<ChevronDown
+				class="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 {collapsed
+					? '-rotate-90'
+					: ''}"
+			/>
+		</button>
+		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
-				<Card.Content class="p-6">
-					<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
-						{#each items as layoutItem, i (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
-							{@render gridItem(layoutItem, columns, columnStarts[i] === 0)}
-						{/each}
-					</div>
-				</Card.Content>
+				<div class="px-4 pt-1 pb-5">
+					{@render grid()}
+				</div>
 			</div>
 		</div>
-	</Card.Root>
-{/if}
+	{/if}
+</section>
 
-{#snippet gridItem(layoutItem: LayoutItem, cols: number, isFirstInRow: boolean)}
+{#snippet gridItem(layoutItem: LayoutItem)}
 	{#if layoutItem.type === 'linebreak'}
-		<div style="grid-column: 1 / -1" class="h-px bg-border" aria-hidden="true"></div>
+		<div class="grid-break" aria-hidden="true"></div>
 	{:else}
 		{@const visibility = visibilityMap[itemKey(layoutItem)]}
-		{@const span = Math.min(Math.max(1, layoutItem.span ?? 1), cols)}
+		{@const span = Math.min(Math.max(1, layoutItem.span ?? 1), effectiveColumns)}
 		{#if visibility.visible}
-			{#if layoutItem.type === 'input'}
-				<div
-					class="grid-cell min-w-0 flex items-center"
-					class:opacity-50={visibility.disabled}
-					class:col-divider={!isFirstInRow && cols > 1}
-					style="grid-column: span {span} / span {span}"
-				>
+			<div class="grid-cell min-w-0" class:opacity-50={visibility.disabled} style="--span: {span}">
+				{#if layoutItem.type === 'input'}
 					{@render inputSnippet(layoutItem, visibility)}
-				</div>
-			{:else if layoutItem.type === 'output'}
-				<div
-					class="grid-cell"
-					class:col-divider={!isFirstInRow && cols > 1}
-					style="grid-column: span {span} / span {span}"
-				>
+				{:else if layoutItem.type === 'output'}
 					{@render outputSnippet(layoutItem)}
-				</div>
-			{/if}
+				{/if}
+			</div>
 		{/if}
 	{/if}
 {/snippet}
@@ -158,27 +131,23 @@
 
 	.content-inner {
 		min-height: 0;
+		overflow: hidden;
 	}
 
 	.schema-grid {
+		display: grid;
 		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
+		gap: 1rem var(--column-gap);
+		align-items: start;
 	}
 
-	/* Vertical divider painted in the column gap. `gap-6` is 24px, so a 12px
-	   negative margin + 12px padding centres the 1px line in the gutter. */
-	.col-divider {
-		border-left: 1px solid var(--border);
-		padding-left: 12px;
-		margin-left: -12px;
+	.grid-cell {
+		grid-column: span var(--span) / span var(--span);
 	}
 
-	/* When the container collapses the grid to 1 visual column, the items are
-	   stacked and the divider would float on the left of every row. Hide it. */
-	@container (max-width: 320px) {
-		.col-divider {
-			border-left: 0;
-			padding-left: 0;
-			margin-left: 0;
-		}
+	/* An empty full-width row: the two row gaps around it already read as a break. */
+	.grid-break {
+		grid-column: 1 / -1;
+		margin-block: -0.25rem;
 	}
 </style>

package/src/lib/components/preview/HelpButton.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { HelpCircle } from '@lucide/svelte';
+	import * as Dialog from '$lib/components/primitives/dialog';
+
+	interface Props {
+		/** The field's label: the dialog title and the button's accessible name. */
+		label: string;
+		description: string;
+	}
+
+	let { label, description }: Props = $props();
+</script>
+
+<!-- Every field has one, so a column of them is noise. Where a fine pointer can hover, it shows
+     only while the pointer or focus is inside the enclosing `group/field`; touch keeps it visible. -->
+<Dialog.Root>
+	<Dialog.Trigger>
+		{#snippet child({ props })}
+			<button
+				{...props}
+				class="-m-1 p-1 shrink-0 cursor-help rounded-sm text-muted-foreground transition hover:text-foreground pointer-fine:opacity-0 pointer-fine:group-focus-within/field:opacity-100 pointer-fine:group-hover/field:opacity-100 pointer-fine:focus-visible:opacity-100"
+				aria-label={label}
+			>
+				<HelpCircle class="size-3.5" />
+			</button>
+		{/snippet}
+	</Dialog.Trigger>
+	<Dialog.Content class="sm:max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>{label}</Dialog.Title>
+			<Dialog.Description>{description}</Dialog.Description>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>

package/src/lib/components/preview/ImageOutput.svelte

@@ -97,10 +97,8 @@
 		</div>
 	{:else}
 		<div
-			class="w-full"
-			style="height: {isFullscreen ? '100vh' : '380px'}; {backgroundColor
-				? `background-color: ${backgroundColor};`
-				: ''}"
+			class="w-full bg-(--image-bg) {isFullscreen ? 'h-screen' : 'h-95'}"
+			style:--image-bg={backgroundColor}
 		>
 			<img
 				src={dataUrl}

package/src/lib/components/preview/InputControl.svelte

@@ -16,8 +16,7 @@
 		isColorWidget
 	} from '@selvajs/schemas';
 	import * as Field from '$lib/components/primitives/field';
-	import * as Dialog from '$lib/components/primitives/dialog';
-	import { HelpCircle } from '@lucide/svelte';
+	import HelpButton from './HelpButton.svelte';
 	import {
 		CheckboxInput,
 		ChecklistInput,
@@ -65,15 +64,15 @@
 	});
 	const clientSlot = getClientSlot();
 
-	// Min/max hint rendered next to the label. `hideRange` lets the author suppress it.
+	// Sliders never show the hint: the track already conveys the bounds.
 	const numberRangeHint = $derived.by(() => {
 		if (!isNumberWidget(item)) return null;
 		const cfg = item.config;
-		if (cfg?.hideRange) return null;
+		if (cfg?.hideRange || cfg?.renderAsSlider) return null;
 		const hasMin = typeof cfg?.minimum === 'number';
 		const hasMax = typeof cfg?.maximum === 'number';
 		if (!hasMin && !hasMax) return null;
-		if (hasMin && hasMax) return `${cfg!.minimum} to ${cfg!.maximum}`;
+		if (hasMin && hasMax) return `${cfg!.minimum} – ${cfg!.maximum}`;
 		if (hasMin) return `≥ ${cfg!.minimum}`;
 		return `≤ ${cfg!.maximum}`;
 	});
@@ -171,54 +170,52 @@
 	}
 </script>
 
+{#snippet labelText(forId?: string, tone: 'quiet' | 'strong' = 'quiet')}
+	<Field.Label for={forId} class="min-w-0 block break-words">
+		<span
+			class={tone === 'quiet' ? 'font-normal text-muted-foreground' : 'font-normal text-foreground'}
+			>{label}</span
+		>
+	</Field.Label>
+{/snippet}
+
+{#snippet helpButton()}
+	{#if item.description}
+		<HelpButton {label} description={item.description} />
+	{/if}
+{/snippet}
+
+{#snippet fieldHeader(forId?: string)}
+	<div class="gap-1.5 min-h-5 min-w-0 flex items-center">
+		{@render labelText(forId)}
+		{@render helpButton()}
+		{#if showRangeInLabel}
+			<span
+				class="text-xs pl-2 ml-auto hidden shrink-0 whitespace-nowrap text-muted-foreground tabular-nums group-focus-within/field:inline"
+			>
+				{numberRangeHint}
+			</span>
+		{/if}
+	</div>
+{/snippet}
+
 {#if isClientSlot}
 	{#if clientSlot}
-		<Field.Field>
-			<Field.Label class="gap-2 flex items-center">
-				{label}
-				{#if item.description}
-					<Dialog.Root>
-						<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
-							<HelpCircle size={16} />
-						</Dialog.Trigger>
-						<Dialog.Content class="sm:max-w-md">
-							<Dialog.Header>
-								<Dialog.Title>{label}</Dialog.Title>
-								<Dialog.Description>{item.description}</Dialog.Description>
-							</Dialog.Header>
-						</Dialog.Content>
-					</Dialog.Root>
-				{/if}
-			</Field.Label>
+		<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+			{@render fieldHeader()}
 			{@render clientSlot({
 				inputId: item.paramId,
 				displayName: label,
 				value,
 				onValueChange: commit
 			})}
-		</Field.Field>
+		</div>
 	{/if}
 {:else if !hideDynamicListWhenEmpty}
-	<Field.Field>
-		<Field.Label for={inputId} class="gap-2 flex items-center">
-			{label}
-			{#if item.description}
-				<Dialog.Root>
-					<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
-						<HelpCircle size={16} />
-					</Dialog.Trigger>
-					<Dialog.Content class="sm:max-w-md">
-						<Dialog.Header>
-							<Dialog.Title>{label}</Dialog.Title>
-							<Dialog.Description>{item.description}</Dialog.Description>
-						</Dialog.Header>
-					</Dialog.Content>
-				</Dialog.Root>
-			{/if}
-			{#if showRangeInLabel}
-				<span class="text-xs font-normal text-muted-foreground">{numberRangeHint}</span>
-			{/if}
-		</Field.Label>
+	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+		{#if !isCheckboxWidget(item)}
+			{@render fieldHeader(inputId)}
+		{/if}
 
 		{#if isNumberWidget(item)}
 			{@const config = item.config}
@@ -235,7 +232,10 @@
 				value={typeof value === 'boolean' ? value : undefined}
 				onChange={commit}
 				{disabled}
-			/>
+			>
+				{@render labelText(inputId, 'strong')}
+				{@render helpButton()}
+			</CheckboxInput>
 		{:else if isTextWidget(item)}
 			{@const config = item.config}
 			<TextInput
@@ -307,5 +307,5 @@
 				onChange={(newValue) => commit(newValue)}
 			/>
 		{/if}
-	</Field.Field>
+	</div>
 {/if}

package/src/lib/components/preview/OutputDisplay.svelte

@@ -10,8 +10,8 @@
 		isFileData
 	} from '$lib/utils/file-download';
 	import { Button } from '../primitives';
-	import * as Dialog from '$lib/components/primitives/dialog';
-	import { Info, Folder, FolderOpen, FileIcon, ChevronRight } from '@lucide/svelte';
+	import { Folder, FolderOpen, FileIcon, ChevronRight } from '@lucide/svelte';
+	import HelpButton from './HelpButton.svelte';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import { Label } from '$lib/components/primitives/label';
 
@@ -154,17 +154,7 @@
 	<div class="gap-2 flex items-center">
 		<Label>{label}</Label>
 		{#if item.description}
-			<Dialog.Root>
-				<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
-					<Info size={16} />
-				</Dialog.Trigger>
-				<Dialog.Content class="sm:max-w-md">
-					<Dialog.Header>
-						<Dialog.Title>{label}</Dialog.Title>
-						<Dialog.Description>{item.description}</Dialog.Description>
-					</Dialog.Header>
-				</Dialog.Content>
-			</Dialog.Root>
+			<HelpButton {label} description={item.description} />
 		{/if}
 	</div>
 {/snippet}
@@ -287,7 +277,7 @@
 
 <!-- Dynamic value list outputs are routing sinks (their options feed an input), not displayed. -->
 {#if item.widgetType !== 'dynamicValueList'}
-	<div class="gap-2 flex flex-col">
+	<div role="group" class="group/field gap-2 flex flex-col">
 		{@render fieldHeader()}
 
 		{#if item.widgetType === 'chart'}
@@ -311,24 +301,24 @@
 			<div class="group relative">
 				{#if isObjectValue}
 					<pre
-						class="{boxClass} overflow-wrap-anywhere max-h-96 overflow-auto bg-muted/10 text-foreground">{formattedValue}</pre>
+						class="{boxClass} max-h-96 overflow-auto bg-muted/10 wrap-anywhere text-foreground">{formattedValue}</pre>
 				{:else}
 					<div
-						class="{boxClass} overflow-wrap-anywhere bg-muted/10 wrap-break-word whitespace-pre-wrap text-foreground"
+						class="{boxClass} bg-muted/10 wrap-anywhere wrap-break-word whitespace-pre-wrap text-foreground"
 					>
 						{#if hasValue}{value}{:else}{@render placeholder()}{/if}
 					</div>
 				{/if}
 				{#if hasValue}
-					<Button
-						onclick={copyToClipboard}
+					<div
 						class="right-2 top-2 absolute transition-opacity {copied
 							? 'opacity-100'
-							: 'opacity-0 group-hover:opacity-100'}"
-						size="sm"
+							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'}"
 					>
-						{copied ? 'Copied!' : 'Copy'}
-					</Button>
+						<Button onclick={copyToClipboard} size="sm">
+							{copied ? 'Copied!' : 'Copy'}
+						</Button>
+					</div>
 				{/if}
 			</div>
 		{/if}

package/src/lib/components/preview/TabBar.svelte

@@ -1,44 +1,73 @@
 <script lang="ts">
 	import type { TabConfig } from '@selvajs/schemas';
 	import * as Tabs from '$lib/components/primitives/tabs';
-	import { ScrollArea } from '$lib/components/primitives/scroll-area';
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import Icon from '@iconify/svelte';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	interface Props {
 		tabs: TabConfig[];
+		activeTabId: string;
 		onTabChange: (tabId: string) => void;
 	}
 
-	let { tabs, onTabChange }: Props = $props();
+	let { tabs, activeTabId, onTabChange }: Props = $props();
+
+	const SCROLL_BUTTON_WIDTH = 32;
+
+	let listRef = $state<HTMLElement | null>(null);
+	let canScrollBack = $state(false);
+	let canScrollForward = $state(false);
+
+	function updateOverflow() {
+		if (!listRef) return;
+		const { scrollLeft, scrollWidth, clientWidth } = listRef;
+		canScrollBack = scrollLeft > 1;
+		canScrollForward = scrollLeft + clientWidth < scrollWidth - 1;
+	}
 
-	let viewportRef = $state<HTMLElement | null>(null);
+	$effect(() => {
+		if (!listRef) return;
+		const observer = new ResizeObserver(updateOverflow);
+		observer.observe(listRef);
+		updateOverflow();
+		return () => observer.disconnect();
+	});
+
+	// A tab picked from the collapsed strip may sit outside the visible strip. Not
+	// scrollIntoView: that also scrolls every scrollable ancestor, e.g. the mobile drawer.
+	$effect(() => {
+		if (!listRef) return;
+		const active = listRef.querySelector<HTMLElement>(`[data-value="${CSS.escape(activeTabId)}"]`);
+		if (!active) return;
+		// Keep the tab clear of the scroll buttons, which overlay the strip's edges.
+		const start = active.offsetLeft - SCROLL_BUTTON_WIDTH;
+		const end = active.offsetLeft + active.offsetWidth + SCROLL_BUTTON_WIDTH;
+		if (start < listRef.scrollLeft) listRef.scrollLeft = start;
+		else if (end > listRef.scrollLeft + listRef.clientWidth)
+			listRef.scrollLeft = end - listRef.clientWidth;
+	});
+
+	function scrollByPage(direction: -1 | 1) {
+		listRef?.scrollBy({ left: direction * listRef.clientWidth * 0.7, behavior: 'smooth' });
+	}
 
 	function handleWheel(e: WheelEvent) {
-		if (!viewportRef) return;
+		if (!listRef || (!canScrollBack && !canScrollForward)) return;
 		// Trackpad horizontal swipes already produce deltaX — let those pass through.
 		if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
-		const canScroll = viewportRef.scrollWidth > viewportRef.clientWidth;
-		if (!canScroll) return;
 		e.preventDefault();
-		viewportRef.scrollLeft += e.deltaY;
+		listRef.scrollLeft += e.deltaY;
 	}
 </script>
 
-<ScrollArea
-	bind:viewportRef
-	class="w-full shrink-0 border-b border-border"
-	orientation="horizontal"
-	onwheel={handleWheel}
->
-	<Tabs.List
-		class="px-2 py-2 gap-0 inline-flex h-auto w-max justify-start rounded-none bg-transparent"
-	>
+<div class="tab-bar relative shrink-0 border-b border-border">
+	<Tabs.List bind:ref={listRef} variant="line" onscroll={updateOverflow} onwheel={handleWheel}>
 		{#each tabs as tab (tab.id)}
-			<Tabs.Trigger
-				value={tab.id}
-				onclick={() => onTabChange(tab.id)}
-				class="group/tab gap-1.5 px-3 py-1 text-sm font-medium relative h-auto flex-none shrink-0 rounded-none border-0 transition-colors not-last:border-r not-last:border-border hover:bg-accent data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=inactive]:text-muted-foreground dark:data-[state=active]:border-transparent dark:data-[state=active]:bg-transparent"
-			>
+			<Tabs.Trigger value={tab.id} onclick={() => onTabChange(tab.id)} variant="line">
 				{#if tab.icon}
 					{#if tab.icon.includes(':')}
 						<Icon icon={tab.icon} class="h-4 w-4" />
@@ -50,4 +79,59 @@
 			</Tabs.Trigger>
 		{/each}
 	</Tabs.List>
-</ScrollArea>
+
+	{#if canScrollBack}
+		<button
+			type="button"
+			class="scroll-button back"
+			aria-label={t.scrollTabsBack}
+			onclick={() => scrollByPage(-1)}
+		>
+			<ChevronLeft class="h-4 w-4" />
+		</button>
+	{/if}
+	{#if canScrollForward}
+		<button
+			type="button"
+			class="scroll-button forward"
+			aria-label={t.scrollTabsForward}
+			onclick={() => scrollByPage(1)}
+		>
+			<ChevronRight class="h-4 w-4" />
+		</button>
+	{/if}
+</div>
+
+<style>
+	.tab-bar :global([data-slot='tabs-list']) {
+		position: relative;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+	.tab-bar :global([data-slot='tabs-list']::-webkit-scrollbar) {
+		display: none;
+	}
+
+	.scroll-button {
+		position: absolute;
+		top: 0;
+		bottom: 1px;
+		display: flex;
+		align-items: center;
+		color: var(--muted-foreground);
+		cursor: pointer;
+	}
+	.scroll-button:hover {
+		color: var(--foreground);
+	}
+	.scroll-button.back {
+		left: 0;
+		padding: 0 1.25rem 0 0.375rem;
+		background: linear-gradient(to right, var(--card) 55%, transparent);
+	}
+	.scroll-button.forward {
+		right: 0;
+		padding: 0 0.375rem 0 1.25rem;
+		background: linear-gradient(to left, var(--card) 55%, transparent);
+	}
+</style>