lapikit 0.7.8 → 0.8.0

package/dist/components/btn/btn.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { useComponentAttrs, useElevation } from '../../utils';
 	import { ripple } from '../../animations';
+	import { tooltip as tooltipAction } from '../tooltip/tooltip-action.svelte.js';
 	import type { ButtonProps } from './btn.types.js';
 
 	let {
@@ -25,6 +26,7 @@
 		checked,
 		value,
 		label,
+		tooltip,
 		wide,
 		noRipple,
 		load,
@@ -44,6 +46,7 @@
 
 	let isInput = $derived(!!input || is === 'input');
 	let isDisabled = $derived(!!disabled);
+	let focusableDisabled = $derived(isDisabled && !!tooltip);
 	let tag = $derived<'button' | 'a' | 'label' | 'div'>(
 		isInput
 			? type === 'checkbox' || type === 'radio'
@@ -55,8 +58,17 @@
 	);
 	let resolvedHref = $derived(tag === 'a' && !isDisabled ? href : undefined);
 	let resolvedType = $derived(tag === 'button' ? (type ?? 'button') : undefined);
-	let resolvedDisabled = $derived(tag === 'button' ? isDisabled : undefined);
-	let resolvedTabIndex = $derived(tag === 'a' && isDisabled ? -1 : undefined);
+	let resolvedDisabled = $derived(tag === 'button' ? isDisabled && !focusableDisabled : undefined);
+	let resolvedTabIndex = $derived(
+		tag === 'a' && isDisabled ? (focusableDisabled ? 0 : -1) : undefined
+	);
+
+	// disabled with a tooltip: focusable, the click does nothing
+	const blockClick = (event: MouseEvent) => {
+		if (!focusableDisabled) return;
+		event.preventDefault();
+		event.stopPropagation();
+	};
 </script>
 
 <svelte:element
@@ -78,12 +90,15 @@
 	data-interactive={true}
 	data-active={active}
 	data-disabled={isDisabled}
+	data-disabled-focusable={focusableDisabled || undefined}
+	onclickcapture={blockClick}
 	data-loading={loading}
 	data-block={block}
 	data-wide={wide}
 	data-icon={icon}
 	aria-busy={loading || undefined}
 	aria-disabled={isDisabled || undefined}
+	use:tooltipAction={tooltip}
 	use:ripple={{
 		component: 'btn',
 		disabled: noRipple || isDisabled
@@ -103,7 +118,8 @@
 			{checked}
 			{value}
 			aria-label={label || (value != null ? String(value) : undefined)}
-			disabled={isDisabled}
+			disabled={isDisabled && !focusableDisabled}
+			aria-disabled={focusableDisabled || undefined}
 		/>
 	{:else}
 		<span class="kit-btn__inner">
@@ -416,7 +432,7 @@ button.kit-btn {
   color: var(--kit-btn-pressed-fg, var(--kit-btn-fg));
 }
 
-.kit-btn:not([data-disabled=true]):focus-visible {
+.kit-btn:is(:not([data-disabled=true]), [data-disabled-focusable=true]):focus-visible {
   outline: 2px solid var(--kit-color-focus);
   outline-offset: 2px;
 }
@@ -427,6 +443,11 @@ button.kit-btn {
   user-select: none;
 }
 
+.kit-btn[data-disabled-focusable=true] {
+  pointer-events: auto;
+  cursor: not-allowed;
+}
+
 /**
  * rounded
  * @link https://lapikit.dev/docs/customize

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

@@ -1,5 +1,6 @@
 import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
 import type { Snippet } from 'svelte';
+import type { TooltipValue } from '../tooltip/tooltip.types';
 export interface ButtonProps extends Component {
     ref?: HTMLElement | null;
     is?: 'button' | 'a' | 'input';
@@ -16,6 +17,8 @@ export interface ButtonProps extends Component {
     type?: 'button' | 'submit' | 'reset' | 'checkbox' | 'radio';
     value?: string | number | boolean;
     label?: string;
+    /** text of a tooltip on hover and keyboard focus, or its options */
+    tooltip?: TooltipValue;
     block?: boolean;
     wide?: boolean;
     noRipple?: boolean;

package/dist/components/card/card.svelte

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

package/dist/components/chip/chip.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { useComponentAttrs, useElevation } from '../../utils';
 	import { ripple } from '../../animations';
+	import { tooltip as tooltipAction } from '../tooltip/tooltip-action.svelte.js';
 	import type { ChipProps } from './chip.types.js';
 
 	let {
@@ -26,6 +27,7 @@
 		checked,
 		value,
 		label,
+		tooltip,
 		noRipple,
 		load,
 		append,
@@ -46,6 +48,7 @@
 	let isDisabled = $derived(!!disabled);
 	let isReadonly = $derived(!!readonly);
 	let isLocked = $derived(isDisabled || isReadonly);
+	let focusableDisabled = $derived(isLocked && !!tooltip);
 	let hasPressHandler = $derived(
 		['onclick', 'onkeydown', 'onkeyup'].some((key) => typeof attrs.rest[key] === 'function')
 	);
@@ -64,8 +67,17 @@
 	let isInteractive = $derived((interactive ?? (tag !== 'div' || hasPressHandler)) && !isLocked);
 	let resolvedHref = $derived(tag === 'a' && !isLocked ? href : undefined);
 	let resolvedType = $derived(tag === 'button' ? (type ?? 'button') : undefined);
-	let resolvedDisabled = $derived(tag === 'button' ? isLocked : undefined);
-	let resolvedTabIndex = $derived(tag === 'a' && isLocked ? -1 : undefined);
+	let resolvedDisabled = $derived(tag === 'button' ? isLocked && !focusableDisabled : undefined);
+	let resolvedTabIndex = $derived(
+		tag === 'a' && isLocked ? (focusableDisabled ? 0 : -1) : undefined
+	);
+
+	// disabled with a tooltip: focusable, the click does nothing
+	const blockClick = (event: MouseEvent) => {
+		if (!focusableDisabled) return;
+		event.preventDefault();
+		event.stopPropagation();
+	};
 </script>
 
 <svelte:element
@@ -87,11 +99,14 @@
 	data-interactive={isInteractive}
 	data-active={active}
 	data-disabled={isDisabled}
+	data-disabled-focusable={(isDisabled && focusableDisabled) || undefined}
+	onclickcapture={blockClick}
 	data-readonly={isReadonly}
 	data-loading={loading}
 	data-label-style={labelStyle}
 	aria-busy={loading || undefined}
 	aria-disabled={isLocked || undefined}
+	use:tooltipAction={tooltip}
 	use:ripple={{
 		component: 'chip',
 		disabled: noRipple || !isInteractive
@@ -111,7 +126,8 @@
 			{checked}
 			{value}
 			aria-label={label || (value != null ? String(value) : undefined)}
-			disabled={isLocked}
+			disabled={isLocked && !focusableDisabled}
+			aria-disabled={focusableDisabled || undefined}
 		/>
 	{:else}
 		<span class="kit-chip__inner">
@@ -401,7 +417,7 @@ button.kit-chip {
   color: var(--kit-chip-pressed-fg, var(--kit-chip-fg));
 }
 
-.kit-chip:not([data-disabled=true]):focus-visible {
+.kit-chip:is(:not([data-disabled=true]), [data-disabled-focusable=true]):focus-visible {
   outline: 2px solid var(--kit-color-focus);
   outline-offset: 2px;
 }
@@ -412,6 +428,11 @@ button.kit-chip {
   user-select: none;
 }
 
+.kit-chip[data-disabled-focusable=true] {
+  pointer-events: auto;
+  cursor: not-allowed;
+}
+
 /**
  * rounded
  * @link https://lapikit.dev/docs/customize

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

@@ -1,5 +1,6 @@
 import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
 import type { Snippet } from 'svelte';
+import type { TooltipValue } from '../tooltip/tooltip.types';
 export interface ChipProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'a' | 'input' | 'button';
@@ -18,6 +19,8 @@ export interface ChipProps extends Component {
     type?: 'button' | 'submit' | 'reset' | 'checkbox' | 'radio';
     value?: string | number | boolean;
     label?: string;
+    /** text of a tooltip on hover and keyboard focus, or its options */
+    tooltip?: TooltipValue;
     noRipple?: boolean;
     readonly?: boolean;
     load?: Snippet;

package/dist/components/dropdown/dropdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
+	import { DEV } from 'esm-env';
 	import {
 		clickOutside,
 		floating,
@@ -7,11 +8,17 @@
 		useElevation,
 		type FloatingAnchor
 	} from '../../utils';
-	import type { DropdownProps, ModelDropdownProps } from './dropdown.types.js';
+	import type {
+		DropdownProps,
+		DropdownTriggerModel,
+		DropdownTriggerProps
+	} from './dropdown.types.js';
 
 	let {
 		ref = $bindable(),
+		open = $bindable(false),
 		children,
+		trigger,
 		activator,
 		rounded = 'md',
 		position = 'bottom',
@@ -27,77 +34,147 @@
 		...rest
 	}: DropdownProps = $props();
 
+	$effect(() => {
+		if (DEV && activator)
+			console.warn('[lapikit] kit:dropdown: activator is removed, use the trigger snippet');
+	});
+
+	const menuId = $props.id();
+
 	let attrs = $derived(
 		useComponentAttrs('kit-dropdown-content', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 	let elevationState = $derived(useElevation(elevation));
 
 	let contentRef = $state<HTMLElement | null>(null);
-	let activatorRef = $state<HTMLElement | PointerEvent | null>(null);
-	let open = $state(false);
+	let triggerRef = $state<HTMLElement | null>(null);
+	// a point opens the menu at the position of the pointer (context menu)
+	let anchor = $state<FloatingAnchor | null>(null);
 	let timeoutId: ReturnType<typeof setTimeout> | null = null;
 
-	// a pointer event opens the menu at the position of the pointer (context menu)
-	let anchor = $derived<FloatingAnchor | null>(
-		activatorRef instanceof HTMLElement
-			? activatorRef
-			: activatorRef
-				? { x: activatorRef.clientX, y: activatorRef.clientY }
-				: null
-	);
+	const itemSelector = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+	const focusableSelector = 'a[href], button, input, select, textarea, [tabindex]';
 
 	const clearHoverTimeout = () => {
 		if (timeoutId) clearTimeout(timeoutId);
 		timeoutId = null;
 	};
 
-	const handleToggle = (element: HTMLElement | PointerEvent | null) => {
-		if (element === null) return;
-		activatorRef = element;
-		open = !open;
+	const items = () => {
+		if (!contentRef) return [];
+		const menuItems = contentRef.querySelectorAll<HTMLElement>(itemSelector);
+		const list = menuItems.length
+			? menuItems
+			: contentRef.querySelectorAll<HTMLElement>(focusableSelector);
+		return [...list].filter(
+			(item) =>
+				!item.matches(':disabled, [aria-disabled="true"], [tabindex="-1"]:not([role^="menuitem"])')
+		);
+	};
+
+	const focusItem = (target: 'first' | 'last' | 'next' | 'previous') => {
+		const list = items();
+		if (!list.length) return;
+		const index = list.indexOf(document.activeElement as HTMLElement);
+		const next =
+			target === 'first'
+				? 0
+				: target === 'last'
+					? list.length - 1
+					: target === 'next'
+						? (index + 1) % list.length
+						: (index - 1 + list.length) % list.length;
+		list[next].focus();
 	};
 
-	const handleClose = () => {
+	const show = (target: FloatingAnchor, focus?: 'first' | 'last') => {
+		clearHoverTimeout();
+		anchor = target;
+		open = true;
+		if (focus) requestAnimationFrame(() => focusItem(focus));
+	};
+
+	const close = (restoreFocus = false) => {
 		clearHoverTimeout();
 		open = false;
+		if (restoreFocus) triggerRef?.focus();
 	};
 
-	const handleMouseEvent = (
-		state: 'open' | 'close',
-		element: HTMLElement | PointerEvent | null
-	) => {
+	const scheduleClose = () => {
 		if (!openOnHover) return;
-
-		if (state === 'open') {
-			clearHoverTimeout();
-			if (element) activatorRef = element;
-			open = true;
-			return;
-		}
-
-		timeoutId = setTimeout(() => {
-			open = false;
-			timeoutId = null;
-		}, 150);
+		clearHoverTimeout();
+		timeoutId = setTimeout(close, 150);
 	};
 
-	const model: ModelDropdownProps = {
+	let triggerProps: DropdownTriggerProps = $derived({
+		'aria-haspopup': 'menu',
+		'aria-expanded': open,
+		'aria-controls': menuId,
+		onclick: (event: MouseEvent) => {
+			triggerRef = event.currentTarget as HTMLElement;
+			if (open) close();
+			// detail is 0 when the click comes from the keyboard (Enter, Space)
+			else show(triggerRef, event.detail === 0 ? 'first' : undefined);
+		},
+		onkeydown: (event: KeyboardEvent) => {
+			if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+			event.preventDefault();
+			triggerRef = event.currentTarget as HTMLElement;
+			show(triggerRef, event.key === 'ArrowDown' ? 'first' : 'last');
+		},
+		...(openOnHover && {
+			onpointerenter: (event: PointerEvent) => {
+				if (event.pointerType === 'touch') return;
+				triggerRef = event.currentTarget as HTMLElement;
+				show(triggerRef);
+			},
+			onpointerleave: scheduleClose
+		})
+	});
+
+	const model: DropdownTriggerModel = {
 		get open() {
 			return open;
 		},
-		close: handleClose,
-		toggle: handleToggle
+		close: () => close(),
+		openAt: (event) => {
+			event.preventDefault();
+			triggerRef = event.currentTarget as HTMLElement;
+			show({ x: event.clientX, y: event.clientY });
+		}
+	};
+
+	const onMenuKeydown = (event: KeyboardEvent) => {
+		const keys: Record<string, 'first' | 'last' | 'next' | 'previous'> = {
+			ArrowDown: 'next',
+			ArrowUp: 'previous',
+			Home: 'first',
+			End: 'last'
+		};
+		if (keys[event.key]) {
+			event.preventDefault();
+			focusItem(keys[event.key]);
+		} else if (event.key === 'Tab') {
+			close();
+		}
 	};
 
 	$effect(() => {
 		ref = contentRef;
 	});
 
+	$effect(() => {
+		if (open && !anchor) {
+			triggerRef = document.querySelector<HTMLElement>(`[aria-controls="${CSS.escape(menuId)}"]`);
+			anchor = triggerRef;
+		}
+	});
+
 	$effect(() => {
 		if (!open) return;
 
 		const onKeydown = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') handleClose();
+			if (event.key === 'Escape') close(true);
 		};
 
 		document.addEventListener('keydown', onKeydown);
@@ -107,11 +184,12 @@
 	onDestroy(clearHoverTimeout);
 </script>
 
-{@render activator?.(model, (state, element) => handleMouseEvent(state, element))}
+{@render trigger?.(triggerProps, model)}
 
 {#if open}
 	<div
 		bind:this={contentRef}
+		id={menuId}
 		popover="manual"
 		class={attrs.class}
 		style={attrs.style}
@@ -121,14 +199,15 @@
 		data-elevation={elevationState.base}
 		data-elevation-hover={elevationState.hover}
 		data-elevation-active={elevationState.active}
-		onmouseover={() => handleMouseEvent('open', activatorRef)}
-		onmouseleave={() => handleMouseEvent('close', activatorRef)}
+		onpointerenter={() => openOnHover && clearHoverTimeout()}
+		onpointerleave={scheduleClose}
+		onkeydown={onMenuKeydown}
 		onclick={(event) => {
 			event.stopPropagation();
-			if (closeOnClick) handleClose();
+			if (closeOnClick) close(true);
 		}}
 		use:floating={{ anchor, side: position, offset: 0 }}
-		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: handleClose }}
+		use:clickOutside={{ exclude: [contentRef, triggerRef], onClose: () => close() }}
 		{...attrs.rest}
 	>
 		{@render children?.()}

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

@@ -1,4 +1,4 @@
 import type { DropdownProps } from './dropdown.types.ts';
-declare const Dropdown: import("svelte").Component<DropdownProps, {}, "ref">;
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "ref" | "open">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

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

@@ -1,22 +1,33 @@
 import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types/index';
 import type { Snippet } from 'svelte';
-export type ModelDropdownProps = {
+/** The attributes to spread on the element that opens the menu */
+export interface DropdownTriggerProps {
+    'aria-haspopup': 'menu';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onclick: (event: MouseEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+    onpointerenter?: (event: PointerEvent) => void;
+    onpointerleave?: (event: PointerEvent) => void;
+}
+/** The state of the menu, for a trigger that needs more than the props */
+export interface DropdownTriggerModel {
     open: boolean;
     close: () => void;
-    toggle: (element: HTMLElement | PointerEvent | null) => void;
-};
-export type ModelDropdownHandleProps = (state: 'open' | 'close', element: HTMLElement | PointerEvent | null) => void;
+    /** opens the menu at the position of the pointer (context menu) */
+    openAt: (event: MouseEvent) => void;
+}
 export interface DropdownProps extends Component {
     ref?: HTMLElement | null;
+    open?: boolean;
     rounded?: RoundedType | 'full';
     position?: 'top' | 'bottom' | 'left' | 'right';
     openOnHover?: boolean;
     closeOnClick?: boolean;
     color?: ColorProps;
     density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
-    activator?: Snippet<[
-        ModelDropdownProps,
-        (state: 'open' | 'close', element: HTMLElement | PointerEvent | null) => void
-    ]>;
+    trigger?: Snippet<[DropdownTriggerProps, DropdownTriggerModel]>;
     elevation?: ElevationProps;
+    /** removed in 0.8.0: use the trigger snippet */
+    activator?: never;
 }

package/dist/components/field/field.svelte

@@ -16,6 +16,7 @@
 		rounded = 'md',
 		color,
 		elevation,
+		label,
 		disabled = false,
 		readonly = false,
 		error = false,
@@ -76,11 +77,16 @@
 	data-readonly={readonly}
 	data-error={error}
 	data-focused={focused}
+	data-with-label={!!label}
 	data-with-message={hasMessage}
 	onfocusin={() => (focused = true)}
 	onfocusout={() => (focused = false)}
 	{...attrs.rest}
 >
+	{#if label}
+		<label class="kit-field__label" for={controlId}>{label}</label>
+	{/if}
+
 	{#if prepend}
 		<div class="kit-field__prepend">{@render prepend()}</div>
 	{/if}
@@ -192,13 +198,29 @@
   width: 100%;
   font-size: var(--kit-field-font);
 }
+.kit-field[data-with-label=true] {
+  grid-template-areas: ". label ." "prepend box append";
+}
 .kit-field[data-with-message=true] {
   grid-template-areas: "prepend box append" ". message .";
 }
+.kit-field[data-with-label=true][data-with-message=true] {
+  grid-template-areas: ". label ." "prepend box append" ". message .";
+}
 .kit-field[data-disabled=true] {
   opacity: var(--kit-disabled-opacity, 0.55);
   pointer-events: none;
 }
+.kit-field__label {
+  grid-area: label;
+  display: block;
+  padding-block-end: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.2;
+}
+.kit-field[data-error=true] .kit-field__label {
+  color: var(--kit-color-error);
+}
 .kit-field__prepend, .kit-field__append {
   display: flex;
   align-items: center;

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

@@ -16,6 +16,7 @@ export interface FieldBaseProps {
     rounded?: RoundedType | 'full';
     color?: ColorProps;
     elevation?: ElevationProps;
+    label?: string;
     disabled?: boolean;
     readonly?: boolean;
     error?: boolean;

package/dist/components/icon/icon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { useComponentAttrs } from '../../utils';
+	import { tooltip as tooltipAction } from '../tooltip/tooltip-action.svelte.js';
 	import type { IconProps } from './icon.types.js';
 
 	let {
@@ -16,6 +17,7 @@
 		size = 'default',
 		alt = '',
 		label = undefined,
+		tooltip = undefined,
 		decorative = true,
 		loading = 'eager',
 		decoding = 'async',
@@ -35,9 +37,14 @@
 	let hasContent = $derived(hasChildren || !!resolvedSrc || !!resolvedName);
 	let iconClass = $derived(!hasChildren && !resolvedSrc ? resolvedName : undefined);
 
-	let iconRole = $derived(!decorative && (label || alt) ? 'img' : undefined);
-	let iconAriaLabel = $derived(!decorative ? label || alt || undefined : undefined);
-	let iconAriaHidden = $derived(decorative ? true : undefined);
+	// an icon with a tooltip is not decorative: the tooltip names it
+	let tooltipLabel = $derived(typeof tooltip === 'string' ? tooltip : tooltip ? tooltip.label : '');
+	let isDecorative = $derived(decorative && !tooltipLabel);
+	let iconRole = $derived(!isDecorative && (label || alt || tooltipLabel) ? 'img' : undefined);
+	let iconAriaLabel = $derived(
+		!isDecorative ? label || alt || tooltipLabel || undefined : undefined
+	);
+	let iconAriaHidden = $derived(isDecorative ? true : undefined);
 	let imgAlt = $derived(decorative ? '' : alt || label || '');
 	let isSvgSrc = $derived(!!resolvedSrc && /\.svg($|\?)/i.test(resolvedSrc));
 	let useMaskMode = $derived(
@@ -58,6 +65,7 @@
 		role={iconRole}
 		aria-label={iconAriaLabel}
 		aria-hidden={iconAriaHidden}
+		use:tooltipAction={tooltip}
 		{...attrs.rest}
 	>
 		{#if hasChildren}

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

@@ -1,4 +1,5 @@
 import type { Component, SizeType } from '../../@types';
+import type { TooltipValue } from '../tooltip/tooltip.types';
 export interface IconProps extends Component {
     ref?: HTMLElement | null;
     is?: 'i' | 'span';
@@ -8,6 +9,8 @@ export interface IconProps extends Component {
     size?: SizeType;
     alt?: string;
     label?: string;
+    /** text of a tooltip on hover and keyboard focus, or its options */
+    tooltip?: TooltipValue;
     decorative?: boolean;
     loading?: 'eager' | 'lazy';
     decoding?: 'sync' | 'async' | 'auto';

package/dist/components/index.d.ts

@@ -9,17 +9,17 @@ export type { ButtonProps } from './btn/btn.types';
 export type { CardProps, CardActionsProps, CardContainerProps, CardContentProps, CardMediaProps, CardTitleProps } from './card/card.types';
 export type { ChipProps } from './chip/chip.types';
 export type { DialogProps } from './dialog/dialog.types';
-export type { DropdownProps, ModelDropdownProps, ModelDropdownHandleProps } from './dropdown/dropdown.types';
+export type { DropdownProps, DropdownTriggerProps, DropdownTriggerModel } from './dropdown/dropdown.types';
 export type { FieldProps, FieldBaseProps, FieldControlProps, FieldVariant } from './field/field.types';
 export type { IconProps } from './icon/icon.types';
 export type { ListProps, ListItemProps, ListVariant, ListElement, ListItemElement } from './list/list.types';
 export type { ModalProps } from './modal/modal.types';
-export type { PopoverProps, ModelPopoverProps } from './popover/popover.types';
+export type { PopoverProps, PopoverTriggerProps } from './popover/popover.types';
 export type { SeparatorProps } from './separator/separator.types';
 export type { SpacerProps } from './spacer/spacer.types';
 export type { TextfieldProps } from './textfield/textfield.types';
 export type { ToolbarProps } from './toolbar/toolbar.types';
-export type { TooltipProps } from './tooltip/tooltip.types';
+export type { TooltipProps, TooltipTriggerProps, TooltipOptions, TooltipValue } from './tooltip/tooltip.types';
 export { default as KitApp } from './app/app.svelte';
 export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';