lapikit 0.7.2 → 0.7.4

package/dist/components/dropdown/dropdown.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { useClassName, useStyles, clickOutside, useElevation } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
-	import { getPositions } from './dropdown.svelte.js';
+	import {
+		clickOutside,
+		floating,
+		useComponentAttrs,
+		useElevation,
+		type FloatingAnchor
+	} from '../../utils';
 	import type { DropdownProps, ModelDropdownProps } from './dropdown.types.js';
 
 	let {
@@ -14,68 +18,37 @@
 		closeOnClick = false,
 		openOnHover = false,
 		color,
-		background,
 		density = 'default',
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		elevation,
 		...rest
 	}: DropdownProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs('kit-dropdown-content', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
 
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-dropdown-content',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-dropdown-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-dropdown-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-
-	const positioner = getPositions();
-
 	let contentRef = $state<HTMLElement | null>(null);
 	let activatorRef = $state<HTMLElement | PointerEvent | null>(null);
 	let open = $state(false);
-	let axis = $state(positioner.values);
-	let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+	// a pointer event opens the menu at the position of the pointer (context menu)
+	let anchor = $derived<FloatingAnchor | null>(
+		activatorRef instanceof HTMLElement
+			? activatorRef
+			: activatorRef
+				? { x: activatorRef.clientX, y: activatorRef.clientY }
+				: null
+	);
 
 	const clearHoverTimeout = () => {
-		if (timeoutId) {
-			clearTimeout(timeoutId);
-			timeoutId = null;
-		}
-	};
-
-	const updatePosition = () => {
-		if (!contentRef || !activatorRef) return;
-		positioner.update(activatorRef, contentRef, position, false, true);
-		axis = positioner.values;
+		if (timeoutId) clearTimeout(timeoutId);
+		timeoutId = null;
 	};
 
 	const handleToggle = (element: HTMLElement | PointerEvent | null) => {
@@ -89,10 +62,6 @@
 		open = false;
 	};
 
-	const handleContentClick = () => {
-		if (closeOnClick && open) open = false;
-	};
-
 	const handleMouseEvent = (
 		state: 'open' | 'close',
 		element: HTMLElement | PointerEvent | null
@@ -112,41 +81,30 @@
 		}, 150);
 	};
 
-	let model: ModelDropdownProps = {
+	const model: ModelDropdownProps = {
 		get open() {
 			return open;
 		},
-		close: () => handleClose(),
-		toggle: (element) => handleToggle(element)
+		close: handleClose,
+		toggle: handleToggle
 	};
 
 	$effect(() => {
-		if (open && contentRef && activatorRef) {
-			updatePosition();
-		}
+		ref = contentRef;
 	});
 
 	$effect(() => {
 		if (!open) return;
 
-		const close = () => (open = false);
-
-		window.addEventListener('scroll', close, { passive: true });
-		window.addEventListener('resize', updatePosition);
-
-		return () => {
-			window.removeEventListener('scroll', close);
-			window.removeEventListener('resize', updatePosition);
+		const onKeydown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') handleClose();
 		};
-	});
 
-	$effect(() => {
-		ref = contentRef;
+		document.addEventListener('keydown', onKeydown);
+		return () => document.removeEventListener('keydown', onKeydown);
 	});
 
-	onDestroy(() => {
-		clearHoverTimeout();
-	});
+	onDestroy(clearHoverTimeout);
 </script>
 
 {@render activator?.(model, (state, element) => handleMouseEvent(state, element))}
@@ -154,87 +112,134 @@
 {#if open}
 	<div
 		bind:this={contentRef}
-		class={componentClass}
-		style={`left:${axis.x}px; top:${axis.y}px; ${resolvedStyle}`}
+		popover="manual"
+		class={attrs.class}
+		style={attrs.style}
 		role="menu"
 		data-rounded={rounded}
-		data-position={axis.location ?? position}
 		data-density={density}
+		data-elevation={elevationState.base}
+		data-elevation-hover={elevationState.hover}
+		data-elevation-active={elevationState.active}
 		onmouseover={() => handleMouseEvent('open', activatorRef)}
 		onmouseleave={() => handleMouseEvent('close', activatorRef)}
 		onclick={(event) => {
 			event.stopPropagation();
-			handleContentClick();
+			if (closeOnClick) handleClose();
 		}}
-		data-elevation={elevationState.base}
-		data-elevation-hover={elevationState.hover}
-		data-elevation-active={elevationState.active}
+		use:floating={{ anchor, side: position, offset: 0 }}
 		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: handleClose }}
-		{...restProps}
+		{...attrs.rest}
 	>
 		{@render children?.()}
 	</div>
 {/if}
 
-<style>
-	.kit-dropdown-content {
-		--kit-dropdown-bg: var(--kit-color-surface-3);
-		--kit-dropdown-fg: var(--kit-color-text);
-
-		position: fixed;
-		z-index: 1800;
-		min-width: 12rem;
-		max-width: min(22rem, calc(100vw - 1rem));
-		padding: calc(var(--kit-space-default) + var(--kit-dropdown-density-offset) / 2);
-		border: 0;
-		border-radius: var(--kit-dropdown-radius);
-		background: var(--kit-dropdown-bg);
-		color: var(--kit-dropdown-fg);
-		transform-origin: top left;
-		animation: kit-dropdown-enter 140ms ease;
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-dropdown-content[data-rounded='0'] {
-		--kit-dropdown-radius: var(--kit-shape-none);
-	}
-	.kit-dropdown-content[data-rounded='xs'] {
-		--kit-dropdown-radius: var(--kit-shape-xs);
-	}
-	.kit-dropdown-content[data-rounded='sm'] {
-		--kit-dropdown-radius: var(--kit-shape-sm);
-	}
-	.kit-dropdown-content[data-rounded='md'] {
-		--kit-dropdown-radius: var(--kit-shape-md);
-	}
-	.kit-dropdown-content[data-rounded='lg'] {
-		--kit-dropdown-radius: var(--kit-shape-lg);
-	}
-	.kit-dropdown-content[data-rounded='xl'] {
-		--kit-dropdown-radius: var(--kit-shape-xl);
-	}
-
-	/** 
-	 * density
-	 * @link no url
-	 */
-	.kit-dropdown-content[data-density='compact'] {
-		--kit-dropdown-density-offset: var(--kit-density-compact);
-	}
-	.kit-dropdown-content[data-density='default'] {
-		--kit-dropdown-density-offset: var(--kit-density-default);
-	}
-	.kit-dropdown-content[data-density='comfortable'] {
-		--kit-dropdown-density-offset: var(--kit-density-comfortable);
-	}
-
-	@keyframes kit-dropdown-enter {
-		from {
-			opacity: 0;
-			scale: 0.98;
-		}
-	}
-</style>
+<style>:where(.kit-dropdown-content) {
+  --kit-dropdown-content-color: initial;
+  --kit-dropdown-content-on-color: initial;
+  --kit-dropdown-content-active-fg: initial;
+  --kit-dropdown-content-active-shade: initial;
+  --kit-dropdown-content-hover-fg: initial;
+  --kit-dropdown-content-pressed-fg: initial;
+  --kit-dropdown-content-bg: var(--kit-dropdown-content-color, var(--kit-color-surface-3));
+  --kit-dropdown-content-fg: var(--kit-dropdown-content-on-color, var(--kit-dropdown-content-contrast, var(--kit-color-text)));
+  --kit-dropdown-content-ink: var(--kit-dropdown-content-color, var(--kit-color-text));
+  --kit-dropdown-content-hover: color-mix(in oklab, var(--kit-dropdown-content-bg), var(--kit-dropdown-content-fg) 8%);
+  --kit-dropdown-content-pressed: color-mix(in oklab, var(--kit-dropdown-content-bg), var(--kit-dropdown-content-fg) 14%);
+  --kit-dropdown-content-soft: color-mix(in oklab, var(--kit-dropdown-content-bg) 16%, transparent);
+  --kit-dropdown-content-border: color-mix(in oklab, var(--kit-dropdown-content-bg), var(--kit-dropdown-content-fg) 20%);
+  --kit-dropdown-content-active: color-mix(
+  	in oklab,
+  	var(--kit-dropdown-content-color),
+  	var(--kit-dropdown-content-fg) var(--kit-dropdown-content-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-dropdown-content) {
+    --kit-dropdown-content-contrast: color(from var(--kit-dropdown-content-color) srgb-linear clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)/1);
+  }
+}
+
+.kit-dropdown-content {
+  position: fixed;
+  inset: auto;
+  z-index: 1800;
+  box-sizing: border-box;
+  min-width: 12rem;
+  max-width: min(22rem, 100vw - 1rem);
+  margin: 0;
+  padding: calc(var(--kit-space-default) + var(--kit-dropdown-content-density-offset) / 2);
+  overflow: visible;
+  border: 0;
+  border-radius: var(--kit-dropdown-content-radius);
+  background-color: var(--kit-dropdown-content-bg);
+  color: var(--kit-dropdown-content-fg);
+  transform-origin: top left;
+  animation: kit-dropdown-enter 140ms ease;
+}
+.kit-dropdown-content[data-side=top] {
+  transform-origin: bottom left;
+}
+
+@keyframes kit-dropdown-enter {
+  from {
+    opacity: 0;
+    scale: 0.98;
+  }
+}
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-dropdown-content[data-rounded="0"]) {
+  --kit-dropdown-content-radius: var(--kit-shape-none);
+}
+
+:where(.kit-dropdown-content[data-rounded=xs]) {
+  --kit-dropdown-content-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-dropdown-content[data-rounded=sm]) {
+  --kit-dropdown-content-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-dropdown-content[data-rounded=md]) {
+  --kit-dropdown-content-radius: var(--kit-shape-md);
+}
+
+:where(.kit-dropdown-content[data-rounded=lg]) {
+  --kit-dropdown-content-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-dropdown-content[data-rounded=xl]) {
+  --kit-dropdown-content-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-dropdown-content[data-rounded=full]) {
+  --kit-dropdown-content-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/dropdown#density
+ */
+:where(.kit-dropdown-content[data-density=dense]) {
+  --kit-dropdown-content-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-dropdown-content[data-density=compact]) {
+  --kit-dropdown-content-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-dropdown-content[data-density=default]) {
+  --kit-dropdown-content-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-dropdown-content[data-density=comfortable]) {
+  --kit-dropdown-content-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-dropdown-content[data-density=spacious]) {
+  --kit-dropdown-content-density-offset: var(--kit-density-spacious);
+}</style>

package/dist/components/dropdown/dropdown.types.d.ts

@@ -1,10 +1,5 @@
-import type { Component, DensityType, ElevationProps, PropValue, RoundedType } from '../../@types/index';
+import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types/index';
 import type { Snippet } from 'svelte';
-export type PositionElement = {
-    x: number;
-    y: number;
-    location: 'top' | 'bottom' | 'left' | 'right' | null;
-};
 export type ModelDropdownProps = {
     open: boolean;
     close: () => void;
@@ -13,17 +8,15 @@ export type ModelDropdownProps = {
 export type ModelDropdownHandleProps = (state: 'open' | 'close', element: HTMLElement | PointerEvent | null) => void;
 export interface DropdownProps extends Component {
     ref?: HTMLElement | null;
-    rounded?: RoundedType;
+    rounded?: RoundedType | 'full';
     position?: 'top' | 'bottom' | 'left' | 'right';
     openOnHover?: boolean;
     closeOnClick?: boolean;
-    color?: string;
-    background?: string;
-    density?: DensityType;
+    color?: ColorProps;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     activator?: Snippet<[
         ModelDropdownProps,
         (state: 'open' | 'close', element: HTMLElement | PointerEvent | null) => void
     ]>;
-    [key: string]: PropValue | Record<string, PropValue> | unknown;
     elevation?: ElevationProps;
 }