bref-ui 2.1.2 → 2.1.4

package/dist/checkbox/checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
 	import { elasticOut } from 'svelte/easing';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import Icon from '../icon/icon.svelte';
 	import type { CheckboxProps } from './types.js';
 
@@ -10,7 +11,14 @@
 <div data-checkbox data-size={size}>
 	<input {...attributes} type="checkbox" bind:checked />
 	{#if checked}
-		<span aria-hidden="true" transition:fly|global={{ duration: 350, y: -6, easing: elasticOut }}>
+		<span
+			aria-hidden="true"
+			transition:fly={{
+				duration: prefersReducedMotion.current ? 0 : 350,
+				y: prefersReducedMotion.current ? 0 : -6,
+				easing: elasticOut
+			}}
+		>
 			<Icon name="check" style="font-variation-settings: 'wght' 500" />
 		</span>
 	{/if}

package/dist/dialog/header.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Button from '../button/button.svelte';
 	import Icon from '../icon/icon.svelte';
+	import { fly } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import type { DialogHeaderProps } from './types.js';
 
 	let { title, description, icon, dismissible, id, onDismiss }: DialogHeaderProps = $props();
@@ -8,10 +10,18 @@
 
 <header>
 	<div>
-		<div data-title>
-			{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
-			<h2 id={`${id}-title`}>{title}</h2>
-		</div>
+		{#key `${icon?.name ?? ''}:${title}`}
+			<div
+				data-title
+				in:fly={{
+					y: prefersReducedMotion.current ? 0 : 8,
+					duration: prefersReducedMotion.current ? 0 : 180
+				}}
+			>
+				{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
+				<h2 id={`${id}-title`}>{title}</h2>
+			</div>
+		{/key}
 		{#if description}<p id={`${id}-description`}>{description}</p>{/if}
 	</div>
 	{#if dismissible}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "2.1.2",
+	"version": "2.1.4",
 	"description": "A Svelte-first, human-first, agent-first UI library for building beautiful sites and apps with components you can make your own.",
 	"license": "MIT",
 	"repository": {

package/readme.md

@@ -7,6 +7,8 @@ and apps with components you can make your own.
 [![Discord](https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white)](https://discord.gg/JpgQRTUsVS)
 [![MIT license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
 
+https://github.com/user-attachments/assets/09b9a73d-c6fb-4e8d-b4f5-2267c4552ad7
+
 ## Get started
 
 ### Explore the gallery
@@ -89,6 +91,10 @@ is available from `bref-ui/types`. Copied components include the helper in
 
 ## Why Bref-ui?
 
+[Watch Bref-ui in 60 seconds](https://feuersteiner.github.io/bref-ui/#why-bref-ui): themes,
+scoped Svelte CSS, npm installation and CLI source ownership.
+The [demo video](static/bref-ui-demo.mp4) is also available in this repository.
+
 1. **Svelte-first.** The goal is modern components with zero runtime dependencies
    beyond Svelte, built from scoped CSS, familiar HTML, native events, bindings and
    snippets. Readable styles, with no class-name vocabulary to memorize. The
@@ -160,6 +166,19 @@ Run `bun run dev` in the repository for the gallery and current API documentatio
 Explore the [component exports](src/lib/index.ts) and [component source](src/lib)
 to inspect and customize the implementation.
 
+## Themes and examples
+
+Explore [bref-ui-themes](https://github.com/feuersteiner/bref-ui-themes) for reusable
+Svelte themes and interactive example sites built with Bref-ui. Browse the
+[live showcase](https://feuersteiner.github.io/bref-ui-themes/) or try the demos:
+
+- [Relay](https://feuersteiner.github.io/bref-ui-themes/relay): a project and task
+  management app with search, filtering and task editing.
+- [Forma](https://feuersteiner.github.io/bref-ui-themes/forma): a furniture store
+  with product filtering, a shopping cart and simulated checkout.
+- [Elsewhere](https://feuersteiner.github.io/bref-ui-themes/elsewhere): a website
+  audit app with simulated runs, history and finding review.
+
 ## Roadmap
 
 - **Component foundation:** inputs/textarea, pills, tree views, loading/progress,

package/src/lib/checkbox/checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
 	import { elasticOut } from 'svelte/easing';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import Icon from '../icon/icon.svelte';
 	import type { CheckboxProps } from './types.js';
 
@@ -10,7 +11,14 @@
 <div data-checkbox data-size={size}>
 	<input {...attributes} type="checkbox" bind:checked />
 	{#if checked}
-		<span aria-hidden="true" transition:fly|global={{ duration: 350, y: -6, easing: elasticOut }}>
+		<span
+			aria-hidden="true"
+			transition:fly={{
+				duration: prefersReducedMotion.current ? 0 : 350,
+				y: prefersReducedMotion.current ? 0 : -6,
+				easing: elasticOut
+			}}
+		>
 			<Icon name="check" style="font-variation-settings: 'wght' 500" />
 		</span>
 	{/if}

package/src/lib/dialog/header.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Button from '../button/button.svelte';
 	import Icon from '../icon/icon.svelte';
+	import { fly } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import type { DialogHeaderProps } from './types.js';
 
 	let { title, description, icon, dismissible, id, onDismiss }: DialogHeaderProps = $props();
@@ -8,10 +10,18 @@
 
 <header>
 	<div>
-		<div data-title>
-			{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
-			<h2 id={`${id}-title`}>{title}</h2>
-		</div>
+		{#key `${icon?.name ?? ''}:${title}`}
+			<div
+				data-title
+				in:fly={{
+					y: prefersReducedMotion.current ? 0 : 8,
+					duration: prefersReducedMotion.current ? 0 : 180
+				}}
+			>
+				{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
+				<h2 id={`${id}-title`}>{title}</h2>
+			</div>
+		{/key}
 		{#if description}<p id={`${id}-description`}>{description}</p>{/if}
 	</div>
 	{#if dismissible}