@dryui/ui 3.0.0 → 4.0.1

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);
 	}

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import { type ErrorCorrectionLevel } from '@dryui/primitives/qr-code';
-interface Props extends HTMLAttributes<HTMLCanvasElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
     value: string;
     size?: number;
     errorCorrection?: ErrorCorrectionLevel;

package/dist/radio-group/radio-group-item-input.svelte

@@ -1,44 +1,90 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 	import { getRadioGroupCtx } from './context.svelte.js';
 
-	interface Props extends Omit<HTMLInputAttributes, 'children'> {
+	type WrapperAttrs = Omit<
+		HTMLAttributes<HTMLLabelElement>,
+		'children' | 'onchange' | 'onfocus' | 'onblur' | 'autofocus'
+	>;
+
+	interface Props extends WrapperAttrs {
 		value: string;
 		disabled?: boolean;
 		children?: Snippet | undefined;
+		name?: HTMLInputAttributes['name'];
+		required?: HTMLInputAttributes['required'];
+		autofocus?: HTMLInputAttributes['autofocus'];
+		onchange?: HTMLInputAttributes['onchange'];
+		onfocus?: HTMLInputAttributes['onfocus'];
+		onblur?: HTMLInputAttributes['onblur'];
 	}
 
-	let { value, disabled = false, children, class: className, ...rest }: Props = $props();
+	let {
+		value,
+		disabled = false,
+		children,
+		class: className,
+		style,
+		id,
+		name,
+		required,
+		autofocus,
+		onchange: onchangeProp,
+		onfocus,
+		onblur,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		...rest
+	}: Props = $props();
 
 	const ctx = getRadioGroupCtx();
 
 	const isDisabled = $derived(disabled || ctx.disabled);
 	const checked = $derived(ctx.value === value);
 
-	function handleChange() {
+	function handleChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
 		if (isDisabled) return;
 		ctx.select(value);
+		onchangeProp?.(event);
+	}
+
+	function autofocusAction(node: HTMLInputElement, enabled: HTMLInputAttributes['autofocus']) {
+		if (enabled) node.focus();
+		return {
+			update(nextEnabled: HTMLInputAttributes['autofocus']) {
+				if (nextEnabled) node.focus();
+			}
+		};
 	}
 </script>
 
 <label
+	{...rest}
 	data-radio-group-item
 	data-state={checked ? 'checked' : 'unchecked'}
 	data-disabled={isDisabled || undefined}
 	class={className}
+	{style}
 >
 	<input
 		type="radio"
-		name={ctx.name}
+		use:autofocusAction={autofocus}
+		name={name ?? ctx.name}
 		{value}
 		{checked}
 		disabled={isDisabled}
-		required={ctx.required}
+		required={required ?? ctx.required}
+		{id}
+		{onfocus}
+		{onblur}
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		aria-describedby={ariaDescribedby}
 		data-state={checked ? 'checked' : 'unchecked'}
 		data-disabled={isDisabled || undefined}
 		onchange={handleChange}
-		{...rest}
 	/>
 	{#if children}
 		{@render children()}
@@ -74,9 +120,9 @@
 		-webkit-appearance: none;
 		height: var(--dry-space-8);
 		min-height: var(--dry-space-8);
-		border: 2px solid var(--dry-color-stroke-strong);
+		border: 2px solid var(--dry-radio-border, var(--dry-color-stroke-strong));
 		border-radius: var(--dry-radius-full);
-		background: var(--dry-color-bg-raised);
+		background: var(--dry-radio-bg, var(--dry-color-bg-raised));
 		margin: 0;
 		cursor: pointer;
 		position: relative;
@@ -119,9 +165,9 @@
 	}
 
 	[data-radio-group-item] input[type='radio']:checked {
-		background: var(--dry-color-fill-selected);
-		border-color: var(--dry-color-stroke-selected);
-		box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
+		background: var(--dry-radio-checked-bg, var(--dry-color-fill-selected));
+		border-color: var(--dry-radio-checked-border, var(--dry-color-stroke-selected));
+		box-shadow: inset 0 0 0 1px var(--dry-radio-checked-border, var(--dry-color-stroke-selected));
 	}
 
 	[data-radio-group-item] input[type='radio']:checked::after {
@@ -138,8 +184,8 @@
 	}
 
 	[data-radio-group-item] input[type='radio']:checked:hover:not(:disabled) {
-		background: var(--dry-color-fill-selected);
-		border-color: var(--dry-color-stroke-selected);
+		background: var(--dry-radio-checked-bg, var(--dry-color-fill-selected));
+		border-color: var(--dry-radio-checked-border, var(--dry-color-stroke-selected));
 	}
 
 	[data-radio-group-item] input[type='radio']:disabled {

package/dist/radio-group/radio-group-item-input.svelte.d.ts

@@ -1,9 +1,16 @@
 import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'children'> {
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+type WrapperAttrs = Omit<HTMLAttributes<HTMLLabelElement>, 'children' | 'onchange' | 'onfocus' | 'onblur' | 'autofocus'>;
+interface Props extends WrapperAttrs {
     value: string;
     disabled?: boolean;
     children?: Snippet | undefined;
+    name?: HTMLInputAttributes['name'];
+    required?: HTMLInputAttributes['required'];
+    autofocus?: HTMLInputAttributes['autofocus'];
+    onchange?: HTMLInputAttributes['onchange'];
+    onfocus?: HTMLInputAttributes['onfocus'];
+    onblur?: HTMLInputAttributes['onblur'];
 }
 declare const RadioGroupItemInput: import("svelte").Component<Props, {}, "">;
 type RadioGroupItemInput = ReturnType<typeof RadioGroupItemInput>;

package/dist/range-calendar/index.d.ts

@@ -1,4 +1,7 @@
-export type { RangeCalendarRootProps, RangeCalendarGridProps } from '@dryui/primitives';
+import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+export type { RangeCalendarRootProps } from '@dryui/primitives';
+export interface RangeCalendarGridProps extends CalendarEventGridProps {
+}
 import RangeCalendarRoot from './range-calendar-root.svelte';
 import RangeCalendarGrid from './range-calendar-grid-button.svelte';
 export declare const RangeCalendar: {

package/dist/range-calendar/range-calendar-grid-button.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { isSameDay } from '@dryui/primitives';
 	import { getRangeCalendarCtx } from './context.svelte.js';
 	import CalendarGridButton, {
 		type CalendarGridAdapter
 	} from '../internal/calendar-grid-button.svelte';
+	import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {}
+	interface Props extends CalendarEventGridProps {}
 
 	let props: Props = $props();
 

package/dist/range-calendar/range-calendar-grid-button.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+interface Props extends CalendarEventGridProps {
 }
 declare const RangeCalendarGridButton: import("svelte").Component<Props, {}, "">;
 type RangeCalendarGridButton = ReturnType<typeof RangeCalendarGridButton>;

package/dist/relative-time/relative-time.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { createSubscriber } from 'svelte/reactivity';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLAttributes<HTMLTimeElement> {
@@ -10,16 +11,19 @@
 	let { date, locale = 'en', updateInterval = 60000, class: className, ...rest }: Props = $props();
 
 	const dateObj = $derived(date instanceof Date ? date : new Date(date));
-	let now = $state(Date.now());
-
-	$effect(() => {
-		const interval = setInterval(() => {
-			now = Date.now();
-		}, updateInterval);
-		return () => clearInterval(interval);
+	const dateTime = $derived(dateObj.getTime());
+	const subscribeToTick = $derived(
+		createSubscriber((update) => {
+			const interval = setInterval(update, updateInterval);
+			return () => clearInterval(interval);
+		})
+	);
+	const now = $derived.by(() => {
+		subscribeToTick();
+		return Date.now();
 	});
-
-	const formatted = $derived(formatRelative(dateObj, now, locale));
+	const effectiveNow = $derived(Math.max(now, dateTime));
+	const formatted = $derived(formatRelative(dateObj, effectiveNow, locale));
 
 	function formatRelative(date: Date, now: number, locale: string): string {
 		const diff = now - date.getTime();
@@ -58,12 +62,8 @@
 
 <style>
 	[data-relative-time] {
-		/* Component tokens (Tier 3) */
-		--dry-relative-time-color: var(--dry-color-text-weak);
-		--dry-relative-time-font-size: var(--dry-type-small-size);
-
-		color: var(--dry-relative-time-color);
-		font-size: var(--dry-relative-time-font-size);
+		color: var(--dry-relative-time-color, var(--dry-color-text-weak));
+		font-size: var(--dry-relative-time-font-size, var(--dry-type-small-size));
 		font-family: var(--dry-font-sans);
 		font-variant-numeric: var(--dry-numeric-variant);
 		line-height: var(--dry-type-small-leading);

package/dist/reveal/reveal.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		getReducedMotionPreference,
 		observeReducedMotionPreference,
 		supportsIntersectionObservers
-	} from '@dryui/primitives/internal/motion';
+	} from '@dryui/primitives';
 	import type { BlendMode } from '@dryui/primitives/reveal';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -34,19 +33,10 @@
 		...rest
 	}: Props = $props();
 
-	let element = $state<HTMLDivElement | null>(null);
+	let element = $state<HTMLDivElement>();
 	let visible = $state(false);
 	let prefersReducedMotion = $state(false);
 
-	function captureElement(node: HTMLDivElement) {
-		element = node;
-		return {
-			destroy() {
-				if (element === node) element = null;
-			}
-		};
-	}
-
 	function toDuration(value: number | undefined): string | undefined {
 		return typeof value === 'number' ? `${Math.max(0, value)}ms` : undefined;
 	}
@@ -60,17 +50,16 @@
 	const durationValue = $derived(toDuration(duration));
 	const distanceValue = $derived(toDistance(distance));
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			if (delayValue) node.style.setProperty('--dry-reveal-delay', delayValue);
-			if (durationValue) node.style.setProperty('--dry-reveal-duration', durationValue);
-			if (distanceValue) node.style.setProperty('--dry-reveal-distance', distanceValue);
-			node.style.setProperty('--_blend-mode', blendMode ?? 'normal');
-		});
-	}
+	$effect(() => {
+		if (!element) return;
+		element.style.cssText = style || '';
+		if (delayValue) element.style.setProperty('--dry-reveal-delay', delayValue);
+		if (durationValue) element.style.setProperty('--dry-reveal-duration', durationValue);
+		if (distanceValue) element.style.setProperty('--dry-reveal-distance', distanceValue);
+		element.style.setProperty('--_blend-mode', blendMode ?? 'normal');
+	});
 
-	onMount(() => {
+	$effect(() => {
 		const stopMotionObserver = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 			if (matches) visible = true;
@@ -113,8 +102,7 @@
 </script>
 
 <div
-	{@attach captureElement}
-	{@attach applyStyles}
+	bind:this={element}
 	class={className}
 	data-reveal
 	data-variant={variant}

package/dist/rich-text-editor/rich-text-editor-content.svelte

@@ -101,11 +101,8 @@
 	onkeydown={handleKeydown}
 	{...rest}
 >
-	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h1>.</h1>
-	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h2>.</h2>
-	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h3>.</h3>
 	<p></p>
 	<ul><li></li></ul>
@@ -177,7 +174,7 @@
 	}
 
 	[data-part='content'] a {
-		color: var(--dry-color-fill-brand);
+		color: var(--dry-color-text-brand);
 		text-decoration: underline;
 	}
 

package/dist/scroll-to-top/scroll-to-top-button.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { ScrollToTop } from '@dryui/primitives';
 	import Button from '../button/button.svelte';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		threshold?: number;
 		target?: HTMLElement;
 		behavior?: ScrollBehavior;
 		position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
-		class?: string;
 	}
 
 	let {
@@ -15,7 +15,8 @@
 		target,
 		behavior = 'smooth',
 		position = 'bottom-right',
-		class: className
+		class: className,
+		...rest
 	}: Props = $props();
 </script>
 
@@ -25,6 +26,7 @@
 			class={['scroll-to-top-slot', className]}
 			data-position={position}
 			data-visible={visible || undefined}
+			{...rest}
 		>
 			<Button
 				variant="nav"

package/dist/scroll-to-top/scroll-to-top-button.svelte.d.ts

@@ -1,9 +1,9 @@
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     threshold?: number;
     target?: HTMLElement;
     behavior?: ScrollBehavior;
     position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
-    class?: string;
 }
 declare const ScrollToTopButton: import("svelte").Component<Props, {}, "">;
 type ScrollToTopButton = ReturnType<typeof ScrollToTopButton>;

package/dist/segmented-control/segmented-control-root.svelte

@@ -112,9 +112,6 @@
 	[data-part='root'] {
 		display: inline-grid;
 		gap: 0;
-		--dry-sc-radius: var(--dry-radius-lg);
-		--dry-sc-selected-bg: var(--dry-color-bg-overlay);
-		--dry-sc-selected-border: var(--dry-color-stroke-strong);
 	}
 
 	[data-orientation='horizontal'] {

package/dist/select/index.d.ts

@@ -1,4 +1,10 @@
-export type { SelectRootProps, SelectTriggerProps, SelectContentProps, SelectItemProps, SelectValueProps } from '@dryui/primitives';
+export type { SelectRootProps, SelectContentProps, SelectItemProps, SelectValueProps } from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface SelectTriggerProps extends Omit<HTMLButtonAttributes, 'children'> {
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+}
 import SelectRoot from './select-root-input.svelte';
 import SelectTrigger from './select-trigger-button.svelte';
 import SelectContent from './select-content.svelte';

package/dist/select/select-content.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { fromAction } from 'svelte/attachments';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchoredPopover, type Placement } from '@dryui/primitives';
+	import { createAnchoredPopover, createDismiss, type Placement } from '@dryui/primitives';
 	import { getSelectCtx } from './context.svelte.js';
 
 	const OPTION_SELECTOR = '[role="option"]:not([data-disabled])';
@@ -24,17 +23,7 @@
 
 	const ctx = getSelectCtx();
 
-	let el = $state<HTMLDivElement | null>(null);
-
-	function attachContent(node: HTMLDivElement) {
-		el = node;
-
-		return () => {
-			if (el === node) {
-				el = null;
-			}
-		};
-	}
+	let el = $state<HTMLDivElement>();
 
 	function getOptionItems(container: HTMLElement): HTMLElement[] {
 		return Array.from(container.querySelectorAll<HTMLElement>(OPTION_SELECTOR));
@@ -57,6 +46,15 @@
 		}
 	});
 
+	createDismiss({
+		enabled: () => ctx.open,
+		onDismiss: () => ctx.close(),
+		contentEl: () => el ?? null,
+		triggerEl: () => ctx.triggerEl,
+		preventDefaultOnEscape: true,
+		returnFocusTo: () => ctx.triggerEl
+	});
+
 	function focusFirstSelectItem() {
 		if (!el) return;
 		const items = getOptionItems(el);
@@ -116,9 +114,9 @@
 </script>
 
 <div
-	{@attach attachContent}
-	{@attach fromAction(popover.applyPosition, () => style)}
-	popover="auto"
+	bind:this={el}
+	use:popover.applyPosition={style}
+	popover="manual"
 	role="listbox"
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
@@ -152,6 +150,7 @@
 		border: 1px solid var(--dry-overlay-border, var(--dry-color-stroke-weak));
 		border-radius: var(--dry-overlay-radius, var(--dry-radius-md));
 		box-shadow: var(--dry-overlay-shadow, var(--dry-shadow-lg));
+		font-family: var(--dry-font-sans);
 		padding: var(--dry-space-1);
 		max-height: 200px;
 		overflow-y: auto;

package/dist/select/select-item.svelte

@@ -75,6 +75,7 @@
 		align-items: center;
 		padding: var(--dry-space-2) var(--dry-space-3);
 		border-radius: var(--dry-select-item-radius);
+		font-family: var(--dry-font-sans);
 		font-size: var(--dry-type-small-size);
 		cursor: pointer;
 		user-select: none;