lapikit 0.7.2 → 0.7.4

package/dist/components/popover/popover.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { useClassName, useStyles, clickOutside, useElevation } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
-	import { getPositions } from './popover.svelte.js';
+	import { clickOutside, floating, useComponentAttrs, useElevation } from '../../utils';
 	import type { ModelPopoverProps, PopoverProps } from './popover.types.js';
 
 	let {
@@ -12,9 +10,8 @@
 		rounded = 'md',
 		position = 'bottom',
 		color,
-		background,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		elevation = '2',
@@ -22,84 +19,36 @@
 		...rest
 	}: PopoverProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs('kit-popover-content', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
 
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-popover-content',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	const positioner = getPositions();
-
 	let contentRef = $state<HTMLElement | null>(null);
 	let activatorRef = $state<HTMLElement | null>(null);
-	let axis = $state(positioner.values);
-
-	const handleToggle = (element: HTMLElement | null) => {
-		if (element === null) return;
-		activatorRef = element;
-		open = !open;
-	};
-
-	let model: ModelPopoverProps = {
-		toggle: (element) => handleToggle(element)
-	};
 
-	const updatePosition = () => {
-		if (!contentRef || !activatorRef) return;
-		positioner.update(activatorRef, contentRef, position, false, true);
-		axis = positioner.values;
+	const model: ModelPopoverProps = {
+		toggle: (element) => {
+			if (element === null) return;
+			activatorRef = element;
+			open = !open;
+		}
 	};
 
 	$effect(() => {
-		if (open && contentRef && activatorRef) {
-			updatePosition();
-		}
+		ref = contentRef;
 	});
 
 	$effect(() => {
 		if (!open) return;
 
-		const close = () => (open = false);
-
-		window.addEventListener('scroll', close, { passive: true });
-		window.addEventListener('resize', updatePosition);
-
-		return () => {
-			window.removeEventListener('scroll', close);
-			window.removeEventListener('resize', updatePosition);
+		const onKeydown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') open = false;
 		};
-	});
 
-	$effect(() => {
-		ref = contentRef;
+		document.addEventListener('keydown', onKeydown);
+		return () => document.removeEventListener('keydown', onKeydown);
 	});
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-popover-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-popover-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
 </script>
 
 {@render activator?.(model)}
@@ -107,75 +56,124 @@
 {#if open}
 	<div
 		bind:this={contentRef}
-		class={componentClass}
-		style={`left:${axis.x}px; top:${axis.y}px; ${resolvedStyle}`}
+		popover="manual"
+		class={attrs.class}
+		style={attrs.style}
 		role="dialog"
 		data-rounded={rounded}
-		data-position={axis.location ?? position}
 		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) }}
-		{...restProps}
+		{...attrs.rest}
 	>
 		{@render children?.()}
 	</div>
 {/if}
 
-<style>
-	.kit-popover-content {
-		--kit-popover-bg: var(--kit-color-surface-3);
-		--kit-popover-fg: var(--kit-color-text);
-
-		position: fixed;
-		z-index: 1900;
-		display: inline-block;
-		width: auto;
-		max-width: min(28rem, calc(100vw - 1rem));
-		padding: calc(var(--kit-space-default) + var(--kit-popover-density-offset) / 2);
-		border: 0;
-		border-radius: var(--kit-popover-radius);
-		background: var(--kit-popover-bg);
-		color: var(--kit-popover-fg);
-		opacity: 1;
-		transition: opacity 140ms ease;
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-popover-content[data-rounded='0'] {
-		--kit-popover-radius: var(--kit-shape-none);
-	}
-	.kit-popover-content[data-rounded='xs'] {
-		--kit-popover-radius: var(--kit-shape-xs);
-	}
-	.kit-popover-content[data-rounded='sm'] {
-		--kit-popover-radius: var(--kit-shape-sm);
-	}
-	.kit-popover-content[data-rounded='md'] {
-		--kit-popover-radius: var(--kit-shape-md);
-	}
-	.kit-popover-content[data-rounded='lg'] {
-		--kit-popover-radius: var(--kit-shape-lg);
-	}
-	.kit-popover-content[data-rounded='xl'] {
-		--kit-popover-radius: var(--kit-shape-xl);
-	}
-
-	/** 
-	 * density
-	 * @link no url
-	 */
-	.kit-popover-content[data-density='compact'] {
-		--kit-popover-density-offset: var(--kit-space-compact);
-	}
-	.kit-popover-content[data-density='default'] {
-		--kit-popover-density-offset: var(--kit-space-default);
-	}
-	.kit-popover-content[data-density='comfortable'] {
-		--kit-popover-density-offset: var(--kit-space-comfortable);
-	}
-</style>
+<style>:where(.kit-popover-content) {
+  --kit-popover-content-color: initial;
+  --kit-popover-content-on-color: initial;
+  --kit-popover-content-active-fg: initial;
+  --kit-popover-content-active-shade: initial;
+  --kit-popover-content-hover-fg: initial;
+  --kit-popover-content-pressed-fg: initial;
+  --kit-popover-content-bg: var(--kit-popover-content-color, var(--kit-color-surface-3));
+  --kit-popover-content-fg: var(--kit-popover-content-on-color, var(--kit-popover-content-contrast, var(--kit-color-text)));
+  --kit-popover-content-ink: var(--kit-popover-content-color, var(--kit-color-text));
+  --kit-popover-content-hover: color-mix(in oklab, var(--kit-popover-content-bg), var(--kit-popover-content-fg) 8%);
+  --kit-popover-content-pressed: color-mix(in oklab, var(--kit-popover-content-bg), var(--kit-popover-content-fg) 14%);
+  --kit-popover-content-soft: color-mix(in oklab, var(--kit-popover-content-bg) 16%, transparent);
+  --kit-popover-content-border: color-mix(in oklab, var(--kit-popover-content-bg), var(--kit-popover-content-fg) 20%);
+  --kit-popover-content-active: color-mix(
+  	in oklab,
+  	var(--kit-popover-content-color),
+  	var(--kit-popover-content-fg) var(--kit-popover-content-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-popover-content) {
+    --kit-popover-content-contrast: color(from var(--kit-popover-content-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);
+  }
+}
+
+.kit-popover-content {
+  position: fixed;
+  inset: auto;
+  z-index: 1900;
+  display: inline-block;
+  box-sizing: border-box;
+  width: auto;
+  max-width: min(28rem, 100vw - 1rem);
+  margin: 0;
+  padding: calc(var(--kit-space-default) + var(--kit-popover-content-density-offset) / 2);
+  overflow: visible;
+  border: 0;
+  border-radius: var(--kit-popover-content-radius);
+  background-color: var(--kit-popover-content-bg);
+  color: var(--kit-popover-content-fg);
+  animation: kit-popover-enter 140ms ease;
+}
+
+@keyframes kit-popover-enter {
+  from {
+    opacity: 0;
+  }
+}
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-popover-content[data-rounded="0"]) {
+  --kit-popover-content-radius: var(--kit-shape-none);
+}
+
+:where(.kit-popover-content[data-rounded=xs]) {
+  --kit-popover-content-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-popover-content[data-rounded=sm]) {
+  --kit-popover-content-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-popover-content[data-rounded=md]) {
+  --kit-popover-content-radius: var(--kit-shape-md);
+}
+
+:where(.kit-popover-content[data-rounded=lg]) {
+  --kit-popover-content-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-popover-content[data-rounded=xl]) {
+  --kit-popover-content-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-popover-content[data-rounded=full]) {
+  --kit-popover-content-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/popover#density
+ */
+:where(.kit-popover-content[data-density=dense]) {
+  --kit-popover-content-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-popover-content[data-density=compact]) {
+  --kit-popover-content-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-popover-content[data-density=default]) {
+  --kit-popover-content-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-popover-content[data-density=comfortable]) {
+  --kit-popover-content-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-popover-content[data-density=spacious]) {
+  --kit-popover-content-density-offset: var(--kit-density-spacious);
+}</style>

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

@@ -1,22 +1,15 @@
-import type { Component, DensityType, ElevationProps, PropValue, RoundedType } from '../../@types';
+import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types';
 import type { Snippet } from 'svelte';
-export type PositionElement = {
-    x: number;
-    y: number;
-    location: 'top' | 'bottom' | 'left' | 'right' | null;
-};
 export type ModelPopoverProps = {
     toggle: (element: HTMLElement | null) => void;
 };
 export interface PopoverProps extends Component {
     ref?: HTMLElement | null;
     open?: boolean;
-    rounded?: RoundedType;
+    rounded?: RoundedType | 'full';
     position?: 'top' | 'bottom' | 'left' | 'right';
-    color?: string;
-    background?: string;
+    color?: ColorProps;
     activator?: Snippet<[ModelPopoverProps]>;
     elevation?: ElevationProps;
-    density?: DensityType;
-    [key: string]: PropValue | Record<string, PropValue> | unknown;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
 }

package/dist/components/separator/separator.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs } from '../../utils';
 	import type { SeparatorProps } from './separator.types.js';
 
 	let {
@@ -10,104 +9,74 @@
 		thickness = 'thin',
 		orientation = 'horizontal',
 		color,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		...rest
 	}: SeparatorProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-separator',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	const formatThickness = (value?: number | string) =>
-		typeof thickness === 'number' ? `${value}px` : value;
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-separator-fg:${color && `var(--kit-color-${color})`}` : '',
-			thickness && orientation === 'horizontal'
-				? `--kit-separator-top-width:${formatThickness(thickness)}`
-				: '',
-			thickness && orientation === 'vertical'
-				? `--kit-separator-right-width:${formatThickness(thickness)}`
-				: ''
-		]
-			.filter(Boolean)
-			.join('; ')
+	let resolvedThickness = $derived(typeof thickness === 'number' ? `${thickness}px` : thickness);
+	let attrs = $derived(
+		useComponentAttrs(
+			'kit-separator',
+			{
+				className,
+				sClass,
+				styleAttr,
+				sStyle: { '--kit-separator-thickness': resolvedThickness, ...sStyle },
+				color
+			},
+			rest
+		)
 	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	{...restProps}
-	class={componentClass}
-	style={resolvedStyle}
-	role="separator"
-	aria-orientation={orientation || 'horizontal'}
+	class={attrs.class}
+	style={attrs.style}
+	role={is === 'hr' ? undefined : 'separator'}
+	aria-orientation={orientation}
 	data-inset={inset || undefined}
 	data-orientation={orientation}
-	style:--kit-separator-color={color && `var(--kit-color-${color})`}
+	{...attrs.rest}
 />
 
-<style>
-	.kit-separator {
-		--kit-separator-color: var(--kit-color-border);
-		--kit-separator-vertical-min-size: 1.5rem;
-
-		display: block;
-		flex: 1 1 100%;
-		height: 0;
-		max-height: 0;
-		border-color: var(--kit-separator-color);
-		border-style: solid;
-		transition: inherit;
-	}
-
-	.kit-separator[data-inset]:not([data-orientation='vertical']) {
-		max-width: calc(100% - 4.5rem);
-		margin-inline-start: 4.5rem;
-	}
-
-	.kit-separator[data-inset][data-orientation='vertical'] {
-		margin-block: 0.5rem;
-		max-height: calc(100% - 1rem);
-	}
-
-	.kit-separator:not([data-orientation='vertical']) {
-		width: 100%;
-		border-width: var(--kit-separator-top-width) 0 0 0;
-	}
+<style>:where(.kit-separator) {
+  --kit-separator-color: var(--kit-color-border);
+  --kit-separator-vertical-min-size: 1.5rem;
+}
 
-	.kit-separator[data-orientation='vertical'] {
-		align-self: stretch;
-		display: inline-flex;
-		width: 0;
-		height: auto;
-		min-height: var(--kit-separator-vertical-min-size);
-		max-width: 0;
-		max-height: none;
-		vertical-align: text-bottom;
-		border-width: 0 var(--kit-separator-right-width) 0 0;
-	}
-</style>
+.kit-separator {
+  display: block;
+  flex: 1 1 100%;
+  box-sizing: border-box;
+  height: 0;
+  max-height: 0;
+  border: 0 solid var(--kit-separator-color);
+}
+.kit-separator:not([data-orientation=vertical]) {
+  width: 100%;
+  border-top-width: var(--kit-separator-thickness);
+}
+.kit-separator[data-orientation=vertical] {
+  display: inline-flex;
+  align-self: stretch;
+  width: 0;
+  max-width: 0;
+  height: auto;
+  min-height: var(--kit-separator-vertical-min-size);
+  max-height: none;
+  vertical-align: text-bottom;
+  border-right-width: var(--kit-separator-thickness);
+}
+.kit-separator[data-inset]:not([data-orientation=vertical]) {
+  max-width: calc(100% - 4.5rem);
+  margin-inline-start: 4.5rem;
+}
+.kit-separator[data-inset][data-orientation=vertical] {
+  max-height: calc(100% - 1rem);
+  margin-block: 0.5rem;
+}</style>

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

@@ -5,7 +5,7 @@ export interface SeparatorProps extends Base {
     is?: 'div' | 'hr';
     inset?: boolean;
     thickness?: string | number;
-    color?: string;
+    color?: string | false;
     orientation?: Orientation;
 }
 export {};

package/dist/components/spacer/spacer.svelte

@@ -1,41 +1,22 @@
 <script lang="ts">
-	import { makeComponentProps } from '../../html-mapped';
-	import { useClassName, useStyles } from '../../utils';
+	import { useComponentAttrs } from '../../utils';
 	import type { SpacerProps } from './spacer.types.js';
 
 	let {
 		is = 'div',
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		...rest
 	}: SpacerProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-spacer',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
+	let attrs = $derived(
+		useComponentAttrs('kit-spacer', { className, sClass, styleAttr, sStyle }, rest)
 	);
 </script>
 
-<svelte:element this={is} class={componentClass} style={componentStyle} {...restProps}>
-</svelte:element>
+<svelte:element this={is} class={attrs.class} style={attrs.style} {...attrs.rest}></svelte:element>
 
 <style>
 	.kit-spacer {