@sveltier/ui 0.0.0-stage → 0.1.0-alpha.1

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	// A number picked along a track, with its label, its value and validation. See SliderProps.
+	import { untrack } from 'svelte';
+	import { DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './slider.css';
+	import type { SliderDefaults, SliderProps } from './types.js';
+
+	let {
+		color,
+		size,
+		density,
+		disabled,
+		value = $bindable(),
+		min = 0,
+		max = 100,
+		step = 1,
+		ticks,
+		format,
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		id: idProp,
+		'aria-describedby': describedBy,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: SliderProps = $props();
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+	const resolve = useDefaults<SliderDefaults>('Slider', {
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		disabled: false
+	});
+	const p = $derived(resolve({ color, size, density, disabled }));
+	const locale = useLocale();
+
+	const current = $derived(value ?? min);
+	// A form reset goes back to the value the slider started at.
+	const initial = untrack(() => value ?? min);
+	// Where a value sits along the track, from 0 to 1.
+	const along = (at: number) =>
+		max > min ? Math.min(1, Math.max(0, (at - min) / (max - min))) : 0;
+
+	// Steps in decimals add up with float errors (0.1 + 0.2), so tick values are rounded to the
+	// decimals of min and step, the same values the input stops at.
+	const decimals = (at: number) => `${at}`.split('.')[1]?.length ?? 0;
+	const marks = $derived.by((): Array<{ value: number; label?: string }> => {
+		if (!ticks) return [];
+		if (ticks !== true) {
+			return ticks.map((tick) => (typeof tick === 'number' ? { value: tick } : tick));
+		}
+		if (!(step > 0) || max <= min) return [];
+		const places = Math.max(decimals(min), decimals(step));
+		const count = Math.floor((max - min) / step + 1e-9);
+		return Array.from({ length: count + 1 }, (_, index) => ({
+			value: Number((min + index * step).toFixed(places))
+		}));
+	});
+
+	const tickLabel = $derived(marks.find((mark) => mark.value === current && mark.label)?.label);
+	const text = $derived(format?.(current) ?? tickLabel ?? locale.formatNumber(current));
+
+	const field = createField<number>({
+		value: () => current,
+		// A range always holds a value; the browser keeps it between min and max, on a step.
+		empty: () => false,
+		check: () => undefined,
+		rules: () => rules,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	const message = $derived(typeof field.error === 'string' ? field.error : undefined);
+
+	if (DEV) $effect(() => warnUnnamed('Slider', ref));
+
+	// Letting go of the thumb, or a key step, finishes an edit, so it also counts as leaving.
+	function committed() {
+		field.changed();
+		field.left();
+	}
+</script>
+
+<div
+	class={[
+		'sv-slider',
+		sharedClasses(p, 'Slider'),
+		field.error !== false && 'sv-slider--invalid',
+		p.disabled && 'sv-slider--disabled',
+		className
+	]}
+	{style}
+	style:--sv-slider-fraction={along(current)}
+	oninput={field.changed}
+	onchange={committed}
+>
+	{#if label}
+		<div class="sv-slider__header">
+			<label class="sv-slider__label" for={id}>{label}</label>
+			<!-- Shown for sight; screen readers hear the slider's own value. -->
+			<span class="sv-slider__value" aria-hidden="true">{text}</span>
+		</div>
+	{/if}
+	<input
+		bind:this={ref}
+		defaultValue={initial}
+		{...rest}
+		{id}
+		type="range"
+		class="sv-slider__input"
+		{min}
+		{max}
+		{step}
+		disabled={p.disabled}
+		aria-describedby={[describedBy, message ? `${id}-error` : hint ? `${id}-hint` : undefined]
+			.filter(Boolean)
+			.join(' ') || undefined}
+		aria-invalid={field.error !== false || undefined}
+		aria-valuetext={format || tickLabel ? text : undefined}
+		bind:value={() => current, (next: number) => (value = next)}
+	/>
+	{#if marks.length}
+		<div class="sv-slider__ticks" aria-hidden="true">
+			{#each marks as mark (mark.value)}
+				<span
+					class={[
+						'sv-slider__tick',
+						mark.value <= min && 'sv-slider__tick--start',
+						mark.value >= max && 'sv-slider__tick--end'
+					]}
+					style:--sv-slider-at={along(mark.value)}
+					>{#if mark.label}<span class="sv-slider__tick-label">{mark.label}</span>{/if}</span
+				>
+			{/each}
+		</div>
+	{/if}
+	{#if hint && !message}<p class="sv-slider__hint" id="{id}-hint">{hint}</p>{/if}
+	<!-- Announces an error that appears after the user has moved on. -->
+	<div aria-live="polite">
+		{#if message}<p class="sv-slider__error" id="{id}-error">{message}</p>{/if}
+	</div>
+</div>

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

@@ -0,0 +1,4 @@
+import type { SliderProps } from './types.js';
+declare const Slider: import("svelte").Component<SliderProps, {}, "ref" | "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Slider } from './Slider.svelte';
+export type { SliderDefaults, SliderProps, SliderTick } from './types.js';

package/dist/components/Slider/index.js

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.svelte';

package/dist/components/Slider/slider.css

@@ -0,0 +1,206 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * A label row with the value at its end, the platform's range input, ticks and a hint or an
+	 * error. The thumb is φ⁻¹·⁵ of the control height and the track a quarter of the thumb. The
+	 * filled part ends under the thumb's centre, which travels the track less one thumb.
+	 */
+	.sv-slider {
+		--sv-slider-thumb: calc(var(--sv-size-height) * 0.472);
+		--sv-slider-track: calc(var(--sv-slider-thumb) * 0.236);
+		--sv-slider-fill: calc(
+			var(--sv-slider-thumb) / 2 + var(--sv-slider-fraction) * (100% - var(--sv-slider-thumb))
+		);
+		display: flex;
+		flex-direction: column;
+		min-inline-size: 0;
+		color: var(--sv-color-text);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-size-text);
+		line-height: var(--sv-leading-snug);
+	}
+
+	.sv-slider--invalid {
+		--sv-color: var(--sv-color-error);
+	}
+
+	.sv-slider__header {
+		display: flex;
+		gap: var(--sv-space-8);
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	/* The theme's label voice, as a field's label. */
+	.sv-slider__label {
+		font-size: var(--sv-label-size);
+		font-weight: var(--sv-weight-medium);
+		letter-spacing: var(--sv-label-tracking);
+		text-transform: var(--sv-label-transform);
+	}
+
+	.sv-slider__value {
+		font-weight: var(--sv-weight-medium);
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* The input is the press target, at least 24px tall. */
+	.sv-slider__input {
+		box-sizing: border-box;
+		inline-size: 100%;
+		block-size: max(1.5rem, var(--sv-size-height) * var(--sv-density) * 0.618);
+		margin: 0;
+		padding: 0;
+		border-radius: var(--sv-radius-sm);
+		background: transparent;
+		cursor: pointer;
+		appearance: none;
+	}
+
+	.sv-slider__input:focus-visible {
+		outline-color: var(--sv-color);
+	}
+
+	.sv-slider__input:disabled {
+		cursor: not-allowed;
+	}
+
+	/* Chromium and Safari: the filled part is a gradient on the track. */
+	.sv-slider__input::-webkit-slider-runnable-track {
+		block-size: var(--sv-slider-track);
+		border-radius: var(--sv-radius-full);
+		background: linear-gradient(
+			to right,
+			var(--sv-color) var(--sv-slider-fill),
+			var(--sv-color-border-strong) var(--sv-slider-fill)
+		);
+	}
+
+	/* An attribute selector, as minifiers rewrite :dir() into language guesses. */
+	:where([dir='rtl']) .sv-slider__input::-webkit-slider-runnable-track {
+		background: linear-gradient(
+			to left,
+			var(--sv-color) var(--sv-slider-fill),
+			var(--sv-color-border-strong) var(--sv-slider-fill)
+		);
+	}
+
+	.sv-slider__input::-webkit-slider-thumb {
+		box-sizing: border-box;
+		inline-size: var(--sv-slider-thumb);
+		block-size: var(--sv-slider-thumb);
+		margin-block-start: calc((var(--sv-slider-track) - var(--sv-slider-thumb)) / 2);
+		border: calc(var(--sv-hairline) * 2) solid var(--sv-color);
+		border-radius: var(--sv-radius-full);
+		background: var(--sv-color-surface);
+		appearance: none;
+	}
+
+	/* Firefox draws the filled part itself. */
+	.sv-slider__input::-moz-range-track {
+		block-size: var(--sv-slider-track);
+		border-radius: var(--sv-radius-full);
+		background: var(--sv-color-border-strong);
+	}
+
+	.sv-slider__input::-moz-range-progress {
+		block-size: var(--sv-slider-track);
+		border-radius: var(--sv-radius-full);
+		background: var(--sv-color);
+	}
+
+	.sv-slider__input::-moz-range-thumb {
+		box-sizing: border-box;
+		inline-size: var(--sv-slider-thumb);
+		block-size: var(--sv-slider-thumb);
+		border: calc(var(--sv-hairline) * 2) solid var(--sv-color);
+		border-radius: var(--sv-radius-full);
+		background: var(--sv-color-surface);
+	}
+
+	/* Hover and press: a halo in the accent around the thumb. */
+	@media (hover: hover) {
+		.sv-slider__input:enabled:hover::-webkit-slider-thumb {
+			box-shadow: 0 0 0 calc(var(--sv-slider-thumb) * 0.382)
+				color-mix(in oklch, var(--sv-color) var(--sv-state-hover), transparent);
+		}
+
+		.sv-slider__input:enabled:hover::-moz-range-thumb {
+			box-shadow: 0 0 0 calc(var(--sv-slider-thumb) * 0.382)
+				color-mix(in oklch, var(--sv-color) var(--sv-state-hover), transparent);
+		}
+	}
+
+	.sv-slider__input:enabled:active::-webkit-slider-thumb {
+		box-shadow: 0 0 0 calc(var(--sv-slider-thumb) * 0.382)
+			color-mix(in oklch, var(--sv-color) var(--sv-state-press), transparent);
+	}
+
+	.sv-slider__input:enabled:active::-moz-range-thumb {
+		box-shadow: 0 0 0 calc(var(--sv-slider-thumb) * 0.382)
+			color-mix(in oklch, var(--sv-color) var(--sv-state-press), transparent);
+	}
+
+	/*
+	 * Ticks share one grid cell, each pushed along by the same distance as the thumb's centre.
+	 * They are as wide as nothing, so a label centres on its tick; the end labels lean inwards.
+	 */
+	.sv-slider__ticks {
+		display: grid;
+	}
+
+	.sv-slider__tick {
+		display: flex;
+		flex-direction: column;
+		grid-area: 1 / 1;
+		align-items: center;
+		inline-size: 0;
+		margin-inline-start: calc(
+			var(--sv-slider-thumb) / 2 + var(--sv-slider-at) * (100% - var(--sv-slider-thumb))
+		);
+	}
+
+	.sv-slider__tick--start {
+		align-items: flex-start;
+	}
+
+	.sv-slider__tick--end {
+		align-items: flex-end;
+	}
+
+	.sv-slider__tick::before {
+		content: '';
+		inline-size: var(--sv-hairline);
+		block-size: 0.382em;
+		background-color: var(--sv-color-border-strong);
+	}
+
+	.sv-slider__tick-label {
+		margin-block-start: var(--sv-space-3);
+		color: var(--sv-color-text-muted);
+		font-size: var(--sv-text-xs);
+		white-space: nowrap;
+	}
+
+	/* Padding, not margin: an app's paragraph reset (p { margin: 0 }) would win over a layer. */
+	.sv-slider__hint,
+	.sv-slider__error {
+		margin: 0;
+		padding-block-start: var(--sv-space-5);
+		font-size: var(--sv-text-xs);
+	}
+
+	.sv-slider__hint {
+		color: var(--sv-color-text-muted);
+	}
+
+	.sv-slider__error {
+		color: var(--sv-color-error);
+	}
+
+	/* The hint stays legible when the slider is off: it often says why. */
+	.sv-slider--disabled > :is(.sv-slider__header, .sv-slider__input, .sv-slider__ticks) {
+		opacity: 0.382;
+	}
+}

package/dist/components/Slider/types.d.ts

@@ -0,0 +1,102 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { FieldError, Rule, ValidateOn } from '../../core/form/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Size } from '../../core/props/types.js';
+/** The Slider props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface SliderDefaults {
+    /**
+     * The colour of the filled part of the track and of the thumb's ring. An invalid slider uses
+     * `error`.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * The size of the thumb, the track and the text.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height of the slider's row, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Mutes the slider and disables its input.
+     * @default false
+     */
+    disabled: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Slider: SliderDefaults;
+    }
+}
+/** A labelled tick under a Slider's track. */
+export interface SliderTick {
+    value: number;
+    /** What the tick says. Read out as the slider's value while it sits on the tick. */
+    label: string;
+}
+type SliderOwnProps = Partial<SliderDefaults> & {
+    /**
+     * The value, between `min` and `max`, on a step. Bindable.
+     * @default min
+     */
+    value?: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /**
+     * The distance between the values the slider stops at.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Marks under the track: `true` for every step, a list of values, or values with labels such
+     * as `{ value: 50, label: 'Balanced' }`.
+     */
+    ticks?: boolean | readonly number[] | readonly SliderTick[];
+    /**
+     * How the value reads, beside the label and to screen readers, for example
+     * `(value) => value + '%'`. Defaults to the number in the locale's format, or the label of the
+     * tick the slider sits on.
+     */
+    format?: (value: number) => string;
+    /** The visible label, linked to the input. Without it, name the slider with `aria-label`. */
+    label?: string;
+    /** Help under the slider. An error replaces it. */
+    hint?: string;
+    /**
+     * An error from outside the slider, such as the server's answer: a message, a list of which
+     * the first is shown, or `true` for an invalid state described elsewhere.
+     */
+    error?: FieldError;
+    /** Checks run in order on the value. The first message is shown. */
+    rules?: readonly Rule<number>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /** Inline style of the slider's root element. */
+    style?: string | null;
+};
+/**
+ * A number picked by dragging a thumb along a track: the platform's own range input, so the
+ * keyboard, touch, forms and right-to-left pages work as they always do. The value shows beside
+ * the label. A range always holds a value, so it takes no `required`. `class` and `style` apply
+ * to the root; `id`, `ref`, `name` and every other attribute go to the `<input type="range">`.
+ *
+ * @example
+ * <Slider
+ *   label="Risk"
+ *   name="risk"
+ *   step={25}
+ *   ticks={[
+ *     { value: 0, label: 'Careful' },
+ *     { value: 50, label: 'Balanced' },
+ *     { value: 100, label: 'Bold' }
+ *   ]}
+ *   bind:value={risk}
+ * />
+ */
+export type SliderProps = ElementProps<HTMLInputElement, Omit<HTMLInputAttributes, 'type' | 'children' | 'required'>, SliderOwnProps>;
+export {};

package/dist/components/Slider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	// A setting that is on or off, with its label beside it and validation. See SwitchProps.
+	import { untrack } from 'svelte';
+	import { DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import Choice from '../Choice/Choice.svelte';
+	import './switch.css';
+	import type { SwitchDefaults, SwitchProps } from './types.js';
+
+	let {
+		color,
+		size,
+		density,
+		disabled,
+		checked = $bindable(false),
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		id,
+		'aria-describedby': describedBy,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: SwitchProps = $props();
+
+	const resolve = useDefaults<SwitchDefaults>('Switch', {
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		disabled: false
+	});
+	const p = $derived(resolve({ color, size, density, disabled }));
+	const locale = useLocale();
+	// A form reset goes back to the state the switch started in.
+	const initial = untrack(() => checked ?? false);
+
+	const field = createField<boolean>({
+		value: () => checked ?? false,
+		// Rules run on a switch that is on only, as they run on a filled field only.
+		empty: (on) => !on,
+		check: (on) => (!on && required ? locale.t('required') : undefined),
+		rules: () => rules,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	if (DEV) $effect(() => warnUnnamed('Switch', ref));
+
+	// A toggle is a whole edit, so it also counts as leaving: the message shows at once, even in
+	// Safari, where a click does not focus the input.
+	function toggled() {
+		field.changed();
+		field.left();
+	}
+</script>
+
+<Choice
+	{id}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	disabled={p.disabled}
+	class={['sv-switch', sharedClasses(p, 'Switch'), className]}
+	{style}
+	onchange={toggled}
+>
+	{#snippet children(attributes)}
+		<span class="sv-switch__control">
+			<input
+				bind:this={ref}
+				defaultChecked={initial}
+				{...rest}
+				{...attributes}
+				aria-describedby={[describedBy, attributes['aria-describedby']].filter(Boolean).join(' ') ||
+					undefined}
+				type="checkbox"
+				role="switch"
+				class="sv-switch__input"
+				bind:checked
+			/>
+			<span class="sv-switch__track" aria-hidden="true"><span class="sv-switch__thumb"></span></span
+			>
+		</span>
+	{/snippet}
+</Choice>

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

@@ -0,0 +1,4 @@
+import type { SwitchProps } from './types.js';
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch.svelte';
+export type { SwitchDefaults, SwitchProps } from './types.js';

package/dist/components/Switch/index.js

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.svelte';