bref-ui 0.3.0 → 2.0.0

package/src/lib/text-input/text-input.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	/* eslint-disable max-lines -- Keep the native control and its scoped style recipe together. */
+	import Icon from '../icon/icon.svelte';
+	import type { TextInputProps } from './types.js';
+
+	let {
+		value = $bindable(),
+		onChange,
+		icon,
+		size = 'medium',
+		wide = false,
+		variant = 'neutral',
+		oninput,
+		defaultValue,
+		...attributes
+	}: TextInputProps = $props();
+	const initialValue = value;
+
+	const handleInput = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
+		onChange?.(event.currentTarget.value);
+		oninput?.(event);
+	};
+</script>
+
+<div data-size={size} data-variant={variant} data-wide={wide || undefined}>
+	{#if icon}
+		<span><Icon {...icon} label={undefined} /></span>
+	{/if}
+	<input
+		{...attributes}
+		defaultValue={defaultValue ?? initialValue}
+		bind:value={() => value, (next) => (value = next == null ? '' : String(next))}
+		oninput={handleInput}
+	/>
+</div>
+
+<style>
+	div {
+		--internal-height: 2.5rem;
+		--internal-padding: 0.85rem;
+		--internal-icon-size: 1.25rem;
+		--internal-tint: var(--color-foreground, black);
+		--internal-strength-light: 3%;
+		--internal-strength-dark: 3%;
+		--internal-opacity: 15%;
+		--internal-border: transparent;
+		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 12%, transparent);
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		align-self: start;
+		gap: 0.6rem;
+		width: min(100%, 18rem);
+		min-width: 0;
+		max-width: 100%;
+		min-height: var(--internal-height);
+		padding-inline: var(--internal-padding);
+		border: 1px solid var(--internal-border);
+		border-radius: 0.5rem;
+		background: color-mix(
+			in srgb,
+			light-dark(
+					color-mix(
+						in srgb,
+						var(--internal-tint) var(--internal-strength-light),
+						var(--color-background, white)
+					),
+					color-mix(
+						in srgb,
+						var(--internal-tint) var(--internal-strength-dark),
+						var(--color-background, white)
+					)
+				)
+				var(--internal-opacity),
+			transparent
+		);
+		color: var(--color-foreground, black);
+		transition: all 150ms ease;
+		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
+		backdrop-filter: blur(0.5rem) saturate(120%);
+	}
+	div[data-wide] {
+		width: 100%;
+	}
+	div[data-size='small'] {
+		--internal-height: 2rem;
+		--internal-padding: 0.65rem;
+		--internal-icon-size: 1rem;
+	}
+	div[data-size='large'] {
+		--internal-height: 3rem;
+		--internal-padding: 1rem;
+		--internal-icon-size: 1.5rem;
+	}
+	div[data-variant='soft'] {
+		--internal-strength-light: 4%;
+		--internal-strength-dark: 16%;
+		--internal-opacity: 85%;
+		--internal-border: light-dark(
+			color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
+			color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
+		);
+		box-shadow: inset 0 1px 0 var(--internal-highlight);
+	}
+	span {
+		display: inline-flex;
+		flex: 0 0 auto;
+		color: var(--color-muted, #666);
+		font-size: var(--internal-icon-size);
+		pointer-events: none;
+	}
+	input {
+		box-sizing: border-box;
+		width: 100%;
+		min-width: 0;
+		padding: 0;
+		border: 0;
+		outline: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		font-size: 1rem;
+		font-weight: 200;
+		line-height: 1.4;
+	}
+	input {
+		height: calc(var(--internal-height) - 2px);
+	}
+	input[type='number'] {
+		appearance: textfield;
+		-moz-appearance: textfield;
+	}
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+	input::placeholder {
+		color: var(--color-muted, #666);
+	}
+	div[data-variant='soft']:hover:not(:has(:disabled)) {
+		--internal-border: light-dark(
+			color-mix(in srgb, var(--color-foreground, black) 18%, transparent),
+			color-mix(in srgb, var(--color-foreground, black) 38%, transparent)
+		);
+		--internal-strength-light: 6%;
+		--internal-strength-dark: 20%;
+	}
+	div:has(input:focus) {
+		--internal-tint: var(--color-primary, blue);
+		--internal-strength-light: 6%;
+		--internal-strength-dark: 12%;
+		--internal-border: color-mix(in srgb, var(--internal-tint) 55%, transparent);
+		box-shadow:
+			inset 0 1px 0 var(--internal-highlight),
+			0 0 0 3px color-mix(in srgb, var(--internal-tint) 16%, transparent);
+	}
+	div:has(input:invalid, [aria-invalid='true']) {
+		--internal-tint: var(--color-error, #bc2436);
+		--internal-border: color-mix(in srgb, var(--internal-tint) 65%, transparent);
+	}
+	div:has(:disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	input:disabled {
+		cursor: inherit;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		div {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		div {
+			border-color: ButtonText;
+			background: Canvas;
+			color: CanvasText;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		div:has(input:focus) {
+			outline: 2px solid Highlight;
+			outline-offset: 2px;
+			box-shadow: none;
+		}
+	}
+</style>

package/src/lib/text-input/types.ts

@@ -0,0 +1,12 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { BaseSize, Variant } from '../types.js';
+import type { IconProps } from '../icon/types.js';
+
+export type TextInputProps = Omit<HTMLInputAttributes, 'value' | 'size'> & {
+	value?: string;
+	onChange?: (value: string) => void;
+	icon?: IconProps;
+	size?: BaseSize;
+	wide?: boolean;
+	variant?: Exclude<Variant, 'filled'>;
+};

package/src/lib/theme/cli-theme.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Colors from './colors.svelte';
+	import Surfaces from './surfaces.svelte';
+	import Fonts from './fonts.svelte';
+	import Styles from './styles.svelte';
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
+<Colors />
+<Surfaces />
+<Fonts />
+<Styles />
+
+{@render children?.()}

package/src/lib/theme/colors.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { ThemeProps } from './types.js';
+
+	let { palette = {} }: Pick<ThemeProps, 'palette'> = $props();
+	const roles = [
+		'primary',
+		'secondary',
+		'background',
+		'foreground',
+		'muted',
+		'info',
+		'success',
+		'warning',
+		'error'
+	] as const;
+	let paletteCss = $derived.by(() => {
+		const modes = 'light' in palette ? palette : { light: palette, dark: palette };
+		const declarations = (['light', 'dark'] as const).flatMap((mode) =>
+			roles.flatMap((role) => {
+				const value = modes[mode][role];
+				if (value === undefined) return [];
+				if (!/^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i.test(value))
+					throw new Error(`Theme palette ${mode}.${role} must be a hex color.`);
+				return `--user-input-${role}-${mode}: ${value};`;
+			})
+		);
+		return `:root { ${declarations.join(' ')} }`;
+	});
+</script>
+
+<svelte:head>
+	<svelte:element this={"style"}>{paletteCss}</svelte:element>
+</svelte:head>
+
+<style>
+	:global(:root) {
+		--color-primary-light: var(--user-input-primary-light, #1d4ed8);
+		--color-primary-dark: var(--user-input-primary-dark, #92b4df);
+		--color-secondary-light: var(--user-input-secondary-light, #c51630);
+		--color-secondary-dark: var(--user-input-secondary-dark, #df97a5);
+		--color-background-light: var(--user-input-background-light, #f1eee7);
+		--color-background-dark: var(--user-input-background-dark, #18191c);
+		--color-foreground-light: var(--user-input-foreground-light, #151515);
+		--color-foreground-dark: var(--user-input-foreground-dark, #eceef2);
+		--color-muted-light: var(--user-input-muted-light, #696661);
+		--color-muted-dark: var(--user-input-muted-dark, #acb0b8);
+		--color-info-light: var(--user-input-info-light, #2563b8);
+		--color-info-dark: var(--user-input-info-dark, #a3c1d1);
+		--color-success-light: var(--user-input-success-light, #34745a);
+		--color-success-dark: var(--user-input-success-dark, #abc3a3);
+		--color-warning-light: var(--user-input-warning-light, #945c08);
+		--color-warning-dark: var(--user-input-warning-dark, #d9bc82);
+		--color-error-light: var(--user-input-error-light, #bc2436);
+		--color-error-dark: var(--user-input-error-dark, #dfa4a7);
+	}
+
+	:global(:root),
+	:global(:root:has(meta[name='color-scheme'][content='light'])),
+	:global([data-theme='light']),
+	:global([data-theme='auto']) {
+		color-scheme: light;
+		--color-primary: var(--color-primary-light);
+		--color-secondary: var(--color-secondary-light);
+		--color-background: var(--color-background-light);
+		--color-foreground: var(--color-foreground-light);
+		--color-muted: var(--color-muted-light);
+		--color-info: var(--color-info-light);
+		--color-success: var(--color-success-light);
+		--color-warning: var(--color-warning-light);
+		--color-error: var(--color-error-light);
+	}
+
+	:global([data-theme='dark']),
+	:global(:root:has(meta[name='color-scheme'][content='dark'])) {
+		color-scheme: dark;
+		--color-primary: var(--color-primary-dark);
+		--color-secondary: var(--color-secondary-dark);
+		--color-background: var(--color-background-dark);
+		--color-foreground: var(--color-foreground-dark);
+		--color-muted: var(--color-muted-dark);
+		--color-info: var(--color-info-dark);
+		--color-success: var(--color-success-dark);
+		--color-warning: var(--color-warning-dark);
+		--color-error: var(--color-error-dark);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme]):not(:has(meta[name='color-scheme'][content='light']))),
+		:global([data-theme='auto']) {
+			color-scheme: dark;
+			--color-primary: var(--color-primary-dark);
+			--color-secondary: var(--color-secondary-dark);
+			--color-background: var(--color-background-dark);
+			--color-foreground: var(--color-foreground-dark);
+			--color-muted: var(--color-muted-dark);
+			--color-info: var(--color-info-dark);
+			--color-success: var(--color-success-dark);
+			--color-warning: var(--color-warning-dark);
+			--color-error: var(--color-error-dark);
+		}
+	}
+</style>

package/src/lib/theme/fonts.svelte

@@ -0,0 +1,10 @@
+<style>
+	@font-face {
+		font-family: 'Material Symbols Outlined';
+		font-style: normal;
+		font-display: block;
+		font-weight: 100 700;
+		src: url('@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-fill-normal.woff2')
+			format('woff2-variations');
+	}
+</style>

package/src/lib/theme/registry.json

@@ -0,0 +1,13 @@
+{
+	"id": "theme",
+	"files": [
+		"cli-theme.svelte",
+		"colors.svelte",
+		"surfaces.svelte",
+		"fonts.svelte",
+		"styles.svelte",
+		"surface.ts"
+	],
+	"exports": { "Theme": "cli-theme.svelte" },
+	"dependencies": []
+}

package/src/lib/theme/styles.svelte

@@ -0,0 +1,50 @@
+<style>
+	:global(body) {
+		background: var(--color-background);
+		color: var(--color-foreground);
+	}
+
+	:global(*) {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	:global(*) {
+		scrollbar-width: thin;
+		scrollbar-color: color-mix(in srgb, var(--color-muted) 60%, transparent) transparent;
+	}
+
+	@supports selector(::-webkit-scrollbar) {
+		:global(*) {
+			scrollbar-width: auto;
+			scrollbar-color: auto;
+		}
+		:global(::-webkit-scrollbar) {
+			width: 8px;
+			height: 8px;
+		}
+		:global(::-webkit-scrollbar-track),
+		:global(::-webkit-scrollbar-corner) {
+			background: transparent;
+		}
+		:global(::-webkit-scrollbar-thumb) {
+			border: 2px solid transparent;
+			border-radius: 999px;
+			background: color-mix(in srgb, var(--color-muted) 60%, transparent);
+			background-clip: padding-box;
+		}
+		:global(::-webkit-scrollbar-thumb:hover) {
+			background-color: var(--color-primary);
+		}
+	}
+
+	@media (forced-colors: active) {
+		:global(*) {
+			scrollbar-color: auto;
+		}
+		:global(::-webkit-scrollbar-thumb) {
+			background-color: CanvasText;
+		}
+	}
+</style>

package/src/lib/theme/surface.ts

@@ -0,0 +1,18 @@
+import type { SurfaceBaseProps } from '../types.js';
+
+/** Compose typed surface classes; render Theme once to load their paint recipes. */
+export const surface = ({
+	variant = 'neutral',
+	color = 'foreground',
+	shadow,
+	hover
+}: SurfaceBaseProps = {}): string =>
+	[
+		'surface',
+		`surface-${variant}`,
+		`surface-${color}`,
+		shadow && `surface-shadow-${shadow === true ? 'medium' : shadow}`,
+		hover && `surface-hover-${hover}`
+	]
+		.filter(Boolean)
+		.join(' ');

package/src/lib/theme/surfaces.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	/* eslint-disable max-lines -- Keep the authoritative surface paint and state recipes together. */
+</script>
+
+<style>
+	:global(.surface) {
+		--surface-color: var(--color-foreground, black);
+		--surface-base: var(--color-background, white);
+		--surface-foreground: var(--color-foreground, black);
+		--surface-strength: 0%;
+		--surface-hover: 0%;
+		--surface-fill: transparent;
+		--surface-border: transparent;
+		--surface-content: var(--surface-color);
+		--surface-neutral-content: color-mix(
+			in srgb,
+			var(--surface-color) 80%,
+			var(--surface-foreground)
+		);
+		--surface-highlight: 0 0 0 transparent;
+		--surface-shadow: 0 0 0 transparent;
+		--surface-glow: 0 0 0 transparent;
+		--surface-glow-size: 0;
+		--surface-blur: none;
+		box-sizing: border-box;
+		border: 1px solid var(--surface-border);
+		background: var(--surface-fill);
+		color: var(--surface-content);
+		box-shadow: var(--surface-highlight), var(--surface-shadow), var(--surface-glow);
+		-webkit-backdrop-filter: var(--surface-blur);
+		backdrop-filter: var(--surface-blur);
+		transition:
+			background-color 150ms ease,
+			border-color 150ms ease,
+			box-shadow 150ms ease,
+			color 150ms ease;
+	}
+	:global(.surface:is(button, a, [role='button'])) {
+		cursor: pointer;
+	}
+	:global(.surface-primary) {
+		--surface-color: var(--color-primary, blue);
+	}
+	:global(.surface-secondary) {
+		--surface-color: var(--color-secondary, purple);
+	}
+	:global(.surface-foreground) {
+		--surface-color: var(--color-foreground, black);
+	}
+	:global(.surface-background) {
+		--surface-color: var(--color-background, white);
+		--surface-content: inherit;
+		--surface-neutral-content: inherit;
+	}
+	:global(.surface-muted) {
+		--surface-color: var(--color-muted, gray);
+	}
+	:global(.surface-info) {
+		--surface-color: var(--color-info, blue);
+	}
+	:global(.surface-success) {
+		--surface-color: var(--color-success, green);
+	}
+	:global(.surface-warning) {
+		--surface-color: var(--color-warning, brown);
+	}
+	:global(.surface-error) {
+		--surface-color: var(--color-error, red);
+	}
+	:global(.surface-soft),
+	:global(.surface-filled) {
+		--surface-fill: color-mix(
+			in srgb,
+			var(--surface-color) var(--surface-strength),
+			var(--surface-base)
+		);
+		--surface-highlight: inset 0 1px 0
+			color-mix(in srgb, var(--surface-foreground) 16%, transparent);
+	}
+	:global(.surface-soft) {
+		--surface-strength: 16%;
+		--surface-fill: color-mix(
+			in srgb,
+			color-mix(in srgb, var(--surface-color) var(--surface-strength), var(--surface-base)) 85%,
+			transparent
+		);
+		--surface-border: color-mix(in srgb, var(--surface-color) 30%, transparent);
+		--surface-content: color-mix(in srgb, var(--surface-color) 80%, var(--surface-foreground));
+		--surface-blur: blur(0.5rem) saturate(120%);
+	}
+	:global(.surface-filled) {
+		--surface-strength: 100%;
+		--surface-fill: color-mix(
+			in srgb,
+			var(--surface-color) var(--surface-strength),
+			var(--surface-foreground)
+		);
+		--surface-border: color-mix(in srgb, var(--surface-color) 68%, var(--surface-foreground));
+		--surface-content: var(--surface-base);
+		--surface-highlight: inset 0 1px 0
+			color-mix(in srgb, var(--surface-foreground) 28%, transparent);
+	}
+	:global(.surface-background:is(.surface-soft, .surface-filled)) {
+		--surface-content: var(--surface-foreground);
+	}
+	:global(.surface-shadow-small) {
+		--surface-shadow: 0 2px 6px color-mix(in srgb, var(--surface-foreground) 8%, transparent);
+	}
+	:global(.surface-shadow-medium) {
+		--surface-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--surface-foreground) 12%, transparent);
+	}
+	:global(.surface-shadow-large) {
+		--surface-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--surface-foreground) 20%, transparent);
+	}
+	:global(.surface-hover-small) {
+		--surface-hover: 2%;
+		--surface-glow-size: 0.5rem;
+	}
+	:global(.surface-hover-medium) {
+		--surface-hover: 4%;
+		--surface-glow-size: 1rem;
+	}
+	:global(.surface-hover-large) {
+		--surface-hover: 8%;
+		--surface-glow-size: 1.5rem;
+	}
+	:global(
+		.surface:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
+				:disabled,
+				[aria-disabled='true'],
+				[data-surface-disabled='true']
+			):is(:hover, :focus-visible, [data-surface-pressed='true'])
+	) {
+		--surface-glow: 0 0 var(--surface-glow-size)
+			color-mix(in srgb, var(--surface-color) 10%, transparent);
+		--surface-border: color-mix(in srgb, var(--surface-color) 40%, transparent);
+	}
+	:global(
+		.surface-soft:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
+				:disabled,
+				[aria-disabled='true'],
+				[data-surface-disabled='true']
+			):is(:hover, :focus-visible, [data-surface-pressed='true'])
+	) {
+		--surface-strength: calc(16% + var(--surface-hover));
+	}
+	:global(
+		.surface-filled:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
+				:disabled,
+				[aria-disabled='true'],
+				[data-surface-disabled='true']
+			):is(:hover, :focus-visible, [data-surface-pressed='true'])
+	) {
+		--surface-strength: calc(100% - var(--surface-hover));
+	}
+	:global(
+		.surface-neutral:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
+				:disabled,
+				[aria-disabled='true'],
+				[data-surface-disabled='true']
+			):is(:hover, :focus-visible, [data-surface-pressed='true'])
+	) {
+		--surface-fill: color-mix(in srgb, var(--surface-color) var(--surface-hover), transparent);
+		--surface-content: var(--surface-neutral-content);
+	}
+	:global(
+		.surface:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
+				:disabled,
+				[aria-disabled='true'],
+				[data-surface-disabled='true']
+			):is(:active, [data-surface-pressed='true'])
+	) {
+		--surface-hover: 8%;
+	}
+	:global(.surface:is(:focus-visible, [data-surface-focused='true'])) {
+		outline: 2px solid var(--color-primary, currentColor);
+		outline-offset: 3px;
+	}
+	:global(.surface[data-surface-invalid='true']) {
+		border-color: var(--color-error, red);
+	}
+	:global(.surface:is(:disabled, [aria-disabled='true'], [data-surface-disabled='true'])) {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:global(.surface) {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		:global(.surface) {
+			border-color: CanvasText;
+			background: Canvas;
+			color: CanvasText;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		:global(.surface:is(:disabled, [aria-disabled='true'], [data-surface-disabled='true'])) {
+			color: GrayText;
+			opacity: 1;
+		}
+		:global(.surface:is(:focus-visible, [data-surface-focused='true'])) {
+			outline-color: Highlight;
+		}
+	}
+</style>

package/src/lib/theme/theme-mode-toggle.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { ThemeModeToggleProps } from './types.ts';
+
+	let { mode = 'auto' }: ThemeModeToggleProps = $props();
+</script>
+
+<svelte:head>
+	<meta name="color-scheme" content={mode === 'auto' ? 'light dark' : mode} />
+</svelte:head>

package/src/lib/theme/theme.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Colors from './colors.svelte';
+	import Surfaces from './surfaces.svelte';
+	import Fonts from './fonts.svelte';
+	import Styles from './styles.svelte';
+	import type { ThemeProps } from './types.js';
+
+	let { children, palette = {} }: ThemeProps = $props();
+</script>
+
+<Colors {palette} />
+<Surfaces />
+<Fonts />
+<Styles />
+
+{@render children?.()}

package/src/lib/theme/types.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { Color } from '../types.js';
+
+/** Optional semantic colors, supplied as CSS hex values. */
+export type Palette = Partial<Record<Color, `#${string}`>>;
+
+export interface ThemeProps {
+	children?: Snippet;
+	/** A shared palette or separate light and dark palettes. */
+	palette?: Palette | { dark: Palette; light: Palette };
+}
+
+export type ThemeMode = 'light' | 'dark' | 'auto';
+
+export interface ThemeModeToggleProps {
+	/** Initial or bound theme mode; auto follows the system preference. */
+	mode?: ThemeMode;
+}

package/src/lib/tree-view/registry.json

@@ -0,0 +1,15 @@
+{
+	"id": "tree-view",
+	"files": [
+		"tree-view.svelte",
+		"tree-view-section.svelte",
+		"tree-node/tree-node.svelte",
+		"tree-node/chevron-button.svelte",
+		"tree-node/delete-button.svelte",
+		"tree-node/content.svelte"
+	],
+	"exports": {
+		"TreeView": "tree-view.svelte"
+	},
+	"dependencies": ["theme", "icon"]
+}