lapikit 0.7.9 → 0.8.1

package/dist/components/tooltip/tooltip.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
+	import { DEV } from 'esm-env';
 	import { floating, useComponentAttrs } from '../../utils';
-	import type { TooltipProps } from './tooltip.types.js';
+	import type { TooltipProps, TooltipTriggerProps } from './tooltip.types.js';
 
 	let {
 		ref = $bindable(),
+		id,
 		children,
+		trigger,
 		tooltip,
 		open = $bindable(false),
-		forceMount = false,
 		label,
+		asLabel = false,
 		rounded = 'xs',
 		color,
 		location = 'bottom',
 		delayDuration = 850,
+		closeDelay = 100,
 		density = 'default',
 		variant,
 		disabled = false,
@@ -25,67 +29,96 @@
 		...rest
 	}: TooltipProps = $props();
 
-	const tooltipId = $props.id();
+	$effect(() => {
+		if (DEV && children)
+			console.warn('[lapikit] kit:tooltip: children is removed, use the trigger snippet');
+	});
+
+	const generatedId = $props.id();
+	let tooltipId = $derived(id || generatedId);
 
 	let attrs = $derived(
 		useComponentAttrs('kit-tooltip', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 
-	let triggerRef = $state<HTMLElement | null>(null);
+	let anchor = $state<HTMLElement | null>(null);
 	let timer: ReturnType<typeof setTimeout> | null = null;
 	let focused = false;
-	let mounted = $derived(open || forceMount || !!tooltip);
+	let ariaAttribute = $derived(asLabel ? 'aria-labelledby' : 'aria-describedby');
 
 	const clearTimer = () => {
 		if (timer) clearTimeout(timer);
 		timer = null;
 	};
 
-	const handleHoverOpen = () => {
-		if (disabled) return;
-		clearTimer();
-		if (open) return;
-		timer = setTimeout(() => {
-			open = true;
-			timer = null;
-		}, delayDuration);
-	};
-
-	const handleFocusOpen = () => {
-		if (disabled) return;
-		focused = true;
+	const show = () => {
 		clearTimer();
 		open = true;
 	};
 
-	const handleClose = () => {
+	const hide = () => {
 		clearTimer();
 		open = false;
 	};
 
-	const handleHoverClose = () => {
+	const scheduleHide = () => {
 		clearTimer();
 		if (focused) return;
-		timer = setTimeout(handleClose, 100);
+		timer = setTimeout(hide, closeDelay);
 	};
 
-	const handleFocusClose = () => {
-		focused = false;
-		handleClose();
+	const isFocusVisible = (element: HTMLElement) => {
+		try {
+			return element.matches(':focus-visible');
+		} catch {
+			return true;
+		}
 	};
 
+	// the trigger, when open is set without a pointer or a focus event
+	const findAnchor = () =>
+		document.querySelector<HTMLElement>(`[${ariaAttribute}~="${CSS.escape(tooltipId)}"]`);
+
+	let triggerProps: TooltipTriggerProps = $derived({
+		[ariaAttribute]: tooltipId,
+		onpointerenter: (event: PointerEvent) => {
+			if (disabled || event.pointerType === 'touch') return;
+			anchor = event.currentTarget as HTMLElement;
+			clearTimer();
+			if (open) return;
+			timer = setTimeout(show, delayDuration);
+		},
+		onpointerleave: scheduleHide,
+		onpointerdown: hide,
+		onfocus: (event: FocusEvent) => {
+			if (disabled) return;
+			anchor = event.currentTarget as HTMLElement;
+			focused = true;
+			if (isFocusVisible(event.target as HTMLElement)) show();
+		},
+		onblur: () => {
+			focused = false;
+			hide();
+		}
+	});
+
+	/** the handlers of the trigger, for the tooltip prop of kit:btn, kit:chip and kit:icon */
+	export function triggerHandlers() {
+		return triggerProps;
+	}
+
 	$effect(() => {
 		if (disabled) open = false;
 	});
 
 	$effect(() => {
-		ref = triggerRef;
+		if (open && !anchor?.isConnected) anchor = findAnchor();
 	});
 
 	$effect(() => {
 		if (!open) return;
 		const onKeyDown = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') handleClose();
+			if (event.key === 'Escape') hide();
 		};
 		document.addEventListener('keydown', onKeyDown);
 		return () => document.removeEventListener('keydown', onKeyDown);
@@ -94,33 +127,22 @@
 	onDestroy(clearTimer);
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<span
-	bind:this={triggerRef}
-	class="kit-tooltip-trigger"
-	aria-describedby={open ? tooltipId : undefined}
-	onmouseenter={handleHoverOpen}
-	onmouseleave={handleHoverClose}
-	onfocusin={handleFocusOpen}
-	onfocusout={handleFocusClose}
->
-	{@render children?.()}
-</span>
-
-{#if mounted}
+{@render trigger?.(triggerProps)}
+
+{#if label || tooltip}
 	<div
+		bind:this={ref}
 		id={tooltipId}
 		popover="manual"
 		role="tooltip"
-		aria-label={label}
 		class={attrs.class}
 		style={attrs.style}
 		data-density={density}
 		data-variant={variant}
 		data-rounded={rounded}
 		use:floating={{
-			anchor: triggerRef,
-			open,
+			anchor,
+			open: open && !!anchor,
 			side: location,
 			align: 'center',
 			offset: 6,
@@ -128,7 +150,7 @@
 		}}
 		{...attrs.rest}
 		onmouseenter={clearTimer}
-		onmouseleave={handleHoverClose}
+		onmouseleave={scheduleHide}
 	>
 		{#if tooltip}
 			{@render tooltip()}
@@ -167,18 +189,6 @@
   --kit-tooltip-arrow: 0.35rem;
 }
 
-.kit-tooltip-trigger {
-  display: inline-flex;
-  align-self: start;
-  justify-self: start;
-  width: fit-content;
-  max-width: max-content;
-}
-.kit-tooltip-trigger:focus-visible {
-  outline: 2px solid var(--kit-color-focus);
-  outline-offset: 2px;
-}
-
 .kit-tooltip {
   position: fixed;
   inset: auto;
@@ -307,4 +317,9 @@
   .kit-tooltip {
     animation: none;
   }
+}
+@media (forced-colors: active) {
+  .kit-tooltip {
+    border: 1px solid CanvasText;
+  }
 }</style>

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

@@ -1,4 +1,6 @@
-import type { TooltipProps } from './tooltip.types.ts';
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "ref" | "open">;
+import type { TooltipProps, TooltipTriggerProps } from './tooltip.types.ts';
+declare const Tooltip: import("svelte").Component<TooltipProps, {
+    triggerHandlers: () => TooltipTriggerProps;
+}, "ref" | "open">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

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

@@ -1,17 +1,43 @@
 import type { ColorProps, Component, RoundedType } from '../../@types';
 import type { Snippet } from 'svelte';
-export interface TooltipProps extends Component {
+/** The attributes to spread on the element that shows the tooltip */
+export interface TooltipTriggerProps {
+    'aria-describedby'?: string;
+    'aria-labelledby'?: string;
+    onpointerenter: (event: PointerEvent) => void;
+    onpointerleave: (event: PointerEvent) => void;
+    onpointerdown: (event: PointerEvent) => void;
+    onfocus: (event: FocusEvent) => void;
+    onblur: (event: FocusEvent) => void;
+}
+export interface TooltipProps extends Omit<Component, 'children'> {
     ref?: HTMLElement | null;
     open?: boolean;
-    forceMount?: boolean;
     rounded?: RoundedType | 'full';
     label?: string;
+    /** the tooltip names the trigger (aria-labelledby) instead of describing it */
+    asLabel?: boolean;
     location?: 'top' | 'bottom' | 'left' | 'right';
     color?: ColorProps;
     delayDuration?: number;
+    closeDelay?: number;
     variant?: 'arrow';
     density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     disabled?: boolean;
     avoidCollisions?: boolean;
+    trigger?: Snippet<[TooltipTriggerProps]>;
     tooltip?: Snippet;
+    /** removed in 0.8.0: use the trigger snippet */
+    children?: never;
+}
+/** The tooltip prop of kit:btn, kit:chip and kit:icon */
+export interface TooltipOptions {
+    label: string;
+    location?: TooltipProps['location'];
+    variant?: TooltipProps['variant'];
+    density?: TooltipProps['density'];
+    rounded?: TooltipProps['rounded'];
+    delayDuration?: number;
+    closeDelay?: number;
 }
+export type TooltipValue = string | TooltipOptions | null | undefined | false;

package/dist/labs/sheet/sheet.svelte

@@ -203,7 +203,7 @@ button.kit-sheet {
   color: var(--kit-sheet-pressed-fg, var(--kit-sheet-fg));
 }
 
-.kit-sheet:not([data-disabled=true]):focus-visible {
+.kit-sheet:is(:not([data-disabled=true]), [data-disabled-focusable=true]):focus-visible {
   outline: 2px solid var(--kit-color-focus);
   outline-offset: 2px;
 }
@@ -214,6 +214,11 @@ button.kit-sheet {
   user-select: none;
 }
 
+.kit-sheet[data-disabled-focusable=true] {
+  pointer-events: auto;
+  cursor: not-allowed;
+}
+
 /** 
  * rounded
  * @link https://lapikit.dev/docs/customize

package/package.json

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