@dryui/ui 0.3.0 → 0.4.0

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

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	position?: number;
-	orientation?: 'horizontal' | 'vertical';
-	before: Snippet;
-	after: Snippet;
-	handle?: Snippet;
+    position?: number;
+    orientation?: 'horizontal' | 'vertical';
+    before: Snippet;
+    after: Snippet;
+    handle?: Snippet;
 }
-declare const ImageComparison: import('svelte').Component<Props, {}, 'position'>;
+declare const ImageComparison: import("svelte").Component<Props, {}, "position">;
 type ImageComparison = ReturnType<typeof ImageComparison>;
 export default ImageComparison;

package/dist/index.d.ts

@@ -147,7 +147,7 @@ export type { ListboxRootProps, ListboxItemProps } from './listbox/index.js';
 export { LogoMark } from './logo-mark/index.js';
 export type { LogoMarkProps } from './logo-mark/index.js';
 export { PinInput } from './pin-input/index.js';
-export type { PinInputRootProps, PinInputGroupProps, PinInputCellProps, PinInputSeparatorProps, PinInputCell } from './pin-input/index.js';
+export type { PinInputRootProps, PinInputGroupProps, PinInputCellProps, PinInputSeparatorProps, PinInputCellState } from './pin-input/index.js';
 export { RangeCalendar } from './range-calendar/index.js';
 export type { RangeCalendarRootProps, RangeCalendarGridProps } from './range-calendar/index.js';
 export { Rating } from './rating/index.js';
@@ -290,3 +290,5 @@ export { Tag } from './tag/index.js';
 export type { TagProps, TagColor } from './tag/index.js';
 export { useThemeOverride } from './themes/use-theme-override.svelte.js';
 export type { ThemeTokenMap } from './themes/use-theme-override.svelte.js';
+export { Diagram } from './diagram/index.js';
+export type { DiagramConfig, DiagramNode, DiagramEdge, DiagramCluster, DiagramAnnotation, DiagramSwimlane, DiagramRegion, DiagramColor, DiagramDirection } from './diagram/index.js';

package/dist/infinite-scroll/infinite-scroll.svelte.d.ts

@@ -1,14 +1,14 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type InfiniteScrollProps as InfiniteScrollPrimitiveProps } from '@dryui/primitives/infinite-scroll';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	onLoadMore: InfiniteScrollPrimitiveProps['onLoadMore'];
-	hasMore?: InfiniteScrollPrimitiveProps['hasMore'];
-	loading?: InfiniteScrollPrimitiveProps['loading'];
-	rootMargin?: InfiniteScrollPrimitiveProps['rootMargin'];
-	children: InfiniteScrollPrimitiveProps['children'];
-	loadingIndicator?: InfiniteScrollPrimitiveProps['loadingIndicator'];
-	endMessage?: InfiniteScrollPrimitiveProps['endMessage'];
+    onLoadMore: () => void | Promise<void>;
+    hasMore?: boolean | undefined;
+    loading?: boolean | undefined;
+    rootMargin?: string | undefined;
+    children: Snippet;
+    loadingIndicator?: Snippet | undefined;
+    endMessage?: Snippet | undefined;
 }
-declare const InfiniteScroll: import('svelte').Component<Props, {}, ''>;
+declare const InfiniteScroll: import("svelte").Component<Props, {}, "">;
 type InfiniteScroll = ReturnType<typeof InfiniteScroll>;
 export default InfiniteScroll;

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

@@ -1,10 +1,10 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLInputAttributes, 'size'> {
-	value?: string;
-	size?: 'sm' | 'md' | 'lg';
-	variant?: 'default' | 'ghost';
-	disabled?: boolean;
+    value?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'ghost';
+    disabled?: boolean;
 }
-declare const Input: import('svelte').Component<Props, {}, 'value'>;
+declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/input-group/index.d.ts

@@ -13,7 +13,7 @@ import InputGroupPrefix from './input-group-prefix.svelte';
 import InputGroupInput from './input-group-input.svelte';
 import InputGroupSuffix from './input-group-suffix.svelte';
 import InputGroupSeparator from './input-group-separator.svelte';
-import InputGroupAction from './input-group-action.svelte';
+import InputGroupAction from './input-group-action-button.svelte';
 import InputGroupSelect from './input-group-select.svelte';
 export declare const InputGroup: {
     Root: typeof InputGroupRoot;

package/dist/input-group/index.js

@@ -3,7 +3,7 @@ import InputGroupPrefix from './input-group-prefix.svelte';
 import InputGroupInput from './input-group-input.svelte';
 import InputGroupSuffix from './input-group-suffix.svelte';
 import InputGroupSeparator from './input-group-separator.svelte';
-import InputGroupAction from './input-group-action.svelte';
+import InputGroupAction from './input-group-action-button.svelte';
 import InputGroupSelect from './input-group-select.svelte';
 export const InputGroup = {
     Root: InputGroupRoot,

package/dist/input-group/input-group-action-button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getAffixGroupCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let { disabled = false, children, type = 'button', ...rest }: Props = $props();
+
+	const ctx = getAffixGroupCtx();
+
+	let isDisabled = $derived(disabled || ctx.disabled);
+</script>
+
+<Button
+	variant="trigger"
+	{type}
+	disabled={isDisabled}
+	data-size={ctx.size}
+	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
+	data-input-group-action
+	{...rest}
+>
+	{@render children?.()}
+</Button>

package/dist/input-group/input-group-action-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    children?: Snippet;
+}
+declare const InputGroupActionButton: import("svelte").Component<Props, {}, "">;
+type InputGroupActionButton = ReturnType<typeof InputGroupActionButton>;
+export default InputGroupActionButton;

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends HTMLInputAttributes {
-	value?: string;
+    value?: string;
 }
-declare const InputGroupInput: import('svelte').Component<Props, {}, 'value'>;
+declare const InputGroupInput: import("svelte").Component<Props, {}, "value">;
 type InputGroupInput = ReturnType<typeof InputGroupInput>;
 export default InputGroupInput;

package/dist/input-group/input-group-prefix.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const InputGroupPrefix: import('svelte').Component<Props, {}, ''>;
+declare const InputGroupPrefix: import("svelte").Component<Props, {}, "">;
 type InputGroupPrefix = ReturnType<typeof InputGroupPrefix>;
 export default InputGroupPrefix;

package/dist/input-group/input-group-root.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	size?: 'sm' | 'md' | 'lg';
-	disabled?: boolean;
-	invalid?: boolean;
-	orientation?: 'horizontal' | 'vertical';
-	children: Snippet;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    invalid?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    children: Snippet;
 }
-declare const InputGroupRoot: import('svelte').Component<Props, {}, ''>;
+declare const InputGroupRoot: import("svelte").Component<Props, {}, "">;
 type InputGroupRoot = ReturnType<typeof InputGroupRoot>;
 export default InputGroupRoot;

package/dist/input-group/input-group-select.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLSelectAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 interface Props extends HTMLSelectAttributes {
-	value?: string;
-	children?: Snippet;
+    value?: string;
+    children?: Snippet;
 }
-declare const InputGroupSelect: import('svelte').Component<Props, {}, 'value'>;
+declare const InputGroupSelect: import("svelte").Component<Props, {}, "value">;
 type InputGroupSelect = ReturnType<typeof InputGroupSelect>;
 export default InputGroupSelect;

package/dist/input-group/input-group-separator.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLSpanElement> {}
-declare const InputGroupSeparator: import('svelte').Component<Props, {}, ''>;
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+}
+declare const InputGroupSeparator: import("svelte").Component<Props, {}, "">;
 type InputGroupSeparator = ReturnType<typeof InputGroupSeparator>;
 export default InputGroupSeparator;

package/dist/input-group/input-group-suffix.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const InputGroupSuffix: import('svelte').Component<Props, {}, ''>;
+declare const InputGroupSuffix: import("svelte").Component<Props, {}, "">;
 type InputGroupSuffix = ReturnType<typeof InputGroupSuffix>;
 export default InputGroupSuffix;

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

@@ -1,10 +1,11 @@
 export function generateWeekdayLabels(locale, weekStartDay) {
+    const formatter = new Intl.DateTimeFormat(locale, { weekday: 'short' });
     const labels = [];
     for (let i = 0; i < 7; i++) {
         const dayIndex = (weekStartDay + i) % 7;
         // Jan 7 2024 = Sunday (getDay() === 0)
         const d = new Date(2024, 0, 7 + dayIndex);
-        labels.push(new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d));
+        labels.push(formatter.format(d));
     }
     return labels;
 }

package/dist/internal/close-button-base.svelte

@@ -1,43 +1,22 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import type { ButtonVariant, ButtonSize } from '../button/index.js';
 
 	interface Props extends HTMLButtonAttributes {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
 		children?: Snippet;
 	}
 
-	let { children, class: className, ...rest }: Props = $props();
+	let { variant = 'trigger', size = 'icon-sm', children, ...rest }: Props = $props();
 </script>
 
-<button type="button" class={className} {...rest}>
-	{#if children}{@render children()}{/if}
-</button>
-
-<style>
-	button {
-		cursor: pointer;
-		background: none;
-		border: none;
-		padding: var(--dry-space-2);
-		color: var(--dry-color-text-weak);
-		border-radius: var(--dry-radius-sm);
-		min-height: var(--dry-space-11);
-		aspect-ratio: 1;
-		display: inline-grid;
-		place-items: center;
-	}
-
-	button:hover {
-		background: var(--dry-color-fill);
-		color: var(--dry-color-text-strong);
-	}
-
-	button:active {
-		background: var(--dry-color-fill-hover);
-	}
-
-	button:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-</style>
+<Button {variant} {size} type="button" {...rest}>
+	{#if children}
+		{@render children()}
+	{:else}
+		<span aria-hidden="true">&times;</span>
+	{/if}
+</Button>

package/dist/internal/close-button-base.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ButtonVariant, ButtonSize } from '../button/index.js';
 interface Props extends HTMLButtonAttributes {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     children?: Snippet;
 }
 declare const CloseButtonBase: import("svelte").Component<Props, {}, "">;

package/dist/internal/motion.d.ts

@@ -1,16 +1,4 @@
-export {
-	getReducedMotionPreference,
-	observeReducedMotionPreference,
-	supportsIntersectionObservers,
-	supportsPointerTracking,
-	supportsPropertyRegistration,
-	registerPropertyOnce,
-	supportsWebGL2
-} 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];
+export declare function extractThemeColor(property: string, element?: HTMLElement): [number, number, number];

package/dist/internal/nav-arrow-button.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import type { ButtonVariant, ButtonSize } from '../button/index.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'type' | 'aria-label'> {
+		direction: 'prev' | 'next';
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		label: string;
+		children?: Snippet;
+	}
+
+	let { direction, variant = 'nav', size = 'icon', label, children, ...rest }: Props = $props();
+
+	const glyph = $derived(direction === 'prev' ? '\u2039' : '\u203A');
+</script>
+
+<Button {variant} {size} type="button" aria-label={label} {...rest}>
+	{#if children}
+		{@render children()}
+	{:else}
+		{glyph}
+	{/if}
+</Button>

package/dist/internal/nav-arrow-button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ButtonVariant, ButtonSize } from '../button/index.js';
+interface Props extends Omit<HTMLButtonAttributes, 'type' | 'aria-label'> {
+    direction: 'prev' | 'next';
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    label: string;
+    children?: Snippet;
+}
+declare const NavArrowButton: import("svelte").Component<Props, {}, "">;
+type NavArrowButton = ReturnType<typeof NavArrowButton>;
+export default NavArrowButton;

package/dist/kbd/kbd.svelte

@@ -10,10 +10,13 @@
 	let { class: className, keys, children, ...rest }: Props = $props();
 </script>
 
-<kbd class={className} {...rest}>
+<kbd class={['root', className]} {...rest}>
 	{#if keys}
-		{#each keys as key, i}
-			<kbd>{key}</kbd>{#if i < keys.length - 1}<span>+</span>{/if}
+		{#each keys as key, i (`${i}:${key}`)}
+			<span class="key">{key}</span>{#if i < keys.length - 1}<span
+					class="separator"
+					aria-hidden="true">+</span
+				>{/if}
 		{/each}
 	{:else if children}
 		{@render children()}
@@ -21,7 +24,7 @@
 </kbd>
 
 <style>
-	kbd {
+	.root {
 		--dry-kbd-bg: var(--dry-color-bg-overlay);
 		--dry-kbd-border: var(--dry-color-stroke-weak);
 		--dry-kbd-radius: var(--dry-radius-md);
@@ -47,15 +50,7 @@
 		white-space: nowrap;
 	}
 
-	kbd kbd {
-		padding: 0;
-		margin: 0;
-		border: 0;
-		background: transparent;
-		font: inherit;
-	}
-
-	kbd span {
+	.separator {
 		color: var(--dry-color-text-weak);
 	}
 </style>

package/dist/kbd/kbd.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	keys?: string[];
-	children?: Snippet;
+    keys?: string[];
+    children?: Snippet;
 }
-declare const Kbd: import('svelte').Component<Props, {}, ''>;
+declare const Kbd: import("svelte").Component<Props, {}, "">;
 type Kbd = ReturnType<typeof Kbd>;
 export default Kbd;

package/dist/label/label.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLLabelAttributes } from 'svelte/elements';
 interface Props extends HTMLLabelAttributes {
-	children: Snippet;
-	size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+    size?: 'sm' | 'md' | 'lg';
 }
-declare const Label: import('svelte').Component<Props, {}, ''>;
+declare const Label: import("svelte").Component<Props, {}, "">;
 type Label = ReturnType<typeof Label>;
 export default Label;

package/dist/link/link.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 interface Props extends HTMLAnchorAttributes {
-	external?: boolean;
-	disabled?: boolean;
-	underline?: 'always' | 'hover' | 'none';
-	children: Snippet;
+    external?: boolean;
+    disabled?: boolean;
+    underline?: 'always' | 'hover' | 'none';
+    children: Snippet;
 }
-declare const Link: import('svelte').Component<Props, {}, ''>;
+declare const Link: import("svelte").Component<Props, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;

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

@@ -1,22 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	placement?:
-		| 'top'
-		| 'top-start'
-		| 'top-end'
-		| 'bottom'
-		| 'bottom-start'
-		| 'bottom-end'
-		| 'left'
-		| 'left-start'
-		| 'left-end'
-		| 'right'
-		| 'right-start'
-		| 'right-end';
-	offset?: number;
-	children: Snippet;
+    placement?: Placement;
+    offset?: number;
+    children: Snippet;
 }
-declare const LinkPreviewContent: import('svelte').Component<Props, {}, ''>;
+declare const LinkPreviewContent: import("svelte").Component<Props, {}, "">;
 type LinkPreviewContent = ReturnType<typeof LinkPreviewContent>;
 export default LinkPreviewContent;

package/dist/link-preview/link-preview-root.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 interface Props {
-	open?: boolean;
-	openDelay?: number;
-	closeDelay?: number;
-	children: Snippet;
+    open?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+    children: Snippet;
 }
-declare const LinkPreviewRoot: import('svelte').Component<Props, {}, ''>;
+declare const LinkPreviewRoot: import("svelte").Component<Props, {}, "open">;
 type LinkPreviewRoot = ReturnType<typeof LinkPreviewRoot>;
 export default LinkPreviewRoot;

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

@@ -3,11 +3,12 @@
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import { getLinkPreviewCtx } from './context.svelte.js';
 
-	interface Props extends HTMLAnchorAttributes {
+	interface Props extends Omit<HTMLAnchorAttributes, 'href'> {
+		href: string;
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { href, class: className, children, ...rest }: Props = $props();
 
 	const ctx = getLinkPreviewCtx();
 
@@ -22,6 +23,7 @@
 
 <a
 	bind:this={anchorEl}
+	{href}
 	id={ctx.triggerId}
 	data-link-preview-trigger
 	aria-describedby={ctx.open ? ctx.contentId : undefined}

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

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
-interface Props extends HTMLAnchorAttributes {
-	children: Snippet;
+interface Props extends Omit<HTMLAnchorAttributes, 'href'> {
+    href: string;
+    children: Snippet;
 }
-declare const LinkPreviewTrigger: import('svelte').Component<Props, {}, ''>;
+declare const LinkPreviewTrigger: import("svelte").Component<Props, {}, "">;
 type LinkPreviewTrigger = ReturnType<typeof LinkPreviewTrigger>;
 export default LinkPreviewTrigger;

package/dist/list/list-item-icon.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const ListItemIcon: import('svelte').Component<Props, {}, ''>;
+declare const ListItemIcon: import("svelte").Component<Props, {}, "">;
 type ListItemIcon = ReturnType<typeof ListItemIcon>;
 export default ListItemIcon;

package/dist/list/list-item-text.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	primary?: Snippet;
-	secondary?: Snippet;
-	children?: Snippet;
+    primary?: Snippet;
+    secondary?: Snippet;
+    children?: Snippet;
 }
-declare const ListItemText: import('svelte').Component<Props, {}, ''>;
+declare const ListItemText: import("svelte").Component<Props, {}, "">;
 type ListItemText = ReturnType<typeof ListItemText>;
 export default ListItemText;

package/dist/list/list-item.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLLIElement> {
-	interactive?: boolean;
-	disabled?: boolean;
-	children: Snippet;
+    interactive?: boolean;
+    disabled?: boolean;
+    children: Snippet;
 }
-declare const ListItem: import('svelte').Component<Props, {}, ''>;
+declare const ListItem: import("svelte").Component<Props, {}, "">;
 type ListItem = ReturnType<typeof ListItem>;
 export default ListItem;

package/dist/list/list-root.svelte

@@ -45,7 +45,10 @@
 		--dry-list-color: var(--dry-color-text-strong);
 		--dry-list-item-padding: var(--dry-space-2_5) var(--dry-space-3);
 		--dry-list-item-gap: var(--dry-space-3);
-		--dry-list-item-radius: var(--dry-radius-md);
+		--dry-list-item-radius: min(
+			var(--dry-control-radius, var(--dry-radius-md)),
+			var(--dry-space-4)
+		);
 		--dry-list-item-hover-bg: color-mix(in srgb, var(--dry-color-fill-brand) 8%, transparent);
 		--dry-list-item-active-bg: color-mix(in srgb, var(--dry-color-fill-brand) 12%, transparent);
 		--dry-list-item-icon-color: var(--dry-color-icon-weak, var(--dry-color-text-weak));

package/dist/list/list-root.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLUListElement> {
-	dense?: boolean;
-	disablePadding?: boolean;
-	children: Snippet;
+    dense?: boolean;
+    disablePadding?: boolean;
+    children: Snippet;
 }
-declare const ListRoot: import('svelte').Component<Props, {}, ''>;
+declare const ListRoot: import("svelte").Component<Props, {}, "">;
 type ListRoot = ReturnType<typeof ListRoot>;
 export default ListRoot;

package/dist/list/list-subheader.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLLIElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const ListSubheader: import('svelte').Component<Props, {}, ''>;
+declare const ListSubheader: import("svelte").Component<Props, {}, "">;
 type ListSubheader = ReturnType<typeof ListSubheader>;
 export default ListSubheader;

package/dist/listbox/listbox-item.svelte

@@ -44,7 +44,10 @@
 	[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: var(--dry-radius-md);
+		--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);

package/dist/listbox/listbox-item.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ListboxItemProps } from './index.js';
-declare const ListboxItem: import('svelte').Component<ListboxItemProps, {}, ''>;
+declare const ListboxItem: import("svelte").Component<ListboxItemProps, {}, "">;
 type ListboxItem = ReturnType<typeof ListboxItem>;
 export default ListboxItem;