@dryui/ui 3.0.0 → 4.0.0

package/dist/number-input/number-input-button.svelte

@@ -1,14 +1,28 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import Button from '../button/button.svelte';
+	import type { FormControlWrapperAttrs } from '../internal/form-control-wrapper-attrs.js';
 
-	interface Props extends Omit<HTMLInputAttributes, 'size'> {
+	interface Props extends Omit<FormControlWrapperAttrs<HTMLDivElement>, 'role'> {
 		value?: number;
 		min?: number;
 		max?: number;
 		step?: number;
 		size?: 'sm' | 'md' | 'lg';
 		disabled?: boolean;
+		name?: HTMLInputAttributes['name'];
+		placeholder?: HTMLInputAttributes['placeholder'];
+		readonly?: HTMLInputAttributes['readonly'];
+		required?: HTMLInputAttributes['required'];
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		autofocus?: HTMLInputAttributes['autofocus'];
+		oninput?: HTMLInputAttributes['oninput'];
+		onchange?: HTMLInputAttributes['onchange'];
+		onfocus?: HTMLInputAttributes['onfocus'];
+		onblur?: HTMLInputAttributes['onblur'];
+		onkeydown?: HTMLInputAttributes['onkeydown'];
+		onkeyup?: HTMLInputAttributes['onkeyup'];
+		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
 	}
 
 	let {
@@ -19,6 +33,24 @@
 		size = 'md',
 		disabled = false,
 		class: className,
+		id,
+		name,
+		placeholder,
+		readonly,
+		required,
+		autocomplete,
+		autofocus,
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+		onkeydown,
+		onkeyup,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		'aria-errormessage': ariaErrormessage,
 		...rest
 	}: Props = $props();
 
@@ -28,9 +60,25 @@
 		if (max !== undefined && next > max) return;
 		value = next;
 	}
+
+	function autofocusAction(node: HTMLInputElement, enabled: HTMLInputAttributes['autofocus']) {
+		if (enabled) node.focus();
+		return {
+			update(nextEnabled: HTMLInputAttributes['autofocus']) {
+				if (nextEnabled) node.focus();
+			}
+		};
+	}
 </script>
 
-<div role="group" data-number-input-wrapper data-size={size} data-disabled={disabled || undefined}>
+<div
+	role="group"
+	data-number-input-wrapper
+	data-size={size}
+	data-disabled={disabled || undefined}
+	class={className}
+	{...rest}
+>
 	<Button
 		variant="outline"
 		size={size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon'}
@@ -42,14 +90,30 @@
 	>
 	<input
 		type="number"
+		use:autofocusAction={autofocus}
 		bind:value
-		class={className ?? ''}
 		{min}
 		{max}
 		{step}
 		{disabled}
+		{id}
+		{name}
+		{placeholder}
+		{readonly}
+		{required}
+		{autocomplete}
+		{oninput}
+		{onchange}
+		{onfocus}
+		{onblur}
+		{onkeydown}
+		{onkeyup}
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		aria-describedby={ariaDescribedby}
+		aria-invalid={ariaInvalid}
+		aria-errormessage={ariaErrormessage}
 		data-disabled={disabled || undefined}
-		{...rest}
 	/>
 	<Button
 		variant="outline"
@@ -65,16 +129,18 @@
 <style>
 	[data-number-input-wrapper] {
 		display: inline-grid;
-		grid-template-columns: auto minmax(3ch, max-content) auto;
+		grid-template-columns: max-content minmax(3ch, max-content) max-content;
+		justify-self: start;
+		justify-content: start;
 		align-items: stretch;
 		gap: var(--dry-space-1);
-		--dry-input-bg: var(--dry-color-bg-raised);
-		--dry-input-border: var(--dry-color-stroke-strong);
-		--dry-input-color: var(--dry-color-text-strong);
-		--dry-input-radius: var(--dry-radius-md);
-		--dry-input-padding-x: var(--dry-space-3);
-		--dry-input-padding-y: var(--dry-space-2);
-		--dry-input-font-size: var(--dry-type-small-size);
+		--dry-input-bg: var(--dry-number-input-bg, var(--dry-color-bg-raised));
+		--dry-input-border: var(--dry-number-input-border, var(--dry-color-stroke-strong));
+		--dry-input-color: var(--dry-number-input-color, var(--dry-color-text-strong));
+		--dry-input-radius: var(--dry-number-input-radius, var(--dry-radius-md));
+		--dry-input-padding-x: var(--dry-number-input-padding-x, var(--dry-space-3));
+		--dry-input-padding-y: var(--dry-number-input-padding-y, var(--dry-space-2));
+		--dry-input-font-size: var(--dry-number-input-font-size, var(--dry-type-small-size));
 	}
 
 	[data-number-input-wrapper] input {

package/dist/number-input/number-input-button.svelte.d.ts

@@ -1,11 +1,25 @@
 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 Omit<FormControlWrapperAttrs<HTMLDivElement>, 'role'> {
     value?: number;
     min?: number;
     max?: number;
     step?: number;
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
+    name?: HTMLInputAttributes['name'];
+    placeholder?: HTMLInputAttributes['placeholder'];
+    readonly?: HTMLInputAttributes['readonly'];
+    required?: HTMLInputAttributes['required'];
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    autofocus?: HTMLInputAttributes['autofocus'];
+    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 NumberInputButton: import("svelte").Component<Props, {}, "value">;
 type NumberInputButton = ReturnType<typeof NumberInputButton>;

package/dist/numeric/numeric.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
-	interface Props {
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		value: number | string;
 		stable?: boolean;
 		align?: 'start' | 'center' | 'end';
 		minDigits?: number;
 	}
 
-	let { value, stable = false, align = 'end', minDigits }: Props = $props();
+	let {
+		value,
+		stable = false,
+		align = 'end',
+		minDigits,
+		class: className,
+		...rest
+	}: Props = $props();
 
 	const minWidth = $derived.by(() => {
 		if (!stable) return undefined;
@@ -14,18 +23,24 @@
 		return `${digits * 0.6}em`;
 	});
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			if (minWidth) {
-				node.style.setProperty('min-width', minWidth);
-			} else {
-				node.style.removeProperty('min-width');
-			}
-		});
-	}
+	let el = $state<HTMLSpanElement>();
+
+	$effect(() => {
+		if (!el) return;
+		if (minWidth) {
+			el.style.setProperty('min-width', minWidth);
+		} else {
+			el.style.removeProperty('min-width');
+		}
+	});
 </script>
 
-<span class="dry-numeric dry-tabular-nums" data-align={align} {@attach applyStyles}>
+<span
+	bind:this={el}
+	class={['dry-numeric dry-tabular-nums', className]}
+	data-align={align}
+	{...rest}
+>
 	{value}
 </span>
 

package/dist/numeric/numeric.svelte.d.ts

@@ -1,4 +1,5 @@
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     value: number | string;
     stable?: boolean;
     align?: 'start' | 'center' | 'end';

package/dist/option-picker/option-picker-item.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { Attachment } from 'svelte/attachments';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import Button from '../button/button.svelte';
 	import { getOptionPickerCtx } from './context.svelte.js';
@@ -66,7 +65,12 @@
 		}
 	}
 
-	const singleLabelLayout: Attachment<HTMLSpanElement> = (node) => {
+	let contentEl = $state<HTMLSpanElement>();
+
+	$effect(() => {
+		if (!contentEl) return;
+		const node = contentEl;
+
 		const updateLayout = () => {
 			const directChildren = Array.from(node.children);
 			hasSingleLabelChild =
@@ -80,7 +84,7 @@
 		observer.observe(node, { childList: true });
 
 		return () => observer.disconnect();
-	};
+	});
 </script>
 
 <span
@@ -110,7 +114,7 @@
 		}}
 		onkeydown={handleKeydown}
 	>
-		<span class="content" class:single-label={hasSingleLabelChild} {@attach singleLabelLayout}>
+		<span bind:this={contentEl} class="content" class:single-label={hasSingleLabelChild}>
 			{@render children()}
 		</span>
 	</Button>
@@ -151,17 +155,6 @@
 		--dry-btn-justify: stretch;
 		--dry-btn-align: stretch;
 		--dry-btn-min-height: 0;
-
-		--dry-option-picker-preview-size: 2.25rem;
-		--dry-option-picker-preview-radius: var(--dry-radius-md);
-		--dry-option-picker-preview-column: 1;
-		--dry-option-picker-preview-row: 1 / span 3;
-		--dry-option-picker-label-column: 2;
-		--dry-option-picker-label-row: 1;
-		--dry-option-picker-description-column: 2;
-		--dry-option-picker-description-row: 2;
-		--dry-option-picker-meta-column: 2;
-		--dry-option-picker-meta-row: 3;
 	}
 
 	.root:hover:not([data-disabled]) {

package/dist/option-picker/option-picker-preview.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { Attachment } from 'svelte/attachments';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLAttributes<HTMLSpanElement> {
@@ -12,23 +11,20 @@
 
 	let { color, shape = 'rounded', variant = 'default', children, ...rest }: Props = $props();
 
-	function applyColor(value?: string): Attachment<HTMLSpanElement> {
-		return (node) => {
-			if (value) {
-				node.style.setProperty('--dry-option-picker-preview-bg', value);
-			} else {
-				node.style.removeProperty('--dry-option-picker-preview-bg');
-			}
-
-			return () => {
-				node.style.removeProperty('--dry-option-picker-preview-bg');
-			};
-		};
-	}
+	let el = $state<HTMLSpanElement>();
+
+	$effect(() => {
+		if (!el) return;
+		if (color) {
+			el.style.setProperty('--dry-option-picker-preview-bg', color);
+		} else {
+			el.style.removeProperty('--dry-option-picker-preview-bg');
+		}
+	});
 </script>
 
 <span
-	{@attach applyColor(color)}
+	bind:this={el}
 	data-option-picker-preview
 	data-option-picker-preview-shape={shape}
 	data-variant={variant !== 'default' ? variant : undefined}
@@ -74,23 +70,38 @@
 	}
 
 	[data-option-picker-preview][data-variant='preset'] {
-		--dry-option-picker-preview-color: white;
+		--_preset-color-resolved: var(
+			--_preset-color,
+			var(--dry-option-picker-preview-bg, var(--dry-color-fill-selected))
+		);
+		--dry-option-picker-preview-color: var(--dry-option-picker-preview-tint-light, white);
 		--dry-option-picker-preview-border: color-mix(
 			in srgb,
-			var(--_preset-color) 46%,
+			var(--_preset-color-resolved) 46%,
 			var(--dry-color-stroke-weak) 54%
 		);
 		--dry-option-picker-preview-size: var(--dry-option-picker-preview-preset-size, 2.75rem);
 		background: linear-gradient(
 			155deg,
-			color-mix(in srgb, white 18%, var(--_preset-color) 82%) 0%,
-			var(--_preset-color) 58%,
-			color-mix(in srgb, black 12%, var(--_preset-color) 88%) 100%
+			color-mix(
+					in srgb,
+					var(--dry-option-picker-preview-tint-light, white) 18%,
+					var(--_preset-color-resolved) 82%
+				)
+				0%,
+			var(--_preset-color-resolved) 58%,
+			color-mix(
+					in srgb,
+					var(--dry-option-picker-preview-tint-dark, black) 12%,
+					var(--_preset-color-resolved) 88%
+				)
+				100%
 		);
-		/* dryui-allow inset-shadow: 1px top highlight + 1px bottom shadow give the preset color swatch a beveled material look. */
 		box-shadow:
-			inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
-			inset 0 -1px 0 color-mix(in srgb, black 10%, transparent);
+			inset 0 1px 0
+				color-mix(in srgb, var(--dry-option-picker-preview-tint-light, white) 22%, transparent),
+			inset 0 -1px 0
+				color-mix(in srgb, var(--dry-option-picker-preview-tint-dark, black) 10%, transparent);
 		transition: border-radius var(--dry-duration-fast) var(--dry-ease-default);
 	}
 

package/dist/pagination/pagination-root.svelte

@@ -1,3 +1,10 @@
+<!--
+	Pagination intentionally has no `--dry-pagination-*` token surface.
+	The numeric and nav buttons are rendered by the shared Button component, so
+	pagination delegates its visual chrome (bg, border, radius, padding) to the
+	inherited button tokens (`--dry-btn-*`). Override those at the pagination
+	root (or higher) to retheme pagination.
+-->
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';

package/dist/pin-input/pin-input-root.svelte

@@ -47,7 +47,7 @@
 	const isDisabled = $derived(disabled || formCtx?.disabled || false);
 	const hasError = $derived(formCtx?.hasError || false);
 
-	let inputEl: HTMLInputElement | undefined;
+	let inputEl = $state<HTMLInputElement>();
 	let isFocused = $state(false);
 	let mirrorSelectionStart = $state<number | null>(null);
 	let mirrorSelectionEnd = $state<number | null>(null);
@@ -97,15 +97,6 @@
 		mirrorSelectionEnd = inputEl.selectionEnd;
 	}
 
-	function captureInput(node: HTMLInputElement) {
-		inputEl = node;
-		return () => {
-			if (inputEl === node) {
-				inputEl = undefined;
-			}
-		};
-	}
-
 	function maybeFireComplete(previousValue: string, nextValue: string) {
 		if (nextValue.length !== length) return;
 		if (previousValue.length === length && previousValue === nextValue) return;
@@ -218,7 +209,7 @@
 	{...rest}
 >
 	<input
-		{@attach captureInput}
+		bind:this={inputEl}
 		type="text"
 		inputmode={type === 'numeric' ? 'numeric' : 'text'}
 		autocomplete="one-time-code"

package/dist/popover/popover-content.svelte

@@ -23,11 +23,13 @@
 
 	const ctx = getPopoverCtx();
 
+	let contentEl = $state<HTMLDivElement>();
+
 	const overlay = createAnchoredOverlayContent({
 		ctx,
+		contentEl: () => contentEl ?? null,
 		placement: () => placement,
-		offset: () => offset,
-		style: () => style
+		offset: () => offset
 	});
 
 	createDismiss({
@@ -41,8 +43,8 @@
 </script>
 
 <div
-	{@attach overlay.bindContent}
-	{@attach overlay.position}
+	bind:this={contentEl}
+	use:overlay.applyPosition={style}
 	id={ctx.contentId}
 	popover="manual"
 	data-popover-content
@@ -77,6 +79,7 @@
 		border: 1px solid var(--dry-popover-border);
 		border-radius: var(--dry-popover-radius);
 		box-shadow: var(--dry-popover-shadow);
+		font-family: var(--dry-font-sans);
 		padding: var(--dry-popover-padding);
 
 		transition:

package/dist/progress/progress.svelte

@@ -264,7 +264,7 @@
 		top: -4px;
 		bottom: -4px;
 		left: var(--_threshold-left, 0%);
-		border-inline-start: 2px solid var(--_threshold-color, var(--dry-color-text-strong, #1a1a2e));
+		border-inline-start: 2px solid var(--_threshold-color, var(--dry-color-text-strong));
 		opacity: 0.3;
 		z-index: 1;
 	}
@@ -273,7 +273,7 @@
 
 	[data-part='label'] {
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
-		color: var(--dry-color-text-weak, #64748b);
+		color: var(--dry-color-text-weak);
 		white-space: nowrap;
 		font-variant-numeric: tabular-nums;
 	}

package/dist/prompt-input/prompt-input-button-textarea.svelte

@@ -28,7 +28,7 @@
 		...rest
 	}: Props = $props();
 
-	let textareaEl: HTMLTextAreaElement | undefined;
+	let textareaEl = $state<HTMLTextAreaElement>();
 
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Enter' && !e.shiftKey) {
@@ -53,14 +53,6 @@
 		textareaEl.style.height = `${textareaEl.scrollHeight}px`;
 	}
 
-	function attachTextarea(node: HTMLTextAreaElement) {
-		textareaEl = node;
-		autoResize();
-		return () => {
-			if (textareaEl === node) textareaEl = undefined;
-		};
-	}
-
 	$effect(() => {
 		void value;
 		if (!textareaEl) return;
@@ -71,7 +63,7 @@
 
 <div class={className} data-prompt-input data-disabled={disabled || undefined} {...rest}>
 	<textarea
-		{@attach attachTextarea}
+		bind:this={textareaEl}
 		bind:value
 		{placeholder}
 		{disabled}

package/dist/qr-code/qr-code.svelte

@@ -2,7 +2,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { encodeQR, type ErrorCorrectionLevel } from '@dryui/primitives/qr-code';
 
-	interface Props extends HTMLAttributes<HTMLCanvasElement> {
+	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value: string;
 		size?: number;
 		errorCorrection?: ErrorCorrectionLevel;
@@ -14,14 +14,15 @@
 		value,
 		size = 200,
 		errorCorrection = 'M',
-		fgColor = '#000',
-		bgColor = '#fff',
+		fgColor,
+		bgColor,
 		class: className,
+		role,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
 		...rest
 	}: Props = $props();
 
-	let canvasEl: HTMLCanvasElement | undefined = $state();
-
 	const matrix = $derived(
 		(() => {
 			try {
@@ -32,54 +33,94 @@
 		})()
 	);
 
-	$effect(() => {
-		if (!canvasEl || !matrix) return;
+	const wrapperRole = $derived(role ?? 'img');
+	const wrapperAriaLabel = $derived(
+		ariaLabel ?? (wrapperRole === 'img' && !ariaLabelledby ? 'QR Code' : undefined)
+	);
+
+	interface DrawQrParams {
+		matrix: typeof matrix;
+		size: number;
+		bgColor: string | undefined;
+		fgColor: string | undefined;
+	}
+
+	function drawQr(canvas: HTMLCanvasElement, params: DrawQrParams) {
+		function render({
+			matrix: nextMatrix,
+			size: nextSize,
+			bgColor: nextBgColor,
+			fgColor: nextFgColor
+		}: DrawQrParams) {
+			const wrapper = canvas.parentElement;
+			if (wrapper instanceof HTMLElement) {
+				wrapper.style.setProperty('--dry-qr-size', `${nextSize}px`);
+				if (nextBgColor) wrapper.style.setProperty('--dry-qr-bg', nextBgColor);
+				else wrapper.style.removeProperty('--dry-qr-bg');
+				if (nextFgColor) wrapper.style.setProperty('--dry-qr-fg', nextFgColor);
+				else wrapper.style.removeProperty('--dry-qr-fg');
+			}
+
+			if (!nextMatrix) return;
+
+			if (!(wrapper instanceof HTMLElement)) return;
 
-		const ctx = canvasEl.getContext('2d');
-		if (!ctx) return;
+			const ctx = canvas.getContext('2d');
+			if (!ctx) return;
 
-		const moduleCount = matrix.length;
-		const moduleSize = size / moduleCount;
+			const moduleCount = nextMatrix.length;
+			const moduleSize = nextSize / moduleCount;
 
-		canvasEl.width = size;
-		canvasEl.height = size;
+			canvas.width = nextSize;
+			canvas.height = nextSize;
 
-		ctx.fillStyle = bgColor;
-		ctx.fillRect(0, 0, size, size);
+			const computed = getComputedStyle(wrapper);
+			const resolvedBg =
+				nextBgColor || computed.getPropertyValue('--dry-qr-bg').trim() || computed.backgroundColor;
+			const resolvedFg =
+				nextFgColor || computed.getPropertyValue('--dry-qr-fg').trim() || computed.color;
 
-		ctx.fillStyle = fgColor;
-		for (let row = 0; row < moduleCount; row++) {
-			for (let col = 0; col < moduleCount; col++) {
-				if (matrix[row]![col]) {
-					ctx.fillRect(
-						Math.round(col * moduleSize),
-						Math.round(row * moduleSize),
-						Math.ceil(moduleSize),
-						Math.ceil(moduleSize)
-					);
+			ctx.fillStyle = resolvedBg;
+			ctx.fillRect(0, 0, nextSize, nextSize);
+
+			ctx.fillStyle = resolvedFg;
+			for (let row = 0; row < moduleCount; row++) {
+				for (let col = 0; col < moduleCount; col++) {
+					if (nextMatrix[row]![col]) {
+						ctx.fillRect(
+							Math.round(col * moduleSize),
+							Math.round(row * moduleSize),
+							Math.ceil(moduleSize),
+							Math.ceil(moduleSize)
+						);
+					}
 				}
 			}
 		}
-	});
 
-	function setQrVars(node: HTMLDivElement) {
-		$effect(() => {
-			node.style.setProperty('--dry-qr-size', `${size}px`);
-			node.style.setProperty('--dry-qr-bg', bgColor);
-		});
+		render(params);
+
+		return {
+			update: render
+		};
 	}
 </script>
 
-<div {@attach setQrVars} class={className} data-qr-wrapper>
+<div
+	class={className}
+	data-qr-wrapper
+	role={wrapperRole}
+	aria-label={wrapperAriaLabel}
+	aria-labelledby={ariaLabelledby}
+	{...rest}
+>
 	<canvas
-		bind:this={canvasEl}
+		use:drawQr={{ matrix, size, bgColor, fgColor }}
 		width={size}
 		height={size}
-		role="img"
-		aria-label="QR Code"
+		aria-hidden="true"
 		data-qr-canvas
 		data-value={value}
-		{...rest}
 	></canvas>
 </div>
 
@@ -89,14 +130,13 @@
 		--dry-qr-padding: var(--dry-space-3);
 		--dry-qr-radius: var(--dry-radius-lg);
 		--dry-qr-border: var(--dry-color-stroke-weak);
-		--dry-qr-bg: #fff;
 		--dry-qr-size: 200px;
 
 		display: inline-grid;
 		grid-template-columns: var(--dry-qr-size);
 		place-items: center;
 		padding: var(--dry-qr-padding);
-		background: var(--dry-qr-bg);
+		background: var(--dry-qr-bg, var(--dry-color-bg-raised));
 		border: 1px solid var(--dry-qr-border);
 		border-radius: var(--dry-qr-radius);
 	}