bref-ui 2.1.3 → 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.3",
+	"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

@@ -166,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}