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

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/Sheet/Sheet.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	// A modal panel against an edge of the screen, on the shared modal shell. See SheetProps.
+	import type { TransitionConfig } from 'svelte/transition';
+	import { checkValue, DEV } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import { easing, motion } from '../../primitives/motion/motion.js';
+	import Modal from '../Modal/Modal.svelte';
+	import './sheet.css';
+	import { SHEET_SIDES, type SheetDefaults, type SheetProps } from './types.js';
+
+	let {
+		size,
+		density,
+		rounded,
+		side = 'end',
+		open = $bindable(false),
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: SheetProps = $props();
+
+	const resolve = useDefaults<SheetDefaults>('Sheet', {
+		size: 'sm',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ size, density, rounded }));
+
+	if (DEV) $effect(() => checkValue('Sheet', 'side', side, SHEET_SIDES));
+
+	// The panel slides in from its edge, with the theme's timing; start and end follow the
+	// writing direction.
+	function slide(node: Element): TransitionConfig {
+		const timing = motion(node);
+		const rtl = getComputedStyle(node).direction === 'rtl';
+		const axis = side === 'top' || side === 'bottom' ? 'Y' : 'X';
+		const sign = side === 'bottom' ? 1 : side === 'top' ? -1 : (side === 'end') !== rtl ? 1 : -1;
+		return {
+			duration: timing.normal,
+			easing: easing(timing.ease),
+			css: (_, u) => `transform: translate${axis}(${sign * u * 100}%)`
+		};
+	}
+</script>
+
+<Modal
+	{...rest}
+	component="Sheet"
+	placement={side}
+	panelClass={sharedClasses(p, 'Sheet')}
+	enter={slide}
+	class={['sv-sheet', className]}
+	bind:open
+	bind:ref
+/>

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

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

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

@@ -0,0 +1,2 @@
+export { default as Sheet } from './Sheet.svelte';
+export { SHEET_SIDES, type SheetDefaults, type SheetProps, type SheetSide } from './types.js';

package/dist/components/Sheet/index.js

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

package/dist/components/Sheet/sheet.css

@@ -0,0 +1,61 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * Sheets: the panel against one edge, the full length of it, rounded on its inner corners only.
+	 * A sheet from the start or the end is as wide as its size; one from the top or the bottom is
+	 * as wide as its size at most, and as tall as its content allows.
+	 */
+	.sv-modal:not(.sv-modal--center) {
+		padding: 0;
+	}
+
+	.sv-modal--start,
+	.sv-modal--end {
+		align-items: stretch;
+	}
+
+	.sv-modal--start {
+		justify-items: start;
+	}
+
+	.sv-modal--end {
+		justify-items: end;
+	}
+
+	.sv-modal--top {
+		align-items: start;
+	}
+
+	.sv-modal--bottom {
+		align-items: end;
+	}
+
+	:is(.sv-modal--start, .sv-modal--end) > .sv-modal__panel {
+		block-size: 100%;
+	}
+
+	:is(.sv-modal--top, .sv-modal--bottom) > .sv-modal__panel {
+		max-block-size: calc(100% - var(--sv-space-34));
+	}
+
+	.sv-modal--start > .sv-modal__panel {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+
+	.sv-modal--end > .sv-modal__panel {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+
+	.sv-modal--top > .sv-modal__panel {
+		border-start-start-radius: 0;
+		border-start-end-radius: 0;
+	}
+
+	.sv-modal--bottom > .sv-modal__panel {
+		border-end-start-radius: 0;
+		border-end-end-radius: 0;
+	}
+}

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

@@ -0,0 +1,51 @@
+import type { HTMLDialogAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density, Rounded, Size } from '../../core/props/types.js';
+import type { ModalContentProps } from '../Modal/types.js';
+/** The Sheet props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface SheetDefaults {
+    /**
+     * The width of the panel, from `xs` (21rem) to `xl` (55rem); for a sheet from the top or the
+     * bottom, the most it spans.
+     * @default 'sm'
+     */
+    size: Size;
+    /**
+     * Multiplies the padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding of the inner corners. `true` keeps the theme's radius for large surfaces.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Sheet: SheetDefaults;
+    }
+}
+export declare const SHEET_SIDES: readonly ["start", "end", "top", "bottom"];
+/** The edge a sheet comes from. `start` and `end` follow the writing direction. */
+export type SheetSide = (typeof SHEET_SIDES)[number];
+/**
+ * A modal panel that slides in from an edge of the screen: a drawer from the start or the end,
+ * a sheet from the bottom or the top. It is a Dialog in every other way: the platform's own
+ * `<dialog>`, focus moved in and given back, Escape and the backdrop close it. `class`, `style`,
+ * `ref` and other attributes go to the `<dialog>`.
+ *
+ * @example
+ * <Sheet title="Filters" side="end">
+ *   {#snippet trigger(attributes)}<Button {...attributes} variant="outlined">Filters</Button>{/snippet}
+ *   <Checkbox label="Pending only" bind:checked={pending} />
+ *   {#snippet actions({ close })}<Button onclick={close}>Show results</Button>{/snippet}
+ * </Sheet>
+ */
+export type SheetProps = ElementProps<HTMLDialogElement, Omit<HTMLDialogAttributes, 'open' | 'title' | 'children'>, Partial<SheetDefaults> & ModalContentProps & {
+    /**
+     * The edge it slides in from.
+     * @default 'end'
+     */
+    side?: SheetSide;
+}>;

package/dist/components/Sheet/types.js

@@ -0,0 +1 @@
+export const SHEET_SIDES = ['start', 'end', 'top', 'bottom'];

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 {};