lapikit 0.7.2 → 0.7.4

package/dist/components/tooltip/tooltip.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { useClassName, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
-	import { getPositionsTooltip } from './tooltip.svelte.js';
+	import { floating, useComponentAttrs } from '../../utils';
 	import type { TooltipProps } from './tooltip.types.js';
 
 	let {
@@ -14,85 +12,36 @@
 		label,
 		rounded = 'xs',
 		color,
-		background,
 		location = 'bottom',
 		delayDuration = 850,
 		density = 'default',
 		variant,
 		disabled = false,
 		avoidCollisions = true,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		...rest
 	}: TooltipProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let triggerClass = $derived(
-		useClassName({
-			baseClass: 'kit-tooltip-trigger',
-			className: '',
-			sClass,
-			classProps
-		})
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-tooltip__content',
-			className: `${className ?? ''}`.trim()
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
+	const tooltipId = $props.id();
 
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-tooltip-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-tooltip-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-tooltip', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 
-	const positioner = getPositionsTooltip();
-
 	let triggerRef = $state<HTMLElement | null>(null);
-	let tooltipRef = $state<HTMLElement | null>(null);
-	let axis = $state(positioner.values);
-	let timer = $state<ReturnType<typeof setTimeout> | null>(null);
-	const tooltipId = `kit-tooltip-${Math.random().toString(36).slice(2, 10)}`;
+	let timer: ReturnType<typeof setTimeout> | null = null;
+	let mounted = $derived(open || forceMount || !!tooltip);
 
 	const clearTimer = () => {
-		if (timer) {
-			clearTimeout(timer);
-			timer = null;
-		}
-	};
-
-	const updatePosition = () => {
-		if (!triggerRef || !tooltipRef) return;
-		positioner.update(triggerRef, tooltipRef, location, true, avoidCollisions);
-		axis = positioner.values;
+		if (timer) clearTimeout(timer);
+		timer = null;
 	};
 
 	const handleHoverOpen = () => {
-		if (disabled) {
-			open = false;
-			return;
-		}
-
+		if (disabled) return;
 		clearTimer();
 		timer = setTimeout(() => {
 			open = true;
@@ -101,11 +50,7 @@
 	};
 
 	const handleFocusOpen = () => {
-		if (disabled) {
-			open = false;
-			return;
-		}
-
+		if (disabled) return;
 		clearTimer();
 		open = true;
 	};
@@ -115,232 +60,222 @@
 		open = false;
 	};
 
-	const handleKeydown = (event: KeyboardEvent) => {
-		if (event.key === 'Escape') handleClose();
-	};
-
-	$effect(() => {
-		if (tooltip) forceMount = true;
-	});
-
 	$effect(() => {
 		if (disabled) open = false;
 	});
 
-	$effect(() => {
-		if (open && triggerRef && tooltipRef) {
-			updatePosition();
-		}
-	});
-
-	$effect(() => {
-		if (!open) return;
-
-		window.addEventListener('scroll', updatePosition, { passive: true });
-		window.addEventListener('resize', updatePosition);
-
-		return () => {
-			window.removeEventListener('scroll', updatePosition);
-			window.removeEventListener('resize', updatePosition);
-		};
-	});
-
 	$effect(() => {
 		ref = triggerRef;
 	});
 
-	onDestroy(() => {
-		clearTimer();
-	});
+	onDestroy(clearTimer);
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
 	bind:this={triggerRef}
-	class={triggerClass}
-	style="display:inline-flex"
+	class="kit-tooltip-trigger"
 	aria-describedby={open ? tooltipId : undefined}
 	onmouseenter={handleHoverOpen}
 	onmouseleave={handleClose}
 	onfocusin={handleFocusOpen}
 	onfocusout={handleClose}
-	onkeydown={handleKeydown}
+	onkeydown={(event) => event.key === 'Escape' && handleClose()}
 >
 	{@render children?.()}
 </span>
 
-{#if open || forceMount}
+{#if mounted}
 	<div
-		bind:this={tooltipRef}
-		class="kit-tooltip"
 		id={tooltipId}
+		popover="manual"
 		role="tooltip"
 		aria-label={label}
-		style={`transform: translate(${axis.x}px, ${axis.y}px); display:${open ? 'block' : 'none'}`}
+		class={attrs.class}
+		style={attrs.style}
+		data-density={density}
+		data-variant={variant}
+		data-rounded={rounded}
+		use:floating={{
+			anchor: triggerRef,
+			open,
+			side: location,
+			align: 'center',
+			offset: 6,
+			flip: avoidCollisions
+		}}
+		{...attrs.rest}
 	>
-		<div
-			class={componentClass}
-			style={resolvedStyle}
-			data-density={density}
-			data-location={axis.location ?? location}
-			data-variant={variant}
-			data-rounded={rounded}
-			{...restProps}
-		>
-			{#if tooltip}
-				{@render tooltip?.()}
-			{:else}
-				{label}
-			{/if}
-		</div>
+		{#if tooltip}
+			{@render tooltip()}
+		{:else}
+			{label}
+		{/if}
 	</div>
 {/if}
 
-<style>
-	.kit-tooltip-trigger {
-		display: inline-flex;
-		width: fit-content;
-		max-width: max-content;
-		justify-self: start;
-		align-self: start;
-	}
-
-	.kit-tooltip-trigger:focus-visible {
-		outline: 2px solid var(--kit-color-focus);
-		outline-offset: 2px;
-	}
-
-	.kit-tooltip {
-		position: fixed;
-		inset: 0 auto auto 0;
-		z-index: 2000;
-		margin: 0;
-		pointer-events: none;
-	}
-
-	.kit-tooltip__content {
-		--kit-tooltip-bg: var(--kit-color-surface-2);
-		--kit-tooltip-fg: var(--kit-color-text);
-
-		position: relative;
-		display: inline-block;
-		width: max-content;
-		max-width: min(20rem, calc(100vw - 1rem));
-		padding: calc(var(--kit-space-default) + var(--kit-tooltip-density-offset) / 2);
-		border: 0;
-		border-radius: var(--kit-tooltip-radius);
-		background: var(--kit-tooltip-bg);
-		color: var(--kit-tooltip-fg);
-		font-size: 0.875rem;
-		overflow-wrap: break-word;
-		box-shadow: 0 16px 29px -10px color-mix(in oklab, var(--kit-color-shadow) 18%, transparent);
-		animation: kit-tooltip-enter 150ms ease;
-	}
-
-	/** 
-	 * density
-	 * @link no links
-	 */
-	.kit-tooltip__content[data-density='compact'] {
-		--kit-tooltip-density-offset: var(--kit-density-compact);
-	}
-	.kit-tooltip__content[data-density='default'] {
-		--kit-tooltip-density-offset: var(--kit-density-default);
-	}
-	.kit-tooltip__content[data-density='comfortable'] {
-		--kit-tooltip-density-offset: var(--kit-density-comfortable);
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-tooltip__content[data-rounded='0'] {
-		--kit-tooltip-radius: var(--kit-shape-none);
-	}
-	.kit-tooltip__content[data-rounded='xs'] {
-		--kit-tooltip-radius: var(--kit-shape-xs);
-	}
-	.kit-tooltip__content[data-rounded='sm'] {
-		--kit-tooltip-radius: var(--kit-shape-sm);
-	}
-	.kit-tooltip__content[data-rounded='md'] {
-		--kit-tooltip-radius: var(--kit-shape-md);
-	}
-	.kit-tooltip__content[data-rounded='lg'] {
-		--kit-tooltip-radius: var(--kit-shape-lg);
-	}
-	.kit-tooltip__content[data-rounded='xl'] {
-		--kit-tooltip-radius: var(--kit-shape-xl);
-	}
-	.kit-tooltip__content[data-rounded='full'] {
-		--kit-tooltip-radius: var(--kit-shape-full);
-	}
-
-	.kit-tooltip__content[data-variant='arrow']::after {
-		content: '';
-		position: absolute;
-		border-style: solid;
-	}
-
-	.kit-tooltip__content[data-variant='arrow'][data-location='bottom']::after,
-	.kit-tooltip__content[data-variant='arrow'][data-location='top']::after {
-		left: 50%;
-		margin-left: -0.35rem;
-		border-width: 0.35rem;
-	}
-
-	.kit-tooltip__content[data-variant='arrow'][data-location='bottom']::after {
-		bottom: 100%;
-		border-color: transparent transparent var(--kit-tooltip-bg) transparent;
-	}
-
-	.kit-tooltip__content[data-variant='arrow'][data-location='top']::after {
-		top: 100%;
-		border-color: var(--kit-tooltip-bg) transparent transparent transparent;
-	}
-
-	.kit-tooltip__content[data-variant='arrow'][data-location='left']::after,
-	.kit-tooltip__content[data-variant='arrow'][data-location='right']::after {
-		top: 50%;
-		margin-top: -0.35rem;
-		border-width: 0.35rem;
-	}
-
-	.kit-tooltip__content[data-variant='arrow'][data-location='right']::after {
-		right: 100%;
-		border-color: transparent var(--kit-tooltip-bg) transparent transparent;
-	}
-
-	.kit-tooltip__content[data-variant='arrow'][data-location='left']::after {
-		left: 100%;
-		border-color: transparent transparent transparent var(--kit-tooltip-bg);
-	}
-
-	.kit-tooltip__content[data-location='top'] {
-		--kit-tooltip-enter-x: 0;
-		--kit-tooltip-enter-y: 0.5rem;
-	}
-
-	.kit-tooltip__content[data-location='bottom'] {
-		--kit-tooltip-enter-x: 0;
-		--kit-tooltip-enter-y: -0.5rem;
-	}
-
-	.kit-tooltip__content[data-location='right'] {
-		--kit-tooltip-enter-x: -0.5rem;
-		--kit-tooltip-enter-y: 0;
-	}
-
-	.kit-tooltip__content[data-location='left'] {
-		--kit-tooltip-enter-x: 0.5rem;
-		--kit-tooltip-enter-y: 0;
-	}
-
-	@keyframes kit-tooltip-enter {
-		from {
-			opacity: 0;
-			transform: translate(var(--kit-tooltip-enter-x, 0), var(--kit-tooltip-enter-y, 0)) scale(0.95);
-		}
-	}
-</style>
+<style>:where(.kit-tooltip) {
+  --kit-tooltip-color: initial;
+  --kit-tooltip-on-color: initial;
+  --kit-tooltip-active-fg: initial;
+  --kit-tooltip-active-shade: initial;
+  --kit-tooltip-hover-fg: initial;
+  --kit-tooltip-pressed-fg: initial;
+  --kit-tooltip-bg: var(--kit-tooltip-color, var(--kit-color-surface-2));
+  --kit-tooltip-fg: var(--kit-tooltip-on-color, var(--kit-tooltip-contrast, var(--kit-color-text)));
+  --kit-tooltip-ink: var(--kit-tooltip-color, var(--kit-color-text));
+  --kit-tooltip-hover: color-mix(in oklab, var(--kit-tooltip-bg), var(--kit-tooltip-fg) 8%);
+  --kit-tooltip-pressed: color-mix(in oklab, var(--kit-tooltip-bg), var(--kit-tooltip-fg) 14%);
+  --kit-tooltip-soft: color-mix(in oklab, var(--kit-tooltip-bg) 16%, transparent);
+  --kit-tooltip-border: color-mix(in oklab, var(--kit-tooltip-bg), var(--kit-tooltip-fg) 20%);
+  --kit-tooltip-active: color-mix(
+  	in oklab,
+  	var(--kit-tooltip-color),
+  	var(--kit-tooltip-fg) var(--kit-tooltip-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-tooltip) {
+    --kit-tooltip-contrast: color(from var(--kit-tooltip-color) srgb-linear clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)/1);
+  }
+}
+:where(.kit-tooltip) {
+  --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;
+  z-index: 2000;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(20rem, 100vw - 1rem);
+  margin: 0;
+  padding: calc(var(--kit-space-default) + var(--kit-tooltip-density-offset) / 2);
+  overflow: visible;
+  border: 0;
+  border-radius: var(--kit-tooltip-radius);
+  background-color: var(--kit-tooltip-bg);
+  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;
+}
+.kit-tooltip[data-side=top] {
+  --kit-tooltip-enter-y: 0.5rem;
+}
+.kit-tooltip[data-side=bottom] {
+  --kit-tooltip-enter-y: -0.5rem;
+}
+.kit-tooltip[data-side=right] {
+  --kit-tooltip-enter-x: -0.5rem;
+}
+.kit-tooltip[data-side=left] {
+  --kit-tooltip-enter-x: 0.5rem;
+}
+.kit-tooltip[data-variant=arrow]::after {
+  content: "";
+  position: absolute;
+  border: var(--kit-tooltip-arrow) solid transparent;
+}
+.kit-tooltip[data-variant=arrow]:is([data-side=top], [data-side=bottom])::after {
+  left: var(--kit-floating-arrow, 50%);
+  margin-left: calc(var(--kit-tooltip-arrow) * -1);
+}
+.kit-tooltip[data-variant=arrow]:is([data-side=left], [data-side=right])::after {
+  top: var(--kit-floating-arrow, 50%);
+  margin-top: calc(var(--kit-tooltip-arrow) * -1);
+}
+.kit-tooltip[data-variant=arrow][data-side=bottom]::after {
+  bottom: 100%;
+  border-bottom-color: var(--kit-tooltip-bg);
+}
+.kit-tooltip[data-variant=arrow][data-side=top]::after {
+  top: 100%;
+  border-top-color: var(--kit-tooltip-bg);
+}
+.kit-tooltip[data-variant=arrow][data-side=right]::after {
+  right: 100%;
+  border-right-color: var(--kit-tooltip-bg);
+}
+.kit-tooltip[data-variant=arrow][data-side=left]::after {
+  left: 100%;
+  border-left-color: var(--kit-tooltip-bg);
+}
+
+@keyframes kit-tooltip-enter {
+  from {
+    opacity: 0;
+    translate: var(--kit-tooltip-enter-x, 0) var(--kit-tooltip-enter-y, 0);
+    scale: 0.95;
+  }
+}
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-tooltip[data-rounded="0"]) {
+  --kit-tooltip-radius: var(--kit-shape-none);
+}
+
+:where(.kit-tooltip[data-rounded=xs]) {
+  --kit-tooltip-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-tooltip[data-rounded=sm]) {
+  --kit-tooltip-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-tooltip[data-rounded=md]) {
+  --kit-tooltip-radius: var(--kit-shape-md);
+}
+
+:where(.kit-tooltip[data-rounded=lg]) {
+  --kit-tooltip-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-tooltip[data-rounded=xl]) {
+  --kit-tooltip-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-tooltip[data-rounded=full]) {
+  --kit-tooltip-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/tooltip#density
+ */
+:where(.kit-tooltip[data-density=dense]) {
+  --kit-tooltip-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-tooltip[data-density=compact]) {
+  --kit-tooltip-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-tooltip[data-density=default]) {
+  --kit-tooltip-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-tooltip[data-density=comfortable]) {
+  --kit-tooltip-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-tooltip[data-density=spacious]) {
+  --kit-tooltip-density-offset: var(--kit-density-spacious);
+}</style>

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

@@ -1,4 +1,4 @@
-import type { Component, DensityType, PropValue, RoundedType } from '../../@types';
+import type { ColorProps, Component, RoundedType } from '../../@types';
 import type { Snippet } from 'svelte';
 export interface TooltipProps extends Component {
     ref?: HTMLElement | null;
@@ -7,18 +7,11 @@ export interface TooltipProps extends Component {
     rounded?: RoundedType | 'full';
     label?: string;
     location?: 'top' | 'bottom' | 'left' | 'right';
-    color?: string;
-    background?: string;
+    color?: ColorProps;
     delayDuration?: number;
     variant?: 'arrow';
-    density?: DensityType;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     disabled?: boolean;
     avoidCollisions?: boolean;
     tooltip?: Snippet;
-    [key: string]: PropValue | Record<string, PropValue> | unknown;
 }
-export type PositionElement = {
-    x: number;
-    y: number;
-    location: 'top' | 'bottom' | 'left' | 'right' | null;
-};

package/dist/constants.js

@@ -9,6 +9,7 @@ export const lapikitComponentPaths = {
     dropdown: 'dropdown/dropdown.svelte',
     popover: 'popover/popover.svelte',
     tooltip: 'tooltip/tooltip.svelte',
+    field: 'field/field.svelte',
     textfield: 'textfield/textfield.svelte',
     toolbar: 'toolbar/toolbar.svelte',
     list: 'list/list.svelte',

package/dist/html-mapped.d.ts

@@ -1,18 +1,4 @@
-import type { PropValue, SClassProp, SStyleProp } from './@types';
-/**
- * Computes a string of class names based on the provided sClass and classDirectiveProps.
- * @param sClass - The s-class property which can be a string, array, or object.
- * @param classDirectiveProps - An object containing s-class_xxx directives.
- * @returns A string of class names.
- */
-export declare function computeSClasses(sClass: SClassProp, classDirectiveProps: Record<string, unknown>): string;
-/**
- * Computes a string of style declarations based on the provided sStyle and styleDirectiveProps.
- * @param sStyle - The s-style property which is an object of style key-value pairs.
- * @param styleDirectiveProps - An object containing s-style_xxx directives.
- * @returns A string of style declarations.
- */
-export declare function computeSStyles(sStyle: SStyleProp, styleDirectiveProps: Record<string, unknown>): string;
+import type { PropValue } from './@types';
 /**
  * Makes component props by separating s-class and s-style directives from other props.
  * Optimized to use a single pass instead of three separate iterations.

package/dist/html-mapped.js

@@ -1,22 +1,3 @@
-import { useClassName, useStyles } from './utils/components.js';
-/**
- * Computes a string of class names based on the provided sClass and classDirectiveProps.
- * @param sClass - The s-class property which can be a string, array, or object.
- * @param classDirectiveProps - An object containing s-class_xxx directives.
- * @returns A string of class names.
- */
-export function computeSClasses(sClass, classDirectiveProps) {
-    return useClassName({ sClass, classProps: classDirectiveProps });
-}
-/**
- * Computes a string of style declarations based on the provided sStyle and styleDirectiveProps.
- * @param sStyle - The s-style property which is an object of style key-value pairs.
- * @param styleDirectiveProps - An object containing s-style_xxx directives.
- * @returns A string of style declarations.
- */
-export function computeSStyles(sStyle, styleDirectiveProps) {
-    return useStyles({ sStyle, styleProps: styleDirectiveProps });
-}
 /**
  * Makes component props by separating s-class and s-style directives from other props.
  * Optimized to use a single pass instead of three separate iterations.