@xtyle/svelte 0.5.0

package/dist/Dialog.svelte.d.ts

@@ -0,0 +1,22 @@
+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;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/Dock.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size, FullTone as Tone } from "@xtyle/core";
+
+	type DockSide = "left" | "right";
+
+	interface Props {
+		side?: DockSide;
+		size?: Size;
+		tone?: Tone;
+		reverseEdge?: boolean;
+		edgeWidth?: "thin" | "thick" | "bold";
+		nav?: boolean;
+		label?: string;
+		ariaLabel?: string;
+		hideHeader?: boolean;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		side = "left",
+		size = "md",
+		tone,
+		reverseEdge = false,
+		edgeWidth,
+		nav = false,
+		label,
+		ariaLabel,
+		hideHeader = false,
+		header,
+		footer,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-dock
+	{...rest}
+	{side}
+	{size}
+	{tone}
+	reverse-edge={reverseEdge || undefined}
+	edge-width={edgeWidth}
+	nav={nav || undefined}
+	{label}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	hide-header={hideHeader || undefined}
+>
+	{#if header}<span slot="header">{@render header()}</span>{/if}
+	{@render children?.()}
+	{#if footer}<span slot="footer">{@render footer()}</span>{/if}
+</xtyle-dock>

package/dist/Dock.svelte.d.ts

@@ -0,0 +1,23 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size, FullTone as Tone } from "@xtyle/core";
+type DockSide = "left" | "right";
+interface Props {
+    side?: DockSide;
+    size?: Size;
+    tone?: Tone;
+    reverseEdge?: boolean;
+    edgeWidth?: "thin" | "thick" | "bold";
+    nav?: boolean;
+    label?: string;
+    ariaLabel?: string;
+    hideHeader?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Dock: import("svelte").Component<Props, {}, "">;
+type Dock = ReturnType<typeof Dock>;
+export default Dock;

package/dist/DockZone.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { DockNode, DockLayout, FloatRect } from "@xtyle/core/elements";
+
+	type LayoutChange = CustomEvent<{ layout: DockLayout | null }>;
+	type PanelClose = CustomEvent<{ panelId: string }>;
+	type PanelAction = CustomEvent<{ panelId: string; actionId: string }>;
+
+	interface Props {
+		/** Restore a persisted layout (a `DockLayout` with docks + floats, or a bare `DockNode` tree).
+		 * Read the current one back from `onLayoutChange`. */
+		layout?: DockNode | DockLayout | null;
+		onLayoutChange?: (event: LayoutChange) => void;
+		/** A panel's close button was pressed. Cancelable: call `event.preventDefault()` to keep the panel. */
+		onPanelClose?: (event: PanelClose) => void;
+		/** A panel header button or menu row was activated (`detail: { panelId, actionId }`). */
+		onPanelAction?: (event: PanelAction) => void;
+		children?: Snippet;
+		/** Any other attribute (`style`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { layout, onLayoutChange, onPanelClose, onPanelAction, children, ...rest }: Props = $props();
+
+	let host:
+		| (HTMLElement & {
+				layout: DockNode | DockLayout | null;
+				closePanel(panelId: string): void;
+				floatPanel(panelId: string, rect?: FloatRect): void;
+				dockFloating(panelId: string, target?: string, region?: string): void;
+		  })
+		| undefined = $state();
+
+	/** Close a panel through the element's own path (cancelable `panel-close`, then removal). Exposed so
+	 * a `bind:this` consumer can wire a `data-menu` "close" row's `panel-action` back to a real close. */
+	export function closePanel(panelId: string): void {
+		host?.closePanel(panelId);
+	}
+
+	/** Tear a docked panel out into a floating window (a `data-menu` "float" row wires here through `bind:this`). */
+	export function floatPanel(panelId: string, rect?: FloatRect): void {
+		host?.floatPanel(panelId, rect);
+	}
+
+	/** Re-dock a floating panel back into the tree (defaults to the root zone as a tab). */
+	export function dockFloating(panelId: string, target?: string, region?: string): void {
+		host?.dockFloating(panelId, target, region);
+	}
+
+	// `layout` is a tree object, not an attribute, so set it as a property on the live element.
+	$effect(() => {
+		if (host && layout !== undefined) host.layout = layout;
+	});
+
+	// The callback is read through a getter so swapping the prop re-registers the listener.
+	function forward<E extends Event>(type: string, callback: () => ((event: E) => void) | undefined): void {
+		$effect(() => {
+			const cb = callback();
+			if (!host || !cb) return;
+			const handler = (event: Event) => cb(event as E);
+			host.addEventListener(type, handler);
+			return () => host?.removeEventListener(type, handler);
+		});
+	}
+
+	forward<LayoutChange>("layout-change", () => onLayoutChange);
+	forward<PanelClose>("panel-close", () => onPanelClose);
+	forward<PanelAction>("panel-action", () => onPanelAction);
+</script>
+
+<xtyle-dock-zone {...rest} bind:this={host}>
+	{@render children?.()}
+</xtyle-dock-zone>

package/dist/DockZone.svelte.d.ts

@@ -0,0 +1,33 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { DockNode, DockLayout, FloatRect } from "@xtyle/core/elements";
+type LayoutChange = CustomEvent<{
+    layout: DockLayout | null;
+}>;
+type PanelClose = CustomEvent<{
+    panelId: string;
+}>;
+type PanelAction = CustomEvent<{
+    panelId: string;
+    actionId: string;
+}>;
+interface Props {
+    /** Restore a persisted layout (a `DockLayout` with docks + floats, or a bare `DockNode` tree).
+     * Read the current one back from `onLayoutChange`. */
+    layout?: DockNode | DockLayout | null;
+    onLayoutChange?: (event: LayoutChange) => void;
+    /** A panel's close button was pressed. Cancelable: call `event.preventDefault()` to keep the panel. */
+    onPanelClose?: (event: PanelClose) => void;
+    /** A panel header button or menu row was activated (`detail: { panelId, actionId }`). */
+    onPanelAction?: (event: PanelAction) => void;
+    children?: Snippet;
+    /** Any other attribute (`style`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const DockZone: import("svelte").Component<Props, {
+    closePanel: (panelId: string) => void;
+    floatPanel: (panelId: string, rect?: FloatRect) => void;
+    dockFloating: (panelId: string, target?: string, region?: string) => void;
+}, "">;
+type DockZone = ReturnType<typeof DockZone>;
+export default DockZone;

package/dist/Eyebrow.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone } from "@xtyle/core";
+
+	type EyebrowTag = "p" | "span" | "div";
+	type EyebrowTone = "muted" | "subtle" | FullTone;
+	type EyebrowTracking = "normal" | "wide";
+
+	interface Props {
+		as?: EyebrowTag;
+		tone?: EyebrowTone;
+		tracking?: EyebrowTracking;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { as = "p", tone = "accent", tracking = "normal", children, ...rest }: Props = $props();
+</script>
+
+<xtyle-eyebrow {...rest} {as} {tone} {tracking}>
+	{@render children?.()}
+</xtyle-eyebrow>

package/dist/Eyebrow.svelte.d.ts

@@ -0,0 +1,17 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone } from "@xtyle/core";
+type EyebrowTag = "p" | "span" | "div";
+type EyebrowTone = "muted" | "subtle" | FullTone;
+type EyebrowTracking = "normal" | "wide";
+interface Props {
+    as?: EyebrowTag;
+    tone?: EyebrowTone;
+    tracking?: EyebrowTracking;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Eyebrow: import("svelte").Component<Props, {}, "">;
+type Eyebrow = ReturnType<typeof Eyebrow>;
+export default Eyebrow;

package/dist/Field.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size } from "@xtyle/core";
+
+	type FieldOption = { value: string; label?: string };
+
+	interface Props {
+		label?: string;
+		name?: string;
+		placeholder?: string;
+		value?: string;
+		type?: string;
+		size?: Size;
+		disabled?: boolean;
+		readonly?: boolean;
+		invalid?: boolean;
+		required?: boolean;
+		clearable?: boolean;
+		description?: string;
+		error?: string;
+		ariaLabel?: string;
+		options?: ReadonlyArray<string | FieldOption>;
+		mono?: boolean;
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+		prefix?: Snippet;
+		suffix?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		label = "",
+		name,
+		placeholder = "",
+		value = $bindable(""),
+		type = "text",
+		size = "md",
+		disabled = false,
+		readonly = false,
+		invalid = false,
+		required = false,
+		clearable = false,
+		description = "",
+		error = "",
+		ariaLabel,
+		options,
+		mono = false,
+		oninput,
+		onchange,
+		prefix,
+		suffix,
+		...rest
+	}: Props = $props();
+
+	let host: (HTMLElement & { options: ReadonlyArray<string | FieldOption> }) | undefined = $state();
+
+	$effect(() => {
+		if (host) host.options = options ?? [];
+	});
+
+	function handleInput(event: Event) {
+		value = (event.target as HTMLElement & { value: string }).value;
+		oninput?.(event);
+	}
+</script>
+
+<xtyle-field
+	bind:this={host}
+	{...rest}
+	{label}
+	name={name || undefined}
+	{placeholder}
+	{value}
+	{type}
+	{size}
+	disabled={disabled || undefined}
+	readonly={readonly || undefined}
+	invalid={invalid || undefined}
+	required={required || undefined}
+	clearable={clearable || undefined}
+	mono={mono || undefined}
+	{description}
+	{error}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	oninput={handleInput}
+	{onchange}
+>
+	{#if prefix}<span slot="prefix">{@render prefix()}</span>{/if}
+	{#if suffix}<span slot="suffix">{@render suffix()}</span>{/if}
+</xtyle-field>

package/dist/Field.svelte.d.ts

@@ -0,0 +1,34 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size } from "@xtyle/core";
+type FieldOption = {
+    value: string;
+    label?: string;
+};
+interface Props {
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    value?: string;
+    type?: string;
+    size?: Size;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    description?: string;
+    error?: string;
+    ariaLabel?: string;
+    options?: ReadonlyArray<string | FieldOption>;
+    mono?: boolean;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    prefix?: Snippet;
+    suffix?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Field: import("svelte").Component<Props, {}, "value">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/FormGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size } from "@xtyle/core";
+
+	interface Props {
+		label?: string;
+		description?: string;
+		error?: string;
+		size?: Size;
+		invalid?: boolean;
+		required?: boolean;
+		for?: string;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		label = "",
+		description = "",
+		error = "",
+		size = "md",
+		invalid = false,
+		required = false,
+		for: htmlFor,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-form-group
+	{...rest}
+	{label}
+	{description}
+	{error}
+	{size}
+	invalid={invalid || undefined}
+	required={required || undefined}
+	for={htmlFor || undefined}
+>
+	{@render children?.()}
+</xtyle-form-group>

package/dist/FormGroup.svelte.d.ts

@@ -0,0 +1,18 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size } from "@xtyle/core";
+interface Props {
+    label?: string;
+    description?: string;
+    error?: string;
+    size?: Size;
+    invalid?: boolean;
+    required?: boolean;
+    for?: string;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const FormGroup: import("svelte").Component<Props, {}, "">;
+type FormGroup = ReturnType<typeof FormGroup>;
+export default FormGroup;

package/dist/Grid.svelte

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

package/dist/Grid.svelte.d.ts

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

package/dist/Heading.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { HeadingLevel, HeadingSize, HeadingTone } from "@xtyle/core";
+
+	interface Props {
+		level?: HeadingLevel;
+		size?: HeadingSize;
+		tone?: HeadingTone;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { level = 2, size, tone = "default", children, ...rest }: Props = $props();
+</script>
+
+<xtyle-heading {...rest} level={level} {size} {tone}>
+	{@render children?.()}
+</xtyle-heading>

package/dist/Heading.svelte.d.ts

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

package/dist/Heatmap.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import "./register.js";
+	import type { HeatmapScheme } from "@xtyle/core";
+
+	interface Props {
+		values?: number[][];
+		glow?: number[][];
+		rows?: string[];
+		cols?: string[];
+		scheme?: HeatmapScheme;
+		reverse?: boolean;
+		max?: number;
+		glowMax?: number;
+		glowBlur?: number;
+		glowLabel?: string;
+		/** Show a color-scale key (five swatches from the ramp with 0..max endpoints) below the grid. */
+		/** Cells to ring as the current / "now" marker, each a `[rowIndex, colIndex]` pair. */
+		current?: number[][];
+		/** Tint for the current-cell ring: a semantic tone (`success` / `danger` / `warn` / `info` / `neutral`); defaults to accent. */
+		currentTone?: "success" | "danger" | "warn" | "info" | "neutral";
+		/** Pulse the current-cell ring (honors `prefers-reduced-motion`). */
+		currentPulse?: boolean;
+		/** Per-cell hover text (same shape as `values`); overrides a cell's default readout and accessible name. */
+		titles?: string[][];
+		scale?: boolean;
+		showValues?: boolean;
+		/** Make cells actionable: each becomes a `role="button"` that fires `select` on click or Enter/Space. */
+		selectable?: boolean;
+		label?: string;
+		/** Fired when a cell is activated (only when `selectable`), carrying the row, column, value, and indices. */
+		onselect?: (
+			event: CustomEvent<{ row: string; col: string; value: number; rowIndex: number; colIndex: number }>,
+		) => void;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		values = [],
+		glow = [],
+		rows = [],
+		cols = [],
+		current = [],
+		currentTone,
+		currentPulse = false,
+		titles = [],
+		scheme = "accent",
+		reverse = false,
+		max,
+		glowMax,
+		glowBlur,
+		glowLabel,
+		scale = false,
+		showValues = false,
+		selectable = false,
+		label,
+		onselect,
+		...rest
+	}: Props = $props();
+
+	let host:
+		| (HTMLElement & {
+				values: number[][];
+				glow: number[][];
+				rows: string[];
+				cols: string[];
+				current: number[][];
+				titles: string[][];
+				scheme: HeatmapScheme;
+		  })
+		| undefined = $state();
+
+	$effect(() => {
+		if (!host) return;
+		host.values = values;
+		host.glow = glow;
+		host.rows = rows;
+		host.cols = cols;
+		host.current = current;
+		host.titles = titles;
+		host.scheme = scheme;
+	});
+</script>
+
+<xtyle-heatmap
+	bind:this={host}
+	{...rest}
+	reverse={reverse || undefined}
+	max={max ?? undefined}
+	glow-max={glowMax ?? undefined}
+	glow-blur={glowBlur ?? undefined}
+	glow-label={glowLabel ?? undefined}
+	current-tone={currentTone ?? undefined}
+	current-pulse={currentPulse || undefined}
+	scale={scale || undefined}
+	show-values={showValues || undefined}
+	selectable={selectable || undefined}
+	{onselect}
+	{label}
+></xtyle-heatmap>

package/dist/Heatmap.svelte.d.ts

@@ -0,0 +1,41 @@
+import "./register.js";
+import type { HeatmapScheme } from "@xtyle/core";
+interface Props {
+    values?: number[][];
+    glow?: number[][];
+    rows?: string[];
+    cols?: string[];
+    scheme?: HeatmapScheme;
+    reverse?: boolean;
+    max?: number;
+    glowMax?: number;
+    glowBlur?: number;
+    glowLabel?: string;
+    /** Show a color-scale key (five swatches from the ramp with 0..max endpoints) below the grid. */
+    /** Cells to ring as the current / "now" marker, each a `[rowIndex, colIndex]` pair. */
+    current?: number[][];
+    /** Tint for the current-cell ring: a semantic tone (`success` / `danger` / `warn` / `info` / `neutral`); defaults to accent. */
+    currentTone?: "success" | "danger" | "warn" | "info" | "neutral";
+    /** Pulse the current-cell ring (honors `prefers-reduced-motion`). */
+    currentPulse?: boolean;
+    /** Per-cell hover text (same shape as `values`); overrides a cell's default readout and accessible name. */
+    titles?: string[][];
+    scale?: boolean;
+    showValues?: boolean;
+    /** Make cells actionable: each becomes a `role="button"` that fires `select` on click or Enter/Space. */
+    selectable?: boolean;
+    label?: string;
+    /** Fired when a cell is activated (only when `selectable`), carrying the row, column, value, and indices. */
+    onselect?: (event: CustomEvent<{
+        row: string;
+        col: string;
+        value: number;
+        rowIndex: number;
+        colIndex: number;
+    }>) => void;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Heatmap: import("svelte").Component<Props, {}, "">;
+type Heatmap = ReturnType<typeof Heatmap>;
+export default Heatmap;