@signal9/era-ui 34.1.0 → 34.2.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [34.2.0](https://github.com/sig-nine/era-ui/compare/v34.1.0...v34.2.0) (2026-08-23)
+
+### Features
+
+* **alert:** add inline status feedback ([8dab14c](https://github.com/sig-nine/era-ui/commit/8dab14c40453ba7802a42f29c369baa0f5a4fefb))
+
 ## [34.1.0](https://github.com/sig-nine/era-ui/compare/v34.0.2...v34.1.0) (2026-08-23)
 
 ### Features

package/dist/ui/alert/alert.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { IconProps } from '@lucide/svelte';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import Info from '@lucide/svelte/icons/info';
+	import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
+	import { cn } from '../../utils/index.js';
+	import { alertIconVariants, alertVariants, type AlertTone } from './variants.js';
+
+	let {
+		ref = $bindable(null),
+		tone = 'default',
+		role = 'status',
+		icon,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		/** Visual meaning. Urgency remains independent: use `role="alert"` only for critical messages. */
+		tone?: AlertTone;
+		/** Override the tone's glyph, or pass `null` for a text-only message. */
+		icon?: Component<IconProps> | null;
+		children?: Snippet;
+	} = $props();
+
+	const defaultIcon = $derived.by<Component<IconProps>>(() => {
+		switch (tone) {
+			case 'success':
+				return CircleCheck;
+			case 'warning':
+				return TriangleAlert;
+			case 'destructive':
+				return CircleX;
+			default:
+				return Info;
+		}
+	});
+	const Icon = $derived(icon === undefined ? defaultIcon : icon);
+</script>
+
+<div bind:this={ref} {role} data-tone={tone} class={cn(alertVariants(), className)} {...restProps}>
+	{#if Icon}
+		<Icon class={alertIconVariants({ tone })} aria-hidden="true" />
+	{/if}
+	<div class="min-w-0 flex-1">{@render children?.()}</div>
+</div>

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

@@ -0,0 +1,15 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { IconProps } from '@lucide/svelte';
+import { type AlertTone } from './variants.js';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    /** Visual meaning. Urgency remains independent: use `role="alert"` only for critical messages. */
+    tone?: AlertTone;
+    /** Override the tone's glyph, or pass `null` for a text-only message. */
+    icon?: Component<IconProps> | null;
+    children?: Snippet;
+};
+declare const Alert: Component<$$ComponentProps, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/ui/alert/fixture.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Alert } from './index.js';
+
+	const tones = ['default', 'accent', 'info', 'success', 'warning', 'destructive'] as const;
+</script>
+
+<div class="flex max-w-xl flex-col gap-gutter">
+	{#each tones as tone (tone)}
+		<Alert {tone}>{tone} message</Alert>
+	{/each}
+	<Alert tone="destructive" role="alert">Urgent message</Alert>
+	<Alert icon={null}>Text-only message</Alert>
+</div>

package/dist/ui/alert/fixture.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 Fixture: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Fixture = InstanceType<typeof Fixture>;
+export default Fixture;

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

@@ -0,0 +1,2 @@
+export { default as Alert } from './alert.svelte';
+export { alertVariants, type AlertTone } from './variants.js';

package/dist/ui/alert/index.js

@@ -0,0 +1,2 @@
+export { default as Alert } from './alert.svelte';
+export { alertVariants } from './variants.js';

package/dist/ui/alert/variants.d.ts

@@ -0,0 +1,30 @@
+export type AlertTone = 'default' | 'accent' | 'destructive' | 'success' | 'warning' | 'info';
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex min-w-0 items-start gap-gutter rounded-control bg-well p-inset-control text-body leading-body text-fg shadow-sm", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const alertIconVariants: import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: "text-muted";
+        accent: "text-primary";
+        destructive: "text-destructive";
+        success: "text-success";
+        warning: "text-warning";
+        info: "text-info";
+    };
+}, undefined, "size-icon shrink-0", {
+    tone: {
+        default: "text-muted";
+        accent: "text-primary";
+        destructive: "text-destructive";
+        success: "text-success";
+        warning: "text-warning";
+        info: "text-info";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        default: "text-muted";
+        accent: "text-primary";
+        destructive: "text-destructive";
+        success: "text-success";
+        warning: "text-warning";
+        info: "text-info";
+    };
+}, undefined>>;

package/dist/ui/alert/variants.js

@@ -0,0 +1,18 @@
+import { tv } from '../../utils/index.js';
+export const alertVariants = tv({
+    base: 'flex min-w-0 items-start gap-gutter rounded-control bg-well p-inset-control text-body leading-body text-fg shadow-sm'
+});
+export const alertIconVariants = tv({
+    base: 'size-icon shrink-0',
+    variants: {
+        tone: {
+            default: 'text-muted',
+            accent: 'text-primary',
+            destructive: 'text-destructive',
+            success: 'text-success',
+            warning: 'text-warning',
+            info: 'text-info'
+        }
+    },
+    defaultVariants: { tone: 'default' }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "34.1.0",
+	"version": "34.2.0",
 	"packageManager": "npm@11.19.0",
 	"engines": {
 		"node": ">=24 <27",
@@ -104,6 +104,11 @@
 			"svelte": "./dist/ui/accordion/index.js",
 			"default": "./dist/ui/accordion/index.js"
 		},
+		"./alert": {
+			"types": "./dist/ui/alert/index.d.ts",
+			"svelte": "./dist/ui/alert/index.js",
+			"default": "./dist/ui/alert/index.js"
+		},
 		"./alert-dialog": {
 			"types": "./dist/ui/alert-dialog/index.d.ts",
 			"svelte": "./dist/ui/alert-dialog/index.js",

package/skills/era-ui/references/releases/34.md

@@ -1,5 +1,11 @@
 # Era UI v34 release history
 
+## [34.2.0](https://github.com/sig-nine/era-ui/compare/v34.1.0...v34.2.0) (2026-08-23)
+
+### Features
+
+* **alert:** add inline status feedback ([8dab14c](https://github.com/sig-nine/era-ui/commit/8dab14c40453ba7802a42f29c369baa0f5a4fefb))
+
 ## [34.1.0](https://github.com/sig-nine/era-ui/compare/v34.0.2...v34.1.0) (2026-08-23)
 
 ### Features

package/skills/era-ui/references/releases/index.md

@@ -5,7 +5,7 @@ Load only the major versions crossed by an upgrade; use the package-root `CHANGE
 
 | Major | Range | Releases | History |
 | ---: | --- | ---: | --- |
-| 34 | 34.0.0–34.1.0 | 4 | [Read](./34.md) |
+| 34 | 34.0.0–34.2.0 | 5 | [Read](./34.md) |
 | 33 | 33.0.0–33.0.1 | 2 | [Read](./33.md) |
 | 32 | 32.0.0–32.0.1 | 2 | [Read](./32.md) |
 | 31 | 31.0.0–31.0.0 | 1 | [Read](./31.md) |