@dryui/ui 3.0.0 → 4.0.1

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

@@ -18,8 +18,8 @@ export interface CalendarGridAdapter {
     onEscape?: () => void;
     onHover?: (day: Date | null) => void;
 }
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+import { type CalendarEventGridProps } from './calendar-event-layout.js';
+interface Props extends CalendarEventGridProps {
     adapter: CalendarGridAdapter;
     hideHeader?: boolean;
 }

package/dist/internal/calendar-grid-utils.d.ts

@@ -1,3 +1,4 @@
+import type { CalendarVisibleMonths } from './calendar-event-layout.js';
 interface CalendarKeydownOptions {
     onSelect: (date: Date) => void;
     onEscape: () => void;
@@ -10,6 +11,8 @@ type CalendarKeydownResult = {
     type: 'navigate';
     newDate: Date;
 } | null;
+export declare function normalizeVisibleMonths(value: CalendarVisibleMonths | undefined): CalendarVisibleMonths;
+export declare function formatVisibleMonthRangeLabel(year: number, month: number, locale: string, visibleMonths?: CalendarVisibleMonths): string;
 export declare function generateWeekdayLabels(locale: string, weekStartDay: number): string[];
 export declare function splitIntoWeeks(days: Date[]): Date[][];
 export declare function getDayISOString(day: Date): string;

package/dist/internal/calendar-grid-utils.js

@@ -1,3 +1,27 @@
+import { formatDate } from '@dryui/primitives';
+export function normalizeVisibleMonths(value) {
+    return value === 2 ? 2 : 1;
+}
+export function formatVisibleMonthRangeLabel(year, month, locale, visibleMonths = 1) {
+    const monthCount = normalizeVisibleMonths(visibleMonths);
+    const firstDate = new Date(year, month, 1);
+    const firstLabel = formatDate(firstDate, locale, {
+        month: 'long',
+        year: 'numeric'
+    });
+    if (monthCount === 1)
+        return firstLabel;
+    const lastDate = new Date(year, month + monthCount - 1, 1);
+    const lastLabel = formatDate(lastDate, locale, {
+        month: 'long',
+        year: 'numeric'
+    });
+    if (firstDate.getFullYear() !== lastDate.getFullYear()) {
+        return `${firstLabel} - ${lastLabel}`;
+    }
+    const firstMonthLabel = formatDate(firstDate, locale, { month: 'long' });
+    return `${firstMonthLabel} - ${lastLabel}`;
+}
 export function generateWeekdayLabels(locale, weekStartDay) {
     const formatter = new Intl.DateTimeFormat(locale, { weekday: 'narrow' });
     const labels = [];

package/dist/internal/form-control-wrapper-attrs.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Wrapper-element HTMLAttributes restricted to the keys that should NOT
+ * land on the wrapper. `oninput`/`onchange`/`onfocus`/`onblur`/`onkeydown`/
+ * `onkeyup` and `autofocus`/`aria-invalid` are forwarded to the inner
+ * native `<input>`/`<textarea>` instead, where their typed signatures
+ * match the input element type and prevent variance errors.
+ */
+export type FormControlWrapperAttrs<T extends HTMLElement = HTMLSpanElement> = Omit<HTMLAttributes<T>, 'oninput' | 'onchange' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'autofocus' | 'aria-invalid'>;

package/dist/internal/form-control-wrapper-attrs.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/menu-item.svelte

@@ -53,6 +53,7 @@
 		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, var(--dry-radius-nested-popover));
+		font-family: var(--dry-font-sans);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

package/dist/internal/modal-content.svelte

@@ -93,9 +93,11 @@
 		height: 100vh;
 		height: 100dvh;
 		max-height: none;
+		margin: 0;
 		border: none;
 		background: transparent;
 		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
 		padding: 0;
 	}
 
@@ -106,9 +108,7 @@
 	/* ---------- Dialog (center) ---------- */
 
 	[data-modal-content][data-variant='dialog'] {
-		/* dryui-allow width: resets native <dialog> sizing so the outer grid track owns the centered panel width. */
 		width: 100vw;
-		/* dryui-allow width: paired with the width reset above. */
 		max-width: none;
 		display: grid;
 		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));
@@ -172,9 +172,7 @@
 	/* ---------- AlertDialog (center) ---------- */
 
 	[data-modal-content][data-variant='alert-dialog'] {
-		/* dryui-allow width: resets native <dialog> sizing so the outer grid track owns the centered panel width. */
 		width: 100vw;
-		/* dryui-allow width: paired with the width reset above. */
 		max-width: none;
 		display: grid;
 		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));

package/dist/internal/motion.d.ts

@@ -1,4 +1,4 @@
-export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2 } from '@dryui/primitives/internal/motion';
+export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, observeInViewport, observePageVisibility, observeOffscreenState, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2 } from '@dryui/primitives/internal/motion';
 export declare function supportsViewTransitions(): boolean;
 export declare function supportsScrollTimelines(): boolean;
 export declare function extractThemeColor(property: string, element?: HTMLElement): [number, number, number];

package/dist/internal/motion.js

@@ -1,5 +1,8 @@
-// Re-export shared motion utilities from primitives (single source of truth)
-export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2 } from '@dryui/primitives/internal/motion';
+// Re-export shared motion utilities from primitives (single source of truth).
+// Imported from the dedicated motion module rather than the package barrel so
+// `bun test` can load it without evaluating other primitives modules that use
+// Svelte runes (.svelte.ts) which require preprocessing.
+export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, observeInViewport, observePageVisibility, observeOffscreenState, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2 } from '@dryui/primitives/internal/motion';
 // UI-only motion utilities
 export function supportsViewTransitions() {
     return typeof document !== 'undefined' && 'startViewTransition' in document;

package/dist/internal/picker-popover-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 type { PickerPopoverController } from './date-family-controller.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -26,23 +25,13 @@
 		...rest
 	}: Props = $props();
 
-	let el = $state<HTMLDivElement | null>(null);
+	let el = $state<HTMLDivElement>();
 
 	const markerAttrs = $derived.by<Record<string, string>>(() => ({
 		'data-picker-popover-content': '',
 		[dataAttribute]: ''
 	}));
 
-	function attachContent(node: HTMLDivElement) {
-		el = node;
-
-		return () => {
-			if (el === node) {
-				el = null;
-			}
-		};
-	}
-
 	const popover = createAnchoredPopover({
 		triggerEl: () => controller.triggerEl,
 		contentEl: () => el ?? null,
@@ -50,12 +39,21 @@
 		placement: () => placement,
 		offset: () => offset
 	});
+
+	createDismiss({
+		enabled: () => controller.open,
+		onDismiss: () => controller.close(),
+		contentEl: () => el ?? null,
+		triggerEl: () => controller.triggerEl,
+		preventDefaultOnEscape: true,
+		returnFocusTo: () => controller.triggerEl
+	});
 </script>
 
 <div
-	{@attach attachContent}
-	{@attach fromAction(popover.applyPosition, () => contentStyle)}
-	popover="auto"
+	bind:this={el}
+	use:popover.applyPosition={contentStyle}
+	popover="manual"
 	role="dialog"
 	id={controller.contentId}
 	aria-labelledby={controller.triggerId}
@@ -87,6 +85,7 @@
 		background: var(--dry-color-bg-overlay);
 		box-shadow: var(--dry-shadow-lg);
 		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
 		transition:
 			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
 			transform var(--dry-duration-fast) var(--dry-ease-emphasized);

package/dist/link/link.svelte

@@ -48,9 +48,6 @@
 
 <style>
 	a {
-		/* Component tokens */
-		--dry-link-hover-color: var(--dry-color-fill-brand-hover, var(--dry-color-text-brand));
-
 		display: inline-grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
@@ -74,7 +71,10 @@
 	}
 
 	a[data-underline='hover']:hover:not([data-disabled]) {
-		color: var(--dry-link-hover-color);
+		color: var(
+			--dry-link-hover-color,
+			var(--dry-color-fill-brand-hover, var(--dry-color-text-brand))
+		);
 		text-decoration-line: underline;
 	}
 
@@ -83,7 +83,10 @@
 	}
 
 	a:hover:not([data-disabled]) {
-		color: var(--dry-link-hover-color);
+		color: var(
+			--dry-link-hover-color,
+			var(--dry-color-fill-brand-hover, var(--dry-color-text-brand))
+		);
 	}
 
 	a:focus-visible {

package/dist/link-preview/link-preview-content.svelte

@@ -22,17 +22,19 @@
 
 	const ctx = getLinkPreviewCtx();
 
+	let contentEl = $state<HTMLDivElement>();
+
 	const overlay = createAnchoredOverlayContent({
 		ctx,
+		contentEl: () => contentEl ?? null,
 		placement: () => placement,
-		offset: () => offset,
-		style: () => style
+		offset: () => offset
 	});
 </script>
 
 <div
-	{@attach overlay.bindContent}
-	{@attach overlay.position}
+	bind:this={contentEl}
+	use:overlay.applyPosition={style}
 	id={ctx.contentId}
 	role="tooltip"
 	popover="manual"
@@ -48,22 +50,17 @@
 
 <style>
 	[data-link-preview-content] {
-		--dry-link-preview-bg: var(--dry-color-bg-overlay);
-		--dry-link-preview-border: var(--dry-color-stroke-weak);
-		--dry-link-preview-radius: var(--dry-radius-lg);
-		--dry-link-preview-shadow: var(--dry-shadow-lg);
-		--dry-link-preview-padding: var(--dry-space-4);
-
 		inset: unset;
 		margin: 0;
 		display: grid;
 		grid-template-columns: minmax(16rem, 24rem);
-		padding: var(--dry-link-preview-padding);
-		border: 1px solid var(--dry-link-preview-border);
-		border-radius: var(--dry-link-preview-radius);
-		background: var(--dry-link-preview-bg);
+		padding: var(--dry-link-preview-padding, var(--dry-space-4));
+		border: 1px solid var(--dry-link-preview-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-link-preview-radius, var(--dry-radius-lg));
+		background: var(--dry-link-preview-bg, var(--dry-color-bg-overlay));
 		color: var(--dry-color-text-strong);
-		box-shadow: var(--dry-link-preview-shadow);
+		box-shadow: var(--dry-link-preview-shadow, var(--dry-shadow-lg));
+		font-family: var(--dry-font-sans);
 		line-height: 1.55;
 		overflow: hidden;
 		transition:

package/dist/link-preview/link-preview-trigger.svelte

@@ -39,18 +39,15 @@
 
 <style>
 	[data-link-preview-trigger] {
-		--dry-link-preview-color: var(--dry-color-text-brand);
-		--dry-link-preview-underline-offset: 0.18em;
-
 		display: inline-grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: baseline;
 		gap: 0.2em;
-		color: var(--dry-link-preview-color);
+		color: var(--dry-link-preview-color, var(--dry-color-text-brand));
 		text-decoration: underline;
 		text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
-		text-underline-offset: var(--dry-link-preview-underline-offset);
+		text-underline-offset: var(--dry-link-preview-underline-offset, 0.18em);
 		cursor: pointer;
 		transition:
 			color var(--dry-duration-fast) var(--dry-ease-default),
@@ -58,7 +55,7 @@
 	}
 
 	[data-link-preview-trigger]:hover {
-		color: var(--dry-color-fill-brand-hover);
+		color: var(--dry-color-text-brand);
 		text-decoration-color: currentColor;
 	}
 </style>

package/dist/listbox/listbox-item.svelte

@@ -42,25 +42,19 @@
 
 <style>
 	[data-listbox-item] {
-		--dry-listbox-item-padding-x: var(--dry-space-3);
-		--dry-listbox-item-padding-y: var(--dry-space-2);
-		--dry-listbox-item-radius: min(
-			var(--dry-control-radius, var(--dry-radius-md)),
-			var(--dry-space-4)
-		);
-		--dry-listbox-item-hover-bg: var(--dry-color-fill-hover);
-		--dry-listbox-item-selected-bg: var(--dry-color-fill-selected);
-		--dry-listbox-item-selected-color: var(--dry-color-on-brand);
-		--dry-listbox-item-selected-border: var(--dry-color-stroke-selected);
-
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: center;
 		gap: var(--dry-space-2);
-		padding: var(--dry-listbox-item-padding-y) var(--dry-listbox-item-padding-x);
-		border-radius: var(--dry-listbox-item-radius);
+		padding: var(--dry-listbox-item-padding-y, var(--dry-space-2))
+			var(--dry-listbox-item-padding-x, var(--dry-space-3));
+		border-radius: var(
+			--dry-listbox-item-radius,
+			min(var(--dry-control-radius, var(--dry-radius-md)), var(--dry-space-4))
+		);
 		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
 		cursor: pointer;
 		user-select: none;
 		outline: none;
@@ -71,19 +65,20 @@
 
 	[data-listbox-item]:hover:not([data-disabled]),
 	[data-listbox-item]:focus-visible {
-		background: var(--dry-listbox-item-hover-bg);
+		background: var(--dry-listbox-item-hover-bg, var(--dry-color-fill-hover));
 	}
 
 	[data-listbox-item][data-selected] {
-		background: var(--dry-listbox-item-selected-bg);
-		color: var(--dry-listbox-item-selected-color);
+		background: var(--dry-listbox-item-selected-bg, var(--dry-color-fill-selected));
+		color: var(--dry-listbox-item-selected-color, var(--dry-color-on-brand));
 		font-weight: 600;
-		box-shadow: inset 0 0 0 1px var(--dry-listbox-item-selected-border);
+		box-shadow: inset 0 0 0 1px
+			var(--dry-listbox-item-selected-border, var(--dry-color-stroke-selected));
 	}
 
 	[data-listbox-item][data-selected]:hover:not([data-disabled]),
 	[data-listbox-item][data-selected]:focus-visible {
-		background: var(--dry-listbox-item-selected-bg);
+		background: var(--dry-listbox-item-selected-bg, var(--dry-color-fill-selected));
 	}
 
 	[data-listbox-item][data-disabled] {

package/dist/listbox/listbox-root.svelte

@@ -99,17 +99,12 @@
 
 <style>
 	[data-listbox-root] {
-		--dry-listbox-bg: var(--dry-color-bg-overlay);
-		--dry-listbox-border: var(--dry-color-stroke-weak);
-		--dry-listbox-radius: var(--dry-radius-lg);
-		--dry-listbox-padding: var(--dry-space-1);
-
 		display: grid;
 		gap: var(--dry-space-1);
-		padding: var(--dry-listbox-padding);
-		background: var(--dry-listbox-bg);
-		border: 1px solid var(--dry-listbox-border);
-		border-radius: var(--dry-listbox-radius);
+		padding: var(--dry-listbox-padding, var(--dry-space-1));
+		background: var(--dry-listbox-bg, var(--dry-color-bg-overlay));
+		border: 1px solid var(--dry-listbox-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-listbox-radius, var(--dry-radius-lg));
 		font-family: var(--dry-font-sans);
 	}
 

package/dist/logo-mark/logo-mark.svelte

@@ -48,7 +48,6 @@
 	{...rest}
 >
 	{#if showImage}
-		<!-- dryui-allow raw-img: LogoMark owns the intrinsic brand mark image and fallback lifecycle. -->
 		<img {src} {alt} onerror={handleError} />
 	{:else}
 		<span aria-hidden="true">{getFallbackText()}</span>
@@ -57,20 +56,21 @@
 
 <style>
 	[data-logo-mark] {
-		--dry-logo-mark-size: 32px;
-		--dry-logo-mark-radius: var(--dry-radius-md);
-		--dry-logo-mark-bg: var(--dry-color-fill);
-		--dry-logo-mark-color: var(--dry-color-text-weak);
+		--_logo-mark-size-default: 32px;
+		--_logo-mark-radius-default: var(--dry-radius-md);
+		--_logo-mark-bg-default: var(--dry-color-fill);
+		--_logo-mark-color-default: var(--dry-color-text-weak);
+		--_logo-mark-font-size-default: var(--dry-type-small-size, var(--dry-text-sm-size));
 
 		display: inline-grid;
 		place-items: center;
 		aspect-ratio: 1;
-		height: var(--dry-logo-mark-size);
-		border-radius: var(--dry-logo-mark-radius);
-		background: var(--dry-logo-mark-bg);
-		color: var(--dry-logo-mark-color);
+		height: var(--dry-logo-mark-size, var(--_logo-mark-size-default));
+		border-radius: var(--dry-logo-mark-radius, var(--_logo-mark-radius-default));
+		background: var(--dry-logo-mark-bg, var(--_logo-mark-bg-default));
+		color: var(--dry-logo-mark-color, var(--_logo-mark-color-default));
 		font-family: var(--dry-font-sans);
-		font-size: var(--dry-logo-mark-font-size, var(--dry-type-small-size, var(--dry-text-sm-size)));
+		font-size: var(--dry-logo-mark-font-size, var(--_logo-mark-font-size-default));
 		font-weight: 600;
 		line-height: 1;
 		overflow: hidden;
@@ -92,63 +92,63 @@
 	/* -- Shapes ------------------------------------------------------------- */
 
 	[data-shape='square'] {
-		--dry-logo-mark-radius: var(--dry-radius-sm);
+		--_logo-mark-radius-default: var(--dry-radius-sm);
 	}
 
 	[data-shape='rounded'] {
-		--dry-logo-mark-radius: var(--dry-radius-md);
+		--_logo-mark-radius-default: var(--dry-radius-md);
 	}
 
 	[data-shape='circle'] {
-		--dry-logo-mark-radius: var(--dry-radius-full);
+		--_logo-mark-radius-default: var(--dry-radius-full);
 	}
 
 	/* -- Sizes -------------------------------------------------------------- */
 
 	[data-size='sm'] {
-		--dry-logo-mark-size: 24px;
-		--dry-logo-mark-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--_logo-mark-size-default: 24px;
+		--_logo-mark-font-size-default: var(--dry-type-tiny-size, var(--dry-text-xs-size));
 	}
 
 	[data-size='md'] {
-		--dry-logo-mark-size: 32px;
-		--dry-logo-mark-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--_logo-mark-size-default: 32px;
+		--_logo-mark-font-size-default: var(--dry-type-small-size, var(--dry-text-sm-size));
 	}
 
 	[data-size='lg'] {
-		--dry-logo-mark-size: 40px;
-		--dry-logo-mark-font-size: var(--dry-type-small-size, var(--dry-text-base-size));
+		--_logo-mark-size-default: 40px;
+		--_logo-mark-font-size-default: var(--dry-type-small-size, var(--dry-text-base-size));
 	}
 
 	/* -- Colors ------------------------------------------------------------- */
 
 	[data-color='neutral'] {
-		--dry-logo-mark-bg: var(--dry-color-fill);
-		--dry-logo-mark-color: var(--dry-color-text-weak);
+		--_logo-mark-bg-default: var(--dry-color-fill);
+		--_logo-mark-color-default: var(--dry-color-text-weak);
 	}
 
 	[data-color='brand'] {
-		--dry-logo-mark-bg: var(--dry-color-fill-brand-weak);
-		--dry-logo-mark-color: var(--dry-color-text-brand);
+		--_logo-mark-bg-default: var(--dry-color-fill-brand-weak);
+		--_logo-mark-color-default: var(--dry-color-text-brand);
 	}
 
 	[data-color='error'] {
-		--dry-logo-mark-bg: var(--dry-color-fill-error-weak);
-		--dry-logo-mark-color: var(--dry-color-text-error);
+		--_logo-mark-bg-default: var(--dry-color-fill-error-weak);
+		--_logo-mark-color-default: var(--dry-color-text-error);
 	}
 
 	[data-color='warning'] {
-		--dry-logo-mark-bg: var(--dry-color-fill-warning-weak);
-		--dry-logo-mark-color: var(--dry-color-text-warning);
+		--_logo-mark-bg-default: var(--dry-color-fill-warning-weak);
+		--_logo-mark-color-default: var(--dry-color-text-warning);
 	}
 
 	[data-color='success'] {
-		--dry-logo-mark-bg: var(--dry-color-fill-success-weak);
-		--dry-logo-mark-color: var(--dry-color-text-success);
+		--_logo-mark-bg-default: var(--dry-color-fill-success-weak);
+		--_logo-mark-color-default: var(--dry-color-text-success);
 	}
 
 	[data-color='info'] {
-		--dry-logo-mark-bg: var(--dry-color-fill-info-weak);
-		--dry-logo-mark-color: var(--dry-color-text-info);
+		--_logo-mark-bg-default: var(--dry-color-fill-info-weak);
+		--_logo-mark-color-default: var(--dry-color-text-info);
 	}
 </style>

package/dist/map/map-marker.svelte

@@ -74,9 +74,9 @@
 
 <style>
 	[data-part='marker-content'] {
-		background: var(--dry-color-bg-raised, #ffffff);
+		background: var(--dry-color-bg-raised);
 		border-radius: var(--dry-radius-md, 0.375rem);
-		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+		box-shadow: var(--dry-shadow-md);
 		padding: var(--dry-space-2, 0.5rem);
 		cursor: pointer;
 	}

package/dist/map/map-root.svelte

@@ -161,6 +161,15 @@
 		}
 	});
 
+	$effect(() => {
+		if (!containerEl || !mapInstance) return;
+		const observer = new ResizeObserver(() => {
+			mapInstance?.resize?.();
+		});
+		observer.observe(containerEl);
+		return () => observer.disconnect();
+	});
+
 	$effect(() => {
 		if (mapInstance && loaded) {
 			const currentCenter = mapInstance.getCenter?.();
@@ -213,9 +222,9 @@
 <style>
 	[data-map-root] {
 		--dry-map-radius: var(--dry-radius-lg, 0.5rem);
-		--dry-map-border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		--dry-map-border: 1px solid var(--dry-color-stroke-weak);
 
-		display: grid;
+		display: block;
 		position: relative;
 		border-radius: var(--dry-map-radius);
 		border: var(--dry-map-border);