@dryui/ui 1.7.4 → 1.9.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.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

@@ -121,7 +121,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

@@ -12,6 +12,12 @@
 		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 {
@@ -22,6 +28,7 @@
 		children,
 		pulse,
 		icon,
+		numeric = false,
 		...rest
 	}: Props = $props();
 	const resolvedColor = $derived(resolveAlias(color, 'gray'));
@@ -34,6 +41,7 @@
 		class={className}
 		data-badge={isDot ? undefined : ''}
 		data-dot={isDot ? '' : undefined}
+		data-numeric={numeric && !isDot ? 'true' : undefined}
 		{...variantAttrs({
 			variant: isDot ? undefined : variant,
 			color: resolvedColor,
@@ -324,4 +332,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']
+};

package/dist/button/button.svelte

@@ -26,11 +26,22 @@
 			| 'pill';
 		size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
 		// Autocomplete still suggests the canonical values via the literal union.
-		color?: 'primary' | 'danger' | (string & {}) | null;
+		// 'ink' renders a solid near-black editorial CTA in light theme that auto-inverts
+		// (light bg, dark text) in dark theme, using --dry-color-{bg,text}-inverse tokens.
+		color?: 'primary' | 'danger' | 'ink' | (string & {}) | null;
 		href?: string;
 		rel?: string;
 		target?: string;
 		download?: boolean | string;
+		/** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
+		className?: HTMLButtonAttributes['class'];
+		/**
+		 * Optical compensation for leading/trailing icons. When `'auto'` (default),
+		 * the button trims its inline padding on the icon side by
+		 * `--dry-optical-icon-offset` so the label reads visually centered against
+		 * the icon. Set to `'off'` to disable the nudge.
+		 */
+		optical?: 'auto' | 'off';
 		/** Callback invoked with the rendered `<button>` or `<a>` element on mount, `null` on destroy. */
 		ref?: (el: HTMLButtonElement | HTMLAnchorElement | null) => void;
 		children: Snippet;
@@ -52,7 +63,9 @@
 		download,
 		type = 'button',
 		onclick,
-		class: className,
+		class: classAttr,
+		className = classAttr,
+		optical = 'auto',
 		ref,
 		children,
 		...rest
@@ -84,6 +97,7 @@
 			{download}
 			aria-disabled={disabled || undefined}
 			data-disabled={disabled || undefined}
+			data-optical={optical}
 			tabindex={disabled ? -1 : undefined}
 			{...variantAttrs({ variant, size, color })}
 			class={className}
@@ -97,6 +111,7 @@
 			{type}
 			{disabled}
 			data-disabled={disabled || undefined}
+			data-optical={optical}
 			{...variantAttrs({ variant, size, color })}
 			class={className}
 			{onclick}
@@ -204,6 +219,22 @@
 		}
 	}
 
+	/* ── Optical icon offset ───────────────────────────────────────────────────
+	   When a button has a leading or trailing child marked with
+	   `[data-dry-icon]`, trim the padding on that side by
+	   `--dry-optical-icon-offset` so the label reads visually centered against
+	   the icon. Consumers set `data-optical="off"` (via the `optical` prop)
+	   to disable the nudge. Data-attribute selectors pierce Svelte style
+	   scoping without needing `:global()`, which is banned by
+	   `dryui/no-global`. */
+	:is(a, button)[data-optical='auto']:has(> [data-dry-icon]:first-child) {
+		padding-inline-start: calc(var(--_dry-btn-padding-x) - var(--dry-optical-icon-offset));
+	}
+
+	:is(a, button)[data-optical='auto']:has(> [data-dry-icon]:last-child) {
+		padding-inline-end: calc(var(--_dry-btn-padding-x) - var(--dry-optical-icon-offset));
+	}
+
 	/* ── Variants ──────────────────────────────────────────────────────────────── */
 
 	:is(a, button)[data-variant='solid'] {
@@ -451,6 +482,30 @@
 		--_dry-btn-on-accent: var(--dry-btn-on-accent, var(--dry-color-on-error));
 	}
 
+	/* ── Ink: editorial "download / primary CTA" preset.
+	   Uses the semantic `inverse` tokens so the surface flips between themes:
+	   light theme → near-black bg + white text; dark theme → white bg + near-black
+	   text. Any consumer token override (--dry-btn-bg etc.) still wins because the
+	   variant styles read from the public layer first. */
+	:is(a, button)[data-color='ink'] {
+		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-bg-inverse));
+		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-inverse));
+		--_dry-btn-accent-stroke: var(--dry-btn-accent-stroke, var(--dry-color-stroke-strong));
+		--_dry-btn-accent-weak: var(
+			--dry-btn-accent-weak,
+			color-mix(in srgb, var(--dry-color-bg-inverse) 10%, transparent)
+		);
+		--_dry-btn-accent-hover: var(
+			--dry-btn-accent-hover,
+			color-mix(in srgb, var(--dry-color-bg-inverse) 85%, transparent)
+		);
+		--_dry-btn-accent-active: var(
+			--dry-btn-accent-active,
+			color-mix(in srgb, var(--dry-color-bg-inverse) 75%, transparent)
+		);
+		--_dry-btn-on-accent: var(--dry-btn-on-accent, var(--dry-color-text-inverse));
+	}
+
 	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
 
 	:is(a, button)[data-size='sm'] {

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

@@ -3,11 +3,20 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLButtonAttributes, 'color'> {
     variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare' | 'trigger' | 'nav' | 'tab' | 'toggle' | 'pill';
     size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
-    color?: 'primary' | 'danger' | (string & {}) | null;
+    color?: 'primary' | 'danger' | 'ink' | (string & {}) | null;
     href?: string;
     rel?: string;
     target?: string;
     download?: boolean | string;
+    /** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
+    className?: HTMLButtonAttributes['class'];
+    /**
+     * Optical compensation for leading/trailing icons. When `'auto'` (default),
+     * the button trims its inline padding on the icon side by
+     * `--dry-optical-icon-offset` so the label reads visually centered against
+     * the icon. Set to `'off'` to disable the nudge.
+     */
+    optical?: 'auto' | 'off';
     /** Callback invoked with the rendered `<button>` or `<a>` element on mount, `null` on destroy. */
     ref?: (el: HTMLButtonElement | HTMLAnchorElement | null) => void;
     children: Snippet;

package/dist/button/index.d.ts

@@ -1,10 +1,12 @@
 import type { ButtonProps as PrimitiveButtonProps } from '@dryui/primitives';
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare' | 'trigger' | 'nav' | 'tab' | 'toggle' | 'pill';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
-export type ButtonColor = 'primary' | 'danger' | (string & {}) | null;
+export type ButtonColor = 'primary' | 'danger' | 'ink' | (string & {}) | null;
 export interface ButtonProps extends Omit<PrimitiveButtonProps, 'color'> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     color?: ButtonColor;
+    /** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
+    className?: string;
 }
 export { default as Button } from './button.svelte';

package/dist/button-group/button-group.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-group/button-group.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ButtonGroup',
+    description: 'Groups related buttons with shared styling',
+    category: 'action',
+    tags: ['button', 'group', 'toolbar', 'actions']
+};

package/dist/calendar/calendar.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/calendar/calendar.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Calendar',
+    description: 'Interactive calendar grid for date navigation',
+    category: 'form',
+    tags: ['date', 'calendar', 'picker', 'month', 'locale']
+};

package/dist/card/card-content.svelte

@@ -16,7 +16,7 @@
 
 <style>
 	[data-card-content] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		overflow-x: auto;
 	}
 

package/dist/card/card-footer.svelte

@@ -15,7 +15,7 @@
 
 <style>
 	[data-card-footer] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		border-top: 1px solid var(--dry-card-border, var(--dry-color-stroke-weak));
 	}
 

package/dist/card/card-header.svelte

@@ -15,7 +15,7 @@
 
 <style>
 	[data-card-header] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		border-bottom: 1px solid var(--dry-card-border, var(--dry-color-stroke-weak));
 	}