@dryui/ui 1.6.0 → 1.7.1

package/dist/accordion/accordion-item.svelte

@@ -46,6 +46,15 @@
 		display: grid;
 		border-bottom: 1px solid var(--dry-color-stroke-weak);
 
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+
 		&:last-child {
 			border-bottom: none;
 		}

package/dist/accordion/accordion-root.svelte

@@ -47,7 +47,7 @@
 	});
 </script>
 
-<div data-accordion data-orientation={orientation} class={className} {...rest}>
+<div data-accordion data-dry-stagger data-orientation={orientation} class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/alert/alert.svelte

@@ -83,6 +83,7 @@
 					var(--dry-alert-padding, var(--dry-space-6))
 			)
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		display: grid;

package/dist/avatar/avatar.svelte

@@ -121,7 +121,7 @@
 		font-size: var(--dry-avatar-font-size);
 		font-weight: 600;
 		line-height: 1;
-		border: 1px solid var(--dry-color-stroke-weak);
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 		overflow: hidden;
 		user-select: none;
 	}

package/dist/button/button.svelte

@@ -177,6 +177,7 @@
 		text-decoration: none;
 		white-space: nowrap;
 		user-select: none;
+		transform-origin: center;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
@@ -191,7 +192,7 @@
 		}
 
 		&:active:not([data-disabled]) {
-			transform: translateY(1px);
+			transform: scale(0.98);
 		}
 
 		&[data-disabled] {
@@ -499,7 +500,7 @@
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
-		height: var(--dry-space-8);
+		height: var(--dry-space-10);
 		--_dry-btn-radius: var(--dry-btn-radius, var(--dry-radius-sm));
 		--_dry-btn-font-size: var(
 			--dry-btn-font-size,

package/dist/card/card-root.svelte

@@ -69,6 +69,7 @@
 			0px,
 			calc(var(--dry-card-radius) - var(--dry-card-padding, var(--dry-space-8)))
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		display: grid;

package/dist/chart/chart-y-axis.svelte

@@ -45,6 +45,7 @@
 			font-size="11"
 			fill="currentColor"
 			opacity="0.6"
+			data-chart-tick-label
 		>
 			{Math.round(tick.value)}
 		</text>
@@ -63,4 +64,8 @@
 	[data-chart-axis] {
 		color: var(--dry-chart-axis-color);
 	}
+
+	[data-chart-tick-label] {
+		font-variant-numeric: tabular-nums;
+	}
 </style>

package/dist/checkbox/checkbox-input.svelte

@@ -133,8 +133,21 @@
 
 		&::after {
 			content: '';
-			display: none;
-			transition: transform var(--dry-duration-fast) var(--dry-ease-spring);
+			display: block;
+			height: 60%;
+			aspect-ratio: 35 / 60;
+			border: solid transparent;
+			border-width: 0 2px 2px 0;
+			margin-left: calc(var(--dry-checkbox-size) * 0.52);
+			margin-top: calc(var(--dry-checkbox-size) * -0.18);
+			transform-origin: center;
+			opacity: 0;
+			transform: rotate(45deg) scale(0.25);
+			filter: blur(4px);
+			transition:
+				opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+				transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+				filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
 		}
 
 		&[data-state='checked'] {
@@ -143,16 +156,10 @@
 			box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
 
 			&::after {
-				display: block;
-				height: 60%;
-				aspect-ratio: 35 / 60;
-				border: solid var(--dry-checkbox-check-color);
-				border-width: 0 2px 2px 0;
-				margin-left: calc(var(--dry-checkbox-size) * 0.52);
-				margin-top: calc(var(--dry-checkbox-size) * -0.18);
+				border-color: var(--dry-checkbox-check-color);
+				opacity: 1;
 				transform: rotate(45deg) scale(1);
-				transform-origin: center;
-				animation: checkScale var(--dry-duration-fast) var(--dry-ease-spring);
+				filter: blur(0);
 			}
 		}
 
@@ -163,11 +170,15 @@
 			box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
 
 			&::after {
-				display: block;
 				height: 2px;
+				aspect-ratio: auto;
+				border: none;
 				background: var(--dry-checkbox-check-color);
+				margin-left: 0;
+				margin-top: 0;
+				opacity: 1;
 				transform: scale(1);
-				animation: dashScale var(--dry-duration-fast) var(--dry-ease-spring);
+				filter: blur(0);
 			}
 		}
 
@@ -226,28 +237,16 @@
 		--dry-checkbox-radius: var(--dry-radius-md);
 	}
 
-	@keyframes checkScale {
-		from {
-			transform: rotate(45deg) scale(0);
+	@media (prefers-reduced-motion: reduce) {
+		input::after {
+			transition: none;
+			filter: none;
 		}
-		to {
+		input[data-state='checked']::after {
 			transform: rotate(45deg) scale(1);
 		}
-	}
-
-	@keyframes dashScale {
-		from {
-			transform: scale(0);
-		}
-		to {
-			transform: scale(1);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		input[data-state='checked']::after,
 		input[data-state='indeterminate']::after {
-			animation: none;
+			transform: scale(1);
 		}
 	}
 </style>

package/dist/combobox/combobox-content.svelte

@@ -64,6 +64,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.inputId}
 	data-combobox-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	{...rest}

package/dist/combobox/combobox-item.svelte

@@ -97,6 +97,15 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-10);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	[data-combobox-item][data-has-icon] {

package/dist/command-palette/command-palette-item.svelte

@@ -71,6 +71,15 @@
 		cursor: pointer;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-11);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	[data-command-palette-item]:hover:not([data-disabled]) {

package/dist/command-palette/command-palette-list.svelte

@@ -15,6 +15,7 @@
 <div
 	role="listbox"
 	data-command-palette-list
+	data-dry-stagger
 	id={ctx.listId}
 	aria-label="Commands"
 	class={className}

package/dist/context-menu/context-menu-content.svelte

@@ -60,6 +60,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
 	data-context-menu-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	{style}

package/dist/data-grid/data-grid-cell.svelte

@@ -29,4 +29,9 @@
 		background: inherit;
 		box-shadow: 2px 0 4px -2px rgb(15 23 42 / 0.1);
 	}
+
+	[data-dg-cell][data-type='number'],
+	[data-dg-cell][data-align='end'] {
+		font-variant-numeric: tabular-nums;
+	}
 </style>

package/dist/diagram/edge-routing.d.ts

@@ -1,24 +1,19 @@
 import type { DiagramEdge, DiagramDirection, PositionedEdge } from './types.js';
-/** Minimum distance (in path units, measured along the polyline) between a
- *  forward edge label and a directed-cluster boundary. Cross-boundary edges
- *  whose natural midpoint sits closer than this to the cluster are slid along
- *  the polyline toward the outside endpoint. */
-export declare const LABEL_BORDER_AVOID_PX = 28;
 interface Point {
     x: number;
     y: number;
 }
-export interface EdgeRouteBounds {
+interface EdgeRouteBounds {
     minX: number;
     minY: number;
     maxX: number;
     maxY: number;
 }
-export interface ComputedEdges {
+interface ComputedEdges {
     edges: PositionedEdge[];
     collapsed: (Point[] | null)[];
 }
-export interface ComputeEdgePathsOptions {
+interface ComputeEdgePathsOptions {
     cornerRadius?: number;
     reversedEdges?: Set<string>;
     bounds?: EdgeRouteBounds;
@@ -46,14 +41,13 @@ export declare function computeEdgePaths(edges: DiagramEdge[], positions: Map<st
     h: number;
 }>, direction: DiagramDirection, opts?: ComputeEdgePathsOptions): ComputedEdges;
 declare function buildPathFromCollapsed(collapsed: Point[], cornerRadius?: number): string;
-declare function collapsePoints(points: Point[]): Point[];
-export interface PointAtFraction {
+interface PointAtFraction {
     point: Point;
     segmentIndex: number;
     axis: 'h' | 'v';
 }
 export declare function getPointAtFraction(collapsed: Point[], t: number): PointAtFraction;
-export interface WaypointBox {
+interface WaypointBox {
     x: number;
     y: number;
     width: number;
@@ -67,5 +61,5 @@ export declare function splitCollapsedAtBox(collapsed: Point[], segmentIndex: nu
     entry: Point[];
     exit: Point[];
 } | null;
-export { collapsePoints, buildPathFromCollapsed };
+export { buildPathFromCollapsed };
 export declare function emptyEdge(edge: DiagramEdge): PositionedEdge;

package/dist/diagram/edge-routing.js

@@ -8,7 +8,7 @@ const BACK_EDGE_LANE_STEP = 22;
  *  forward edge label and a directed-cluster boundary. Cross-boundary edges
  *  whose natural midpoint sits closer than this to the cluster are slid along
  *  the polyline toward the outside endpoint. */
-export const LABEL_BORDER_AVOID_PX = 28;
+const LABEL_BORDER_AVOID_PX = 28;
 function edgeKey(edge) {
     return `${edge.from}->${edge.to}`;
 }
@@ -557,7 +557,7 @@ export function splitCollapsedAtBox(collapsed, segmentIndex, box, axis) {
         return null;
     return { entry, exit };
 }
-export { collapsePoints, buildPathFromCollapsed };
+export { buildPathFromCollapsed };
 export function emptyEdge(edge) {
     return {
         from: edge.from,

package/dist/diagram/layout.js

@@ -103,7 +103,9 @@ function orderWithinLayers(layers, adjacencyOut, adjacencyIn, clusterMap) {
     const posInLayer = new Map();
     // Initialize positions
     for (const layer of layers) {
-        layer.forEach((id, i) => posInLayer.set(id, i));
+        for (const [i, id] of layer.entries()) {
+            posInLayer.set(id, i);
+        }
     }
     function resortLayer(layer, neighbors) {
         const sorted = layer.map((nodeId) => {
@@ -123,13 +125,17 @@ function orderWithinLayers(layers, adjacencyOut, adjacencyIn, clusterMap) {
     for (let i = 1; i < layers.length; i++) {
         const next = resortLayer(layers[i], adjacencyIn);
         layers[i] = next;
-        next.forEach((id, j) => posInLayer.set(id, j));
+        for (const [j, id] of next.entries()) {
+            posInLayer.set(id, j);
+        }
     }
     // Up sweep
     for (let i = layers.length - 2; i >= 0; i--) {
         const next = resortLayer(layers[i], adjacencyOut);
         layers[i] = next;
-        next.forEach((id, j) => posInLayer.set(id, j));
+        for (const [j, id] of next.entries()) {
+            posInLayer.set(id, j);
+        }
     }
     // Cluster-aware grouping: after barycenter ordering, group cluster members together
     // and push non-clustered nodes to the edges
@@ -137,7 +143,9 @@ function orderWithinLayers(layers, adjacencyOut, adjacencyIn, clusterMap) {
         for (let i = 0; i < layers.length; i++) {
             const regrouped = groupByCluster(layers[i], clusterMap, adjacencyIn, adjacencyOut, posInLayer);
             layers[i] = regrouped;
-            regrouped.forEach((id, j) => posInLayer.set(id, j));
+            for (const [j, id] of regrouped.entries()) {
+                posInLayer.set(id, j);
+            }
         }
     }
     return layers;

package/dist/dropdown-menu/dropdown-menu-content.svelte

@@ -58,6 +58,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
 	data-dropdown-menu-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	ontoggle={(e) => {
@@ -97,12 +98,18 @@
 				var(--dry-menu-radius, var(--dry-radius-lg)) - var(--dry-menu-padding, var(--dry-space-2))
 			)
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		transition:
 			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
 			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
 	}
 
+	[data-dropdown-menu-content][data-state='closed'] {
+		transition-duration: calc(var(--dry-duration-fast) / 2);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-dropdown-menu-content]:not(:popover-open) {
 		display: none;
 	}

package/dist/hover-card/context.svelte.d.ts

@@ -1 +1 @@
-export { setHoverCardCtx, getHoverCardCtx, type HoverCardContext } from '@dryui/primitives';
+export { getHoverCardCtx } from '@dryui/primitives';

package/dist/hover-card/context.svelte.js

@@ -1 +1 @@
-export { setHoverCardCtx, getHoverCardCtx } from '@dryui/primitives';
+export { getHoverCardCtx } from '@dryui/primitives';

package/dist/image/image.svelte

@@ -67,6 +67,11 @@
 		object-fit: var(--dry-image-object-fit);
 	}
 
+	img[data-state='loaded'],
+	img[data-state='fallback'] {
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+	}
+
 	img[data-state='fallback'] {
 		opacity: 0.95;
 	}

package/dist/internal/date-family-controller.svelte.d.ts

@@ -2,7 +2,7 @@ interface DateViewControllerConfig {
     initialDate?: Date | null;
     locale: () => string;
 }
-export interface DateViewController {
+interface DateViewController {
     readonly focusedDate: Date;
     readonly viewMonth: number;
     readonly viewYear: number;

package/dist/internal/menu-item.svelte

@@ -62,7 +62,16 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-11);
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	div:hover:not([data-disabled]),

package/dist/internal/modal-content.svelte

@@ -132,6 +132,7 @@
 					var(--dry-dialog-padding)
 			)
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		justify-self: stretch;
@@ -150,6 +151,11 @@
 			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
 	}
 
+	[data-modal-content][data-variant='dialog'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='dialog'][data-state='open'] [data-modal-panel] {
 		opacity: 1;
 		transform: scale(1) translateY(0);
@@ -189,6 +195,8 @@
 		--dry-dialog-shadow: var(--dry-shadow-overlay);
 		--dry-dialog-padding: var(--dry-space-6);
 		--dry-dialog-max-width: 32rem;
+		--dry-radius-nested: max(0px, calc(var(--dry-dialog-radius) - var(--dry-dialog-padding)));
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		justify-self: stretch;
@@ -208,6 +216,11 @@
 			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
 	}
 
+	[data-modal-content][data-variant='alert-dialog'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='alert-dialog'][data-state='open'] [data-modal-panel] {
 		opacity: 1;
 		transform: scale(1) translateY(0);
@@ -282,6 +295,11 @@
 			opacity var(--dry-duration-normal) var(--dry-ease-out);
 	}
 
+	[data-modal-content][data-variant='drawer'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='drawer'][data-side='right'] [data-modal-panel] {
 		grid-column: 2;
 		height: 100%;

package/dist/internal/motion.d.ts

@@ -1,4 +1,4 @@
-export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2, observeInViewport, observePageVisibility, observeOffscreenState } from '@dryui/primitives/internal/motion';
+export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, 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,5 @@
 // Re-export shared motion utilities from primitives (single source of truth)
-export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2, observeInViewport, observePageVisibility, observeOffscreenState } from '@dryui/primitives/internal/motion';
+export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, 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/nav-arrow-button.svelte

@@ -18,9 +18,25 @@
 </script>
 
 <Button {variant} {size} type="button" aria-label={label} {...rest}>
-	{#if children}
-		{@render children()}
-	{:else}
-		{glyph}
-	{/if}
+	<span data-part="nav-arrow-icon" data-direction={direction}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{glyph}
+		{/if}
+	</span>
 </Button>
+
+<style>
+	[data-part='nav-arrow-icon'] {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+	[data-part='nav-arrow-icon'][data-direction='prev'] {
+		transform: translateX(-0.5px);
+	}
+	[data-part='nav-arrow-icon'][data-direction='next'] {
+		transform: translateX(0.5px);
+	}
+</style>

package/dist/menubar/menubar-content.svelte

@@ -99,6 +99,7 @@
 	tabindex="-1"
 	aria-labelledby={triggerEl?.id}
 	data-menubar-content
+	data-dry-stagger
 	data-state={menuCtx.open ? 'open' : 'closed'}
 	class={className}
 	ontoggle={(e) => {

package/dist/menubar/menubar-item.svelte

@@ -69,7 +69,16 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-11);
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	[data-menubar-item]:hover:not([data-disabled]),

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

@@ -82,6 +82,7 @@
 		font-size: var(--dry-input-font-size);
 		line-height: var(--dry-type-small-leading);
 		font-family: var(--dry-font-sans);
+		font-variant-numeric: tabular-nums;
 		color: var(--dry-input-color);
 		background: var(--dry-input-bg);
 		border: 1px solid var(--dry-input-border);

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

@@ -53,6 +53,7 @@
 		height: var(--dry-pin-size);
 		font-size: var(--dry-pin-font-size);
 		font-family: var(--dry-font-mono);
+		font-variant-numeric: tabular-nums;
 		font-weight: 500;
 		color: var(--dry-color-text-strong);
 		background: var(--dry-pin-bg);

package/dist/popover/popover-content.svelte

@@ -61,6 +61,7 @@
 		--dry-popover-shadow: var(--dry-overlay-shadow, var(--dry-shadow-lg));
 		--dry-popover-padding: var(--dry-space-4);
 		--dry-radius-nested: max(0px, calc(var(--dry-popover-radius) - var(--dry-popover-padding)));
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		inset: unset;
 		margin: 0;
@@ -79,6 +80,11 @@
 			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
 	}
 
+	[data-popover-content][data-state='closed'] {
+		transition-duration: calc(var(--dry-duration-fast) / 2);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-popover-content]:not(:popover-open) {
 		display: none;
 	}

package/dist/progress/progress.svelte

@@ -275,6 +275,7 @@
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
 		color: var(--dry-color-text-weak, #64748b);
 		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
 	}
 
 	[data-part='label'][data-position='inside'] {

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

@@ -91,12 +91,18 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -50%) scale(0);
+		transform: translate(-50%, -50%) scale(0.25);
+		opacity: 0;
+		filter: blur(4px);
 		height: 8px;
 		aspect-ratio: 1;
 		border-radius: var(--dry-radius-full);
 		background: var(--dry-color-on-brand);
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+		transform-origin: center;
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
 	}
 
 	[data-radio-group-item] input[type='radio']:hover:not(:disabled) {
@@ -120,6 +126,15 @@
 
 	[data-radio-group-item] input[type='radio']:checked::after {
 		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+		filter: blur(0);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-radio-group-item] input[type='radio']::after {
+			transition: none;
+			filter: none;
+		}
 	}
 
 	[data-radio-group-item] input[type='radio']:checked:hover:not(:disabled) {

package/dist/reveal/reveal.svelte

@@ -128,7 +128,7 @@
 <style>
 	[data-reveal] {
 		--dry-reveal-distance: var(--dry-motion-distance-sm, 0.75rem);
-		--dry-reveal-delay: 0ms;
+		--dry-reveal-delay: var(--dry-stagger-delay, 0ms);
 		--dry-reveal-duration: var(--dry-duration-entrance, 480ms);
 		--dry-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
 		--dry-reveal-hidden-opacity: var(--dry-motion-opacity-enter, 0);

package/dist/select/select-content.svelte

@@ -123,6 +123,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
 	data-select-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	ontoggle={(e) => {

package/dist/select/select-item.svelte

@@ -81,6 +81,15 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-10);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
 	}
 
 	[data-select-item]:hover:not([data-disabled]),

package/dist/select/select-trigger-button.svelte

@@ -33,6 +33,7 @@
 		{@render children()}
 		<svg
 			data-indicator
+			data-state={ctx.open ? 'open' : 'closed'}
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 24 24"
 			fill="none"
@@ -55,6 +56,22 @@
 		aspect-ratio: 1;
 		place-self: center;
 		opacity: 0.5;
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+		transform-origin: center;
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
+	}
+
+	svg[data-indicator][data-state='open'] {
+		opacity: 1;
+		transform: scale(1.05);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		svg[data-indicator] {
+			transition: none;
+			filter: none;
+		}
 	}
 </style>

package/dist/shader-canvas/presets.d.ts

@@ -1,11 +1 @@
-/** sin/cos color rotation using u_time, u_resolution, optional u_color_* uniforms */
-export declare const gradientFlow = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform vec3 u_color_primary;\nuniform vec3 u_color_secondary;\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time * 0.4;\n\n  vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.3, 0.4, 0.9);\n  vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.9, 0.3, 0.5);\n\n  float angle = t + uv.x * 3.14159 + uv.y * 2.0;\n  float s = sin(angle) * 0.5 + 0.5;\n  float c = cos(angle * 0.7 + 1.0) * 0.5 + 0.5;\n\n  vec3 color = mix(c1, c2, s);\n  color = mix(color, vec3(1.0) - color * 0.3, c * 0.3);\n\n  fragColor = vec4(color, 1.0);\n}\n";
-/** Procedural dots via hash/noise functions */
-export declare const particleField = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  float aspect = u_resolution.x / u_resolution.y;\n  uv.x *= aspect;\n\n  float t = u_time * 0.3;\n  vec3 color = vec3(0.02, 0.02, 0.06);\n\n  for (int i = 0; i < 36; i++) {\n    float fi = float(i);\n    vec2 pos = vec2(\n      hash(vec2(fi, 0.0)),\n      hash(vec2(0.0, fi))\n    );\n    pos.x *= aspect;\n    pos += vec2(sin(t + fi * 0.5) * 0.05, cos(t * 0.7 + fi * 0.3) * 0.05);\n\n    float d = length(uv - pos);\n    float size = 0.002 + hash(vec2(fi, fi)) * 0.003;\n    float brightness = smoothstep(size * 2.0, size * 0.5, d);\n\n    vec3 particleColor = vec3(\n      0.4 + hash(vec2(fi, 1.0)) * 0.6,\n      0.3 + hash(vec2(fi, 2.0)) * 0.4,\n      0.6 + hash(vec2(fi, 3.0)) * 0.4\n    );\n\n    color += particleColor * brightness * 0.8;\n  }\n\n  fragColor = vec4(color, 1.0);\n}\n";
-/** Sinusoidal UV warp, responds to u_mouse */
-export declare const waveDistortion = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time * 0.5;\n  vec2 mouse = u_mouse;\n\n  float wave1 = sin(uv.x * 8.0 + t * 2.0 + mouse.x * 3.0) * 0.02;\n  float wave2 = sin(uv.y * 6.0 + t * 1.5 + mouse.y * 2.0) * 0.03;\n  float wave3 = cos(uv.x * 4.0 - t + uv.y * 5.0) * 0.015;\n\n  uv.x += wave1 + wave3;\n  uv.y += wave2;\n\n  vec3 c1 = vec3(0.1, 0.2, 0.4);\n  vec3 c2 = vec3(0.3, 0.1, 0.5);\n  vec3 c3 = vec3(0.05, 0.3, 0.4);\n\n  float blend = sin(uv.x * 3.14159 + uv.y * 2.0 + t) * 0.5 + 0.5;\n  vec3 color = mix(mix(c1, c2, uv.x), c3, blend);\n\n  fragColor = vec4(color, 1.0);\n}\n";
-/** Multi-point gradient interpolation */
-export declare const meshGradient = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform vec3 u_color_primary;\nuniform vec3 u_color_secondary;\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time * 0.2;\n\n  vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.5, 0.2, 0.8);\n  vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.2, 0.6, 0.9);\n  vec3 c3 = vec3(0.9, 0.3, 0.4);\n  vec3 c4 = vec3(0.2, 0.8, 0.5);\n\n  vec2 p1 = vec2(0.2 + sin(t) * 0.1, 0.3 + cos(t * 0.7) * 0.1);\n  vec2 p2 = vec2(0.8 + sin(t * 0.8 + 1.0) * 0.1, 0.2 + cos(t * 0.6) * 0.1);\n  vec2 p3 = vec2(0.7 + sin(t * 0.5 + 2.0) * 0.1, 0.8 + cos(t * 0.9) * 0.1);\n  vec2 p4 = vec2(0.3 + sin(t * 0.6 + 3.0) * 0.1, 0.7 + cos(t * 0.4) * 0.1);\n\n  float d1 = 1.0 / (length(uv - p1) + 0.01);\n  float d2 = 1.0 / (length(uv - p2) + 0.01);\n  float d3 = 1.0 / (length(uv - p3) + 0.01);\n  float d4 = 1.0 / (length(uv - p4) + 0.01);\n  float total = d1 + d2 + d3 + d4;\n\n  vec3 color = (c1 * d1 + c2 * d2 + c3 * d3 + c4 * d4) / total;\n\n  fragColor = vec4(color, 1.0);\n}\n";
-/** Fresnel-like metallic reflection via distance fields */
-export declare const liquidMetal = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\nfloat smin(float a, float b, float k) {\n  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);\n  return mix(b, a, h) - k * h * (1.0 - h);\n}\n\nvoid main() {\n  vec2 uv = v_uv * 2.0 - 1.0;\n  float aspect = u_resolution.x / u_resolution.y;\n  uv.x *= aspect;\n  float t = u_time * 0.3;\n\n  // Animated blob positions\n  vec2 p1 = vec2(sin(t * 0.7) * 0.6, cos(t * 0.5) * 0.4);\n  vec2 p2 = vec2(cos(t * 0.8 + 1.0) * 0.5, sin(t * 0.6 + 2.0) * 0.5);\n  vec2 p3 = vec2(sin(t * 0.4 + 3.0) * 0.4, cos(t * 0.9 + 1.5) * 0.3);\n\n  float d1 = length(uv - p1) - 0.3;\n  float d2 = length(uv - p2) - 0.25;\n  float d3 = length(uv - p3) - 0.2;\n\n  float d = smin(smin(d1, d2, 0.3), d3, 0.3);\n\n  // Fresnel-like effect\n  float edge = smoothstep(0.02, -0.02, d);\n  float fresnel = pow(1.0 - abs(d) * 3.0, 3.0);\n  fresnel = clamp(fresnel, 0.0, 1.0);\n\n  // Metal color\n  vec3 baseColor = vec3(0.7, 0.72, 0.75);\n  vec3 highlight = vec3(0.95, 0.95, 1.0);\n  vec3 dark = vec3(0.15, 0.16, 0.2);\n\n  float n = sin(uv.x * 8.0 + t) * cos(uv.y * 8.0 - t * 0.7) * 0.5 + 0.5;\n  vec3 color = mix(dark, baseColor, edge);\n  color = mix(color, highlight, fresnel * 0.8);\n  color += n * 0.05 * edge;\n\n  // Environment reflection hint\n  float ref = sin(uv.x * 4.0 + uv.y * 3.0 + t * 2.0) * 0.5 + 0.5;\n  color += vec3(0.1, 0.12, 0.15) * ref * edge * 0.4;\n\n  fragColor = vec4(color, 1.0);\n}\n";
 export declare const PRESETS: Record<string, string>;

package/dist/shader-canvas/presets.js

@@ -1,5 +1,5 @@
 /** sin/cos color rotation using u_time, u_resolution, optional u_color_* uniforms */
-export const gradientFlow = `#version 300 es
+const gradientFlow = `#version 300 es
 precision highp float;
 
 in vec2 v_uv;
@@ -28,7 +28,7 @@ void main() {
 }
 `;
 /** Procedural dots via hash/noise functions */
-export const particleField = `#version 300 es
+const particleField = `#version 300 es
 precision highp float;
 
 in vec2 v_uv;
@@ -75,7 +75,7 @@ void main() {
 }
 `;
 /** Sinusoidal UV warp, responds to u_mouse */
-export const waveDistortion = `#version 300 es
+const waveDistortion = `#version 300 es
 precision highp float;
 
 in vec2 v_uv;
@@ -108,7 +108,7 @@ void main() {
 }
 `;
 /** Multi-point gradient interpolation */
-export const meshGradient = `#version 300 es
+const meshGradient = `#version 300 es
 precision highp float;
 
 in vec2 v_uv;
@@ -145,7 +145,7 @@ void main() {
 }
 `;
 /** Fresnel-like metallic reflection via distance fields */
-export const liquidMetal = `#version 300 es
+const liquidMetal = `#version 300 es
 precision highp float;
 
 in vec2 v_uv;

package/dist/skeleton/skeleton.svelte

@@ -91,10 +91,12 @@
 		--dry-skeleton-radius: var(--dry-radius-full);
 		aspect-ratio: 1;
 		height: var(--_h, var(--dry-space-10));
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 	}
 
 	div[data-variant='rectangular'] {
 		--dry-skeleton-radius: var(--dry-radius-sm);
 		height: var(--_h, var(--dry-space-16));
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 	}
 </style>

package/dist/slider/slider-input.svelte

@@ -249,6 +249,7 @@
 		padding-inline: var(--dry-space-4);
 		font-size: var(--dry-text-sm-size, 0.875rem);
 		font-weight: 600;
+		font-variant-numeric: tabular-nums;
 		color: var(--dry-color-text);
 		clip-path: inset(
 			0 calc(100% - var(--dry-slider-progress, 50%)) 0 0 round var(--dry-radius-full)

package/dist/text/text.svelte

@@ -60,6 +60,7 @@
 		color: var(--dry-typography-text-color, var(--dry-color-text-strong));
 		font-family: var(--dry-font-sans);
 		line-height: 1.7;
+		text-wrap: pretty;
 	}
 
 	[data-color='muted'] {

package/dist/theme-toggle/theme-controller.svelte.d.ts

@@ -26,7 +26,6 @@ export interface ThemeController {
     /** Stop watching `matchMedia` changes. Called automatically on HMR disposal. */
     destroy(): void;
 }
-export declare const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
 export declare const DEFAULT_STORAGE_KEY = "dryui-theme";
 /**
  * Read the stored theme mode. Exported for testing; production callers

package/dist/theme-toggle/theme-controller.svelte.js

@@ -1,4 +1,4 @@
-export const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
 export const DEFAULT_STORAGE_KEY = 'dryui-theme';
 function isBrowser() {
     return typeof window !== 'undefined' && typeof document !== 'undefined';

package/dist/theme-toggle/theme-toggle.svelte

@@ -113,7 +113,12 @@
 >
 	{#snippet icon()}
 		<span class="icons" data-mode={iconState}>
-			<span class="icon sun" aria-hidden="true">
+			<span
+				class="icon sun"
+				data-dry-icon-reveal
+				data-hidden={iconState === 'dark' || undefined}
+				aria-hidden="true"
+			>
 				{#if sunIcon}
 					{@render sunIcon()}
 				{:else}
@@ -138,7 +143,12 @@
 					</svg>
 				{/if}
 			</span>
-			<span class="icon moon" aria-hidden="true">
+			<span
+				class="icon moon"
+				data-dry-icon-reveal
+				data-hidden={iconState === 'light' || undefined}
+				aria-hidden="true"
+			>
 				{#if moonIcon}
 					{@render moonIcon()}
 				{:else}

package/dist/themes/dark.css

@@ -65,6 +65,9 @@
 	--dry-color-bg-brand: var(--dry-color-fill-brand);
 	--dry-color-bg-inverse: #ffffff;
 
+	/* ─── Image edge ring (dark) ─────────────────────────────────── */
+	--dry-image-edge: rgba(255, 255, 255, 0.1);
+
 	/* ─── Component: Toggle ─────────────────────────────────────────
 	   Derived from semantic tokens so brand overrides (e.g. a consumer
 	   retheming --dry-color-fill-brand) flow through to toggles too.
@@ -283,6 +286,9 @@
 			--dry-color-bg-brand: var(--dry-color-fill-brand);
 			--dry-color-bg-inverse: #ffffff;
 
+			/* ─── Image edge ring (dark) ─────────────────────────────────── */
+			--dry-image-edge: rgba(255, 255, 255, 0.1);
+
 			/* ─── Component: Toggle ─────────────────────────────────────────
 			   Derived from semantic tokens so brand overrides (e.g. a consumer
 			   retheming --dry-color-fill-brand) flow through to toggles too.

package/dist/themes/default.css

@@ -91,6 +91,12 @@ samp {
 	--dry-color-bg-brand: var(--dry-color-fill-brand);
 	--dry-color-bg-inverse: hsl(233, 18%, 9%);
 
+	/* ─── Image edge ring ────────────────────────────────────────────
+	   Subtle 1px outline for image surfaces (avatars, images, image
+	   skeletons). Prevents image edges from reading as surface
+	   imperfections. Hardcoded rgba — not brand-derivable. */
+	--dry-image-edge: rgba(0, 0, 0, 0.1);
+
 	/* ─── Component: Toggle ─────────────────────────────────────────
 	   Derived from semantic tokens so brand overrides (e.g. a consumer
 	   retheming --dry-color-fill-brand) flow through to toggles too.
@@ -365,6 +371,10 @@ samp {
 	--dry-motion-blur-enter: 16px;
 	--dry-motion-scale-enter: 0.96;
 
+	/* ─── Stagger ─────────────────────────────────────────────────── */
+	--dry-stagger-step: 60ms;
+	--dry-stagger-max: 8; /* cap delay so very long lists don't take forever */
+
 	/* ─── Glass surface ───────────────────────────────────────────── */
 	--dry-glass-blur: 12px;
 	--dry-glass-tint: var(--dry-color-bg-raised);
@@ -501,3 +511,85 @@ samp {
 		--dry-motion-scale-enter: 1;
 	}
 }
+
+/* Stagger — per-child transition-delay driven by `--dry-index`. The first
+   12 children get `--dry-index` automatically via `:nth-child()`; for longer
+   lists set `--dry-index` on each child. The child must declare a
+   `transition` on its enter properties for the delay to have effect. */
+[data-dry-stagger] > * {
+	--dry-stagger-delay: calc(
+		min(var(--dry-index, 0), var(--dry-stagger-max)) * var(--dry-stagger-step)
+	);
+	transition-delay: var(--dry-stagger-delay);
+	animation-delay: var(--dry-stagger-delay);
+}
+
+[data-dry-stagger] > *:nth-child(1) {
+	--dry-index: 0;
+}
+[data-dry-stagger] > *:nth-child(2) {
+	--dry-index: 1;
+}
+[data-dry-stagger] > *:nth-child(3) {
+	--dry-index: 2;
+}
+[data-dry-stagger] > *:nth-child(4) {
+	--dry-index: 3;
+}
+[data-dry-stagger] > *:nth-child(5) {
+	--dry-index: 4;
+}
+[data-dry-stagger] > *:nth-child(6) {
+	--dry-index: 5;
+}
+[data-dry-stagger] > *:nth-child(7) {
+	--dry-index: 6;
+}
+[data-dry-stagger] > *:nth-child(8) {
+	--dry-index: 7;
+}
+[data-dry-stagger] > *:nth-child(9) {
+	--dry-index: 8;
+}
+[data-dry-stagger] > *:nth-child(10) {
+	--dry-index: 9;
+}
+[data-dry-stagger] > *:nth-child(11) {
+	--dry-index: 10;
+}
+[data-dry-stagger] > *:nth-child(12) {
+	--dry-index: 11;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-dry-stagger] > * {
+		transition: none;
+		animation: none;
+	}
+}
+
+.dry-tabular-nums {
+	font-variant-numeric: tabular-nums;
+}
+
+[data-dry-icon-reveal] {
+	transition:
+		opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+		transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+		filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
+	transform-origin: center;
+}
+[data-dry-icon-reveal][data-state='hidden'],
+[data-dry-icon-reveal][data-hidden],
+[data-dry-icon-reveal][hidden] {
+	opacity: 0;
+	transform: scale(0.25);
+	filter: blur(4px);
+}
+@media (prefers-reduced-motion: reduce) {
+	[data-dry-icon-reveal] {
+		transition: none;
+		filter: none;
+		transform: none;
+	}
+}

package/dist/toast/toast-provider.svelte

@@ -47,6 +47,7 @@
 	role="region"
 	aria-label="Notifications"
 	data-part="provider"
+	data-dry-stagger
 	data-position={position}
 	class={className}
 	{...rest}

package/dist/toast/toast-root.svelte

@@ -60,6 +60,7 @@
 	[data-part='root'] {
 		--dry-toast-accent: var(--dry-color-fill-info);
 		--dry-radius-nested: max(0px, calc(var(--dry-radius-lg) - var(--dry-space-4)));
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		position: relative;
 		background: var(--dry-toast-bg, var(--dry-color-bg-overlay));

package/dist/tooltip/tooltip-content.svelte

@@ -70,6 +70,11 @@
 			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
 	}
 
+	[data-tooltip-content][data-state='closed'] {
+		transition-duration: calc(var(--dry-duration-fast) / 2);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-tooltip-content]:not(:popover-open) {
 		display: none;
 	}

package/dist/video-embed/video-embed-button.svelte

@@ -166,10 +166,11 @@
 		height: var(--dry-video-embed-play-size);
 		aspect-ratio: 1;
 		filter: drop-shadow(0 2px 8px rgb(15 23 42 / 0.3));
+		transform: translateX(1px);
 		transition: transform var(--dry-duration-normal) var(--dry-ease-default);
 	}
 
 	.play-btn-slot:hover [data-part='play-icon'] {
-		transform: scale(1.1);
+		transform: translateX(1px) scale(1.1);
 	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
@@ -784,7 +784,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.6.0"
+    "@dryui/primitives": "^1.7.1"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"

package/dist/utils/use-anchor-styles.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { Placement } from '@dryui/primitives';
-export type { Placement };
-interface AnchorStylesOptions {
-    triggerEl: () => HTMLElement | null;
-    contentEl: () => HTMLElement | null;
-    placement: () => Placement;
-    offset: () => number;
-}
-export declare function useAnchorStyles(options: AnchorStylesOptions): {
-    readonly styles: Record<string, string>;
-    applyPosition: (node: HTMLElement, initialUserStyle?: string | null) => {
-        update(newUserStyle?: string | null): void;
-    };
-};

package/dist/utils/use-anchor-styles.svelte.js

@@ -1,32 +0,0 @@
-import { createAnchorPosition } from '@dryui/primitives';
-export function useAnchorStyles(options) {
-    const position = createAnchorPosition(options.triggerEl, options.contentEl, {
-        get placement() {
-            return options.placement();
-        },
-        get offset() {
-            return options.offset();
-        }
-    });
-    function applyPosition(node, initialUserStyle) {
-        let userStyle = $state(initialUserStyle);
-        $effect(() => {
-            node.style.cssText = typeof userStyle === 'string' ? userStyle : '';
-            const styles = position.styles;
-            for (const [key, value] of Object.entries(styles)) {
-                node.style.setProperty(key, value);
-            }
-        });
-        return {
-            update(newUserStyle) {
-                userStyle = newUserStyle;
-            }
-        };
-    }
-    return {
-        get styles() {
-            return position.styles;
-        },
-        applyPosition
-    };
-}