lapikit 0.7.9 → 0.8.0

package/dist/components/list/modules/list-item.svelte

@@ -166,7 +166,7 @@ button.kit-list-item {
   color: var(--kit-list-item-pressed-fg, var(--kit-list-item-fg));
 }
 
-.kit-list-item:not([data-disabled=true]):focus-visible {
+.kit-list-item:is(:not([data-disabled=true]), [data-disabled-focusable=true]):focus-visible {
   outline: 2px solid var(--kit-color-focus);
   outline-offset: 2px;
 }
@@ -175,4 +175,9 @@ button.kit-list-item {
   opacity: var(--kit-disabled-opacity, 0.55);
   pointer-events: none;
   user-select: none;
+}
+
+.kit-list-item[data-disabled-focusable=true] {
+  pointer-events: auto;
+  cursor: not-allowed;
 }</style>

package/dist/components/popover/popover.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import { DEV } from 'esm-env';
 	import { clickOutside, floating, useComponentAttrs, useElevation } from '../../utils';
-	import type { ModelPopoverProps, PopoverProps } from './popover.types.js';
+	import type { PopoverProps, PopoverTriggerProps } from './popover.types.js';
 
 	let {
 		ref = $bindable(),
 		open = $bindable(false),
 		children,
+		trigger,
 		activator,
 		rounded = 'md',
 		position = 'bottom',
@@ -19,31 +21,73 @@
 		...rest
 	}: PopoverProps = $props();
 
+	$effect(() => {
+		if (DEV && activator)
+			console.warn('[lapikit] kit:popover: activator is removed, use the trigger snippet');
+	});
+
+	const popoverId = $props.id();
+
 	let attrs = $derived(
 		useComponentAttrs('kit-popover-content', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 	let elevationState = $derived(useElevation(elevation));
 
 	let contentRef = $state<HTMLElement | null>(null);
-	let activatorRef = $state<HTMLElement | null>(null);
+	let triggerRef = $state<HTMLElement | null>(null);
 
-	const model: ModelPopoverProps = {
-		toggle: (element) => {
-			if (element === null) return;
-			activatorRef = element;
+	const focusableSelector =
+		'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+
+	const close = (restoreFocus = false) => {
+		open = false;
+		if (restoreFocus) triggerRef?.focus();
+	};
+
+	let triggerProps: PopoverTriggerProps = $derived({
+		'aria-haspopup': 'dialog',
+		'aria-expanded': open,
+		'aria-controls': popoverId,
+		onclick: (event: MouseEvent) => {
+			triggerRef = event.currentTarget as HTMLElement;
 			open = !open;
 		}
+	});
+
+	// focus leaves the popover for another element of the page
+	const onFocusOut = (event: FocusEvent) => {
+		const next = event.relatedTarget as Node | null;
+		if (!next || contentRef?.contains(next) || triggerRef?.contains(next)) return;
+		close();
 	};
 
 	$effect(() => {
 		ref = contentRef;
 	});
 
+	$effect(() => {
+		if (open && !triggerRef?.isConnected) {
+			triggerRef = document.querySelector<HTMLElement>(
+				`[aria-controls="${CSS.escape(popoverId)}"]`
+			);
+		}
+	});
+
+	$effect(() => {
+		if (!open || !contentRef) return;
+		const content = contentRef;
+		const frame = requestAnimationFrame(() => {
+			const first = content.querySelector<HTMLElement>(focusableSelector);
+			(first ?? content).focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	});
+
 	$effect(() => {
 		if (!open) return;
 
 		const onKeydown = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') open = false;
+			if (event.key === 'Escape') close(true);
 		};
 
 		document.addEventListener('keydown', onKeydown);
@@ -51,22 +95,25 @@
 	});
 </script>
 
-{@render activator?.(model)}
+{@render trigger?.(triggerProps)}
 
 {#if open}
 	<div
 		bind:this={contentRef}
+		id={popoverId}
 		popover="manual"
 		class={attrs.class}
 		style={attrs.style}
 		role="dialog"
+		tabindex="-1"
 		data-rounded={rounded}
 		data-density={density}
 		data-elevation={elevationState.base}
 		data-elevation-hover={elevationState.hover}
 		data-elevation-active={elevationState.active}
-		use:floating={{ anchor: activatorRef, side: position, offset: 6 }}
-		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: () => (open = false) }}
+		onfocusout={onFocusOut}
+		use:floating={{ anchor: triggerRef, side: position, offset: 6 }}
+		use:clickOutside={{ exclude: [contentRef, triggerRef], onClose: () => close() }}
 		{...attrs.rest}
 	>
 		{@render children?.()}

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

@@ -1,15 +1,21 @@
 import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types';
 import type { Snippet } from 'svelte';
-export type ModelPopoverProps = {
-    toggle: (element: HTMLElement | null) => void;
-};
+/** The attributes to spread on the element that opens the popover */
+export interface PopoverTriggerProps {
+    'aria-haspopup': 'dialog';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onclick: (event: MouseEvent) => void;
+}
 export interface PopoverProps extends Component {
     ref?: HTMLElement | null;
     open?: boolean;
     rounded?: RoundedType | 'full';
     position?: 'top' | 'bottom' | 'left' | 'right';
     color?: ColorProps;
-    activator?: Snippet<[ModelPopoverProps]>;
+    trigger?: Snippet<[PopoverTriggerProps]>;
     elevation?: ElevationProps;
     density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
+    /** removed in 0.8.0: use the trigger snippet */
+    activator?: never;
 }

package/dist/components/textfield/textfield.svelte

@@ -6,8 +6,7 @@
 		ref = $bindable(),
 		value = $bindable(),
 		type = 'text',
-		min,
-		max,
+		maxlength,
 		counter = false,
 		hideSpinButtons = false,
 		class: className,
@@ -21,6 +20,7 @@
 		rounded,
 		color,
 		elevation,
+		label,
 		disabled = false,
 		readonly = false,
 		error = false,
@@ -44,13 +44,6 @@
 	let inputRef = $state<HTMLInputElement | null>(null);
 	let text = $derived(`${value ?? ''}`);
 
-	$effect(() => {
-		if (typeof max === 'number' && max > 0 && text.length > max) {
-			const truncated = text.slice(0, max);
-			value = typeof value === 'number' ? Number(truncated) || 0 : truncated;
-		}
-	});
-
 	function clear() {
 		value = '';
 		inputRef?.focus();
@@ -70,6 +63,7 @@
 	{rounded}
 	{color}
 	{elevation}
+	{label}
 	{disabled}
 	{readonly}
 	{error}
@@ -88,7 +82,7 @@
 	{prependInner}
 	{appendInner}
 	dirty={text.length > 0}
-	counter={counter ? `${text.length}${max ? `/${max}` : ''}` : undefined}
+	counter={counter ? `${text.length}${maxlength ? `/${maxlength}` : ''}` : undefined}
 	onclear={clear}
 	data-hide-spin-buttons={type === 'number' && hideSpinButtons}
 >
@@ -101,8 +95,7 @@
 			class="kit-textfield__input"
 			{type}
 			size="1"
-			minlength={min}
-			maxlength={max}
+			{maxlength}
 		/>
 	{/snippet}
 </Field>

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { ClassNameType, KitClassNameType, KitStylePropertiesType, StylePropertiesType } from '../../@types';
 import type { FieldBaseProps } from '../field/field.types';
-type FieldOwnedAttributes = keyof FieldBaseProps | 'size' | 'type' | 'value' | 'min' | 'max';
+type FieldOwnedAttributes = keyof FieldBaseProps | 'size' | 'type' | 'value';
 export interface TextfieldProps extends FieldBaseProps, Omit<HTMLInputAttributes, FieldOwnedAttributes | 'class' | 'style' | 'children'> {
     ref?: HTMLElement | null;
     class?: ClassNameType;
@@ -10,10 +10,6 @@ export interface TextfieldProps extends FieldBaseProps, Omit<HTMLInputAttributes
     's-style'?: KitStylePropertiesType;
     value?: string | number;
     type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
-    /** minimal length of the value */
-    min?: number;
-    /** maximal length of the value, also used by the counter */
-    max?: number;
     counter?: boolean;
     hideSpinButtons?: boolean;
 }

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

@@ -0,0 +1,9 @@
+import type { TooltipValue } from './tooltip.types.ts';
+/**
+ * tooltip - Shows the shared tooltip on hover and keyboard focus of the node.
+ * A node without an accessible name gets the label as aria-label, the others get it as a description.
+ */
+export declare function tooltip(node: HTMLElement, value: TooltipValue): {
+    update(next: TooltipValue): void;
+    destroy(): void;
+};

package/dist/components/tooltip/tooltip-action.svelte.js

@@ -0,0 +1,159 @@
+import { mount } from 'svelte';
+const sharedId = 'kit-tooltip-shared';
+// one tooltip for every kit:btn, kit:chip and kit:icon, mounted on the first hover or focus
+const shared = $state({
+    id: sharedId,
+    open: false,
+    label: '',
+    location: 'bottom',
+    variant: undefined,
+    density: 'default',
+    rounded: 'xs',
+    delayDuration: 850,
+    closeDelay: 100
+});
+let loading = null;
+let owner = null;
+function load() {
+    loading ??= import('./tooltip.svelte').then(({ default: Tooltip }) => {
+        const instance = mount(Tooltip, { target: document.body, props: shared });
+        return instance.triggerHandlers;
+    });
+    return loading;
+}
+function normalize(value) {
+    if (!value)
+        return null;
+    return typeof value === 'string' ? { label: value } : value.label ? value : null;
+}
+/**
+ * tooltip - Shows the shared tooltip on hover and keyboard focus of the node.
+ * A node without an accessible name gets the label as aria-label, the others get it as a description.
+ */
+export function tooltip(node, value) {
+    let options = normalize(value);
+    let named = false;
+    let hovered = false;
+    let listening = false;
+    function syncName() {
+        if (named)
+            node.removeAttribute('aria-label');
+        named = false;
+        if (!options)
+            return;
+        const hasName = node.hasAttribute('aria-label') ||
+            node.hasAttribute('aria-labelledby') ||
+            !!node.textContent?.trim();
+        if (hasName)
+            return;
+        node.setAttribute('aria-label', options.label);
+        named = true;
+    }
+    function describe(on) {
+        if (named)
+            return;
+        const ids = (node.getAttribute('aria-describedby') ?? '').split(' ').filter(Boolean);
+        const others = ids.filter((id) => id !== sharedId);
+        const next = on ? [...others, sharedId] : others;
+        if (next.length)
+            node.setAttribute('aria-describedby', next.join(' '));
+        else
+            node.removeAttribute('aria-describedby');
+    }
+    function activate() {
+        if (!options)
+            return;
+        owner = node;
+        Object.assign(shared, {
+            label: options.label,
+            location: options.location ?? 'bottom',
+            variant: options.variant,
+            density: options.density ?? 'default',
+            rounded: options.rounded ?? 'xs',
+            delayDuration: options.delayDuration ?? 850,
+            closeDelay: options.closeDelay ?? 100
+        });
+    }
+    // the handlers read currentTarget and target, gone once the event is dispatched
+    const as = (event, target = event.target) => ({ currentTarget: node, target, pointerType: event.pointerType });
+    const onPointerEnter = (event) => {
+        hovered = true;
+        if (event.pointerType === 'touch')
+            return;
+        const fake = as(event);
+        load().then((handlers) => {
+            if (!hovered)
+                return;
+            activate();
+            handlers().onpointerenter(fake);
+        });
+    };
+    const onPointerLeave = (event) => {
+        hovered = false;
+        if (owner === node)
+            loading?.then((handlers) => handlers().onpointerleave(event));
+    };
+    const onPointerDown = (event) => {
+        if (owner === node)
+            loading?.then((handlers) => handlers().onpointerdown(event));
+    };
+    const onFocusIn = (event) => {
+        if (node.contains(event.relatedTarget))
+            return;
+        describe(true);
+        const fake = as(event);
+        load().then((handlers) => {
+            if (!node.contains(document.activeElement))
+                return;
+            activate();
+            handlers().onfocus(fake);
+        });
+    };
+    const onFocusOut = (event) => {
+        if (node.contains(event.relatedTarget))
+            return;
+        describe(false);
+        if (owner === node)
+            loading?.then((handlers) => handlers().onblur(event));
+    };
+    function listen(on) {
+        if (on === listening)
+            return;
+        listening = on;
+        const method = on ? 'addEventListener' : 'removeEventListener';
+        node[method]('pointerenter', onPointerEnter);
+        node[method]('pointerleave', onPointerLeave);
+        node[method]('pointerdown', onPointerDown);
+        node[method]('focusin', onFocusIn);
+        node[method]('focusout', onFocusOut);
+    }
+    function release() {
+        if (owner !== node)
+            return;
+        owner = null;
+        shared.open = false;
+    }
+    listen(!!options);
+    syncName();
+    return {
+        update(next) {
+            options = normalize(next);
+            listen(!!options);
+            syncName();
+            if (!options) {
+                describe(false);
+                release();
+            }
+            else if (owner === node) {
+                activate();
+            }
+        },
+        destroy() {
+            listen(false);
+            if (named)
+                node.removeAttribute('aria-label');
+            describe(false);
+            release();
+        }
+    };
+}

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;