@dryui/ui 0.1.2 → 0.1.4

package/dist/accordion/accordion-trigger.svelte

@@ -26,6 +26,7 @@
 	{...rest}
 >
 	{@render children()}
+	<svg data-indicator xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
 </button>
 
 <style>
@@ -33,6 +34,7 @@
 		display: grid;
 		grid-template-columns: 1fr 1rem;
 		align-items: center;
+		gap: var(--dry-space-2);
 		padding: var(--dry-space-4);
 		background: none;
 		border: none;
@@ -65,17 +67,14 @@
 			cursor: not-allowed;
 		}
 
-		&[data-state='open']::after {
+		&[data-state='open'] [data-indicator] {
 			transform: rotate(180deg);
 		}
 
-		&::after {
-			content: '';
+		& [data-indicator] {
 			height: 1rem;
 			aspect-ratio: 1;
-			background: currentColor;
-			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-			mask-size: contain;
+			opacity: 0.5;
 			transition: transform var(--dry-duration-fast) var(--dry-ease-default);
 		}
 	}

package/dist/alert-dialog/alert-dialog-action.svelte

@@ -15,24 +15,60 @@
 
 <style>
 	[data-alert-dialog-action] {
+		--dry-btn-accent: var(--dry-color-fill-error);
+		--dry-btn-accent-hover: var(--dry-color-fill-error-hover);
+		--dry-btn-accent-active: var(--dry-color-fill-error-hover);
+		--dry-btn-on-accent: var(--dry-color-on-error);
+		--dry-btn-border: transparent;
+
 		cursor: pointer;
-		background: var(--dry-color-fill-error);
-		color: var(--dry-color-on-brand);
-		border: none;
-		padding: var(--dry-space-2) var(--dry-space-4);
+		background: var(--dry-btn-accent);
+		color: var(--dry-btn-on-accent);
+		border: 1px solid var(--dry-btn-border);
+		padding: var(--dry-space-2_5) var(--dry-space-4);
 		border-radius: var(--dry-radius-md);
+		box-shadow: var(--dry-shadow-raised);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		font-weight: 500;
-		min-height: var(--dry-space-11);
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+		min-height: var(--dry-space-12);
 		display: inline-grid;
+		grid-auto-flow: column;
 		place-items: center;
+		gap: var(--dry-space-2);
+		text-decoration: none;
+		white-space: nowrap;
+		user-select: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-alert-dialog-action]:hover {
-		background: var(--dry-color-fill-error-hover);
+		background: var(--dry-btn-accent-hover);
+	}
+
+	[data-alert-dialog-action]:active:not(:disabled) {
+		background: var(--dry-btn-accent-active);
+		transform: translateY(1px);
 	}
 
 	[data-alert-dialog-action]:focus-visible {
 		outline: 2px solid var(--dry-color-focus-ring);
 		outline-offset: 2px;
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+
+	[data-alert-dialog-action]:disabled {
+		background: var(--dry-color-fill-disabled);
+		color: var(--dry-color-text-disabled);
+		border-color: var(--dry-color-stroke-disabled);
+		cursor: not-allowed;
+		box-shadow: none;
 	}
 </style>

package/dist/alert-dialog/alert-dialog-cancel.svelte

@@ -24,23 +24,62 @@
 
 <style>
 	[data-alert-dialog-cancel] {
+		--dry-btn-accent-fg: var(--dry-color-text-brand);
+		--dry-btn-accent-stroke: var(--dry-color-stroke-brand);
+
 		cursor: pointer;
-		background: none;
-		border: none;
-		padding: var(--dry-space-2);
-		color: var(--dry-color-text-weak);
+		background: transparent;
+		border: 1px solid var(--dry-btn-accent-stroke);
+		padding: var(--dry-space-2_5) var(--dry-space-4);
+		color: var(--dry-btn-accent-fg);
 		border-radius: var(--dry-radius-sm);
-		min-height: var(--dry-space-11);
+		box-shadow: var(--dry-shadow-raised);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		font-weight: 500;
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+		min-height: var(--dry-space-12);
 		display: inline-grid;
+		grid-auto-flow: column;
 		place-items: center;
+		gap: var(--dry-space-2);
+		text-decoration: none;
+		white-space: nowrap;
+		user-select: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-alert-dialog-cancel]:hover {
+		background: var(--dry-color-bg-alternate);
+		border-color: var(--dry-color-stroke-strong);
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-shadow-sm);
+	}
+
+	[data-alert-dialog-cancel]:active:not(:disabled) {
+		background: var(--dry-color-fill);
+		border-color: var(--dry-color-stroke-strong);
 		color: var(--dry-color-text-strong);
+		transform: translateY(1px);
 	}
 
 	[data-alert-dialog-cancel]:focus-visible {
 		outline: 2px solid var(--dry-color-focus-ring);
 		outline-offset: 2px;
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+
+	[data-alert-dialog-cancel]:disabled {
+		background: var(--dry-color-fill-disabled);
+		color: var(--dry-color-text-disabled);
+		border-color: var(--dry-color-stroke-disabled);
+		cursor: not-allowed;
+		box-shadow: none;
 	}
 </style>

package/dist/alert-dialog/alert-dialog-footer.svelte

@@ -22,7 +22,8 @@
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		gap: var(--dry-space-2);
-		justify-self: end;
+		gap: var(--dry-space-4);
+		justify-content: start;
+		justify-items: start;
 	}
 </style>

package/dist/aurora/aurora.svelte.d.ts

@@ -1,8 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { BlendMode } from '@dryui/primitives/aurora';
 interface Props extends HTMLAttributes<HTMLDivElement> {
 	palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
 	speed?: 'slow' | 'normal' | 'fast' | number;
+	intensity?: number;
+	waviness?: number;
+	colorSpace?: 'srgb' | 'oklch' | 'oklab';
+	blendMode?: BlendMode;
+	layerOpacity?: number;
 	children?: Snippet;
 }
 declare const Aurora: import('svelte').Component<Props, {}, ''>;

package/dist/beam/beam.svelte

@@ -19,7 +19,7 @@
 		angle = 45,
 		speed = 3,
 		intensity = 70,
-		blendMode = 'screen',
+		blendMode,
 		children,
 		class: className,
 		style,
@@ -31,26 +31,33 @@
 	const gradientString = $derived(
 		`linear-gradient(${angle}deg, transparent 0%, transparent calc(50% - ${width}px), ${color} 50%, transparent calc(50% + ${width}px), transparent 100%)`
 	);
+	const rootStyle = $derived.by(() => {
+		const declarations = [
+			style,
+			`--dry-beam-speed: ${speedValue}`,
+			`--dry-beam-intensity: ${clampedIntensity}`,
+			`--dry-beam-width: ${width}px`,
+			blendMode ? `--dry-beam-blend: ${blendMode}` : null
+		].filter(Boolean);
+		return declarations.join('; ');
+	});
+	const layerStyle = $derived(`background-image: ${gradientString};`);
 
 	function applyRootStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-beam-speed', speedValue);
-			node.style.setProperty('--dry-beam-intensity', clampedIntensity);
-			node.style.setProperty('--dry-beam-blend', blendMode);
-			node.style.setProperty('--dry-beam-width', `${width}px`);
+			node.style.cssText = rootStyle;
 		});
 	}
 
 	function applyLayerStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.setProperty('background-image', gradientString);
+			node.style.cssText = layerStyle;
 		});
 	}
 </script>
 
-<div data-beam class={className} {...rest} use:applyRootStyles>
-	<div data-beam-layer use:applyLayerStyles></div>
+<div data-beam class={className} {...rest} {@attach applyRootStyles}>
+	<div data-beam-layer {@attach applyLayerStyles}></div>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -69,7 +76,7 @@
 		pointer-events: none;
 		background-size: 300% 300%;
 		opacity: calc(var(--dry-beam-intensity, 70) / 100);
-		mix-blend-mode: var(--dry-beam-blend, screen);
+		mix-blend-mode: var(--dry-beam-blend, var(--dry-beam-default-blend, multiply));
 		filter: blur(calc(var(--dry-beam-width, 2px) * 2));
 		animation: beam-sweep var(--dry-beam-speed, 3s) ease-in-out infinite;
 	}

package/dist/button/button.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { getButtonGroupCtx } from '../button-group/context.svelte.js';
+
+	const groupCtx = getButtonGroupCtx();
 
 	interface Props extends HTMLButtonAttributes {
 		variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare';
@@ -47,7 +50,7 @@
 	}
 </script>
 
-<span class="wrapper">
+<span class="wrapper" data-in-group={groupCtx ? '' : undefined} data-group-orientation={groupCtx?.orientation}>
 	{#if href !== undefined}
 		<a
 			{...rest as AnchorRest}
@@ -357,4 +360,51 @@
 		--dry-btn-radius: var(--dry-radius-lg);
 		--dry-btn-font-size: var(--dry-type-heading-4-size, var(--dry-text-base-size));
 	}
+
+	/* ── Button-group integration ─────────────────────────────────────── */
+
+	.wrapper[data-in-group] :is(a, button) {
+		border-radius: 0;
+	}
+
+	/* Horizontal: first child gets left radii */
+	.wrapper[data-in-group][data-group-orientation='horizontal']:first-child :is(a, button) {
+		border-top-left-radius: var(--dry-button-group-radius);
+		border-bottom-left-radius: var(--dry-button-group-radius);
+	}
+
+	/* Horizontal: last child gets right radii */
+	.wrapper[data-in-group][data-group-orientation='horizontal']:last-child :is(a, button) {
+		border-top-right-radius: var(--dry-button-group-radius);
+		border-bottom-right-radius: var(--dry-button-group-radius);
+	}
+
+	/* Horizontal: non-first child removes inline-start border */
+	.wrapper[data-in-group][data-group-orientation='horizontal']:not(:first-child) :is(a, button) {
+		border-inline-start: 0;
+	}
+
+	/* Vertical: first child gets top radii */
+	.wrapper[data-in-group][data-group-orientation='vertical']:first-child :is(a, button) {
+		border-top-left-radius: var(--dry-button-group-radius);
+		border-top-right-radius: var(--dry-button-group-radius);
+	}
+
+	/* Vertical: last child gets bottom radii */
+	.wrapper[data-in-group][data-group-orientation='vertical']:last-child :is(a, button) {
+		border-bottom-left-radius: var(--dry-button-group-radius);
+		border-bottom-right-radius: var(--dry-button-group-radius);
+	}
+
+	/* Vertical: non-first child removes block-start border */
+	.wrapper[data-in-group][data-group-orientation='vertical']:not(:first-child) :is(a, button) {
+		border-block-start: 0;
+	}
+
+	/* Hover/focus z-index for grouped buttons */
+	.wrapper[data-in-group]:hover :is(a, button),
+	.wrapper[data-in-group]:focus-within :is(a, button) {
+		z-index: var(--dry-button-group-hover-z-index);
+		position: relative;
+	}
 </style>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { setButtonGroupCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		orientation?: 'horizontal' | 'vertical';
@@ -15,6 +16,12 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	setButtonGroupCtx({
+		get orientation() {
+			return orientation;
+		}
+	});
 </script>
 
 <div
@@ -39,68 +46,6 @@
 
 	[data-button-group][data-orientation='horizontal'] {
 		grid-auto-flow: column;
-
-		& > :where(button, a, span),
-		& > :where(span) > :where(button, a) {
-			border-radius: 0;
-		}
-
-		& > :where(button, a):first-child,
-		& > :where(span):first-child > :where(button, a) {
-			border-top-left-radius: var(--dry-button-group-radius);
-			border-bottom-left-radius: var(--dry-button-group-radius);
-		}
-
-		& > :where(button, a):last-child,
-		& > :where(span):last-child > :where(button, a) {
-			border-top-right-radius: var(--dry-button-group-radius);
-			border-bottom-right-radius: var(--dry-button-group-radius);
-		}
-
-		& > :where(button, a):not(:first-child),
-		& > :where(span):not(:first-child) > :where(button, a) {
-			border-inline-start: 0;
-		}
-
-		& > :where(button, a):hover,
-		& > :where(button, a):focus-visible,
-		& > :where(span):hover > :where(button, a),
-		& > :where(span):focus-within > :where(button, a) {
-			z-index: var(--dry-button-group-hover-z-index);
-			position: relative;
-		}
-	}
-
-	[data-button-group][data-orientation='vertical'] {
-		& > :where(button, a, span),
-		& > :where(span) > :where(button, a) {
-			border-radius: 0;
-		}
-
-		& > :where(button, a):first-child,
-		& > :where(span):first-child > :where(button, a) {
-			border-top-left-radius: var(--dry-button-group-radius);
-			border-top-right-radius: var(--dry-button-group-radius);
-		}
-
-		& > :where(button, a):last-child,
-		& > :where(span):last-child > :where(button, a) {
-			border-bottom-left-radius: var(--dry-button-group-radius);
-			border-bottom-right-radius: var(--dry-button-group-radius);
-		}
-
-		& > :where(button, a):not(:first-child),
-		& > :where(span):not(:first-child) > :where(button, a) {
-			border-block-start: 0;
-		}
-
-		& > :where(button, a):hover,
-		& > :where(button, a):focus-visible,
-		& > :where(span):hover > :where(button, a),
-		& > :where(span):focus-within > :where(button, a) {
-			z-index: var(--dry-button-group-hover-z-index);
-			position: relative;
-		}
 	}
 
 	[data-button-group][data-size='sm'] {

package/dist/button-group/context.svelte.d.ts

@@ -0,0 +1,5 @@
+export interface ButtonGroupContext {
+    readonly orientation: 'horizontal' | 'vertical';
+}
+export declare function setButtonGroupCtx(ctx: ButtonGroupContext): ButtonGroupContext;
+export declare function getButtonGroupCtx(): ButtonGroupContext | undefined;

package/dist/button-group/context.svelte.js

@@ -0,0 +1,11 @@
+import { getContext, setContext, hasContext } from 'svelte';
+const KEY = Symbol('button-group');
+export function setButtonGroupCtx(ctx) {
+    setContext(KEY, ctx);
+    return ctx;
+}
+export function getButtonGroupCtx() {
+    if (!hasContext(KEY))
+        return undefined;
+    return getContext(KEY);
+}

package/dist/chromatic-aberration/chromatic-aberration.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { createId } from '@dryui/primitives';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -8,52 +9,92 @@
 		children: Snippet;
 	}
 
-	let instanceCounter = 0;
-
 	let { offset = 3, angle = 0, children, class: className, style, ...rest }: Props = $props();
 
-	const filterId = `dry-chromatic-${instanceCounter++}`;
+	const filterId = createId('dry-chromatic');
 
 	const offsetX = $derived(Math.round(offset * Math.cos((angle * Math.PI) / 180)));
 	const offsetY = $derived(Math.round(offset * Math.sin((angle * Math.PI) / 180)));
 
 	function applyFilterStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('filter', `url(#${filterId})`);
-		});
+		node.style.cssText = style || '';
+		node.style.setProperty('filter', `url(#${filterId})`);
 	}
 </script>
 
-<svg data-chromatic-aberration-svg aria-hidden="true">
+<svg data-chromatic-aberration-svg width="0" height="0" aria-hidden="true">
 	<defs>
 		<filter id={filterId} color-interpolation-filters="sRGB">
-			<feOffset in="SourceGraphic" dx={offsetX} dy={offsetY} result="red" />
+			<feOffset in="SourceGraphic" dx={offsetX} dy={offsetY} result="lightRed" />
 			<feColorMatrix
-				in="red"
+				in="lightRed"
 				type="matrix"
 				values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
-				result="redOnly"
+				result="lightRedOnly"
 			/>
-			<feOffset in="SourceGraphic" dx={-offsetX} dy={-offsetY} result="blue" />
+			<feOffset in="SourceGraphic" dx={-offsetX} dy={-offsetY} result="lightBlue" />
 			<feColorMatrix
-				in="blue"
+				in="lightBlue"
 				type="matrix"
 				values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
-				result="blueOnly"
+				result="lightBlueOnly"
+			/>
+			<feColorMatrix
+				in="SourceGraphic"
+				type="matrix"
+				values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"
+				result="lightGreenOnly"
 			/>
+			<feBlend in="lightRedOnly" in2="lightGreenOnly" mode="screen" result="lightRG" />
+			<feBlend in="lightRG" in2="lightBlueOnly" mode="screen" result="lightSplit" />
 			<feColorMatrix
 				in="SourceGraphic"
 				type="matrix"
+				values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0"
+				result="darkSource"
+			/>
+			<feOffset in="darkSource" dx={offsetX} dy={offsetY} result="darkRed" />
+			<feColorMatrix
+				in="darkRed"
+				type="matrix"
+				values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
+				result="darkRedOnly"
+			/>
+			<feOffset in="darkSource" dx={-offsetX} dy={-offsetY} result="darkBlue" />
+			<feColorMatrix
+				in="darkBlue"
+				type="matrix"
+				values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
+				result="darkBlueOnly"
+			/>
+			<feColorMatrix
+				in="darkSource"
+				type="matrix"
 				values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"
-				result="greenOnly"
+				result="darkGreenOnly"
+			/>
+			<feBlend in="darkRedOnly" in2="darkGreenOnly" mode="screen" result="darkRG" />
+			<feBlend in="darkRG" in2="darkBlueOnly" mode="screen" result="darkSplitInverted" />
+			<feColorMatrix
+				in="darkSplitInverted"
+				type="matrix"
+				values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0"
+				result="darkSplit"
 			/>
-			<feBlend in="redOnly" in2="greenOnly" mode="screen" result="rg" />
-			<feBlend in="rg" in2="blueOnly" mode="screen" />
+			<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lightMask" />
+			<feComponentTransfer in="lightMask" result="darkMask">
+				<feFuncA type="table" tableValues="1 0" />
+			</feComponentTransfer>
+			<feComposite in="lightSplit" in2="lightMask" operator="in" result="lightApplied" />
+			<feComposite in="darkSplit" in2="darkMask" operator="in" result="darkApplied" />
+			<feMerge>
+				<feMergeNode in="lightApplied" />
+				<feMergeNode in="darkApplied" />
+			</feMerge>
 		</filter>
 	</defs>
 </svg>
-<div data-chromatic-aberration class={className} use:applyFilterStyles {...rest}>
+<div data-chromatic-aberration class={className} {@attach applyFilterStyles} {...rest}>
 	{@render children()}
 </div>
 
@@ -62,6 +103,7 @@
 		position: absolute;
 		height: 0;
 		overflow: hidden;
+		pointer-events: none;
 	}
 
 	[data-chromatic-aberration] {

package/dist/collapsible/collapsible-trigger.svelte

@@ -25,6 +25,7 @@
 	{...rest}
 >
 	{@render children()}
+	<svg data-indicator xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
 </button>
 
 <style>
@@ -32,6 +33,7 @@
 		display: grid;
 		grid-template-columns: 1fr 1rem;
 		align-items: center;
+		gap: var(--dry-space-2);
 		padding: var(--dry-space-3) var(--dry-space-4);
 		background: none;
 		border: 1px solid var(--dry-color-stroke-weak);
@@ -41,19 +43,14 @@
 		cursor: pointer;
 		color: var(--dry-color-text-strong);
 
-		&::after {
-			content: '';
+		& [data-indicator] {
 			height: 1rem;
 			aspect-ratio: 1;
-			background: currentColor;
-			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-			mask-size: contain;
-			mask-repeat: no-repeat;
 			opacity: 0.5;
 			transition: transform var(--dry-duration-fast) var(--dry-ease-default);
 		}
 
-		&[data-state='open']::after {
+		&[data-state='open'] [data-indicator] {
 			transform: rotate(180deg);
 		}
 

package/dist/color-picker/color-picker-eyedropper.svelte

@@ -42,6 +42,8 @@
 	>
 		{#if children}
 			{@render children()}
+		{:else}
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3l8 8M3 9l8 8m-8-8 1.5 1.5M11 17l-1 4-4 1 1-4"/></svg>
 		{/if}
 	</button>
 {/if}
@@ -65,18 +67,9 @@
 			border-color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-cp-eyedropper]::before {
-		content: '';
-		display: inline-block;
-		height: 16px;
+	[data-cp-eyedropper] svg {
+		height: 1rem;
 		aspect-ratio: 1;
-		background-color: currentColor;
-		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3l8 8M3 9l8 8m-8-8 1.5 1.5M11 17l-1 4-4 1 1-4'/%3E%3C/svg%3E");
-		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3l8 8M3 9l8 8m-8-8 1.5 1.5M11 17l-1 4-4 1 1-4'/%3E%3C/svg%3E");
-		-webkit-mask-repeat: no-repeat;
-		mask-repeat: no-repeat;
-		-webkit-mask-size: contain;
-		mask-size: contain;
 	}
 
 	[data-cp-eyedropper]:hover:not([data-disabled]):not(:disabled) {

package/dist/combobox/combobox-group.svelte

@@ -27,7 +27,7 @@
 		letter-spacing: 0.05em;
 	}
 
-	[data-combobox-group] + [data-combobox-group] {
+	[data-combobox-group]:not(:first-of-type) {
 		border-top: 1px solid var(--dry-color-stroke-weak);
 		margin-top: var(--dry-space-1);
 		padding-top: var(--dry-space-1);