@dryui/ui 1.8.0 → 2.0.0

package/dist/accordion/accordion.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/accordion/accordion.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Accordion',
+    description: 'Collapsible content sections, single or multiple mode',
+    category: 'display',
+    tags: ['disclosure', 'collapse', 'expand', 'faq']
+};

package/dist/adjust/adjust.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/adjust/adjust.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Adjust',
+    description: 'CSS filter adjustment wrapper for brightness, contrast, saturation, and hue shifts',
+    category: 'visual',
+    tags: ['filter', 'adjust', 'brightness', 'contrast', 'color']
+};

package/dist/alert/alert.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/alert/alert.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Alert',
+    description: 'Contextual feedback message with variant styling',
+    category: 'feedback',
+    tags: ['message', 'notification', 'info', 'warning', 'error']
+};

package/dist/alert-dialog/alert-dialog-root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setAlertDialogCtx } from './context.svelte.js';
 
 	interface Props {
@@ -10,7 +9,8 @@
 
 	let { open = $bindable(false), children }: Props = $props();
 
-	const headerId = generateFormId('alert-dialog');
+	const uid = $props.id();
+	const headerId = `alert-dialog-${uid}`;
 
 	setAlertDialogCtx({
 		get open() {

package/dist/alert-dialog/alert-dialog.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/alert-dialog/alert-dialog.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'AlertDialog',
+    description: 'Modal dialog requiring user confirmation',
+    category: 'overlay',
+    tags: ['modal', 'confirm', 'dialog', 'destructive']
+};

package/dist/alpha-slider/alpha-slider.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/alpha-slider/alpha-slider.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'AlphaSlider',
+    description: 'Slider for selecting alpha/opacity values in color pickers',
+    category: 'input',
+    tags: ['alpha', 'opacity', 'slider', 'color', 'picker']
+};

package/dist/app-frame/app-frame.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/app-frame/app-frame.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'AppFrame',
+    description: 'Windowed app chrome with traffic-light dots, title, and actions around a content area',
+    category: 'layout',
+    tags: ['app-shell', 'frame', 'layout', 'header', 'chrome', 'traffic-lights']
+};

package/dist/aspect-ratio/aspect-ratio.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/aspect-ratio/aspect-ratio.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'AspectRatio',
+    description: 'Constrains child content to a specific aspect ratio',
+    category: 'layout',
+    tags: ['image', 'video', 'ratio', 'responsive', 'media', 'frame']
+};

package/dist/aurora/aurora.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/aurora/aurora.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Aurora',
+    description: 'Ambient gradient surface with browser-native animated color fields and static fallback',
+    category: 'layout',
+    tags: ['background', 'gradient', 'ambient', 'shader-like', 'hero']
+};

package/dist/avatar/avatar.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/avatar/avatar.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Avatar',
+    description: 'User profile image with fallback initials',
+    category: 'display',
+    tags: ['user', 'profile', 'image', 'initials']
+};

package/dist/avatar/avatar.svelte

@@ -66,6 +66,7 @@
 			{...rest}
 		>
 			{#if showImage}
+				<!-- dryui-allow raw-img: Avatar owns the intrinsic image primitive and fallback/error lifecycle. -->
 				<img {src} {alt} onerror={handleError} />
 			{:else if children}
 				{@render children()}
@@ -90,6 +91,7 @@
 		{...rest}
 	>
 		{#if showImage}
+			<!-- dryui-allow raw-img: Avatar owns the intrinsic image primitive and fallback/error lifecycle. -->
 			<img {src} {alt} onerror={handleError} />
 		{:else if children}
 			{@render children()}
@@ -121,7 +123,8 @@
 		font-size: var(--dry-avatar-font-size);
 		font-weight: 600;
 		line-height: 1;
-		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+		outline: 1px solid var(--dry-image-edge);
+		outline-offset: -1px;
 		overflow: hidden;
 		user-select: none;
 	}

package/dist/backdrop/backdrop.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/backdrop/backdrop.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Backdrop',
+    description: 'Full-screen overlay behind modals and dialogs',
+    category: 'overlay',
+    tags: ['overlay', 'modal', 'backdrop', 'scrim']
+};

package/dist/badge/badge.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/badge/badge.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Badge',
+    description: 'Small status indicator label',
+    category: 'display',
+    tags: ['status', 'count', 'label', 'tag']
+};

package/dist/badge/badge.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { variantAttrs } from '@dryui/primitives';
+	import { getPageHeaderMetaCtx } from '@dryui/primitives/page-header';
 	import { resolveAlias } from '../internal/color-aliases.js';
 	import type { BadgeColor } from './index.js';
 
@@ -12,54 +13,61 @@
 		children?: Snippet;
 		pulse?: boolean;
 		icon?: Snippet;
+		/**
+		 * Tabular-nums + min-width so numeric counts don't jitter as values
+		 * change (e.g. 9 → 10, 99 → 100). Applies `font-variant-numeric`
+		 * from `--dry-numeric-variant` and a 1.5em min-width.
+		 */
+		numeric?: boolean;
 	}
 
 	let {
-		variant = 'soft',
-		color = 'gray',
-		size = 'sm',
+		variant: variantProp,
+		color: colorProp,
+		size: sizeProp,
 		class: className,
 		children,
 		pulse,
 		icon,
+		numeric = false,
 		...rest
 	}: Props = $props();
+
+	const ctx = getPageHeaderMetaCtx();
+	const variant = $derived(variantProp ?? ctx?.variant ?? 'soft');
+	const color = $derived<BadgeColor>(colorProp ?? ctx?.color ?? 'gray');
+	const size = $derived(sizeProp ?? ctx?.size ?? 'sm');
 	const resolvedColor = $derived(resolveAlias(color, 'gray'));
 	const isDot = $derived(variant === 'dot');
 	const hasIcon = $derived(!!icon && !isDot);
 </script>
 
-<span data-wrapper>
-	<span
-		class={className}
-		data-badge={isDot ? undefined : ''}
-		data-dot={isDot ? '' : undefined}
-		{...variantAttrs({
-			variant: isDot ? undefined : variant,
-			color: resolvedColor,
-			size: isDot ? undefined : size,
-			'data-icon-only': hasIcon ? '' : undefined,
-			'data-pulse': pulse ? '' : undefined
-		})}
-		{...rest}
-	>
-		{#if isDot}
-			<!-- dot variant renders no content -->
-		{:else if icon}
-			{@render icon()}
-		{:else if children}
-			{@render children()}
-		{/if}
-	</span>
+<span
+	class={className}
+	data-badge={isDot ? undefined : ''}
+	data-dot={isDot ? '' : undefined}
+	data-numeric={numeric && !isDot ? 'true' : undefined}
+	{...variantAttrs({
+		variant: isDot ? undefined : variant,
+		color: resolvedColor,
+		size: isDot ? undefined : size,
+		'data-icon-only': hasIcon ? '' : undefined,
+		'data-pulse': pulse ? '' : undefined
+	})}
+	{...rest}
+>
+	{#if isDot}
+		<!-- dot variant renders no content -->
+	{:else if icon}
+		{@render icon()}
+	{:else if children}
+		{@render children()}
+	{/if}
 </span>
 
 <style>
-	[data-wrapper] {
-		display: inline-grid;
-		justify-self: start;
-	}
-
 	[data-badge] {
+		justify-self: start;
 		/* Component tokens (Tier 3) */
 		--_badge-bg-default: var(--dry-color-fill);
 		--_badge-color-default: var(--dry-color-text-weak);
@@ -77,7 +85,9 @@
 		--_badge-radius: var(--dry-badge-radius, var(--_badge-radius-default));
 
 		display: inline-grid;
-		place-items: center;
+		grid-auto-flow: column;
+		align-items: center;
+		gap: var(--dry-space-1);
 		padding: var(--_badge-padding-y) var(--_badge-padding-x);
 		font-size: var(--_badge-font-size);
 		font-family: var(--dry-font-sans);
@@ -324,4 +334,13 @@
 		place-items: center;
 		padding: var(--dry-space-0_5, 0.125rem);
 	}
+
+	/* ── Numeric counts ────────────────────────────────────────────────────────
+	   Tabular-nums + min-width so values like "9" and "10" occupy the same
+	   footprint and don't jitter the surrounding layout as counts change. */
+	[data-numeric='true'] {
+		font-variant-numeric: var(--dry-numeric-variant);
+		min-width: 1.5em;
+		text-align: center;
+	}
 </style>

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

@@ -8,6 +8,12 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
     children?: Snippet;
     pulse?: boolean;
     icon?: Snippet;
+    /**
+     * Tabular-nums + min-width so numeric counts don't jitter as values
+     * change (e.g. 9 → 10, 99 → 100). Applies `font-variant-numeric`
+     * from `--dry-numeric-variant` and a 1.5em min-width.
+     */
+    numeric?: boolean;
 }
 declare const Badge: import("svelte").Component<Props, {}, "">;
 type Badge = ReturnType<typeof Badge>;

package/dist/beam/beam.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/beam/beam.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Beam',
+    description: 'Animated linear light streak surface for directional highlights and shimmer accents',
+    category: 'visual',
+    tags: ['beam', 'light', 'streak', 'shimmer', 'effect']
+};

package/dist/border-beam/border-beam.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/border-beam/border-beam.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'BorderBeam',
+    description: 'Animated border-travel beam with masked ring highlights, bloom, and line-trace presets',
+    category: 'visual',
+    tags: ['border', 'beam', 'glow', 'ring', 'highlight', 'effect']
+};

package/dist/breadcrumb/breadcrumb.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/breadcrumb/breadcrumb.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Breadcrumb',
+    description: 'Navigation trail showing page hierarchy',
+    category: 'navigation',
+    tags: ['nav', 'path', 'hierarchy', 'trail']
+};

package/dist/button/button.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/button/button.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Button',
+    description: 'Interactive button or link-styled action for submissions and calls to action',
+    category: 'action',
+    tags: ['form', 'action', 'click', 'submit', 'cta', 'link-button']
+};