@dryui/ui 1.7.4 → 1.9.0

package/dist/glow/glow.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Glow',
+    description: 'Soft glow effect wrapper with configurable color, intensity, and animation',
+    category: 'visual',
+    tags: ['glow', 'light', 'shadow', 'neon', 'effect', 'animation']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'GodRays',
+    description: 'Volumetric radial light rays surface with configurable origin, spread, and intensity',
+    category: 'visual',
+    tags: ['rays', 'light', 'volumetric', 'hero', 'effect']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'GradientMesh',
+    description: 'Animated multi-color gradient mesh background with optional interactivity',
+    category: 'visual',
+    tags: ['gradient', 'mesh', 'background', 'animation', 'interactive', 'color']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Halftone',
+    description: 'SVG halftone dot pattern overlay with configurable size, angle, and color',
+    category: 'visual',
+    tags: ['halftone', 'dots', 'pattern', 'texture', 'print', 'overlay']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Heading',
+    description: 'Standalone semantic heading export for starter-kit typography',
+    category: 'display',
+    tags: ['text', 'heading', 'title', 'typography']
+};

package/dist/heading/heading.svelte

@@ -6,6 +6,7 @@
 	interface Props extends HTMLAttributes<HTMLHeadingElement> {
 		level?: 1 | 2 | 3 | 4 | 5 | 6;
 		variant?: 'default' | 'display';
+		maxMeasure?: 'narrow' | 'default' | 'wide' | false;
 		className?: HTMLAttributes<HTMLHeadingElement>['class'];
 		children: Snippet;
 	}
@@ -13,35 +14,40 @@
 	let {
 		level = 2,
 		variant = 'default',
+		maxMeasure = false,
 		class: classAttr,
 		className = classAttr,
 		children,
 		...rest
 	}: Props = $props();
+
+	let measure: 'narrow' | 'default' | 'wide' | undefined = $derived(
+		maxMeasure === false ? undefined : maxMeasure
+	);
 </script>
 
 {#if level === 1}
-	<h1 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h1 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h1>
 {:else if level === 2}
-	<h2 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h2 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h2>
 {:else if level === 3}
-	<h3 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h3 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h3>
 {:else if level === 4}
-	<h4 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h4 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h4>
 {:else if level === 5}
-	<h5 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h5 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h5>
 {:else}
-	<h6 class={className} {...variantAttrs({ level, variant })} {...rest}>
+	<h6 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h6>
 {/if}
@@ -93,8 +99,24 @@
 	}
 
 	[data-variant='display'] {
+		font-family: var(--dry-font-display, var(--dry-font-sans));
 		font-size: var(--dry-type-display-size, var(--dry-text-4xl-size, 2.25rem));
 		line-height: var(--dry-type-display-leading, 4rem);
 		letter-spacing: -0.04em;
 	}
+
+	/* ── Measure (max-inline-size) ─────────────────────────────────────────────
+	   ch-unit measure tracks text content, not viewport layout. Editorial
+	   headlines wrap at narrow widths (~22ch) for rhythm. */
+	[data-measure='narrow'] {
+		max-inline-size: 22ch;
+	}
+
+	[data-measure='default'] {
+		max-inline-size: 45ch;
+	}
+
+	[data-measure='wide'] {
+		max-inline-size: 65ch;
+	}
 </style>

package/dist/heading/heading.svelte.d.ts

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: 'default' | 'display';
+    maxMeasure?: 'narrow' | 'default' | 'wide' | false;
     className?: HTMLAttributes<HTMLHeadingElement>['class'];
     children: Snippet;
 }

package/dist/heading/index.d.ts

@@ -3,6 +3,12 @@ import type { HTMLAttributes } from 'svelte/elements';
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: 'default' | 'display';
+    /**
+     * Caps the rendered inline size in ch units so editorial headlines wrap on
+     * ergonomic measure. `false` (default) keeps the existing behaviour of no
+     * cap. `narrow` ≈ 22ch, `default` ≈ 45ch, `wide` ≈ 65ch.
+     */
+    maxMeasure?: 'narrow' | 'default' | 'wide' | false;
     className?: HTMLAttributes<HTMLHeadingElement>['class'];
     children: Snippet;
 }

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Hotkey',
+    description: 'Keyboard shortcut handler with modifier support',
+    category: 'utility',
+    tags: ['keyboard', 'shortcut', 'hotkey', 'keybinding']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'HoverCard',
+    description: 'Card popup on hover with delay-based open/close',
+    category: 'overlay',
+    tags: ['hover', 'card', 'preview', 'popup']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Icon',
+    description: 'Sized and colored SVG icon wrapper with accessibility label',
+    category: 'display',
+    tags: ['icon', 'svg', 'size', 'color', 'accessible']
+};

package/dist/icon/icon.svelte

@@ -22,6 +22,7 @@
 </script>
 
 <span
+	data-dry-icon=""
 	role={label ? 'img' : 'presentation'}
 	aria-label={label}
 	aria-hidden={label ? undefined : true}

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'IconSwap',
+    description: 'Keyed icon crossfade with scale and blur, driven by --dry-icon-swap-* tokens',
+    category: 'display',
+    tags: ['icon', 'swap', 'crossfade', 'animation', 'motion']
+};

package/dist/icon-swap/icon-swap.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	interface Props {
+		icon: Snippet | Component | unknown;
+		size?: 'sm' | 'md' | 'lg';
+		label?: string;
+	}
+
+	let { icon, size = 'md', label }: Props = $props();
+</script>
+
+{#key icon}
+	{@const IconComponent = icon as Component}
+	{@const iconAsSnippet = icon as Snippet}
+	<span class="dry-icon-swap" data-size={size} aria-label={label}>
+		{#if typeof icon === 'function' && (icon as Snippet).length === 0}
+			{@render iconAsSnippet()}
+		{:else}
+			<IconComponent />
+		{/if}
+	</span>
+{/key}
+
+<style>
+	.dry-icon-swap {
+		display: inline-grid;
+		place-items: center;
+		line-height: 0;
+		animation: icon-swap-in var(--dry-icon-swap-duration, 120ms)
+			var(--dry-icon-swap-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
+	}
+
+	@keyframes icon-swap-in {
+		from {
+			opacity: 0;
+			transform: scale(var(--dry-icon-swap-scale-out, 0.85));
+			filter: blur(var(--dry-icon-swap-blur-out, 2px));
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.dry-icon-swap {
+			animation: none;
+		}
+	}
+</style>

package/dist/icon-swap/icon-swap.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    icon: Snippet | Component | unknown;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+}
+declare const IconSwap: Component<Props, {}, "">;
+type IconSwap = ReturnType<typeof IconSwap>;
+export default IconSwap;

package/dist/icon-swap/index.d.ts

@@ -0,0 +1 @@
+export { default as IconSwap } from './icon-swap.svelte';

package/dist/icon-swap/index.js

@@ -0,0 +1 @@
+export { default as IconSwap } from './icon-swap.svelte';

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Image',
+    description: 'Image with loading states and fallback support',
+    category: 'display',
+    tags: ['image', 'lazy', 'loading', 'fallback']
+};

package/dist/image/image.svelte

@@ -69,7 +69,8 @@
 
 	img[data-state='loaded'],
 	img[data-state='fallback'] {
-		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+		outline: 1px solid var(--dry-image-edge);
+		outline-offset: -1px;
 	}
 
 	img[data-state='fallback'] {

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ImageComparison',
+    description: 'Before/after image comparison slider',
+    category: 'display',
+    tags: ['image', 'compare', 'slider', 'before-after']
+};

package/dist/index.d.ts

@@ -221,7 +221,7 @@ export type { ButtonGroupProps } from './button-group/index.js';
 export { Chip } from './chip/index.js';
 export type { ChipProps, ChipColor } from './chip/index.js';
 export { ChipGroup } from './chip-group/index.js';
-export type { ChipGroupRootProps, ChipGroupItemProps } from './chip-group/index.js';
+export type { ChipGroupRootProps, ChipGroupItemProps, ChipGroupLabelProps } from './chip-group/index.js';
 export { Carousel } from './carousel/index.js';
 export type { CarouselRootProps, CarouselViewportProps, CarouselSlideProps, CarouselPrevProps, CarouselNextProps, CarouselDotsProps } from './carousel/index.js';
 export { FormatBytes } from './format-bytes/index.js';
@@ -298,3 +298,10 @@ export { TokenScope } from './themes/token-scope.js';
 export type { TokenScopeProps } from './themes/token-scope.js';
 export { Diagram } from './diagram/index.js';
 export type { DiagramConfig, DiagramNode, DiagramEdge, DiagramCluster, DiagramAnnotation, DiagramSwimlane, DiagramRegion, DiagramColor, DiagramDirection } from './diagram/index.js';
+export { IconSwap } from './icon-swap/index.js';
+export { Numeric } from './numeric/index.js';
+export { Enter } from './enter/index.js';
+export { Exit } from './exit/index.js';
+export { Stagger } from './stagger/index.js';
+export { enter, leave } from './motion/index.js';
+export type { EnterOptions, LeaveOptions } from './motion/index.js';

package/dist/index.js

@@ -153,3 +153,10 @@ export { StarRating } from './star-rating/index.js';
 export { Tag } from './tag/index.js';
 export { TokenScope } from './themes/token-scope.js';
 export { Diagram } from './diagram/index.js';
+// Visual Polish — motion, numeric, icon-swap
+export { IconSwap } from './icon-swap/index.js';
+export { Numeric } from './numeric/index.js';
+export { Enter } from './enter/index.js';
+export { Exit } from './exit/index.js';
+export { Stagger } from './stagger/index.js';
+export { enter, leave } from './motion/index.js';

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'InfiniteScroll',
+    description: 'Loads more content when user scrolls near bottom',
+    category: 'display',
+    tags: ['infinite', 'scroll', 'load', 'pagination', 'lazy']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Input',
+    description: 'Text input with size variants',
+    category: 'input',
+    tags: ['form', 'text', 'input', 'field']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'InputGroup',
+    description: 'Compound input wrapper that combines prefixes, suffixes, separators, select slots, and actions',
+    category: 'input',
+    tags: ['input', 'field', 'affix', 'addon', 'control']
+};

package/dist/internal/menu-item.svelte

@@ -52,10 +52,7 @@
 		align-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
-		border-radius: var(
-			--dry-menu-item-radius,
-			min(var(--dry-control-radius, var(--dry-radius-sm)), var(--dry-space-4))
-		);
+		border-radius: var(--dry-menu-item-radius, var(--dry-radius-nested-popover));
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

package/dist/internal/modal-content.svelte

@@ -86,6 +86,7 @@
 </dialog>
 
 <style>
+	/* dialog: outer: var(--dry-radius-dialog); children inside the padded region use var(--dry-radius-nested-dialog). */
 	[data-modal-content] {
 		position: fixed;
 		inset: 0;
@@ -128,7 +129,7 @@
 		--dry-radius-nested: max(
 			var(--dry-radius-sm),
 			calc(
-				var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl))) -
+				var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-dialog))) -
 					var(--dry-dialog-padding)
 			)
 		);
@@ -137,7 +138,7 @@
 		container-type: inline-size;
 		justify-self: stretch;
 		border: 1px solid var(--dry-dialog-border);
-		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl)));
+		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-dialog)));
 		background: var(--dry-dialog-bg, var(--dry-overlay-bg, var(--dry-color-bg-overlay)));
 		color: var(--dry-color-text-strong);
 		box-shadow: var(--dry-dialog-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Kbd',
+    description: 'Keyboard shortcut display element',
+    category: 'display',
+    tags: ['keyboard', 'shortcut', 'key', 'kbd']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Label',
+    description: 'Form label with size variants',
+    category: 'form',
+    tags: ['form', 'label', 'text', 'accessibility']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Link',
+    description: 'Styled anchor with external and disabled states',
+    category: 'navigation',
+    tags: ['link', 'anchor', 'href', 'external']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'LinkPreview',
+    description: 'Link preview popup on hover',
+    category: 'overlay',
+    tags: ['link', 'preview', 'hover', 'popup', 'popover', 'card']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'List',
+    description: 'Structured list with items, icons, and subheaders',
+    category: 'display',
+    tags: ['list', 'item', 'icon', 'dense']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Listbox',
+    description: 'Single or multi-select list with keyboard navigation',
+    category: 'input',
+    tags: ['listbox', 'select', 'option', 'keyboard']
+};

package/dist/logo-mark/logo-mark.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;