@dryui/ui 0.5.1 → 1.0.0

package/dist/shimmer/index.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ShimmerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    color?: string;
+    duration?: number;
+    children: Snippet;
+}
+export { default as Shimmer } from './shimmer.svelte';

package/dist/shimmer/index.js

@@ -0,0 +1 @@
+export { default as Shimmer } from './shimmer.svelte';

package/dist/shimmer/shimmer.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+		color?: string;
+		duration?: number;
+		children: Snippet;
+	}
+
+	let {
+		color = 'var(--dry-color-fill-brand)',
+		duration = 3,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	function applyStyles(node: HTMLSpanElement) {
+		$effect(() => {
+			node.style.setProperty('--dry-shimmer-color', color);
+			node.style.setProperty('--dry-shimmer-duration', `${duration}s`);
+		});
+	}
+</script>
+
+<span data-shimmer class={className} {...rest} {@attach applyStyles}>
+	<span data-shimmer-base>
+		{@render children()}
+	</span>
+	<span data-shimmer-streak aria-hidden="true">
+		{@render children()}
+	</span>
+</span>
+
+<style>
+	[data-shimmer] {
+		display: grid;
+		grid-template-columns: var(--dry-shimmer-outer-columns, max-content);
+		grid-column: var(--dry-shimmer-column, auto);
+		justify-self: var(--dry-shimmer-justify-self, auto);
+		isolation: isolate;
+	}
+
+	[data-shimmer-base],
+	[data-shimmer-streak] {
+		grid-area: 1 / 1;
+		display: grid;
+		grid-template-columns: var(--dry-shimmer-content-columns, none);
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-shimmer-gap, var(--dry-space-2));
+	}
+
+	[data-shimmer-streak] {
+		color: var(--dry-shimmer-color, var(--dry-color-fill-brand));
+		pointer-events: none;
+		-webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
+		mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
+		-webkit-mask-size: 200% 100%;
+		mask-size: 200% 100%;
+		-webkit-mask-repeat: no-repeat;
+		mask-repeat: no-repeat;
+		will-change: mask-position;
+		animation: shimmer-sweep var(--dry-shimmer-duration, 3s) linear infinite;
+	}
+
+	@keyframes shimmer-sweep {
+		from {
+			-webkit-mask-position: 150% 0;
+			mask-position: 150% 0;
+		}
+		to {
+			-webkit-mask-position: -50% 0;
+			mask-position: -50% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-shimmer-streak] {
+			animation: none;
+			-webkit-mask-position: 50% 0;
+			mask-position: 50% 0;
+		}
+	}
+</style>

package/dist/shimmer/shimmer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    color?: string;
+    duration?: number;
+    children: Snippet;
+}
+declare const Shimmer: import("svelte").Component<Props, {}, "">;
+type Shimmer = ReturnType<typeof Shimmer>;
+export default Shimmer;

package/dist/sidebar/sidebar-item.svelte

@@ -51,7 +51,7 @@
 	}
 
 	[data-sidebar-item]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 </style>

package/dist/slider/slider-input.svelte

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

package/dist/splitter/splitter-handle.svelte

@@ -139,7 +139,7 @@
 	}
 
 	[data-part='handle']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: -2px;
 	}
 

package/dist/table-of-contents/table-of-contents-item.svelte

@@ -80,7 +80,7 @@
 	}
 
 	[data-part='item']:focus-within > a {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 </style>

package/dist/table-of-contents/table-of-contents-list.svelte

@@ -81,7 +81,7 @@
 	}
 
 	[data-part='item']:focus-within > a {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 </style>

package/dist/tags-input/tags-input-root.svelte

@@ -101,7 +101,7 @@
 		}
 
 		&:focus-within {
-			outline: 2px solid var(--dry-color-focus-ring);
+			outline: var(--dry-focus-ring);
 			outline-offset: -1px;
 			border-color: var(--dry-color-stroke-focus);
 			box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);

package/dist/tags-input/tags-input-tag-delete-button.svelte

@@ -22,6 +22,8 @@
 </script>
 
 <CloseButtonBase
+	variant="bare"
+	size="sm"
 	aria-label="Remove tag: {value}"
 	disabled={ctx.disabled}
 	{...rest}

package/dist/tags-input/tags-input-tag.svelte

@@ -35,13 +35,15 @@
 		grid-auto-columns: max-content;
 		vertical-align: middle;
 		align-items: center;
-		gap: var(--dry-space-1);
-		padding: var(--dry-space-1) var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
+		padding-block: var(--dry-space-1);
+		padding-inline-start: var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
+		padding-inline-end: 0;
 		margin-inline-end: var(--dry-tags-input-gap, var(--dry-space-1_5));
 		margin-block: calc(var(--dry-tags-input-gap, var(--dry-space-1_5)) / 2);
 		background: color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent);
 		color: var(--dry-color-fill-brand);
-		border-radius: var(--dry-radius-full);
+		border-radius: var(--dry-tags-input-tag-radius, var(--dry-radius-md));
+		overflow: hidden;
 		font-size: var(
 			--dry-tags-input-tag-font-size,
 			var(--dry-type-tiny-size, var(--dry-text-xs-size))
@@ -51,5 +53,9 @@
 		line-height: 1.5;
 		white-space: nowrap;
 		user-select: none;
+		--dry-btn-radius: 0;
+		--dry-btn-padding-x: var(--dry-tags-input-tag-padding-x, var(--dry-space-2));
+		--dry-btn-padding-y: 0;
+		--dry-btn-font-size: inherit;
 	}
 </style>

package/dist/textarea/textarea.svelte

@@ -43,19 +43,19 @@
 	}
 
 	textarea {
-		--dry-input-bg: var(--dry-control-bg, var(--dry-color-bg-raised));
-		--dry-input-border: var(--dry-control-border, var(--dry-color-stroke-strong));
-		--dry-input-padding-x: var(--dry-space-3);
-		--dry-input-padding-y: var(--dry-space-2);
-		--dry-input-font-size: var(--dry-type-small-size);
+		--dry-input-bg: var(--dry-form-control-bg);
+		--dry-input-border: var(--dry-form-control-border);
+		--dry-input-padding-x: var(--dry-form-control-padding-inline);
+		--dry-input-padding-y: var(--dry-form-control-padding-block);
+		--dry-input-font-size: var(--dry-form-control-font-size);
 		padding: var(--dry-input-padding-y) var(--dry-input-padding-x);
 		font-size: var(--dry-input-font-size);
 		line-height: var(--dry-type-small-leading);
 		font-family: var(--dry-font-sans);
-		color: var(--dry-input-color, var(--dry-color-text-strong));
+		color: var(--dry-input-color, var(--dry-form-control-color));
 		background: var(--dry-input-bg);
 		border: 1px solid var(--dry-input-border);
-		border-radius: var(--dry-input-radius, var(--dry-control-radius, var(--dry-radius-md)));
+		border-radius: var(--dry-input-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);
@@ -65,22 +65,22 @@
 		min-height: 160px;
 
 		&::placeholder {
-			color: var(--dry-color-text-weak);
+			color: var(--dry-form-control-color-placeholder);
 		}
 
 		&:hover:not([data-disabled]) {
-			border-color: var(--dry-color-stroke-strong);
+			border-color: var(--dry-form-control-border-hover);
 		}
 
 		&: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);
 			box-shadow: 0 0 0 1px var(--dry-color-focus-ring);
 		}
 
 		&[data-disabled] {
-			opacity: 0.5;
+			opacity: var(--dry-state-disabled-opacity);
 			cursor: not-allowed;
 		}
 

package/dist/themes/default.css

@@ -305,6 +305,37 @@ samp {
 	--dry-text-4xl-size: var(--dry-type-ui-display-size);
 	--dry-text-4xl-leading: var(--dry-type-ui-display-leading);
 
+	/* ─── State ───────────────────────────────────────────────────────
+	   Shared shorthands for focus / disabled state. Consumers can
+	   override these at :root to restyle every focusable or disabled
+	   control in one place.
+	   - Focus ring: `outline: var(--dry-focus-ring); outline-offset: 2px;`
+	   - Disabled state: `opacity: var(--dry-state-disabled-opacity); cursor: not-allowed;`
+	*/
+	--dry-focus-ring: 2px solid var(--dry-color-focus-ring);
+	--dry-state-disabled-opacity: 0.5;
+
+	/* ─── Form control shared tokens ──────────────────────────────────
+	   Consumed by input, textarea, combobox-input, and color-picker-input.
+	   Per-component `--dry-<name>-*` overrides still work — they now
+	   resolve through this shared family by default, so consumers can
+	   restyle all form controls with one change at :root.
+	   Intentionally excluded (pre-existing divergence):
+	   - border-focus: some controls use --dry-color-stroke-focus,
+	     others use --dry-color-focus-ring; left per-component.
+	   - bg-disabled: input uses --dry-color-bg-sunken, others rely on
+	     opacity; left per-component.
+	*/
+	--dry-form-control-bg: var(--dry-color-bg-raised);
+	--dry-form-control-border: var(--dry-color-stroke-strong);
+	--dry-form-control-border-hover: var(--dry-color-stroke-strong);
+	--dry-form-control-color: var(--dry-color-text-strong);
+	--dry-form-control-color-placeholder: var(--dry-color-text-weak);
+	--dry-form-control-radius: var(--dry-radius-md);
+	--dry-form-control-font-size: var(--dry-type-small-size);
+	--dry-form-control-padding-block: var(--dry-space-2);
+	--dry-form-control-padding-inline: var(--dry-space-3);
+
 	/* ─── Motion ──────────────────────────────────────────────────── */
 	--dry-duration-instant: 0ms;
 	--dry-duration-fast: 120ms;

package/dist/toast/toast-root.svelte

@@ -149,7 +149,7 @@
 		background: var(--dry-color-stroke-weak, #e2e8f0);
 		border-radius: 0 0 var(--dry-radius-lg) var(--dry-radius-lg);
 		overflow: hidden;
-		transition: grid-template-columns 0.3s ease;
+		transition: grid-template-columns var(--dry-duration-normal) var(--dry-ease-default);
 	}
 
 	[data-part='progress']::after {

package/dist/tour/tour-root.css

@@ -115,7 +115,7 @@
 }
 
 [data-tour-root] [data-part='skipButton']:focus-visible {
-	outline: 2px solid var(--dry-color-focus-ring);
+	outline: var(--dry-focus-ring);
 	outline-offset: 2px;
 }
 
@@ -136,7 +136,7 @@
 }
 
 [data-tour-root] [data-part='prevButton']:focus-visible {
-	outline: 2px solid var(--dry-color-focus-ring);
+	outline: var(--dry-focus-ring);
 	outline-offset: 2px;
 }
 
@@ -157,7 +157,7 @@
 }
 
 [data-tour-root] [data-part='nextButton']:focus-visible {
-	outline: 2px solid var(--dry-color-focus-ring);
+	outline: var(--dry-focus-ring);
 	outline-offset: 2px;
 }
 

package/dist/tree/tree-item-children.svelte

@@ -44,6 +44,6 @@
 		display: grid;
 		grid-template-rows: var(--_rows, 0fr);
 		padding-left: var(--dry-tree-indent, var(--dry-space-4));
-		transition: grid-template-rows var(--dry-duration-normal, 200ms) var(--dry-ease-default, ease);
+		transition: grid-template-rows var(--dry-duration-normal) var(--dry-ease-default);
 	}
 </style>

package/dist/tree/tree-item-label.svelte

@@ -61,7 +61,7 @@
 	}
 
 	[data-part='label']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
+		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
 	}
 

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

@@ -160,7 +160,7 @@
 		height: var(--dry-video-embed-play-size);
 		aspect-ratio: 1;
 		filter: drop-shadow(0 2px 8px rgb(15 23 42 / 0.3));
-		transition: transform var(--dry-duration-normal, 200ms) ease;
+		transition: transform var(--dry-duration-normal) var(--dry-ease-default);
 	}
 
 	.play-btn-slot:hover [data-part='play-icon'] {