@rosettadash/svelte 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rosettadash/svelte",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "RosettaDash Svelte 5 runtime — same import paths as @rosettadash/web-components. Storybook: github.com/KevinEverywhere/rosettadash (port 6010).",
   "author": "Kevin Ready <kevin@planetkevin.com>",
   "type": "module",
@@ -141,6 +141,12 @@
       "import": "./src/layout/modal/ModalLayout.svelte",
       "default": "./src/layout/modal/ModalLayout.svelte"
     },
+    "./layout/scroll-region": {
+      "types": "./src/layout/scroll-region/types.d.ts",
+      "svelte": "./src/layout/scroll-region/ScrollRegion.svelte",
+      "import": "./src/layout/scroll-region/ScrollRegion.svelte",
+      "default": "./src/layout/scroll-region/ScrollRegion.svelte"
+    },
     "./layout/tabs": {
       "types": "./src/layout/tabs/types.d.ts",
       "svelte": "./src/layout/tabs/TabsLayout.svelte",
@@ -388,7 +394,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@rosettadash/web-components": "0.1.1",
+    "@rosettadash/web-components": "0.1.3",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {

package/src/index.d.ts

@@ -19,6 +19,7 @@ export type { CollapsibleProps } from './layout/collapsible/types';
 export type { FlexLayoutProps } from './layout/flex/types';
 export type { GridLayoutProps } from './layout/grid/types';
 export type { ModalLayoutProps } from './layout/modal/types';
+export type { ScrollRegionProps } from './layout/scroll-region/types';
 export type { TabsLayoutProps } from './layout/tabs/types';
 export type { TimerProps } from './logic/timer/types';
 export type { BarChartProps } from './visual/chart/bar/types';

package/src/layout/scroll-region/ScrollRegion.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ScrollRegionProps } from './types';
+
+	type Props = ScrollRegionProps & { children?: Snippet };
+
+	let {
+		className,
+		title,
+		maxHeight,
+		overlayScrollbar,
+		children,
+	}: Props = $props();
+	const rootClass = $derived(['rd-scroll-region', className].filter(Boolean).join(' '));
+</script>
+
+<section
+	class={[rootClass, overlayScrollbar === false ? '' : 'rd-scroll-region--overlay-scrollbar'].filter(Boolean).join(' ')}
+	data-testid="rd-scroll-region"
+	aria-label={title ?? 'Scrollable content'}
+	style={maxHeight ? `max-height: ${maxHeight}` : undefined}
+>
+	{#if title}<header class="rd-scroll-region__header">{title}</header>{/if}
+	<div class="rd-scroll-region__body">{@render children?.()}</div>
+</section>

package/src/layout/scroll-region/index.d.ts

@@ -0,0 +1,2 @@
+export type { ScrollRegionProps } from './types';
+/** Component entry is `ScrollRegion.svelte` (see package exports). */

package/src/layout/scroll-region/index.js

@@ -0,0 +1,3 @@
+export {};
+/** Component entry is `ScrollRegion.svelte` (see package exports). */
+//# sourceMappingURL=index.js.map

package/src/layout/scroll-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/svelte/src/layout/scroll-region/index.ts"],"names":[],"mappings":";AACA,sEAAsE"}

package/src/layout/scroll-region/types.d.ts

@@ -0,0 +1,6 @@
+export interface ScrollRegionProps {
+    title?: string;
+    maxHeight?: string;
+    overlayScrollbar?: boolean;
+    className?: string;
+}

package/src/layout/scroll-region/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/src/layout/scroll-region/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../packages/svelte/src/layout/scroll-region/types.ts"],"names":[],"mappings":""}

package/src/visual/chart/bar/BarChart.svelte

@@ -1,22 +1,84 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { BarChartProps } from './types';
+	import type { BarChartBar, BarChartProps } from './types';
 
 	type Props = BarChartProps & { children?: Snippet };
 
+	const FALLBACK_BARS: BarChartBar[] = [
+		{ label: 'A', value: 40 },
+		{ label: 'B', value: 65 },
+		{ label: 'C', value: 55 },
+		{ label: 'D', value: 80 },
+		{ label: 'E', value: 48 },
+	];
+
 	let {
 		className,
 		title,
+		bars,
+		yAxisLabel,
+		valueFormat,
 		children,
 	}: Props = $props();
-	const barHeights = [40, 65, 55, 80, 48];
+
+	function defaultFormat(value: number): string {
+		if (value >= 1_000_000) {
+			return `${(value / 1_000_000).toFixed(1)}M`;
+		}
+		if (value >= 1_000) {
+			return `${(value / 1_000).toFixed(0)}K`;
+		}
+		return String(Math.round(value));
+	}
+
 	const rootClass = $derived(['rd-chart-bar', className].filter(Boolean).join(' '));
+	const series = $derived(bars?.length ? bars : FALLBACK_BARS);
+	const format = $derived(valueFormat ?? defaultFormat);
+	const maxValue = $derived(Math.max(...series.map((bar) => bar.value), 1));
+	const ticks = $derived.by(() => {
+		const max = maxValue;
+		if (max <= 0) {
+			return [0];
+		}
+		const count = 4;
+		const step = max / (count - 1);
+		return Array.from({ length: count }, (_, index) => step * index);
+	});
 </script>
 
-<section class={rootClass} data-testid="rd-chart-bar">
+<section class={rootClass} data-testid="rd-chart-bar" role="img" aria-label={title ?? 'Bar chart'}>
 	<header class="rd-chart-bar__header"><span>{title ?? 'Bar chart'}</span></header>
-	<div class="rd-chart-bar__bars" aria-hidden="true">
-		{#each barHeights as h, i (i)}<div class="rd-chart-bar__bar-wrap"><div class="rd-chart-bar__bar" style:height="{h}%"></div></div>{/each}
+	<div class="rd-chart-bar__body">
+		<div class="rd-chart-bar__y-axis" aria-hidden="true">
+			<div class="rd-chart-bar__y-ticks">
+				{#each [...ticks].reverse() as tick (tick)}
+					<span class="rd-chart-bar__y-tick">{format(tick)}</span>
+				{/each}
+			</div>
+			{#if yAxisLabel}<span class="rd-chart-bar__y-label">{yAxisLabel}</span>{/if}
+		</div>
+		<div class="rd-chart-bar__plot">
+			<div class="rd-chart-bar__grid-lines" aria-hidden="true">
+				{#each ticks as tick (tick)}
+					<span class="rd-chart-bar__grid-line" style:bottom={`${(tick / maxValue) * 100}%`}></span>
+				{/each}
+			</div>
+			<div class="rd-chart-bar__bars">
+				{#each series as bar (bar.label)}
+					<div class="rd-chart-bar__bar-group">
+						<div class="rd-chart-bar__bar-wrap">
+							<div
+								class="rd-chart-bar__bar"
+								style:height={`${(bar.value / maxValue) * 100}%`}
+								title={`${bar.label}: ${format(bar.value)}`}
+							></div>
+						</div>
+						<span class="rd-chart-bar__x-label">{bar.label}</span>
+						<span class="rd-chart-bar__value">{format(bar.value)}</span>
+					</div>
+				{/each}
+			</div>
+		</div>
 	</div>
 	{@render children?.()}
 </section>

package/src/visual/chart/bar/index.d.ts

@@ -1,2 +1,2 @@
-export type { BarChartProps } from './types';
+export type { BarChartBar, BarChartProps } from './types';
 /** Component entry is `BarChart.svelte` (see package exports). */

package/src/visual/chart/bar/types.d.ts

@@ -1,4 +1,11 @@
+export interface BarChartBar {
+    label: string;
+    value: number;
+}
 export interface BarChartProps {
     title?: string;
+    bars?: BarChartBar[];
+    yAxisLabel?: string;
+    valueFormat?: (value: number) => string;
     className?: string;
 }

package/src/visual/chart/line/LineChart.svelte

@@ -1,21 +1,107 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { LineChartProps } from './types';
+	import type { LineChartPoint, LineChartProps } from './types';
 
 	type Props = LineChartProps & { children?: Snippet };
 
+	const FALLBACK_POINTS: LineChartPoint[] = [
+		{ x: '2019', y: 42 },
+		{ x: '2020', y: 18 },
+		{ x: '2021', y: 12 },
+		{ x: '2022', y: 19 },
+		{ x: '2023', y: 31 },
+		{ x: '2024', y: 36 },
+	];
+
+	const CHART_WIDTH = 320;
+	const CHART_HEIGHT = 200;
+	const PAD_LEFT = 58;
+	const PAD_RIGHT = 12;
+	const PAD_TOP = 16;
+	const PAD_BOTTOM = 36;
+	const Y_TICK_X = PAD_LEFT - 6;
+
 	let {
 		className,
 		title,
+		points,
+		xAxisLabel,
+		yAxisLabel,
+		valueFormat,
 		children,
 	}: Props = $props();
+
+	function defaultFormat(value: number): string {
+		if (value >= 1_000_000) {
+			return `${(value / 1_000_000).toFixed(1)}M`;
+		}
+		if (value >= 1_000) {
+			return `${(value / 1_000).toFixed(0)}K`;
+		}
+		return String(Math.round(value));
+	}
+
 	const rootClass = $derived(['rd-chart-line', className].filter(Boolean).join(' '));
+	const series = $derived(points?.length ? points : FALLBACK_POINTS);
+	const format = $derived(valueFormat ?? defaultFormat);
+	const values = $derived(series.map((point) => point.y));
+	const minY = $derived(Math.min(...values) >= 0 ? 0 : Math.min(...values));
+	const maxY = $derived(Math.max(...values));
+	const rangeY = $derived(maxY - minY || 1);
+	const ticks = $derived.by(() => {
+		if (minY === maxY) {
+			return [minY];
+		}
+		const count = 4;
+		const step = (maxY - minY) / (count - 1);
+		return Array.from({ length: count }, (_, index) => minY + step * index);
+	});
+	const plotH = CHART_HEIGHT - PAD_TOP - PAD_BOTTOM;
+	const coords = $derived.by(() => {
+		const plotW = CHART_WIDTH - PAD_LEFT - PAD_RIGHT;
+		const lastIndex = Math.max(series.length - 1, 1);
+		return series.map((point, index) => {
+			const x = PAD_LEFT + (index / lastIndex) * plotW;
+			const y = PAD_TOP + plotH - ((point.y - minY) / rangeY) * plotH;
+			return { x, y, label: String(point.x) };
+		});
+	});
+	const polyline = $derived(coords.map(({ x, y }) => `${x},${y}`).join(' '));
 </script>
 
-<section class={rootClass} data-testid="rd-chart-line">
+<section class={rootClass} data-testid="rd-chart-line" role="img" aria-label={title ?? 'Line chart'}>
 	<header class="rd-chart-line__header"><span>{title ?? 'Line chart'}</span></header>
-	<svg viewBox="0 0 240 96" class="rd-chart-line__svg" aria-hidden="true">
-		<polyline class="rd-chart-line__line" points="0,80 40,60 80,65 120,40 160,45 200,20 240,30" />
-	</svg>
+	<div class="rd-chart-line__body">
+		<svg viewBox="0 0 {CHART_WIDTH} {CHART_HEIGHT}" class="rd-chart-line__svg" aria-hidden="true">
+			{#each ticks as tick (tick)}
+				{@const y = PAD_TOP + plotH - ((tick - minY) / rangeY) * plotH}
+				<g class="rd-chart-line__tick">
+					<line x1={PAD_LEFT} y1={y} x2={CHART_WIDTH - PAD_RIGHT} y2={y} class="rd-chart-line__grid" />
+					<text x={Y_TICK_X} y={y + 4} class="rd-chart-line__tick-label">{format(tick)}</text>
+				</g>
+			{/each}
+			<polyline class="rd-chart-line__line" points={polyline} />
+			{#each coords as point (point.label)}
+				<g class="rd-chart-line__point">
+					<circle cx={point.x} cy={point.y} r="3.5" class="rd-chart-line__dot" />
+					<text x={point.x} y={CHART_HEIGHT - 10} class="rd-chart-line__x-label">{point.label}</text>
+				</g>
+			{/each}
+			{#if yAxisLabel}
+				<text
+					x="12"
+					y={PAD_TOP + plotH / 2}
+					class="rd-chart-line__axis-label rd-chart-line__axis-label--y">{yAxisLabel}</text
+				>
+			{/if}
+			{#if xAxisLabel}
+				<text
+					x={PAD_LEFT + (CHART_WIDTH - PAD_LEFT - PAD_RIGHT) / 2}
+					y={CHART_HEIGHT - 2}
+					class="rd-chart-line__axis-label rd-chart-line__axis-label--x">{xAxisLabel}</text
+				>
+			{/if}
+		</svg>
+	</div>
 	{@render children?.()}
 </section>

package/src/visual/chart/line/index.d.ts

@@ -1,2 +1,2 @@
-export type { LineChartProps } from './types';
+export type { LineChartPoint, LineChartProps } from './types';
 /** Component entry is `LineChart.svelte` (see package exports). */

package/src/visual/chart/line/types.d.ts

@@ -1,4 +1,12 @@
+export interface LineChartPoint {
+    x: string | number;
+    y: number;
+}
 export interface LineChartProps {
     title?: string;
+    points?: LineChartPoint[];
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    valueFormat?: (value: number) => string;
     className?: string;
 }

package/src/visual/input/date-range/DateRangeFilter.svelte

@@ -10,17 +10,34 @@
 		startDate,
 		endDate,
 		presetLabel,
+		granularity,
+		onChange,
 		children,
 	}: Props = $props();
 	const rootClass = $derived(['rd-input-date-range', className].filter(Boolean).join(' '));
+	const inputType = $derived(granularity === 'month' ? 'month' : 'date');
 </script>
 
 <section class={rootClass} data-testid="rd-input-date-range">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
 	<div class="rd-date-range__controls">
-		<input type="date" class="rd-input" value={startDate ?? ''} />
+		<input
+			type={inputType}
+			class="rd-input"
+			value={startDate ?? ''}
+			aria-label={`${label ?? 'Date range'} start`}
+			onchange={(event) =>
+				onChange?.({ startDate: event.currentTarget.value, endDate: endDate ?? '' })}
+		/>
 		<span class="rd-date-range__sep">to</span>
-		<input type="date" class="rd-input" value={endDate ?? ''} />
+		<input
+			type={inputType}
+			class="rd-input"
+			value={endDate ?? ''}
+			aria-label={`${label ?? 'Date range'} end`}
+			onchange={(event) =>
+				onChange?.({ startDate: startDate ?? '', endDate: event.currentTarget.value })}
+		/>
 	</div>
 	{#if presetLabel}<span class="rd-date-range__preset">{presetLabel}</span>{/if}
 	{@render children?.()}

package/src/visual/input/date-range/types.d.ts

@@ -3,6 +3,7 @@ export interface DateRangeFilterProps {
     startDate?: string;
     endDate?: string;
     presetLabel?: string;
+    granularity?: 'date' | 'month';
     onChange?: (range: {
         startDate: string;
         endDate: string;

package/src/visual/input/select/SelectInput.svelte

@@ -9,17 +9,27 @@
 		label,
 		placeholder,
 		options,
-		value,
+		value = $bindable(''),
+		onChange,
 		children,
 	}: Props = $props();
 	const rootClass = $derived(['rd-input-select', className].filter(Boolean).join(' '));
+
+	function handleChange(event: Event) {
+		const target = event.currentTarget;
+		if (!(target instanceof HTMLSelectElement)) {
+			return;
+		}
+		value = target.value;
+		onChange?.(target.value);
+	}
 </script>
 
 <section class={rootClass} data-testid="rd-input-select">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
-	<select class="rd-select" value={value ?? ''}>
-		<option value="">{placeholder ?? 'Select…'}</option>
-		{#each options ?? [] as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+	<select class="rd-select" onchange={handleChange}>
+		<option value="" selected={!(value ?? '')}>{placeholder ?? 'Select…'}</option>
+		{#each options ?? [] as o (o.value)}<option value={o.value} selected={o.value === (value ?? '')}>{o.label}</option>{/each}
 	</select>
 	{@render children?.()}
 </section>

package/src/visual/news/language-select/NewsLanguageSelect.svelte

@@ -17,9 +17,9 @@
 
 <section class={rootClass} data-testid="rd-news-language-select">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
-	<select class="rd-select" value={value ?? ''}>
-		<option value="">{placeholder ?? 'Select…'}</option>
-		{#each options ?? [] as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+	<select class="rd-select">
+		<option value="" selected={!(value ?? '')}>{placeholder ?? 'Select…'}</option>
+		{#each options ?? [] as o (o.value)}<option value={o.value} selected={o.value === (value ?? '')}>{o.label}</option>{/each}
 	</select>
 	{@render children?.()}
 </section>

package/src/visual/news/region-select/NewsRegionSelect.svelte

@@ -17,9 +17,9 @@
 
 <section class={rootClass} data-testid="rd-news-region-select">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
-	<select class="rd-select" value={value ?? ''}>
-		<option value="">{placeholder ?? 'Select…'}</option>
-		{#each options ?? [] as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+	<select class="rd-select">
+		<option value="" selected={!(value ?? '')}>{placeholder ?? 'Select…'}</option>
+		{#each options ?? [] as o (o.value)}<option value={o.value} selected={o.value === (value ?? '')}>{o.label}</option>{/each}
 	</select>
 	{@render children?.()}
 </section>

package/src/visual/news/type-select/NewsTypeSelect.svelte

@@ -17,9 +17,9 @@
 
 <section class={rootClass} data-testid="rd-news-type-select">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
-	<select class="rd-select" value={value ?? ''}>
-		<option value="">{placeholder ?? 'Select…'}</option>
-		{#each options ?? [] as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+	<select class="rd-select">
+		<option value="" selected={!(value ?? '')}>{placeholder ?? 'Select…'}</option>
+		{#each options ?? [] as o (o.value)}<option value={o.value} selected={o.value === (value ?? '')}>{o.label}</option>{/each}
 	</select>
 	{@render children?.()}
 </section>

package/src/visual/table/DataTable.svelte

@@ -8,20 +8,33 @@
 		className,
 		title,
 		rows,
+		selectedRowId,
+		onRowSelect,
 		children,
 	}: Props = $props();
 	const rootClass = $derived(['rd-table', className].filter(Boolean).join(' '));
+	const selectable = $derived(Boolean(onRowSelect));
 </script>
 
 <section class={rootClass} data-testid="rd-table">
 	<header class="rd-table__header"><span>{title ?? 'Data table'}</span></header>
-	<table class="rd-table__table">
-		<thead><tr><th>Name</th><th>Status</th><th>Amount</th><th>Date</th></tr></thead>
-		<tbody>
-			{#each rows ?? [] as row (row.id)}
-			<tr><td>{row.name}</td><td>{row.status}</td><td>{row.amount}</td><td>{row.date}</td></tr>
-			{/each}
-		</tbody>
-	</table>
+	<div class="rd-table__scroll">
+		<table class="rd-table__table">
+			<thead><tr><th>Name</th><th>Status</th><th>Amount</th><th>Date</th></tr></thead>
+			<tbody>
+				{#each rows ?? [] as row (row.id)}
+				<tr
+					class="rd-table__row"
+					class:rd-table__row--selected={row.id === selectedRowId}
+					class:rd-table__row--interactive={selectable}
+					aria-selected={row.id === selectedRowId ? 'true' : undefined}
+					onclick={selectable ? () => onRowSelect?.(row.id) : undefined}
+				>
+					<td>{row.name}</td><td>{row.status}</td><td>{row.amount}</td><td>{row.date}</td>
+				</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
 	{@render children?.()}
 </section>

package/src/visual/table/types.d.ts

@@ -2,12 +2,14 @@ export interface DataTableRow {
     id: string;
     name?: string;
     status?: string;
-    amount?: number;
+    amount?: string | number;
     date?: string;
     [key: string]: string | number | undefined;
 }
 export interface DataTableProps {
     title?: string;
     rows?: DataTableRow[];
+    selectedRowId?: string;
+    onRowSelect?: (rowId: string) => void;
     className?: string;
 }