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

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

@@ -0,0 +1,93 @@
+import type { HTMLFieldsetAttributes } 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 RadioGroup props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface RadioGroupDefaults {
+    /**
+     * The colour of the chosen radio. An invalid group uses `error`.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * The size of the radios and their labels.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height of each row, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Mutes the group and disables every radio in it.
+     * @default false
+     */
+    disabled: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        RadioGroup: RadioGroupDefaults;
+    }
+}
+/** One choice of a RadioGroup. */
+export interface RadioGroupOption<T extends string | number = string> {
+    /** The value the group binds to when this radio is chosen. */
+    value: T;
+    /** What the radio says. */
+    label: string;
+    /** Help under the label, read out with the radio. */
+    hint?: string;
+    disabled?: boolean;
+}
+type RadioGroupOwnProps<T extends string | number> = Partial<RadioGroupDefaults> & {
+    /** The choices, in order. */
+    options: readonly RadioGroupOption<T>[];
+    /** The chosen value, or `null` for none. Bindable. */
+    value?: T | null;
+    /** The question the radios answer, as the group's legend. Without it, use `aria-label`. */
+    label?: string;
+    /** Help under the radios. An error replaces it. */
+    hint?: string;
+    /**
+     * An error from outside the group, 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 after `required`, with the chosen value. The first message is shown. */
+    rules?: readonly Rule<T>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * A choice must be made. Adds an asterisk to the legend.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Lays the radios side by side, wrapping when they run out of room.
+     * @default false
+     */
+    inline?: boolean;
+    /** The name the radios submit their value under. Generated when not given. */
+    name?: string;
+};
+/**
+ * One choice among a few options, all shown: native radios sharing a name in a `<fieldset>`,
+ * whose `<legend>` is the label. The arrow keys move the choice, as the platform does. `class`,
+ * `style`, `ref` and other attributes go to the `<fieldset>`. For many options, use a
+ * NativeSelect.
+ *
+ * @example
+ * <RadioGroup
+ *   label="Pay out"
+ *   name="payout"
+ *   required
+ *   options={[
+ *     { value: 'daily', label: 'Every day' },
+ *     { value: 'weekly', label: 'Every Monday', hint: 'Fewer, larger transfers' }
+ *   ]}
+ *   bind:value={payout}
+ * />
+ */
+export type RadioGroupProps<T extends string | number = string> = ElementProps<HTMLFieldSetElement, Omit<HTMLFieldsetAttributes, 'children'>, RadioGroupOwnProps<T>>;
+export {};

package/dist/components/RadioGroup/types.js

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

package/dist/components/SegmentedControl/SegmentedControl.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" generics="T extends string | number">
+	// One choice among a few, as a radio group. See SegmentedControlProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import { rovingFocus } from '../../primitives/focus/roving-focus.js';
+	import './segmented-control.css';
+	import type {
+		SegmentedControlDefaults,
+		SegmentedControlOption,
+		SegmentedControlProps
+	} from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		options,
+		value = $bindable(),
+		onchange,
+		disabled = false,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: SegmentedControlProps<T> = $props();
+
+	const resolve = useDefaults<SegmentedControlDefaults>('SegmentedControl', {
+		variant: 'elevated',
+		color: 'neutral',
+		size: 'md',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ variant, color, size, density, rounded }));
+	const index = $derived(options.findIndex((option) => option.value === value));
+
+	// Selection follows focus, as in a radio group: arrows move and pick.
+	function pick(option: SegmentedControlOption<T>) {
+		if (disabled || option.disabled || option.value === value) return;
+		value = option.value;
+		onchange?.(option.value);
+	}
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	role="radiogroup"
+	class={['sv-segmented', sharedClasses(p, 'SegmentedControl'), className]}
+	style:--sv-segments={options.length}
+	style:--sv-segment={index}
+	{@attach rovingFocus({ orientation: 'horizontal' })}
+>
+	{#if index >= 0}<span class="sv-segmented__thumb" aria-hidden="true"></span>{/if}
+	{#each options as option (option.value)}
+		<button
+			type="button"
+			role="radio"
+			class="sv-segmented__option"
+			data-sv-item
+			aria-checked={option.value === value}
+			disabled={disabled || option.disabled}
+			onclick={() => pick(option)}
+			onfocus={() => pick(option)}
+		>
+			{option.label}
+		</button>
+	{/each}
+</div>

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

@@ -0,0 +1,25 @@
+import type { SegmentedControlProps } from './types.js';
+declare function $$render<T extends string | number>(): {
+    props: SegmentedControlProps<T>;
+    exports: {};
+    bindings: "ref" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SegmentedControl: $$IsomorphicComponent;
+type SegmentedControl<T extends string | number> = InstanceType<typeof SegmentedControl<T>>;
+export default SegmentedControl;

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

@@ -0,0 +1,2 @@
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export type { SegmentedControlDefaults, SegmentedControlOption, SegmentedControlProps } from './types.js';

package/dist/components/SegmentedControl/index.js

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

package/dist/components/SegmentedControl/segmented-control.css

@@ -0,0 +1,68 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * Segments share the width of the widest, so the thumb moves one segment per step with
+	 * translate alone. The selected segment is painted by the variant classes.
+	 */
+	.sv-segmented {
+		--sv-segmented-pad: var(--sv-space-3);
+		position: relative;
+		isolation: isolate;
+		display: inline-grid;
+		grid-auto-columns: 1fr;
+		grid-auto-flow: column;
+		box-sizing: border-box;
+		max-inline-size: 100%;
+		block-size: calc(var(--sv-size-height) * var(--sv-density));
+		padding: var(--sv-segmented-pad);
+		border-radius: var(--sv-rounded, var(--sv-radius-md));
+		background-color: var(--sv-color-surface-raised);
+		vertical-align: middle;
+	}
+
+	.sv-segmented__thumb {
+		position: absolute;
+		inset-block: var(--sv-segmented-pad);
+		inset-inline-start: var(--sv-segmented-pad);
+		z-index: -1;
+		inline-size: calc((100% - 2 * var(--sv-segmented-pad)) / var(--sv-segments));
+		border: var(--sv-hairline) solid var(--sv-variant-border);
+		border-radius: calc(var(--sv-rounded, var(--sv-radius-md)) - var(--sv-segmented-pad));
+		box-sizing: border-box;
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-variant-shadow);
+		translate: calc(var(--sv-segment) * 100%) 0;
+		transition: translate var(--sv-duration-normal) var(--sv-ease);
+	}
+
+	/* An attribute selector, as minifiers rewrite :dir() into language guesses. */
+	:where([dir='rtl']) .sv-segmented__thumb {
+		translate: calc(var(--sv-segment) * -100%) 0;
+	}
+
+	.sv-segmented__option {
+		min-inline-size: 0;
+		margin: 0;
+		padding: 0 calc(var(--sv-size-height) * var(--sv-density) * 0.382);
+		overflow: hidden;
+		border: 0;
+		border-radius: calc(var(--sv-rounded, var(--sv-radius-md)) - var(--sv-segmented-pad));
+		background: transparent;
+		color: var(--sv-color-text-muted);
+		font: var(--sv-weight-medium) var(--sv-size-text) / 1 var(--sv-font-ui);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.sv-segmented__option[aria-checked='true'] {
+		color: var(--sv-variant-fg);
+	}
+
+	.sv-segmented__option:disabled {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+}

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

@@ -0,0 +1,60 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Rounded, Size, Variant } from '../../core/props/types.js';
+/** The SegmentedControl props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface SegmentedControlDefaults {
+    /**
+     * How the selected segment is painted: a raised surface by default.
+     * @default 'elevated'
+     */
+    variant: Variant;
+    /**
+     * The colour of the selected segment.
+     * @default 'neutral'
+     */
+    color: Color;
+    /**
+     * Height and text size.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height and padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        SegmentedControl: SegmentedControlDefaults;
+    }
+}
+/** One choice of a SegmentedControl. */
+export interface SegmentedControlOption<T extends string | number = string> {
+    value: T;
+    /** What the segment says. */
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * One choice among a few options, side by side, as a radio group with one tab stop. Name it
+ * with `aria-label`.
+ */
+export type SegmentedControlProps<T extends string | number = string> = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<SegmentedControlDefaults> & {
+    /** The choices, in order. */
+    options: readonly SegmentedControlOption<T>[];
+    /** The chosen value. Bindable. */
+    value?: T;
+    /** Called with the value the user picks. */
+    onchange?: (value: T) => void;
+    /**
+     * Disables every option.
+     * @default false
+     */
+    disabled?: boolean;
+}>;

package/dist/components/SegmentedControl/types.js

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

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	// A loading placeholder. See SkeletonProps for the props.
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './skeleton.css';
+	import type { SkeletonProps } from './types.js';
+
+	let {
+		type = 'text',
+		lines = 1,
+		size = 'md',
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: SkeletonProps = $props();
+
+	const count = $derived(Math.max(1, Math.trunc(lines) || 1));
+</script>
+
+<span
+	bind:this={ref}
+	{...rest}
+	aria-hidden="true"
+	class={[
+		'sv-skeleton',
+		`sv-skeleton--${type}`,
+		type === 'circle' && sharedClasses({ size }, 'Skeleton'),
+		className
+	]}
+>
+	{#if type === 'text'}
+		{#each { length: count }, line (line)}<span class="sv-skeleton__line"></span>{/each}
+	{/if}
+</span>

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

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

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

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

package/dist/components/Skeleton/index.js

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

package/dist/components/Skeleton/skeleton.css

@@ -0,0 +1,70 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-skeleton,
+	.sv-skeleton__line {
+		position: relative;
+		display: block;
+		overflow: hidden;
+		border-radius: var(--sv-radius-sm);
+		background-color: var(--sv-color-surface-raised);
+	}
+
+	/* Lines as tall as the text around them, a φ⁻¹ gap apart. */
+	.sv-skeleton--text {
+		display: grid;
+		gap: 0.618em;
+		overflow: visible;
+		background-color: transparent;
+	}
+
+	.sv-skeleton__line {
+		block-size: 1em;
+	}
+
+	.sv-skeleton__line:last-child:not(:first-child) {
+		inline-size: 61.8%;
+	}
+
+	.sv-skeleton--rect {
+		inline-size: 100%;
+		aspect-ratio: 1.618;
+		/* The control radius, never rounder than a card, even where controls are pills. */
+		border-radius: min(var(--sv-radius-md), var(--sv-radius-lg));
+	}
+
+	.sv-skeleton--circle {
+		inline-size: var(--sv-size-height);
+		block-size: var(--sv-size-height);
+		border-radius: 50%;
+	}
+
+	/* A highlight sweeps across: transform only, and none under reduced motion. */
+	.sv-skeleton:not(.sv-skeleton--text)::after,
+	.sv-skeleton__line::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(
+			90deg,
+			transparent,
+			color-mix(in oklch, var(--sv-color-surface) 61.8%, transparent),
+			transparent
+		);
+		transform: translateX(-100%);
+		animation: sv-skeleton-sweep 1618ms var(--sv-ease) infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sv-skeleton::after,
+		.sv-skeleton__line::after {
+			display: none;
+		}
+	}
+
+	@keyframes sv-skeleton-sweep {
+		to {
+			transform: translateX(100%);
+		}
+	}
+}

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

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Size } from '../../core/props/types.js';
+/**
+ * A placeholder in the shape of content that is still loading. Hidden from assistive
+ * technology: mark the region that is loading with `aria-busy="true"` instead.
+ */
+export type SkeletonProps = ElementProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>, {
+    /**
+     * Lines of text, a golden rectangle that fills the width (an image, a chart), or a circle
+     * (an avatar).
+     * @default 'text'
+     */
+    type?: 'text' | 'rect' | 'circle';
+    /**
+     * Lines of text; the last of several is φ⁻¹ as wide.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * The diameter of a circle: the control height of the size.
+     * @default 'md'
+     */
+    size?: Size;
+}>;

package/dist/components/Skeleton/types.js

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

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';