@signal9/era-ui 1.1.2

package/dist/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { AlertDialog, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		variant,
+		icon,
+		loading,
+		loadingLabel,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<AlertDialog.CancelProps> &
+		Omit<ButtonVariants, 'active'> & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<AlertDialog.Cancel {...restProps}>
+	{#snippet child({ props })}
+		<Button
+			bind:ref
+			{...props}
+			{tone}
+			{size}
+			{variant}
+			{icon}
+			{loading}
+			{loadingLabel}
+			class={className}
+		>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</AlertDialog.Cancel>

package/dist/ui/alert-dialog/alert-dialog-cancel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { AlertDialog, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<AlertDialog.CancelProps> & Omit<ButtonVariants, 'active'> & {
+    children?: Snippet;
+};
+declare const AlertDialogCancel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
+export default AlertDialogCancel;

package/dist/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { AlertDialog } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<AlertDialog.ContentProps> = $props();
+</script>
+
+<AlertDialog.Portal>
+	<AlertDialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
+	<AlertDialog.Content
+		bind:ref
+		class={cn(
+			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-(--era-gap) rounded-(--era-rd-lg) bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</AlertDialog.Content>
+</AlertDialog.Portal>

package/dist/ui/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type PartProps } from '../../utils/index.js';
+declare const AlertDialogContent: import("svelte").Component<PartProps<import("bits-ui").DialogContentProps>, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

package/dist/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialog.DescriptionProps = $props();
+</script>
+
+<AlertDialog.Description
+	bind:ref
+	class={cn('text-body leading-normal text-muted', className)}
+	{...restProps}
+/>

package/dist/ui/alert-dialog/alert-dialog-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog } from 'bits-ui';
+declare const AlertDialogDescription: import("svelte").Component<AlertDialog.DescriptionProps, {}, "ref">;
+type AlertDialogDescription = ReturnType<typeof AlertDialogDescription>;
+export default AlertDialogDescription;

package/dist/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialog.OverlayProps = $props();
+</script>
+
+<AlertDialog.Overlay
+	bind:ref
+	class={cn('fixed inset-0 z-50 bg-(--era-overlay-bg)', className)}
+	{...restProps}
+/>

package/dist/ui/alert-dialog/alert-dialog-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog } from 'bits-ui';
+declare const AlertDialogOverlay: import("svelte").Component<AlertDialog.OverlayProps, {}, "ref">;
+type AlertDialogOverlay = ReturnType<typeof AlertDialogOverlay>;
+export default AlertDialogOverlay;

package/dist/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { AlertDialog } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: AlertDialog.TitleProps = $props();
+</script>
+
+<AlertDialog.Title
+	bind:ref
+	class={cn('text-body font-medium text-bright', className)}
+	{...restProps}
+/>

package/dist/ui/alert-dialog/alert-dialog-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog } from 'bits-ui';
+declare const AlertDialogTitle: import("svelte").Component<AlertDialog.TitleProps, {}, "ref">;
+type AlertDialogTitle = ReturnType<typeof AlertDialogTitle>;
+export default AlertDialogTitle;

package/dist/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { AlertDialog, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+
+	let {
+		ref = $bindable(null),
+		tone,
+		size,
+		variant,
+		icon,
+		active,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<AlertDialog.TriggerProps> &
+		ButtonVariants & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<AlertDialog.Trigger {...restProps}>
+	{#snippet child({ props })}
+		<Button bind:ref {...props} {tone} {size} {variant} {icon} {active} class={className}>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</AlertDialog.Trigger>

package/dist/ui/alert-dialog/alert-dialog-trigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { AlertDialog, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<AlertDialog.TriggerProps> & ButtonVariants & {
+    children?: Snippet;
+};
+declare const AlertDialogTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogTrigger = ReturnType<typeof AlertDialogTrigger>;
+export default AlertDialogTrigger;

package/dist/ui/alert-dialog/index.d.ts

@@ -0,0 +1,10 @@
+import { AlertDialog } from 'bits-ui';
+export declare const Root: typeof AlertDialog.Root;
+export declare const Portal: typeof AlertDialog.Portal;
+export { default as Trigger } from './alert-dialog-trigger.svelte';
+export { default as Content } from './alert-dialog-content.svelte';
+export { default as Overlay } from './alert-dialog-overlay.svelte';
+export { default as Title } from './alert-dialog-title.svelte';
+export { default as Description } from './alert-dialog-description.svelte';
+export { default as Cancel } from './alert-dialog-cancel.svelte';
+export { default as Action } from './alert-dialog-action.svelte';

package/dist/ui/alert-dialog/index.js

@@ -0,0 +1,10 @@
+import { AlertDialog } from 'bits-ui';
+export const Root = AlertDialog.Root;
+export const Portal = AlertDialog.Portal;
+export { default as Trigger } from './alert-dialog-trigger.svelte';
+export { default as Content } from './alert-dialog-content.svelte';
+export { default as Overlay } from './alert-dialog-overlay.svelte';
+export { default as Title } from './alert-dialog-title.svelte';
+export { default as Description } from './alert-dialog-description.svelte';
+export { default as Cancel } from './alert-dialog-cancel.svelte';
+export { default as Action } from './alert-dialog-action.svelte';

package/dist/ui/aspect-ratio/aspect-ratio.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { AspectRatio } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<AspectRatio.RootProps> = $props();
+</script>
+
+<AspectRatio.Root
+	bind:ref
+	class={cn('overflow-hidden rounded-(--era-rd-md)', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</AspectRatio.Root>

package/dist/ui/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -0,0 +1,5 @@
+import { AspectRatio } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const AspectRatio: import("svelte").Component<PartProps<AspectRatio.RootProps>, {}, "ref">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/ui/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from './aspect-ratio.svelte';

package/dist/ui/aspect-ratio/index.js

@@ -0,0 +1 @@
+export { default as AspectRatio } from './aspect-ratio.svelte';

package/dist/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Avatar } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Avatar.FallbackProps> = $props();
+</script>
+
+<Avatar.Fallback
+	bind:ref
+	class={cn(
+		'inline-flex size-full items-center justify-center bg-(--era-surface-bg-elevated) text-body text-muted',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Avatar.Fallback>

package/dist/ui/avatar/avatar-fallback.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Avatar } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const AvatarFallback: import("svelte").Component<PartProps<Avatar.FallbackProps>, {}, "ref">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;

package/dist/ui/avatar/avatar-image.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Avatar } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Avatar.ImageProps = $props();
+</script>
+
+<Avatar.Image bind:ref class={cn('size-full object-cover', className)} {...restProps} />

package/dist/ui/avatar/avatar-image.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Avatar } from 'bits-ui';
+declare const AvatarImage: import("svelte").Component<Avatar.ImageProps, {}, "ref">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
+export default AvatarImage;

package/dist/ui/avatar/avatar-root.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Avatar } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Avatar.RootProps> = $props();
+</script>
+
+<Avatar.Root
+	bind:ref
+	class={cn(
+		'inline-flex size-(--era-h-md) shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--era-surface-bg-elevated) text-fg shadow-(--era-shadow)',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Avatar.Root>

package/dist/ui/avatar/avatar-root.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Avatar } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const AvatarRoot: import("svelte").Component<PartProps<Avatar.RootProps>, {}, "ref">;
+type AvatarRoot = ReturnType<typeof AvatarRoot>;
+export default AvatarRoot;

package/dist/ui/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from './avatar-root.svelte';
+export { default as Image } from './avatar-image.svelte';
+export { default as Fallback } from './avatar-fallback.svelte';

package/dist/ui/avatar/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './avatar-root.svelte';
+export { default as Image } from './avatar-image.svelte';
+export { default as Fallback } from './avatar-fallback.svelte';

package/dist/ui/badge/badge.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import { cn, tv } from '../../utils/index.js';
+
+	export const badgeVariants = tv({
+		// min-w matches height (design rule #5): a single glyph — a count, a
+		// keycap letter — renders as a perfect square/circle instead of a
+		// skinny pill; wider content is unaffected.
+		base: 'inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none has-[svg]:gap-(--era-inset-xxs)',
+		variants: {
+			tone: {
+				default: 'bg-hover text-fg',
+				accent: 'bg-primary text-primary-fg',
+				destructive: 'bg-destructive text-destructive-fg',
+				success: 'bg-success text-success-fg'
+			}
+		},
+		defaultVariants: { tone: 'default' }
+	});
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		tone = 'default',
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLSpanElement> & {
+		ref?: HTMLSpanElement | null;
+		tone?: 'default' | 'accent' | 'destructive' | 'success';
+		children?: Snippet;
+	} = $props();
+</script>
+
+<span bind:this={ref} class={cn(badgeVariants({ tone }), className)} {...restProps}>
+	{@render children?.()}
+</span>

package/dist/ui/badge/badge.svelte.d.ts

@@ -0,0 +1,32 @@
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: string;
+        accent: string;
+        destructive: string;
+        success: string;
+    };
+}, undefined, "inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none has-[svg]:gap-(--era-inset-xxs)", {
+    tone: {
+        default: string;
+        accent: string;
+        destructive: string;
+        success: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: string;
+        accent: string;
+        destructive: string;
+        success: string;
+    };
+}, undefined, "inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none has-[svg]:gap-(--era-inset-xxs)", unknown, unknown, undefined>>;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    ref?: HTMLSpanElement | null;
+    tone?: 'default' | 'accent' | 'destructive' | 'success';
+    children?: Snippet;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/ui/badge/index.d.ts

@@ -0,0 +1 @@
+export { default as Badge } from './badge.svelte';

package/dist/ui/badge/index.js

@@ -0,0 +1 @@
+export { default as Badge } from './badge.svelte';

package/dist/ui/bar/bar.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+	import { cn, tv } from '../../utils/index.js';
+
+	// A Bar is a flex container sized to a tier height, holding one-tier-smaller
+	// controls with the even sp/2 gap. The height scales with density; pick the
+	// tier that fits the content:
+	//   lg (default) — full toolbar / page header of md controls (32/40/48/64)
+	//   md           — compact toolbar                            (24/30/36/48)
+	//   sm           — title / handle bar of xs icons+buttons     (22/26/30/38)
+	// Radius stays concentric to the height; gap/px are sp/2 (xs-inset-sm),
+	// the even gap for one-tier-smaller content at every size.
+	export const barVariants = tv({
+		base: 'flex items-center gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)',
+		variants: {
+			size: {
+				sm: 'h-(--era-h-sm) rounded-(--era-rd-sm)',
+				md: 'h-(--era-h-md) rounded-(--era-rd-md)',
+				lg: 'h-(--era-h-lg) rounded-(--era-rd-lg)'
+			}
+		},
+		defaultVariants: { size: 'lg' }
+	});
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		size = 'lg',
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		/** Height tier (scales with density). Default `lg` — a full toolbar. */
+		size?: 'sm' | 'md' | 'lg';
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div bind:this={ref} class={cn(barVariants({ size }), className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/ui/bar/bar.svelte.d.ts

@@ -0,0 +1,30 @@
+export declare const barVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "flex items-center gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "flex items-center gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)", unknown, unknown, undefined>>;
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    /** Height tier (scales with density). Default `lg` — a full toolbar. */
+    size?: 'sm' | 'md' | 'lg';
+    children?: Snippet;
+};
+declare const Bar: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Bar = ReturnType<typeof Bar>;
+export default Bar;

package/dist/ui/bar/index.d.ts

@@ -0,0 +1 @@
+export { default as Bar, barVariants } from './bar.svelte';

package/dist/ui/bar/index.js

@@ -0,0 +1 @@
+export { default as Bar, barVariants } from './bar.svelte';

package/dist/ui/button/button.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Button } from 'bits-ui';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { cn } from '../../utils/index.js';
+	import { buttonVariants } from './variants.js';
+
+	let {
+		ref = $bindable(null),
+		tone = 'default',
+		size = 'default',
+		variant = 'filled',
+		active = false,
+		icon = false,
+		loading = false,
+		loadingLabel,
+		disabled,
+		children,
+		class: className,
+		...restProps
+	}: Button.RootProps & {
+		tone?: 'default' | 'accent' | 'destructive' | 'success';
+		size?: 'default' | 'sm' | 'xs' | 'icon';
+		variant?: 'filled' | 'link';
+		active?: boolean;
+		icon?: boolean;
+		/**
+		 * When true, disables the button, sets `aria-busy`, and prepends a
+		 * spinner. The existing label stays rendered so focus, click targets,
+		 * and screen-reader accessible names don't change shape mid-flight.
+		 */
+		loading?: boolean;
+		/** Screen-reader-only label announced while `loading` is true. */
+		loadingLabel?: string;
+		children?: Snippet;
+	} = $props();
+
+	const effectiveDisabled = $derived(disabled || loading);
+</script>
+
+<Button.Root
+	bind:ref
+	disabled={effectiveDisabled}
+	aria-busy={loading || undefined}
+	class={cn(buttonVariants({ variant, tone, size, icon, active }), className)}
+	{...restProps}
+>
+	{#if loading}
+		<LoaderCircle class="size-(--era-h-xs) shrink-0 animate-spin" aria-hidden="true" />
+		{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}
+	{/if}
+	{@render children?.()}
+</Button.Root>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import { Button } from 'bits-ui';
+type $$ComponentProps = Button.RootProps & {
+    tone?: 'default' | 'accent' | 'destructive' | 'success';
+    size?: 'default' | 'sm' | 'xs' | 'icon';
+    variant?: 'filled' | 'link';
+    active?: boolean;
+    icon?: boolean;
+    /**
+     * When true, disables the button, sets `aria-busy`, and prepends a
+     * spinner. The existing label stays rendered so focus, click targets,
+     * and screen-reader accessible names don't change shape mid-flight.
+     */
+    loading?: boolean;
+    /** Screen-reader-only label announced while `loading` is true. */
+    loadingLabel?: string;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/ui/button/index.d.ts

@@ -0,0 +1,12 @@
+import Button from './button.svelte';
+export { Button };
+export { buttonVariants } from './variants.js';
+export interface ButtonVariants {
+    tone?: 'default' | 'accent' | 'destructive' | 'success';
+    size?: 'default' | 'sm' | 'xs' | 'icon';
+    variant?: 'filled' | 'link';
+    icon?: boolean;
+    active?: boolean;
+    loading?: boolean;
+    loadingLabel?: string;
+}

package/dist/ui/button/index.js

@@ -0,0 +1,3 @@
+import Button from './button.svelte';
+export { Button };
+export { buttonVariants } from './variants.js';