@dryui/ui 3.0.0 → 4.0.1

package/dist/tree/tree-root.svelte

@@ -87,14 +87,17 @@
 		}
 	});
 
-	function initializeTree(node: HTMLElement) {
+	let rootEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!rootEl) return;
 		if (focusedItem !== null) return;
-		const itemId = node.querySelector<HTMLElement>('[role="treeitem"]')?.dataset.itemId;
+		const itemId = rootEl.querySelector<HTMLElement>('[role="treeitem"]')?.dataset.itemId;
 
 		if (itemId) {
 			focusedItem = itemId;
 		}
-	}
+	});
 
 	function getVisibleItems(tree: HTMLElement) {
 		const items = Array.from(tree.querySelectorAll('[role="treeitem"]')) as HTMLElement[];
@@ -216,12 +219,12 @@
 </script>
 
 <div
+	bind:this={rootEl}
 	role="tree"
 	data-part="root"
 	class={className}
 	onfocusin={handleFocusIn}
 	onkeydown={handleKeydown}
-	{@attach initializeTree}
 	{...rest}
 >
 	{@render children()}

package/dist/typography/blockquote.svelte

@@ -6,10 +6,10 @@
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: classAttr, children, ...rest }: Props = $props();
 </script>
 
-<blockquote class={className} {...rest}>{@render children()}</blockquote>
+<blockquote class={classAttr} {...rest}>{@render children()}</blockquote>
 
 <style>
 	blockquote {

package/dist/typography/code.svelte

@@ -6,10 +6,10 @@
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: classAttr, children, ...rest }: Props = $props();
 </script>
 
-<code class={className} {...rest}>{@render children()}</code>
+<code class={classAttr} {...rest}>{@render children()}</code>
 
 <style>
 	code {

package/dist/typography/heading.svelte

@@ -6,12 +6,12 @@
 		level = 2,
 		variant = 'default',
 		maxMeasure = false,
-		class: className,
+		class: _class,
 		children,
 		...rest
 	}: HeadingProps = $props();
 </script>
 
-<Heading {level} {variant} {maxMeasure} {className} {...rest}>
+<Heading {level} {variant} {maxMeasure} {...rest}>
 	{@render children()}
 </Heading>

package/dist/typography/index.d.ts

@@ -7,7 +7,6 @@ export interface TextProps extends Omit<SharedTextProps, 'color' | 'variant'> {
     size?: SharedTextProps['size'];
     font?: SharedTextProps['font'];
     weight?: SharedTextProps['weight'];
-    className?: SharedTextProps['className'];
 }
 import TypographyHeading from './heading.svelte';
 import TypographyText from './text.svelte';

package/dist/typography/text.svelte

@@ -10,7 +10,6 @@
 		font = 'sans',
 		weight,
 		maxMeasure = false,
-		class: className,
 		children,
 		...rest
 	}: TextProps = $props();
@@ -21,16 +20,6 @@
 	let textVariant: 'default' | 'label' = $derived(variant === 'label' ? 'label' : 'default');
 </script>
 
-<Text
-	{as}
-	color={tone}
-	{size}
-	{font}
-	{weight}
-	variant={textVariant}
-	{maxMeasure}
-	{className}
-	{...rest}
->
-	{@render children()}
+<Text {as} color={tone} {size} {font} {weight} variant={textVariant} {maxMeasure} {...rest}>
+	{@render children?.()}
 </Text>

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

@@ -58,19 +58,20 @@
 		activated = true;
 	}
 
-	function applyAspectRatio(node: HTMLElement) {
-		$effect(() => {
-			node.style.setProperty('--_ratio', aspectRatio);
-		});
-	}
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--_ratio', aspectRatio);
+	});
 </script>
 
 <div
+	bind:this={el}
 	data-video-embed
 	data-provider={detectedProvider}
 	data-activated={activated || autoplay ? '' : undefined}
 	class={className}
-	{@attach applyAspectRatio}
 	{...rest}
 >
 	{#if activated || autoplay}
@@ -101,7 +102,6 @@
 		{/if}
 	{:else}
 		{#if poster}
-			<!-- dryui-allow raw-img: VideoEmbed owns the poster media element inside the play overlay surface. -->
 			<img data-part="poster" src={poster} alt="" />
 		{/if}
 		<span class="play-btn-slot">
@@ -136,7 +136,7 @@
 		position: relative;
 		overflow: hidden;
 		border-radius: var(--dry-video-embed-radius);
-		background: var(--dry-color-fill, #0f0f0f);
+		background: var(--dry-color-fill);
 		aspect-ratio: var(--_ratio, 16/9);
 	}
 
@@ -166,7 +166,7 @@
 	[data-video-embed] [data-part='play-icon'] {
 		height: var(--dry-video-embed-play-size);
 		aspect-ratio: 1;
-		filter: drop-shadow(0 2px 8px rgb(15 23 42 / 0.3));
+		filter: drop-shadow(var(--dry-video-embed-shadow, 0 2px 8px rgb(15 23 42 / 0.3)));
 		transform: translateX(1px);
 		transition: transform var(--dry-duration-normal) var(--dry-ease-default);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
@@ -110,11 +110,6 @@
       "svelte": "./dist/calendar/index.js",
       "default": "./dist/calendar/index.js"
     },
-    "./card": {
-      "types": "./dist/card/index.d.ts",
-      "svelte": "./dist/card/index.js",
-      "default": "./dist/card/index.js"
-    },
     "./carousel": {
       "types": "./dist/carousel/index.d.ts",
       "svelte": "./dist/carousel/index.js",
@@ -740,6 +735,11 @@
       "svelte": "./dist/toggle-group/index.js",
       "default": "./dist/toggle-group/index.js"
     },
+    "./token-scope": {
+      "types": "./dist/token-scope/index.d.ts",
+      "svelte": "./dist/token-scope/index.js",
+      "default": "./dist/token-scope/index.js"
+    },
     "./toolbar": {
       "types": "./dist/toolbar/index.d.ts",
       "svelte": "./dist/toolbar/index.js",
@@ -798,6 +798,7 @@
     "./*/*": null,
     "./internal/*": null,
     "./themes/aurora.css": "./dist/themes/aurora.css",
+    "./themes/component-defaults.css": "./dist/themes/component-defaults.css",
     "./themes/dark.css": "./dist/themes/dark.css",
     "./themes/default.css": "./dist/themes/default.css",
     "./themes/midnight.css": "./dist/themes/midnight.css",
@@ -805,7 +806,7 @@
   },
   "files": [
     "dist",
-    "skills"
+    "src"
   ],
   "scripts": {
     "build": "svelte-package -i src",
@@ -817,16 +818,16 @@
     "check:publish-hygiene": "bun run check:publint && bun run check:attw"
   },
   "dependencies": {
-    "@dryui/primitives": "^3.0.0"
+    "@dryui/primitives": "^4.0.1"
   },
   "peerDependencies": {
-    "svelte": "^5.55.5"
+    "svelte": "^5.55.7"
   },
   "devDependencies": {
-    "@dryui/lint": "^1.0.0",
-    "svelte": "^5.55.5",
+    "@dryui/lint": "^1.1.1",
+    "svelte": "^5.55.7",
     "@sveltejs/package": "^2.5.7",
-    "svelte-check": "^4.4.6",
+    "svelte-check": "^4.4.8",
     "typescript": "^6.0.3"
   }
 }

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getAccordionCtx, getAccordionItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getAccordionCtx();
+	const itemCtx = getAccordionItemCtx();
+</script>
+
+<Button
+	variant="trigger"
+	type="button"
+	--dry-btn-justify="space-between"
+	--dry-btn-radius="0"
+	--dry-btn-active-transform="none"
+	aria-expanded={itemCtx.open}
+	aria-controls={itemCtx.contentId}
+	data-state={itemCtx.open ? 'open' : 'closed'}
+	disabled={itemCtx.disabled}
+	{...rest}
+	onclick={() => ctx.toggle(itemCtx.value)}
+>
+	{@render children()}
+	<svg
+		data-indicator
+		class:open={itemCtx.open}
+		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>
+	svg[data-indicator] {
+		height: 1rem;
+		aspect-ratio: 1;
+		opacity: 0.5;
+		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	svg[data-indicator].open {
+		transform: rotate(180deg);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		svg[data-indicator] {
+			transition: none;
+		}
+	}
+</style>

package/src/accordion/accordion-content.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getAccordionItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const itemCtx = getAccordionItemCtx();
+</script>
+
+<div
+	class={className}
+	id={itemCtx.contentId}
+	aria-hidden={!itemCtx.open}
+	hidden={!itemCtx.open}
+	data-state={itemCtx.open ? 'open' : 'closed'}
+	data-accordion-content
+	{...rest}
+>
+	<div data-accordion-content-inner>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	[data-accordion-content] {
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+	}
+
+	[data-accordion-content-inner] {
+		padding: var(--dry-space-2) var(--dry-space-4) var(--dry-space-4);
+	}
+</style>

package/src/accordion/accordion-item.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getAccordionCtx, setAccordionItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value: string;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let { value, disabled = false, class: className, children, ...rest }: Props = $props();
+
+	const ctx = getAccordionCtx();
+
+	const contentId = $derived(`accordion-content-${value}`);
+
+	setAccordionItemCtx({
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get open() {
+			return ctx.isOpen(value);
+		},
+		get contentId() {
+			return contentId;
+		}
+	});
+</script>
+
+<div
+	data-accordion-item
+	data-state={ctx.isOpen(value) ? 'open' : 'closed'}
+	data-disabled={disabled || undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-accordion-item] {
+		display: grid;
+		border-bottom: 1px solid var(--dry-color-stroke-weak);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+</style>

package/src/accordion/accordion-root.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setAccordionCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		type?: 'single' | 'multiple';
+		value?: string[];
+		orientation?: 'horizontal' | 'vertical';
+		children: Snippet;
+	}
+
+	let {
+		type = 'single',
+		value = $bindable([]),
+		orientation = 'vertical',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	setAccordionCtx({
+		get type() {
+			return type;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get value() {
+			return value;
+		},
+		set value(v) {
+			value = v;
+		},
+		toggle(itemValue: string) {
+			if (type === 'single') {
+				value = value.includes(itemValue) ? [] : [itemValue];
+			} else {
+				value = value.includes(itemValue)
+					? value.filter((v) => v !== itemValue)
+					: [...value, itemValue];
+			}
+		},
+		isOpen(itemValue: string) {
+			return value.includes(itemValue);
+		}
+	});
+</script>
+
+<div data-accordion data-dry-stagger data-orientation={orientation} class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-accordion] {
+		display: grid;
+		border: 1px solid var(--dry-accordion-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-radius-lg);
+		overflow: hidden;
+	}
+</style>

package/src/accordion/accordion.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Accordion',
+	description: 'Collapsible content sections, single or multiple mode',
+	category: 'display',
+	tags: ['disclosure', 'collapse', 'expand', 'faq']
+};

package/src/accordion/context.svelte.ts

@@ -0,0 +1,19 @@
+import { createContext } from '@dryui/primitives';
+
+interface AccordionContext {
+	readonly type: 'single' | 'multiple';
+	readonly orientation: 'horizontal' | 'vertical';
+	value: string[];
+	toggle: (itemValue: string) => void;
+	isOpen: (itemValue: string) => boolean;
+}
+export const [setAccordionCtx, getAccordionCtx] = createContext<AccordionContext>('accordion');
+
+interface AccordionItemContext {
+	readonly value: string;
+	readonly disabled: boolean;
+	readonly open: boolean;
+	readonly contentId: string;
+}
+export const [setAccordionItemCtx, getAccordionItemCtx] =
+	createContext<AccordionItemContext>('accordion-item');

package/src/accordion/index.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+export interface AccordionRootProps extends HTMLAttributes<HTMLDivElement> {
+	type?: 'single' | 'multiple';
+	value?: string[];
+	orientation?: 'horizontal' | 'vertical';
+	children: Snippet;
+}
+
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+	value: string;
+	disabled?: boolean;
+	children: Snippet;
+}
+
+export interface AccordionTriggerProps extends HTMLButtonAttributes {
+	children: Snippet;
+}
+
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+
+import AccordionRoot from './accordion-root.svelte';
+import AccordionItem from './accordion-item.svelte';
+import AccordionTrigger from './accordion-button-trigger.svelte';
+import AccordionContent from './accordion-content.svelte';
+
+export const Accordion: {
+	Root: typeof AccordionRoot;
+	Item: typeof AccordionItem;
+	Trigger: typeof AccordionTrigger;
+	Content: typeof AccordionContent;
+} = {
+	Root: AccordionRoot,
+	Item: AccordionItem,
+	Trigger: AccordionTrigger,
+	Content: AccordionContent
+};

package/src/adjust/adjust.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Adjust',
+	description: 'CSS filter adjustment wrapper for brightness, contrast, saturation, and hue shifts',
+	category: 'visual',
+	tags: ['filter', 'adjust', 'brightness', 'contrast', 'color']
+};

package/src/adjust/adjust.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { BlendMode } from '@dryui/primitives/adjust';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		brightness?: number;
+		contrast?: number;
+		saturate?: number;
+		hueRotate?: number;
+		grayscale?: number;
+		sepia?: number;
+		invert?: number;
+		blur?: number;
+		blendMode?: BlendMode;
+		children: Snippet;
+	}
+
+	let {
+		brightness,
+		contrast,
+		saturate,
+		hueRotate,
+		grayscale,
+		sepia,
+		invert,
+		blur,
+		blendMode,
+		children,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	const filterString = $derived.by(() => {
+		const parts: string[] = [];
+		if (brightness != null && brightness !== 100) parts.push(`brightness(${brightness / 100})`);
+		if (contrast != null && contrast !== 100) parts.push(`contrast(${contrast / 100})`);
+		if (saturate != null && saturate !== 100) parts.push(`saturate(${saturate / 100})`);
+		if (hueRotate != null && hueRotate !== 0) parts.push(`hue-rotate(${hueRotate}deg)`);
+		if (grayscale != null && grayscale !== 0) parts.push(`grayscale(${grayscale / 100})`);
+		if (sepia != null && sepia !== 0) parts.push(`sepia(${sepia / 100})`);
+		if (invert != null && invert !== 0) parts.push(`invert(${invert / 100})`);
+		if (blur != null && blur !== 0) parts.push(`blur(${blur}px)`);
+		return parts.length ? parts.join(' ') : undefined;
+	});
+
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.cssText = style || '';
+		el.style.setProperty('--_filter', filterString ?? 'none');
+		el.style.setProperty('--_blend', blendMode ?? 'normal');
+	});
+</script>
+
+<div bind:this={el} data-adjust class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-adjust] {
+		block-size: var(--dry-adjust-block-size, auto);
+		border-radius: inherit;
+		filter: var(--_filter, none);
+		min-block-size: var(--dry-adjust-min-block-size, 0);
+		mix-blend-mode: var(--_blend, normal);
+		overflow: var(--dry-adjust-overflow, visible);
+	}
+</style>

package/src/adjust/index.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BlendMode } from '@dryui/primitives/adjust';
+
+export type { BlendMode };
+
+export interface AdjustProps extends HTMLAttributes<HTMLDivElement> {
+	brightness?: number;
+	contrast?: number;
+	saturate?: number;
+	hueRotate?: number;
+	grayscale?: number;
+	sepia?: number;
+	invert?: number;
+	blur?: number;
+	blendMode?: BlendMode;
+	children: Snippet;
+}
+
+export { default as Adjust } from './adjust.svelte';

package/src/alert/alert.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Alert',
+	description: 'Contextual feedback message with variant styling',
+	category: 'feedback',
+	tags: ['message', 'notification', 'info', 'warning', 'error']
+};