@dryui/ui 0.5.2 → 1.0.0

package/dist/alert/{alert-root.svelte → alert.svelte}

@@ -1,41 +1,41 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { setAlertCtx, type AlertVariant } from './context.svelte.js';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+
+	export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		variant?: AlertVariant;
 		dismissible?: boolean;
 		onDismiss?: () => void;
-		children: Snippet;
+		icon?: Snippet;
+		title?: Snippet;
+		description?: Snippet;
+		children?: Snippet;
 	}
 
 	let {
 		variant = 'info',
 		dismissible = false,
 		onDismiss,
-		class: className,
+		icon,
+		title,
+		description,
 		children,
+		class: className,
 		...rest
 	}: Props = $props();
 
-	let isDismissed = $state(false);
-
-	setAlertCtx({
-		get variant() {
-			return variant;
-		},
-		get isDismissed() {
-			return isDismissed;
-		},
-		dismiss() {
-			isDismissed = true;
-			onDismiss?.();
-		}
-	});
+	let dismissed = $state(false);
+
+	function handleDismiss() {
+		dismissed = true;
+		onDismiss?.();
+	}
 </script>
 
-{#if !isDismissed}
+{#if !dismissed}
 	<div
 		role="alert"
 		data-alert
@@ -44,7 +44,29 @@
 		class={className}
 		{...rest}
 	>
-		{@render children()}
+		{#if icon}
+			<span data-alert-icon aria-hidden="true">
+				{@render icon()}
+			</span>
+		{/if}
+
+		<div data-alert-body>
+			{#if title}
+				<h5 data-alert-title>{@render title()}</h5>
+			{/if}
+			{#if description}
+				<p data-alert-description>{@render description()}</p>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+
+		{#if dismissible}
+			<span data-alert-close>
+				<CloseButtonBase aria-label="Dismiss alert" onclick={handleDismiss} />
+			</span>
+		{/if}
 	</div>
 {/if}
 
@@ -66,7 +88,6 @@
 		grid-template-columns: auto minmax(0, 1fr) auto;
 		align-items: start;
 		column-gap: 0;
-		row-gap: var(--dry-space-1);
 		padding: var(--dry-alert-padding, var(--dry-space-6));
 		background: var(--dry-alert-bg);
 		border: 1px solid var(--dry-alert-border);
@@ -78,6 +99,43 @@
 		position: relative;
 	}
 
+	[data-alert-icon] {
+		grid-column: 1;
+		color: var(--dry-alert-icon-color);
+		display: grid;
+		align-items: center;
+		margin-top: var(--dry-space-0_5);
+		padding-inline-end: var(--dry-alert-gap, var(--dry-space-3));
+	}
+
+	[data-alert-body] {
+		grid-column: 2;
+		display: grid;
+		gap: var(--dry-space-1);
+	}
+
+	[data-alert-close] {
+		grid-column: 3;
+		display: inline-grid;
+		align-self: start;
+		margin-inline-start: var(--dry-alert-gap, var(--dry-space-3));
+	}
+
+	[data-alert-title] {
+		font-size: var(--dry-type-heading-4-size);
+		font-weight: 600;
+		line-height: var(--dry-type-small-leading);
+		color: var(--dry-color-text-strong);
+		margin: 0;
+	}
+
+	[data-alert-description] {
+		font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+		color: var(--dry-color-text-weak);
+		margin: 0;
+	}
+
 	/* ── Variants ──────────────────────────────────────────────────────────────── */
 
 	[data-variant='info'] {

package/dist/alert/alert.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: AlertVariant;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    icon?: Snippet;
+    title?: Snippet;
+    description?: Snippet;
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/alert/index.d.ts

@@ -1,14 +1,15 @@
-export type { AlertVariant } from './context.svelte.js';
-export type { AlertRootProps, AlertIconProps, AlertTitleProps, AlertDescriptionProps, AlertCloseProps } from '@dryui/primitives';
-import AlertRoot from './alert-root.svelte';
-import AlertIcon from './alert-icon.svelte';
-import AlertTitle from './alert-title.svelte';
-import AlertDescription from './alert-description.svelte';
-import AlertClose from './alert-button-close.svelte';
-export declare const Alert: {
-    Root: typeof AlertRoot;
-    Icon: typeof AlertIcon;
-    Title: typeof AlertTitle;
-    Description: typeof AlertDescription;
-    Close: typeof AlertClose;
-};
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import Alert from './alert.svelte';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: AlertVariant;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    icon?: Snippet;
+    title?: Snippet;
+    description?: Snippet;
+    children?: Snippet;
+}
+export { Alert };
+export default Alert;

package/dist/alert/index.js

@@ -1,12 +1,3 @@
-import AlertRoot from './alert-root.svelte';
-import AlertIcon from './alert-icon.svelte';
-import AlertTitle from './alert-title.svelte';
-import AlertDescription from './alert-description.svelte';
-import AlertClose from './alert-button-close.svelte';
-export const Alert = {
-    Root: AlertRoot,
-    Icon: AlertIcon,
-    Title: AlertTitle,
-    Description: AlertDescription,
-    Close: AlertClose
-};
+import Alert from './alert.svelte';
+export { Alert };
+export default Alert;

package/dist/breadcrumb/breadcrumb-link.svelte

@@ -46,7 +46,7 @@
 		}
 
 		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
+			outline: var(--dry-focus-ring);
 			outline-offset: 2px;
 			border-radius: var(--dry-radius-sm);
 		}

package/dist/button/button.svelte

@@ -188,7 +188,7 @@
 			opacity var(--dry-duration-fast) var(--dry-ease-default);
 
 		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
+			outline: var(--dry-focus-ring);
 			outline-offset: 2px;
 			box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
 		}

package/dist/card/card-root.svelte

@@ -115,7 +115,7 @@
 	}
 
 	button[data-card]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 
@@ -156,7 +156,7 @@
 	}
 
 	[data-card][data-variant='interactive']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 

package/dist/chromatic-shift/chromatic-shift.svelte

@@ -96,7 +96,7 @@
 		pointer-events: none;
 		transform: translate(var(--dry-chromatic-offset), 0);
 		filter: saturate(2) hue-rotate(-30deg);
-		transition: transform var(--dry-duration-fast, 120ms) var(--dry-ease-out, ease);
+		transition: transform var(--dry-duration-fast) var(--dry-ease-out);
 	}
 
 	[data-chromatic-shift][data-active]::after {
@@ -110,7 +110,7 @@
 		pointer-events: none;
 		transform: translate(calc(var(--dry-chromatic-offset) * -1), 0);
 		filter: saturate(2) hue-rotate(30deg);
-		transition: transform var(--dry-duration-fast, 120ms) var(--dry-ease-out, ease);
+		transition: transform var(--dry-duration-fast) var(--dry-ease-out);
 	}
 
 	[data-chromatic-shift][data-channels='rgb'][data-active] {

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

@@ -318,7 +318,7 @@
 		text-decoration: none;
 		cursor: pointer;
 		border-radius: var(--dry-radius-sm);
-		transition: background var(--dry-duration-fast, 100ms);
+		transition: background var(--dry-duration-fast) var(--dry-ease-default);
 
 		&:hover {
 			background: color-mix(in srgb, currentColor 15%, transparent);

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

@@ -154,12 +154,12 @@
 	}
 
 	[data-cp-area]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 
 	[data-cp-area][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 

package/dist/color-picker/color-picker-channel-input.svelte

@@ -73,13 +73,13 @@
 	}
 
 	[data-cp-input]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -1px;
 		border-color: var(--dry-color-focus-ring);
 	}
 
 	[data-cp-input][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 </style>

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

@@ -133,12 +133,12 @@
 	}
 
 	[data-cp-slider]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 
 	[data-cp-slider][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 </style>

package/dist/color-picker/color-picker-input-hue-slider.svelte

@@ -132,12 +132,12 @@
 	}
 
 	[data-cp-slider]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 
 	[data-cp-slider][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 </style>

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

@@ -97,14 +97,14 @@
 
 <style>
 	[data-cp-input] {
-		padding: var(--dry-space-2) var(--dry-space-3);
-		font-size: var(--dry-type-small-size);
+		padding: var(--dry-form-control-padding-block) var(--dry-form-control-padding-inline);
+		font-size: var(--dry-form-control-font-size);
 		line-height: var(--dry-type-small-leading);
 		font-family: var(--dry-font-mono);
-		color: var(--dry-color-text-strong);
-		background: var(--dry-color-bg-raised);
-		border: 1px solid var(--dry-color-stroke-strong);
-		border-radius: var(--dry-radius-md);
+		color: var(--dry-form-control-color);
+		background: var(--dry-form-control-bg);
+		border: 1px solid var(--dry-form-control-border);
+		border-radius: var(--dry-form-control-radius);
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
@@ -113,17 +113,17 @@
 	}
 
 	[data-cp-input]:hover:not([data-disabled]) {
-		border-color: var(--dry-color-stroke-strong);
+		border-color: var(--dry-form-control-border-hover);
 	}
 
 	[data-cp-input]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -1px;
 		border-color: var(--dry-color-focus-ring);
 	}
 
 	[data-cp-input][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 </style>

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

@@ -104,12 +104,12 @@
 	}
 
 	[data-cp-swatch][data-interactive]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 
 	[data-cp-swatch][data-interactive][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 </style>

package/dist/combobox/combobox-input.svelte

@@ -136,12 +136,12 @@
 
 <style>
 	[data-combobox-input] {
-		--dry-combobox-bg: var(--dry-color-bg-raised);
-		--dry-combobox-border: var(--dry-color-stroke-strong);
-		--dry-combobox-color: var(--dry-color-text-strong);
-		--dry-combobox-padding-x: var(--dry-space-3);
-		--dry-combobox-padding-y: var(--dry-space-2);
-		--dry-combobox-font-size: var(--dry-type-small-size);
+		--dry-combobox-bg: var(--dry-form-control-bg);
+		--dry-combobox-border: var(--dry-form-control-border);
+		--dry-combobox-color: var(--dry-form-control-color);
+		--dry-combobox-padding-x: var(--dry-form-control-padding-inline);
+		--dry-combobox-padding-y: var(--dry-form-control-padding-block);
+		--dry-combobox-font-size: var(--dry-form-control-font-size);
 
 		display: grid;
 		padding: var(--dry-combobox-padding-y) var(--dry-combobox-padding-x);
@@ -151,7 +151,7 @@
 		color: var(--dry-combobox-color);
 		background: var(--dry-combobox-bg);
 		border: 1px solid var(--dry-combobox-border);
-		border-radius: var(--dry-combobox-radius, var(--dry-radius-md));
+		border-radius: var(--dry-combobox-radius, var(--dry-form-control-radius));
 		box-sizing: border-box;
 		appearance: none;
 		transition:
@@ -160,12 +160,12 @@
 	}
 
 	[data-combobox-input]:hover:not([data-disabled]) {
-		border-color: var(--dry-color-stroke-strong);
+		border-color: var(--dry-form-control-border-hover);
 	}
 
 	[data-combobox-input]:focus-visible,
 	[data-combobox-input]:focus {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -1px;
 		border-color: var(--dry-color-stroke-focus);
 	}

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

@@ -82,7 +82,7 @@
 	}
 
 	[data-command-palette-item][data-disabled] {
-		opacity: 0.5;
+		opacity: var(--dry-state-disabled-opacity);
 		cursor: not-allowed;
 	}
 </style>

package/dist/data-grid/data-grid-button-input-column.svelte

@@ -237,7 +237,7 @@
 	}
 
 	[data-dg-column] input[data-filter-input]:focus {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -1px;
 		border-color: var(--dry-color-fill-brand);
 	}