bref-ui-themes 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bref contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,111 @@
-# Temporary Holding Version
+# bref-ui-themes
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Reusable Svelte 5 themes for [bref-ui](https://github.com/feuersteiner/bref-ui), with interactive demos and native CSS. Version 0.1.0 is an unpublished review candidate built on SvelteKit 3 and published Bref 2.2.0.
+
+[Explore the showcase](https://feuersteiner.github.io/bref-ui-themes/) · [Bref documentation](https://feuersteiner.github.io/bref-ui/) · [Join Discord](https://discord.gg/JpgQRTUsVS)
+
+## Local development
+
+Requires Bun 1.3.4 or newer. The scaffold uses Svelte 5, SvelteKit 3, Vite 8 and `svelte-package` 3.
+
+```sh
+bun install
+bun run dev                     # http://localhost:5173
+bun run check
+bun run lint
+bun run package                 # library → dist; includes publint
+bun run build:site              # static showcase → build
+bun run build                   # site + library
+bun run preview                 # preview the production site
+bun pm pack                     # creates a local npm tarball; does not publish
+```
+
+The restored GitHub Pages workflow builds `build:site` on pushes to `main`, using the Pages base path and uploading `build`. To reproduce the project-path build locally:
+
+```sh
+BASE_PATH=/bref-ui-themes bun run build:site
+BASE_PATH=/bref-ui-themes bun run preview # http://localhost:4173/bref-ui-themes/
+```
+
+## Showcase and demo sites
+
+Open the [showcase](http://localhost:5173/). The showcase uses base `bref-ui` Theme, Button, Surface, Pill and Icon components, default palette/styles, documentation fonts and the Bref logo. Each card uses an actual browser screenshot and links to the working site. Every demo provides a Showcase link; navigation between themes reloads the document to avoid retaining global CSS.
+
+| Demo          | Implemented interactions                                                                  | Site                                          | Theme demonstration                                         |
+| ------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------- |
+| Tasks         | Project creation/filtering, task status tabs, search, completion and task editing         | [/relay](http://localhost:5173/relay)         | [/themes/relay](http://localhost:5173/themes/relay)         |
+| House Shop    | Category tabs, furniture sorting, product dialogs, cart quantities and simulated checkout | [/forma](http://localhost:5173/forma)         | [/themes/forma](http://localhost:5173/themes/forma)         |
+| Site Reviewer | URL validation, simulated audit progress, history and finding review tabs                 | [/elsewhere](http://localhost:5173/elsewhere) | [/themes/elsewhere](http://localhost:5173/themes/elsewhere) |
+
+![Tasks rendered demo](static/previews/relay.jpg)
+![House Shop rendered demo](static/previews/forma.jpg)
+![Site Reviewer rendered demo](static/previews/elsewhere.jpg)
+
+**WIP:** VS Code, Liquid Glass and Minimalist Blocky are planned. They have no exports, demonstration routes or availability links.
+
+## Library imports
+
+Install the local tarball with `bun add ./bref-ui-themes-0.1.0.tgz`. Consumers need Svelte `^5.57.1` and Bref `^2.2.0` (peer dependencies). Fonts used by the themes are package dependencies.
+
+```svelte
+<script lang="ts">
+	import { Theme, Button } from 'bref-ui-themes/relay';
+</script>
+
+<Theme>
+	<Button label="Create project" variant="filled" color="primary" />
+</Theme>
+```
+
+The same API is available from each implemented theme:
+
+```ts
+import { Theme, Button } from 'bref-ui-themes/forma';
+// Or: import { Theme, Button } from 'bref-ui-themes/elsewhere';
+// Namespace exports: import { Relay, Forma, Elsewhere } from 'bref-ui-themes';
+```
+
+Each entry exports `Theme`, `Button`, `Checkbox`, `Dialog`, `Icon`, `Pill`, `PillChoiceGroup`, `PillGroup`, `Popover`, `Progress`, `Select`, `Spinner`, `Surface`, `Tabs` and `TextInput`. `Theme` takes an optional `children` snippet. Controls retain Bref's props, native attributes and applicable bindings; their types remain imported from `bref-ui/types`.
+
+### Tabs
+
+`Tabs` uses Bref 2.2.0's readonly item data, required icon names and bindable string value. The consumer renders the selected content:
+
+```svelte
+<script lang="ts">
+	import { Theme, Tabs } from 'bref-ui-themes/relay';
+	import type { TabItemDataProps } from 'bref-ui/types';
+	let view = $state('overview');
+	const items = [
+		{ id: 'overview', label: 'Overview', icon: 'dashboard' },
+		{ id: 'activity', label: 'Activity', icon: 'history' },
+		{ id: 'reports', label: 'Reports', icon: 'monitoring', disabled: true }
+	] as const satisfies readonly TabItemDataProps[];
+</script>
+
+<Theme>
+	<Tabs {items} bind:value={view} label="Project views" />
+	<div role="tabpanel" aria-label={items.find((item) => item.id === view)?.label} tabindex="0">
+		{#if view === 'overview'}<p>8 tasks open, 3 completed.</p>
+		{:else}<p>The navigation review was completed today.</p>{/if}
+	</div>
+</Theme>
+```
+
+Horizontal tabs accept `size="fit"` (default, scrolls on overflow) or `size="fill"`. Vertical tabs use `orientation="vertical"` without `size`. Optional `onChange`, `filled`, `transitionIn` and `transitionOut` retain the published API. Default indicator motion respects reduced motion; custom transitions should do the same. Arrow keys, Home and End move selection and skip disabled items. At small widths, horizontal tabs show the selected label, and vertical tabs show icons; accessible names remain available. Each theme demonstration includes fit, fill, vertical, disabled and bound-content examples.
+
+These initial themes provide the demo palettes, fonts, common CSS and component styling. They use light mode and document-global Bref tokens/reset styles; mount one theme per document and use full-page navigation when changing themes. Site-specific layouts and content are separate from the library.
+
+## Source layout
+
+- `src/lib/<theme>/index.ts`: public theme entry; each site's demo and theme demonstration consume it.
+- `src/lib/components`: Bref CLI-copied controls and their local dependencies, with `bref-ui/types` imports preserved.
+- `src/lib/shared`: common reusable theme styling.
+- `src/routes/(sites)`: complete Tasks, House Shop and Site Reviewer sites and the latest shared demo shell.
+- `src/routes/(themes)`: demonstrations of implemented public theme exports.
+- `src/routes/catalog`: showcase content adapted from the reusable gallery.
+- `static/demos`: original photographic assets; `static/previews`: rendered catalog previews. Neither is included in the npm package.
+
+The migration preserves the local checkbox motion/reduced-motion fix and animated dialog title/icon updates. Only demo-owned files were extracted from their source branches; the latest Relay shared shell was kept. See [verification.md](verification.md) for source revisions, validation and remaining limitations.
+
+Tabs was copied from the npm-installed Bref 2.2.0 source using its registry, dependency planner and preview/install pipeline. Existing Icon and Theme dependencies were retained. The preview added only `tabs/tabs.svelte` and `tabs/item.svelte`, with explicit approval for the shared barrel merge; no existing component source was overwritten. Tabs types remain public imports from `bref-ui/types`.

package/dist/components/button/button.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+	import { surface } from '../theme/surface.js';
+	import type { ButtonProps } from 'bref-ui/types';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	let {
+		color = 'foreground',
+		size = 'medium',
+		variant = 'neutral',
+		glass = false,
+		label,
+		icon,
+		trailingIcon,
+		wide = false,
+		rounded = false,
+		disabled = false,
+		href,
+		onClick,
+		class: className,
+		...attributes
+	}: ButtonProps = $props();
+
+	const isIcon = $derived(label === undefined);
+	const common = $derived({
+		class: ['button', surface({ variant, color, glass, hover: 'medium' }), className],
+		'aria-label': attributes['aria-label'] ?? (isIcon ? (icon?.label ?? icon?.name) : undefined),
+		'data-color': color,
+		'data-size': size,
+		'data-variant': variant,
+		'data-kind': isIcon ? 'icon' : 'normal',
+		'data-wide': wide && !isIcon ? '' : undefined,
+		'data-rounded': rounded && isIcon ? '' : undefined
+	});
+	const native = $derived(
+		href !== undefined
+			? {
+					href: disabled ? undefined : href,
+					'aria-disabled': disabled ? true : attributes['aria-disabled'],
+					tabindex: disabled ? -1 : attributes.tabindex
+				}
+			: { type: (attributes as HTMLButtonAttributes).type ?? 'button', disabled }
+	);
+</script>
+
+<svelte:element
+	this={href !== undefined ? 'a' : 'button'}
+	{...attributes}
+	{...common}
+	{...native}
+	onclick={disabled && href !== undefined ? (event: MouseEvent) => event.preventDefault() : onClick}
+>
+	{#if icon}
+		<span><Icon {...icon} color={undefined} label={undefined} /></span>
+	{/if}
+	{#if !isIcon}
+		{label}
+		{#if trailingIcon}
+			<span><Icon {...trailingIcon} color={undefined} label={undefined} /></span>
+		{/if}
+	{/if}
+</svelte:element>
+
+<style>
+	.button {
+		--internal-height: max(40px, 2.5rem);
+		--internal-target: 24px;
+		--internal-padding: 1rem;
+		--internal-icon-size: 1.25rem;
+		--internal-font-size: 1rem;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		min-height: max(var(--internal-height), var(--internal-target));
+		min-width: var(--internal-target);
+		padding: 0.25rem var(--internal-padding);
+		border-radius: 0.625rem;
+		font: inherit;
+		font-size: var(--internal-font-size);
+		line-height: 1.25;
+		text-decoration: none;
+	}
+	.button[data-size='x-small'] {
+		--internal-height: max(28px, 1.75rem);
+		--internal-padding: 0.625rem;
+		--internal-icon-size: 1rem;
+		--internal-font-size: 0.8125rem;
+	}
+	.button[data-size='small'] {
+		--internal-height: max(32px, 2rem);
+		--internal-padding: 0.75rem;
+		--internal-icon-size: 1.125rem;
+		--internal-font-size: 0.875rem;
+	}
+	.button[data-size='large'] {
+		--internal-height: max(48px, 3rem);
+		--internal-padding: 1.25rem;
+		--internal-icon-size: 1.5rem;
+	}
+	.button[data-size='x-large'] {
+		--internal-height: max(56px, 3.5rem);
+		--internal-padding: 1.5rem;
+		--internal-icon-size: 1.75rem;
+		--internal-font-size: 1.125rem;
+	}
+	.button[data-kind='icon'] {
+		width: max(var(--internal-height), var(--internal-target));
+		height: max(var(--internal-height), var(--internal-target));
+		padding: 0;
+		font-size: var(--internal-icon-size);
+	}
+	span {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+		font-size: var(--internal-icon-size);
+		line-height: 1;
+	}
+	.button[data-wide] {
+		width: 100%;
+	}
+	.button[data-rounded] {
+		border-radius: 50%;
+	}
+	.button:is(:disabled, [aria-disabled='true']) {
+		--surface-color: var(--color-muted, gray);
+	}
+	.button[data-variant='filled']:not(:disabled, [aria-disabled='true']):is(:hover, :focus-visible) {
+		filter: brightness(1.1);
+	}
+	.button[data-variant='filled']:not(:disabled, [aria-disabled='true']):is(
+			:active,
+			[aria-pressed='true'],
+			[data-surface-pressed='true']
+		) {
+		filter: brightness(0.85);
+	}
+	@media (pointer: coarse) {
+		.button {
+			--internal-target: 44px;
+		}
+	}
+</style>

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

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

package/dist/components/checkbox/checkbox.svelte

@@ -0,0 +1,156 @@
+<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';
+
+	let { size = 'medium', checked = $bindable(), ...attributes }: CheckboxProps = $props();
+</script>
+
+<div data-checkbox data-size={size}>
+	<input {...attributes} type="checkbox" bind:checked />
+	{#if checked}
+		<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}
+</div>
+
+<style>
+	div {
+		--internal-size: 1.25rem;
+		--internal-tint: var(--color-foreground, black);
+		--internal-strength-light: 4%;
+		--internal-strength-dark: 8%;
+		--internal-fill: 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)
+			)
+		);
+		--internal-border: color-mix(
+			in srgb,
+			var(--color-foreground, black) 48%,
+			var(--color-background, white)
+		);
+		box-sizing: border-box;
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+		inline-size: var(--internal-size);
+		block-size: var(--internal-size);
+		border: 1px solid var(--internal-border);
+		border-radius: calc(var(--internal-size) * 0.2);
+		background: var(--internal-fill);
+		color: var(--color-foreground, black);
+		font-size: calc(var(--internal-size) * 0.8);
+		vertical-align: middle;
+		transition:
+			background-color 150ms ease,
+			border-color 150ms ease,
+			color 150ms ease;
+	}
+	input {
+		position: absolute;
+		z-index: 1;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+	span {
+		display: inline-flex;
+		pointer-events: none;
+	}
+	div[data-size='x-small'] {
+		--internal-size: 0.875rem;
+	}
+	div[data-size='small'] {
+		--internal-size: 1rem;
+	}
+	div[data-size='large'] {
+		--internal-size: 1.5rem;
+	}
+	div[data-size='x-large'] {
+		--internal-size: 1.75rem;
+	}
+	div:has(input:hover:not(:disabled):not(:checked)) {
+		--internal-strength-light: 8%;
+		--internal-strength-dark: 12%;
+	}
+	div:has(input:checked) {
+		--internal-tint: var(--color-primary, blue);
+		--internal-strength-light: 88%;
+		--internal-strength-dark: 88%;
+		--internal-border: var(--internal-fill);
+		color: var(--color-background, white);
+	}
+	div:has(input:checked:hover:not(:disabled)) {
+		--internal-strength-light: 92%;
+		--internal-strength-dark: 92%;
+	}
+	div:has(input:active:not(:disabled)) {
+		--internal-strength-light: 12%;
+		--internal-strength-dark: 16%;
+	}
+	div:has(input:checked:active:not(:disabled)) {
+		--internal-strength-light: 96%;
+		--internal-strength-dark: 96%;
+	}
+	div:has(input:user-invalid),
+	div:has(input[aria-invalid='true']) {
+		--internal-border: var(--color-error, #bc2436);
+	}
+	div:has(input:focus-visible) {
+		outline: 2px solid var(--color-primary, blue);
+		outline-offset: 3px;
+	}
+	div:has(input: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:checked) {
+			background: Highlight;
+			color: HighlightText;
+		}
+		div:has(input:focus-visible) {
+			outline: 2px solid Highlight;
+			outline-offset: 3px;
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,6 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Size } from 'bref-ui/types';
+export type CheckboxProps = Omit<HTMLInputAttributes, 'type' | 'size' | 'checked'> & {
+    size?: Size;
+    checked?: boolean;
+};

package/dist/components/checkbox/types.js

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

package/dist/components/dialog/dialog.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { MediaQuery } from 'svelte/reactivity';
+	import { surface } from '../theme/surface.js';
+	import Header from './header.svelte';
+	import Footer from './footer.svelte';
+	import type { DialogProps } from 'bref-ui/types';
+
+	let {
+		open = $bindable(false),
+		header,
+		children,
+		footer,
+		dismissible = true,
+		size = 'medium',
+		onclose,
+		oncancel,
+		...attributes
+	}: DialogProps = $props();
+
+	let dialog: HTMLDialogElement;
+	let returnFocus: HTMLElement | null = null;
+	const id = $props.id();
+	const smallScreen = new MediaQuery('(max-width: 36rem)', false);
+	const effectiveSize = $derived(smallScreen.current ? 'full-screen' : size);
+
+	const showModal = (node: HTMLElement) => {
+		const modal = node.closest('dialog');
+		if (!modal || modal.open) return;
+		returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		modal.showModal();
+	};
+
+	const requestClose = () => {
+		if (dismissible) open = false;
+	};
+
+	const handleCancel = (event: Event & { currentTarget: EventTarget & HTMLDialogElement }) => {
+		oncancel?.(event);
+		const prevented = event.defaultPrevented;
+		event.preventDefault();
+		if (dismissible && !prevented) open = false;
+	};
+
+	const handleClose = (event: Event & { currentTarget: EventTarget & HTMLDialogElement }) => {
+		open = false;
+		onclose?.(event);
+		tick().then(() => {
+			if (open && dialog?.isConnected) {
+				showModal(dialog);
+				return;
+			}
+			if (returnFocus?.isConnected) returnFocus.focus();
+			returnFocus = null;
+		});
+	};
+</script>
+
+<dialog
+	bind:this={dialog}
+	{...attributes}
+	data-size={effectiveSize}
+	data-visible={open}
+	aria-labelledby={`${id}-title`}
+	aria-describedby={header.description ? `${id}-description` : undefined}
+	oncancel={handleCancel}
+	onclose={handleClose}
+>
+	{#if open}
+		<div
+			data-surface
+			class={surface({ color: 'background', glass: true, shadow: 'large' })}
+			use:showModal
+			transition:fly|global={{
+				y: prefersReducedMotion.current ? 0 : 16,
+				duration: prefersReducedMotion.current ? 0 : 300
+			}}
+			onoutroend={() => {
+				if (!open) dialog.close();
+			}}
+		>
+			<Header {...header} {dismissible} {id} onDismiss={requestClose} />
+			<div data-content>{@render children()}</div>
+			{#if footer}<Footer {footer} />{/if}
+		</div>
+	{/if}
+</dialog>
+
+<style>
+	dialog {
+		--internal-width: 42rem;
+		box-sizing: border-box;
+		width: min(calc(100% - 2rem), var(--internal-width));
+		max-width: var(--internal-width);
+		max-height: calc(100dvh - 2rem);
+		margin: auto;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		overflow: visible;
+	}
+	[data-surface] {
+		display: flex;
+		flex-direction: column;
+		max-height: calc(100dvh - 2rem);
+		border-radius: 1rem;
+	}
+	dialog[open] {
+		display: flex;
+		flex-direction: column;
+	}
+	dialog[data-size='x-small'] {
+		--internal-width: 20rem;
+	}
+	dialog[data-size='small'] {
+		--internal-width: 28rem;
+	}
+	dialog[data-size='large'] {
+		--internal-width: 56rem;
+	}
+	dialog[data-size='x-large'] {
+		--internal-width: 72rem;
+	}
+	dialog::backdrop {
+		background: color-mix(in srgb, var(--color-background, white) 48%, transparent);
+		-webkit-backdrop-filter: blur(0);
+		backdrop-filter: blur(0);
+		opacity: 0;
+		transition:
+			opacity 300ms ease,
+			-webkit-backdrop-filter 300ms ease,
+			backdrop-filter 300ms ease;
+	}
+	dialog[data-visible='true']::backdrop {
+		-webkit-backdrop-filter: blur(0.25rem);
+		backdrop-filter: blur(0.25rem);
+		opacity: 1;
+	}
+	@starting-style {
+		dialog[data-visible='true']::backdrop {
+			-webkit-backdrop-filter: blur(0);
+			backdrop-filter: blur(0);
+			opacity: 0;
+		}
+	}
+	[data-content] {
+		min-height: 0;
+		padding: 1.25rem 1.75rem 1.5rem;
+		overflow: auto;
+	}
+	dialog[data-size='full-screen'] {
+		inset: 0.5rem;
+		width: calc(100% - 1rem);
+		height: calc(100dvh - 1rem);
+		max-width: none;
+		max-height: calc(100dvh - 1rem);
+		margin: 0;
+	}
+	dialog[data-size='full-screen'] > [data-surface] {
+		box-sizing: border-box;
+		height: 100%;
+		max-height: 100%;
+	}
+	dialog[data-size='full-screen'] [data-content] {
+		flex: 1;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		dialog::backdrop {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		[data-surface] {
+			border: 1px solid CanvasText;
+		}
+		dialog::backdrop {
+			background: Canvas;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+</style>

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

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

package/dist/components/dialog/footer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Button from '../button/button.svelte';
+	import type { DialogProps } from 'bref-ui/types';
+
+	let { footer }: { footer: NonNullable<DialogProps['footer']> } = $props();
+</script>
+
+<footer>
+	{#if typeof footer === 'function'}
+		{@render footer()}
+	{:else}
+		<Button {...footer.secondary} size="small" variant="neutral" />
+		<Button {...footer.primary} size="small" variant="filled" />
+	{/if}
+</footer>
+
+<style>
+	footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+		gap: 0.75rem;
+		padding: 0 1.75rem 1.5rem;
+	}
+</style>

package/dist/components/dialog/footer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DialogProps } from 'bref-ui/types';
+type $$ComponentProps = {
+    footer: NonNullable<DialogProps['footer']>;
+};
+declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;