@xtyle/svelte 0.5.0

package/dist/Button.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { ButtonVariant, ButtonAlign, Size, FullTone } from "@xtyle/core";
+
+	type ButtonSize = Size | "xs";
+
+	interface Props {
+		variant?: ButtonVariant;
+		tone?: FullTone;
+		size?: ButtonSize;
+		align?: ButtonAlign;
+		type?: "button" | "submit" | "reset";
+		href?: string;
+		disabled?: boolean;
+		loading?: boolean;
+		block?: boolean;
+		iconOnly?: boolean;
+		pressed?: boolean;
+		selected?: boolean;
+		ariaLabel?: string;
+		onclick?: (event: MouseEvent) => void;
+		iconStart?: Snippet;
+		iconEnd?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		variant = "solid",
+		tone = "accent",
+		size = "md",
+		align = "center",
+		type = "button",
+		href,
+		disabled = false,
+		loading = false,
+		block = false,
+		iconOnly = false,
+		pressed,
+		selected,
+		ariaLabel,
+		onclick,
+		iconStart,
+		iconEnd,
+		children,
+		...rest
+	}: Props = $props();
+
+	const blocked = $derived(disabled || loading);
+</script>
+
+<xtyle-button
+	{...rest}
+	{variant}
+	{tone}
+	{size}
+	{align}
+	{type}
+	href={href && !blocked ? href : undefined}
+	disabled={disabled || undefined}
+	loading={loading || undefined}
+	block={block || undefined}
+	icon-only={iconOnly || undefined}
+	pressed={pressed === undefined ? undefined : String(pressed)}
+	selected={selected === undefined ? undefined : String(selected)}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	{onclick}
+>
+	{#if iconStart}<span slot="icon-start">{@render iconStart()}</span>{/if}
+	{@render children?.()}
+	{#if iconEnd}<span slot="icon-end">{@render iconEnd()}</span>{/if}
+</xtyle-button>

package/dist/Button.svelte.d.ts

@@ -0,0 +1,28 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { ButtonVariant, ButtonAlign, Size, FullTone } from "@xtyle/core";
+type ButtonSize = Size | "xs";
+interface Props {
+    variant?: ButtonVariant;
+    tone?: FullTone;
+    size?: ButtonSize;
+    align?: ButtonAlign;
+    type?: "button" | "submit" | "reset";
+    href?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    block?: boolean;
+    iconOnly?: boolean;
+    pressed?: boolean;
+    selected?: boolean;
+    ariaLabel?: string;
+    onclick?: (event: MouseEvent) => void;
+    iconStart?: Snippet;
+    iconEnd?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Card.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone as Tone } from "@xtyle/core";
+
+	interface Props {
+		overlay?: boolean;
+		interactive?: boolean;
+		action?: boolean;
+		compact?: boolean;
+		tone?: Tone;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { overlay = false, interactive = false, action = false, compact = false, tone, header, footer, children, ...rest }: Props = $props();
+</script>
+
+<xtyle-card {...rest} overlay={overlay || undefined} interactive={interactive || undefined} action={action || undefined} compact={compact || undefined} {tone}>
+	{#if header}<span slot="header">{@render header()}</span>{/if}
+	{@render children?.()}
+	{#if footer}<span slot="footer">{@render footer()}</span>{/if}
+</xtyle-card>

package/dist/Card.svelte.d.ts

@@ -0,0 +1,18 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone as Tone } from "@xtyle/core";
+interface Props {
+    overlay?: boolean;
+    interactive?: boolean;
+    action?: boolean;
+    compact?: boolean;
+    tone?: Tone;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/CardLink.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		href?: string;
+		target?: string;
+		rel?: string;
+		interactive?: boolean;
+		overlay?: boolean;
+		compact?: boolean;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		href,
+		target,
+		rel,
+		interactive = true,
+		overlay = false,
+		compact = false,
+		header,
+		footer,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-card-link
+	{...rest}
+	{href}
+	{target}
+	{rel}
+	interactive={interactive ? "true" : "false"}
+	overlay={overlay || undefined}
+	compact={compact || undefined}
+>
+	{#if header}<span slot="header">{@render header()}</span>{/if}
+	{@render children?.()}
+	{#if footer}<span slot="footer">{@render footer()}</span>{/if}
+</xtyle-card-link>

package/dist/CardLink.svelte.d.ts

@@ -0,0 +1,18 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+interface Props {
+    href?: string;
+    target?: string;
+    rel?: string;
+    interactive?: boolean;
+    overlay?: boolean;
+    compact?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const CardLink: import("svelte").Component<Props, {}, "">;
+type CardLink = ReturnType<typeof CardLink>;
+export default CardLink;

package/dist/Carousel.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		label?: string;
+		autoplay?: boolean;
+		interval?: number;
+		loop?: boolean;
+		controls?: boolean;
+		dots?: boolean;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		label,
+		autoplay = false,
+		interval,
+		loop = false,
+		controls = true,
+		dots = true,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-carousel
+	{...rest}
+	{label}
+	{interval}
+	autoplay={autoplay ? "" : undefined}
+	loop={loop ? "" : undefined}
+	controls={controls ? undefined : "false"}
+	dots={dots ? undefined : "false"}
+>
+	{@render children?.()}
+</xtyle-carousel>

package/dist/Carousel.svelte.d.ts

@@ -0,0 +1,16 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+interface Props {
+    label?: string;
+    autoplay?: boolean;
+    interval?: number;
+    loop?: boolean;
+    controls?: boolean;
+    dots?: boolean;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Carousel: import("svelte").Component<Props, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/Checkbox.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size, FullTone as Tone } from "@xtyle/core";
+
+	interface Props {
+		checked?: boolean;
+		indeterminate?: boolean;
+		disabled?: boolean;
+		size?: Size;
+		tone?: Tone;
+		name?: string;
+		value?: string;
+		label?: string;
+		labelledby?: string;
+		onchange?: (event: Event) => void;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		disabled = false,
+		size = "md",
+		tone = "accent",
+		name,
+		value,
+		label,
+		labelledby,
+		onchange,
+		children,
+		...rest
+	}: Props = $props();
+
+	function handleChange(event: Event) {
+		const target = event.target as HTMLElement & { checked: boolean; indeterminate: boolean };
+		checked = target.checked;
+		indeterminate = target.indeterminate;
+		onchange?.(event);
+	}
+</script>
+
+<xtyle-checkbox
+	{...rest}
+	checked={checked || undefined}
+	indeterminate={indeterminate || undefined}
+	disabled={disabled || undefined}
+	{size}
+	{tone}
+	{name}
+	{value}
+	{label}
+	labelledby={labelledby || undefined}
+	onchange={handleChange}
+>
+	{@render children?.()}
+</xtyle-checkbox>

package/dist/Checkbox.svelte.d.ts

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

package/dist/CheckboxGroup.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone as Tone, Size } from "@xtyle/core";
+
+	interface Props {
+		label?: string;
+		labelledby?: string;
+		tone?: Tone;
+		size?: Size;
+		disabled?: boolean;
+		/** Keep the heading checkbox but stop the automatic all/some/none roll-up — you drive its state. */
+		manual?: boolean;
+		ariaLabel?: string;
+		onchange?: (event: Event) => void;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		label,
+		labelledby,
+		tone = "accent",
+		size = "md",
+		disabled = false,
+		manual = false,
+		ariaLabel,
+		onchange,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-checkbox-group
+	{...rest}
+	{label}
+	labelledby={labelledby || undefined}
+	{tone}
+	{size}
+	disabled={disabled || undefined}
+	manual={manual || undefined}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	{onchange}
+>
+	{@render children?.()}
+</xtyle-checkbox-group>

package/dist/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone as Tone, Size } from "@xtyle/core";
+interface Props {
+    label?: string;
+    labelledby?: string;
+    tone?: Tone;
+    size?: Size;
+    disabled?: boolean;
+    /** Keep the heading checkbox but stop the automatic all/some/none roll-up — you drive its state. */
+    manual?: boolean;
+    ariaLabel?: string;
+    onchange?: (event: Event) => void;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;

package/dist/Cluster.svelte

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

package/dist/Cluster.svelte.d.ts

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

package/dist/Code.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		lang?: string;
+		code?: string;
+		preload?: boolean;
+		/** The copy-to-clipboard button; on by default, set `false` to drop it. */
+		copy?: boolean;
+		/** Soft-wrap long lines instead of scrolling them horizontally. */
+		wrap?: boolean;
+		/** Number each line in a counter gutter. */
+		lineNumbers?: boolean;
+		/** Tint chosen lines; a 1-based spec like `2`, `2,4`, or `4-6`. */
+		highlight?: string;
+		/** A caption header above the block, e.g. a filename. */
+		caption?: string;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { lang, code, preload = false, copy = true, wrap = false, lineNumbers = false, highlight, caption, children, ...rest }: Props = $props();
+</script>
+
+<xtyle-code {...rest} {lang} {code} {preload} copy={copy ? undefined : "false"} wrap={wrap || undefined} line-numbers={lineNumbers || undefined} highlight={highlight || undefined} caption={caption || undefined}>
+	{@render children?.()}
+</xtyle-code>

package/dist/Code.svelte.d.ts

@@ -0,0 +1,23 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+interface Props {
+    lang?: string;
+    code?: string;
+    preload?: boolean;
+    /** The copy-to-clipboard button; on by default, set `false` to drop it. */
+    copy?: boolean;
+    /** Soft-wrap long lines instead of scrolling them horizontally. */
+    wrap?: boolean;
+    /** Number each line in a counter gutter. */
+    lineNumbers?: boolean;
+    /** Tint chosen lines; a 1-based spec like `2`, `2,4`, or `4-6`. */
+    highlight?: string;
+    /** A caption header above the block, e.g. a filename. */
+    caption?: string;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Code: import("svelte").Component<Props, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/ColorPicker.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import "./register.js";
+
+	type ColorFormat = "hex" | "rgb" | "hsl" | "oklch" | "lab" | "lch" | "oklab" | "cmyk";
+
+	interface Props {
+		value?: string;
+		format?: ColorFormat;
+		modes?: string;
+		channels?: string;
+		snap?: string;
+		plane?: boolean;
+		trigger?: boolean;
+		swatches?: string;
+		harmony?: string;
+		contrastAgainst?: string;
+		alpha?: boolean;
+		disabled?: boolean;
+		label?: string;
+		labelledby?: string;
+		name?: 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("#5b8cff"),
+		format,
+		modes,
+		channels,
+		snap,
+		plane = false,
+		trigger = false,
+		swatches,
+		harmony,
+		contrastAgainst,
+		alpha = false,
+		disabled = false,
+		label,
+		labelledby,
+		name,
+		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-color-picker
+	{...rest}
+	{value}
+	format={format || undefined}
+	modes={modes || undefined}
+	channels={channels || undefined}
+	snap={snap || undefined}
+	plane={plane || undefined}
+	trigger={trigger || undefined}
+	swatches={swatches || undefined}
+	harmony={harmony || undefined}
+	contrast-against={contrastAgainst || undefined}
+	alpha={alpha || undefined}
+	disabled={disabled || undefined}
+	{label}
+	labelledby={labelledby || undefined}
+	{name}
+	oninput={handleInput}
+	onchange={handleChange}
+></xtyle-color-picker>

package/dist/ColorPicker.svelte.d.ts

@@ -0,0 +1,26 @@
+import "./register.js";
+type ColorFormat = "hex" | "rgb" | "hsl" | "oklch" | "lab" | "lch" | "oklab" | "cmyk";
+interface Props {
+    value?: string;
+    format?: ColorFormat;
+    modes?: string;
+    channels?: string;
+    snap?: string;
+    plane?: boolean;
+    trigger?: boolean;
+    swatches?: string;
+    harmony?: string;
+    contrastAgainst?: string;
+    alpha?: boolean;
+    disabled?: boolean;
+    label?: string;
+    labelledby?: string;
+    name?: 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 ColorPicker: import("svelte").Component<Props, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/Dialog.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size } from "@xtyle/core";
+
+	interface Props {
+		open?: boolean;
+		size?: Size;
+		heading?: string;
+		label?: string;
+		labelledby?: string;
+		closeLabel?: string;
+		noCloseButton?: boolean;
+		onclose?: (event: Event) => void;
+		oncancel?: (event: Event) => void;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		open = $bindable(false),
+		size = "md",
+		heading,
+		label,
+		labelledby,
+		closeLabel,
+		noCloseButton = false,
+		onclose,
+		oncancel,
+		header,
+		footer,
+		children,
+		...rest
+	}: Props = $props();
+
+	function handleClose(event: Event) {
+		open = false;
+		onclose?.(event);
+	}
+</script>
+
+<xtyle-dialog
+	{...rest}
+	open={open || undefined}
+	{size}
+	{heading}
+	label={label || undefined}
+	labelledby={labelledby || undefined}
+	close-label={closeLabel}
+	no-close-button={noCloseButton || undefined}
+	onclose={handleClose}
+	{oncancel}
+>
+	{#if header}<span slot="header">{@render header()}</span>{/if}
+	{@render children?.()}
+	{#if footer}<span slot="footer">{@render footer()}</span>{/if}
+</xtyle-dialog>