lapikit 0.4.13 → 0.4.14

package/dist/components/dialog/dialog.svelte

@@ -1,67 +1,262 @@
 <script lang="ts">
-	import { disabledScroll } from '../../internal/helpers/scroll.js';
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { DialogProps } from './types.js';
+	import { disabledScroll } from '../../@legacy/internal/helpers/scroll';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import { useClassName, useStyles } from '../../utils';
+	import type { DialogDensity, DialogPosition, DialogProps, DialogSize } from './dialog.types.js';
+
+	function resolveSize(value: DialogSize | undefined): DialogSize {
+		return value === 'xs' || value === 'sm' || value === 'md' || value === 'lg' || value === 'xl'
+			? value
+			: 'md';
+	}
+
+	function resolvePosition(value: DialogPosition | undefined): DialogPosition {
+		return value === 'top' || value === 'center' || value === 'bottom' ? value : 'center';
+	}
+
+	function resolveDensity(value: DialogDensity | undefined): DialogDensity {
+		return value === 'compact' || value === 'comfortable' || value === 'default'
+			? value
+			: 'default';
+	}
 
 	let {
-		children,
 		ref = $bindable(),
-		open = $bindable(),
-		dark,
-		light,
-		classContent,
-		color,
-		background,
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		open = $bindable(false),
+		persistent = false,
 		size = 'md',
-		persistent,
 		position = 'center',
-		rounded,
 		density = 'default',
+		rounded = 'md',
+		classContent = '',
+		color = undefined,
+		background = undefined,
 		...rest
 	}: DialogProps = $props();
 
-	const assets = getAssets();
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-dialog',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let contentClass = $derived(
+		Array.isArray(classContent)
+			? classContent.filter(Boolean).join(' ')
+			: `${classContent ?? ''}`.trim()
+	);
+
+	let safeSize = $derived(resolveSize(size));
+	let safePosition = $derived(resolvePosition(position));
+	let safeDensity = $derived(resolveDensity(density));
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-dialog-fg:${color}` : '',
+			background ? `--kit-dialog-bg:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 
 	$effect(() => {
-		if (ref && open) ref.showModal();
-		if (ref && !open) ref.close();
-		disabledScroll(open ? true : false);
+		if (!ref) return;
+
+		if (open && !ref.open) {
+			ref.showModal();
+		}
+
+		if (!open && ref.open) {
+			ref.close();
+		}
+
+		disabledScroll(open);
+
+		return () => {
+			disabledScroll(false);
+		};
 	});
+
+	function handleClose() {
+		if (!persistent) {
+			open = false;
+			return;
+		}
+
+		if (ref && !ref.open && open) {
+			ref.showModal();
+		}
+	}
+
+	function handleCancel(event: Event) {
+		if (persistent) {
+			event.preventDefault();
+			return;
+		}
+
+		open = false;
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target !== ref || persistent) return;
+		open = false;
+	}
 </script>
 
 <dialog
 	bind:this={ref}
-	class={[
-		'kit-dialog',
-		persistent && 'kit-dialog--persistent',
-		size && assets.className('dialog', 'size', size),
-		position && assets.className('dialog', 'position', position),
-		rest.class
-	]}
-	onclose={() => (!persistent ? (open = false) : null)}
-	onclick={(event: MouseEvent) => {
-		if (event.target === ref) {
-			if (!persistent) ref.close();
-		}
-	}}
+	class={componentClass}
+	style={mergedStyle}
+	data-size={safeSize}
+	data-position={safePosition}
+	data-persistent={persistent}
+	onclose={handleClose}
+	oncancel={handleCancel}
+	onclick={handleBackdropClick}
 >
-	<!-- surcharge-dialog autofocus-action-element -->
-	<button type="button" class="close-dialog">close</button>
 	<div
-		{...rest}
-		class={[
-			'kit-dialog-container',
-			light && 'light',
-			dark && 'dark',
-			classContent,
-			density && assets.className('dialog-container', 'density', density),
-			rest.class
-		]}
+		{...restProps}
+		class={['kit-dialog__content', contentClass]}
+		data-density={safeDensity}
+		data-rounded={rounded}
 		onclick={(event: MouseEvent) => event.stopPropagation()}
-		style:--dialog-background={assets.color(background)}
-		style:--dialog-color={assets.color(color)}
-		style:--dialog-shape={assets.shape(rounded)}
 	>
 		{@render children?.()}
 	</div>
 </dialog>
+
+<style>
+	.kit-dialog {
+		--kit-dialog-bg: var(--kit-surface-1);
+		--kit-dialog-fg: var(--kit-fg);
+		--kit-dialog-bd: var(--kit-border);
+		--kit-dialog-radius: 12px;
+		--kit-dialog-px: 1rem;
+		--kit-dialog-py: 1rem;
+		--kit-dialog-max: min(32rem, calc(100vw - 2rem));
+
+		border: 0;
+		padding: 0;
+		margin: auto;
+		width: 100%;
+		max-width: none;
+		background: transparent;
+		color: inherit;
+		overflow: visible;
+	}
+
+	.kit-dialog::backdrop {
+		background: rgb(15 23 42 / 0.42);
+		backdrop-filter: blur(2px);
+	}
+
+	.kit-dialog[data-position='top'] {
+		margin-top: 1rem;
+		margin-bottom: auto;
+	}
+
+	.kit-dialog[data-position='center'] {
+		margin-top: auto;
+		margin-bottom: auto;
+	}
+
+	.kit-dialog[data-position='bottom'] {
+		margin-top: auto;
+		margin-bottom: 1rem;
+	}
+
+	.kit-dialog[data-size='xs'] {
+		--kit-dialog-max: min(20rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog[data-size='sm'] {
+		--kit-dialog-max: min(24rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog[data-size='md'] {
+		--kit-dialog-max: min(32rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog[data-size='lg'] {
+		--kit-dialog-max: min(42rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog[data-size='xl'] {
+		--kit-dialog-max: min(56rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog__content {
+		box-sizing: border-box;
+		width: min(100%, var(--kit-dialog-max));
+		max-height: calc(100dvh - 2rem);
+		overflow: auto;
+		padding: var(--kit-dialog-py) var(--kit-dialog-px);
+		border: 1px solid var(--kit-dialog-bd);
+		border-radius: var(--kit-dialog-radius);
+		background: var(--kit-dialog-bg);
+		color: var(--kit-dialog-fg);
+		margin: 0 auto;
+		box-shadow:
+			0 20px 50px rgb(15 23 42 / 0.18),
+			0 4px 16px rgb(15 23 42 / 0.1);
+	}
+
+	.kit-dialog__content[data-density='compact'] {
+		--kit-dialog-px: 0.75rem;
+		--kit-dialog-py: 0.75rem;
+	}
+
+	.kit-dialog__content[data-density='default'] {
+		--kit-dialog-px: 1rem;
+		--kit-dialog-py: 1rem;
+	}
+
+	.kit-dialog__content[data-density='comfortable'] {
+		--kit-dialog-px: 1.25rem;
+		--kit-dialog-py: 1.25rem;
+	}
+
+	.kit-dialog__content[data-rounded='0'] {
+		--kit-dialog-radius: 0;
+	}
+
+	.kit-dialog__content[data-rounded='xs'] {
+		--kit-dialog-radius: 2px;
+	}
+
+	.kit-dialog__content[data-rounded='sm'] {
+		--kit-dialog-radius: 6px;
+	}
+
+	.kit-dialog__content[data-rounded='md'] {
+		--kit-dialog-radius: 12px;
+	}
+
+	.kit-dialog__content[data-rounded='lg'] {
+		--kit-dialog-radius: 18px;
+	}
+
+	.kit-dialog__content[data-rounded='xl'] {
+		--kit-dialog-radius: 9999px;
+	}
+</style>

package/dist/components/dialog/dialog.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DialogProps } from './types.js';
+import type { DialogProps } from './dialog.types.ts';
 declare const Dialog: import("svelte").Component<DialogProps, {}, "ref" | "open">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/{labs/components → components}/dialog/dialog.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, RoundedType } from '../../utils/types/index.js';
+import type { Component, RoundedType } from '../../utils/types';
 export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type DialogPosition = 'top' | 'center' | 'bottom';
 export type DialogDensity = 'compact' | 'comfortable' | 'default';

package/dist/components/dropdown/dropdown.svelte

@@ -1,53 +1,106 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import { clickOutside } from '../../internal/helpers/outside.js';
-	import { getPositions } from '../../internal/core/actions/dropdown.svelte.js';
-	import type { DropdownProps, ModelDropdownProps } from './types.js';
+	import { onDestroy } from 'svelte';
+	import { useClassName, useStyles, clickOutside } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import { getPositions } from './dropdown.svelte.js';
+	import type { DropdownProps, ModelDropdownProps } from './dropdown.types.js';
 
 	let {
+		ref = $bindable(),
 		children,
 		activator,
-		dark,
-		light,
+		dark = false,
+		light = false,
 		rounded,
-		position,
-		closeOnClick,
-		openOnHover,
+		position = 'bottom',
+		closeOnClick = false,
+		openOnHover = false,
 		color,
 		background,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
 		...rest
 	}: DropdownProps = $props();
 
-	const positionAxis = getPositions();
-	const assets = getAssets();
+	let safePosition = $derived(
+		position === 'top' || position === 'bottom' || position === 'left' || position === 'right'
+			? position
+			: 'bottom'
+	);
 
-	let ref: HTMLElement | null = $state(null);
-	let refActivator: HTMLElement | PointerEvent | null = $state(null);
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-dropdown-content',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			background ? `--kit-dropdown-background:${background}` : '',
+			color ? `--kit-dropdown-color:${color}` : '',
+			typeof rounded === 'string' && rounded.includes('px')
+				? `--kit-dropdown-radius:${rounded}`
+				: ''
+		]
+			.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({ x: 0, y: 0 });
+	let axis = $state(positioner.values);
 	let innerHeight = $state(0);
 	let innerWidth = $state(0);
 	let scrollX = $state(0);
 	let scrollY = $state(0);
-	let timeoutId: ReturnType<typeof setTimeout> | null = $state(null);
+	let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
 
-	axis = positionAxis?.values;
+	const clearHoverTimeout = () => {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+	};
 
-	let model: ModelDropdownProps = {
-		get open() {
-			return open;
-		},
-		close: () => (open = false),
-		toggle: (element) => handleToggle(element)
+	const updatePosition = () => {
+		if (!contentRef || !activatorRef) return;
+		positioner.update(activatorRef, contentRef, safePosition, false, true);
+		axis = positioner.values;
 	};
 
 	const handleToggle = (element: HTMLElement | PointerEvent | null) => {
 		if (element === null) return;
-		refActivator = element;
+		activatorRef = element;
 		open = !open;
 	};
 
 	const handleClose = () => {
+		clearHoverTimeout();
+		open = false;
+	};
+
+	const handleContentClick = () => {
 		if (closeOnClick && open) open = false;
 	};
 
@@ -55,37 +108,57 @@
 		state: 'open' | 'close',
 		element: HTMLElement | PointerEvent | null
 	) => {
-		if (openOnHover && state === 'open') {
-			if (timeoutId) {
-				clearTimeout(timeoutId);
-				timeoutId = null;
-			}
-			refActivator = element;
+		if (!openOnHover) return;
+
+		if (state === 'open') {
+			clearHoverTimeout();
+			if (element) activatorRef = element;
 			open = true;
+			return;
 		}
 
-		if (openOnHover && state === 'close') {
-			timeoutId = setTimeout(() => {
-				open = false;
-				timeoutId = null;
-			}, 150);
-		}
+		timeoutId = setTimeout(() => {
+			open = false;
+			timeoutId = null;
+		}, 150);
 	};
 
+	let model: ModelDropdownProps = {
+		get open() {
+			return open;
+		},
+		close: () => handleClose(),
+		toggle: (element) => handleToggle(element)
+	};
+
+	$effect(() => {
+		if (open && contentRef && activatorRef) {
+			updatePosition();
+		}
+	});
+
 	$effect(() => {
 		if (
 			open &&
-			ref &&
-			refActivator &&
+			contentRef &&
+			activatorRef &&
 			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
 		) {
-			positionAxis.update(refActivator, ref, position);
+			updatePosition();
 		}
 	});
 
 	$effect(() => {
 		if (scrollX || scrollY) open = false;
 	});
+
+	$effect(() => {
+		ref = contentRef;
+	});
+
+	onDestroy(() => {
+		clearHoverTimeout();
+	});
 </script>
 
 <svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
@@ -94,22 +167,83 @@
 
 {#if open}
 	<div
-		bind:this={ref}
-		{...rest}
+		bind:this={contentRef}
+		class={componentClass}
+		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
 		role="menu"
-		class={['kit-dropdown-content', light && 'light', dark && 'dark', rest.class]}
-		style={`transform: translate(${axis.x}px, ${axis.y}px);`}
-		onmouseover={() => handleMouseEvent('open', refActivator)}
-		onmouseleave={() => handleMouseEvent('close', refActivator)}
-		onclick={(e) => {
-			e.stopPropagation();
-			handleClose();
+		data-light={light || undefined}
+		data-dark={dark || undefined}
+		data-rounded={rounded}
+		data-position={axis.location ?? safePosition}
+		onmouseover={() => handleMouseEvent('open', activatorRef)}
+		onmouseleave={() => handleMouseEvent('close', activatorRef)}
+		onclick={(event) => {
+			event.stopPropagation();
+			handleContentClick();
 		}}
-		style:--dropdown-background={assets.color(background)}
-		style:--dropdown-color={assets.color(color)}
-		style:--dropdown-shape={assets.shape(rounded)}
-		use:clickOutside={{ exclude: [ref, refActivator], onClose: () => (open = false) }}
+		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: handleClose }}
+		{...restProps}
 	>
 		{@render children?.()}
 	</div>
 {/if}
+
+<style>
+	.kit-dropdown-content {
+		--kit-dropdown-background: var(--kit-surface-1);
+		--kit-dropdown-color: var(--kit-fg);
+		--kit-dropdown-radius: 12px;
+		--kit-dropdown-border: color-mix(in oklab, var(--kit-fg), transparent 88%);
+		--kit-dropdown-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
+
+		position: fixed;
+		z-index: 1800;
+		min-width: 12rem;
+		max-width: min(22rem, calc(100vw - 1rem));
+		padding: 0.375rem;
+		border: 1px solid var(--kit-dropdown-border);
+		border-radius: var(--kit-dropdown-radius);
+		background: var(--kit-dropdown-background);
+		color: var(--kit-dropdown-color);
+		box-shadow: var(--kit-dropdown-shadow);
+		transform-origin: top left;
+		animation: kit-dropdown-enter 140ms ease;
+	}
+
+	.kit-dropdown-content[data-light='true'] {
+		--kit-dropdown-background: color-mix(in oklab, white 94%, var(--kit-surface-1));
+		--kit-dropdown-color: var(--kit-fg);
+	}
+
+	.kit-dropdown-content[data-dark='true'] {
+		--kit-dropdown-background: color-mix(in oklab, black 78%, var(--kit-surface-3));
+		--kit-dropdown-color: white;
+		--kit-dropdown-border: color-mix(in oklab, white, transparent 80%);
+	}
+
+	.kit-dropdown-content[data-rounded='0'] {
+		--kit-dropdown-radius: 0;
+	}
+	.kit-dropdown-content[data-rounded='xs'] {
+		--kit-dropdown-radius: 2px;
+	}
+	.kit-dropdown-content[data-rounded='sm'] {
+		--kit-dropdown-radius: 4px;
+	}
+	.kit-dropdown-content[data-rounded='md'] {
+		--kit-dropdown-radius: 8px;
+	}
+	.kit-dropdown-content[data-rounded='lg'] {
+		--kit-dropdown-radius: 16px;
+	}
+	.kit-dropdown-content[data-rounded='xl'] {
+		--kit-dropdown-radius: 99999px;
+	}
+
+	@keyframes kit-dropdown-enter {
+		from {
+			opacity: 0;
+			scale: 0.98;
+		}
+	}
+</style>

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

@@ -1,4 +1,4 @@
-import type { DropdownProps } from './types.js';
-declare const Dropdown: import("svelte").Component<DropdownProps, {}, "">;
+import type { DropdownProps } from './dropdown.types.ts';
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "ref">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/{labs/components → components}/dropdown/dropdown.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, PropValue, RoundedType } from '../../utils/types/index.js';
+import type { Component, PropValue, RoundedType } from '../../utils/types/index';
 import type { Snippet } from 'svelte';
 export type PositionElement = {
     x: number;