@xtyle/svelte 0.5.0

package/dist/Slider.svelte.d.ts

@@ -0,0 +1,24 @@
+import "./register.js";
+import type { Size, FullTone as Tone } from "@xtyle/core";
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    size?: Size;
+    tone?: Tone;
+    label?: string;
+    labelledby?: string;
+    name?: string;
+    showValue?: boolean;
+    hideLabel?: boolean;
+    format?: ((value: number) => string) | null;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/Sparkline.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import "./register.js";
+	import type { SparklineVariant, SparklineTone, TimeSample } from "@xtyle/core";
+
+	interface Props {
+		values?: number[];
+		/** Time-windowed mode: timestamped points (`at` is epoch ms or a date string) placed on a real
+		 * time axis instead of even spacing. Pass alongside `window` or `domain`. */
+		points?: TimeSample[];
+		/** The sliding window width in ms (default 5m), ending at now; ignored when `domain` is set. */
+		window?: number;
+		/** An explicit `[start, end]` x-axis span (epoch ms or date strings), instead of a sliding window. */
+		domain?: [number | string, number | string];
+		/** Render the line as a sample-and-hold step (for on/off or discrete series). */
+		step?: boolean;
+		variant?: SparklineVariant;
+		tone?: SparklineTone;
+		showEnd?: boolean;
+		min?: number;
+		max?: number;
+		label?: string;
+		/** Any other attribute (`title`, `id`, `style`, `data-*`, `aria-*`, …) passes through. */
+		[key: string]: unknown;
+	}
+
+	let {
+		values = [],
+		points,
+		window: windowMs,
+		domain,
+		step = false,
+		variant = "line",
+		tone = "accent",
+		showEnd = true,
+		min,
+		max,
+		label,
+		...rest
+	}: Props = $props();
+
+	let host: (HTMLElement & { values: number[]; points: unknown[] }) | undefined = $state();
+
+	$effect(() => {
+		if (!host) return;
+		host.values = values;
+		host.points = points ?? [];
+	});
+</script>
+
+<xtyle-sparkline
+	bind:this={host}
+	{...rest}
+	{variant}
+	{tone}
+	show-end={showEnd ? undefined : "false"}
+	step={step || undefined}
+	window={windowMs ?? undefined}
+	domain={domain ? JSON.stringify(domain) : undefined}
+	min={min ?? undefined}
+	max={max ?? undefined}
+	{label}
+></xtyle-sparkline>

package/dist/Sparkline.svelte.d.ts

@@ -0,0 +1,25 @@
+import "./register.js";
+import type { SparklineVariant, SparklineTone, TimeSample } from "@xtyle/core";
+interface Props {
+    values?: number[];
+    /** Time-windowed mode: timestamped points (`at` is epoch ms or a date string) placed on a real
+     * time axis instead of even spacing. Pass alongside `window` or `domain`. */
+    points?: TimeSample[];
+    /** The sliding window width in ms (default 5m), ending at now; ignored when `domain` is set. */
+    window?: number;
+    /** An explicit `[start, end]` x-axis span (epoch ms or date strings), instead of a sliding window. */
+    domain?: [number | string, number | string];
+    /** Render the line as a sample-and-hold step (for on/off or discrete series). */
+    step?: boolean;
+    variant?: SparklineVariant;
+    tone?: SparklineTone;
+    showEnd?: boolean;
+    min?: number;
+    max?: number;
+    label?: string;
+    /** Any other attribute (`title`, `id`, `style`, `data-*`, `aria-*`, …) passes through. */
+    [key: string]: unknown;
+}
+declare const Sparkline: import("svelte").Component<Props, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;

package/dist/Spinner.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Size, FullTone as Tone } from "@xtyle/core";
+
+	interface Props {
+		tone?: Tone;
+		size?: Size;
+		ariaLabel?: string;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { tone = "accent", size = "md", ariaLabel = "Loading", ...rest }: Props = $props();
+</script>
+
+<xtyle-spinner {...rest} {tone} {size} aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}></xtyle-spinner>

package/dist/Spinner.svelte.d.ts

@@ -0,0 +1,12 @@
+import "./register.js";
+import type { Size, FullTone as Tone } from "@xtyle/core";
+interface Props {
+    tone?: Tone;
+    size?: Size;
+    ariaLabel?: string;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/Splitter.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import "./register.js";
+
+	type SplitterOrientation = "vertical" | "horizontal";
+	type SplitterSize = "sm" | "md" | "lg";
+
+	interface SplitterResizeDetail {
+		value: number;
+		orientation: SplitterOrientation;
+	}
+
+	interface Props {
+		orientation?: SplitterOrientation;
+		size?: SplitterSize;
+		line?: boolean;
+		min?: number;
+		max?: number;
+		step?: number;
+		value: number;
+		default?: number;
+		disabled?: boolean;
+		reversed?: boolean;
+		var?: string;
+		for?: string;
+		label?: string;
+		labelledby?: string;
+		onresize?: (event: CustomEvent<SplitterResizeDetail>) => void;
+		onresizeend?: (event: CustomEvent<SplitterResizeDetail>) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		orientation = "vertical",
+		size = "md",
+		line = false,
+		min = 0,
+		max,
+		step = 1,
+		value = $bindable(0),
+		default: defaultValue,
+		disabled = false,
+		reversed = false,
+		var: varName,
+		for: forId,
+		label,
+		labelledby,
+		onresize,
+		onresizeend,
+		...rest
+	}: Props = $props();
+
+	function sync(event: Event) {
+		const target = event.currentTarget as HTMLElement & { value: number };
+		value = target.value;
+	}
+	function handleResize(event: Event) {
+		sync(event);
+		onresize?.(event as CustomEvent<SplitterResizeDetail>);
+	}
+	function handleResizeEnd(event: Event) {
+		sync(event);
+		onresizeend?.(event as CustomEvent<SplitterResizeDetail>);
+	}
+</script>
+
+<xtyle-splitter
+	{...rest}
+	{orientation}
+	{size}
+	line={line || undefined}
+	{min}
+	max={max ?? undefined}
+	{step}
+	{value}
+	default={defaultValue ?? undefined}
+	disabled={disabled || undefined}
+	reversed={reversed || undefined}
+	var={varName}
+	for={forId}
+	{label}
+	{labelledby}
+	onresize={handleResize}
+	onresizeend={handleResizeEnd}
+></xtyle-splitter>

package/dist/Splitter.svelte.d.ts

@@ -0,0 +1,30 @@
+import "./register.js";
+type SplitterOrientation = "vertical" | "horizontal";
+type SplitterSize = "sm" | "md" | "lg";
+interface SplitterResizeDetail {
+    value: number;
+    orientation: SplitterOrientation;
+}
+interface Props {
+    orientation?: SplitterOrientation;
+    size?: SplitterSize;
+    line?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    value: number;
+    default?: number;
+    disabled?: boolean;
+    reversed?: boolean;
+    var?: string;
+    for?: string;
+    label?: string;
+    labelledby?: string;
+    onresize?: (event: CustomEvent<SplitterResizeDetail>) => void;
+    onresizeend?: (event: CustomEvent<SplitterResizeDetail>) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Splitter: import("svelte").Component<Props, {}, "value">;
+type Splitter = ReturnType<typeof Splitter>;
+export default Splitter;

package/dist/Stack.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+	type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+
+	interface Props {
+		gap?: number;
+		align?: StackAlign;
+		justify?: StackJustify;
+		inline?: boolean;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { gap = 4, align, justify, inline = false, children, ...rest }: Props = $props();
+</script>
+
+<xtyle-stack {...rest} {gap} {align} {justify} inline={inline || undefined}>
+	{@render children?.()}
+</xtyle-stack>

package/dist/Stack.svelte.d.ts

@@ -0,0 +1,16 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+interface Props {
+    gap?: number;
+    align?: StackAlign;
+    justify?: StackJustify;
+    inline?: boolean;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

package/dist/Stat.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type StatTrend = "up" | "down" | "flat";
+	type StatSentiment = "positive" | "negative" | "neutral";
+	type StatAlign = "start" | "center";
+	type Size = "sm" | "md" | "lg";
+
+	interface Props {
+		label?: string;
+		delta?: string;
+		trend?: StatTrend;
+		/** The delta's color reading. Omit to derive it from `trend` (up→positive, down→negative, flat→neutral). */
+		sentiment?: StatSentiment;
+		caption?: string;
+		size?: Size;
+		align?: StatAlign;
+		inline?: boolean;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		label,
+		delta,
+		trend = "flat",
+		sentiment,
+		caption,
+		size = "md",
+		align = "start",
+		inline = false,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-stat {...rest} {label} {delta} {trend} {sentiment} {caption} {size} {align} inline={inline || undefined}>
+	{@render children?.()}
+</xtyle-stat>

package/dist/Stat.svelte.d.ts

@@ -0,0 +1,23 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type StatTrend = "up" | "down" | "flat";
+type StatSentiment = "positive" | "negative" | "neutral";
+type StatAlign = "start" | "center";
+type Size = "sm" | "md" | "lg";
+interface Props {
+    label?: string;
+    delta?: string;
+    trend?: StatTrend;
+    /** The delta's color reading. Omit to derive it from `trend` (up→positive, down→negative, flat→neutral). */
+    sentiment?: StatSentiment;
+    caption?: string;
+    size?: Size;
+    align?: StatAlign;
+    inline?: boolean;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Stat: import("svelte").Component<Props, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/Statusbar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type OverflowChange = CustomEvent<{ hidden: HTMLElement[]; visible: HTMLElement[] }>;
+
+	interface Props {
+		live?: boolean;
+		label?: string;
+		overflow?: "clip" | "wrap" | "scroll" | "collapse";
+		manualOverflow?: boolean;
+		separated?: boolean;
+		onOverflowChange?: (event: OverflowChange) => void;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		live = false,
+		label,
+		overflow = "clip",
+		manualOverflow = false,
+		separated = false,
+		onOverflowChange,
+		children,
+		...rest
+	}: Props = $props();
+
+	let host: HTMLElement | undefined = $state();
+
+	$effect(() => {
+		if (!host || !onOverflowChange) return;
+		const handler = (event: Event) => onOverflowChange(event as OverflowChange);
+		host.addEventListener("overflow-change", handler);
+		return () => host?.removeEventListener("overflow-change", handler);
+	});
+</script>
+
+<xtyle-statusbar
+	{...rest}
+	bind:this={host}
+	live={live || undefined}
+	label={label}
+	overflow={overflow}
+	manual-overflow={manualOverflow || undefined}
+	separated={separated || undefined}
+>
+	{@render children?.()}
+</xtyle-statusbar>

package/dist/Statusbar.svelte.d.ts

@@ -0,0 +1,20 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type OverflowChange = CustomEvent<{
+    hidden: HTMLElement[];
+    visible: HTMLElement[];
+}>;
+interface Props {
+    live?: boolean;
+    label?: string;
+    overflow?: "clip" | "wrap" | "scroll" | "collapse";
+    manualOverflow?: boolean;
+    separated?: boolean;
+    onOverflowChange?: (event: OverflowChange) => void;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Statusbar: import("svelte").Component<Props, {}, "">;
+type Statusbar = ReturnType<typeof Statusbar>;
+export default Statusbar;

package/dist/Swatch.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import "./register.js";
+
+	type SwatchSize = "sm" | "md" | "lg";
+
+	interface SwatchSelectDetail {
+		color: string | null;
+		label: string | null;
+		value: string | null;
+	}
+
+	interface Props {
+		color: string;
+		label?: string;
+		value?: string;
+		size?: SwatchSize;
+		interactive?: boolean;
+		selected?: boolean;
+		details?: boolean;
+		onselect?: (event: CustomEvent<SwatchSelectDetail>) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		color,
+		label,
+		value,
+		size = "md",
+		interactive = false,
+		selected = false,
+		details = false,
+		onselect,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-swatch
+	{...rest}
+	{color}
+	{label}
+	{value}
+	{size}
+	interactive={interactive || undefined}
+	selected={selected || undefined}
+	details={details || undefined}
+	onselect={onselect as EventListener | undefined}
+></xtyle-swatch>

package/dist/Swatch.svelte.d.ts

@@ -0,0 +1,22 @@
+import "./register.js";
+type SwatchSize = "sm" | "md" | "lg";
+interface SwatchSelectDetail {
+    color: string | null;
+    label: string | null;
+    value: string | null;
+}
+interface Props {
+    color: string;
+    label?: string;
+    value?: string;
+    size?: SwatchSize;
+    interactive?: boolean;
+    selected?: boolean;
+    details?: boolean;
+    onselect?: (event: CustomEvent<SwatchSelectDetail>) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Swatch: import("svelte").Component<Props, {}, "">;
+type Swatch = ReturnType<typeof Swatch>;
+export default Swatch;

package/dist/Switch.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Size, FullTone as Tone } from "@xtyle/core";
+
+	interface Props {
+		checked?: boolean;
+		disabled?: boolean;
+		size?: Size;
+		tone?: Tone;
+		shape?: "pill" | "square";
+		orientation?: "horizontal" | "vertical";
+		reverse?: boolean;
+		labelSide?: "start" | "end";
+		label?: string;
+		labelledby?: string;
+		onLabel?: string;
+		offLabel?: string;
+		name?: string;
+		value?: string;
+		onchange?: (event: Event) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		checked = $bindable(false),
+		disabled = false,
+		size = "md",
+		tone = "accent",
+		shape = "pill",
+		orientation = "horizontal",
+		reverse = false,
+		labelSide = "start",
+		label,
+		labelledby,
+		onLabel,
+		offLabel,
+		name,
+		value,
+		onchange,
+		...rest
+	}: Props = $props();
+
+	function handleChange(event: Event) {
+		const host = event.currentTarget as HTMLElement & { checked: boolean };
+		const inner = host.querySelector('[role="switch"]');
+		checked = inner ? inner.getAttribute("aria-checked") === "true" : host.checked;
+		onchange?.(event);
+	}
+</script>
+
+<xtyle-switch
+	{...rest}
+	checked={checked || undefined}
+	disabled={disabled || undefined}
+	{size}
+	{tone}
+	shape={shape !== "pill" ? shape : undefined}
+	orientation={orientation !== "horizontal" ? orientation : undefined}
+	reverse={reverse || undefined}
+	label-side={labelSide !== "start" ? labelSide : undefined}
+	{label}
+	labelledby={labelledby || undefined}
+	on-label={onLabel}
+	off-label={offLabel}
+	{name}
+	{value}
+	onchange={handleChange}
+></xtyle-switch>

package/dist/Switch.svelte.d.ts

@@ -0,0 +1,24 @@
+import "./register.js";
+import type { Size, FullTone as Tone } from "@xtyle/core";
+interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: Size;
+    tone?: Tone;
+    shape?: "pill" | "square";
+    orientation?: "horizontal" | "vertical";
+    reverse?: boolean;
+    labelSide?: "start" | "end";
+    label?: string;
+    labelledby?: string;
+    onLabel?: string;
+    offLabel?: string;
+    name?: string;
+    value?: string;
+    onchange?: (event: Event) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/Table.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type TableVariant = "default" | "striped" | "bordered";
+	type TableSize = "normal" | "compact";
+
+	interface Props {
+		variant?: TableVariant;
+		size?: TableSize;
+		hover?: boolean;
+		sticky?: boolean;
+		ariaLabel?: string;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		variant = "default",
+		size = "normal",
+		hover = false,
+		sticky = false,
+		ariaLabel,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-table
+	{...rest}
+	{variant}
+	{size}
+	hover={hover || undefined}
+	sticky={sticky || undefined}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+>
+	{@render children?.()}
+</xtyle-table>

package/dist/Table.svelte.d.ts

@@ -0,0 +1,17 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type TableVariant = "default" | "striped" | "bordered";
+type TableSize = "normal" | "compact";
+interface Props {
+    variant?: TableVariant;
+    size?: TableSize;
+    hover?: boolean;
+    sticky?: boolean;
+    ariaLabel?: string;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;