lapikit 0.7.5 → 0.7.6

package/dist/@types/actions.d.ts

@@ -4,8 +4,6 @@ export type AccordionOptions = {
     multiple?: boolean;
     readOnly?: boolean;
 };
-/**Modal */
-export type ModalState = boolean | 'persistent';
 /**Theme */
 export type ThemeOptions = {
     name?: string;

package/dist/components/modal/modal.d.ts

@@ -1,7 +1,3 @@
-import type { ModalState } from '../../@types';
-import { type Writable } from 'svelte/store';
-export declare const modalOpen: Writable<ModalState>;
-export declare const modalStack: Writable<string[]>;
-export declare function setOpenModal(state: boolean | 'persistent'): void;
+export declare const modalStack: import("svelte/store").Writable<string[]>;
 export declare const pushModal: (id: string) => void;
 export declare const popModal: (id: string) => void;

package/dist/components/modal/modal.js

@@ -1,26 +1,8 @@
-import { lockScroll, unlockScroll } from '../../utils';
 import { writable } from 'svelte/store';
-// presets
-const refModal = false;
-// states
-export const modalOpen = writable(refModal);
 export const modalStack = writable([]);
-export function setOpenModal(state) {
-    modalOpen.set(state);
-}
 export const pushModal = (id) => {
-    modalStack.update((stack) => {
-        if (stack.includes(id))
-            return stack;
-        lockScroll();
-        return [...stack, id];
-    });
+    modalStack.update((stack) => (stack.includes(id) ? stack : [...stack, id]));
 };
 export const popModal = (id) => {
-    modalStack.update((stack) => {
-        if (!stack.includes(id))
-            return stack;
-        unlockScroll();
-        return stack.filter((m) => m !== id);
-    });
+    modalStack.update((stack) => stack.filter((m) => m !== id));
 };

package/dist/components/modal/modal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import { get } from 'svelte/store';
-	import { splitAriaAttrs, useComponentAttrs, useElevation } from '../../utils';
-	import { modalOpen, modalStack, popModal, pushModal, setOpenModal } from './modal.js';
+	import { useComponentAttrs, useElevation } from '../../utils';
+	import { modalStack, popModal, pushModal } from './modal.js';
 	import type { ModalProps } from './modal.types.js';
 
 	const modalId = $props.id();
@@ -44,7 +44,6 @@
 		)
 	);
 	let elevationState = $derived(useElevation(elevation));
-	let split = $derived(splitAriaAttrs(attrs.rest));
 
 	$effect(() => {
 		if (open && !wasPushed) {
@@ -56,18 +55,6 @@
 		}
 	});
 
-	$effect(() => {
-		if (open !== undefined && !contain) {
-			setOpenModal(open ? (persistent ? 'persistent' : true) : false);
-		}
-	});
-
-	$effect(() => {
-		if ($modalOpen === false && !contain) {
-			open = false;
-		}
-	});
-
 	$effect(() => {
 		if (!open || !closeWithEsc || persistent) return;
 
@@ -94,16 +81,21 @@
 	function handleClose() {
 		if (!persistent) open = false;
 	}
+
+	function show(node: HTMLDialogElement) {
+		node.show();
+		return {
+			destroy() {
+				node.close();
+			}
+		};
+	}
 </script>
 
 {#if open}
 	<div
-		bind:this={ref}
 		class={attrs.class}
 		style={attrs.style}
-		role="dialog"
-		aria-modal={!contain}
-		{...split.aria}
 		data-contain={contain}
 		data-density={density}
 		data-rounded={rounded}
@@ -112,18 +104,19 @@
 			<div class="kit-modal__overlay" role="presentation" onclick={handleClose}></div>
 		{/if}
 
-		<div
-			{...split.others}
+		<dialog
+			bind:this={ref}
+			use:show
+			{...attrs.rest}
 			class={['kit-modal__content', classContent]}
 			data-size={size}
 			data-position={position}
 			data-elevation={elevationState.base}
 			data-elevation-hover={elevationState.hover}
 			data-elevation-active={elevationState.active}
-			onclick={(event: MouseEvent) => event.stopPropagation()}
 		>
 			{@render children?.()}
-		</div>
+		</dialog>
 	</div>
 {/if}
 
@@ -188,6 +181,7 @@
 }
 .kit-modal__content {
   position: fixed;
+  margin: 0;
   top: var(--kit-modal-top);
   right: var(--kit-modal-right);
   bottom: var(--kit-modal-bottom);

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

@@ -3,7 +3,7 @@ import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@
 type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 type ModalPosition = 'top' | 'center' | 'bottom' | 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right';
 export interface ModalProps extends Component {
-    ref?: HTMLDivElement | null;
+    ref?: HTMLDialogElement | null;
     open?: boolean;
     contain?: boolean;
     size?: ModalSize;

package/dist/components/tooltip/tooltip.svelte

@@ -33,6 +33,7 @@
 
 	let triggerRef = $state<HTMLElement | null>(null);
 	let timer: ReturnType<typeof setTimeout> | null = null;
+	let focused = false;
 	let mounted = $derived(open || forceMount || !!tooltip);
 
 	const clearTimer = () => {
@@ -43,6 +44,7 @@
 	const handleHoverOpen = () => {
 		if (disabled) return;
 		clearTimer();
+		if (open) return;
 		timer = setTimeout(() => {
 			open = true;
 			timer = null;
@@ -51,6 +53,7 @@
 
 	const handleFocusOpen = () => {
 		if (disabled) return;
+		focused = true;
 		clearTimer();
 		open = true;
 	};
@@ -60,6 +63,17 @@
 		open = false;
 	};
 
+	const handleHoverClose = () => {
+		clearTimer();
+		if (focused) return;
+		timer = setTimeout(handleClose, 100);
+	};
+
+	const handleFocusClose = () => {
+		focused = false;
+		handleClose();
+	};
+
 	$effect(() => {
 		if (disabled) open = false;
 	});
@@ -68,6 +82,15 @@
 		ref = triggerRef;
 	});
 
+	$effect(() => {
+		if (!open) return;
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') handleClose();
+		};
+		document.addEventListener('keydown', onKeyDown);
+		return () => document.removeEventListener('keydown', onKeyDown);
+	});
+
 	onDestroy(clearTimer);
 </script>
 
@@ -77,10 +100,9 @@
 	class="kit-tooltip-trigger"
 	aria-describedby={open ? tooltipId : undefined}
 	onmouseenter={handleHoverOpen}
-	onmouseleave={handleClose}
+	onmouseleave={handleHoverClose}
 	onfocusin={handleFocusOpen}
-	onfocusout={handleClose}
-	onkeydown={(event) => event.key === 'Escape' && handleClose()}
+	onfocusout={handleFocusClose}
 >
 	{@render children?.()}
 </span>
@@ -105,6 +127,8 @@
 			flip: avoidCollisions
 		}}
 		{...attrs.rest}
+		onmouseenter={clearTimer}
+		onmouseleave={handleHoverClose}
 	>
 		{#if tooltip}
 			{@render tooltip()}
@@ -171,7 +195,6 @@
   color: var(--kit-tooltip-fg);
   font-size: 0.875rem;
   overflow-wrap: break-word;
-  pointer-events: none;
   box-shadow: 0 16px 29px -10px color-mix(in oklab, var(--kit-color-shadow) 18%, transparent);
   animation: kit-tooltip-enter 150ms ease;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.7.5",
+	"version": "0.7.6",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"