@dryui/ui 1.1.5 → 1.3.0

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

@@ -50,4 +50,10 @@
 	svg[data-indicator].open {
 		transform: rotate(180deg);
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		svg[data-indicator] {
+			transition: none;
+		}
+	}
 </style>

package/dist/alert/alert.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 	import CloseButtonBase from '../internal/close-button-base.svelte';
 
 	export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
@@ -39,7 +40,7 @@
 	<div
 		role="alert"
 		data-alert
-		data-variant={variant}
+		{...variantAttrs({ variant })}
 		data-dismissible={dismissible || undefined}
 		class={className}
 		{...rest}

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

@@ -2,85 +2,25 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getAlertDialogCtx } from './context.svelte.js';
+	import ModalContent from '../internal/modal-content.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDialogElement> {
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { children, ...rest }: Props = $props();
 
 	const ctx = getAlertDialogCtx();
-
-	let dialogEl = $state<HTMLDialogElement>();
-
-	$effect(() => {
-		if (ctx.open && dialogEl && !dialogEl.open) {
-			dialogEl.showModal();
-		}
-		if (!ctx.open && dialogEl?.open) {
-			dialogEl.close();
-		}
-	});
 </script>
 
-<dialog
-	bind:this={dialogEl}
-	data-alert-dialog-content
+<ModalContent
+	{ctx}
+	variant="alert-dialog"
+	side="center"
 	role="alertdialog"
-	aria-labelledby={ctx.headerId}
-	data-state={ctx.open ? 'open' : 'closed'}
-	onclose={() => ctx.close()}
-	oncancel={(e) => e.preventDefault()}
-	class={className}
+	dismissOnEscape={false}
+	dismissOnBackdropClick={false}
 	{...rest}
 >
 	{@render children()}
-</dialog>
-
-<style>
-	[data-alert-dialog-content] {
-		--dry-dialog-bg: var(--dry-color-bg-overlay);
-		--dry-dialog-border: var(--dry-color-stroke-weak);
-		--dry-dialog-radius: var(--dry-radius-xl);
-		--dry-dialog-shadow: var(--dry-shadow-overlay);
-		--dry-dialog-padding: var(--dry-space-6);
-		--dry-dialog-max-width: 32rem;
-
-		border: 1px solid var(--dry-dialog-border);
-		border-radius: var(--dry-dialog-radius);
-		background: var(--dry-dialog-bg);
-		color: var(--dry-color-text-strong);
-		box-shadow: var(--dry-dialog-shadow);
-		grid-template-columns: min(var(--dry-dialog-max-width), 90vw);
-		margin: auto;
-		padding: 0;
-		max-height: 85vh;
-		display: grid;
-
-		transition:
-			opacity var(--dry-duration-normal) var(--dry-ease-spring-snappy),
-			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
-	}
-
-	[data-alert-dialog-content]:not([open]) {
-		display: none;
-	}
-
-	[data-alert-dialog-content]::backdrop {
-		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop-strong));
-		backdrop-filter: blur(var(--dry-overlay-blur, 4px));
-		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 4px));
-	}
-
-	[data-alert-dialog-content][data-state='open'] {
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
-
-	@starting-style {
-		[data-alert-dialog-content][open] {
-			opacity: 0;
-			transform: scale(var(--dry-motion-scale-enter)) translateY(var(--dry-motion-distance-sm));
-		}
-	}
-</style>
+</ModalContent>

package/dist/alpha-slider/alpha-slider-input.svelte

@@ -77,6 +77,8 @@
 
 	[data-alpha-slider-track-wrapper] {
 		position: relative;
+		display: grid;
+		grid-template-columns: 1fr;
 		height: var(--dry-space-4);
 		border-radius: var(--dry-radius-full);
 		overflow: hidden;
@@ -101,6 +103,8 @@
 
 	[data-alpha-slider-input] {
 		position: relative;
+		grid-column: 1;
+		grid-row: 1;
 		height: 100%;
 		appearance: none;
 		background: transparent;

package/dist/avatar/avatar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		src?: string;
@@ -60,8 +61,7 @@
 			role="img"
 			aria-label={alt}
 			data-avatar
-			data-size={size}
-			data-shape={shape}
+			{...variantAttrs({ size, shape })}
 			class={className}
 			{...rest}
 		>
@@ -85,8 +85,7 @@
 		role="img"
 		aria-label={alt}
 		data-avatar
-		data-size={size}
-		data-shape={shape}
+		{...variantAttrs({ size, shape })}
 		class={className}
 		{...rest}
 	>

package/dist/backdrop/backdrop.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { Portal } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		open?: boolean;
@@ -12,15 +13,17 @@
 </script>
 
 {#if open}
-	<div
-		data-backdrop
-		data-invisible={invisible || undefined}
-		aria-hidden={children ? undefined : true}
-		class={className}
-		{...rest}
-	>
-		{#if children}{@render children()}{/if}
-	</div>
+	<Portal>
+		<div
+			data-backdrop
+			data-invisible={invisible || undefined}
+			aria-hidden={children ? undefined : true}
+			class={className}
+			{...rest}
+		>
+			{#if children}{@render children()}{/if}
+		</div>
+	</Portal>
 {/if}
 
 <style>

package/dist/badge/badge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 	import { resolveAlias } from '../internal/color-aliases.js';
 	import type { BadgeColor } from './index.js';
 
@@ -33,11 +34,13 @@
 		class={className}
 		data-badge={isDot ? undefined : ''}
 		data-dot={isDot ? '' : undefined}
-		data-variant={isDot ? undefined : variant}
-		data-color={resolvedColor}
-		data-size={isDot ? undefined : size}
-		data-icon-only={hasIcon ? '' : undefined}
-		data-pulse={pulse ? '' : undefined}
+		{...variantAttrs({
+			variant: isDot ? undefined : variant,
+			color: resolvedColor,
+			size: isDot ? undefined : size,
+			'data-icon-only': hasIcon ? '' : undefined,
+			'data-pulse': pulse ? '' : undefined
+		})}
 		{...rest}
 	>
 		{#if isDot}
@@ -58,27 +61,32 @@
 
 	[data-badge] {
 		/* Component tokens (Tier 3) */
-		--dry-badge-default-bg: var(--dry-color-fill);
-		--dry-badge-default-color: var(--dry-color-text-weak);
-		--dry-badge-bg: var(--dry-badge-default-bg);
-		--dry-badge-color: var(--dry-badge-default-color);
-		--dry-badge-border: transparent;
-		--dry-badge-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		--dry-badge-padding-x: var(--dry-space-2);
-		--dry-badge-padding-y: var(--dry-space-0_5);
-		--dry-badge-radius: var(--dry-radius-full);
+		--_badge-bg-default: var(--dry-color-fill);
+		--_badge-color-default: var(--dry-color-text-weak);
+		--_badge-border-default: transparent;
+		--_badge-font-size-default: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--_badge-padding-x-default: var(--dry-space-2);
+		--_badge-padding-y-default: var(--dry-space-0_5);
+		--_badge-radius-default: var(--dry-radius-full);
+		--_badge-bg: var(--dry-badge-bg, var(--_badge-bg-default));
+		--_badge-color: var(--dry-badge-color, var(--_badge-color-default));
+		--_badge-border: var(--dry-badge-border, var(--_badge-border-default));
+		--_badge-font-size: var(--dry-badge-font-size, var(--_badge-font-size-default));
+		--_badge-padding-x: var(--dry-badge-padding-x, var(--_badge-padding-x-default));
+		--_badge-padding-y: var(--dry-badge-padding-y, var(--_badge-padding-y-default));
+		--_badge-radius: var(--dry-badge-radius, var(--_badge-radius-default));
 
 		display: inline-grid;
 		place-items: center;
-		padding: var(--dry-badge-padding-y) var(--dry-badge-padding-x);
-		font-size: var(--dry-badge-font-size);
+		padding: var(--_badge-padding-y) var(--_badge-padding-x);
+		font-size: var(--_badge-font-size);
 		font-family: var(--dry-font-sans);
 		font-weight: 500;
 		line-height: var(--dry-type-tiny-leading, var(--dry-text-xs-leading));
-		color: var(--dry-badge-color);
-		background: var(--dry-badge-bg);
-		border: 1px solid var(--dry-badge-border);
-		border-radius: var(--dry-badge-radius);
+		color: var(--_badge-color);
+		background: var(--_badge-bg);
+		border: 1px solid var(--_badge-border);
+		border-radius: var(--_badge-radius);
 		white-space: nowrap;
 		user-select: none;
 	}
@@ -86,105 +94,109 @@
 	/* ── Sizes ────────────────────────────────────────────────────────────────── */
 
 	[data-size='sm'] {
-		--dry-badge-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		--dry-badge-padding-x: var(--dry-space-2);
-		--dry-badge-padding-y: var(--dry-space-0_5);
+		--_badge-font-size-default: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--_badge-padding-x-default: var(--dry-space-2);
+		--_badge-padding-y-default: var(--dry-space-0_5);
 	}
 
 	[data-size='md'] {
-		--dry-badge-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		--dry-badge-padding-x: var(--dry-space-2_5);
-		--dry-badge-padding-y: var(--dry-space-0_5);
+		--_badge-font-size-default: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--_badge-padding-x-default: var(--dry-space-2_5);
+		--_badge-padding-y-default: var(--dry-space-0_5);
 	}
 
 	/* ── Variant: solid ───────────────────────────────────────────────────────── */
 
 	[data-variant='solid'] {
-		--dry-badge-border: transparent;
+		--_badge-border-default: transparent;
 	}
 
 	[data-variant='solid'][data-color='gray'] {
-		--dry-badge-bg: var(--dry-color-fill-inverse);
-		--dry-badge-color: var(--dry-color-text-inverse);
+		--_badge-bg-default: var(--dry-color-fill-inverse);
+		--_badge-color-default: var(--dry-color-text-inverse);
 	}
 
 	[data-variant='solid'][data-color='blue'] {
-		--dry-badge-bg: var(--dry-color-fill-brand);
-		--dry-badge-color: var(--dry-color-on-brand);
+		--_badge-bg-default: var(--dry-color-fill-brand);
+		--_badge-color-default: var(--dry-color-on-brand);
 	}
 
 	[data-variant='solid'][data-color='red'] {
-		--dry-badge-bg: var(--dry-color-fill-error);
-		--dry-badge-color: var(--dry-color-on-error);
+		--_badge-bg-default: var(--dry-color-fill-error);
+		--_badge-color-default: var(--dry-color-on-error);
 	}
 
 	[data-variant='solid'][data-color='green'] {
-		--dry-badge-bg: var(--dry-color-fill-success);
-		--dry-badge-color: var(--dry-color-on-success);
+		--_badge-bg-default: var(--dry-color-fill-success);
+		--_badge-color-default: var(--dry-color-on-success);
 	}
 
 	[data-variant='solid'][data-color='yellow'] {
-		--dry-badge-bg: var(--dry-color-fill-yellow);
-		--dry-badge-color: var(--dry-color-on-warning);
+		--_badge-bg-default: var(--dry-color-fill-yellow);
+		--_badge-color-default: var(--dry-color-on-warning);
 	}
 
 	[data-variant='solid'][data-color='purple'] {
-		--dry-badge-bg: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
-		--dry-badge-color: var(--dry-color-on-brand);
+		--_badge-bg-default: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
+		--_badge-color-default: var(--dry-color-on-brand);
 	}
 
 	[data-variant='solid'][data-color='orange'] {
-		--dry-badge-bg: color-mix(
+		--_badge-bg-default: color-mix(
 			in srgb,
 			var(--dry-color-fill-warning) 70%,
 			var(--dry-color-fill-error)
 		);
-		--dry-badge-color: var(--dry-color-on-warning);
+		--_badge-color-default: var(--dry-color-on-warning);
 	}
 
 	/* ── Variant: outline ─────────────────────────────────────────────────────── */
 
 	[data-variant='outline'] {
-		--dry-badge-bg: transparent;
+		--_badge-bg-default: transparent;
 	}
 
 	[data-variant='outline'][data-color='gray'] {
-		--dry-badge-color: var(--dry-color-text-weak);
-		--dry-badge-border: var(--dry-color-stroke-weak);
+		--_badge-color-default: var(--dry-color-text-weak);
+		--_badge-border-default: var(--dry-color-stroke-weak);
 	}
 
 	[data-variant='outline'][data-color='blue'] {
-		--dry-badge-color: var(--dry-color-text-brand);
-		--dry-badge-border: var(--dry-color-stroke-brand);
+		--_badge-color-default: var(--dry-color-text-brand);
+		--_badge-border-default: var(--dry-color-stroke-brand);
 	}
 
 	[data-variant='outline'][data-color='red'] {
-		--dry-badge-color: var(--dry-color-text-error);
-		--dry-badge-border: var(--dry-color-stroke-error);
+		--_badge-color-default: var(--dry-color-text-error);
+		--_badge-border-default: var(--dry-color-stroke-error);
 	}
 
 	[data-variant='outline'][data-color='green'] {
-		--dry-badge-color: var(--dry-color-text-success);
-		--dry-badge-border: var(--dry-color-stroke-success);
+		--_badge-color-default: var(--dry-color-text-success);
+		--_badge-border-default: var(--dry-color-stroke-success);
 	}
 
 	[data-variant='outline'][data-color='yellow'] {
-		--dry-badge-color: var(--dry-color-text-warning);
-		--dry-badge-border: var(--dry-color-stroke-warning);
+		--_badge-color-default: var(--dry-color-text-warning);
+		--_badge-border-default: var(--dry-color-stroke-warning);
 	}
 
 	[data-variant='outline'][data-color='purple'] {
-		--dry-badge-color: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
-		--dry-badge-border: color-mix(in srgb, var(--dry-color-stroke-brand) 60%, hsl(280, 50%, 70%));
+		--_badge-color-default: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
+		--_badge-border-default: color-mix(
+			in srgb,
+			var(--dry-color-stroke-brand) 60%,
+			hsl(280, 50%, 70%)
+		);
 	}
 
 	[data-variant='outline'][data-color='orange'] {
-		--dry-badge-color: color-mix(
+		--_badge-color-default: color-mix(
 			in srgb,
 			var(--dry-color-text-warning) 60%,
 			var(--dry-color-text-error)
 		);
-		--dry-badge-border: color-mix(
+		--_badge-border-default: color-mix(
 			in srgb,
 			var(--dry-color-stroke-warning) 60%,
 			var(--dry-color-stroke-error)
@@ -194,51 +206,51 @@
 	/* ── Variant: soft ────────────────────────────────────────────────────────── */
 
 	[data-variant='soft'] {
-		--dry-badge-border: var(--dry-color-stroke-weak);
+		--_badge-border-default: var(--dry-color-stroke-weak);
 	}
 
 	[data-variant='soft'][data-color='gray'] {
-		--dry-badge-bg: var(--dry-color-fill);
-		--dry-badge-color: var(--dry-color-text-weak);
+		--_badge-bg-default: var(--dry-color-fill);
+		--_badge-color-default: var(--dry-color-text-weak);
 	}
 
 	[data-variant='soft'][data-color='blue'] {
-		--dry-badge-bg: var(--dry-color-fill-brand-weak);
-		--dry-badge-color: var(--dry-color-text-brand);
+		--_badge-bg-default: var(--dry-color-fill-brand-weak);
+		--_badge-color-default: var(--dry-color-text-brand);
 	}
 
 	[data-variant='soft'][data-color='red'] {
-		--dry-badge-bg: var(--dry-color-fill-error-weak);
-		--dry-badge-color: var(--dry-color-text-error);
-		--dry-badge-border: var(--dry-color-stroke-error-weak);
+		--_badge-bg-default: var(--dry-color-fill-error-weak);
+		--_badge-color-default: var(--dry-color-text-error);
+		--_badge-border-default: var(--dry-color-stroke-error-weak);
 	}
 
 	[data-variant='soft'][data-color='green'] {
-		--dry-badge-bg: var(--dry-color-fill-success-weak);
-		--dry-badge-color: var(--dry-color-text-success);
+		--_badge-bg-default: var(--dry-color-fill-success-weak);
+		--_badge-color-default: var(--dry-color-text-success);
 	}
 
 	[data-variant='soft'][data-color='yellow'] {
-		--dry-badge-bg: var(--dry-color-fill-warning-weak);
-		--dry-badge-color: var(--dry-color-text-warning);
+		--_badge-bg-default: var(--dry-color-fill-warning-weak);
+		--_badge-color-default: var(--dry-color-text-warning);
 	}
 
 	[data-variant='soft'][data-color='purple'] {
-		--dry-badge-bg: color-mix(
+		--_badge-bg-default: color-mix(
 			in srgb,
 			var(--dry-color-fill-brand-weak) 70%,
 			hsl(280, 65%, 55%, 0.1)
 		);
-		--dry-badge-color: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
+		--_badge-color-default: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
 	}
 
 	[data-variant='soft'][data-color='orange'] {
-		--dry-badge-bg: color-mix(
+		--_badge-bg-default: color-mix(
 			in srgb,
 			var(--dry-color-fill-warning-weak) 50%,
 			var(--dry-color-fill-error-weak)
 		);
-		--dry-badge-color: color-mix(
+		--_badge-color-default: color-mix(
 			in srgb,
 			var(--dry-color-text-warning) 50%,
 			var(--dry-color-text-error)

package/dist/button/button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 	import { getButtonGroupCtx } from '../button-group/context.svelte.js';
 
 	const groupCtx = getButtonGroupCtx();
@@ -84,9 +85,7 @@
 			aria-disabled={disabled || undefined}
 			data-disabled={disabled || undefined}
 			tabindex={disabled ? -1 : undefined}
-			data-variant={variant}
-			data-size={size}
-			data-color={color}
+			{...variantAttrs({ variant, size, color })}
 			class={className}
 			onclick={handleLinkClick}
 			{@attach attachRef}
@@ -98,9 +97,7 @@
 			{type}
 			{disabled}
 			data-disabled={disabled || undefined}
-			data-variant={variant}
-			data-size={size}
-			data-color={color}
+			{...variantAttrs({ variant, size, color })}
 			class={className}
 			{onclick}
 			{...rest}

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 { variantAttrs } from '@dryui/primitives';
 	import { setButtonGroupCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -27,8 +28,7 @@
 <div
 	role="group"
 	data-button-group
-	data-orientation={orientation}
-	data-size={size}
+	{...variantAttrs({ orientation, size })}
 	class={className}
 	{...rest}
 >

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

@@ -48,4 +48,4 @@
 	};
 </script>
 
-<CalendarGridButton {adapter} {...props} />
+<CalendarGridButton {adapter} hideHeader {...props} />

package/dist/card/card-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLElement> {
 		as?: 'div' | 'button';
@@ -31,8 +32,10 @@
 		data-card
 		data-selected={selected ? '' : undefined}
 		data-orientation={orientation}
-		data-variant={variant !== 'default' ? variant : undefined}
-		data-size={size !== 'default' ? size : undefined}
+		{...variantAttrs({
+			variant: variant !== 'default' ? variant : undefined,
+			size: size !== 'default' ? size : undefined
+		})}
 		data-disabled={disabled ? '' : undefined}
 		{disabled}
 		aria-disabled={disabled || undefined}
@@ -47,8 +50,10 @@
 		data-card
 		data-selected={selected ? '' : undefined}
 		data-orientation={orientation}
-		data-variant={variant !== 'default' ? variant : undefined}
-		data-size={size !== 'default' ? size : undefined}
+		{...variantAttrs({
+			variant: variant !== 'default' ? variant : undefined,
+			size: size !== 'default' ? size : undefined
+		})}
 		data-disabled={disabled ? '' : undefined}
 		aria-disabled={disabled || undefined}
 		{...rest}

package/dist/chip-group/chip-group-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 	import { setChipGroupCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -51,8 +52,7 @@
 <div
 	role="group"
 	data-chip-group
-	data-orientation={orientation}
-	data-size={size}
+	{...variantAttrs({ orientation, size })}
 	class={className}
 	{...rest}
 >

package/dist/code-block/code-block-button.svelte

@@ -20,7 +20,7 @@
 	}
 
 	let {
-		code,
+		code = '',
 		language,
 		showLineNumbers = false,
 		showCopyButton = true,
@@ -122,7 +122,7 @@
 		<span class="copy-btn-slot">
 			<Button
 				variant="trigger"
-				size="icon-sm"
+				size="sm"
 				type="button"
 				data-code-block-copy
 				onclick={handleCopy}
@@ -141,6 +141,7 @@
 					>
 						<polyline points="20 6 9 17 4 12"></polyline>
 					</svg>
+					<span>Copied</span>
 				{:else}
 					<svg
 						width="16"
@@ -155,6 +156,7 @@
 						<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
 						<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
 					</svg>
+					<span>Copy</span>
 				{/if}
 			</Button>
 		</span>
@@ -207,6 +209,8 @@
 		z-index: 1;
 		display: inline-grid;
 		color: var(--dry-code-copy-color);
+		background: var(--dry-code-bg);
+		border-radius: var(--dry-radius-md);
 		--dry-btn-color: var(--dry-code-copy-color);
 	}