@dryui/ui 1.3.0 → 1.4.0

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

@@ -1,13 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface CountryInfo {
-		code: string;
-		name: string;
-		dialCode: string;
-		flag: string;
-		format?: string;
-	}
+	import { COUNTRY_DATA, type CountryInfo } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
 		value?: string;
@@ -33,150 +26,7 @@
 		...rest
 	}: Props = $props();
 
-	const defaultCountries: CountryInfo[] = [
-		{
-			code: 'US',
-			name: 'United States',
-			dialCode: '+1',
-			flag: '\u{1F1FA}\u{1F1F8}',
-			format: '### ### ####'
-		},
-		{
-			code: 'GB',
-			name: 'United Kingdom',
-			dialCode: '+44',
-			flag: '\u{1F1EC}\u{1F1E7}',
-			format: '#### ######'
-		},
-		{
-			code: 'CA',
-			name: 'Canada',
-			dialCode: '+1',
-			flag: '\u{1F1E8}\u{1F1E6}',
-			format: '### ### ####'
-		},
-		{
-			code: 'AU',
-			name: 'Australia',
-			dialCode: '+61',
-			flag: '\u{1F1E6}\u{1F1FA}',
-			format: '### ### ###'
-		},
-		{
-			code: 'DE',
-			name: 'Germany',
-			dialCode: '+49',
-			flag: '\u{1F1E9}\u{1F1EA}',
-			format: '### #######'
-		},
-		{
-			code: 'FR',
-			name: 'France',
-			dialCode: '+33',
-			flag: '\u{1F1EB}\u{1F1F7}',
-			format: '# ## ## ## ##'
-		},
-		{
-			code: 'IT',
-			name: 'Italy',
-			dialCode: '+39',
-			flag: '\u{1F1EE}\u{1F1F9}',
-			format: '### ### ####'
-		},
-		{
-			code: 'ES',
-			name: 'Spain',
-			dialCode: '+34',
-			flag: '\u{1F1EA}\u{1F1F8}',
-			format: '### ## ## ##'
-		},
-		{
-			code: 'BR',
-			name: 'Brazil',
-			dialCode: '+55',
-			flag: '\u{1F1E7}\u{1F1F7}',
-			format: '## ##### ####'
-		},
-		{
-			code: 'IN',
-			name: 'India',
-			dialCode: '+91',
-			flag: '\u{1F1EE}\u{1F1F3}',
-			format: '##### #####'
-		},
-		{
-			code: 'CN',
-			name: 'China',
-			dialCode: '+86',
-			flag: '\u{1F1E8}\u{1F1F3}',
-			format: '### #### ####'
-		},
-		{
-			code: 'JP',
-			name: 'Japan',
-			dialCode: '+81',
-			flag: '\u{1F1EF}\u{1F1F5}',
-			format: '## #### ####'
-		},
-		{
-			code: 'KR',
-			name: 'South Korea',
-			dialCode: '+82',
-			flag: '\u{1F1F0}\u{1F1F7}',
-			format: '## #### ####'
-		},
-		{
-			code: 'MX',
-			name: 'Mexico',
-			dialCode: '+52',
-			flag: '\u{1F1F2}\u{1F1FD}',
-			format: '## #### ####'
-		},
-		{
-			code: 'RU',
-			name: 'Russia',
-			dialCode: '+7',
-			flag: '\u{1F1F7}\u{1F1FA}',
-			format: '### ### ## ##'
-		},
-		{
-			code: 'SA',
-			name: 'Saudi Arabia',
-			dialCode: '+966',
-			flag: '\u{1F1F8}\u{1F1E6}',
-			format: '## ### ####'
-		},
-		{
-			code: 'AE',
-			name: 'United Arab Emirates',
-			dialCode: '+971',
-			flag: '\u{1F1E6}\u{1F1EA}',
-			format: '## ### ####'
-		},
-		{
-			code: 'SG',
-			name: 'Singapore',
-			dialCode: '+65',
-			flag: '\u{1F1F8}\u{1F1EC}',
-			format: '#### ####'
-		},
-		{
-			code: 'NL',
-			name: 'Netherlands',
-			dialCode: '+31',
-			flag: '\u{1F1F3}\u{1F1F1}',
-			format: '# ########'
-		},
-		{
-			code: 'SE',
-			name: 'Sweden',
-			dialCode: '+46',
-			flag: '\u{1F1F8}\u{1F1EA}',
-			format: '## ### ## ##'
-		}
-	];
-
-	const countries = $derived(countriesProp ?? defaultCountries);
+	const countries = $derived(countriesProp ?? COUNTRY_DATA);
 	let manualCountryCode = $derived(defaultCountry);
 
 	const orderedCountries = $derived(

package/dist/phone-input/phone-input-select.svelte.d.ts

@@ -1,11 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface CountryInfo {
-    code: string;
-    name: string;
-    dialCode: string;
-    flag: string;
-    format?: string;
-}
+import { type CountryInfo } from '@dryui/primitives';
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
     value?: string;
     defaultCountry?: string;

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/tabs/tabs-list.svelte

@@ -79,6 +79,14 @@
 		justify-content: var(--dry-tabs-list-justify, start);
 		border-bottom: 1px solid var(--dry-color-stroke-weak);
 		gap: 0;
+		overflow-x: auto;
+		overscroll-behavior-x: contain;
+		scrollbar-width: none;
+		contain: inline-size;
+	}
+
+	[data-tabs-list]::-webkit-scrollbar {
+		display: none;
 	}
 
 	[data-tabs-list][data-orientation='vertical'] {
@@ -86,5 +94,9 @@
 		grid-auto-columns: initial;
 		border-bottom: none;
 		border-right: 1px solid var(--dry-color-stroke-weak);
+		overflow-x: visible;
+		overflow-y: auto;
+		overscroll-behavior-x: auto;
+		overscroll-behavior-y: contain;
 	}
 </style>

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 {