@xtyle/svelte 0.5.0

package/README.md

@@ -0,0 +1,42 @@
+# @xtyle/svelte
+
+[![npm](https://img.shields.io/npm/v/@xtyle/svelte?label=npm)](https://www.npmjs.com/package/@xtyle/svelte)
+[![docs](https://img.shields.io/badge/docs-xtyle.dev-blue)](https://xtyle.dev)
+[![license](https://img.shields.io/badge/license-MIT-green)](https://opensource.org/license/mit)
+
+Thin Svelte 5 wrappers over the [`@xtyle/core`](https://www.npmjs.com/package/@xtyle/core)
+custom elements, the Svelte binding of the xtyle component contract. Each wrapper is a
+typed Svelte component that renders the matching `<xtyle-*>` element and forwards its
+props, slots, and arbitrary attributes (`{...rest}` lands on the element).
+
+## Install
+
+```sh
+npm install @xtyle/svelte @xtyle/core
+```
+
+`svelte@^5` is a peer dependency; `@xtyle/core` (pulled in automatically) provides the
+custom elements and the derivation engine.
+
+## Usage
+
+```svelte
+<script>
+  import { Button, Badge, Card } from "@xtyle/svelte";
+</script>
+
+<Card>
+  <Badge tone="success">new</Badge>
+  <Button tone="accent">Save</Button>
+</Card>
+```
+
+Components are styled entirely by **design tokens**, the CSS custom properties a xtyle
+*algorithm* derives. Drop a derived theme on `:root` (or any ancestor) and every
+component themes with it; no per-component styling required. See
+[`@xtyle/core`](https://www.npmjs.com/package/@xtyle/core) for deriving and applying a
+theme, and [xtyle.dev](https://xtyle.dev) for the full component reference.
+
+## License
+
+MIT

package/dist/Accordion.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size } from "@xtyle/core";
+
+	interface AccordionItem {
+		value: string;
+		header: string;
+		open?: boolean;
+		disabled?: boolean;
+	}
+
+	interface Props {
+		sections: AccordionItem[];
+		multiple?: boolean;
+		size?: Size;
+		headingLevel?: 2 | 3 | 4 | 5 | 6;
+		ontoggle?: (event: Event) => void;
+		panel: Snippet<[string]>;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		sections,
+		multiple = false,
+		size = "md",
+		headingLevel,
+		ontoggle,
+		panel,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-accordion
+	{...rest}
+	multiple={multiple || undefined}
+	{size}
+	heading-level={headingLevel}
+	{ontoggle}
+>
+	{#each sections as section (section.value)}
+		<span
+			slot="header"
+			value={section.value}
+			open={section.open || undefined}
+			disabled={section.disabled || undefined}>{section.header}</span>
+		<div slot="panel">{@render panel(section.value)}</div>
+	{/each}
+</xtyle-accordion>

package/dist/Accordion.svelte.d.ts

@@ -0,0 +1,22 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size } from "@xtyle/core";
+interface AccordionItem {
+    value: string;
+    header: string;
+    open?: boolean;
+    disabled?: boolean;
+}
+interface Props {
+    sections: AccordionItem[];
+    multiple?: boolean;
+    size?: Size;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    ontoggle?: (event: Event) => void;
+    panel: Snippet<[string]>;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/Alert.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone } from "@xtyle/core";
+	type AlertSeverity = "success" | "warn" | "danger" | "info";
+
+	type AlertVariant = "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 notice. */
+		severity?: AlertSeverity;
+		variant?: AlertVariant;
+		dismissible?: boolean;
+		dismissLabel?: string;
+		ondismiss?: (event: CustomEvent) => void;
+		title?: Snippet;
+		actions?: Snippet;
+		/** 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",
+		dismissible = false,
+		dismissLabel,
+		ondismiss,
+		title,
+		actions,
+		icon,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-alert
+	{...rest}
+	{tone}
+	{severity}
+	{variant}
+	dismissible={dismissible || undefined}
+	dismiss-label={dismissLabel}
+	{ondismiss}
+>
+	{#if icon}<span slot="icon">{@render icon()}</span>{/if}
+	{#if title}<span slot="title">{@render title()}</span>{/if}
+	{@render children?.()}
+	{#if actions}<span slot="actions">{@render actions()}</span>{/if}
+</xtyle-alert>

package/dist/Alert.svelte.d.ts

@@ -0,0 +1,25 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone } from "@xtyle/core";
+type AlertSeverity = "success" | "warn" | "danger" | "info";
+type AlertVariant = "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 notice. */
+    severity?: AlertSeverity;
+    variant?: AlertVariant;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    ondismiss?: (event: CustomEvent) => void;
+    title?: Snippet;
+    actions?: Snippet;
+    /** 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 Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/AppShell.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		skipLink?: string | boolean;
+		leftSize?: number | string;
+		rightSize?: number | string;
+		/** Make the left / right rail user-resizable: a drag handle on its inner edge, arrow-key nudges
+		 * (`Shift` for a bigger step, `Home` / `End` to jump to the bounds), and a double-click reset to
+		 * `leftSize` / `rightSize`. The main column reflows as the rail changes. */
+		leftResizable?: boolean;
+		rightResizable?: boolean;
+		/** Clamp for the resizable rails, in px. */
+		leftMin?: number;
+		leftMax?: number;
+		rightMin?: number;
+		rightMax?: number;
+		toolbar?: Snippet;
+		left?: Snippet;
+		right?: Snippet;
+		statusbar?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		skipLink,
+		leftSize,
+		rightSize,
+		leftResizable,
+		rightResizable,
+		leftMin,
+		leftMax,
+		rightMin,
+		rightMax,
+		toolbar,
+		left,
+		right,
+		statusbar,
+		children,
+		...rest
+	}: Props = $props();
+
+	const skipAttr = $derived(skipLink === true ? "" : skipLink || undefined);
+	const railAttr = (v: number | string | undefined) =>
+		v === undefined ? undefined : typeof v === "number" ? String(v) : v;
+	const flag = (v: boolean | undefined) => (v ? "" : undefined);
+</script>
+
+<xtyle-app-shell
+	{...rest}
+	skip-link={skipAttr}
+	left-size={railAttr(leftSize)}
+	right-size={railAttr(rightSize)}
+	left-resizable={flag(leftResizable)}
+	right-resizable={flag(rightResizable)}
+	left-min={railAttr(leftMin)}
+	left-max={railAttr(leftMax)}
+	right-min={railAttr(rightMin)}
+	right-max={railAttr(rightMax)}
+>
+	{#if toolbar}<div slot="toolbar">{@render toolbar()}</div>{/if}
+	{#if left}<div slot="left">{@render left()}</div>{/if}
+	{@render children?.()}
+	{#if right}<div slot="right">{@render right()}</div>{/if}
+	{#if statusbar}<div slot="statusbar">{@render statusbar()}</div>{/if}
+</xtyle-app-shell>

package/dist/AppShell.svelte.d.ts

@@ -0,0 +1,27 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+interface Props {
+    skipLink?: string | boolean;
+    leftSize?: number | string;
+    rightSize?: number | string;
+    /** Make the left / right rail user-resizable: a drag handle on its inner edge, arrow-key nudges
+     * (`Shift` for a bigger step, `Home` / `End` to jump to the bounds), and a double-click reset to
+     * `leftSize` / `rightSize`. The main column reflows as the rail changes. */
+    leftResizable?: boolean;
+    rightResizable?: boolean;
+    /** Clamp for the resizable rails, in px. */
+    leftMin?: number;
+    leftMax?: number;
+    rightMin?: number;
+    rightMax?: number;
+    toolbar?: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    statusbar?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/Avatar.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone as BadgeTone, Tone } from "@xtyle/core";
+
+	type AvatarSize = "sm" | "md" | "lg" | "xl";
+	type AvatarShape = "circle" | "square";
+
+	interface Props {
+		src?: string;
+		alt?: string;
+		tone?: BadgeTone;
+		size?: AvatarSize;
+		shape?: AvatarShape;
+		status?: Tone;
+		statusLabel?: string;
+		/** Breathe the status dot for a live / online presence: a bare `true` pulses slow, `"fast"` quick. */
+		pulse?: boolean | "slow" | "fast";
+		icon?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		src,
+		alt,
+		tone = "neutral",
+		size = "md",
+		shape = "circle",
+		status,
+		statusLabel,
+		pulse,
+		icon,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-avatar
+	{...rest}
+	{src}
+	{alt}
+	{tone}
+	{size}
+	{shape}
+	{status}
+	status-label={statusLabel}
+	pulse={pulse === true ? "" : pulse || undefined}
+>
+	{#if icon}<span slot="icon">{@render icon()}</span>{/if}
+	{@render children?.()}
+</xtyle-avatar>

package/dist/Avatar.svelte.d.ts

@@ -0,0 +1,23 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone as BadgeTone, Tone } from "@xtyle/core";
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+type AvatarShape = "circle" | "square";
+interface Props {
+    src?: string;
+    alt?: string;
+    tone?: BadgeTone;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    status?: Tone;
+    statusLabel?: string;
+    /** Breathe the status dot for a live / online presence: a bare `true` pulses slow, `"fast"` quick. */
+    pulse?: boolean | "slow" | "fast";
+    icon?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/AvatarGroup.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type AvatarGroupSize = "sm" | "md" | "lg" | "xl";
+	type AvatarGroupSpacing = "snug" | "normal" | "loose";
+
+	interface Props {
+		size?: AvatarGroupSize;
+		spacing?: AvatarGroupSpacing;
+		/** How many avatars beyond the shown ones to summarize as a trailing `+N` chip. */
+		overflow?: number;
+		/** Accessible name for the group (a list of people). */
+		label?: string;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through. */
+		[key: string]: unknown;
+	}
+
+	let { size, spacing, overflow, label, children, ...rest }: Props = $props();
+</script>
+
+<xtyle-avatar-group
+	{...rest}
+	{size}
+	{spacing}
+	overflow={overflow ?? undefined}
+	{label}
+>
+	{@render children?.()}
+</xtyle-avatar-group>

package/dist/AvatarGroup.svelte.d.ts

@@ -0,0 +1,18 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type AvatarGroupSize = "sm" | "md" | "lg" | "xl";
+type AvatarGroupSpacing = "snug" | "normal" | "loose";
+interface Props {
+    size?: AvatarGroupSize;
+    spacing?: AvatarGroupSpacing;
+    /** How many avatars beyond the shown ones to summarize as a trailing `+N` chip. */
+    overflow?: number;
+    /** Accessible name for the group (a list of people). */
+    label?: string;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through. */
+    [key: string]: unknown;
+}
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/Badge.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone as BadgeTone, Size } from "@xtyle/core";
+
+	type BadgeVariant = "solid" | "soft" | "outline";
+
+	interface Props {
+		variant?: BadgeVariant;
+		tone?: BadgeTone;
+		size?: Size;
+		dot?: boolean;
+		pulse?: boolean | "slow" | "fast";
+		count?: string | number;
+		removable?: boolean;
+		removeLabel?: string;
+		onremove?: (event: MouseEvent) => void;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		variant = "soft",
+		tone = "neutral",
+		size = "md",
+		dot = false,
+		pulse,
+		count,
+		removable = false,
+		removeLabel,
+		onremove,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-badge
+	{...rest}
+	{variant}
+	{tone}
+	{size}
+	dot={dot || undefined}
+	pulse={pulse === true ? "slow" : pulse || undefined}
+	count={count !== undefined && count !== null && count !== "" ? String(count) : undefined}
+	removable={removable || undefined}
+	remove-label={removeLabel}
+	onclick={onremove
+		? (event: MouseEvent) => {
+				const target = event.target as HTMLElement;
+				if (target.closest(".xtyle-badge__remove")) onremove(event);
+			}
+		: undefined}
+>
+	{@render children?.()}
+</xtyle-badge>

package/dist/Badge.svelte.d.ts

@@ -0,0 +1,21 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone as BadgeTone, Size } from "@xtyle/core";
+type BadgeVariant = "solid" | "soft" | "outline";
+interface Props {
+    variant?: BadgeVariant;
+    tone?: BadgeTone;
+    size?: Size;
+    dot?: boolean;
+    pulse?: boolean | "slow" | "fast";
+    count?: string | number;
+    removable?: boolean;
+    removeLabel?: string;
+    onremove?: (event: MouseEvent) => void;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/Bar.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import "./register.js";
+	import type { BarSeries, BarScheme } from "@xtyle/core";
+
+	interface Props {
+		series?: BarSeries[];
+		categories?: string[];
+		scheme?: BarScheme;
+		reverse?: boolean;
+		colorBy?: "series" | "category";
+		orientation?: "vertical" | "horizontal";
+		stacked?: boolean;
+		showValues?: boolean;
+		legend?: boolean;
+		height?: number;
+		label?: string;
+		/** Make bars actionable: each becomes a `role="button"` that fires `select` on click or Enter/Space. */
+		selectable?: boolean;
+		/** Fired when a bar is activated (only when `selectable`), carrying the series, category, value, and indices. */
+		onselect?: (
+			event: CustomEvent<{ series: string; category: string; value: number; seriesIndex: number; categoryIndex: number }>,
+		) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		series = [],
+		categories = [],
+		scheme = "accents",
+		reverse = false,
+		colorBy,
+		orientation = "vertical",
+		stacked = false,
+		showValues = false,
+		legend = true,
+		height = 320,
+		label,
+		selectable = false,
+		onselect,
+		...rest
+	}: Props = $props();
+
+	let host:
+		| (HTMLElement & { series: BarSeries[]; categories: string[]; scheme: BarScheme })
+		| undefined = $state();
+
+	$effect(() => {
+		if (!host) return;
+		host.series = series;
+		host.categories = categories;
+		host.scheme = scheme;
+	});
+</script>
+
+<xtyle-bar
+	bind:this={host}
+	{...rest}
+	reverse={reverse || undefined}
+	color-by={colorBy}
+	orientation={orientation === "horizontal" ? "horizontal" : undefined}
+	stacked={stacked || undefined}
+	show-values={showValues || undefined}
+	legend={legend ? undefined : "false"}
+	selectable={selectable || undefined}
+	{onselect}
+	{height}
+	{label}
+></xtyle-bar>

package/dist/Bar.svelte.d.ts

@@ -0,0 +1,30 @@
+import "./register.js";
+import type { BarSeries, BarScheme } from "@xtyle/core";
+interface Props {
+    series?: BarSeries[];
+    categories?: string[];
+    scheme?: BarScheme;
+    reverse?: boolean;
+    colorBy?: "series" | "category";
+    orientation?: "vertical" | "horizontal";
+    stacked?: boolean;
+    showValues?: boolean;
+    legend?: boolean;
+    height?: number;
+    label?: string;
+    /** Make bars actionable: each becomes a `role="button"` that fires `select` on click or Enter/Space. */
+    selectable?: boolean;
+    /** Fired when a bar is activated (only when `selectable`), carrying the series, category, value, and indices. */
+    onselect?: (event: CustomEvent<{
+        series: string;
+        category: string;
+        value: number;
+        seriesIndex: number;
+        categoryIndex: number;
+    }>) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Bar: import("svelte").Component<Props, {}, "">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/Breadcrumb.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size, FullTone } from "@xtyle/core";
+
+	interface BreadcrumbItem {
+		label: string;
+		href?: string;
+		value?: string;
+		current?: boolean;
+	}
+
+	interface Props {
+		items?: BreadcrumbItem[];
+		separator?: string;
+		tone?: FullTone;
+		size?: Size;
+		label?: string;
+		children?: Snippet;
+		/** Fired when a valued crumb (no `href`) is activated; `detail` carries `{ value, index }`. */
+		onselect?: (event: CustomEvent<{ value: string; index: number }>) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { items, separator = "/", tone = "accent", size = "md", label = "Breadcrumb", children, onselect, ...rest }: Props = $props();
+
+	const itemsAttr = $derived(items && items.length > 0 ? JSON.stringify(items) : undefined);
+</script>
+
+<xtyle-breadcrumb {...rest} {tone} {size} {separator} {label} items={itemsAttr} {onselect}>
+	{@render children?.()}
+</xtyle-breadcrumb>

package/dist/Breadcrumb.svelte.d.ts

@@ -0,0 +1,27 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size, FullTone } from "@xtyle/core";
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    value?: string;
+    current?: boolean;
+}
+interface Props {
+    items?: BreadcrumbItem[];
+    separator?: string;
+    tone?: FullTone;
+    size?: Size;
+    label?: string;
+    children?: Snippet;
+    /** Fired when a valued crumb (no `href`) is activated; `detail` carries `{ value, index }`. */
+    onselect?: (event: CustomEvent<{
+        value: string;
+        index: number;
+    }>) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;