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

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

package/dist/components/ButtonGroup/index.js

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

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

@@ -0,0 +1,48 @@
+import type { Snippet } from 'svelte';
+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 ButtonGroup props that `DefaultsProvider` and `UIProvider` can set for a subtree. The
+ * group passes them on to its Buttons.
+ */
+export interface ButtonGroupDefaults {
+    /**
+     * The variant of the Buttons.
+     * @default 'outlined'
+     */
+    variant: Variant;
+    /**
+     * The size of the Buttons.
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * The density of the Buttons.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * The colour of the Buttons.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * The rounding of the group's outer corners; inner corners are square.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        ButtonGroup: ButtonGroupDefaults;
+    }
+}
+/**
+ * Buttons joined into one control: shared borders, square inner corners, and the same
+ * variant, size, density and colour unless a Button says otherwise. Give it an `aria-label`.
+ */
+export type ButtonGroupProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<ButtonGroupDefaults> & {
+    /** The Buttons. */
+    children?: Snippet;
+}>;

package/dist/components/ButtonGroup/types.js

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

package/dist/components/Card/Card.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	// A surface with a header, content and actions. See CardProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './card.css';
+	import type { CardDefaults, CardProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		density,
+		rounded,
+		title,
+		subtitle,
+		level,
+		prepend,
+		append,
+		actions,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: CardProps = $props();
+
+	const resolve = useDefaults<CardDefaults>('Card', {
+		variant: 'elevated',
+		color: 'neutral',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ variant, color, density, rounded }));
+</script>
+
+<div bind:this={ref} {...rest} class={['sv-card', sharedClasses(p, 'Card'), className]}>
+	{#if title || subtitle || prepend || append}
+		<div class="sv-card__header">
+			{#if prepend}<div class="sv-card__prepend">{@render prepend()}</div>{/if}
+			{#if title || subtitle}
+				<div class="sv-card__heading">
+					{#if title}
+						<svelte:element this={level ? `h${level}` : 'div'} class="sv-card__title">
+							{title}
+						</svelte:element>
+					{/if}
+					{#if subtitle}<div class="sv-card__subtitle">{subtitle}</div>{/if}
+				</div>
+			{/if}
+			{#if append}<div class="sv-card__append">{@render append()}</div>{/if}
+		</div>
+	{/if}
+	{@render children?.()}
+	{#if actions}<div class="sv-card__actions">{@render actions()}</div>{/if}
+</div>

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

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

package/dist/components/Card/card.css

@@ -0,0 +1,62 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* Sections a φ step apart inside Fibonacci padding, both times the density. */
+	.sv-card {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--sv-space-13) * var(--sv-density));
+		box-sizing: border-box;
+		min-inline-size: 0;
+		padding: calc(var(--sv-space-21) * var(--sv-density));
+		border: var(--sv-hairline) solid var(--sv-variant-border);
+		border-radius: var(--sv-rounded, var(--sv-radius-lg));
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-variant-shadow);
+		color: var(--sv-variant-fg);
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-normal);
+	}
+
+	/* A neutral outline is the theme's border, not the text colour. */
+	.sv-card.sv-variant-outlined.sv-color-neutral {
+		--sv-variant-border: var(--sv-color-border);
+	}
+
+	.sv-card__header {
+		display: flex;
+		gap: var(--sv-space-13);
+		align-items: center;
+	}
+
+	.sv-card__heading {
+		display: grid;
+		flex: 1;
+		gap: var(--sv-space-3);
+		min-inline-size: 0;
+	}
+
+	.sv-card__title {
+		margin: 0;
+		font: var(--sv-weight-display) var(--sv-text-lg) / var(--sv-leading-snug) var(--sv-font-display);
+		letter-spacing: var(--sv-tracking-display);
+	}
+
+	.sv-card__subtitle {
+		font-size: var(--sv-text-xs);
+	}
+
+	.sv-card__prepend,
+	.sv-card__append {
+		display: flex;
+		flex: none;
+		align-items: center;
+	}
+
+	.sv-card__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sv-space-8);
+		align-items: center;
+	}
+}

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

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.svelte';
+export type { CardDefaults, CardProps } from './types.js';

package/dist/components/Card/index.js

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

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

@@ -0,0 +1,56 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Rounded, Variant } from '../../core/props/types.js';
+/** The Card props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface CardDefaults {
+    /**
+     * Visual weight: a raised surface by default.
+     * @default 'elevated'
+     */
+    variant: Variant;
+    /**
+     * The colour the variant is painted with. Neutral cards use the theme's surface, text and
+     * border colours.
+     * @default 'neutral'
+     */
+    color: Color;
+    /**
+     * Multiplies the padding and the space between sections.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Card: CardDefaults;
+    }
+}
+/**
+ * A surface that groups content about one thing: a header, the content and actions. Links
+ * and buttons inside it are what is clickable, not the card.
+ */
+export type CardProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<CardDefaults> & {
+    /** The title, in the header. */
+    title?: string;
+    /** A line under the title. */
+    subtitle?: string;
+    /**
+     * Makes the title a heading of this level (`<h2>`, `<h3>`…), so it is in the page's
+     * outline. Without it the title is styled text.
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Content before the title, such as an avatar or an icon. */
+    prepend?: Snippet;
+    /** Content after the title, such as a menu button. */
+    append?: Snippet;
+    /** Buttons or links at the bottom. */
+    actions?: Snippet;
+    /** The content. */
+    children?: Snippet;
+}>;

package/dist/components/Card/types.js

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