@marianmeres/stuic 3.167.0 → 3.168.0

package/dist/components/Stepper/index.css

@@ -0,0 +1,302 @@
+/* ============================================================================
+   STEPPER COMPONENT TOKENS
+   Override globally: :root { --stuic-stepper-indicator-size: 2.5rem; }
+   Override locally:  <Stepper style="--stuic-stepper-connector-thickness: 4px;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	/* Layout */
+	--stuic-stepper-gap: 0.75rem;                  /* indicator↔label + step↔connector */
+	--stuic-stepper-gap-vertical: 1.75rem;         /* vertical: distance between steps */
+	--stuic-stepper-connector-min-length: 1.5rem;  /* horizontal: shortest connector */
+
+	/* Indicator bubble */
+	--stuic-stepper-indicator-size: 2rem;
+	--stuic-stepper-indicator-border-width: 2px;
+	--stuic-stepper-indicator-font-size: var(--text-sm);
+	--stuic-stepper-indicator-font-weight: var(--font-weight-medium);
+	--stuic-stepper-indicator-bg: transparent;
+	--stuic-stepper-indicator-text: var(--stuic-color-muted-foreground);
+	--stuic-stepper-indicator-border: var(--stuic-color-border);
+	--stuic-stepper-indicator-bg-current: transparent;
+	--stuic-stepper-indicator-text-current: var(--stuic-color-primary);
+	--stuic-stepper-indicator-border-current: var(--stuic-color-primary);
+	--stuic-stepper-indicator-bg-completed: var(--stuic-color-primary);
+	--stuic-stepper-indicator-text-completed: var(--stuic-color-primary-foreground);
+	--stuic-stepper-indicator-border-completed: var(--stuic-color-primary);
+	--stuic-stepper-indicator-bg-error: var(--stuic-color-destructive);
+	--stuic-stepper-indicator-text-error: var(--stuic-color-destructive-foreground);
+	--stuic-stepper-indicator-border-error: var(--stuic-color-destructive);
+
+	/* Label */
+	--stuic-stepper-label-font-size: var(--text-base);
+	--stuic-stepper-label-font-weight: var(--font-weight-medium);
+	--stuic-stepper-label-text: var(--stuic-color-muted-foreground);
+	--stuic-stepper-label-text-current: var(--stuic-color-foreground);
+	--stuic-stepper-label-text-completed: var(--stuic-color-foreground);
+	--stuic-stepper-label-text-error: var(--stuic-color-destructive);
+
+	/* Description */
+	--stuic-stepper-description-font-size: var(--text-sm);
+	--stuic-stepper-description-text: var(--stuic-color-muted-foreground);
+
+	/* Connector line */
+	--stuic-stepper-connector-thickness: 2px;
+	--stuic-stepper-connector-bg: var(--stuic-color-border);
+	--stuic-stepper-connector-bg-completed: var(--stuic-color-primary);
+
+	/* Focus ring */
+	--stuic-stepper-ring-width: 3px;
+	--stuic-stepper-ring-color: var(--stuic-color-ring);
+
+	/* Disabled */
+	--stuic-stepper-opacity-disabled: 0.5;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE
+	   ============================================================================ */
+
+	.stuic-stepper[data-disabled] {
+		opacity: var(--stuic-stepper-opacity-disabled);
+	}
+
+	.stuic-stepper-list {
+		display: flex;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.stuic-stepper-item[data-disabled] {
+		opacity: var(--stuic-stepper-opacity-disabled);
+	}
+
+	/* ============================================================================
+	   TRIGGER (the step content — <button> when interactive, <div> otherwise)
+	   ============================================================================ */
+
+	.stuic-stepper-trigger {
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-stepper-gap);
+		text-align: start;
+		min-width: 0;
+	}
+
+	button.stuic-stepper-trigger {
+		font: inherit;
+		color: inherit;
+		background: none;
+		border: 0;
+		padding: 0;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	button.stuic-stepper-trigger:disabled {
+		cursor: default;
+	}
+
+	button.stuic-stepper-trigger:focus-visible {
+		outline: var(--stuic-stepper-ring-width) solid var(--stuic-stepper-ring-color);
+		outline-offset: 2px;
+		border-radius: var(--stuic-stepper-radius, var(--stuic-radius));
+	}
+
+	/* clickable affordance: label picks up the emphasized color */
+	button.stuic-stepper-trigger:not(:disabled):hover .stuic-stepper-label {
+		color: var(--stuic-stepper-label-text-current);
+	}
+
+	/* ============================================================================
+	   INDICATOR
+	   ============================================================================ */
+
+	.stuic-stepper-indicator {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: var(--stuic-stepper-indicator-size);
+		height: var(--stuic-stepper-indicator-size);
+		border-radius: var(--stuic-stepper-indicator-radius, calc(infinity * 1px));
+		border: var(--stuic-stepper-indicator-border-width) solid
+			var(--stuic-stepper-indicator-border);
+		background: var(--stuic-stepper-indicator-bg);
+		color: var(--stuic-stepper-indicator-text);
+		font-size: var(--stuic-stepper-indicator-font-size);
+		font-weight: var(--stuic-stepper-indicator-font-weight);
+		transition:
+			background var(--stuic-stepper-transition, var(--stuic-transition)),
+			border-color var(--stuic-stepper-transition, var(--stuic-transition)),
+			color var(--stuic-stepper-transition, var(--stuic-transition));
+	}
+
+	.stuic-stepper-indicator svg {
+		display: block;
+		width: 1.25em;
+		height: 1.25em;
+	}
+
+	.stuic-stepper-item[data-state="current"] .stuic-stepper-indicator {
+		background: var(--stuic-stepper-indicator-bg-current);
+		border-color: var(--stuic-stepper-indicator-border-current);
+		color: var(--stuic-stepper-indicator-text-current);
+	}
+
+	.stuic-stepper-item[data-state="completed"] .stuic-stepper-indicator {
+		background: var(--stuic-stepper-indicator-bg-completed);
+		border-color: var(--stuic-stepper-indicator-border-completed);
+		color: var(--stuic-stepper-indicator-text-completed);
+	}
+
+	/* error wins over any state */
+	.stuic-stepper-item[data-error] .stuic-stepper-indicator {
+		background: var(--stuic-stepper-indicator-bg-error);
+		border-color: var(--stuic-stepper-indicator-border-error);
+		color: var(--stuic-stepper-indicator-text-error);
+	}
+
+	/* ============================================================================
+	   TEXT (label + description)
+	   ============================================================================ */
+
+	.stuic-stepper-text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+
+	.stuic-stepper-label {
+		font-size: var(--stuic-stepper-label-font-size);
+		font-weight: var(--stuic-stepper-label-font-weight);
+		color: var(--stuic-stepper-label-text);
+		transition: color var(--stuic-stepper-transition, var(--stuic-transition));
+	}
+
+	.stuic-stepper-item[data-state="current"] .stuic-stepper-label {
+		color: var(--stuic-stepper-label-text-current);
+	}
+
+	.stuic-stepper-item[data-state="completed"] .stuic-stepper-label {
+		color: var(--stuic-stepper-label-text-completed);
+	}
+
+	.stuic-stepper-item[data-error] .stuic-stepper-label {
+		color: var(--stuic-stepper-label-text-error);
+	}
+
+	.stuic-stepper-description {
+		font-size: var(--stuic-stepper-description-font-size);
+		color: var(--stuic-stepper-description-text);
+	}
+
+	/* ============================================================================
+	   CONNECTOR
+	   ============================================================================ */
+
+	.stuic-stepper-connector {
+		background: var(--stuic-stepper-connector-bg);
+		transition: background var(--stuic-stepper-transition, var(--stuic-transition));
+	}
+
+	.stuic-stepper-connector[data-state="completed"] {
+		background: var(--stuic-stepper-connector-bg-completed);
+	}
+
+	/* ============================================================================
+	   HORIZONTAL (labels at the end — default)
+	   ============================================================================ */
+
+	.stuic-stepper[data-orientation="horizontal"] .stuic-stepper-list {
+		flex-direction: row;
+		align-items: center;
+		gap: var(--stuic-stepper-gap);
+	}
+
+	.stuic-stepper[data-orientation="horizontal"] .stuic-stepper-item {
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-stepper-gap);
+		flex: 1;
+		min-width: 0;
+	}
+
+	/* the last step carries no connector — don't stretch it */
+	.stuic-stepper[data-orientation="horizontal"] .stuic-stepper-item:last-child {
+		flex: none;
+	}
+
+	.stuic-stepper[data-orientation="horizontal"] .stuic-stepper-connector {
+		flex: 1;
+		min-width: var(--stuic-stepper-connector-min-length);
+		height: var(--stuic-stepper-connector-thickness);
+	}
+
+	/* ============================================================================
+	   HORIZONTAL, LABELS BELOW (classic checkout header)
+	   ============================================================================ */
+
+	.stuic-stepper[data-label-position="below"] .stuic-stepper-item {
+		align-items: flex-start;
+	}
+
+	.stuic-stepper[data-label-position="below"] .stuic-stepper-trigger {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+
+	.stuic-stepper[data-label-position="below"] .stuic-stepper-text {
+		align-items: center;
+	}
+
+	/* keep the connector on the indicator's horizontal axis */
+	.stuic-stepper[data-label-position="below"] .stuic-stepper-connector {
+		margin-top: calc(
+			(var(--stuic-stepper-indicator-size) - var(--stuic-stepper-connector-thickness)) / 2
+		);
+	}
+
+	/* ============================================================================
+	   VERTICAL
+	   ============================================================================ */
+
+	.stuic-stepper[data-orientation="vertical"] .stuic-stepper-list {
+		flex-direction: column;
+	}
+
+	.stuic-stepper[data-orientation="vertical"] .stuic-stepper-item {
+		position: relative;
+		padding-bottom: var(--stuic-stepper-gap-vertical);
+	}
+
+	.stuic-stepper[data-orientation="vertical"] .stuic-stepper-item:last-child {
+		padding-bottom: 0;
+	}
+
+	/* top-align so a multi-line description grows downward, not around the bubble */
+	.stuic-stepper[data-orientation="vertical"] .stuic-stepper-trigger {
+		align-items: flex-start;
+	}
+
+	/* ...while a single-line label still centers against the bubble */
+	.stuic-stepper[data-orientation="vertical"] .stuic-stepper-text {
+		min-height: var(--stuic-stepper-indicator-size);
+		justify-content: center;
+	}
+
+	.stuic-stepper[data-orientation="vertical"] .stuic-stepper-connector {
+		position: absolute;
+		inset-inline-start: calc(
+			(var(--stuic-stepper-indicator-size) - var(--stuic-stepper-connector-thickness)) / 2
+		);
+		top: calc(var(--stuic-stepper-indicator-size) + 0.25rem);
+		bottom: 0.25rem;
+		width: var(--stuic-stepper-connector-thickness);
+	}
+}

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Stepper, type Props as StepperProps, type StepperStep, type StepperStepState, type StepperOrientation, type StepperLabelPosition, type StepperClickable, } from "./Stepper.svelte";
+export { createStepperT, STEPPER_MESSAGES_EN, type StepperMessageKey, type StepperMessages, } from "./i18n.js";
+export { STEPPER_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/Stepper/index.js

@@ -0,0 +1,3 @@
+export { default as Stepper, } from "./Stepper.svelte";
+export { createStepperT, STEPPER_MESSAGES_EN, } from "./i18n.js";
+export { STEPPER_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/TrendChart/README.md

@@ -0,0 +1,123 @@
+# TrendChart
+
+A thin Svelte wrapper around [`@marianmeres/trend-chart`](https://github.com/marianmeres/trend-chart)
+(framework-agnostic, zero-dependency single-series SVG trend chart): reactive `data`
+and `options` props, lifecycle management (create/update/destroy), a `sparkline`
+preset, and automatic STUIC theming (dark mode included) by mapping the chart's
+`--trend-chart-*` CSS hooks to STUIC tokens.
+
+## Installation
+
+This component ships as an **optional subpath export** — the
+`@marianmeres/trend-chart` peer dependency is NOT bundled with stuic and is only
+required if you actually use this component:
+
+```bash
+npm install @marianmeres/trend-chart
+```
+
+```svelte
+<script>
+	import { TrendChart } from "@marianmeres/stuic/trend-chart";
+</script>
+```
+
+It is deliberately not exported from the main `@marianmeres/stuic` barrel, so
+consumers who don't use it never pull the dependency into their module graph.
+
+## Usage
+
+```svelte
+<script>
+	import { TrendChart } from "@marianmeres/stuic/trend-chart";
+
+	let data = $state([3, 5, 4, 8, 6, 9, 7]);
+</script>
+
+<!-- Full chart (axes, gridlines, pan/zoom) — themed via stuic tokens -->
+<TrendChart {data} />
+
+<!-- Sparkline (no axes/grid/interaction, compact height) -->
+<TrendChart {data} sparkline />
+
+<!-- Any @marianmeres/trend-chart option passes through -->
+<TrendChart
+	{data}
+	options={{
+		smooth: true,
+		endDot: true,
+		formatX: (x) => new Date(x).toLocaleDateString(),
+		onPointClick: (e) => console.log(e.point),
+	}}
+/>
+
+<!-- Imperative API via the bindable chart instance -->
+<TrendChart {data} bind:chart />
+<button onclick={() => chart?.resetDomain()}>Reset zoom</button>
+```
+
+Updating `data` (reassignment or deep `$state` mutation) patches the chart in
+place — pan/zoom state is preserved. Changing `options` merges them into the
+running instance.
+
+### With `Stat` (KPI card)
+
+The first-class pairing — a sparkline in a `Stat` footer:
+
+```svelte
+<script>
+	import { Stat } from "@marianmeres/stuic";
+	import { TrendChart } from "@marianmeres/stuic/trend-chart";
+</script>
+
+<Stat label="Requests" value="1.2M" delta="+8.4%" trend="up" hint="last 7 days">
+	{#snippet renderFooter()}
+		<TrendChart data={[42, 51, 48, 63, 58, 71, 84]} sparkline />
+	{/snippet}
+</Stat>
+```
+
+## Props
+
+| Prop        | Type                | Default | Description                                                                                                                                                      |
+| ----------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data`      | `TrendData`         | —       | The series: `DataPoint[]` or plain `number[]` shorthand (index becomes x). Reactive.                                                                             |
+| `options`   | `TrendChartOptions` | —       | [`@marianmeres/trend-chart` options](https://github.com/marianmeres/trend-chart/blob/master/API.md), passed through. Reactive. Merged OVER the sparkline preset. |
+| `sparkline` | `boolean`           | `false` | Preset: no axes/grid/pan/zoom/points + compact default height                                                                                                    |
+| `chart`     | `TrendChart`        | —       | Bindable underlying instance (`setDomainX`, `resetDomain`, ...). `undefined` during SSR/before mount.                                                            |
+| `unstyled`  | `boolean`           | `false` | Skip all default styling — including the default height; size the container yourself                                                                             |
+| `class`     | `string`            | -       | Additional CSS classes for the container                                                                                                                         |
+| `el`        | `HTMLElement`       | -       | Bindable element reference (the chart's container)                                                                                                               |
+
+## CSS Variables
+
+| Variable                               | Default                               | Description                       |
+| -------------------------------------- | ------------------------------------- | --------------------------------- |
+| `--stuic-trend-chart-height`           | `8rem`                                | Container height                  |
+| `--stuic-trend-chart-height-sparkline` | `2.5rem`                              | Container height with `sparkline` |
+| `--stuic-trend-chart-line`             | `var(--stuic-color-primary)`          | Line stroke                       |
+| `--stuic-trend-chart-fill`             | `var(--stuic-color-primary)`          | Area fill base color              |
+| `--stuic-trend-chart-grid`             | `var(--stuic-color-border)`           | Gridline stroke                   |
+| `--stuic-trend-chart-label`            | `var(--stuic-color-muted-foreground)` | Axis label color                  |
+| `--stuic-trend-chart-font`             | `var(--font-sans)`                    | Label font family                 |
+| `--stuic-trend-chart-end-dot-ring`     | `var(--stuic-color-background)`       | End-dot/hover-dot ring color      |
+| `--stuic-trend-chart-annotation`       | `var(--stuic-color-warning)`          | Annotation rule + label color     |
+| `--stuic-trend-chart-annotation-halo`  | `var(--stuic-color-background)`       | Halo behind annotation labels     |
+
+These map onto the chart's own `--trend-chart-*` hooks (active because the DOM
+renderer's `cssVars` option defaults to `true`). Any `lineColor`/`fill`/... option
+you pass still acts as the fallback inside the `var()` wrapper.
+
+## Notes
+
+- **Sizing**: the chart measures its container (via `ResizeObserver`), so the
+  container needs a real size. The default styles provide the height
+  (`--stuic-trend-chart-height`); with `unstyled` you must size it yourself, or
+  pass explicit `width`/`height` in `options`.
+- **SSR**: the chart is created in an effect, so the server renders an empty
+  container. For static server-rendered charts use the library's
+  `renderToString` directly.
+- Single-series by design (the underlying library's scope): one line/area — no
+  bars, pies, or multi-series.
+- The chart instance is created once per container; `data`/`options` changes
+  patch it in place, so pan/zoom state survives updates.

package/dist/components/TrendChart/TrendChart.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type {
+		TrendChart as TrendChartInstance,
+		TrendChartOptions,
+		TrendData,
+	} from "@marianmeres/trend-chart";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+		/**
+		 * The series: `DataPoint[]` or plain `number[]` shorthand (index becomes x).
+		 * Reactive — the chart updates in place (keeping pan/zoom state) when it changes.
+		 */
+		data: TrendData;
+		/**
+		 * `@marianmeres/trend-chart` options, passed through. Reactive. When `sparkline`
+		 * is set, these are merged OVER the sparkline preset (so any preset key can be
+		 * overridden back).
+		 */
+		options?: TrendChartOptions;
+		/**
+		 * Preset for the axis-less, non-interactive mini chart look:
+		 * no axes/grid/pan/zoom/points. Also switches the default height.
+		 */
+		sparkline?: boolean;
+		/**
+		 * Bindable underlying `TrendChart` instance for the imperative API
+		 * (`setDomainX`, `resetDomain`, `getDomainX`, ...). `undefined` during SSR
+		 * and before mount.
+		 */
+		chart?: TrendChartInstance;
+		/** Skip all default styling (incl. the default height — size it yourself) */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Bindable element reference (the chart's container) */
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { TrendChart as TrendChartClass } from "@marianmeres/trend-chart";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import "./index.css";
+
+	const SPARKLINE_PRESET: Partial<TrendChartOptions> = {
+		xAxis: false,
+		yAxis: false,
+		grid: false,
+		pan: false,
+		zoom: false,
+		points: "none",
+	};
+
+	let {
+		data,
+		options,
+		sparkline = false,
+		chart = $bindable(),
+		unstyled = false,
+		class: classProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-trend-chart", classProp));
+
+	let _options: TrendChartOptions = $derived({
+		...(sparkline ? SPARKLINE_PRESET : {}),
+		...options,
+	});
+
+	// Hand the library plain (non-proxied) data; reading the snapshot also makes
+	// deep mutations of a $state-backed series reactive, not just reassignments.
+	let _data = $derived($state.snapshot(data) as TrendData);
+
+	// The internal wiring must not run through `el`/`chart`: those are write-out
+	// mirrors a parent (or test harness) may overwrite as plain props at any time.
+	let _container = $state<HTMLElement>();
+	let _chart = $state<TrendChartInstance>();
+
+	// Create once per container element; option/data changes below patch the
+	// existing instance in place (preserving pan/zoom state) instead of rebuilding.
+	$effect(() => {
+		if (!_container) return;
+		const instance = untrack(() => new TrendChartClass(_container!, _data, _options));
+		_chart = instance;
+		el = _container;
+		chart = instance;
+		return () => {
+			instance.destroy();
+			_chart = undefined;
+			chart = undefined;
+		};
+	});
+
+	$effect(() => {
+		const d = _data;
+		untrack(() => _chart)?.update(d);
+	});
+
+	$effect(() => {
+		const o = _options;
+		untrack(() => _chart)?.setOptions(o);
+	});
+</script>
+
+<div
+	bind:this={_container}
+	class={_class}
+	data-sparkline={!unstyled && sparkline ? "" : undefined}
+	{...rest}
+></div>

package/dist/components/TrendChart/TrendChart.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { TrendChart as TrendChartInstance, TrendChartOptions, TrendData } from "@marianmeres/trend-chart";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * The series: `DataPoint[]` or plain `number[]` shorthand (index becomes x).
+     * Reactive — the chart updates in place (keeping pan/zoom state) when it changes.
+     */
+    data: TrendData;
+    /**
+     * `@marianmeres/trend-chart` options, passed through. Reactive. When `sparkline`
+     * is set, these are merged OVER the sparkline preset (so any preset key can be
+     * overridden back).
+     */
+    options?: TrendChartOptions;
+    /**
+     * Preset for the axis-less, non-interactive mini chart look:
+     * no axes/grid/pan/zoom/points. Also switches the default height.
+     */
+    sparkline?: boolean;
+    /**
+     * Bindable underlying `TrendChart` instance for the imperative API
+     * (`setDomainX`, `resetDomain`, `getDomainX`, ...). `undefined` during SSR
+     * and before mount.
+     */
+    chart?: TrendChartInstance;
+    /** Skip all default styling (incl. the default height — size it yourself) */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Bindable element reference (the chart's container) */
+    el?: HTMLElement;
+}
+import "./index.css";
+declare const TrendChart: import("svelte").Component<Props, {}, "el" | "chart">;
+type TrendChart = ReturnType<typeof TrendChart>;
+export default TrendChart;

package/dist/components/TrendChart/index.css

@@ -0,0 +1,51 @@
+/******************************************************************************
+  TrendChart
+
+  NOTE — intentional deviation from the usual STUIC CSS convention.
+  Every other component's `index.css` is `@import`-ed into the central
+  `src/lib/index.css`. This component is NOT: it is an OPTIONAL subpath export
+  (`@marianmeres/stuic/trend-chart`) kept off the main barrel so its
+  `@marianmeres/trend-chart` peer dependency stays opt-in. Centralizing its
+  CSS would ship these styles to every consumer, defeating that. Instead
+  `TrendChart.svelte` imports THIS file locally; the package's `sideEffects`
+  glob (all css files) keeps the import for real users.
+
+  Theming: the underlying chart renders its colors wrapped in
+  `var(--trend-chart-*, fallback)` (its `cssVars` option, on by default in the
+  DOM renderer). Mapping those vars to STUIC theme tokens here is what makes
+  the chart follow the active theme — dark mode included — with zero options.
+******************************************************************************/
+
+@layer components {
+	.stuic-trend-chart {
+		/* The chart measures its container — it must have a real size. */
+		width: 100%;
+		height: var(--stuic-trend-chart-height, 8rem);
+
+		/* Map the chart's own CSS hooks to STUIC theme tokens. */
+		--trend-chart-line: var(--stuic-trend-chart-line, var(--stuic-color-primary));
+		--trend-chart-fill: var(--stuic-trend-chart-fill, var(--stuic-color-primary));
+		--trend-chart-grid: var(--stuic-trend-chart-grid, var(--stuic-color-border));
+		--trend-chart-label: var(
+			--stuic-trend-chart-label,
+			var(--stuic-color-muted-foreground)
+		);
+		--trend-chart-font: var(--stuic-trend-chart-font, var(--font-sans));
+		--trend-chart-end-dot-ring: var(
+			--stuic-trend-chart-end-dot-ring,
+			var(--stuic-color-background)
+		);
+		--trend-chart-annotation: var(
+			--stuic-trend-chart-annotation,
+			var(--stuic-color-warning)
+		);
+		--trend-chart-annotation-halo: var(
+			--stuic-trend-chart-annotation-halo,
+			var(--stuic-color-background)
+		);
+	}
+
+	.stuic-trend-chart[data-sparkline] {
+		height: var(--stuic-trend-chart-height-sparkline, 2.5rem);
+	}
+}

package/dist/components/TrendChart/index.d.ts

@@ -0,0 +1 @@
+export { default as TrendChart, type Props as TrendChartProps, } from "./TrendChart.svelte";

package/dist/components/TrendChart/index.js

@@ -0,0 +1 @@
+export { default as TrendChart, } from "./TrendChart.svelte";

package/dist/icons/index.d.ts

@@ -22,10 +22,13 @@ export { iconLucideArrowLeft as iconArrowLeft } from "@marianmeres/icons-fns/luc
 export { iconLucideArrowRight as iconArrowRight } from "@marianmeres/icons-fns/lucide/iconLucideArrowRight.js";
 export { iconLucideArrowUp as iconArrowUp } from "@marianmeres/icons-fns/lucide/iconLucideArrowUp.js";
 export { iconLucideArrowUpToLine as iconArrowUpToLine } from "@marianmeres/icons-fns/lucide/iconLucideArrowUpToLine.js";
+export { iconLucideCopy as iconCopy } from "@marianmeres/icons-fns/lucide/iconLucideCopy.js";
 export { iconLucideDownload as iconDownload } from "@marianmeres/icons-fns/lucide/iconLucideDownload.js";
 export { iconLucideMinus as iconMinus } from "@marianmeres/icons-fns/lucide/iconLucideMinus.js";
 export { iconLucidePlus as iconPlus } from "@marianmeres/icons-fns/lucide/iconLucidePlus.js";
 export { iconLucideTrash2 as iconTrash } from "@marianmeres/icons-fns/lucide/iconLucideTrash2.js";
+export { iconLucideTrendingDown as iconTrendingDown } from "@marianmeres/icons-fns/lucide/iconLucideTrendingDown.js";
+export { iconLucideTrendingUp as iconTrendingUp } from "@marianmeres/icons-fns/lucide/iconLucideTrendingUp.js";
 export { iconLucideZoomIn as iconZoomIn } from "@marianmeres/icons-fns/lucide/iconLucideZoomIn.js";
 export { iconLucideZoomOut as iconZoomOut } from "@marianmeres/icons-fns/lucide/iconLucideZoomOut.js";
 export { iconLucideCheck as iconCheck } from "@marianmeres/icons-fns/lucide/iconLucideCheck.js";
@@ -40,6 +43,7 @@ export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres
 export { iconLucideGrip as iconGrip } from "@marianmeres/icons-fns/lucide/iconLucideGrip.js";
 export { iconLucideGripHorizontal as iconGripHorizontal } from "@marianmeres/icons-fns/lucide/iconLucideGripHorizontal.js";
 export { iconLucideGripVertical as iconGripVertical } from "@marianmeres/icons-fns/lucide/iconLucideGripVertical.js";
+export { iconLucideInbox as iconInbox } from "@marianmeres/icons-fns/lucide/iconLucideInbox.js";
 export { iconLucideLanguages as iconLanguages } from "@marianmeres/icons-fns/lucide/iconLucideLanguages.js";
 export { iconLucideList as iconList } from "@marianmeres/icons-fns/lucide/iconLucideList.js";
 export { iconLucideLogOut as iconLogOut } from "@marianmeres/icons-fns/lucide/iconLucideLogOut.js";