lapikit 0.7.9 → 0.8.1

package/dist/components/list/list.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { useComponentAttrs } from '../../utils';
+	import { setListContext } from './list.context.js';
 	import type { ListProps } from './list.types.js';
 
 	let {
@@ -22,6 +23,16 @@
 	let attrs = $derived(
 		useComponentAttrs('kit-list', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
+	let role = $derived(nav ? 'navigation' : is === 'ul' ? undefined : 'list');
+	let customRole = $derived(attrs.rest.role as string | undefined);
+
+	setListContext({
+		get item() {
+			if (customRole) return customRole === 'list' ? 'listitem' : undefined;
+			if (is === 'ul') return 'li';
+			return role === 'list' ? 'listitem' : undefined;
+		}
+	});
 </script>
 
 <svelte:element
@@ -34,7 +45,7 @@
 	data-density={density}
 	data-rounded={rounded}
 	data-nav={nav}
-	role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
+	{role}
 	{...attrs.rest}
 >
 	{@render children?.()}
@@ -61,15 +72,18 @@
 .kit-list[data-nav=true] :global(.kit-list-item) {
   border-radius: var(--kit-list-item-radius);
 }
-.kit-list:not([data-nav=true]) :global(.kit-list-item:first-child) {
+.kit-list:not([data-nav=true]) :global(.kit-list-item:first-child:not(.kit-list-item-wrapper > *)),
+.kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:first-child > .kit-list-item) {
   border-start-start-radius: var(--kit-list-item-radius);
   border-start-end-radius: var(--kit-list-item-radius);
 }
-.kit-list:not([data-nav=true]) :global(.kit-list-item:last-child) {
+.kit-list:not([data-nav=true]) :global(.kit-list-item:last-child:not(.kit-list-item-wrapper > *)),
+.kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:last-child > .kit-list-item) {
   border-end-start-radius: var(--kit-list-item-radius);
   border-end-end-radius: var(--kit-list-item-radius);
 }
-.kit-list:not([data-nav=true]) :global(.kit-list-item:not(:first-child, :last-child)) {
+.kit-list:not([data-nav=true]) :global(.kit-list-item:not(:first-child, :last-child)),
+.kit-list:not([data-nav=true]) :global(.kit-list-item-wrapper:not(:first-child, :last-child) > .kit-list-item) {
   --kit-list-item-radius: 0;
 }
 .kit-list:is([data-variant=outline], [data-variant=surface]) :global(.kit-list-item::before) {

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

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { ripple } from '../../../animations';
 	import { useComponentAttrs, useIsInteractive } from '../../../utils';
+	import { getListContext } from '../list.context.js';
 	import type { ListItemProps } from '../list.types.js';
 
 	let {
 		ref = $bindable(),
-		is = 'div',
+		is,
 		children = undefined,
 		class: className,
 		style: styleAttr,
@@ -29,42 +30,67 @@
 			rest
 		)
 	);
+	const list = getListContext();
+
 	let tag = $derived(
-		href ? 'a' : is === 'div' && typeof attrs.rest.onclick === 'function' ? 'button' : is
+		href
+			? 'a'
+			: (is ?? 'div') === 'div' && typeof attrs.rest.onclick === 'function'
+				? 'button'
+				: (is ?? (list?.item === 'li' ? 'li' : 'div'))
 	);
 	let isInteractive = $derived(interactive ?? useIsInteractive(rest, tag, ['a', 'button']));
+	let wrapperTag = $derived.by(() => {
+		if (list?.item === 'li') return tag === 'li' ? undefined : 'li';
+		if (list?.item === 'listitem') return tag === 'a' || tag === 'button' ? 'div' : undefined;
+		return undefined;
+	});
 </script>
 
-<svelte:element
-	this={tag}
-	bind:this={ref}
-	class={attrs.class}
-	style={attrs.style}
-	href={href && !disabled ? href : undefined}
-	type={tag === 'button' ? 'button' : undefined}
-	disabled={tag === 'button' ? disabled : undefined}
-	tabindex={href && disabled ? -1 : undefined}
-	role={tag === 'div' ? 'listitem' : undefined}
-	data-active={active}
-	data-disabled={disabled}
-	data-interactive={isInteractive}
-	aria-disabled={disabled || undefined}
-	use:ripple={{
-		component: 'list-item',
-		disabled: noRipple || disabled || !isInteractive
-	}}
-	{...attrs.rest}
->
-	{#if prepend}
-		<span class="kit-list-item__prepend">{@render prepend()}</span>
-	{/if}
-
-	<span class="kit-list-item__content">{@render children?.()}</span>
-
-	{#if append}
-		<span class="kit-list-item__append">{@render append()}</span>
-	{/if}
-</svelte:element>
+{#snippet item()}
+	<svelte:element
+		this={tag}
+		bind:this={ref}
+		class={attrs.class}
+		style={attrs.style}
+		href={href && !disabled ? href : undefined}
+		type={tag === 'button' ? 'button' : undefined}
+		disabled={tag === 'button' ? disabled : undefined}
+		tabindex={href && disabled ? -1 : undefined}
+		role={tag === 'div' && list?.item === 'listitem' ? 'listitem' : undefined}
+		data-active={active}
+		data-disabled={disabled}
+		data-interactive={isInteractive}
+		aria-disabled={disabled || undefined}
+		use:ripple={{
+			component: 'list-item',
+			disabled: noRipple || disabled || !isInteractive
+		}}
+		{...attrs.rest}
+	>
+		{#if prepend}
+			<span class="kit-list-item__prepend">{@render prepend()}</span>
+		{/if}
+
+		<span class="kit-list-item__content">{@render children?.()}</span>
+
+		{#if append}
+			<span class="kit-list-item__append">{@render append()}</span>
+		{/if}
+	</svelte:element>
+{/snippet}
+
+{#if wrapperTag}
+	<svelte:element
+		this={wrapperTag}
+		class="kit-list-item-wrapper"
+		role={wrapperTag === 'div' ? 'listitem' : undefined}
+	>
+		{@render item()}
+	</svelte:element>
+{:else}
+	{@render item()}
+{/if}
 
 <style>:where(.kit-list-item) {
   --kit-list-item-color: initial;
@@ -96,6 +122,10 @@
   --kit-list-item-on-color: var(--kit-list-on-color);
 }
 
+.kit-list-item-wrapper {
+  display: contents;
+}
+
 .kit-list-item {
   position: relative;
   display: flex;
@@ -166,7 +196,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 +205,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();
+        }
+    };
+}