@xtyle/svelte 0.5.0

package/dist/Progress.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone as Tone } from "@xtyle/core";
+
+	type ProgressVariant = "linear" | "circular";
+	type ProgressSize = "sm" | "md" | "lg";
+
+	interface Props {
+		variant?: ProgressVariant;
+		tone?: Tone;
+		size?: ProgressSize;
+		value?: number;
+		min?: number;
+		max?: number;
+		indeterminate?: boolean;
+		showValue?: boolean;
+		/** How `showValue` reads: `percent` (`80%`), `value` (the raw number), or `value-max` (`80/100`). */
+		valueFormat?: "percent" | "value" | "value-max";
+		/** Where the `showValue` readout sits: after the bar (`end`) or laid over the fill (`inset`). */
+		valuePosition?: "end" | "inset";
+		/** Tint the `showValue` readout with the active tone. */
+		colorizeValue?: boolean;
+		/** Report `role="meter"` (a capacity measurement) instead of `role="progressbar"` (a task). */
+		meter?: boolean;
+		ariaLabel?: string;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		variant = "linear",
+		tone = "accent",
+		size = "md",
+		value = 0,
+		min = 0,
+		max = 100,
+		indeterminate = false,
+		showValue = false,
+		valueFormat = "percent",
+		valuePosition = "end",
+		colorizeValue = false,
+		meter = false,
+		ariaLabel,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-progress
+	{...rest}
+	{variant}
+	{tone}
+	{size}
+	value={indeterminate ? undefined : value}
+	{min}
+	{max}
+	indeterminate={indeterminate || undefined}
+	show-value={showValue || undefined}
+	value-format={valueFormat !== "percent" ? valueFormat : undefined}
+	value-position={valuePosition !== "end" ? valuePosition : undefined}
+	colorize-value={colorizeValue || undefined}
+	meter={meter || undefined}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+>
+	{@render children?.()}
+</xtyle-progress>

package/dist/Progress.svelte.d.ts

@@ -0,0 +1,30 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone as Tone } from "@xtyle/core";
+type ProgressVariant = "linear" | "circular";
+type ProgressSize = "sm" | "md" | "lg";
+interface Props {
+    variant?: ProgressVariant;
+    tone?: Tone;
+    size?: ProgressSize;
+    value?: number;
+    min?: number;
+    max?: number;
+    indeterminate?: boolean;
+    showValue?: boolean;
+    /** How `showValue` reads: `percent` (`80%`), `value` (the raw number), or `value-max` (`80/100`). */
+    valueFormat?: "percent" | "value" | "value-max";
+    /** Where the `showValue` readout sits: after the bar (`end`) or laid over the fill (`inset`). */
+    valuePosition?: "end" | "inset";
+    /** Tint the `showValue` readout with the active tone. */
+    colorizeValue?: boolean;
+    /** Report `role="meter"` (a capacity measurement) instead of `role="progressbar"` (a task). */
+    meter?: boolean;
+    ariaLabel?: string;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/Radio.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size, FullTone as Tone } from "@xtyle/core";
+
+	interface Props {
+		tone?: Tone;
+		size?: Size;
+		name?: string;
+		value?: string;
+		checked?: boolean;
+		/** The selected value of the radio group, for `bind:group` across radios that share a `value`. */
+		group?: string;
+		disabled?: boolean;
+		invalid?: boolean;
+		label?: string;
+		labelledby?: string;
+		ariaLabel?: string;
+		onchange?: (event: Event) => void;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		tone = "accent",
+		size = "md",
+		name,
+		value,
+		checked = $bindable(false),
+		group = $bindable<string | undefined>(undefined),
+		disabled = false,
+		invalid = false,
+		label,
+		labelledby,
+		ariaLabel,
+		onchange,
+		children,
+		...rest
+	}: Props = $props();
+
+	// With `bind:group`, the group's selected value drives checked (native radio-group semantics); a
+	// standalone radio keeps its own two-way `checked`.
+	const isChecked = $derived(group !== undefined ? group === value : checked);
+
+	function handleChange(event: Event) {
+		const target = event.target as HTMLElement & { checked: boolean };
+		if (group !== undefined) {
+			if (target.checked && value !== undefined) group = value;
+		} else {
+			checked = target.checked;
+		}
+		onchange?.(event);
+	}
+</script>
+
+<xtyle-radio
+	{...rest}
+	{tone}
+	{size}
+	{name}
+	{value}
+	checked={isChecked || undefined}
+	disabled={disabled || undefined}
+	invalid={invalid || undefined}
+	{label}
+	labelledby={labelledby || undefined}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	onchange={handleChange}
+>
+	{@render children?.()}
+</xtyle-radio>

package/dist/Radio.svelte.d.ts

@@ -0,0 +1,24 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size, FullTone as Tone } from "@xtyle/core";
+interface Props {
+    tone?: Tone;
+    size?: Size;
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    /** The selected value of the radio group, for `bind:group` across radios that share a `value`. */
+    group?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    label?: string;
+    labelledby?: string;
+    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 Radio: import("svelte").Component<Props, {}, "checked" | "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/RadioGroup.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		orientation?: "vertical" | "horizontal";
+		label?: string;
+		labelledby?: string;
+		disabled?: 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 {
+		orientation = "vertical",
+		label,
+		labelledby,
+		disabled = false,
+		ariaLabel,
+		onchange,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-radio-group
+	{...rest}
+	{orientation}
+	{label}
+	labelledby={labelledby || undefined}
+	disabled={disabled || undefined}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	{onchange}
+>
+	{@render children?.()}
+</xtyle-radio-group>

package/dist/RadioGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+interface Props {
+    orientation?: "vertical" | "horizontal";
+    label?: string;
+    labelledby?: string;
+    disabled?: 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 RadioGroup: import("svelte").Component<Props, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/Section.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { FullTone } from "@xtyle/core";
+
+	type SectionTag = "section" | "div" | "header" | "footer";
+	type SectionVariant = "band" | "stage";
+	type SectionTone = "plain" | "quiet" | FullTone;
+	type SectionPadding = "none" | "sm" | "md" | "lg";
+
+	interface Props {
+		as?: SectionTag;
+		variant?: SectionVariant;
+		tone?: SectionTone;
+		bordered?: boolean;
+		padding?: SectionPadding;
+		label?: string;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		as = "section",
+		variant = "band",
+		tone = "plain",
+		bordered = false,
+		padding = "lg",
+		label,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<xtyle-section {...rest} {as} {variant} {tone} {padding} {label} bordered={bordered || undefined}>
+	{@render children?.()}
+</xtyle-section>

package/dist/Section.svelte.d.ts

@@ -0,0 +1,21 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { FullTone } from "@xtyle/core";
+type SectionTag = "section" | "div" | "header" | "footer";
+type SectionVariant = "band" | "stage";
+type SectionTone = "plain" | "quiet" | FullTone;
+type SectionPadding = "none" | "sm" | "md" | "lg";
+interface Props {
+    as?: SectionTag;
+    variant?: SectionVariant;
+    tone?: SectionTone;
+    bordered?: boolean;
+    padding?: SectionPadding;
+    label?: string;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Section: import("svelte").Component<Props, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/Segment.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		/** The value this segment selects; emitted on `change` and submitted with the form. */
+		value: string;
+		/** Accessible name for the segment, since its content is markup (an icon) rather than text. */
+		label?: string;
+		disabled?: boolean;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the segment. */
+		[key: string]: unknown;
+	}
+
+	let { value, label, disabled = false, children, ...rest }: Props = $props();
+
+	// `slot` rides in a spread object, not a literal `slot="segment"` attribute: Svelte statically
+	// rejects a literal `slot` on a component root (it can't prove the parent is a custom element),
+	// but this span always lands inside `<xtyle-segmented>` at runtime, where the slot is valid.
+	const attrs = $derived({ slot: "segment", value, label, disabled: disabled || undefined, ...rest });
+</script>
+
+<span {...attrs}>{@render children?.()}</span>

package/dist/Segment.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** The value this segment selects; emitted on `change` and submitted with the form. */
+    value: string;
+    /** Accessible name for the segment, since its content is markup (an icon) rather than text. */
+    label?: string;
+    disabled?: boolean;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the segment. */
+    [key: string]: unknown;
+}
+declare const Segment: import("svelte").Component<Props, {}, "">;
+type Segment = ReturnType<typeof Segment>;
+export default Segment;

package/dist/Segmented.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size, FullTone as Tone } from "@xtyle/core";
+
+	type SegmentOption = { value: string; label?: string; disabled?: boolean; badge?: string };
+
+	interface Props {
+		value?: string;
+		options?: string | ReadonlyArray<string | SegmentOption>;
+		disabled?: boolean;
+		size?: Size;
+		tone?: Tone;
+		label?: string;
+		labelledby?: string;
+		name?: string;
+		onchange?: (event: Event) => void;
+		/** `<Segment>` children for the rich-content mode (each holds an icon or other markup); they win
+		 * over `options` when both are given. Omit for the plain-text `options` bar. */
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let {
+		value = $bindable(""),
+		options,
+		disabled = false,
+		size = "md",
+		tone = "accent",
+		label,
+		labelledby,
+		name,
+		onchange,
+		children,
+		...rest
+	}: Props = $props();
+
+	let host: (HTMLElement & { options: string | ReadonlyArray<string | SegmentOption> }) | undefined = $state();
+
+	$effect(() => {
+		if (host && options != null) host.options = options;
+	});
+
+	function handleChange(event: Event) {
+		const target = event.currentTarget as HTMLElement & { value: string };
+		value = target.value;
+		onchange?.(event);
+	}
+</script>
+
+<xtyle-segmented
+	bind:this={host}
+	{...rest}
+	value={value || undefined}
+	options={typeof options === "string" ? options : undefined}
+	disabled={disabled || undefined}
+	{size}
+	{tone}
+	{label}
+	labelledby={labelledby || undefined}
+	{name}
+	onchange={handleChange}
+>{@render children?.()}</xtyle-segmented>

package/dist/Segmented.svelte.d.ts

@@ -0,0 +1,28 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size, FullTone as Tone } from "@xtyle/core";
+type SegmentOption = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    badge?: string;
+};
+interface Props {
+    value?: string;
+    options?: string | ReadonlyArray<string | SegmentOption>;
+    disabled?: boolean;
+    size?: Size;
+    tone?: Tone;
+    label?: string;
+    labelledby?: string;
+    name?: string;
+    onchange?: (event: Event) => void;
+    /** `<Segment>` children for the rich-content mode (each holds an icon or other markup); they win
+     * over `options` when both are given. Omit for the plain-text `options` bar. */
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Segmented: import("svelte").Component<Props, {}, "value">;
+type Segmented = ReturnType<typeof Segmented>;
+export default Segmented;

package/dist/Select.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+	import type { Size } from "@xtyle/core";
+
+	interface Props {
+		label?: string;
+		value?: string;
+		size?: Size;
+		name?: string;
+		disabled?: boolean;
+		invalid?: boolean;
+		required?: boolean;
+		error?: string;
+		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 = "",
+		value = $bindable(""),
+		size = "md",
+		name,
+		disabled = false,
+		invalid = false,
+		required = false,
+		error = "",
+		ariaLabel,
+		onchange,
+		children,
+		...rest
+	}: Props = $props();
+
+	function handleChange(event: Event) {
+		value = (event.target as HTMLElement & { value: string }).value;
+		onchange?.(event);
+	}
+</script>
+
+<xtyle-select
+	{...rest}
+	{label}
+	{value}
+	{size}
+	{name}
+	disabled={disabled || undefined}
+	invalid={invalid || undefined}
+	required={required || undefined}
+	{error}
+	aria-label={ariaLabel ?? (rest["aria-label"] as string | undefined)}
+	onchange={handleChange}
+>
+	{@render children?.()}
+</xtyle-select>

package/dist/Select.svelte.d.ts

@@ -0,0 +1,21 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+import type { Size } from "@xtyle/core";
+interface Props {
+    label?: string;
+    value?: string;
+    size?: Size;
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    error?: string;
+    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 Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/Separator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Snippet } from "svelte";
+
+	type Orientation = "horizontal" | "vertical";
+	type SeparatorVariant = "default" | "with-label";
+	type SeparatorSize = "thin" | "normal";
+
+	interface Props {
+		orientation?: Orientation;
+		variant?: SeparatorVariant;
+		size?: SeparatorSize;
+		children?: Snippet;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { orientation = "horizontal", variant = "default", size = "normal", children, ...rest }: Props = $props();
+</script>
+
+<xtyle-separator {...rest} {orientation} {variant} {size}>
+	{@render children?.()}
+</xtyle-separator>

package/dist/Separator.svelte.d.ts

@@ -0,0 +1,16 @@
+import "./register.js";
+import type { Snippet } from "svelte";
+type Orientation = "horizontal" | "vertical";
+type SeparatorVariant = "default" | "with-label";
+type SeparatorSize = "thin" | "normal";
+interface Props {
+    orientation?: Orientation;
+    variant?: SeparatorVariant;
+    size?: SeparatorSize;
+    children?: Snippet;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Separator: import("svelte").Component<Props, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/Skeleton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Size } from "@xtyle/core";
+
+	type SkeletonShape = "text" | "line" | "block" | "circle";
+
+	interface Props {
+		shape?: SkeletonShape;
+		size?: Size;
+		class?: string;
+		style?: string;
+		/** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+		[key: string]: unknown;
+	}
+
+	let { shape = "text", size = "md", class: extra, style, ...rest }: Props = $props();
+</script>
+
+<xtyle-skeleton {...rest} {shape} {size} class={extra} {style}></xtyle-skeleton>

package/dist/Skeleton.svelte.d.ts

@@ -0,0 +1,14 @@
+import "./register.js";
+import type { Size } from "@xtyle/core";
+type SkeletonShape = "text" | "line" | "block" | "circle";
+interface Props {
+    shape?: SkeletonShape;
+    size?: Size;
+    class?: string;
+    style?: string;
+    /** Any other attribute (`title`, `id`, `data-*`, `aria-*`, …) passes through to the element. */
+    [key: string]: unknown;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/Slider.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import "./register.js";
+	import type { Size, FullTone as Tone } from "@xtyle/core";
+
+	interface Props {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		size?: Size;
+		tone?: Tone;
+		label?: string;
+		labelledby?: string;
+		name?: string;
+		showValue?: boolean;
+		hideLabel?: boolean;
+		format?: ((value: number) => string) | null;
+		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(0),
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled = false,
+		size = "md",
+		tone = "accent",
+		label,
+		labelledby,
+		name,
+		showValue = false,
+		hideLabel = false,
+		format = null,
+		oninput,
+		onchange,
+		...rest
+	}: Props = $props();
+
+	let host: (HTMLElement & { value: number; format: ((value: number) => string) | null }) | undefined =
+		$state();
+
+	$effect(() => {
+		if (host) host.format = format;
+	});
+
+	function sync(event: Event) {
+		const target = event.currentTarget as HTMLElement & { value: number };
+		value = target.value;
+	}
+	function handleInput(event: Event) {
+		sync(event);
+		oninput?.(event);
+	}
+	function handleChange(event: Event) {
+		sync(event);
+		onchange?.(event);
+	}
+</script>
+
+<xtyle-slider
+	bind:this={host}
+	{...rest}
+	{value}
+	{min}
+	{max}
+	{step}
+	disabled={disabled || undefined}
+	{size}
+	{tone}
+	{label}
+	labelledby={labelledby || undefined}
+	{name}
+	show-value={showValue || undefined}
+	hide-label={hideLabel || undefined}
+	oninput={handleInput}
+	onchange={handleChange}
+></xtyle-slider>