@dryui/ui 1.8.0 → 2.0.0

package/dist/rich-text-editor/rich-text-editor-root.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { setRichTextEditorCtx } from '@dryui/primitives/rich-text-editor';
+	import {
+		sanitizeRichTextElement,
+		sanitizeRichTextHtml,
+		sanitizeRichTextUrl,
+		setRichTextEditorCtx
+	} from '@dryui/primitives/rich-text-editor';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
+		/** HTML is sanitized before rendering and before bind:value updates are emitted. */
 		value?: string;
 		placeholder?: string;
 		readonly?: boolean;
@@ -66,7 +72,7 @@
 
 	function syncValue() {
 		if (ctx.contentEl) {
-			value = ctx.contentEl.innerHTML;
+			value = sanitizeRichTextElement(ctx.contentEl);
 		}
 	}
 
@@ -96,7 +102,7 @@
 			return currentLink;
 		},
 		get html() {
-			return value;
+			return sanitizeRichTextHtml(value);
 		},
 		get readonly() {
 			return readonlyProp;
@@ -137,13 +143,16 @@
 		},
 		insertLink(url: string) {
 			if (readonlyProp) return;
+			const safeUrl = sanitizeRichTextUrl(url);
+			if (!safeUrl) return;
+
 			const sel = window.getSelection();
 			if (!sel || sel.rangeCount === 0) return;
 
 			if (sel.isCollapsed) {
 				const a = document.createElement('a');
-				a.href = url;
-				a.textContent = url;
+				a.href = safeUrl;
+				a.textContent = safeUrl;
 				a.target = '_blank';
 				a.rel = 'noopener noreferrer';
 				const range = sel.getRangeAt(0);
@@ -153,9 +162,9 @@
 				sel.removeAllRanges();
 				sel.addRange(range);
 			} else {
-				document.execCommand('createLink', false, url);
+				document.execCommand('createLink', false, safeUrl);
 				if (ctx.contentEl) {
-					const links = ctx.contentEl.querySelectorAll('a[href="' + CSS.escape(url) + '"]');
+					const links = ctx.contentEl.querySelectorAll('a[href="' + CSS.escape(safeUrl) + '"]');
 					links.forEach((link) => {
 						link.setAttribute('target', '_blank');
 						link.setAttribute('rel', 'noopener noreferrer');
@@ -169,10 +178,11 @@
 			execCommand('unlink');
 		},
 		getContent() {
-			return ctx.contentEl?.innerHTML ?? '';
+			return sanitizeRichTextHtml(ctx.contentEl?.innerHTML ?? '');
 		},
 		updateState,
-		syncValue
+		syncValue,
+		sanitizeHtml: sanitizeRichTextHtml
 	});
 </script>
 

package/dist/rich-text-editor/rich-text-editor-root.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** HTML is sanitized before rendering and before bind:value updates are emitted. */
     value?: string;
     placeholder?: string;
     readonly?: boolean;

package/dist/rich-text-editor/rich-text-editor-toolbar-button-input.svelte

@@ -516,6 +516,7 @@
 		gap: var(--dry-space-2);
 		padding: var(--dry-space-2);
 		background: var(--dry-color-bg-overlay);
+		/* dryui-allow solid-border-on-raised: inline link editor is a small popover that needs a distinct edge. */
 		border: 1px solid var(--dry-rte-border);
 		border-radius: var(--dry-radius-md);
 		box-shadow: var(--dry-shadow-md);

package/dist/rich-text-editor/rich-text-editor.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/rich-text-editor/rich-text-editor.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'RichTextEditor',
+    description: 'Basic rich text editor with formatting toolbar',
+    category: 'input',
+    tags: ['editor', 'rich-text', 'wysiwyg', 'contenteditable', 'formatting']
+};

package/dist/scroll-area/scroll-area.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/scroll-area/scroll-area.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ScrollArea',
+    description: 'Custom scrollable area with styled scrollbars',
+    category: 'layout',
+    tags: ['scroll', 'overflow', 'scrollbar']
+};

package/dist/scroll-to-top/scroll-to-top.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/scroll-to-top/scroll-to-top.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ScrollToTop',
+    description: 'Button that scrolls to top of page or container',
+    category: 'action',
+    tags: ['scroll', 'navigation', 'top', 'button']
+};

package/dist/segmented-control/segmented-control.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/segmented-control/segmented-control.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'SegmentedControl',
+    description: 'Compact segmented switch for mutually exclusive options',
+    category: 'form',
+    tags: ['segmented', 'switcher', 'single-select', 'view-toggle', 'tabs', 'toggle']
+};

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setSelectCtx } from './context.svelte.js';
 	import SelectTrigger from './select-trigger-button.svelte';
 	import SelectValue from './select-value.svelte';
@@ -35,8 +34,9 @@
 		options?.map((opt) => (typeof opt === 'string' ? { value: opt, label: opt } : opt))
 	);
 
-	const triggerId = generateFormId('select-trigger');
-	const contentId = generateFormId('select-content');
+	const uid = $props.id();
+	const triggerId = `select-trigger-${uid}`;
+	const contentId = `select-content-${uid}`;
 
 	let displayText = $state('');
 	let triggerEl = $state<HTMLElement | null>(null);

package/dist/select/select.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/select/select.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Select',
+    description: 'Closed dropdown select for choosing one option from a fixed list',
+    category: 'form',
+    tags: ['form', 'select', 'dropdown', 'option', 'choice', 'non-searchable']
+};

package/dist/separator/separator.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/separator/separator.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Separator',
+    description: 'Visual divider between content',
+    category: 'layout',
+    tags: ['divider', 'line', 'hr', 'separator']
+};

package/dist/separator/separator.svelte

@@ -3,7 +3,7 @@
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		orientation?: 'horizontal' | 'vertical';
-		variant?: 'weak' | 'strong';
+		variant?: 'weak' | 'strong' | 'shadow';
 		decorative?: boolean;
 	}
 
@@ -51,4 +51,20 @@
 	div[data-variant='strong'] {
 		--dry-separator-color: var(--dry-color-stroke-strong);
 	}
+
+	/* ── Variant: shadow (theme-friendlier edge on image backgrounds) ─────── */
+
+	div[data-variant='shadow'] {
+		background-color: transparent;
+		box-shadow: 0 1px 0 var(--dry-color-stroke-weak);
+	}
+
+	div[data-variant='shadow'][data-orientation='horizontal'] {
+		height: 1px;
+	}
+
+	div[data-variant='shadow'][data-orientation='vertical'] {
+		box-shadow: 1px 0 0 var(--dry-color-stroke-weak);
+		grid-template-columns: 1px;
+	}
 </style>

package/dist/separator/separator.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     orientation?: 'horizontal' | 'vertical';
-    variant?: 'weak' | 'strong';
+    variant?: 'weak' | 'strong' | 'shadow';
     decorative?: boolean;
 }
 declare const Separator: import("svelte").Component<Props, {}, "">;

package/dist/shader-canvas/shader-canvas.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/shader-canvas/shader-canvas.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ShaderCanvas',
+    description: 'WebGL shader canvas with built-in presets and theme color integration',
+    category: 'visual',
+    tags: ['shader', 'webgl', 'canvas', 'glsl', 'animation', 'background', 'preset']
+};

package/dist/shimmer/shimmer.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/shimmer/shimmer.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Shimmer',
+    description: 'Warm highlight sweep that travels across wrapped text and inline icons together',
+    category: 'visual',
+    tags: ['shimmer', 'shine', 'highlight', 'text', 'icon', 'animation', 'effect']
+};

package/dist/sidebar/sidebar.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/sidebar/sidebar.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Sidebar',
+    description: 'Collapsible side navigation panel',
+    category: 'navigation',
+    tags: ['sidebar', 'navigation', 'panel', 'collapsible']
+};

package/dist/skeleton/skeleton.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/skeleton/skeleton.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Skeleton',
+    description: 'Loading placeholder animation',
+    category: 'feedback',
+    tags: ['loading', 'placeholder', 'shimmer', 'skeleton']
+};

package/dist/slider/slider.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/slider/slider.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Slider',
+    description: 'Range input slider with thumb control',
+    category: 'input',
+    tags: ['form', 'range', 'slider', 'value']
+};

package/dist/spacer/spacer.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/spacer/spacer.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Spacer',
+    description: 'Empty space component for spacing',
+    category: 'layout',
+    tags: ['space', 'gap', 'margin', 'padding']
+};

package/dist/sparkline/sparkline.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/sparkline/sparkline.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Sparkline',
+    description: 'Compact inline SVG sparkline chart',
+    category: 'display',
+    tags: ['sparkline', 'chart', 'inline', 'trend', 'svg', 'data']
+};

package/dist/spinner/spinner.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/spinner/spinner.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Spinner',
+    description: 'Loading spinner animation',
+    category: 'feedback',
+    tags: ['loading', 'spinner', 'wait', 'processing']
+};

package/dist/splitter/splitter.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/splitter/splitter.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Splitter',
+    description: 'Resizable split panels with drag handle',
+    category: 'layout',
+    tags: ['split', 'resize', 'panel', 'drag']
+};

package/dist/spotlight/spotlight.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/spotlight/spotlight.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Spotlight',
+    description: 'Pointer-reactive radial highlight surface for cards, hero blocks, and interactive panels',
+    category: 'display',
+    tags: ['spotlight', 'pointer', 'hover', 'surface', 'motion']
+};

package/dist/stagger/index.d.ts

@@ -0,0 +1 @@
+export { Stagger } from '../motion/index.js';

package/dist/stagger/index.js

@@ -0,0 +1 @@
+export { Stagger } from '../motion/index.js';

package/dist/stagger/stagger.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/stagger/stagger.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Stagger',
+    description: 'Iterates children with auto-assigned nth-child delays. `step` selects section (100ms), word (80ms), letter (40ms), or a custom millisecond value.',
+    category: 'display',
+    tags: ['animation', 'stagger', 'enter', 'motion', 'polish']
+};

package/dist/star-rating/star-rating.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/star-rating/star-rating.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'StarRating',
+    description: 'Read-only star rating display with filled and outlined variants',
+    category: 'display',
+    tags: ['star', 'rating', 'review', 'score', 'display']
+};

package/dist/stepper/stepper.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/stepper/stepper.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Stepper',
+    description: 'Step-by-step progress indicator',
+    category: 'navigation',
+    tags: ['steps', 'wizard', 'progress', 'workflow', 'multi-step', 'form']
+};

package/dist/svg/svg.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/svg/svg.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Svg',
+    description: 'Accessible SVG wrapper with viewBox and aria-label defaults',
+    category: 'utility',
+    tags: ['svg', 'icon', 'graphic', 'accessible', 'vector']
+};

package/dist/table/table.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/table/table.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Table',
+    description: 'Data table with header, body, footer sections',
+    category: 'display',
+    tags: ['data', 'table', 'grid', 'rows', 'columns']
+};

package/dist/table-of-contents/table-of-contents.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/table-of-contents/table-of-contents.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'TableOfContents',
+    description: 'Auto-generated table of contents from headings',
+    category: 'navigation',
+    tags: ['toc', 'navigation', 'headings', 'scroll-spy']
+};

package/dist/tabs/tabs.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/tabs/tabs.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Tabs',
+    description: 'Tabbed content navigation',
+    category: 'navigation',
+    tags: ['tabs', 'nav', 'switch', 'panel']
+};

package/dist/tag/tag.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/tag/tag.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Tag',
+    description: 'Small labeled tag element with color and variant support',
+    category: 'display',
+    tags: ['tag', 'label', 'chip', 'badge', 'category', 'status']
+};

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

@@ -86,6 +86,7 @@
 	[data-part='root'] {
 		display: block;
 		padding: var(--dry-space-2);
+		/* dryui-allow solid-border-on-raised: tag editor is a form field with token chips on a raised input surface. */
 		border: 1px solid var(--dry-color-stroke-strong);
 		border-radius: var(--dry-radius-md);
 		background: var(--dry-color-bg-raised);

package/dist/tags-input/tags-input.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;