@dryui/ui 3.0.0 → 4.0.0

package/dist/icon/icon.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { variantAttrs } from '@dryui/primitives';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		color?: 'primary' | 'muted' | 'current';
 		label?: string;
-		class?: string;
 		children: Snippet;
 	}
 
-	let { size = 'md', color = 'current', label, class: className, children }: Props = $props();
+	let {
+		size = 'md',
+		color = 'current',
+		label,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 
 	function sizeSvg(node: HTMLElement) {
 		const svg = node.querySelector('svg');
@@ -28,6 +35,7 @@
 	aria-hidden={label ? undefined : true}
 	{...variantAttrs({ size, color })}
 	class={className}
+	{...rest}
 	use:sizeSvg
 >
 	{@render children()}
@@ -35,47 +43,50 @@
 
 <style>
 	span {
+		--_icon-size-default: var(--dry-space-5);
+		--_icon-color-default: currentColor;
+
 		display: inline-grid;
 		place-items: center;
 		aspect-ratio: 1;
-		height: var(--dry-icon-size, var(--dry-space-5));
-		color: var(--dry-icon-color, currentColor);
+		height: var(--dry-icon-size, var(--_icon-size-default));
+		color: var(--dry-icon-color, var(--_icon-color-default));
 		line-height: 0;
 	}
 
 	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
 
 	span[data-size='xs'] {
-		--dry-icon-size: var(--dry-space-3);
+		--_icon-size-default: var(--dry-space-3);
 	}
 
 	span[data-size='sm'] {
-		--dry-icon-size: var(--dry-space-4);
+		--_icon-size-default: var(--dry-space-4);
 	}
 
 	span[data-size='md'] {
-		--dry-icon-size: var(--dry-space-5);
+		--_icon-size-default: var(--dry-space-5);
 	}
 
 	span[data-size='lg'] {
-		--dry-icon-size: var(--dry-space-6);
+		--_icon-size-default: var(--dry-space-6);
 	}
 
 	span[data-size='xl'] {
-		--dry-icon-size: var(--dry-space-8);
+		--_icon-size-default: var(--dry-space-8);
 	}
 
 	/* ── Colors ────────────────────────────────────────────────────────────────── */
 
 	span[data-color='primary'] {
-		--dry-icon-color: var(--dry-color-fill-brand);
+		--_icon-color-default: var(--dry-color-fill-brand);
 	}
 
 	span[data-color='muted'] {
-		--dry-icon-color: var(--dry-color-text-weak);
+		--_icon-color-default: var(--dry-color-text-weak);
 	}
 
 	span[data-color='current'] {
-		--dry-icon-color: currentColor;
+		--_icon-color-default: currentColor;
 	}
 </style>

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

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: 'primary' | 'muted' | 'current';
     label?: string;
-    class?: string;
     children: Snippet;
 }
 declare const Icon: import("svelte").Component<Props, {}, "">;

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

@@ -1,19 +1,20 @@
 <script lang="ts">
 	import type { Component, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		icon: Snippet | Component | unknown;
 		size?: 'sm' | 'md' | 'lg';
 		label?: string;
 	}
 
-	let { icon, size = 'md', label }: Props = $props();
+	let { icon, size = 'md', label, class: className, ...rest }: 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}>
+	<span class={['dry-icon-swap', className]} data-size={size} aria-label={label} {...rest}>
 		{#if typeof icon === 'function' && (icon as Snippet).length === 0}
 			{@render iconAsSnippet()}
 		{:else}

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

@@ -1,5 +1,6 @@
 import type { Component, Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     icon: Snippet | Component | unknown;
     size?: 'sm' | 'md' | 'lg';
     label?: string;

package/dist/image/image.svelte

@@ -37,10 +37,8 @@
 {#if status === 'error' && fallbackSnippet}
 	{@render fallbackSnippet()}
 {:else if status === 'error' && fallback}
-	<!-- dryui-allow raw-img: Image is the canonical component that renders the underlying img element. -->
 	<img class={className} src={fallback} {alt} data-state="fallback" {...rest} />
 {:else}
-	<!-- dryui-allow raw-img: Image is the canonical component that renders the underlying img element. -->
 	<img
 		class={className}
 		{src}
@@ -55,18 +53,12 @@
 
 <style>
 	img {
-		--dry-image-radius: var(--dry-radius-lg);
-		--dry-image-bg: var(--dry-color-bg-overlay);
-		--dry-image-object-fit: cover;
-		--dry-image-block-size: auto;
-		--dry-image-place-self: auto;
-
 		display: block;
-		block-size: var(--dry-image-block-size);
-		place-self: var(--dry-image-place-self);
-		border-radius: var(--dry-image-radius);
-		background: var(--dry-image-bg);
-		object-fit: var(--dry-image-object-fit);
+		block-size: var(--dry-image-block-size, auto);
+		place-self: var(--dry-image-place-self, auto);
+		border-radius: var(--dry-image-radius, var(--dry-radius-lg));
+		background: var(--dry-image-bg, var(--dry-color-bg-overlay));
+		object-fit: var(--dry-image-object-fit, cover);
 	}
 
 	img[data-state='loaded'],

package/dist/image-comparison/image-comparison.svelte

@@ -22,13 +22,13 @@
 	}: Props = $props();
 
 	let dragging = $state(false);
+	let el = $state<HTMLDivElement>();
 
-	function syncStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-image-comparison-position', `${position}%`);
-		});
-	}
+	$effect(() => {
+		if (!el) return;
+		el.style.cssText = style || '';
+		el.style.setProperty('--dry-image-comparison-position', `${position}%`);
+	});
 
 	function updatePosition(clientX: number, clientY: number, containerEl: HTMLElement) {
 		const rect = containerEl.getBoundingClientRect();
@@ -84,7 +84,7 @@
 {/snippet}
 
 <div
-	{@attach syncStyles}
+	bind:this={el}
 	class={className}
 	data-image-comparison
 	data-orientation={orientation}
@@ -121,22 +121,11 @@
 
 <style>
 	[data-image-comparison] {
-		--dry-image-comparison-position: 50%;
-		--dry-image-comparison-handle-width: 2px;
-		--dry-image-comparison-handle-color: var(--dry-color-bg-overlay);
-		--dry-image-comparison-arrow-color: var(--dry-color-text-strong);
-		--dry-image-comparison-arrow-width: 5px;
-		--dry-image-comparison-arrow-width-wide: 6px;
-		--dry-image-comparison-handle-shadow: var(--dry-shadow-md);
-		--dry-image-comparison-radius: var(--dry-radius-lg);
-		--dry-image-comparison-grip-z-index: 1;
-		--dry-image-comparison-handle-z-index: 1;
-
 		position: relative;
 		display: grid;
 		height: 100%;
 		overflow: hidden;
-		border-radius: var(--dry-image-comparison-radius);
+		border-radius: var(--dry-image-comparison-radius, var(--dry-radius-lg));
 		user-select: none;
 		touch-action: none;
 	}
@@ -147,24 +136,24 @@
 	}
 
 	[data-image-comparison][data-orientation='horizontal'] [data-ic-layer-before] {
-		clip-path: inset(0 calc(100% - var(--dry-image-comparison-position)) 0 0);
+		clip-path: inset(0 calc(100% - var(--dry-image-comparison-position, 50%)) 0 0);
 	}
 
 	[data-image-comparison][data-orientation='vertical'] [data-ic-layer-before] {
-		clip-path: inset(0 0 calc(100% - var(--dry-image-comparison-position)) 0);
+		clip-path: inset(0 0 calc(100% - var(--dry-image-comparison-position, 50%)) 0);
 	}
 
 	[data-ic-handle-wrapper] {
 		position: absolute;
 		display: grid;
 		place-items: center;
-		z-index: var(--dry-image-comparison-handle-z-index);
+		z-index: var(--dry-image-comparison-handle-z-index, 1);
 	}
 
 	[data-image-comparison][data-orientation='horizontal'] [data-ic-handle-wrapper] {
 		top: 0;
 		bottom: 0;
-		left: var(--dry-image-comparison-position);
+		left: var(--dry-image-comparison-position, 50%);
 		translate: -50% 0;
 		cursor: ew-resize;
 	}
@@ -172,7 +161,7 @@
 	[data-image-comparison][data-orientation='vertical'] [data-ic-handle-wrapper] {
 		left: 0;
 		right: 0;
-		top: var(--dry-image-comparison-position);
+		top: var(--dry-image-comparison-position, 50%);
 		translate: 0 -50%;
 		cursor: ns-resize;
 	}
@@ -193,19 +182,19 @@
 	/* Handle line */
 	[data-ic-handle-line] {
 		position: absolute;
-		background: var(--dry-image-comparison-handle-color);
-		box-shadow: var(--dry-image-comparison-handle-shadow);
+		background: var(--dry-image-comparison-handle-color, var(--dry-color-bg-overlay));
+		box-shadow: var(--dry-image-comparison-handle-shadow, var(--dry-shadow-md));
 	}
 
 	[data-ic-handle][data-orientation='horizontal'] [data-ic-handle-line] {
-		left: calc(50% - calc(var(--dry-image-comparison-handle-width) / 2));
-		right: calc(50% - calc(var(--dry-image-comparison-handle-width) / 2));
+		left: calc(50% - calc(var(--dry-image-comparison-handle-width, 2px) / 2));
+		right: calc(50% - calc(var(--dry-image-comparison-handle-width, 2px) / 2));
 		top: 0;
 		bottom: 0;
 	}
 
 	[data-ic-handle][data-orientation='vertical'] [data-ic-handle-line] {
-		height: var(--dry-image-comparison-handle-width);
+		height: var(--dry-image-comparison-handle-width, 2px);
 		top: 50%;
 		left: 0;
 		right: 0;
@@ -215,12 +204,12 @@
 	/* Grip indicator */
 	[data-ic-grip] {
 		position: relative;
-		z-index: var(--dry-image-comparison-grip-z-index);
+		z-index: var(--dry-image-comparison-grip-z-index, 1);
 		aspect-ratio: 1;
 		height: var(--dry-space-12);
 		border-radius: var(--dry-radius-full);
-		background: var(--dry-image-comparison-handle-color);
-		box-shadow: var(--dry-image-comparison-handle-shadow);
+		background: var(--dry-image-comparison-handle-color, var(--dry-color-bg-overlay));
+		box-shadow: var(--dry-image-comparison-handle-shadow, var(--dry-shadow-md));
 		display: grid;
 		place-items: center;
 	}
@@ -231,7 +220,7 @@
 		grid-auto-columns: 0;
 		align-items: center;
 		gap: var(--dry-space-2);
-		color: var(--dry-image-comparison-arrow-color);
+		color: var(--dry-image-comparison-arrow-color, var(--dry-color-text-strong));
 	}
 
 	[data-ic-handle][data-orientation='vertical'] [data-ic-grip-arrows] {
@@ -246,28 +235,33 @@
 
 	/* Horizontal arrows (left/right) */
 	[data-ic-handle][data-orientation='horizontal'] [data-ic-grip-arrow-start] {
-		border-width: var(--dry-image-comparison-arrow-width)
-			var(--dry-image-comparison-arrow-width-wide) var(--dry-image-comparison-arrow-width) 0;
-		border-color: transparent var(--dry-image-comparison-arrow-color) transparent transparent;
+		border-width: var(--dry-image-comparison-arrow-width, 5px)
+			var(--dry-image-comparison-arrow-width-wide, 6px) var(--dry-image-comparison-arrow-width, 5px)
+			0;
+		border-color: transparent var(--dry-image-comparison-arrow-color, var(--dry-color-text-strong))
+			transparent transparent;
 	}
 
 	[data-ic-handle][data-orientation='horizontal'] [data-ic-grip-arrow-end] {
-		border-width: var(--dry-image-comparison-arrow-width) 0 var(--dry-image-comparison-arrow-width)
-			var(--dry-image-comparison-arrow-width-wide);
-		border-color: transparent transparent transparent var(--dry-image-comparison-arrow-color);
+		border-width: var(--dry-image-comparison-arrow-width, 5px) 0
+			var(--dry-image-comparison-arrow-width, 5px) var(--dry-image-comparison-arrow-width-wide, 6px);
+		border-color: transparent transparent transparent
+			var(--dry-image-comparison-arrow-color, var(--dry-color-text-strong));
 	}
 
 	/* Vertical arrows (up/down) */
 	[data-ic-handle][data-orientation='vertical'] [data-ic-grip-arrow-start] {
-		border-width: 0 var(--dry-image-comparison-arrow-width)
-			var(--dry-image-comparison-arrow-width-wide) var(--dry-image-comparison-arrow-width);
-		border-color: transparent transparent var(--dry-image-comparison-arrow-color) transparent;
+		border-width: 0 var(--dry-image-comparison-arrow-width, 5px)
+			var(--dry-image-comparison-arrow-width-wide, 6px) var(--dry-image-comparison-arrow-width, 5px);
+		border-color: transparent transparent
+			var(--dry-image-comparison-arrow-color, var(--dry-color-text-strong)) transparent;
 	}
 
 	[data-ic-handle][data-orientation='vertical'] [data-ic-grip-arrow-end] {
-		border-width: var(--dry-image-comparison-arrow-width-wide)
-			var(--dry-image-comparison-arrow-width) 0 var(--dry-image-comparison-arrow-width);
-		border-color: var(--dry-image-comparison-arrow-color) transparent transparent transparent;
+		border-width: var(--dry-image-comparison-arrow-width-wide, 6px)
+			var(--dry-image-comparison-arrow-width, 5px) 0 var(--dry-image-comparison-arrow-width, 5px);
+		border-color: var(--dry-image-comparison-arrow-color, var(--dry-color-text-strong)) transparent
+			transparent transparent;
 	}
 
 	/* Focus */

package/dist/index.d.ts

@@ -2,8 +2,6 @@ export { Button } from './button/index.js';
 export type { ButtonProps } from './button/index.js';
 export { Input } from './input/index.js';
 export type { InputProps } from './input/index.js';
-export { Card } from './card/index.js';
-export type { CardRootProps, CardHeaderProps, CardContentProps, CardFooterProps } from './card/index.js';
 export { Dialog } from './dialog/index.js';
 export type { DialogRootProps, DialogTriggerProps, DialogContentProps, DialogOverlayProps, DialogHeaderProps, DialogBodyProps, DialogFooterProps, DialogCloseProps } from './dialog/index.js';
 export { AlertDialog } from './alert-dialog/index.js';
@@ -143,7 +141,7 @@ export type { DateFieldRootProps, DateFieldSegmentProps, DateFieldSeparatorProps
 export { DatePicker } from './date-picker/index.js';
 export type { DatePickerRootProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerCalendarProps } from './date-picker/index.js';
 export { Calendar } from './calendar/index.js';
-export type { CalendarRootProps, CalendarHeaderProps, CalendarGridProps, CalendarPrevProps, CalendarNextProps, CalendarHeadingProps } from './calendar/index.js';
+export type { CalendarEventDisplay, CalendarEventItem, CalendarEventPosition, CalendarEventRenderContext, CalendarEventTone, CalendarVisibleMonths, CalendarRootProps, CalendarHeaderProps, CalendarGridProps, CalendarPrevProps, CalendarNextProps, CalendarHeadingProps, CalendarWeekProps, CalendarEvent, CalendarEventCategory, CalendarView, PositionedEvent, DayBandEvent } from './calendar/index.js';
 export { DateRangePicker } from './date-range-picker/index.js';
 export type { DateRangePickerRootProps, DateRangePickerTriggerProps, DateRangePickerContentProps, DateRangePickerCalendarProps, DateRangePickerPresetProps } from './date-range-picker/index.js';
 export { Listbox } from './listbox/index.js';
@@ -294,8 +292,8 @@ export { StarRating } from './star-rating/index.js';
 export type { StarRatingRootProps } from './star-rating/index.js';
 export { Tag } from './tag/index.js';
 export type { TagProps, TagColor } from './tag/index.js';
-export { TokenScope } from './themes/token-scope.js';
-export type { TokenScopeProps } from './themes/token-scope.js';
+export { TokenScope } from './token-scope/index.js';
+export type { TokenScopeProps } from './token-scope/index.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';

package/dist/index.js

@@ -1,6 +1,5 @@
 export { Button } from './button/index.js';
 export { Input } from './input/index.js';
-export { Card } from './card/index.js';
 export { Dialog } from './dialog/index.js';
 export { AlertDialog } from './alert-dialog/index.js';
 export { Drawer } from './drawer/index.js';
@@ -151,7 +150,7 @@ export { ShaderCanvas, PRESETS as SHADER_PRESETS } from './shader-canvas/index.j
 export { Svg } from './svg/index.js';
 export { StarRating } from './star-rating/index.js';
 export { Tag } from './tag/index.js';
-export { TokenScope } from './themes/token-scope.js';
+export { TokenScope } from './token-scope/index.js';
 export { Diagram } from './diagram/index.js';
 // Visual Polish — motion, numeric, icon-swap
 export { IconSwap } from './icon-swap/index.js';

package/dist/input/input.svelte

@@ -1,12 +1,35 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getFormControlCtx, variantAttrs } from '@dryui/primitives';
+	import type { FormControlWrapperAttrs } from '../internal/form-control-wrapper-attrs.js';
 
-	interface Props extends Omit<HTMLInputAttributes, 'size'> {
+	interface Props extends FormControlWrapperAttrs<HTMLSpanElement> {
 		value?: string;
 		size?: 'sm' | 'md' | 'lg';
 		variant?: 'default' | 'ghost';
 		disabled?: boolean;
+		type?: HTMLInputAttributes['type'];
+		placeholder?: HTMLInputAttributes['placeholder'];
+		name?: HTMLInputAttributes['name'];
+		readonly?: HTMLInputAttributes['readonly'];
+		required?: HTMLInputAttributes['required'];
+		min?: HTMLInputAttributes['min'];
+		max?: HTMLInputAttributes['max'];
+		minlength?: HTMLInputAttributes['minlength'];
+		maxlength?: HTMLInputAttributes['maxlength'];
+		pattern?: HTMLInputAttributes['pattern'];
+		step?: HTMLInputAttributes['step'];
+		list?: HTMLInputAttributes['list'];
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		autofocus?: HTMLInputAttributes['autofocus'];
+		inputmode?: HTMLInputAttributes['inputmode'];
+		oninput?: HTMLInputAttributes['oninput'];
+		onchange?: HTMLInputAttributes['onchange'];
+		onfocus?: HTMLInputAttributes['onfocus'];
+		onblur?: HTMLInputAttributes['onblur'];
+		onkeydown?: HTMLInputAttributes['onkeydown'];
+		onkeyup?: HTMLInputAttributes['onkeyup'];
+		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
 	}
 
 	let {
@@ -14,29 +37,85 @@
 		size = 'md',
 		variant = 'default',
 		class: className,
+		style,
 		disabled = false,
+		id,
 		type,
+		placeholder,
+		name,
+		readonly,
+		required,
+		min,
+		max,
+		minlength,
+		maxlength,
+		pattern,
+		step,
+		list,
+		autocomplete,
+		autofocus,
+		inputmode,
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+		onkeydown,
+		onkeyup,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		'aria-errormessage': ariaErrormessage,
 		...rest
 	}: Props = $props();
 
 	const ctx = getFormControlCtx();
 	const isDisabled = $derived(disabled || ctx?.disabled || false);
+
+	function autofocusAction(node: HTMLInputElement, enabled: HTMLInputAttributes['autofocus']) {
+		if (enabled) node.focus();
+		return {
+			update(nextEnabled: HTMLInputAttributes['autofocus']) {
+				if (nextEnabled) node.focus();
+			}
+		};
+	}
 </script>
 
-<span class="wrapper">
+<span class="wrapper {className ?? ''}" {style}>
 	<input
+		{...rest}
 		{...type != null ? { type } : {}}
+		use:autofocusAction={autofocus}
 		bind:value
-		id={ctx?.id}
+		id={id ?? ctx?.id}
 		disabled={isDisabled}
-		required={ctx?.required || undefined}
-		aria-describedby={ctx?.describedBy}
-		aria-invalid={ctx?.hasError || undefined}
-		aria-errormessage={ctx?.errorMessageId}
+		required={required ?? ctx?.required ?? undefined}
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		aria-describedby={ariaDescribedby ?? ctx?.describedBy}
+		aria-invalid={ariaInvalid ?? ctx?.hasError ?? undefined}
+		aria-errormessage={ariaErrormessage ?? ctx?.errorMessageId}
 		data-disabled={isDisabled || undefined}
 		{...variantAttrs({ size, variant: variant !== 'default' ? variant : undefined })}
-		class={className}
-		{...rest}
+		{placeholder}
+		{name}
+		{readonly}
+		{min}
+		{max}
+		{minlength}
+		{maxlength}
+		{pattern}
+		{step}
+		{list}
+		{autocomplete}
+		{inputmode}
+		{oninput}
+		{onchange}
+		{onfocus}
+		{onblur}
+		{onkeydown}
+		{onkeyup}
 	/>
 </span>
 

package/dist/input/input.svelte.d.ts

@@ -1,9 +1,32 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'size'> {
+import type { FormControlWrapperAttrs } from '../internal/form-control-wrapper-attrs.js';
+interface Props extends FormControlWrapperAttrs<HTMLSpanElement> {
     value?: string;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'default' | 'ghost';
     disabled?: boolean;
+    type?: HTMLInputAttributes['type'];
+    placeholder?: HTMLInputAttributes['placeholder'];
+    name?: HTMLInputAttributes['name'];
+    readonly?: HTMLInputAttributes['readonly'];
+    required?: HTMLInputAttributes['required'];
+    min?: HTMLInputAttributes['min'];
+    max?: HTMLInputAttributes['max'];
+    minlength?: HTMLInputAttributes['minlength'];
+    maxlength?: HTMLInputAttributes['maxlength'];
+    pattern?: HTMLInputAttributes['pattern'];
+    step?: HTMLInputAttributes['step'];
+    list?: HTMLInputAttributes['list'];
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    autofocus?: HTMLInputAttributes['autofocus'];
+    inputmode?: HTMLInputAttributes['inputmode'];
+    oninput?: HTMLInputAttributes['oninput'];
+    onchange?: HTMLInputAttributes['onchange'];
+    onfocus?: HTMLInputAttributes['onfocus'];
+    onblur?: HTMLInputAttributes['onblur'];
+    onkeydown?: HTMLInputAttributes['onkeydown'];
+    onkeyup?: HTMLInputAttributes['onkeyup'];
+    'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/internal/anchored-overlay-content.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import { type Placement } from '@dryui/primitives';
 interface AnchoredOverlayContentContext {
     readonly open: boolean;
@@ -7,14 +6,21 @@ interface AnchoredOverlayContentContext {
 }
 interface AnchoredOverlayContentOptions {
     ctx: AnchoredOverlayContentContext;
+    contentEl: () => HTMLElement | null;
     placement: () => Placement;
     offset: () => number;
-    style: () => HTMLAttributes<HTMLDivElement>['style'];
-    onContentChange?: (contentEl: HTMLDivElement | null) => void;
+    onContentChange?: (contentEl: HTMLElement | null) => void;
 }
+/**
+ * Wires an overlay content element to its trigger via createAnchoredPopover.
+ * Consumers own the content element (`bind:this={contentEl}`) and pass a
+ * getter; this helper returns the `applyPosition` action which is used as
+ * `use:overlay.applyPosition={style}` on the same element.
+ */
 export declare function createAnchoredOverlayContent(options: AnchoredOverlayContentOptions): {
-    bindContent: (node: HTMLDivElement) => () => void;
-    contentEl: () => HTMLDivElement | null;
-    position: import("svelte/attachments").Attachment<HTMLElement>;
+    applyPosition: (node: HTMLElement, initialUserStyle?: string | null) => {
+        update(newUserStyle?: string | null): void;
+    };
+    contentEl: () => HTMLElement | null;
 };
 export {};

package/dist/internal/anchored-overlay-content.svelte.js

@@ -1,28 +1,25 @@
-import { fromAction } from 'svelte/attachments';
 import { createAnchoredPopover } from '@dryui/primitives';
+/**
+ * Wires an overlay content element to its trigger via createAnchoredPopover.
+ * Consumers own the content element (`bind:this={contentEl}`) and pass a
+ * getter; this helper returns the `applyPosition` action which is used as
+ * `use:overlay.applyPosition={style}` on the same element.
+ */
 export function createAnchoredOverlayContent(options) {
-    let contentEl = $state();
     const popover = createAnchoredPopover({
         triggerEl: () => options.ctx.triggerEl,
-        contentEl: () => contentEl ?? null,
+        contentEl: options.contentEl,
         open: () => options.ctx.open,
         placement: options.placement,
         offset: options.offset
     });
-    const position = fromAction(popover.applyPosition, options.style);
-    function bindContent(node) {
-        contentEl = node;
-        options.onContentChange?.(node);
-        return () => {
-            if (contentEl === node) {
-                contentEl = undefined;
-            }
-            options.onContentChange?.(null);
-        };
+    if (options.onContentChange) {
+        $effect(() => {
+            options.onContentChange?.(options.contentEl());
+        });
     }
     return {
-        bindContent,
-        contentEl: () => contentEl ?? null,
-        position
+        applyPosition: popover.applyPosition,
+        contentEl: options.contentEl
     };
 }