@xtyle/svelte 0.5.0

package/dist/Hero.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type HeroAlign = "center" | "start";
+
+	interface Props {
+		align?: HeroAlign;
+		split?: boolean;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { align = "center", split = false, children, ...rest }: Props = $props();
+</script>
+
+<xtyle-hero {...rest} align={align !== "center" ? align : undefined} split={split ? "" : undefined}>
+	{@render children?.()}
+</xtyle-hero>

package/dist/Hero.svelte.d.ts

@@ -0,0 +1,13 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type HeroAlign = "center" | "start";
+interface Props {
+    align?: HeroAlign;
+    split?: boolean;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/Icon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import "./register.js";
+	import type { FullTone, IconName, IconSize, SeriesScheme } from "@xtyle/core";
+
+	interface Props {
+		name: IconName | (string & {});
+		size?: IconSize;
+		tone?: FullTone;
+		/** The series scheme a generated mark's `c3+` color slots draw from. */
+		colors?: SeriesScheme;
+		label?: string;
+		spin?: boolean;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { name, size = "md", tone, colors, label, spin = false, ...rest }: Props = $props();
+</script>
+
+<xtyle-icon {...rest} {name} {size} {tone} {colors} {label} spin={spin ? "" : undefined}></xtyle-icon>

package/dist/Icon.svelte.d.ts

@@ -0,0 +1,16 @@
+import "./register.js";
+import type { FullTone, IconName, IconSize, SeriesScheme } from "@xtyle/core";
+interface Props {
+    name: IconName | (string & {});
+    size?: IconSize;
+    tone?: FullTone;
+    /** The series scheme a generated mark's `c3+` color slots draw from. */
+    colors?: SeriesScheme;
+    label?: string;
+    spin?: boolean;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/Image.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import "./register.js";
+
+	type ImageFit = "cover" | "contain";
+	type ImageRadius = "none" | "sm" | "md" | "lg";
+	type ImageLoading = "lazy" | "eager";
+
+	interface Props {
+		src?: string;
+		alt?: string;
+		ratio?: string;
+		fit?: ImageFit;
+		radius?: ImageRadius;
+		loading?: ImageLoading;
+		lightbox?: boolean;
+		caption?: string;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		src,
+		alt = "",
+		ratio,
+		fit = "cover",
+		radius = "md",
+		loading = "lazy",
+		lightbox = false,
+		caption,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-image
+	{...rest}
+	{src}
+	{alt}
+	{ratio}
+	{fit}
+	{radius}
+	{loading}
+	{caption}
+	lightbox={lightbox ? "" : undefined}
+></xtyle-image>

package/dist/Image.svelte.d.ts

@@ -0,0 +1,19 @@
+import "./register.js";
+type ImageFit = "cover" | "contain";
+type ImageRadius = "none" | "sm" | "md" | "lg";
+type ImageLoading = "lazy" | "eager";
+interface Props {
+    src?: string;
+    alt?: string;
+    ratio?: string;
+    fit?: ImageFit;
+    radius?: ImageRadius;
+    loading?: ImageLoading;
+    lightbox?: boolean;
+    caption?: string;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/Kbd.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone as KbdTone } from "@xtyle/core";
+
+	type KbdSize = "sm" | "md" | "lg";
+
+	interface Props {
+		size?: KbdSize;
+		tone?: KbdTone;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { size = "md", tone, children, ...rest }: Props = $props();
+</script>
+
+<xtyle-kbd {...rest} {size} {tone}>
+	{@render children?.()}
+</xtyle-kbd>

package/dist/Kbd.svelte.d.ts

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

package/dist/Link.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type LinkVariant = "default" | "muted" | "quiet";
+
+	interface Props {
+		variant?: LinkVariant;
+		href?: string;
+		target?: string;
+		rel?: string;
+		externalIcon?: boolean;
+		ariaLabel?: string;
+		onclick?: (event: MouseEvent) => void;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { variant = "default", href, target, rel, externalIcon, ariaLabel, onclick, children, ...rest }: Props = $props();
+</script>
+
+<xtyle-link
+	{...rest}
+	{variant}
+	{href}
+	{target}
+	{rel}
+	external-icon={externalIcon === undefined ? undefined : String(externalIcon)}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	{onclick}
+>
+	{@render children?.()}
+</xtyle-link>

package/dist/Link.svelte.d.ts

@@ -0,0 +1,18 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type LinkVariant = "default" | "muted" | "quiet";
+interface Props {
+    variant?: LinkVariant;
+    href?: string;
+    target?: string;
+    rel?: string;
+    externalIcon?: boolean;
+    ariaLabel?: string;
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/Menu.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import "./register.js";
+	import type { MenuItem } from "@xtyle/core/elements";
+
+	interface Props {
+		items?: MenuItem[];
+		label?: string;
+		open?: boolean;
+		onselect?: (event: Event) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { items = [], label, open = false, onselect, ...rest }: Props = $props();
+
+	let el: (HTMLElement & { items?: MenuItem[]; open?: boolean }) | undefined = $state();
+
+	$effect(() => {
+		if (el) el.items = items;
+	});
+
+	$effect(() => {
+		const target = el;
+		if (!target) return;
+		// Defer to a microtask so an `open`-by-default menu doesn't fire the element's popover
+		// logic synchronously inside Svelte's mount-effect flush (which corrupts Svelte's
+		// reconciliation). Post-mount toggles settle a microtask later — imperceptible.
+		queueMicrotask(() => {
+			target.open = open;
+		});
+	});
+</script>
+
+<xtyle-menu {...rest} bind:this={el} {label} {onselect}></xtyle-menu>

package/dist/Menu.svelte.d.ts

@@ -0,0 +1,13 @@
+import "./register.js";
+import type { MenuItem } from "@xtyle/core/elements";
+interface Props {
+    items?: MenuItem[];
+    label?: string;
+    open?: boolean;
+    onselect?: (event: Event) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/NumberInput.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Size } from "@xtyle/core";
+
+	interface Props {
+		value?: number | string;
+		min?: number;
+		max?: number;
+		/** A positive number, or `"any"` for unstepped free-form entry (no snapping, no precision cap). */
+		step?: number | "any";
+		altStep?: number;
+		altDefault?: boolean;
+		modifier?: "shift" | "alt" | "ctrl" | "meta";
+		disabled?: boolean;
+		size?: Size;
+		label?: string;
+		labelledby?: string;
+		name?: string;
+		placeholder?: string;
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		value = $bindable(""),
+		min,
+		max,
+		step,
+		altStep,
+		altDefault = false,
+		modifier,
+		disabled = false,
+		size = "md",
+		label,
+		labelledby,
+		name,
+		placeholder,
+		oninput,
+		onchange,
+		...rest
+	}: Props = $props();
+
+	function sync(event: Event) {
+		const host = event.currentTarget as HTMLElement & { value: string };
+		value = host.value;
+	}
+	function handleInput(event: Event) {
+		sync(event);
+		oninput?.(event);
+	}
+	function handleChange(event: Event) {
+		sync(event);
+		onchange?.(event);
+	}
+</script>
+
+<xtyle-number-input
+	{...rest}
+	value={value === "" ? undefined : String(value)}
+	min={min}
+	max={max}
+	step={step}
+	alt-step={altStep}
+	alt-default={altDefault || undefined}
+	{modifier}
+	disabled={disabled || undefined}
+	{size}
+	{label}
+	labelledby={labelledby || undefined}
+	{name}
+	{placeholder}
+	oninput={handleInput}
+	onchange={handleChange}
+></xtyle-number-input>

package/dist/NumberInput.svelte.d.ts

@@ -0,0 +1,25 @@
+import "./register.js";
+import type { Size } from "@xtyle/core";
+interface Props {
+    value?: number | string;
+    min?: number;
+    max?: number;
+    /** A positive number, or `"any"` for unstepped free-form entry (no snapping, no precision cap). */
+    step?: number | "any";
+    altStep?: number;
+    altDefault?: boolean;
+    modifier?: "shift" | "alt" | "ctrl" | "meta";
+    disabled?: boolean;
+    size?: Size;
+    label?: string;
+    labelledby?: string;
+    name?: string;
+    placeholder?: string;
+    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 NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/Pagination.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import "./register.js";
+	import type { FullTone, Size } from "@xtyle/core";
+
+	type PageChange = CustomEvent<{ page: number }>;
+
+	interface Props {
+		page?: number;
+		total?: number;
+		siblings?: number;
+		boundaries?: number;
+		href?: string;
+		tone?: FullTone;
+		size?: Size;
+		label?: string;
+		/** Fired when a page or control is activated in button mode (no `href`). */
+		onpagechange?: (event: PageChange) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		page = 1,
+		total = 1,
+		siblings = 1,
+		boundaries = 1,
+		href,
+		tone = "accent",
+		size = "md",
+		label = "Pagination",
+		onpagechange,
+		...rest
+	}: Props = $props();
+
+	let host: HTMLElement | undefined = $state();
+
+	$effect(() => {
+		if (!host || !onpagechange) return;
+		const handler = (event: Event) => onpagechange(event as PageChange);
+		host.addEventListener("page-change", handler);
+		return () => host?.removeEventListener("page-change", handler);
+	});
+</script>
+
+<xtyle-pagination
+	{...rest}
+	bind:this={host}
+	page={page}
+	total={total}
+	siblings={siblings}
+	boundaries={boundaries}
+	href={href}
+	tone={tone}
+	size={size}
+	label={label}
+></xtyle-pagination>

package/dist/Pagination.svelte.d.ts

@@ -0,0 +1,22 @@
+import "./register.js";
+import type { FullTone, Size } from "@xtyle/core";
+type PageChange = CustomEvent<{
+    page: number;
+}>;
+interface Props {
+    page?: number;
+    total?: number;
+    siblings?: number;
+    boundaries?: number;
+    href?: string;
+    tone?: FullTone;
+    size?: Size;
+    label?: string;
+    /** Fired when a page or control is activated in button mode (no `href`). */
+    onpagechange?: (event: PageChange) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/Panel.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type PanelVariant = "default" | "collapsible";
+
+	interface Props {
+		title?: string;
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		variant?: PanelVariant;
+		open?: boolean;
+		scroll?: boolean;
+		onToggle?: (open: boolean) => void;
+		actions?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title` is taken; `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		title,
+		level = 2,
+		variant = "default",
+		open = $bindable(false),
+		scroll = false,
+		onToggle,
+		actions,
+		footer,
+		children,
+		...rest
+	}: Props = $props();
+
+	function handleToggle(event: Event) {
+		open = (event.currentTarget as HTMLElement).hasAttribute("open");
+		onToggle?.(open);
+	}
+</script>
+
+<xtyle-panel
+	{...rest}
+	{title}
+	level={level}
+	variant={variant}
+	open={open || undefined}
+	scroll={scroll || undefined}
+	ontoggle={handleToggle}
+>
+	{#if actions}<span slot="actions">{@render actions()}</span>{/if}
+	{@render children?.()}
+	{#if footer}<span slot="footer">{@render footer()}</span>{/if}
+</xtyle-panel>

package/dist/Panel.svelte.d.ts

@@ -0,0 +1,19 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type PanelVariant = "default" | "collapsible";
+interface Props {
+    title?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    variant?: PanelVariant;
+    open?: boolean;
+    scroll?: boolean;
+    onToggle?: (open: boolean) => void;
+    actions?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title` is taken; `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Panel: import("svelte").Component<Props, {}, "open">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/Parallax.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		minHeight?: string;
+		amplitude?: number;
+		mode?: "scroll" | "cursor";
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { minHeight, amplitude, mode, children, ...rest }: Props = $props();
+</script>
+
+<xtyle-parallax {...rest} min-height={minHeight} amplitude={amplitude} mode={mode}>
+	{@render children?.()}
+</xtyle-parallax>

package/dist/Parallax.svelte.d.ts

@@ -0,0 +1,13 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+interface Props {
+    minHeight?: string;
+    amplitude?: number;
+    mode?: "scroll" | "cursor";
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Parallax: import("svelte").Component<Props, {}, "">;
+type Parallax = ReturnType<typeof Parallax>;
+export default Parallax;

package/dist/Pie.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import "./register.js";
+	import type { PieDatum, PieScheme, PieVariant } from "@xtyle/core";
+
+	interface Props {
+		data?: PieDatum[];
+		scheme?: PieScheme;
+		reverse?: boolean;
+		variant?: PieVariant;
+		showValues?: boolean;
+		legend?: boolean;
+		size?: number;
+		label?: string;
+		/** Any other attribute (`title`, `id`, `style`, `data-*`, `aria-*`, …) passes through. */
+		[key: string]: unknown;
+	}
+
+	let {
+		data = [],
+		scheme = "skittles",
+		reverse = false,
+		variant = "pie",
+		showValues = false,
+		legend = true,
+		size = 200,
+		label,
+		...rest
+	}: Props = $props();
+
+	let host: (HTMLElement & { data: PieDatum[]; scheme: PieScheme }) | undefined = $state();
+
+	$effect(() => {
+		if (!host) return;
+		host.data = data;
+		host.scheme = scheme;
+	});
+</script>
+
+<xtyle-pie
+	bind:this={host}
+	{...rest}
+	{variant}
+	reverse={reverse || undefined}
+	show-values={showValues || undefined}
+	legend={legend ? undefined : "false"}
+	{size}
+	{label}
+></xtyle-pie>

package/dist/Pie.svelte.d.ts

@@ -0,0 +1,17 @@
+import "./register.js";
+import type { PieDatum, PieScheme, PieVariant } from "@xtyle/core";
+interface Props {
+    data?: PieDatum[];
+    scheme?: PieScheme;
+    reverse?: boolean;
+    variant?: PieVariant;
+    showValues?: boolean;
+    legend?: boolean;
+    size?: number;
+    label?: string;
+    /** Any other attribute (`title`, `id`, `style`, `data-*`, `aria-*`, …) passes through. */
+    [key: string]: unknown;
+}
+declare const Pie: import("svelte").Component<Props, {}, "">;
+type Pie = ReturnType<typeof Pie>;
+export default Pie;