@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Progress.svelte

@@ -0,0 +1,65 @@
+<script module lang="ts">
+	/** What .progress is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'progress';
+
+	export const AXES = {
+		/* No size axis: a progress bar answers to the width it is given. */
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['segments', 'segment'] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes, HTMLProgressAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Segment {
+		/** Its share of the bar, against the others'. */
+		value: number;
+		/** A theme colour (`primary`, `warning`…) or any CSS colour (`color-mix(…)`). */
+		color?: string;
+		/** Read on hover, and by a screen reader. */
+		label?: string;
+	}
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color'>,
+			Pick<HTMLProgressAttributes, 'value' | 'max'> {
+		/** Cut the bar into parts, each as wide as its `value` among the others.
+		    The bar then stands for a split rather than a progress: `value` and
+		    `max` are ignored. */
+		segments?: Segment[];
+		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 {
+		class: klass = '',
+		value,
+		max = 100,
+		segments,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+{#if segments}
+	<div {...applied.rest} class={[classes, 'progress-segments']} role="img">
+		{#each segments as s, i (i)}
+			<span
+				class="progress-segment"
+				title={s.label}
+				style:--segment={s.value}
+				style:--segment-color={s.color && (/^[a-z]+$/.test(s.color) ? `var(--color-${s.color})` : s.color)}
+			></span>
+		{/each}
+	</div>
+{:else}
+	<progress {...applied.rest} class={classes} {value} {max}></progress>
+{/if}

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

@@ -0,0 +1,28 @@
+/** What .progress is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "progress";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["segments", "segment"];
+import type { HTMLAttributes, HTMLProgressAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Segment {
+    /** Its share of the bar, against the others'. */
+    value: number;
+    /** A theme colour (`primary`, `warning`…) or any CSS colour (`color-mix(…)`). */
+    color?: string;
+    /** Read on hover, and by a screen reader. */
+    label?: string;
+}
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color'>, Pick<HTMLProgressAttributes, 'value' | 'max'> {
+    /** Cut the bar into parts, each as wide as its `value` among the others.
+        The bar then stands for a split rather than a progress: `value` and
+        `max` are ignored. */
+    segments?: Segment[];
+    class?: string;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/RadialProgress.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+	/** What .radial-progress is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'radial-progress';
+
+	export const AXES = {
+		/* The ring takes its colour from the family, not from a variant. */
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	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>, HTMLAttributes<HTMLDivElement> {
+		/** 0–100. */
+		value?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	// 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 {
+		value = 0,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<div
+	{...applied.rest}
+	class={classes}
+	style:--value={value}
+	role="progressbar"
+	aria-valuenow={value}
+>
+	{#if children}{@render children()}{:else}{value}%{/if}
+</div>

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

@@ -0,0 +1,20 @@
+/** What .radial-progress is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "radial-progress";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+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>, HTMLAttributes<HTMLDivElement> {
+    /** 0–100. */
+    value?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const RadialProgress: import("svelte").Component<Props, {}, "">;
+type RadialProgress = ReturnType<typeof RadialProgress>;
+export default RadialProgress;

package/dist/components/Radio.svelte

@@ -0,0 +1,50 @@
+<script module lang="ts">
+	/** What .radio is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'radio';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		shape: ['square']
+	} 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;
+		/** The value this radio contributes when it is the one selected. */
+		value?: string | number;
+		/** Bound across the whole set: it holds the selected value. */
+		group?: 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,
+		group = $bindable(),
+		value,
+		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="radio" {...applied.rest} class={classes} bind:group {value} />
+{#if hint}<p class="validator-hint">{@render hint()}</p>{/if}

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

@@ -0,0 +1,28 @@
+/** What .radio is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "radio";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly shape: readonly ["square"];
+};
+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;
+    /** The value this radio contributes when it is the one selected. */
+    value?: string | number;
+    /** Bound across the whole set: it holds the selected value. */
+    group?: string | number;
+}
+declare const Radio: import("svelte").Component<Props, {}, "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/Range.svelte

@@ -0,0 +1,53 @@
+<script module lang="ts">
+	/** What .range is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'range';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} 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;
+		value?: number;
+		min?: number;
+		max?: 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,
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, validator && 'validator', klass));
+
+	/* How far the value is along the track, for a family that paints the
+	   filled part itself (`data-fill`) rather than with the thumb's shadow. */
+	let pct = $derived(max > min ? Math.min(100, Math.max(0, ((Number(value) - min) / (max - min)) * 100)) : 0);
+</script>
+
+<input type="range" {...applied.rest} {min} {max} class={classes} data-fill style:--range-pct="{pct}%" bind:value />
+{#if hint}<p class="validator-hint">{@render hint()}</p>{/if}

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

@@ -0,0 +1,26 @@
+/** What .range is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "range";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+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;
+    value?: number;
+    min?: number;
+    max?: number;
+}
+declare const Range: import("svelte").Component<Props, {}, "value">;
+type Range = ReturnType<typeof Range>;
+export default Range;

package/dist/components/Rating.svelte

@@ -0,0 +1,90 @@
+<script module lang="ts">
+	/** What .rating is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'rating';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {
+		readonly: 'Show the score; no picking.'
+	} as const;
+	export const PARTS = ['item'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A whole-number score picked from a row of icons — real radios, so it
+	 * submits with a form and the arrow keys move along it.
+	 *
+	 * The icon is a CSS mask, a star by default; `mask` takes another
+	 * (`url(heart.svg)`). `value` is bindable: it is the field's own value.
+	 */
+	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<HTMLDivElement>, 'color' | 'onchange'> {
+		/** The score, 0 for none. Bindable. */
+		value?: number;
+		/** How many icons. */
+		max?: number;
+		/** The radios' name, for a form. */
+		name?: string;
+		/** Another icon, as a CSS image: `url(…)`. */
+		mask?: string;
+		disabled?: boolean;
+		/** The group's accessible name. */
+		label?: string;
+		/** One item's accessible name. */
+		itemLabel?: (n: number) => string;
+		/** After the user picked a score. */
+		onChange?: (value: number) => void;
+		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 {
+		value = $bindable(0),
+		max = 5,
+		name = `rating-${Math.random().toString(36).slice(2, 9)}`,
+		mask,
+		disabled = false,
+		label = 'Rating',
+		itemLabel = (n: number) => `${n} / ${max}`,
+		onChange,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+	/* Read back from the classes, the one place the axes are resolved. */
+	let locked = $derived(classes.includes(`${PREFIX}-readonly`));
+</script>
+
+<div
+	{...applied.rest}
+	class={classes}
+	role="radiogroup"
+	aria-label={label}
+	style={mask ? `--rating-mask: ${mask};` : undefined}
+>
+	{#each { length: max }, i (i)}
+		<input
+			type="radio"
+			class="rating-item"
+			{name}
+			value={i + 1}
+			aria-label={itemLabel(i + 1)}
+			checked={value === i + 1}
+			disabled={disabled || locked}
+			onchange={() => {
+				value = i + 1;
+				onChange?.(value);
+			}}
+		/>
+	{/each}
+</div>

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

@@ -0,0 +1,41 @@
+/** What .rating is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "rating";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {
+    readonly readonly: "Show the score; no picking.";
+};
+export declare const PARTS: readonly ["item"];
+/**
+     * A whole-number score picked from a row of icons — real radios, so it
+     * submits with a form and the arrow keys move along it.
+     *
+     * The icon is a CSS mask, a star by default; `mask` takes another
+     * (`url(heart.svg)`). `value` is bindable: it is the field's own value.
+     */
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onchange'> {
+    /** The score, 0 for none. Bindable. */
+    value?: number;
+    /** How many icons. */
+    max?: number;
+    /** The radios' name, for a form. */
+    name?: string;
+    /** Another icon, as a CSS image: `url(…)`. */
+    mask?: string;
+    disabled?: boolean;
+    /** The group's accessible name. */
+    label?: string;
+    /** One item's accessible name. */
+    itemLabel?: (n: number) => string;
+    /** After the user picked a score. */
+    onChange?: (value: number) => void;
+    class?: string;
+}
+declare const Rating: import("svelte").Component<Props, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;