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

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

package/dist/components/Switch/switch.css

@@ -0,0 +1,118 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * A track as tall as a line of the label and φ times as wide, with the theme's round radius
+	 * (square in a square theme). The thumb travels the difference.
+	 */
+	.sv-switch {
+		--sv-switch-block: 1.272em;
+		--sv-switch-inline: calc(var(--sv-switch-block) * 1.618);
+		--sv-switch-pad: calc(var(--sv-switch-block) * 0.146);
+		--sv-switch-travel: calc(var(--sv-switch-inline) - var(--sv-switch-block));
+		--sv-choice-control: var(--sv-switch-inline);
+	}
+
+	/*
+	 * The native input lies over the drawn track, invisible, so focus, keys and forms stay native.
+	 * The track sits on the first line of the label.
+	 */
+	.sv-switch__control {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		margin-block-start: calc((1lh - var(--sv-switch-block)) / 2);
+	}
+
+	.sv-switch__input {
+		position: absolute;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: inherit;
+	}
+
+	/* Transparent borders turn visible in forced colours, where backgrounds are dropped. */
+	.sv-switch__track {
+		position: relative;
+		box-sizing: border-box;
+		inline-size: var(--sv-switch-inline);
+		block-size: var(--sv-switch-block);
+		border: var(--sv-hairline) solid transparent;
+		border-radius: var(--sv-radius-full);
+		background-color: var(--sv-color-border-strong);
+		pointer-events: none;
+	}
+
+	/* The fill (before) fades in under the thumb; the state layer (after) sits over both. */
+	.sv-switch__track::before,
+	.sv-switch__track::after {
+		content: '';
+		position: absolute;
+		inset: calc(var(--sv-hairline) * -1);
+		border-radius: inherit;
+		opacity: 0;
+	}
+
+	.sv-switch__track::before {
+		background-color: var(--sv-color);
+		transition: opacity var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	.sv-switch__track::after {
+		background-color: var(--sv-color-text);
+	}
+
+	.sv-switch__thumb {
+		position: absolute;
+		inset-block-start: calc(var(--sv-switch-pad) - var(--sv-hairline));
+		inset-inline-start: calc(var(--sv-switch-pad) - var(--sv-hairline));
+		box-sizing: border-box;
+		inline-size: calc(var(--sv-switch-block) - 2 * var(--sv-switch-pad));
+		block-size: calc(var(--sv-switch-block) - 2 * var(--sv-switch-pad));
+		border: var(--sv-hairline) solid transparent;
+		border-radius: var(--sv-radius-full);
+		background-color: var(--sv-color-surface);
+		transition: translate var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	.sv-switch__input:checked + .sv-switch__track::before {
+		opacity: 1;
+	}
+
+	.sv-switch__input:checked + .sv-switch__track::after {
+		background-color: var(--sv-on-color);
+	}
+
+	.sv-switch__input:checked + .sv-switch__track .sv-switch__thumb {
+		translate: var(--sv-switch-travel) 0;
+		background-color: var(--sv-on-color);
+	}
+
+	/* An attribute selector, as minifiers rewrite :dir() into language guesses. */
+	:where([dir='rtl']) .sv-switch__input:checked + .sv-switch__track .sv-switch__thumb {
+		translate: calc(var(--sv-switch-travel) * -1) 0;
+	}
+
+	/* Hover and press mix a layer over the track. The disabled guard adds no weight. */
+	@media (hover: hover) {
+		:where(.sv-switch:not(.sv-choice--disabled)) > .sv-choice__row:hover .sv-switch__track::after {
+			opacity: var(--sv-state-hover);
+		}
+	}
+
+	:where(.sv-switch:not(.sv-choice--disabled)) > .sv-choice__row:active .sv-switch__track::after {
+		opacity: var(--sv-state-press);
+	}
+
+	.sv-switch__input:focus-visible + .sv-switch__track {
+		outline: var(--sv-focus-width) solid var(--sv-color);
+		outline-offset: var(--sv-focus-offset);
+	}
+
+	.sv-choice--invalid > .sv-choice__row .sv-switch__track {
+		background-color: var(--sv-color-error);
+	}
+}

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

@@ -0,0 +1,67 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { 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';
+import type { ChoiceContentProps } from '../Choice/types.js';
+/** The Switch props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface SwitchDefaults {
+    /**
+     * The colour of the track while on. An invalid switch uses `error`.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * The size of the switch and the label text.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height of the row, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Mutes the switch and disables its input.
+     * @default false
+     */
+    disabled: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Switch: SwitchDefaults;
+    }
+}
+type SwitchOwnProps = Partial<SwitchDefaults> & ChoiceContentProps & {
+    /**
+     * Whether the switch is on. Bindable.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * What the form submits under `name` while the switch is on.
+     * @default 'on'
+     */
+    value?: string;
+    /** Checks run in order after `required`, with the on state. The first message is shown. */
+    rules?: readonly Rule<boolean>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * The switch must be on. Adds an asterisk to the label.
+     * @default false
+     */
+    required?: boolean;
+    /** Inline style of the switch's root element. */
+    style?: string | null;
+};
+/**
+ * A setting that is on or off, with its label beside it: a native checkbox with
+ * `role="switch"`, drawn as a track and a thumb. `class` and `style` apply to the root; `id`,
+ * `ref`, `name` and every other attribute go to the `<input>`. Use it for a setting that takes
+ * effect at once; for a choice submitted with a form, use a Checkbox.
+ *
+ * @example
+ * <Switch label="Sign in with biometrics" bind:checked={biometrics} />
+ */
+export type SwitchProps = ElementProps<HTMLInputElement, Omit<HTMLInputAttributes, 'type' | 'role' | 'children'>, SwitchOwnProps>;
+export {};

package/dist/components/Switch/types.js

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

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,93 @@
+<script lang="ts" generics="T extends string | number">
+	// Tabs and the selected tab's panel. See TabsProps 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 './tabs.css';
+	import type { TabsDefaults, TabsItem, TabsProps } from './types.js';
+
+	let {
+		color,
+		size,
+		density,
+		grow,
+		items,
+		value = $bindable(),
+		onchange,
+		activation = 'automatic',
+		panel,
+		id,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: TabsProps<T> = $props();
+
+	const resolve = useDefaults<TabsDefaults>('Tabs', {
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		grow: false
+	});
+	const p = $derived(resolve({ color, size, density, grow }));
+	const base = $props.id();
+	const prefix = $derived(id ?? base);
+
+	// Without a value, the first tab that can be chosen.
+	const index = $derived.by(() => {
+		const chosen = items.findIndex((item) => item.value === value);
+		return chosen >= 0 ? chosen : items.findIndex((item) => !item.disabled);
+	});
+	const selected = $derived(items[index]);
+
+	function select(item: TabsItem<T>) {
+		if (item.disabled || item.value === selected?.value) return;
+		value = item.value;
+		onchange?.(item.value);
+	}
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	id={prefix}
+	class={['sv-tabs', sharedClasses(p, 'Tabs'), p.grow && 'sv-tabs--grow', className]}
+>
+	<div
+		role="tablist"
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		class="sv-tabs__list"
+		{@attach rovingFocus({ orientation: 'horizontal' })}
+	>
+		{#each items as item, i (item.value)}
+			<button
+				type="button"
+				role="tab"
+				id="{prefix}-tab-{i}"
+				class="sv-tabs__tab"
+				data-sv-item
+				aria-selected={i === index}
+				aria-controls={i === index && panel ? `${prefix}-panel` : undefined}
+				disabled={item.disabled}
+				onclick={() => select(item)}
+				onfocus={() => activation === 'automatic' && select(item)}
+			>
+				{item.label}
+			</button>
+		{/each}
+	</div>
+	{#if panel && selected}
+		<!-- Focusable, so keyboard users reach a panel with nothing focusable in it (APG). -->
+		<div
+			role="tabpanel"
+			id="{prefix}-panel"
+			aria-labelledby="{prefix}-tab-{index}"
+			tabindex="0"
+			class="sv-tabs__panel"
+		>
+			{@render panel(selected)}
+		</div>
+	{/if}
+</div>