@xtyle/svelte 0.5.0

package/dist/Tabs.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size } from "@xtyle/core";
+	import type { TabItemData, TabsVariant, TabsActivation } from "@xtyle/core/markup";
+
+	interface Props {
+		items?: TabItemData[];
+		variant?: TabsVariant;
+		size?: Size;
+		activation?: TabsActivation;
+		value?: string;
+		label?: string;
+		labelledby?: string;
+		sticky?: boolean;
+		/** Mount a panel's content only once its tab is first shown, then keep it mounted. Off by default
+		 * (every panel renders up front). Reach for it when panels are heavy (an editor, a chart) or must
+		 * lay out only while visible; the tab strip, roving focus, and a11y are unchanged either way. */
+		lazy?: boolean;
+		onchange?: (value: string) => void;
+		/** The content for the active tab. Omit it for a headless tablist: the element drives `value`,
+		 * roving focus, and a11y as a bare tab strip while you render the content yourself (so a
+		 * persistent sidebar can live outside the panel region and keep its own state across switches). */
+		panel?: Snippet<[string]>;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		items = [],
+		variant = "underline",
+		size = "md",
+		activation = "automatic",
+		value = $bindable(),
+		label,
+		labelledby,
+		sticky = false,
+		lazy = false,
+		onchange,
+		panel,
+		...rest
+	}: Props = $props();
+
+	const headless = $derived(!panel);
+	// Fall back to the first *enabled* tab, matching the element's own default selection.
+	const activeKey = $derived(value ?? items.find((t) => !t.disabled)?.value ?? items[0]?.value ?? "0");
+	// Keep-alive of shown panels. Must reassign the array: mutating a `$state` Set/array in place
+	// doesn't re-run Svelte 5's template dependents.
+	let shownKeys = $state<string[]>([]);
+	$effect(() => {
+		if (lazy && !shownKeys.includes(activeKey)) shownKeys = [...shownKeys, activeKey];
+	});
+
+	function handleChange(event: Event) {
+		// `xtyle-tabs` dispatches `change` with `composed: true`, so a nested Tabs' change
+		// bubbles up to an outer one. Only act on changes from this element, not descendants.
+		if (event.target !== event.currentTarget) return;
+		const next = (event as CustomEvent<{ value: string }>).detail?.value;
+		if (next === undefined) return;
+		value = next;
+		onchange?.(next);
+	}
+</script>
+
+<xtyle-tabs
+	{...rest}
+	{variant}
+	{size}
+	{activation}
+	{value}
+	{label}
+	sticky={sticky || undefined}
+	tablist={headless || undefined}
+	labelledby={labelledby || undefined}
+	onchange={handleChange}
+>
+	{#each items as tab, i (tab.value ?? i)}
+		{@const key = tab.value ?? String(i)}
+		<span slot="tab" value={key} disabled={tab.disabled || undefined}>{tab.label}</span>
+		{#if !headless}
+			<div slot="panel">{#if !lazy || shownKeys.includes(key)}{@render panel?.(key)}{/if}</div>
+		{/if}
+	{/each}
+</xtyle-tabs>

package/dist/Tabs.svelte.d.ts

@@ -0,0 +1,28 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size } from "@xtyle/core";
+import type { TabItemData, TabsVariant, TabsActivation } from "@xtyle/core/markup";
+interface Props {
+    items?: TabItemData[];
+    variant?: TabsVariant;
+    size?: Size;
+    activation?: TabsActivation;
+    value?: string;
+    label?: string;
+    labelledby?: string;
+    sticky?: boolean;
+    /** Mount a panel's content only once its tab is first shown, then keep it mounted. Off by default
+     * (every panel renders up front). Reach for it when panels are heavy (an editor, a chart) or must
+     * lay out only while visible; the tab strip, roving focus, and a11y are unchanged either way. */
+    lazy?: boolean;
+    onchange?: (value: string) => void;
+    /** The content for the active tab. Omit it for a headless tablist: the element drives `value`,
+     * roving focus, and a11y as a bare tab strip while you render the content yourself (so a
+     * persistent sidebar can live outside the panel region and keep its own state across switches). */
+    panel?: Snippet<[string]>;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/Text.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone } from "@xtyle/core";
+
+	type TextAs = "p" | "span";
+	type TextSize = "xs" | "sm" | "body" | "lg";
+	type TextWeight = "normal" | "medium" | "semibold" | "bold";
+	type TextLeading = "tight" | "snug" | "loose";
+	type TextTone = "default" | "muted" | "subtle" | FullTone;
+
+	interface Props {
+		as?: TextAs;
+		size?: TextSize;
+		weight?: TextWeight;
+		leading?: TextLeading;
+		tone?: TextTone;
+		mono?: boolean;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		as = "p",
+		size = "body",
+		weight = "normal",
+		leading = "snug",
+		tone = "default",
+		mono = false,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-text {...rest} {as} {size} {weight} {leading} {tone} mono={mono || undefined}>
+	{@render children?.()}
+</xtyle-text>

package/dist/Text.svelte.d.ts

@@ -0,0 +1,22 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone } from "@xtyle/core";
+type TextAs = "p" | "span";
+type TextSize = "xs" | "sm" | "body" | "lg";
+type TextWeight = "normal" | "medium" | "semibold" | "bold";
+type TextLeading = "tight" | "snug" | "loose";
+type TextTone = "default" | "muted" | "subtle" | FullTone;
+interface Props {
+    as?: TextAs;
+    size?: TextSize;
+    weight?: TextWeight;
+    leading?: TextLeading;
+    tone?: TextTone;
+    mono?: boolean;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/Textarea.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Size } from "@xtyle/core";
+
+	type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+
+	interface Props {
+		label?: string;
+		value?: string;
+		rows?: number;
+		resize?: TextareaResize;
+		placeholder?: string;
+		size?: Size;
+		name?: string;
+		disabled?: boolean;
+		invalid?: boolean;
+		required?: boolean;
+		error?: string;
+		ariaLabel?: string;
+		mono?: boolean;
+		onchange?: (event: Event) => void;
+		oninput?: (event: Event) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		label = "",
+		value = $bindable(""),
+		rows = 3,
+		resize = "vertical",
+		placeholder,
+		size = "md",
+		name,
+		disabled = false,
+		invalid = false,
+		required = false,
+		error = "",
+		ariaLabel,
+		mono = false,
+		onchange,
+		oninput,
+		...rest
+	}: Props = $props();
+
+	function handleInput(event: Event) {
+		value = (event.target as HTMLElement & { value: string }).value;
+		oninput?.(event);
+	}
+
+	function handleChange(event: Event) {
+		value = (event.target as HTMLElement & { value: string }).value;
+		onchange?.(event);
+	}
+</script>
+
+<xtyle-textarea
+	{...rest}
+	{label}
+	{value}
+	rows={rows}
+	{resize}
+	{placeholder}
+	{size}
+	{name}
+	disabled={disabled || undefined}
+	invalid={invalid || undefined}
+	required={required || undefined}
+	mono={mono || undefined}
+	{error}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	oninput={handleInput}
+	onchange={handleChange}
+></xtyle-textarea>

package/dist/Textarea.svelte.d.ts

@@ -0,0 +1,25 @@
+import "./register.js";
+import type { Size } from "@xtyle/core";
+type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+interface Props {
+    label?: string;
+    value?: string;
+    rows?: number;
+    resize?: TextareaResize;
+    placeholder?: string;
+    size?: Size;
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    error?: string;
+    ariaLabel?: string;
+    mono?: boolean;
+    onchange?: (event: Event) => void;
+    oninput?: (event: Event) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/Toast.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone } from "@xtyle/core";
+	type ToastSeverity = "success" | "warn" | "danger" | "info";
+
+	type ToastVariant = "soft" | "solid";
+
+	interface Props {
+		/** Color — any semantic role, accent variant, or named hue. Defaults to the severity color. */
+		tone?: FullTone;
+		/** Meaning — drives the glyph + politeness, independent of color. Omit for a color-only toast. */
+		severity?: ToastSeverity;
+		variant?: ToastVariant;
+		closable?: boolean;
+		closeLabel?: string;
+		actionLabel?: string;
+		ondismiss?: (event: Event) => void;
+		onaction?: (event: Event) => void;
+		/** Overrides the built-in severity glyph. */
+		icon?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		tone,
+		severity,
+		variant = "soft",
+		closable = true,
+		closeLabel,
+		actionLabel,
+		ondismiss,
+		onaction,
+		icon,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-toast
+	{...rest}
+	{tone}
+	{severity}
+	{variant}
+	closable={closable || undefined}
+	close-label={closeLabel}
+	action-label={actionLabel}
+	{ondismiss}
+	{onaction}
+>
+	{#if icon}<span slot="icon">{@render icon()}</span>{/if}
+	{@render children?.()}
+</xtyle-toast>

package/dist/Toast.svelte.d.ts

@@ -0,0 +1,25 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone } from "@xtyle/core";
+type ToastSeverity = "success" | "warn" | "danger" | "info";
+type ToastVariant = "soft" | "solid";
+interface Props {
+    /** Color — any semantic role, accent variant, or named hue. Defaults to the severity color. */
+    tone?: FullTone;
+    /** Meaning — drives the glyph + politeness, independent of color. Omit for a color-only toast. */
+    severity?: ToastSeverity;
+    variant?: ToastVariant;
+    closable?: boolean;
+    closeLabel?: string;
+    actionLabel?: string;
+    ondismiss?: (event: Event) => void;
+    onaction?: (event: Event) => void;
+    /** Overrides the built-in severity glyph. */
+    icon?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/Toc.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import "./register.js";
+
+	interface TocItem {
+		id: string;
+		label: string;
+	}
+
+	interface Props {
+		items?: TocItem[];
+		label?: string;
+		sticky?: boolean;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { items = [], label = "On this page", sticky = false, ...rest }: Props = $props();
+
+	const itemsJson = $derived(JSON.stringify(items));
+</script>
+
+<xtyle-toc {...rest} items={itemsJson} {label} sticky={sticky || undefined}></xtyle-toc>

package/dist/Toc.svelte.d.ts

@@ -0,0 +1,15 @@
+import "./register.js";
+interface TocItem {
+    id: string;
+    label: string;
+}
+interface Props {
+    items?: TocItem[];
+    label?: string;
+    sticky?: boolean;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Toc: import("svelte").Component<Props, {}, "">;
+type Toc = ReturnType<typeof Toc>;
+export default Toc;

package/dist/Toolbar.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size } from "@xtyle/core";
+
+	interface Props {
+		heading?: string;
+		href?: string;
+		size?: Size;
+		landmark?: boolean;
+		sticky?: boolean;
+		bare?: boolean;
+		start?: Snippet;
+		center?: Snippet;
+		end?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		heading,
+		href,
+		size = "md",
+		landmark = false,
+		sticky = false,
+		bare = false,
+		start,
+		center,
+		end,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-toolbar
+	{...rest}
+	{heading}
+	{href}
+	{size}
+	landmark={landmark || undefined}
+	sticky={sticky || undefined}
+	bare={bare || undefined}
+>
+	{#if start}<span slot="start">{@render start()}</span>{/if}
+	{@render children?.()}
+	{#if center}<span slot="center">{@render center()}</span>{/if}
+	{#if end}<span slot="end">{@render end()}</span>{/if}
+</xtyle-toolbar>

package/dist/Toolbar.svelte.d.ts

@@ -0,0 +1,20 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size } from "@xtyle/core";
+interface Props {
+    heading?: string;
+    href?: string;
+    size?: Size;
+    landmark?: boolean;
+    sticky?: boolean;
+    bare?: boolean;
+    start?: Snippet;
+    center?: Snippet;
+    end?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/Tooltip.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type Placement = "top" | "bottom" | "left" | "right";
+
+	interface Props {
+		text?: string;
+		placement?: Placement;
+		open?: boolean;
+		tone?: string;
+		variant?: "soft" | "solid";
+		mode?: "hint" | "rich";
+		size?: "sm" | "md";
+		children?: Snippet;
+		content?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { text, placement = "top", open = $bindable(false), tone, variant, mode, size, content, children, ...rest }: Props =
+		$props();
+</script>
+
+<xtyle-tooltip {...rest} {text} {placement} open={open || undefined} {tone} {variant} {mode} {size}>
+	{@render children?.()}
+	{#if content}<span slot="content">{@render content()}</span>{/if}
+</xtyle-tooltip>

package/dist/Tooltip.svelte.d.ts

@@ -0,0 +1,19 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type Placement = "top" | "bottom" | "left" | "right";
+interface Props {
+    text?: string;
+    placement?: Placement;
+    open?: boolean;
+    tone?: string;
+    variant?: "soft" | "solid";
+    mode?: "hint" | "rich";
+    size?: "sm" | "md";
+    children?: Snippet;
+    content?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/Tree.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Size } from "@xtyle/core";
+
+	interface TreeNode {
+		label: string;
+		value?: string;
+		href?: string;
+		expanded?: boolean;
+		selected?: boolean;
+		disabled?: boolean;
+		children?: TreeNode[];
+	}
+
+	interface Props {
+		items?: TreeNode[];
+		size?: Size;
+		label?: string;
+		labelledby?: string;
+		onselect?: (event: Event) => void;
+		ontoggle?: (event: Event) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		items = [],
+		size = "md",
+		label,
+		labelledby,
+		onselect,
+		ontoggle,
+		...rest
+	}: Props = $props();
+
+	let el: (HTMLElement & { items?: TreeNode[] }) | undefined = $state();
+
+	$effect(() => {
+		if (el) el.items = items;
+	});
+</script>
+
+<xtyle-tree
+	{...rest}
+	bind:this={el}
+	{size}
+	{label}
+	labelledby={labelledby || undefined}
+	{onselect}
+	{ontoggle}
+></xtyle-tree>

package/dist/Tree.svelte.d.ts

@@ -0,0 +1,24 @@
+import "./register.js";
+import type { Size } from "@xtyle/core";
+interface TreeNode {
+    label: string;
+    value?: string;
+    href?: string;
+    expanded?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    children?: TreeNode[];
+}
+interface Props {
+    items?: TreeNode[];
+    size?: Size;
+    label?: string;
+    labelledby?: string;
+    onselect?: (event: Event) => void;
+    ontoggle?: (event: Event) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Tree: import("svelte").Component<Props, {}, "">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/dist/elements.d.ts

@@ -0,0 +1,65 @@
+import type { HTMLAttributes } from "svelte/elements";
+
+type XtyleAttributes<T extends EventTarget = HTMLElement> = HTMLAttributes<T>;
+
+interface XtyleButtonAttributes extends XtyleAttributes {
+	variant?: "accent" | "neutral" | "danger";
+	size?: "sm" | "md" | "lg";
+	type?: "button" | "submit" | "reset";
+	disabled?: boolean;
+}
+
+interface XtyleFieldAttributes extends XtyleAttributes {
+	label?: string;
+	placeholder?: string;
+	value?: string;
+	type?: string;
+	disabled?: boolean;
+	invalid?: boolean;
+	required?: boolean;
+	error?: string;
+}
+
+interface XtyleCardAttributes extends XtyleAttributes {
+	overlay?: boolean;
+}
+
+interface XtyleBadgeAttributes extends XtyleAttributes {
+	tone?: string;
+}
+
+interface XtyleSwitchAttributes extends XtyleAttributes {
+	checked?: boolean;
+	disabled?: boolean;
+	label?: string;
+	labelledby?: string;
+}
+
+interface XtyleAlertAttributes extends XtyleAttributes {
+	tone?: "success" | "warn" | "danger" | "info";
+}
+
+interface XtyleLinkAttributes extends XtyleAttributes {
+	href?: string;
+	target?: string;
+	rel?: string;
+}
+
+interface XtyleCodeAttributes extends XtyleAttributes {
+	lang?: string;
+	code?: string;
+	preload?: boolean;
+}
+
+declare module "svelte/elements" {
+	interface SvelteHTMLElements {
+		"xtyle-button": XtyleButtonAttributes;
+		"xtyle-field": XtyleFieldAttributes;
+		"xtyle-card": XtyleCardAttributes;
+		"xtyle-badge": XtyleBadgeAttributes;
+		"xtyle-switch": XtyleSwitchAttributes;
+		"xtyle-alert": XtyleAlertAttributes;
+		"xtyle-link": XtyleLinkAttributes;
+		"xtyle-code": XtyleCodeAttributes;
+	}
+}