@dryui/ui 3.0.0 → 4.0.1

package/src/list/list-root.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setListCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLUListElement> {
+		dense?: boolean;
+		disablePadding?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		dense = false,
+		disablePadding = false,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	setListCtx({
+		get dense() {
+			return dense;
+		},
+		get disablePadding() {
+			return disablePadding;
+		}
+	});
+</script>
+
+<ul
+	role="list"
+	data-list-root
+	data-dense={dense || undefined}
+	data-disable-padding={disablePadding || undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</ul>
+
+<style>
+	[data-list-root] {
+		--dry-list-gap: var(--dry-space-1);
+		--dry-list-padding: var(--dry-space-2);
+		--dry-list-color: var(--dry-color-text-strong);
+		--dry-list-item-padding: var(--dry-space-2_5) var(--dry-space-3);
+		--dry-list-item-gap: var(--dry-space-3);
+		--dry-list-item-radius: min(
+			var(--dry-control-radius, var(--dry-radius-md)),
+			var(--dry-space-4)
+		);
+		--dry-list-item-hover-bg: color-mix(in srgb, var(--dry-color-fill-brand) 8%, transparent);
+		--dry-list-item-active-bg: color-mix(in srgb, var(--dry-color-fill-brand) 12%, transparent);
+		--dry-list-item-icon-color: var(--dry-color-icon-weak, var(--dry-color-text-weak));
+		--dry-list-primary-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--dry-list-secondary-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--dry-list-secondary-color: var(--dry-color-text-weak);
+		--dry-list-subheader-color: var(--dry-color-text-weak);
+
+		display: grid;
+		gap: var(--dry-list-gap);
+		margin: 0;
+		padding: var(--dry-list-padding);
+		list-style: none;
+		color: var(--dry-list-color);
+	}
+
+	[data-list-root][data-disable-padding='true'] {
+		--dry-list-padding: 0;
+	}
+</style>

package/src/list/list-subheader.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLLIElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<li role="presentation" data-list-subheader class={className} {...rest}>
+	{@render children()}
+</li>
+
+<style>
+	[data-list-subheader] {
+		padding: var(--dry-space-1_5) var(--dry-space-3) var(--dry-space-1);
+		font-size: var(--dry-list-secondary-size);
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: var(--dry-list-subheader-color);
+	}
+</style>

package/src/list/list.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'List',
+	description: 'Structured list with items, icons, and subheaders',
+	category: 'display',
+	tags: ['list', 'item', 'icon', 'dense']
+};

package/src/listbox/context.svelte.ts

@@ -0,0 +1,10 @@
+import { createContext } from '@dryui/primitives';
+
+export interface ListboxContext {
+	readonly disabled: boolean;
+	readonly multiple: boolean;
+	select: (value: string) => void;
+	isSelected: (value: string) => boolean;
+}
+
+export const [setListboxCtx, getListboxCtx] = createContext<ListboxContext>('listbox');

package/src/listbox/index.ts

@@ -0,0 +1,12 @@
+export type { ListboxRootProps, ListboxItemProps } from '@dryui/primitives';
+
+import ListboxRoot from './listbox-root.svelte';
+import ListboxItem from './listbox-item.svelte';
+
+export const Listbox: {
+	Root: typeof ListboxRoot;
+	Item: typeof ListboxItem;
+} = {
+	Root: ListboxRoot,
+	Item: ListboxItem
+};

package/src/listbox/listbox-item.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ListboxItemProps } from './index.js';
+	import { getListboxCtx } from './context.svelte.js';
+
+	let { class: className, value, disabled = false, children, ...rest }: ListboxItemProps = $props();
+
+	const ctx = getListboxCtx();
+
+	const isDisabled = $derived(disabled || ctx.disabled);
+	const selected = $derived(ctx.isSelected(value));
+
+	function handleClick() {
+		if (!isDisabled) ctx.select(value);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			if (!isDisabled) ctx.select(value);
+		}
+	}
+</script>
+
+<div
+	role="option"
+	aria-selected={selected}
+	aria-disabled={isDisabled || undefined}
+	data-listbox-item
+	data-selected={selected ? '' : undefined}
+	data-disabled={isDisabled ? '' : undefined}
+	data-value={value}
+	tabindex={isDisabled ? -1 : 0}
+	class={className}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-listbox-item] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-listbox-item-padding-y, var(--dry-space-2))
+			var(--dry-listbox-item-padding-x, var(--dry-space-3));
+		border-radius: var(
+			--dry-listbox-item-radius,
+			min(var(--dry-control-radius, var(--dry-radius-md)), var(--dry-space-4))
+		);
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-listbox-item]:hover:not([data-disabled]),
+	[data-listbox-item]:focus-visible {
+		background: var(--dry-listbox-item-hover-bg, var(--dry-color-fill-hover));
+	}
+
+	[data-listbox-item][data-selected] {
+		background: var(--dry-listbox-item-selected-bg, var(--dry-color-fill-selected));
+		color: var(--dry-listbox-item-selected-color, var(--dry-color-on-brand));
+		font-weight: 600;
+		box-shadow: inset 0 0 0 1px
+			var(--dry-listbox-item-selected-border, var(--dry-color-stroke-selected));
+	}
+
+	[data-listbox-item][data-selected]:hover:not([data-disabled]),
+	[data-listbox-item][data-selected]:focus-visible {
+		background: var(--dry-listbox-item-selected-bg, var(--dry-color-fill-selected));
+	}
+
+	[data-listbox-item][data-disabled] {
+		color: var(--dry-color-text-disabled);
+		opacity: 1;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>

package/src/listbox/listbox-root.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ListboxRootProps } from './index.js';
+	import { setListboxCtx } from './context.svelte.js';
+
+	let {
+		value = $bindable(''),
+		multiple = false,
+		disabled = false,
+		onvaluechange,
+		class: className,
+		children,
+		...rest
+	}: ListboxRootProps = $props();
+
+	function select(itemValue: string) {
+		if (disabled) return;
+		if (multiple) {
+			const arr = Array.isArray(value) ? value : [];
+			const idx = arr.indexOf(itemValue);
+			const next = idx >= 0 ? arr.filter((v) => v !== itemValue) : [...arr, itemValue];
+			value = next;
+			onvaluechange?.(next);
+		} else {
+			value = itemValue;
+			onvaluechange?.(itemValue);
+		}
+	}
+
+	function isSelected(itemValue: string): boolean {
+		if (multiple) {
+			return Array.isArray(value) ? value.includes(itemValue) : false;
+		}
+		return value === itemValue;
+	}
+
+	setListboxCtx({
+		get disabled() {
+			return disabled;
+		},
+		get multiple() {
+			return multiple;
+		},
+		select,
+		isSelected
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		const target = e.target as HTMLElement;
+		const root = e.currentTarget as HTMLElement;
+		const items = Array.from(
+			root.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])')
+		);
+		if (!items.length) return;
+
+		const currentIndex = items.indexOf(target);
+		let nextIndex = -1;
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+				break;
+			case 'Home':
+				e.preventDefault();
+				nextIndex = 0;
+				break;
+			case 'End':
+				e.preventDefault();
+				nextIndex = items.length - 1;
+				break;
+			default:
+				return;
+		}
+
+		if (nextIndex >= 0) {
+			items[nextIndex]?.focus();
+		}
+	}
+</script>
+
+<div
+	role="listbox"
+	aria-multiselectable={multiple || undefined}
+	aria-disabled={disabled || undefined}
+	data-listbox-root
+	data-disabled={disabled || undefined}
+	class={className}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-listbox-root] {
+		display: grid;
+		gap: var(--dry-space-1);
+		padding: var(--dry-listbox-padding, var(--dry-space-1));
+		background: var(--dry-listbox-bg, var(--dry-color-bg-overlay));
+		border: 1px solid var(--dry-listbox-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-listbox-radius, var(--dry-radius-lg));
+		font-family: var(--dry-font-sans);
+	}
+
+	[data-listbox-root]:focus-within {
+		border-color: var(--dry-color-stroke-focus);
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+</style>

package/src/listbox/listbox.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Listbox',
+	description: 'Single or multi-select list with keyboard navigation',
+	category: 'input',
+	tags: ['listbox', 'select', 'option', 'keyboard']
+};

package/src/logo-mark/index.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface LogoMarkProps extends HTMLAttributes<HTMLSpanElement> {
+	src?: string;
+	alt?: string;
+	fallback?: string;
+	size?: 'sm' | 'md' | 'lg';
+	shape?: 'square' | 'rounded' | 'circle';
+	color?: 'brand' | 'neutral' | 'error' | 'warning' | 'success' | 'info';
+}
+
+export { default as LogoMark } from './logo-mark.svelte';

package/src/logo-mark/logo-mark.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'LogoMark',
+	description: 'Brand mark, status indicator, or category badge with image or fallback text',
+	category: 'display',
+	tags: ['logo', 'mark', 'brand', 'indicator', 'badge', 'icon']
+};

package/src/logo-mark/logo-mark.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		src?: string;
+		alt?: string;
+		fallback?: string;
+		size?: 'sm' | 'md' | 'lg';
+		shape?: 'square' | 'rounded' | 'circle';
+		color?: 'brand' | 'neutral' | 'error' | 'warning' | 'success' | 'info';
+	}
+
+	let {
+		src,
+		alt = '',
+		fallback,
+		size = 'md',
+		shape = 'rounded',
+		color = 'neutral',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let failedSrc = $state<string | null>(null);
+	const showImage = $derived(Boolean(src) && src !== failedSrc);
+
+	function handleError() {
+		failedSrc = src ?? null;
+	}
+
+	function getFallbackText(): string {
+		const source = (fallback ?? alt).trim();
+		if (!source) return '';
+
+		const compact = source.replace(/[^\p{L}\p{N}]+/gu, '');
+		const characters = Array.from(compact || source);
+		return characters.slice(0, 2).join('').toUpperCase();
+	}
+</script>
+
+<span
+	role="img"
+	aria-label={alt}
+	data-logo-mark
+	{...variantAttrs({ size, shape, color })}
+	class={className}
+	{...rest}
+>
+	{#if showImage}
+		<img {src} {alt} onerror={handleError} />
+	{:else}
+		<span aria-hidden="true">{getFallbackText()}</span>
+	{/if}
+</span>
+
+<style>
+	[data-logo-mark] {
+		--_logo-mark-size-default: 32px;
+		--_logo-mark-radius-default: var(--dry-radius-md);
+		--_logo-mark-bg-default: var(--dry-color-fill);
+		--_logo-mark-color-default: var(--dry-color-text-weak);
+		--_logo-mark-font-size-default: var(--dry-type-small-size, var(--dry-text-sm-size));
+
+		display: inline-grid;
+		place-items: center;
+		aspect-ratio: 1;
+		height: var(--dry-logo-mark-size, var(--_logo-mark-size-default));
+		border-radius: var(--dry-logo-mark-radius, var(--_logo-mark-radius-default));
+		background: var(--dry-logo-mark-bg, var(--_logo-mark-bg-default));
+		color: var(--dry-logo-mark-color, var(--_logo-mark-color-default));
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-logo-mark-font-size, var(--_logo-mark-font-size-default));
+		font-weight: 600;
+		line-height: 1;
+		overflow: hidden;
+		user-select: none;
+	}
+
+	[data-logo-mark] img {
+		block-size: 100%;
+		aspect-ratio: 1;
+		object-fit: cover;
+		border-radius: inherit;
+	}
+
+	[data-logo-mark] > span {
+		display: grid;
+		place-items: center;
+	}
+
+	/* -- Shapes ------------------------------------------------------------- */
+
+	[data-shape='square'] {
+		--_logo-mark-radius-default: var(--dry-radius-sm);
+	}
+
+	[data-shape='rounded'] {
+		--_logo-mark-radius-default: var(--dry-radius-md);
+	}
+
+	[data-shape='circle'] {
+		--_logo-mark-radius-default: var(--dry-radius-full);
+	}
+
+	/* -- Sizes -------------------------------------------------------------- */
+
+	[data-size='sm'] {
+		--_logo-mark-size-default: 24px;
+		--_logo-mark-font-size-default: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+	}
+
+	[data-size='md'] {
+		--_logo-mark-size-default: 32px;
+		--_logo-mark-font-size-default: var(--dry-type-small-size, var(--dry-text-sm-size));
+	}
+
+	[data-size='lg'] {
+		--_logo-mark-size-default: 40px;
+		--_logo-mark-font-size-default: var(--dry-type-small-size, var(--dry-text-base-size));
+	}
+
+	/* -- Colors ------------------------------------------------------------- */
+
+	[data-color='neutral'] {
+		--_logo-mark-bg-default: var(--dry-color-fill);
+		--_logo-mark-color-default: var(--dry-color-text-weak);
+	}
+
+	[data-color='brand'] {
+		--_logo-mark-bg-default: var(--dry-color-fill-brand-weak);
+		--_logo-mark-color-default: var(--dry-color-text-brand);
+	}
+
+	[data-color='error'] {
+		--_logo-mark-bg-default: var(--dry-color-fill-error-weak);
+		--_logo-mark-color-default: var(--dry-color-text-error);
+	}
+
+	[data-color='warning'] {
+		--_logo-mark-bg-default: var(--dry-color-fill-warning-weak);
+		--_logo-mark-color-default: var(--dry-color-text-warning);
+	}
+
+	[data-color='success'] {
+		--_logo-mark-bg-default: var(--dry-color-fill-success-weak);
+		--_logo-mark-color-default: var(--dry-color-text-success);
+	}
+
+	[data-color='info'] {
+		--_logo-mark-bg-default: var(--dry-color-fill-info-weak);
+		--_logo-mark-color-default: var(--dry-color-text-info);
+	}
+</style>

package/src/map/context.svelte.ts

@@ -0,0 +1,19 @@
+import { createContext } from '@dryui/primitives';
+import type { LngLat, MapInstance, MapLibrary, MapMarkerInstance } from '@dryui/primitives';
+
+export interface MapContext {
+	readonly map: MapInstance | null;
+	readonly lib: MapLibrary | null;
+	readonly container: HTMLDivElement | null;
+	readonly loaded: boolean;
+	addMarker: (id: string, position: LngLat, element?: HTMLElement) => void;
+	removeMarker: (id: string) => void;
+	flyTo: (center: LngLat, zoom?: number) => void;
+}
+export const [setMapCtx, getMapCtx] = createContext<MapContext>('map');
+
+export interface MarkerContext {
+	readonly marker: MapMarkerInstance | null;
+	readonly position: LngLat;
+}
+export const [setMarkerCtx, getMarkerCtx] = createContext<MarkerContext>('map-marker');

package/src/map/index.ts

@@ -0,0 +1,77 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LngLat, MapInstance, MapOptions, GeoJsonData } from '@dryui/primitives';
+
+export type {
+	LngLat,
+	MapInstance,
+	MapLibrary,
+	MapMarkerInstance,
+	MapPopupInstance,
+	MapOptions,
+	MapControl,
+	MapSource,
+	MarkerOptions,
+	PopupOptions,
+	GeoJsonData
+} from '@dryui/primitives';
+
+export interface MapRootProps extends HTMLAttributes<HTMLDivElement> {
+	center?: LngLat;
+	zoom?: number;
+	minZoom?: number;
+	maxZoom?: number;
+	mapStyle?: string;
+	createMap?: (container: HTMLDivElement, options: MapOptions) => MapInstance;
+	children?: Snippet;
+}
+
+export interface MapMarkerProps {
+	position: LngLat;
+	color?: string;
+	children?: Snippet;
+	class?: string;
+}
+
+export interface MapPopupProps {
+	maxWidth?: string;
+	closeButton?: boolean;
+	closeOnClick?: boolean;
+	children: Snippet;
+	class?: string;
+}
+
+export interface MapLayerProps {
+	id: string;
+	type: 'heatmap' | 'polygon' | 'fill' | 'circle' | 'line';
+	data: GeoJsonData;
+	color?: string;
+	opacity?: number;
+}
+
+export interface MapControlsProps {
+	position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	navigation?: boolean;
+	fullscreen?: boolean;
+	children?: Snippet;
+}
+
+import MapRoot from './map-root.svelte';
+import MapMarker from './map-marker.svelte';
+import MapPopup from './map-popup.svelte';
+import MapLayer from './map-layer.svelte';
+import MapControls from './map-controls.svelte';
+
+export const Map: {
+	Root: typeof MapRoot;
+	Marker: typeof MapMarker;
+	Popup: typeof MapPopup;
+	Layer: typeof MapLayer;
+	Controls: typeof MapControls;
+} = {
+	Root: MapRoot,
+	Marker: MapMarker,
+	Popup: MapPopup,
+	Layer: MapLayer,
+	Controls: MapControls
+};

package/src/map/map-controls.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { getMapCtx } from './context.svelte.js';
+	import type { MapControl } from '@dryui/primitives';
+
+	interface Props {
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		navigation?: boolean;
+		fullscreen?: boolean;
+		children?: Snippet;
+	}
+
+	let {
+		position = 'top-right',
+		navigation = false,
+		fullscreen = false,
+		children
+	}: Props = $props();
+
+	const ctx = getMapCtx();
+	let controls: MapControl[] = [];
+
+	$effect(() => {
+		if (!ctx.loaded || !ctx.map || !ctx.lib) return;
+
+		cleanupControls();
+
+		if (navigation && ctx.lib.NavigationControl) {
+			try {
+				const nav = new ctx.lib.NavigationControl();
+				ctx.map.addControl(nav, position);
+				controls.push(nav);
+			} catch {
+				// Control creation failed
+			}
+		}
+
+		if (fullscreen && ctx.lib.FullscreenControl) {
+			try {
+				const fs = new ctx.lib.FullscreenControl();
+				ctx.map.addControl(fs, position);
+				controls.push(fs);
+			} catch {
+				// Control creation failed
+			}
+		}
+	});
+
+	function cleanupControls() {
+		for (const control of controls) {
+			try {
+				ctx.map?.removeControl(control);
+			} catch {
+				// Control may already be removed
+			}
+		}
+		controls = [];
+	}
+
+	onDestroy(() => {
+		cleanupControls();
+	});
+</script>
+
+{#if children}
+	{@render children()}
+{/if}