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

package/dist/components/Avatar/avatar.css

@@ -0,0 +1,34 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* As tall as a control of its size; initials are φ⁻² of that. */
+	.sv-avatar {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		inline-size: var(--sv-size-height);
+		block-size: var(--sv-size-height);
+		overflow: hidden;
+		border: var(--sv-hairline) solid var(--sv-variant-border);
+		border-radius: var(--sv-rounded, var(--sv-radius-full));
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-variant-shadow);
+		color: var(--sv-variant-fg);
+		font: var(--sv-weight-medium) calc(var(--sv-size-height) * 0.382) / 1 var(--sv-font-ui);
+		letter-spacing: 0.02em;
+		text-transform: uppercase;
+		vertical-align: middle;
+		user-select: none;
+	}
+
+	.sv-avatar__image {
+		position: absolute;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		object-fit: cover;
+	}
+}

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

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

package/dist/components/Avatar/index.js

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

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

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Rounded, Size, Variant } from '../../core/props/types.js';
+/** The Avatar props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface AvatarDefaults {
+    /**
+     * Width and height: the control height of the size.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * How the fallback is painted.
+     * @default 'tonal'
+     */
+    variant: Variant;
+    /**
+     * The colour of the fallback.
+     * @default 'neutral'
+     */
+    color: Color;
+    /**
+     * Corner rounding.
+     * @default 'full'
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Avatar: AvatarDefaults;
+    }
+}
+/**
+ * A picture of a person or an account: an image, or initials or an icon when there is none
+ * or it fails to load.
+ */
+export type AvatarProps = ElementProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>, Partial<AvatarDefaults> & {
+    /** The image. */
+    src?: string;
+    /**
+     * Who or what the avatar shows, for screen readers. Leave it out when a name is shown next
+     * to the avatar: it is then decorative and hidden from them.
+     */
+    alt?: string;
+    /** Initials or an icon, shown while there is no image or it failed to load. */
+    children?: Snippet;
+}>;

package/dist/components/Avatar/types.js

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

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	// A count or a dot on its content, or alone in a line. See BadgeProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import '../../styles/visually-hidden.css';
+	import './badge.css';
+	import type { BadgeDefaults, BadgeProps } from './types.js';
+
+	let {
+		color,
+		max,
+		content,
+		dot = false,
+		label,
+		children,
+		id,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: BadgeProps = $props();
+
+	const resolve = useDefaults<BadgeDefaults>('Badge', { color: 'primary', max: 99 });
+	const p = $derived(resolve({ color, max }));
+
+	const visible = $derived(dot || (content != null && content !== 0 && content !== ''));
+	const shown = $derived(
+		typeof content === 'number' && content > p.max ? `${p.max}+` : String(content ?? '')
+	);
+	// Screen readers hear the real count, with what it counts.
+	const spoken = $derived(dot ? label : [content, label].filter((part) => part != null).join(' '));
+</script>
+
+<span
+	bind:this={ref}
+	{...rest}
+	{id}
+	class={['sv-badge', !children && 'sv-badge--inline', className]}
+>
+	{@render children?.()}
+	{#if visible}
+		<span class="sv-badge__anchor" aria-hidden="true">
+			<span
+				class={[
+					'sv-badge__badge',
+					sharedClasses({ variant: 'flat', color: p.color }, 'Badge'),
+					dot && 'sv-badge__badge--dot'
+				]}>{dot ? '' : shown}</span
+			>
+		</span>
+		<!-- With an id, the content can point at this text: aria-describedby="{id}-label". -->
+		{#if spoken}<span class="sv-visually-hidden" id={id && `${id}-label`}>{spoken}</span>{/if}
+	{/if}
+</span>

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

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

package/dist/components/Badge/badge.css

@@ -0,0 +1,57 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-badge {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		vertical-align: middle;
+	}
+
+	/*
+	 * A point at the top end corner of the content. The badge is centred on it by flex
+	 * alignment, overflowing evenly, so it follows the writing direction with no direction
+	 * selector (minifiers rewrite :dir() into language guesses for older browsers).
+	 */
+	.sv-badge__anchor {
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline-end: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		inline-size: 0;
+		block-size: 0;
+		pointer-events: none;
+	}
+
+	.sv-badge--inline .sv-badge__anchor {
+		position: static;
+		display: contents;
+	}
+
+	/* A pill φ times its text. */
+	.sv-badge__badge {
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		min-inline-size: 1.618em;
+		block-size: 1.618em;
+		padding-inline: 0.382em;
+		border-radius: var(--sv-radius-full);
+		background-color: var(--sv-variant-bg);
+		color: var(--sv-variant-fg);
+		font: var(--sv-weight-medium) var(--sv-text-label) / 1 var(--sv-font-ui);
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+
+	.sv-badge__badge--dot {
+		min-inline-size: 0.618em;
+		inline-size: 0.618em;
+		block-size: 0.618em;
+		padding: 0;
+	}
+}

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

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

package/dist/components/Badge/index.js

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

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color } from '../../core/props/types.js';
+/** The Badge props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface BadgeDefaults {
+    /**
+     * The badge's fill.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * Counts above it show as `max+`.
+     * @default 99
+     */
+    max: number;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Badge: BadgeDefaults;
+    }
+}
+/**
+ * A count or a dot pinned to the top end corner of its content, or standing alone in a line
+ * when it has none. A count of 0 hides it.
+ */
+export type BadgeProps = ElementProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>, Partial<BadgeDefaults> & {
+    /** What the badge says: usually a count. */
+    content?: number | string;
+    /**
+     * A dot instead of the content.
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * What the content counts, read after it by screen readers: `unread messages` reads
+     * "3 unread messages". With `dot`, the whole announcement. With an `id`, this text has
+     * the id `{id}-label`, for the `aria-describedby` of a button the badge is pinned to.
+     */
+    label?: string;
+    /** The content the badge is pinned to. */
+    children?: Snippet;
+}>;

package/dist/components/Badge/types.js

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

package/dist/components/Button/Button.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	// A button, or a link styled as one. See ButtonProps 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 '../../styles/visually-hidden.css';
+	import './button.css';
+	import type { ButtonDefaults, ButtonProps } from './types.js';
+
+	let {
+		variant,
+		size,
+		density,
+		color,
+		rounded,
+		block,
+		disabled,
+		as,
+		icon = false,
+		loading = false,
+		href,
+		type,
+		onclick,
+		'aria-disabled': ariaDisabled,
+		prepend,
+		append,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ButtonProps = $props();
+
+	const resolve = useDefaults<ButtonDefaults>('Button', {
+		variant: 'flat',
+		size: 'md',
+		density: 'default',
+		color: 'primary',
+		rounded: true,
+		block: false,
+		disabled: false
+	});
+	const p = $derived(resolve({ variant, size, density, color, rounded, block, disabled }));
+	const locale = useLocale();
+
+	const link = $derived((as ?? (href == null ? 'button' : 'a')) === 'a');
+	// Only a <button> can be disabled natively. A disabled link loses its href; a loading button
+	// and one marked aria-disabled stay focusable. None of them takes presses.
+	const native = $derived(!link && p.disabled);
+	const inert = $derived(p.disabled || loading || ariaDisabled === true || ariaDisabled === 'true');
+
+	function click(event: MouseEvent) {
+		if (inert) event.preventDefault();
+		else (onclick as ((event: MouseEvent) => void) | null | undefined)?.(event);
+	}
+</script>
+
+<svelte:element
+	this={link ? 'a' : 'button'}
+	bind:this={ref}
+	{...rest}
+	href={link && !p.disabled ? href : undefined}
+	type={link ? undefined : (type ?? 'button')}
+	role={link && p.disabled ? 'link' : undefined}
+	disabled={native || undefined}
+	aria-disabled={(inert && !native) || undefined}
+	class={[
+		'sv-button',
+		sharedClasses(p, 'Button'),
+		inert && 'sv-button--inert',
+		p.disabled && 'sv-button--disabled',
+		p.block && 'sv-button--block',
+		icon && 'sv-button--icon',
+		loading && 'sv-button--loading',
+		className
+	]}
+	onclick={click}
+>
+	{#if prepend}<span class="sv-button__prepend">{@render prepend()}</span>{/if}
+	{@render children?.()}
+	{#if append}<span class="sv-button__append">{@render append()}</span>{/if}
+	{#if loading}
+		<span class="sv-button__loader" aria-hidden="true"></span>
+		<span class="sv-visually-hidden">{locale.t('loading')}</span>
+	{/if}
+</svelte:element>

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

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

package/dist/components/Button/button.css

@@ -0,0 +1,132 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * Height and padding follow size and density; text follows size only. Colours come from
+	 * the variant classes, which read the colour class.
+	 */
+	.sv-button {
+		position: relative;
+		isolation: isolate;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.618em;
+		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: var(--sv-hairline) solid var(--sv-variant-border);
+		border-radius: var(--sv-rounded, var(--sv-radius-md));
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-variant-shadow);
+		color: var(--sv-variant-fg);
+		font: var(--sv-weight-medium) var(--sv-size-text) / 1 var(--sv-font-ui);
+		letter-spacing: var(--sv-button-tracking);
+		text-transform: var(--sv-button-transform);
+		text-decoration: none;
+		white-space: nowrap;
+		vertical-align: middle;
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		transition: transform var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	/* The theme's bevel: a hairline of light along the top edge of filled buttons. */
+	.sv-button.sv-variant-flat {
+		box-shadow: inset 0 var(--sv-hairline) 0 var(--sv-bevel);
+	}
+
+	/* State layer: the foreground colour over the background, only its opacity changes. */
+	.sv-button::before {
+		content: '';
+		position: absolute;
+		inset: calc(var(--sv-hairline) * -1);
+		z-index: -1;
+		border-radius: inherit;
+		background-color: currentColor;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	@media (hover: hover) {
+		.sv-button:where(:not(.sv-button--inert)):hover::before {
+			opacity: var(--sv-state-hover);
+		}
+	}
+
+	.sv-button:where(:not(.sv-button--inert)):active::before {
+		opacity: var(--sv-state-press);
+	}
+
+	.sv-button:where(:not(.sv-button--inert)):active {
+		transform: translateY(var(--sv-press-offset));
+	}
+
+	.sv-button--inert {
+		cursor: not-allowed;
+	}
+
+	/* Muted at φ⁻². A loading button keeps its colour: it is busy, not unavailable. */
+	.sv-button--disabled {
+		opacity: 0.382;
+	}
+
+	.sv-button--block {
+		display: flex;
+		inline-size: 100%;
+	}
+
+	.sv-button--icon {
+		inline-size: calc(var(--sv-size-height) * var(--sv-density));
+		padding: 0;
+	}
+
+	.sv-button__prepend,
+	.sv-button__append {
+		display: inline-flex;
+	}
+
+	/* Icons are φ^½ of the text. */
+	:where(.sv-button) svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	/*
+	 * Loading: the label and icons turn transparent but keep their width and, for screen
+	 * readers, the name. The spinner is painted in the foreground colour.
+	 */
+	.sv-button--loading {
+		color: transparent;
+		cursor: wait;
+	}
+
+	.sv-button__loader {
+		position: absolute;
+		inset: 0;
+		box-sizing: border-box;
+		inline-size: 1.272em;
+		block-size: 1.272em;
+		margin: auto;
+		border: 0.146em solid var(--sv-variant-fg);
+		border-inline-end-color: transparent;
+		border-radius: 50%;
+		animation: sv-spin 987ms linear infinite;
+	}
+
+	/* A spinner that stops reads as a frozen interface, so it slows down instead. */
+	@media (prefers-reduced-motion: reduce) {
+		.sv-button__loader {
+			animation-duration: 2961ms;
+		}
+	}
+
+	@keyframes sv-spin {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+}

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

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

package/dist/components/Button/index.js

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

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

@@ -0,0 +1,76 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Rounded, Size, Variant } from '../../core/props/types.js';
+/** The Button props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface ButtonDefaults {
+    /**
+     * Visual weight.
+     * @default 'flat'
+     */
+    variant: Variant;
+    /**
+     * Height and text size.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the height and padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * The colour the variant is painted with.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * Corner rounding. `true` keeps the theme's radius.
+     * @default true
+     */
+    rounded: Rounded;
+    /**
+     * Takes the full width of its container.
+     * @default false
+     */
+    block: boolean;
+    /**
+     * A disabled button cannot be focused or pressed; a disabled link loses its `href`.
+     * @default false
+     */
+    disabled: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Button: ButtonDefaults;
+    }
+}
+type ButtonOwnProps = Partial<ButtonDefaults> & {
+    /**
+     * The element to render. Defaults to `'a'` when `href` is given, otherwise `'button'`.
+     */
+    as?: 'button' | 'a';
+    /**
+     * Square, for a single icon as the content. Give it an `aria-label`.
+     * @default false
+     */
+    icon?: boolean;
+    /**
+     * Shows a spinner and ignores presses, while the button keeps focus and its label for
+     * screen readers, which also hear that it is loading.
+     * @default false
+     */
+    loading?: boolean;
+    /** Content before the label, usually an icon. */
+    prepend?: Snippet;
+    /** Content after the label, usually an icon. */
+    append?: Snippet;
+    /** The label. */
+    children?: Snippet;
+};
+/**
+ * A button, or a link that looks like one (`href`). Every other attribute of `<button>` and
+ * `<a>` passes through to the element.
+ */
+export type ButtonProps = ElementProps<HTMLButtonElement | HTMLAnchorElement, HTMLButtonAttributes & HTMLAnchorAttributes, ButtonOwnProps>;
+export {};

package/dist/components/Button/types.js

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

package/dist/components/ButtonGroup/ButtonGroup.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	// Buttons joined into one control. See ButtonGroupProps for the props.
+	import {
+		getDefaultsContext,
+		mergeDefaults,
+		setDefaultsContext,
+		useDefaults
+	} from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './button-group.css';
+	import type { ButtonGroupDefaults, ButtonGroupProps } from './types.js';
+
+	let {
+		variant,
+		size,
+		density,
+		color,
+		rounded,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ButtonGroupProps = $props();
+
+	const resolve = useDefaults<ButtonGroupDefaults>('ButtonGroup', {
+		variant: 'outlined',
+		size: 'md',
+		density: 'default',
+		color: 'primary',
+		rounded: true
+	});
+	const p = $derived(resolve({ variant, size, density, color, rounded }));
+
+	// The Buttons inside take the group's props as their defaults, so their own props still win.
+	const parent = getDefaultsContext();
+	const merged = $derived(
+		mergeDefaults(parent?.config, {
+			Button: {
+				variant: p.variant,
+				size: p.size,
+				density: p.density,
+				color: p.color,
+				rounded: p.rounded
+			}
+		})
+	);
+	setDefaultsContext({
+		get config() {
+			return merged;
+		}
+	});
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	role="group"
+	class={['sv-button-group', sharedClasses({ rounded: p.rounded }, 'ButtonGroup'), className]}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/components/ButtonGroup/button-group.css

@@ -0,0 +1,39 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-button-group {
+		display: inline-flex;
+		isolation: isolate;
+		vertical-align: middle;
+		border-radius: var(--sv-rounded, var(--sv-radius-md));
+	}
+
+	/* Square inside; the group's own rounding on the outer corners. */
+	.sv-button-group > .sv-button {
+		border-radius: 0;
+	}
+
+	.sv-button-group > .sv-button:first-child {
+		border-start-start-radius: inherit;
+		border-end-start-radius: inherit;
+	}
+
+	.sv-button-group > .sv-button:last-child {
+		border-start-end-radius: inherit;
+		border-end-end-radius: inherit;
+	}
+
+	/* Neighbours share one border; the focused one is drawn on top. */
+	.sv-button-group > .sv-button + .sv-button {
+		margin-inline-start: calc(var(--sv-hairline) * -1);
+	}
+
+	.sv-button-group > .sv-button:focus-visible {
+		z-index: 1;
+	}
+
+	/* Filled and borderless buttons get a faint divider where they meet. */
+	.sv-button-group > .sv-button:not(.sv-variant-outlined) + .sv-button:not(.sv-variant-outlined) {
+		border-inline-start-color: color-mix(in oklch, var(--sv-variant-fg) 21%, transparent);
+	}
+}

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

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