@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Tabs.svelte.d.ts

@@ -0,0 +1,80 @@
+/** What .tabs is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    One namespace, `tabs`: the strip AND the tabs in it (ADR 0009). The
+    component draws every tab, so `.tabs-item` and its states are PARTS.
+    A panel is rendered right after its tab because the CSS reaches it with
+    `+` — moving it elsewhere would break the selector. */
+export declare const PREFIX = "tabs";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["border", "box", "lift"];
+    readonly placement: readonly ["top", "bottom"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["item", "item-active", "item-disabled", "item-content", "indicator"];
+import type { Snippet } from 'svelte';
+/** One tab, and optionally the panel it reveals. */
+export interface TabItem<V = string | number> {
+    /** The tab's text, or a snippet drawing whatever belongs in its place. */
+    label: string | Snippet;
+    /** What identifies the tab when the strip is driven by `value` rather than by index. */
+    value?: V;
+    /** Unreachable, and drawn as such. */
+    disabled?: boolean;
+    /** What the tab shows when selected. Omit to place panels yourself. */
+    content?: Snippet;
+}
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<V extends string | number>(): {
+    props: {
+        readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        readonly variant?: "border" | "box" | "lift" | undefined;
+        readonly placement?: "top" | "bottom" | undefined;
+    } & {} & {
+        background?: string;
+    } & HTMLAttributes<HTMLDivElement> & {
+        /**
+         * The tabs, in order. A tab's `label` takes a snippet as readily as a
+         * string, for the one tab that carries an icon or a count.
+         */
+        tabs?: TabItem<V>[];
+        /**
+         * How to draw the inside of every tab. Written once for the whole strip;
+         * a tab whose own `label` is a snippet skips it.
+         */
+        tab?: Snippet<[TabItem<V>]>;
+        /** Index of the selected tab. Bindable, so a parent can drive it. */
+        active?: number;
+        /** `value` of the selected tab, for tabs keyed by their own id rather than by
+            position. Bindable. When set, it decides the selection over `active`. */
+        value?: V;
+        /** Called with the new index, and the tab's `value`, when a tab is chosen. */
+        onSelect?: (index: number, value: V | undefined) => void;
+        /** Slide the selection from one tab to the next. Not with `lift`, whose
+            tab opens into its panel. */
+        animated?: boolean;
+        class?: string;
+    };
+    exports: {};
+    bindings: "active" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string | number> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "active" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tabs: $$IsomorphicComponent;
+type Tabs<V extends string | number> = InstanceType<typeof Tabs<V>>;
+export default Tabs;

package/dist/components/Text.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+	/** What .text is made of, classified. */
+	export const PREFIX = 'text';
+
+	/* Two axes rather than one product. `s` carries the size AND the leading
+	   that belongs with it, `b` carries the weight; they never interacted, so
+	   the twelve `.text-sN-bN` classes were twelve ways of saying seven
+	   things. */
+	export const AXES = {
+		s: ['1', '2', '3', '4'],
+		b: ['1', '2', '3'],
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A paragraph.
+	 *
+	 * No `level`: a paragraph has no heading level to pick. It renders `<p>`,
+	 * and a `<span>` would be a different prop on the day something needs one.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLParagraphElement>, 'color'> {
+		class?: string;
+		children?: Snippet;
+	}
+
+	/* Both defaulted: `.text` alone is not a class, so a paragraph with no
+	   props still has to name a size and a weight to have either. */
+	let { s = '2', b = '3', class: klass = '', children, ...axes }: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, { ...axes, s, b }));
+	let classes = $derived(cx(applied.classes, klass));
+</script>
+
+<p class={classes} {...applied.rest}>{@render children?.()}</p>

package/dist/components/Text.svelte.d.ts

@@ -0,0 +1,25 @@
+/** What .text is made of, classified. */
+export declare const PREFIX = "text";
+export declare const AXES: {
+    readonly s: readonly ["1", "2", "3", "4"];
+    readonly b: readonly ["1", "2", "3"];
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+/**
+     * A paragraph.
+     *
+     * No `level`: a paragraph has no heading level to pick. It renders `<p>`,
+     * and a `<span>` would be a different prop on the day something needs one.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLParagraphElement>, 'color'> {
+    class?: string;
+    children?: Snippet;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/Textarea.svelte

@@ -0,0 +1,76 @@
+<script module lang="ts">
+	/** What .textarea is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'textarea';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		variant: ['ghost']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	// `size` is ours — the HTML attribute of the same name is a character count
+	// our CSS overrides anyway.
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLTextareaAttributes, 'size' | 'color'> {
+		/**
+		 * Colour the field by its own validity and reveal `hint` once the
+		 * browser marks it invalid. The CSS drives this off `:user-invalid`,
+		 * so it only fires after the visitor has actually had a go.
+		 */
+		validator?: boolean;
+		/**
+		 * Shown under the field when it is invalid. It has to be the field's
+		 * next sibling for the CSS to reach it, which is the whole reason this
+		 * is a prop and not something you write yourself.
+		 */
+		hint?: Snippet;
+		/**
+		 * An error from outside (the server said no): marks the field invalid and
+		 * shows this, for as long as it is given. The parent owns it.
+		 */
+		error?: string | null;
+		/** The `<textarea>` itself. Bindable. */
+		element?: HTMLTextAreaElement;
+		class?: string;
+		value?: string | number;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		validator = false,
+		hint,
+		error = null,
+		element = $bindable(),
+		disabled = false,
+		value = $bindable(''),
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let failed = $derived(!disabled && !!error);
+	let classes = $derived(cx(PREFIX, applied.classes, (validator || failed) && 'validator', klass));
+
+	/* An error from outside is the field's validity too: a form holding it
+	   does not submit. */
+	$effect(() => {
+		element?.setCustomValidity(failed ? (error ?? '') : '');
+	});
+</script>
+
+<textarea aria-invalid={failed ? 'true' : undefined} {...applied.rest} {disabled} bind:this={element} class={classes} bind:value></textarea>
+{#if failed}
+	<p class="validator-hint">{error}</p>
+{:else if hint}
+	<p class="validator-hint">{@render hint()}</p>
+{/if}

package/dist/components/Textarea.svelte.d.ts

@@ -0,0 +1,39 @@
+/** What .textarea is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "textarea";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["ghost"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { Snippet } from 'svelte';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLTextareaAttributes, 'size' | 'color'> {
+    /**
+     * Colour the field by its own validity and reveal `hint` once the
+     * browser marks it invalid. The CSS drives this off `:user-invalid`,
+     * so it only fires after the visitor has actually had a go.
+     */
+    validator?: boolean;
+    /**
+     * Shown under the field when it is invalid. It has to be the field's
+     * next sibling for the CSS to reach it, which is the whole reason this
+     * is a prop and not something you write yourself.
+     */
+    hint?: Snippet;
+    /**
+     * An error from outside (the server said no): marks the field invalid and
+     * shows this, for as long as it is given. The parent owns it.
+     */
+    error?: string | null;
+    /** The `<textarea>` itself. Bindable. */
+    element?: HTMLTextAreaElement;
+    class?: string;
+    value?: string | number;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value" | "element">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/Title.svelte

@@ -0,0 +1,46 @@
+<script module lang="ts">
+	/** What .title is made of, classified. */
+	export const PREFIX = 'title';
+
+	/* A title has ONE size — that is what makes it the title. Its colour is an
+	   axis like every other component's, and the only reason text had none
+	   before is that the file shipped no colour at all. */
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * The page's heading.
+	 *
+	 * `level` picks the TAG, nothing else — `<h1>` … `<h6>`, and no class
+	 * changes. The semantic level and the visual size are two different
+	 * questions, and welding them is exactly what a set of `<H1>` … `<H6>`
+	 * components would do: an `<h3>` opening a section can legitimately be
+	 * large, and a small `<h1>` is a real design. So the tag is yours and the
+	 * look is the class.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'> {
+		/** Which heading tag to render. Purely semantic; the look never moves. */
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { level = 1, class: klass = '', children, ...axes }: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<svelte:element this={`h${level}`} class={classes} {...applied.rest}>
+	{@render children?.()}
+</svelte:element>

package/dist/components/Title.svelte.d.ts

@@ -0,0 +1,29 @@
+/** What .title is made of, classified. */
+export declare const PREFIX = "title";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+/**
+     * The page's heading.
+     *
+     * `level` picks the TAG, nothing else — `<h1>` … `<h6>`, and no class
+     * changes. The semantic level and the visual size are two different
+     * questions, and welding them is exactly what a set of `<H1>` … `<H6>`
+     * components would do: an `<h3>` opening a section can legitimately be
+     * large, and a small `<h1>` is a real design. So the tag is yours and the
+     * look is the class.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'> {
+    /** Which heading tag to render. Purely semantic; the look never moves. */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    class?: string;
+    children?: Snippet;
+}
+declare const Title: import("svelte").Component<Props, {}, "">;
+type Title = ReturnType<typeof Title>;
+export default Title;

package/dist/components/Toast.svelte

@@ -0,0 +1,154 @@
+<script module lang="ts">
+	/** What .toast is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'toast';
+
+	export const AXES = {
+		/* Either one pins the stack to a corner; neither leaves it in the flow. */
+		side: ['top', 'bottom'],
+		align: ['start', 'center', 'end']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+
+	/** The colours an alert has an icon for, and any other the family ships. */
+	export type ToastColor = 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+
+	export interface ToastOptions {
+		message: string;
+		title?: string;
+		color?: ToastColor;
+		/** Milliseconds on screen. `0` keeps it until dismissed. Default 5000. */
+		duration?: number;
+		/** One button inside the alert. Clicking it also dismisses the alert. */
+		action?: { label: string; onClick: () => void };
+	}
+
+	interface Item extends ToastOptions {
+		id: number;
+		duration: number;
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * A stack of alerts. Bind the component and call `add()` to push one;
+	 * each is dismissible and leaves on its own after `duration`, its
+	 * countdown paused while the pointer is over it or focus is inside it.
+	 *
+	 * With `side` or `align` the stack is pinned to that corner of the
+	 * viewport; without, it sits in the flow where it is placed.
+	 */
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { flip } from 'svelte/animate';
+	import { fly } from 'svelte/transition';
+	import Alert from './Alert.svelte';
+	import Button from './Button.svelte';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+		/** The region's accessible name. */
+		label?: string;
+		/** Each close button's accessible name. */
+		dismissLabel?: string;
+		/** At most this many alerts; the oldest goes first. */
+		max?: number;
+		class?: string;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		label = 'Notifications',
+		dismissLabel = 'Dismiss',
+		max = Infinity,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+	let top = $derived(classes.includes(`${PREFIX}-top`));
+
+	let items: Item[] = $state([]);
+	let next = 1;
+
+	/** Push an alert. Returns its id, for `dismiss`. */
+	export function add(options: string | ToastOptions): number {
+		const o = typeof options === 'string' ? { message: options } : options;
+		const id = next++;
+		items.push({ ...o, id, duration: o.duration ?? 5000 });
+		if (items.length > max) items.splice(0, items.length - max);
+		return id;
+	}
+
+	/** Remove an alert now. Unknown ids are ignored. */
+	export function dismiss(id: number): void {
+		const i = items.findIndex((t) => t.id === id);
+		if (i >= 0) items.splice(i, 1);
+	}
+
+	/** Remove every alert. */
+	export function clear(): void {
+		items.length = 0;
+	}
+
+	/** Runs an alert's countdown, paused while hovered or focused. */
+	function countdown(node: HTMLElement, t: Item) {
+		if (!t.duration) return;
+		let left = t.duration;
+		let started = Date.now();
+		let timer: ReturnType<typeof setTimeout> | undefined;
+		let held = 0;
+		const run = () => {
+			started = Date.now();
+			timer = setTimeout(() => dismiss(t.id), left);
+		};
+		const hold = () => {
+			if (held++ === 0 && timer) {
+				clearTimeout(timer);
+				timer = undefined;
+				left -= Date.now() - started;
+			}
+		};
+		const release = () => {
+			if (--held === 0) run();
+		};
+		node.addEventListener('pointerenter', hold);
+		node.addEventListener('pointerleave', release);
+		node.addEventListener('focusin', hold);
+		node.addEventListener('focusout', release);
+		run();
+		return {
+			destroy() {
+				clearTimeout(timer);
+				node.removeEventListener('pointerenter', hold);
+				node.removeEventListener('pointerleave', release);
+				node.removeEventListener('focusin', hold);
+				node.removeEventListener('focusout', release);
+			}
+		};
+	}
+</script>
+
+<section {...applied.rest} class={classes} aria-label={label} aria-live="polite">
+	{#each items as t (t.id)}
+		<div use:countdown={t} animate:flip={{ duration: 180 }} in:fly={{ y: top ? -16 : 16, duration: 180 }} out:fly={{ x: 24, duration: 160 }}>
+			{#snippet action()}
+				<Button
+					size="sm"
+					onclick={() => {
+						t.action?.onClick();
+						dismiss(t.id);
+					}}>{t.action?.label}</Button
+				>
+			{/snippet}
+			<!-- `as never`: any colour name goes; a family that lacks one simply
+			     draws the default alert, as a class it never ships does. -->
+			<Alert color={t.color as never} title={t.title} dismissible {dismissLabel} onDismiss={() => dismiss(t.id)} actions={t.action ? action : undefined}>
+				{t.message}
+			</Alert>
+		</div>
+	{/each}
+</section>

package/dist/components/Toast.svelte.d.ts

@@ -0,0 +1,49 @@
+/** What .toast is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "toast";
+export declare const AXES: {
+    readonly side: readonly ["top", "bottom"];
+    readonly align: readonly ["start", "center", "end"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+/** The colours an alert has an icon for, and any other the family ships. */
+export type ToastColor = 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export interface ToastOptions {
+    message: string;
+    title?: string;
+    color?: ToastColor;
+    /** Milliseconds on screen. `0` keeps it until dismissed. Default 5000. */
+    duration?: number;
+    /** One button inside the alert. Clicking it also dismisses the alert. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/**
+     * A stack of alerts. Bind the component and call `add()` to push one;
+     * each is dismissible and leaves on its own after `duration`, its
+     * countdown paused while the pointer is over it or focus is inside it.
+     *
+     * With `side` or `align` the stack is pinned to that corner of the
+     * viewport; without, it sits in the flow where it is placed.
+     */
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+    /** The region's accessible name. */
+    label?: string;
+    /** Each close button's accessible name. */
+    dismissLabel?: string;
+    /** At most this many alerts; the oldest goes first. */
+    max?: number;
+    class?: string;
+}
+declare const Toast: import("svelte").Component<Props, {
+    add: (options: string | ToastOptions) => number;
+    dismiss: (id: number) => void;
+    clear: () => void;
+}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/Toggle.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+	/** What .toggle is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'toggle';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* `track` colours the rail rather than the knob. It lands on the toggle
+		   itself (.toggle.toggle-track), so it is a variant, not a part. */
+		variant: ['track']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'color' | 'type'> {
+		/** Colour the control by its own validity and reveal `hint` when invalid. */
+		validator?: boolean;
+		/** Shown below once invalid. It must be the control's next sibling for the
+		    CSS to reach it, which is why it is a prop rather than your markup. */
+		hint?: Snippet;
+		class?: string;
+		checked?: boolean;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		validator = false,
+		hint,
+		checked = $bindable(false),
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, validator && 'validator', klass));
+</script>
+
+<input type="checkbox" {...applied.rest} class={classes} bind:checked />
+{#if hint}<p class="validator-hint">{@render hint()}</p>{/if}

package/dist/components/Toggle.svelte.d.ts

@@ -0,0 +1,25 @@
+/** What .toggle is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "toggle";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["track"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'color' | 'type'> {
+    /** Colour the control by its own validity and reveal `hint` when invalid. */
+    validator?: boolean;
+    /** Shown below once invalid. It must be the control's next sibling for the
+        CSS to reach it, which is why it is a prop rather than your markup. */
+    hint?: Snippet;
+    class?: string;
+    checked?: boolean;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;