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

package/dist/components/Progress/ProgressCircular.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	// A circular progress indicator. See ProgressCircularProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './progress-circular.css';
+	import type { ProgressCircularDefaults, ProgressCircularProps } from './types.js';
+
+	let {
+		color,
+		size,
+		value = 0,
+		indeterminate = false,
+		label,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ProgressCircularProps = $props();
+
+	const resolve = useDefaults<ProgressCircularDefaults>('ProgressCircular', {
+		color: 'primary',
+		size: 'md'
+	});
+	const p = $derived(resolve({ color, size }));
+	const locale = useLocale();
+	const percent = $derived(Math.min(100, Math.max(0, Number(value) || 0)));
+
+	// A circle of radius 20 in a 44 box, stroke 4: the arc is a dash of the circumference.
+	const CIRCUMFERENCE = 2 * Math.PI * 20;
+	// Indeterminate, a φ⁻² long arc turns.
+	const arc = $derived(CIRCUMFERENCE * (indeterminate ? 0.382 : percent / 100));
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	role="progressbar"
+	aria-label={label ?? locale.t(indeterminate ? 'loading' : 'progress')}
+	aria-valuemin={0}
+	aria-valuemax={100}
+	aria-valuenow={indeterminate ? undefined : percent}
+	class={[
+		'sv-progress-circular',
+		sharedClasses(p, 'ProgressCircular'),
+		indeterminate && 'sv-progress-circular--indeterminate',
+		className
+	]}
+>
+	<svg class="sv-progress-circular__svg" viewBox="0 0 44 44" aria-hidden="true">
+		<circle class="sv-progress-circular__track" cx="22" cy="22" r="20" />
+		<circle
+			class="sv-progress-circular__arc"
+			cx="22"
+			cy="22"
+			r="20"
+			stroke-dasharray="{arc} {CIRCUMFERENCE}"
+		/>
+	</svg>
+	{#if children}<span class="sv-progress-circular__content">{@render children()}</span>{/if}
+</div>

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

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

package/dist/components/Progress/ProgressLinear.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	// A horizontal progress bar. See ProgressLinearProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './progress-linear.css';
+	import type { ProgressLinearDefaults, ProgressLinearProps } from './types.js';
+
+	let {
+		color,
+		value = 0,
+		indeterminate = false,
+		label,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ProgressLinearProps = $props();
+
+	const resolve = useDefaults<ProgressLinearDefaults>('ProgressLinear', { color: 'primary' });
+	const p = $derived(resolve({ color }));
+	const locale = useLocale();
+	const percent = $derived(Math.min(100, Math.max(0, Number(value) || 0)));
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	role="progressbar"
+	aria-label={label ?? locale.t(indeterminate ? 'loading' : 'progress')}
+	aria-valuemin={0}
+	aria-valuemax={100}
+	aria-valuenow={indeterminate ? undefined : percent}
+	class={[
+		'sv-progress-linear',
+		sharedClasses({ color: p.color }, 'ProgressLinear'),
+		indeterminate && 'sv-progress-linear--indeterminate',
+		className
+	]}
+>
+	<div
+		class="sv-progress-linear__bar"
+		style:transform={indeterminate ? undefined : `scaleX(${percent / 100})`}
+	></div>
+</div>

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

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

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

@@ -0,0 +1,3 @@
+export { default as ProgressCircular } from './ProgressCircular.svelte';
+export { default as ProgressLinear } from './ProgressLinear.svelte';
+export type { ProgressCircularDefaults, ProgressCircularProps, ProgressLinearDefaults, ProgressLinearProps } from './types.js';

package/dist/components/Progress/index.js

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

package/dist/components/Progress/progress-circular.css

@@ -0,0 +1,61 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* As wide as a control of its size is tall. */
+	.sv-progress-circular {
+		position: relative;
+		display: inline-grid;
+		flex: none;
+		place-items: center;
+		inline-size: var(--sv-size-height);
+		block-size: var(--sv-size-height);
+		color: var(--sv-color);
+		font: var(--sv-weight-medium) calc(var(--sv-size-height) * 0.236) / 1 var(--sv-font-ui);
+		font-variant-numeric: tabular-nums;
+		vertical-align: middle;
+	}
+
+	.sv-progress-circular__svg {
+		position: absolute;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		fill: none;
+		stroke-width: 4;
+		transform: rotate(-90deg);
+	}
+
+	.sv-progress-circular__track {
+		stroke: color-mix(in oklch, currentColor var(--sv-tonal-wash), transparent);
+	}
+
+	.sv-progress-circular__arc {
+		stroke: currentColor;
+		stroke-linecap: round;
+	}
+
+	/* Indeterminate: a fixed arc that turns. A spinner that stops reads as frozen. */
+	.sv-progress-circular--indeterminate .sv-progress-circular__svg {
+		animation: sv-progress-turn 987ms linear infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sv-progress-circular--indeterminate .sv-progress-circular__svg {
+			animation-duration: 2961ms;
+		}
+	}
+
+	@keyframes sv-progress-turn {
+		from {
+			transform: rotate(-90deg);
+		}
+
+		to {
+			transform: rotate(270deg);
+		}
+	}
+
+	.sv-progress-circular__content {
+		position: relative;
+	}
+}

package/dist/components/Progress/progress-linear.css

@@ -0,0 +1,67 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* A track of the colour's tint, three px tall. */
+	.sv-progress-linear {
+		position: relative;
+		overflow: hidden;
+		block-size: var(--sv-space-3);
+		border-radius: var(--sv-radius-full);
+		background-color: color-mix(in oklch, var(--sv-color) var(--sv-tonal-wash), transparent);
+	}
+
+	/* The bar fills by scaling from the start edge: transform only. */
+	.sv-progress-linear__bar {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background-color: var(--sv-color);
+		transform-origin: left;
+		transition: transform var(--sv-duration-normal) var(--sv-ease);
+	}
+
+	/* An attribute selector, as minifiers rewrite :dir() into language guesses. */
+	:where([dir='rtl']) .sv-progress-linear__bar {
+		transform-origin: right;
+	}
+
+	/* Indeterminate: a φ⁻² long bar crosses the track. */
+	.sv-progress-linear--indeterminate .sv-progress-linear__bar {
+		inset-inline-end: auto;
+		inline-size: 38.2%;
+		animation: sv-progress-cross 1618ms var(--sv-ease) infinite;
+		transition: none;
+	}
+
+	:where([dir='rtl']) .sv-progress-linear--indeterminate .sv-progress-linear__bar {
+		animation-direction: reverse;
+	}
+
+	@keyframes sv-progress-cross {
+		from {
+			transform: translateX(-100%);
+		}
+
+		to {
+			transform: translateX(261.8%);
+		}
+	}
+
+	/* Under reduced motion it pulses in place instead of moving. */
+	@media (prefers-reduced-motion: reduce) {
+		.sv-progress-linear--indeterminate .sv-progress-linear__bar {
+			inline-size: 100%;
+			animation: sv-progress-pulse 1618ms ease-in-out infinite alternate;
+		}
+	}
+
+	@keyframes sv-progress-pulse {
+		from {
+			opacity: 0.382;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+}

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

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Size } from '../../core/props/types.js';
+interface ProgressOwnProps {
+    /** How far along, from 0 to 100. Values outside are clamped. */
+    value?: number;
+    /**
+     * Busy for an unknown time: no value, and moving.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * The name screen readers give the bar, such as `Uploading statement`. Defaults to the
+     * locale's `loading` when indeterminate and `progress` otherwise.
+     */
+    label?: string;
+}
+/** The ProgressLinear props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface ProgressLinearDefaults {
+    /**
+     * The colour of the bar; its track is a tint of it.
+     * @default 'primary'
+     */
+    color: Color;
+}
+/** The ProgressCircular props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface ProgressCircularDefaults {
+    /**
+     * The colour of the arc; its track is a tint of it.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * The diameter: the control height of the size.
+     * @default 'md'
+     */
+    size: Size;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        ProgressLinear: ProgressLinearDefaults;
+        ProgressCircular: ProgressCircularDefaults;
+    }
+}
+/** A horizontal progress bar. */
+export type ProgressLinearProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<ProgressLinearDefaults> & ProgressOwnProps>;
+/** A circular progress indicator, with optional content in its centre. */
+export type ProgressCircularProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<ProgressCircularDefaults> & ProgressOwnProps & {
+    /** Content in the centre, such as the percentage. */
+    children?: Snippet;
+}>;
+export {};

package/dist/components/Progress/types.js

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

package/dist/components/RadioGroup/RadioGroup.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" generics="T extends string | number">
+	// One choice among a few options, as native radios in a fieldset. See RadioGroupProps.
+	import { untrack } from 'svelte';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import type { Rule } from '../../core/form/types.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import '../Choice/choice.css';
+	import './radio-group.css';
+	import type { RadioGroupDefaults, RadioGroupProps } from './types.js';
+
+	let {
+		color,
+		size,
+		density,
+		disabled,
+		options,
+		value = $bindable(null),
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		inline = false,
+		name,
+		'aria-describedby': describedBy,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: RadioGroupProps<T> = $props();
+
+	const uid = $props.id();
+	const resolve = useDefaults<RadioGroupDefaults>('RadioGroup', {
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		disabled: false
+	});
+	const p = $derived(resolve({ color, size, density, disabled }));
+	const locale = useLocale();
+	// The choice a form reset goes back to: the one the group started with.
+	const initial = untrack(() => value ?? null);
+
+	const field = createField<T | null>({
+		value: () => value ?? null,
+		empty: (choice) => choice === null,
+		check: (choice) => (choice === null && required ? locale.t('required') : undefined),
+		// Rules never see null: an empty choice skips them.
+		rules: () => rules as readonly Rule<T | null>[] | undefined,
+		error: () => error,
+		validateOn: () => validateOn,
+		// The first radio that can be chosen carries the group's validity and takes focus.
+		control: () => ref?.querySelector<HTMLInputElement>('input:not(:disabled)')
+	});
+
+	const message = $derived(typeof field.error === 'string' ? field.error : undefined);
+	const groupDescription = $derived(
+		[describedBy, message ? `${uid}-error` : hint ? `${uid}-hint` : undefined]
+			.filter(Boolean)
+			.join(' ') || undefined
+	);
+
+	// A choice is a whole edit, so it also counts as leaving: the message shows at once.
+	function chose() {
+		field.changed();
+		field.left();
+	}
+
+	// A form reset puts the radios back as they started, which bind:group does not notice, so the
+	// bound value follows here.
+	$effect(() => {
+		const form = ref?.form;
+		if (!form) return;
+		const reset = () => (value = initial);
+		form.addEventListener('reset', reset);
+		return () => form.removeEventListener('reset', reset);
+	});
+</script>
+
+<!-- A radiogroup, so the invalid and required states are announced with the group. -->
+<fieldset
+	bind:this={ref}
+	aria-labelledby={label ? `${uid}-legend` : undefined}
+	{...rest}
+	class={[
+		'sv-choice',
+		'sv-radio-group',
+		sharedClasses(p, 'RadioGroup'),
+		inline && 'sv-radio-group--inline',
+		field.error !== false && 'sv-choice--invalid',
+		className
+	]}
+	role="radiogroup"
+	disabled={p.disabled}
+	aria-describedby={groupDescription}
+	aria-invalid={field.error !== false || undefined}
+	aria-required={required || undefined}
+	onchange={chose}
+>
+	{#if label}
+		<legend class="sv-radio-group__legend" id="{uid}-legend"
+			>{label}{#if required}<span class="sv-choice__required" aria-hidden="true">*</span
+				>{/if}</legend
+		>
+	{/if}
+	<div class="sv-radio-group__options">
+		{#each options as option, index (option.value)}
+			{@const hintId = option.hint ? `${uid}-${index}-hint` : undefined}
+			<div
+				class={[
+					'sv-radio-group__option',
+					(option.disabled || p.disabled) && 'sv-radio-group__option--disabled'
+				]}
+			>
+				<label class="sv-choice__row">
+					<span class="sv-radio__control">
+						<input
+							type="radio"
+							class="sv-radio__input"
+							name={name ?? uid}
+							value={option.value}
+							defaultChecked={Object.is(option.value, initial)}
+							disabled={option.disabled}
+							{required}
+							aria-describedby={hintId}
+							bind:group={value}
+						/>
+						<span class="sv-radio__circle" aria-hidden="true"></span>
+					</span>
+					<span class="sv-choice__label">{option.label}</span>
+				</label>
+				{#if option.hint}
+					<div class="sv-choice__messages">
+						<p class="sv-choice__hint" id={hintId}>{option.hint}</p>
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+	<div class="sv-radio-group__messages">
+		{#if hint && !message}<p class="sv-choice__hint" id="{uid}-hint">{hint}</p>{/if}
+		<!-- Announces an error that appears after the user has moved on. -->
+		<div aria-live="polite">
+			{#if message}<p class="sv-choice__error" id="{uid}-error">{message}</p>{/if}
+		</div>
+	</div>
+</fieldset>

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

@@ -0,0 +1,25 @@
+import type { RadioGroupProps } from './types.js';
+declare function $$render<T extends string | number>(): {
+    props: RadioGroupProps<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 RadioGroup: $$IsomorphicComponent;
+type RadioGroup<T extends string | number> = InstanceType<typeof RadioGroup<T>>;
+export default RadioGroup;

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

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.svelte';
+export type { RadioGroupDefaults, RadioGroupOption, RadioGroupProps } from './types.js';

package/dist/components/RadioGroup/index.js

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

package/dist/components/RadioGroup/radio-group.css

@@ -0,0 +1,139 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* A fieldset without the browser's frame; the rows come from the shared choice styles. */
+	.sv-radio-group {
+		--sv-radio-size: 1.272em;
+		--sv-radio-border: calc(var(--sv-hairline) * 1.5);
+		--sv-choice-control: var(--sv-radio-size);
+		min-inline-size: 0;
+		margin: 0;
+		padding: 0;
+		border: 0;
+	}
+
+	/* The question, in the theme's label voice, as a field's label. */
+	.sv-radio-group__legend {
+		margin-block-end: var(--sv-space-5);
+		padding: 0;
+		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-radio-group__options {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.sv-radio-group--inline > .sv-radio-group__options {
+		flex-flow: row wrap;
+		column-gap: var(--sv-space-21);
+	}
+
+	.sv-radio-group__option--disabled > .sv-choice__row {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+
+	/*
+	 * A radio is round in every theme, square ones included, so it never passes for a checkbox.
+	 * The native input lies over the drawn circle, invisible.
+	 */
+	.sv-radio__control {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		margin-block-start: calc((1lh - var(--sv-radio-size)) / 2);
+	}
+
+	.sv-radio__input {
+		position: absolute;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: inherit;
+	}
+
+	.sv-radio__circle {
+		position: relative;
+		display: grid;
+		place-items: center;
+		box-sizing: border-box;
+		inline-size: var(--sv-radio-size);
+		block-size: var(--sv-radio-size);
+		border: var(--sv-radio-border) solid var(--sv-color-border-strong);
+		border-radius: 50%;
+		background-color: var(--sv-color-surface);
+		pointer-events: none;
+	}
+
+	/* The dot (before) scales in; the state layer (after) covers the circle. */
+	.sv-radio__circle::before {
+		content: '';
+		inline-size: 50%;
+		block-size: 50%;
+		border-radius: 50%;
+		background-color: var(--sv-color);
+		transform: scale(0);
+		transition: transform var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	.sv-radio__circle::after {
+		content: '';
+		position: absolute;
+		inset: calc(var(--sv-radio-border) * -1);
+		border-radius: 50%;
+		background-color: var(--sv-color-text);
+		opacity: 0;
+	}
+
+	.sv-radio__input:checked + .sv-radio__circle {
+		border-color: var(--sv-color);
+	}
+
+	.sv-radio__input:checked + .sv-radio__circle::before {
+		transform: none;
+	}
+
+	/* Hover and press mix a layer over the circle. The disabled guard adds no weight. */
+	@media (hover: hover) {
+		:where(.sv-radio-group__option:not(.sv-radio-group__option--disabled))
+			> .sv-choice__row:hover
+			.sv-radio__circle {
+			border-color: var(--sv-color-text-muted);
+		}
+
+		:where(.sv-radio-group__option:not(.sv-radio-group__option--disabled))
+			> .sv-choice__row:hover
+			.sv-radio__circle::after {
+			opacity: var(--sv-state-hover);
+		}
+
+		:where(.sv-radio-group__option:not(.sv-radio-group__option--disabled))
+			> .sv-choice__row:hover
+			.sv-radio__input:checked
+			+ .sv-radio__circle {
+			border-color: var(--sv-color);
+		}
+	}
+
+	:where(.sv-radio-group__option:not(.sv-radio-group__option--disabled))
+		> .sv-choice__row:active
+		.sv-radio__circle::after {
+		opacity: var(--sv-state-press);
+	}
+
+	.sv-radio__input:focus-visible + .sv-radio__circle {
+		outline: var(--sv-focus-width) solid var(--sv-color);
+		outline-offset: var(--sv-focus-offset);
+	}
+
+	.sv-choice--invalid .sv-choice__row .sv-radio__circle {
+		border-color: var(--sv-color-error);
+	}
+}