bref-ui 0.3.0 → 2.0.0

package/dist/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/dist/theme/surfaces.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Surfaces: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Surfaces = InstanceType<typeof Surfaces>;
+export default Surfaces;

package/dist/theme/theme-mode-toggle.svelte

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

package/dist/theme/theme-mode-toggle.svelte.d.ts

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

package/dist/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/dist/theme/theme.svelte.d.ts

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

package/dist/theme/types.d.ts

@@ -0,0 +1,17 @@
+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/dist/theme/types.js

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

package/dist/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"]
+}

package/dist/tree-view/tree-node/chevron-button.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Icon from '../../icon/icon.svelte';
+
+	let attributes: HTMLButtonAttributes = $props();
+</script>
+
+<button {...attributes} type="button">
+	<span><Icon name="chevron_right" /></span>
+</button>
+
+<style>
+	* {
+		transition: all 150ms;
+	}
+	button {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--tree-action-size);
+		min-height: var(--tree-action-size);
+		padding: 0.25rem 0.5rem;
+		border: 0;
+		border-radius: 999px;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+	}
+	span {
+		display: inline-flex;
+		font-size: 1.25em;
+	}
+	button[aria-expanded='true'] span {
+		transform: rotate(90deg);
+	}
+	button:not(:disabled):hover {
+		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		* {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		button:focus-visible {
+			outline-color: Highlight;
+		}
+	}
+</style>

package/dist/tree-view/tree-node/chevron-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+declare const ChevronButton: import("svelte").Component<HTMLButtonAttributes, {}, "">;
+type ChevronButton = ReturnType<typeof ChevronButton>;
+export default ChevronButton;

package/dist/tree-view/tree-node/content.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Icon from '../../icon/icon.svelte';
+	import type { TreeNodeContentProps } from '../types.js';
+
+	let { item, ...attributes }: TreeNodeContentProps = $props();
+</script>
+
+<button {...attributes} type="button" disabled={item.disabled}>
+	{#if item.icon}<Icon {...item.icon} label={undefined} />{/if}
+	<span>{item.label}</span>
+</button>
+
+<style>
+	* {
+		transition: all 150ms;
+	}
+	button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: start;
+		flex: 1;
+		gap: 0.5rem;
+		min-width: 0;
+		min-height: var(--tree-action-size);
+		padding: 0.25rem 0.5rem;
+		border: 0;
+		border-radius: 999px;
+		outline: none;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: start;
+		cursor: pointer;
+	}
+	button::before {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		content: '';
+	}
+	button:focus-visible::before {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	button:disabled {
+		color: var(--color-muted);
+		cursor: default;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		* {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		button:disabled {
+			color: GrayText;
+		}
+		button:focus-visible::before {
+			outline-color: Highlight;
+		}
+	}
+</style>

package/dist/tree-view/tree-node/content.svelte.d.ts

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

package/dist/tree-view/tree-node/delete-button.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Icon from '../../icon/icon.svelte';
+
+	let attributes: HTMLButtonAttributes = $props();
+</script>
+
+<button {...attributes} type="button"><Icon name="close" /></button>
+
+<style>
+	button {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--tree-action-size);
+		min-height: var(--tree-action-size);
+		padding: 0.25rem 0.5rem;
+		border: 0;
+		border-radius: 999px;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+		transition: all 150ms;
+	}
+	button:not(:disabled):hover {
+		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	button:disabled {
+		color: var(--color-muted);
+		cursor: default;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		button {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		button:disabled {
+			color: GrayText;
+		}
+		button:focus-visible {
+			outline-color: Highlight;
+		}
+	}
+</style>

package/dist/tree-view/tree-node/delete-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+declare const DeleteButton: import("svelte").Component<HTMLButtonAttributes, {}, "">;
+type DeleteButton = ReturnType<typeof DeleteButton>;
+export default DeleteButton;

package/dist/tree-view/tree-node/tree-node.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { fly } from 'svelte/transition';
+	import ChevronButton from './chevron-button.svelte';
+	import DeleteButton from './delete-button.svelte';
+	import Content from './content.svelte';
+	import RecursiveNode from './tree-node.svelte';
+	import type { TreeNodeProps } from '../types.js';
+
+	let {
+		item,
+		selection = $bindable(),
+		defaultExpanded = false,
+		onDelete,
+		indent = 0
+	}: TreeNodeProps = $props();
+
+	// svelte-ignore state_referenced_locally
+	let expanded = $state(defaultExpanded);
+	const childrenId = $props.id();
+
+	const selected = $derived(
+		Array.isArray(selection) ? selection.includes(item.id) : selection === item.id
+	);
+	const select = () => {
+		selection = Array.isArray(selection)
+			? selected
+				? selection.filter((id) => id !== item.id)
+				: [...selection, item.id]
+			: item.id;
+	};
+</script>
+
+<div
+	in:fly|global={{ y: -4, duration: prefersReducedMotion.current ? 0 : 150 }}
+	data-selected={selected}
+	data-disabled={item.disabled}
+	style:padding-left={`calc(0.25rem + ${indent * 1.25}rem)`}
+>
+	{#if item.children?.length}
+		<ChevronButton
+			aria-label={`Children of ${item.label}`}
+			aria-expanded={expanded}
+			aria-controls={childrenId}
+			onclick={() => (expanded = !expanded)}
+		/>
+	{:else}
+		<span data-spacer aria-hidden="true"></span>
+	{/if}
+	<Content {item} aria-pressed={selected} onclick={select} />
+	{#if onDelete}
+		<DeleteButton
+			aria-label={`Delete ${item.label}`}
+			disabled={item.disabled}
+			onclick={() => onDelete?.(item.id)}
+		/>
+	{/if}
+</div>
+{#if item.children?.length}
+	<div role="group" id={childrenId} hidden={!expanded}>
+		{#each item.children as child (child.id)}
+			<RecursiveNode indent={indent + 1} item={child} bind:selection {defaultExpanded} {onDelete} />
+		{/each}
+	</div>
+{/if}
+
+<style>
+	* {
+		transition: all 150ms;
+	}
+	div[data-selected] {
+		box-sizing: border-box;
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		min-height: var(--tree-height);
+		padding: 0.125rem 0.25rem;
+		border: 1px solid transparent;
+		border-radius: 999px;
+		overflow-wrap: anywhere;
+	}
+	[data-spacer] {
+		flex: 0 0 var(--tree-action-size);
+	}
+	div[role='group'] {
+		display: contents;
+	}
+	div[hidden] {
+		display: none;
+	}
+	div[data-selected='true'] {
+		border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+		background: color-mix(in srgb, var(--color-primary) 16%, transparent);
+		color: var(--color-primary);
+	}
+	div[data-selected='false']:not([data-disabled='true']):hover {
+		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		* {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		div[data-selected='true'] {
+			border-color: Highlight;
+			color: Highlight;
+		}
+	}
+</style>

package/dist/{base/tree-view → tree-view/tree-node}/tree-node.svelte.d.ts

@@ -1,5 +1,4 @@
-import type { TreeNodeProps } from './types.ts';
-import TreeNode from './tree-node.svelte';
-declare const TreeNode: import("svelte").Component<TreeNodeProps, {}, "">;
+import type { TreeNodeProps } from '../types.js';
+declare const TreeNode: import("svelte").Component<TreeNodeProps, {}, "selection">;
 type TreeNode = ReturnType<typeof TreeNode>;
 export default TreeNode;

package/dist/tree-view/tree-view-section.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+	import type { TreeSectionProps } from './types.js';
+
+	let { label, description, icon }: TreeSectionProps = $props();
+</script>
+
+<header>
+	<div>
+		{#if icon}<Icon {...icon} label={undefined} />{/if}
+		<span>{label}</span>
+	</div>
+	{#if description}<p>{description}</p>{/if}
+</header>
+
+<style>
+	header {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.25rem;
+		padding: 0.75rem 0.5rem 0.25rem;
+		color: var(--color-muted);
+		font-size: 0.8em;
+		font-weight: 600;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		overflow-wrap: anywhere;
+	}
+	div {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-width: 0;
+	}
+	p {
+		margin: 0;
+		font-weight: 400;
+		letter-spacing: normal;
+		text-transform: none;
+	}
+</style>

package/dist/tree-view/tree-view-section.svelte.d.ts

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