@dryui/ui 1.3.1 → 1.4.1

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

@@ -10,11 +10,14 @@
 	const ctx = getRichTextEditorCtx();
 
 	let toolbarEl: HTMLDivElement;
+	type LinkRequestOrigin = 'toolbar' | 'content';
 
 	let showLinkInput = $state(false);
 	let linkUrl = $state('');
 	let linkInputEl = $state<HTMLInputElement>();
 	let savedSelection = $state<Range | null>(null);
+	let linkReturnFocusEl = $state<HTMLElement | null>(null);
+	let linkRequestOrigin = $state<LinkRequestOrigin>('toolbar');
 
 	const FOCUSABLE_SELECTOR = 'button:not([disabled]), [role="button"]:not([disabled])';
 
@@ -33,6 +36,28 @@
 		}
 	});
 
+	$effect(() => {
+		if (!toolbarEl) return;
+
+		function handleLinkRequest(event: Event) {
+			if (ctx.readonly || !(event.target instanceof Node)) return;
+
+			const editorRoot = toolbarEl.closest<HTMLElement>('[data-rte-root]');
+			if (!editorRoot?.contains(event.target)) return;
+
+			ctx.updateState();
+			openLinkInput(ctx.currentLink, {
+				origin: 'content',
+				returnFocusTo: ctx.contentEl
+			});
+		}
+
+		document.addEventListener('rte-link-request', handleLinkRequest);
+		return () => {
+			document.removeEventListener('rte-link-request', handleLinkRequest);
+		};
+	});
+
 	function handleKeydown(event: KeyboardEvent) {
 		if (
 			event.key !== 'ArrowLeft' &&
@@ -66,11 +91,29 @@
 		items[nextIndex]!.focus();
 	}
 
-	function openLinkInput(currentLink: string | null) {
+	function focusToolbarItem(item: HTMLElement | null) {
+		if (!toolbarEl || !item) return;
+
+		for (const focusableItem of queryFocusable(toolbarEl)) {
+			focusableItem.setAttribute('tabindex', focusableItem === item ? '0' : '-1');
+		}
+
+		item.focus();
+	}
+
+	function openLinkInput(
+		currentLink: string | null,
+		options: {
+			origin?: LinkRequestOrigin;
+			returnFocusTo?: HTMLElement | null;
+		} = {}
+	) {
 		const sel = window.getSelection();
 		if (sel && sel.rangeCount > 0) {
 			savedSelection = sel.getRangeAt(0).cloneRange();
 		}
+		linkRequestOrigin = options.origin ?? 'toolbar';
+		linkReturnFocusEl = options.returnFocusTo ?? null;
 		linkUrl = currentLink ?? 'https://';
 		showLinkInput = true;
 		requestAnimationFrame(() => {
@@ -79,13 +122,7 @@
 		});
 	}
 
-	function closeLinkInput() {
-		showLinkInput = false;
-		linkUrl = '';
-		savedSelection = null;
-	}
-
-	function restoreSelection() {
+	function restoreSavedSelection() {
 		if (savedSelection) {
 			const sel = window.getSelection();
 			if (sel) {
@@ -94,6 +131,35 @@
 			}
 		}
 	}
+
+	function cancelLinkInput() {
+		if (linkRequestOrigin === 'content') {
+			restoreSavedSelection();
+			ctx.contentEl?.focus();
+		} else {
+			focusToolbarItem(linkReturnFocusEl);
+		}
+
+		closeLinkInput();
+	}
+
+	function applyLink() {
+		if (linkUrl) {
+			restoreSavedSelection();
+			ctx.insertLink(linkUrl);
+		}
+
+		closeLinkInput();
+		ctx.contentEl?.focus();
+	}
+
+	function closeLinkInput() {
+		showLinkInput = false;
+		linkUrl = '';
+		savedSelection = null;
+		linkReturnFocusEl = null;
+		linkRequestOrigin = 'toolbar';
+	}
 </script>
 
 <div
@@ -321,13 +387,11 @@
 			title="Link (Ctrl+K)"
 			tabindex={-1}
 			onmousedown={(e) => e.preventDefault()}
-			onclick={() => {
-				if (ctx.currentLink) {
-					openLinkInput(ctx.currentLink);
-				} else {
-					openLinkInput(null);
-				}
-			}}
+			onclick={(event) =>
+				openLinkInput(ctx.currentLink, {
+					origin: 'toolbar',
+					returnFocusTo: event.currentTarget as HTMLElement
+				})}
 		>
 			<svg
 				width="16"
@@ -382,19 +446,16 @@
 				<input
 					bind:value={linkUrl}
 					bind:this={linkInputEl}
+					aria-label="Link URL"
 					data-part="linkInput"
 					type="url"
 					placeholder="https://example.com"
 					onkeydown={(e) => {
 						if (e.key === 'Enter') {
 							e.preventDefault();
-							if (linkUrl) {
-								restoreSelection();
-								ctx.insertLink(linkUrl);
-							}
-							closeLinkInput();
+							applyLink();
 						} else if (e.key === 'Escape') {
-							closeLinkInput();
+							cancelLinkInput();
 						}
 					}}
 				/>
@@ -403,20 +464,14 @@
 					size="sm"
 					type="button"
 					data-part="linkApply"
-					onclick={() => {
-						if (linkUrl) {
-							restoreSelection();
-							ctx.insertLink(linkUrl);
-						}
-						closeLinkInput();
-					}}>Apply</Button
+					onclick={() => applyLink()}>Apply</Button
 				>
 				<Button
 					variant="outline"
 					size="sm"
 					type="button"
 					data-part="linkCancel"
-					onclick={() => closeLinkInput()}>Cancel</Button
+					onclick={() => cancelLinkInput()}>Cancel</Button
 				>
 			</div>
 		{/if}

package/dist/scroll-area/scroll-area.svelte

@@ -7,16 +7,28 @@
 		children: Snippet;
 	}
 
-	let { orientation = 'vertical', class: className, children, ...rest }: Props = $props();
+	let {
+		orientation = 'vertical',
+		role: roleProp,
+		tabindex = 0,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledBy,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const role = $derived(roleProp ?? (ariaLabel || ariaLabelledBy ? 'region' : undefined));
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
-	role="region"
-	aria-label="Scrollable content"
+	{role}
+	aria-label={ariaLabel}
+	aria-labelledby={ariaLabelledBy}
 	data-scroll-area
 	data-orientation={orientation}
-	tabindex={0}
+	{tabindex}
 	class={className}
 	{...rest}
 >

package/dist/select/select-content.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { fromAction } from 'svelte/attachments';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchorPosition } from '@dryui/primitives';
-	import type { Placement } from '@dryui/primitives';
+	import { createAnchoredPopover, type Placement } from '@dryui/primitives';
 	import { getSelectCtx } from './context.svelte.js';
 
 	const OPTION_SELECTOR = '[role="option"]:not([data-disabled])';
@@ -24,30 +24,17 @@
 
 	const ctx = getSelectCtx();
 
-	let el = $state<HTMLDivElement>();
-
-	const anchor = createAnchorPosition(
-		() => ctx.triggerEl,
-		() => el ?? null,
-		{
-			get placement() {
-				return placement;
-			},
-			get offset() {
-				return offset;
-			}
-		}
-	);
+	let el = $state<HTMLDivElement | null>(null);
 
-	$effect(() => {
-		if (!el) return;
+	function attachContent(node: HTMLDivElement) {
+		el = node;
 
-		el.style.cssText = typeof style === 'string' ? style : '';
-		const positionStyles = anchor.styles;
-		for (const [key, value] of Object.entries(positionStyles)) {
-			el.style.setProperty(key, value);
-		}
-	});
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
 
 	function getOptionItems(container: HTMLElement): HTMLElement[] {
 		return Array.from(container.querySelectorAll<HTMLElement>(OPTION_SELECTOR));
@@ -59,12 +46,14 @@
 		items[clamped]?.focus();
 	}
 
-	$effect(() => {
-		if (ctx.open && el && !el.matches(':popover-open')) {
-			el.showPopover();
+	const popover = createAnchoredPopover({
+		triggerEl: () => ctx.triggerEl,
+		contentEl: () => el ?? null,
+		open: () => ctx.open,
+		placement: () => placement,
+		offset: () => offset,
+		onAfterShow: () => {
 			focusFirstSelectItem();
-		} else if (!ctx.open && el?.matches(':popover-open')) {
-			el.hidePopover();
 		}
 	});
 
@@ -127,7 +116,8 @@
 </script>
 
 <div
-	bind:this={el}
+	{@attach attachContent}
+	{@attach fromAction(popover.applyPosition, () => style)}
 	popover="auto"
 	role="listbox"
 	id={ctx.contentId}
@@ -156,7 +146,7 @@
 		margin: 0;
 
 		display: grid;
-		grid-template-columns: minmax(12rem, max-content);
+		grid-template-columns: minmax(max(12rem, anchor-size(inline)), max-content);
 		background: var(--dry-overlay-bg, var(--dry-color-bg-overlay));
 		border: 1px solid var(--dry-overlay-border, var(--dry-color-stroke-weak));
 		border-radius: var(--dry-overlay-radius, var(--dry-radius-md));

package/dist/select/select-content.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Placement } from '@dryui/primitives';
+import { type Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     placement?: Placement;
     offset?: number;

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

@@ -39,6 +39,7 @@
 	const contentId = generateFormId('select-content');
 
 	let displayText = $state('');
+	let triggerEl = $state<HTMLElement | null>(null);
 
 	setSelectCtx({
 		get open() {
@@ -55,7 +56,12 @@
 		},
 		triggerId,
 		contentId,
-		triggerEl: null,
+		get triggerEl() {
+			return triggerEl;
+		},
+		set triggerEl(element: HTMLElement | null) {
+			triggerEl = element;
+		},
 		show() {
 			if (!disabled) open = true;
 		},

package/dist/shimmer/shimmer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { observeInViewport, observePageVisibility } from '@dryui/primitives/internal/motion';
 
 	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
 		color?: string;
@@ -17,27 +18,36 @@
 	}: Props = $props();
 
 	function setup(node: HTMLSpanElement) {
+		let onScreen = true;
+		let tabVisible = true;
+
+		const apply = () => {
+			if (onScreen && tabVisible) node.dataset.active = '';
+			else delete node.dataset.active;
+		};
+
 		$effect(() => {
 			node.style.setProperty('--dry-shimmer-color', color);
 			node.style.setProperty('--dry-shimmer-duration', `${duration}s`);
 		});
 
 		$effect(() => {
-			if (typeof IntersectionObserver === 'undefined') {
-				node.dataset.active = '';
-				return;
-			}
-			const io = new IntersectionObserver(
-				(entries) => {
-					for (const entry of entries) {
-						if (entry.isIntersecting) node.dataset.active = '';
-						else delete node.dataset.active;
-					}
+			const unsubscribeViewport = observeInViewport(
+				node,
+				(inView) => {
+					onScreen = inView;
+					apply();
 				},
 				{ rootMargin: '100px' }
 			);
-			io.observe(node);
-			return () => io.disconnect();
+			const unsubscribeVisibility = observePageVisibility((visible) => {
+				tabVisible = visible;
+				apply();
+			});
+			return () => {
+				unsubscribeViewport();
+				unsubscribeVisibility();
+			};
 		});
 	}
 </script>

package/dist/transfer/transfer-item.svelte

@@ -25,12 +25,9 @@
 </script>
 
 <label
-	role="option"
 	data-transfer-item
 	data-disabled={disabled ? '' : undefined}
 	data-selected={isSelected ? '' : undefined}
-	aria-selected={isSelected}
-	aria-disabled={disabled}
 	{...rest}
 >
 	<Checkbox checked={isSelected} {disabled} onchange={toggle} size="sm" />

package/dist/transfer/transfer-list-input.svelte

@@ -58,9 +58,8 @@
 	{/if}
 
 	<div
-		role="listbox"
+		role="group"
 		aria-label={title ?? (type === 'source' ? 'Available items' : 'Selected items')}
-		aria-multiselectable="true"
 		data-transfer-list
 		data-type={type}
 		{...rest}
@@ -88,14 +87,10 @@
 				{@render content({ items: filterItems(items) })}
 			{:else}
 				{#each filterItems(items) as item (item.key)}
-					<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 					<label
-						role="option"
 						data-transfer-item
 						data-disabled={item.disabled ? '' : undefined}
 						data-selected={selectedSet.has(item.key) ? '' : undefined}
-						aria-selected={selectedSet.has(item.key)}
-						aria-disabled={item.disabled ?? false}
 					>
 						<Checkbox
 							checked={selectedSet.has(item.key)}

package/dist/tree/context.svelte.d.ts

@@ -1,12 +1,18 @@
 interface TreeContext {
-    readonly expandedItems: Set<string>;
+    readonly expandedItems: ReadonlySet<string>;
     readonly selectedItem: string | null;
+    readonly focusedItem: string | null;
     toggleItem: (id: string) => void;
     expandItem: (id: string) => void;
     collapseItem: (id: string) => void;
     selectItem: (id: string) => void;
+    setFocusedItem: (id: string) => void;
+    registerBranch: (id: string) => void;
+    unregisterBranch: (id: string) => void;
     isExpanded: (id: string) => boolean;
     isSelected: (id: string) => boolean;
+    isFocused: (id: string) => boolean;
+    hasChildren: (id: string) => boolean;
 }
 export declare const setTreeCtx: (ctx: TreeContext) => TreeContext, getTreeCtx: () => TreeContext;
 interface TreeItemContext {

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getTreeCtx, getTreeItemCtx } from './context.svelte.js';
@@ -7,18 +8,16 @@
 		children: Snippet;
 	}
 
-	let { class: className, children, style, ...rest }: Props = $props();
+	let { class: className, children, ...rest }: Props = $props();
 
 	const ctx = getTreeCtx();
 	const itemCtx = getTreeItemCtx();
 	const open = $derived(ctx.isExpanded(itemCtx.itemId));
-
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--_rows', open ? '1fr' : '0fr');
-		});
-	}
+	const branchItemId = itemCtx.itemId;
+	ctx.registerBranch(branchItemId);
+	onDestroy(() => {
+		ctx.unregisterBranch(branchItemId);
+	});
 </script>
 
 <div
@@ -28,7 +27,6 @@
 	data-state={open ? 'open' : 'closed'}
 	class={className}
 	{...rest}
-	{@attach applyStyles}
 >
 	<div class="tree-item-inner">
 		{@render children()}
@@ -42,8 +40,12 @@
 
 	[data-part='children'] {
 		display: grid;
-		grid-template-rows: var(--_rows, 0fr);
+		grid-template-rows: 0fr;
 		padding-left: var(--dry-tree-indent, var(--dry-space-4));
 		transition: grid-template-rows var(--dry-duration-normal) var(--dry-ease-default);
 	}
+
+	[data-part='children'][data-state='open'] {
+		grid-template-rows: 1fr;
+	}
 </style>

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { getTreeCtx, getTreeItemCtx } from './context.svelte.js';
 
-	interface Props extends HTMLButtonAttributes {
+	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
 	}
 
@@ -13,24 +13,17 @@
 	const itemCtx = getTreeItemCtx();
 </script>
 
-<button
-	type="button"
+<div
 	data-part="label"
-	data-tree-label
 	data-selected={ctx.isSelected(itemCtx.itemId) || undefined}
 	class={className}
-	onclick={() => {
-		ctx.selectItem(itemCtx.itemId);
-		ctx.toggleItem(itemCtx.itemId);
-	}}
 	{...rest}
 >
 	{@render children()}
-</button>
+</div>
 
 <style>
 	[data-part='label'] {
-		appearance: none;
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
@@ -44,9 +37,10 @@
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		font-family: var(--dry-font-sans);
 		color: var(--dry-color-text-strong);
+		outline: var(--dry-tree-item-focus-ring, none);
+		outline-offset: var(--dry-tree-item-focus-offset, 0px);
 		cursor: pointer;
 		user-select: none;
-		outline: none;
 		transition: background var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
@@ -54,11 +48,6 @@
 		background: var(--dry-tree-item-hover-bg, var(--dry-color-fill));
 	}
 
-	[data-part='label']:focus-visible {
-		outline: var(--dry-focus-ring);
-		outline-offset: 2px;
-	}
-
 	[data-part='label'][data-selected] {
 		background: var(--dry-tree-item-selected-bg, var(--dry-color-fill-brand-weak));
 		color: var(--dry-tree-item-selected-color, var(--dry-color-text-brand));

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
 }
 declare const TreeItemLabel: import("svelte").Component<Props, {}, "">;

package/dist/tree/tree-item.svelte

@@ -12,6 +12,8 @@
 
 	const ctx = getTreeCtx();
 	const expanded = $derived(ctx.isExpanded(itemId));
+	const focused = $derived(ctx.isFocused(itemId));
+	const hasChildren = $derived(ctx.hasChildren(itemId));
 	const selected = $derived(ctx.isSelected(itemId));
 
 	setTreeItemCtx({
@@ -23,14 +25,39 @@
 
 <div
 	role="treeitem"
-	aria-expanded={expanded}
+	tabindex={focused ? 0 : -1}
+	aria-expanded={hasChildren ? expanded : undefined}
 	aria-selected={selected}
+	data-branch={hasChildren || undefined}
 	data-part="item"
 	data-expanded={expanded || undefined}
+	data-focused={focused || undefined}
 	data-selected={selected || undefined}
 	data-item-id={itemId}
 	class={className}
+	onclick={(e) => {
+		(e.currentTarget as HTMLElement).focus();
+		ctx.selectItem(itemId);
+	}}
+	ondblclick={() => {
+		if (hasChildren) {
+			ctx.toggleItem(itemId);
+		}
+	}}
 	{...rest}
 >
 	{@render children()}
 </div>
+
+<style>
+	[data-part='item'] {
+		outline: none;
+		--dry-tree-item-focus-ring: none;
+		--dry-tree-item-focus-offset: 0px;
+	}
+
+	[data-part='item']:focus-visible {
+		--dry-tree-item-focus-ring: var(--dry-focus-ring);
+		--dry-tree-item-focus-offset: 2px;
+	}
+</style>