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

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>

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

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

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

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tabs.svelte';
+export type { TabsDefaults, TabsItem, TabsProps } from './types.js';

package/dist/components/Tabs/index.js

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

package/dist/components/Tabs/tabs.css

@@ -0,0 +1,73 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-tabs {
+		display: grid;
+		gap: var(--sv-space-13);
+		min-inline-size: 0;
+	}
+
+	/* A row that scrolls when the tabs do not fit, over a hairline. */
+	.sv-tabs__list {
+		display: flex;
+		overflow-x: auto;
+		box-shadow: inset 0 calc(var(--sv-hairline) * -1) 0 var(--sv-color-border);
+		scrollbar-width: thin;
+	}
+
+	.sv-tabs__tab {
+		position: relative;
+		flex: none;
+		box-sizing: border-box;
+		block-size: calc(var(--sv-size-height) * var(--sv-density));
+		margin: 0;
+		padding: 0 calc(var(--sv-size-height) * var(--sv-density) * 0.382);
+		border: 0;
+		background: transparent;
+		color: var(--sv-color-text-muted);
+		font: var(--sv-weight-medium) var(--sv-size-text) / 1 var(--sv-font-ui);
+		white-space: nowrap;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.sv-tabs--grow .sv-tabs__tab {
+		flex: 1;
+	}
+
+	@media (hover: hover) {
+		.sv-tabs__tab:not(:disabled):hover {
+			color: var(--sv-color-text);
+		}
+	}
+
+	.sv-tabs__tab[aria-selected='true'] {
+		color: var(--sv-color);
+	}
+
+	.sv-tabs__tab:disabled {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+
+	/* The selected tab's underline scales in: transform only. */
+	.sv-tabs__tab::after {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		inset-block-end: 0;
+		block-size: 2px;
+		border-radius: 2px 2px 0 0;
+		background-color: var(--sv-color);
+		transform: scaleX(0);
+		transition: transform var(--sv-duration-normal) var(--sv-ease);
+	}
+
+	.sv-tabs__tab[aria-selected='true']::after {
+		transform: scaleX(1);
+	}
+
+	.sv-tabs__panel {
+		min-inline-size: 0;
+	}
+}

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

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Size } from '../../core/props/types.js';
+/** The Tabs props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface TabsDefaults {
+    /**
+     * The colour of the selected tab and its underline.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * Height and text size of the tabs.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height and padding of the tabs, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Tabs share the full width equally.
+     * @default false
+     */
+    grow: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Tabs: TabsDefaults;
+    }
+}
+/** One tab. */
+export interface TabsItem<T extends string | number = string> {
+    value: T;
+    /** What the tab says. */
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Tabs and the panel of the selected one. Name the tab list with `aria-label` or
+ * `aria-labelledby`, which go to it.
+ */
+export type TabsProps<T extends string | number = string> = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<TabsDefaults> & {
+    /** The tabs, in order. */
+    items: readonly TabsItem<T>[];
+    /** The selected tab. Bindable; the first enabled tab when not set. */
+    value?: T;
+    /** Called with the value of the tab the user selects. */
+    onchange?: (value: T) => void;
+    /**
+     * `automatic` selects a tab as soon as the arrow keys reach it; `manual` waits for Enter or
+     * Space, for panels that are slow to show.
+     * @default 'automatic'
+     */
+    activation?: 'automatic' | 'manual';
+    /** The content of the selected tab's panel. */
+    panel?: Snippet<[TabsItem<T>]>;
+}>;

package/dist/components/Tabs/types.js

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

package/dist/components/TextField/TextField.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	// A single line of text in a Field, with validation. See TextFieldProps for the props.
+	import { untrack } from 'svelte';
+	import { checkValue, DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { textConstraintMessage } from '../../core/form/constraints.js';
+	import { createField } from '../../core/form/field.svelte.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import Field from '../Field/Field.svelte';
+	import { TEXT_FIELD_TYPES, type TextFieldDefaults, type TextFieldProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		size,
+		density,
+		rounded,
+		disabled,
+		value = $bindable(''),
+		type = 'text',
+		label,
+		hint,
+		error,
+		rules,
+		validateOn,
+		required = false,
+		readonly = false,
+		prepend,
+		append,
+		id,
+		'aria-describedby': describedBy,
+		class: className,
+		style,
+		ref = $bindable(null),
+		...rest
+	}: TextFieldProps = $props();
+
+	const resolve = useDefaults<TextFieldDefaults>('TextField', {
+		variant: 'outlined',
+		color: 'primary',
+		size: 'md',
+		density: 'default',
+		rounded: true,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, color, size, density, rounded, disabled }));
+	const locale = useLocale();
+	// A form reset goes back to the text the field started with, as it does for a form rendered on
+	// the server. A defaultValue of the app's own wins.
+	const initial = untrack(() => value ?? '');
+
+	const field = createField<string>({
+		value: () => value ?? '',
+		empty: (text) => text === '',
+		check: (text) =>
+			textConstraintMessage(
+				text,
+				{
+					required,
+					type,
+					minlength: rest.minlength,
+					maxlength: rest.maxlength,
+					pattern: rest.pattern
+				},
+				locale.t
+			),
+		rules: () => rules,
+		error: () => error,
+		validateOn: () => validateOn,
+		control: () => ref
+	});
+
+	// The Field checks the variant; the input's own props are checked here, once it exists.
+	if (DEV) {
+		$effect(() => {
+			checkValue('TextField', 'type', type, TEXT_FIELD_TYPES);
+			warnUnnamed('TextField', ref);
+		});
+	}
+
+	// Leaving means focus went outside the field, not to a button in it.
+	function leave(event: FocusEvent) {
+		const root = event.currentTarget as HTMLElement;
+		if (!root.contains(event.relatedTarget as Node | null)) field.left();
+	}
+</script>
+
+<Field
+	{...p}
+	{id}
+	{label}
+	{hint}
+	error={field.error}
+	{required}
+	{readonly}
+	{prepend}
+	{append}
+	class={className}
+	{style}
+	oninput={field.changed}
+	onfocusout={leave}
+>
+	{#snippet children(attributes)}
+		<input
+			bind:this={ref}
+			defaultValue={initial}
+			{...rest}
+			{...attributes}
+			aria-describedby={[describedBy, attributes['aria-describedby']].filter(Boolean).join(' ') ||
+				undefined}
+			{type}
+			bind:value
+		/>
+	{/snippet}
+</Field>

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

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

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

@@ -0,0 +1,2 @@
+export { default as TextField } from './TextField.svelte';
+export type { TextFieldDefaults, TextFieldProps, TextFieldType } from './types.js';

package/dist/components/TextField/index.js

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

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

@@ -0,0 +1,57 @@
+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 { FieldContentProps, FieldDefaults } from '../Field/types.js';
+/** The TextField props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export type TextFieldDefaults = FieldDefaults;
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        TextField: TextFieldDefaults;
+    }
+}
+export declare const TEXT_FIELD_TYPES: readonly ["text", "email", "password", "search", "tel", "url"];
+/** The kinds of single-line text. Numbers and dates have their own fields. */
+export type TextFieldType = (typeof TEXT_FIELD_TYPES)[number];
+type TextFieldOwnProps = Partial<TextFieldDefaults> & FieldContentProps & {
+    /** The text. Bindable. */
+    value?: string;
+    /**
+     * The kind of text: it picks the keyboard and autofill, and `email` and `url` are checked.
+     * @default 'text'
+     */
+    type?: TextFieldType;
+    /** Checks run in order after the HTML constraints. The first message is shown. */
+    rules?: readonly Rule<string>[];
+    /** When the message shows. Defaults to the form's setting, else `'blur'`. */
+    validateOn?: ValidateOn;
+    /**
+     * The field must not be empty. Adds an asterisk to the label.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The text can be read, selected and copied but not changed.
+     * @default false
+     */
+    readonly?: boolean;
+    /** Inline style of the field's root element. */
+    style?: string | null;
+};
+/**
+ * A single line of text with a label, a hint and validation. `class` and `style` apply to the
+ * field; `id`, `ref` and every other attribute (`name`, `placeholder`, `autocomplete`,
+ * `minlength`, `pattern`, events) go to the `<input>`.
+ *
+ * @example
+ * <TextField
+ *   label="Username"
+ *   name="username"
+ *   required
+ *   minlength={3}
+ *   rules={[(value) => /^[a-z0-9_]+$/.test(value) || 'Use lowercase letters, digits and _']}
+ *   error={form?.errors?.username}
+ *   bind:value={username}
+ * />
+ */
+export type TextFieldProps = ElementProps<HTMLInputElement, HTMLInputAttributes, TextFieldOwnProps>;
+export {};

package/dist/components/TextField/types.js

@@ -0,0 +1 @@
+export const TEXT_FIELD_TYPES = ['text', 'email', 'password', 'search', 'tel', 'url'];