lapikit 0.7.4 → 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/btn/btn.svelte

@@ -102,7 +102,7 @@
 			type={type || 'button'}
 			{checked}
 			{value}
-			aria-label={String(label || value)}
+			aria-label={label || (value != null ? String(value) : undefined)}
 			disabled={isDisabled}
 		/>
 	{:else}

package/dist/components/dialog/dialog.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { disabledScroll, splitAriaAttrs, useComponentAttrs, useElevation } from '../../utils';
+	import {
+		lockScroll,
+		splitAriaAttrs,
+		unlockScroll,
+		useComponentAttrs,
+		useElevation
+	} from '../../utils';
 	import type { DialogProps } from './dialog.types.js';
 
 	let {
@@ -48,12 +54,12 @@
 		if (!open && ref.open) {
 			ref.close();
 		}
+	});
 
-		disabledScroll(open);
-
-		return () => {
-			disabledScroll(false);
-		};
+	$effect(() => {
+		if (!open) return;
+		lockScroll();
+		return unlockScroll;
 	});
 
 	function handleClose() {

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 { disabledScroll } 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) => {
-        let values = stack;
-        if (!stack.includes(id))
-            values = [...stack, id];
-        disabledScroll(values.length !== 0 ? true : false);
-        return values;
-    });
+    modalStack.update((stack) => (stack.includes(id) ? stack : [...stack, id]));
 };
 export const popModal = (id) => {
-    modalStack.update((stack) => {
-        const newStack = stack.filter((m) => m !== id);
-        disabledScroll(newStack.length !== 0 ? true : false);
-        return newStack.length === 0 ? [] : newStack;
-    });
+    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/dist/escaping.js

@@ -93,7 +93,6 @@ export const decodeSourceMap = (content, componentInfo) => {
             // class: / style: are refused by Svelte on a component: they become s-class_ / s-style_ props
             parts.push(`<${info.name}${rewriteDirectives(content.slice(nameEnd, tagEnd + 1))}`);
             changed = true;
-            changed = true;
         }
         else {
             parts.push(content.slice(nextLt, tagEnd + 1));

package/dist/utils/outside.d.ts

@@ -3,4 +3,6 @@ export declare function clickOutside(node: HTMLElement, options: ClickOutsideOpt
     update(newOptions: ClickOutsideOptions): void;
     destroy(): void;
 };
-export declare function disabledScroll(state: boolean): void;
+/** Blocks the scroll of the page; each call needs its own unlockScroll() */
+export declare function lockScroll(): void;
+export declare function unlockScroll(): void;

package/dist/utils/outside.js

@@ -32,8 +32,20 @@ export function clickOutside(node, options) {
         }
     };
 }
-export function disabledScroll(state) {
-    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-        document.body.style.overflow = state ? 'hidden' : '';
+let scrollLocks = 0;
+let previousOverflow = '';
+/** Blocks the scroll of the page; each call needs its own unlockScroll() */
+export function lockScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (scrollLocks++ === 0) {
+        previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
     }
 }
+export function unlockScroll() {
+    if (typeof document === 'undefined' || scrollLocks === 0)
+        return;
+    if (--scrollLocks === 0)
+        document.body.style.overflow = previousOverflow;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.7.4",
+	"version": "0.7.6",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -80,6 +80,9 @@
 			"default": "./dist/hooks/actions.js"
 		}
 	},
+	"dependencies": {
+		"esm-env": "^1.2.2"
+	},
 	"peerDependencies": {
 		"svelte": "^5.20.0"
 	},