lapikit 0.7.2 → 0.7.4

package/dist/labs/sheet/sheet.svelte

@@ -3,9 +3,15 @@
 	 * Sheet component
 	 * @description A simple sheet component for experimentation for developers Lapikit. Please don't use it in production.
 	 */
-	import { useComponentAttrs, useElevation } from '../../utils';
+	import { useComponentAttrs, useElevation, useIsInteractive } from '../../utils';
+	import { ripple } from '../../animations';
+	import type { SheetProps } from './sheet.types.js';
 
 	let {
+		ref = $bindable(),
+		is = 'div',
+		href,
+		type,
 		class: className,
 		style: styleAttr,
 		children,
@@ -13,38 +19,66 @@
 		's-style': sStyle,
 		elevation,
 		rounded,
+		density = 'default',
 		variant = 'filled',
 		active,
 		color,
+		interactive,
+		disabled = false,
+		noRipple,
 		...rest
-	} = $props();
+	}: SheetProps = $props();
 
 	// states
 	let attrs = $derived(
 		useComponentAttrs('kit-sheet', { className, sClass, styleAttr, sStyle, color, active }, rest)
 	);
 	let elevationState = $derived(useElevation(elevation));
+	let tag = $derived((href && 'a') || is);
+	// undefined: detected (a, button, onclick...), true: forced, false: no visual feedback (still clickable)
+	let isInteractive = $derived(interactive ?? useIsInteractive(rest, tag, ['a', 'button']));
+	let isDisabled = $derived(!!disabled);
+	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);
 </script>
 
-<div
+<svelte:element
+	this={tag}
+	bind:this={ref}
 	class={attrs.class}
 	style={attrs.style}
+	href={resolvedHref}
+	type={resolvedType}
+	disabled={resolvedDisabled}
+	tabindex={resolvedTabIndex}
 	data-rounded={rounded}
+	data-density={density}
 	data-variant={variant}
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
 	data-active={active}
+	data-interactive={isInteractive}
+	data-disabled={isDisabled}
+	aria-disabled={isDisabled || undefined}
+	use:ripple={{
+		component: 'sheet',
+		disabled: noRipple || isDisabled || !isInteractive
+	}}
 	{...attrs.rest}
 >
 	{@render children?.()}
-</div>
+</svelte:element>
 
-<style>.kit-sheet {
+<style>:where(.kit-sheet) {
   --kit-sheet-color: initial;
   --kit-sheet-on-color: initial;
   --kit-sheet-active-fg: initial;
   --kit-sheet-active-shade: initial;
+  --kit-sheet-hover-fg: initial;
+  --kit-sheet-pressed-fg: initial;
   --kit-sheet-bg: var(--kit-sheet-color, var(--kit-color-surface-1));
   --kit-sheet-fg: var(--kit-sheet-on-color, var(--kit-sheet-contrast, var(--kit-color-text)));
   --kit-sheet-ink: var(--kit-sheet-color, var(--kit-color-text));
@@ -59,12 +93,19 @@
   );
 }
 @supports (color: color(from red srgb-linear r g b)) {
-  .kit-sheet {
+  :where(.kit-sheet) {
     --kit-sheet-contrast: color(from var(--kit-sheet-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-sheet) {
+  --kit-sheet-p: 12px;
+}
+
 .kit-sheet {
   display: flex;
+  position: relative;
+  gap: calc(var(--kit-space-default) + var(--kit-sheet-density-offset) / 2);
+  padding: calc(var(--kit-sheet-p) + var(--kit-sheet-density-offset) / 2);
   background-color: var(--kit-sheet-bg);
   color: var(--kit-sheet-fg);
   border-radius: var(--kit-sheet-radius);
@@ -78,7 +119,20 @@
   }
 }
 
-.kit-sheet[data-variant=tonal] {
+/* native resets: no background here, it would beat the background of .kit-sheet */
+a.kit-sheet {
+  text-decoration: none;
+}
+
+button.kit-sheet {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  text-align: inherit;
+}
+
+:where(.kit-sheet[data-variant=tonal]) {
   --kit-sheet-bg: color-mix(in oklab, var(--kit-sheet-ink) 16%, transparent);
   --kit-sheet-fg: var(--kit-sheet-ink);
   --kit-sheet-border: transparent;
@@ -86,25 +140,47 @@
   --kit-sheet-active-fg: var(--kit-sheet-ink);
 }
 
-.kit-sheet[data-variant=outline] {
+:where(.kit-sheet[data-variant=text]) {
+  --kit-sheet-bg: transparent;
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: transparent;
+  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 14%, transparent);
+  --kit-sheet-active-fg: var(--kit-sheet-ink);
+}
+
+:where(.kit-sheet[data-variant=plain]) {
+  --kit-sheet-bg: transparent;
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: transparent;
+  --kit-sheet-hover: transparent;
+  --kit-sheet-pressed: transparent;
+  --kit-sheet-hover-fg: color-mix(in oklab, var(--kit-sheet-fg) 72%, transparent);
+  --kit-sheet-pressed-fg: color-mix(in oklab, var(--kit-sheet-fg) 56%, transparent);
+  --kit-sheet-active: transparent;
+  --kit-sheet-active-fg: var(--kit-sheet-color, var(--kit-color-accent));
+}
+
+:where(.kit-sheet[data-variant=outline]) {
   --kit-sheet-bg: transparent;
   --kit-sheet-fg: var(--kit-sheet-ink);
   --kit-sheet-border: var(--kit-sheet-color, var(--kit-color-border));
   --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 14%, transparent);
   --kit-sheet-active-fg: var(--kit-sheet-ink);
-  border: 1px solid var(--kit-sheet-border);
 }
 
-.kit-sheet[data-variant=surface] {
+:where(.kit-sheet[data-variant=surface]) {
   --kit-sheet-bg: color-mix(in oklab, var(--kit-sheet-ink) 8%, transparent);
   --kit-sheet-fg: var(--kit-sheet-ink);
   --kit-sheet-border: color-mix(in oklab, var(--kit-sheet-ink) 35%, transparent);
   --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 18%, transparent);
   --kit-sheet-active-fg: var(--kit-sheet-ink);
-  border: 1px solid var(--kit-sheet-border);
 }
 
-.kit-sheet[data-active=true] {
+.kit-sheet:is([data-variant=outline], [data-variant=surface]) {
+  border: var(--kit-outline-weight) solid var(--kit-sheet-border);
+}
+
+:where(.kit-sheet[data-active=true]) {
   --kit-sheet-bg: var(--kit-sheet-active, var(--kit-color-accent));
   --kit-sheet-fg: var(
   	--kit-sheet-active-fg,
@@ -112,34 +188,84 @@
   );
 }
 
+/**
+ * interactive: hover, pressed, focus-visible and disabled
+ */
+.kit-sheet[data-interactive=true]:not([data-disabled=true]) {
+  cursor: pointer;
+}
+.kit-sheet[data-interactive=true]:not([data-disabled=true]):hover {
+  background-color: var(--kit-sheet-hover);
+  color: var(--kit-sheet-hover-fg, var(--kit-sheet-fg));
+}
+.kit-sheet[data-interactive=true]:not([data-disabled=true]):active {
+  background-color: var(--kit-sheet-pressed);
+  color: var(--kit-sheet-pressed-fg, var(--kit-sheet-fg));
+}
+
+.kit-sheet:not([data-disabled=true]):focus-visible {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+
+.kit-sheet[data-disabled=true] {
+  opacity: var(--kit-disabled-opacity, 0.55);
+  pointer-events: none;
+  user-select: none;
+}
+
 /** 
  * rounded
  * @link https://lapikit.dev/docs/customize
  */
-.kit-sheet[data-rounded=none] {
+:where(.kit-sheet[data-rounded="0"]) {
   --kit-sheet-radius: var(--kit-shape-none);
 }
 
-.kit-sheet[data-rounded=xs] {
+:where(.kit-sheet[data-rounded=xs]) {
   --kit-sheet-radius: var(--kit-shape-xs);
 }
 
-.kit-sheet[data-rounded=sm] {
+:where(.kit-sheet[data-rounded=sm]) {
   --kit-sheet-radius: var(--kit-shape-sm);
 }
 
-.kit-sheet[data-rounded=md] {
+:where(.kit-sheet[data-rounded=md]) {
   --kit-sheet-radius: var(--kit-shape-md);
 }
 
-.kit-sheet[data-rounded=lg] {
+:where(.kit-sheet[data-rounded=lg]) {
   --kit-sheet-radius: var(--kit-shape-lg);
 }
 
-.kit-sheet[data-rounded=xl] {
+:where(.kit-sheet[data-rounded=xl]) {
   --kit-sheet-radius: var(--kit-shape-xl);
 }
 
-.kit-sheet[data-rounded=full] {
+:where(.kit-sheet[data-rounded=full]) {
   --kit-sheet-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-sheet[data-density=dense]) {
+  --kit-sheet-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-sheet[data-density=compact]) {
+  --kit-sheet-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-sheet[data-density=default]) {
+  --kit-sheet-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-sheet[data-density=comfortable]) {
+  --kit-sheet-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-sheet[data-density=spacious]) {
+  --kit-sheet-density-offset: var(--kit-density-spacious);
 }</style>

package/dist/labs/sheet/sheet.svelte.d.ts

@@ -1,12 +1,4 @@
-declare const Sheet: import("svelte").Component<{
-    class: any;
-    style: any;
-    children: any;
-    elevation: any;
-    rounded: any;
-    variant?: string;
-    active: any;
-    color: any;
-} & Record<string, any>, {}, "">;
+import type { SheetProps } from './sheet.types.ts';
+declare const Sheet: import("svelte").Component<SheetProps, {}, "ref">;
 type Sheet = ReturnType<typeof Sheet>;
 export default Sheet;

package/dist/labs/sheet/sheet.types.d.ts

@@ -0,0 +1,16 @@
+import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types';
+export interface SheetProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'article' | 'section' | 'aside' | 'a' | 'button';
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'filled' | 'tonal' | 'outline' | 'text' | 'plain' | 'surface';
+    rounded?: RoundedType | 'full';
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
+    elevation?: ElevationProps;
+    active?: boolean;
+    color?: ColorProps;
+    interactive?: boolean;
+    disabled?: boolean;
+    noRipple?: boolean;
+}

package/dist/labs/sheet/sheet.types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/color.d.ts

@@ -1,4 +1,4 @@
 import type { ColorProps } from '../@types';
-export declare function resolveColor(color: string | null | undefined): string | undefined;
-export declare function resolveOnColor(color: string | null | undefined): string | undefined;
+export declare function resolveColor(color: string | false | null | undefined): string | undefined;
+export declare function resolveOnColor(color: string | false | null | undefined): string | undefined;
 export declare function colorStyle(name: string, color: ColorProps | null | undefined, active?: boolean): string;

package/dist/utils/color.js

@@ -2,7 +2,8 @@ import { DEV } from 'esm-env';
 const paletteName = /^[a-zA-Z][\w-]*$/;
 const unsafe = /[;{}]/;
 function clean(color) {
-    const value = color?.trim();
+    // color={isActive && 'accent'} gives false: only a string is a color
+    const value = typeof color === 'string' ? color.trim() : undefined;
     if (!value)
         return undefined;
     if (unsafe.test(value)) {

package/dist/utils/components.d.ts

@@ -1,4 +1,4 @@
-import type { ColorProps, ComponentAttrs, ElevationProps, ElevationState, PropValue, SStyleProp, useClassNameProps, useStylesProps } from '../@types';
+import type { ColorProps, ComponentAttrs, ElevationProps, ElevationState, PropValue, SStyleProp, useStylesProps } from '../@types';
 import type { ClassValue } from 'svelte/elements';
 /**
  * The classes of the s-class_xxx directives (class:xxx on a kit tag):
@@ -9,15 +9,6 @@ import type { ClassValue } from 'svelte/elements';
  * - false, null, undefined and '' give nothing.
  */
 export declare function directiveClasses(classProps: Record<string, PropValue> | undefined): string[];
-/**
- * useClassName - Utility to compute class names for a component.
- * @param baseClass - The base class name for the component.
- * @param className - Additional class names: a string or an array of strings.
- * @param sClass - The s-class property which can be a string, array, or object.
- * @param classProps - An object containing s-class_xxx directives.
- * @returns A computed class string: no extra spaces, no duplicates, in the order of the inputs.
- */
-export declare function useClassName({ baseClass, className, sClass, classProps }?: useClassNameProps): string;
 export declare function useIsInteractive(props: Record<string, unknown>, tag: string, interactiveTags: readonly string[], interactive?: boolean): boolean;
 /**
  * useStyles - Utility to compute style declarations for a component (pure function).
@@ -58,3 +49,12 @@ export declare function useComponentAttrs(baseClass: string, { className, sClass
     color?: ColorProps | null;
     active?: boolean;
 }, rest: Record<string, unknown>): ComponentAttrs;
+/**
+ * splitAriaAttrs - Separates the aria-* attributes from the other attributes, for a component whose
+ * role is on another element than its content (dialog, modal).
+ * @param rest - The rest of the props of the component.
+ */
+export declare function splitAriaAttrs(rest: Record<string, unknown>): {
+    aria: Record<string, unknown>;
+    others: Record<string, unknown>;
+};

package/dist/utils/components.js

@@ -3,8 +3,6 @@ import { makeComponentProps } from '../html-mapped';
 import { colorStyle } from './color.js';
 const endsWithSeparator = /[^a-zA-Z0-9]$/;
 const startsWithSeparator = /^[^a-zA-Z0-9]/;
-const whitespace = /\s/;
-const whitespaces = /\s+/;
 const propertyCache = new Map();
 function hasKeys(value) {
     if (!value || typeof value !== 'object')
@@ -15,39 +13,6 @@ function hasKeys(value) {
     }
     return false;
 }
-/**
- * Adds the classes of a value (one or several, separated by spaces) to the set.
- * The set keeps the first position of each class and drops the duplicates.
- */
-function addClasses(classes, value) {
-    if (!whitespace.test(value)) {
-        if (value)
-            classes.add(value);
-        return;
-    }
-    for (const name of value.split(whitespaces)) {
-        if (name)
-            classes.add(name);
-    }
-}
-/**
- * Adds a class value with the rules of clsx (class on an element): a string, an array (nested too),
- * or an object whose keys are added when their value is truthy. Joining an array would give "a,b"
- */
-function addClassValue(classes, value) {
-    if (typeof value === 'string')
-        addClasses(classes, value);
-    else if (Array.isArray(value)) {
-        for (const item of value)
-            addClassValue(classes, item);
-    }
-    else if (value && typeof value === 'object') {
-        for (const key in value) {
-            if (value[key])
-                addClasses(classes, key);
-        }
-    }
-}
 /**
  * The classes of the s-class_xxx directives (class:xxx on a kit tag):
  * - true gives the name (class:active -> active);
@@ -74,46 +39,6 @@ export function directiveClasses(classProps) {
     }
     return classes;
 }
-/**
- * useClassName - Utility to compute class names for a component.
- * @param baseClass - The base class name for the component.
- * @param className - Additional class names: a string or an array of strings.
- * @param sClass - The s-class property which can be a string, array, or object.
- * @param classProps - An object containing s-class_xxx directives.
- * @returns A computed class string: no extra spaces, no duplicates, in the order of the inputs.
- */
-export function useClassName({ baseClass = '', className, sClass, classProps } = {}) {
-    if (!sClass && !className && !hasKeys(classProps))
-        return baseClass;
-    const classes = new Set();
-    if (baseClass)
-        addClasses(classes, baseClass);
-    if (typeof sClass === 'string') {
-        addClasses(classes, sClass);
-    }
-    else if (Array.isArray(sClass)) {
-        for (const value of sClass) {
-            if (typeof value === 'string')
-                addClasses(classes, value);
-        }
-    }
-    else if (sClass && typeof sClass === 'object') {
-        for (const key in sClass) {
-            const value = sClass[key];
-            if (value === true)
-                addClasses(classes, key);
-            else if (typeof value === 'string')
-                addClasses(classes, value);
-        }
-    }
-    if (classProps) {
-        for (const name of directiveClasses(classProps))
-            addClasses(classes, name);
-    }
-    if (className)
-        addClassValue(classes, className);
-    return [...classes].join(' ');
-}
 /**
  * useIsInteractive - Utility to determine whether a component should behave as interactive:
  * either explicitly flagged, rendered as an interactive tag (e.g. 'a', 'button'), or given
@@ -243,3 +168,19 @@ export function useComponentAttrs(baseClass, { className, sClass, styleAttr, sSt
         rest: restProps
     };
 }
+/**
+ * splitAriaAttrs - Separates the aria-* attributes from the other attributes, for a component whose
+ * role is on another element than its content (dialog, modal).
+ * @param rest - The rest of the props of the component.
+ */
+export function splitAriaAttrs(rest) {
+    const aria = {};
+    const others = {};
+    for (const key in rest) {
+        if (key.startsWith('aria-'))
+            aria[key] = rest[key];
+        else
+            others[key] = rest[key];
+    }
+    return { aria, others };
+}

package/dist/utils/floating.d.ts

@@ -0,0 +1,58 @@
+export type FloatingSide = 'top' | 'bottom' | 'left' | 'right';
+export type FloatingAlign = 'start' | 'center' | 'end';
+/** An element, or a point of the viewport (the position of a pointer event) */
+export type FloatingAnchor = HTMLElement | {
+    x: number;
+    y: number;
+};
+export interface FloatingOptions {
+    anchor: FloatingAnchor | null | undefined;
+    /** false hides the element without removing it (default true) */
+    open?: boolean;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    /** space between the anchor and the floating element, in px */
+    offset?: number;
+    /** minimal space between the floating element and the edges of the viewport, in px */
+    padding?: number;
+    /** moves to the opposite side when there is not enough space */
+    flip?: boolean;
+}
+export interface FloatingRect {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface FloatingPosition {
+    x: number;
+    y: number;
+    side: FloatingSide;
+    /** position of the center of the anchor along the floating element, for an arrow */
+    arrow: number;
+}
+/**
+ * computeFloating - The position of a floating element next to an anchor (pure function).
+ * @param anchor - The rect of the anchor, in the viewport.
+ * @param size - The size of the floating element (offsetWidth / offsetHeight: not affected by a transform).
+ * @param viewport - The size of the viewport, without the scrollbars.
+ */
+export declare function computeFloating(anchor: FloatingRect, size: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, { side, align, offset, padding, flip }?: Omit<FloatingOptions, 'anchor'>): FloatingPosition;
+/**
+ * floating - Shows an element in the top layer (Popover API) next to its anchor, and keeps it there.
+ * The element needs the popover attribute. It gets its position (left / top), its side (data-side)
+ * and the position of the arrow (--kit-floating-arrow).
+ * It follows the scroll of every ancestor, the resize of the viewport and the size of both elements.
+ */
+export declare function floating(node: HTMLElement, options: FloatingOptions): {
+    update(next: FloatingOptions): void;
+    destroy(): void;
+};

package/dist/utils/floating.js

@@ -0,0 +1,131 @@
+const opposite = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+};
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), Math.max(min, max));
+}
+/**
+ * computeFloating - The position of a floating element next to an anchor (pure function).
+ * @param anchor - The rect of the anchor, in the viewport.
+ * @param size - The size of the floating element (offsetWidth / offsetHeight: not affected by a transform).
+ * @param viewport - The size of the viewport, without the scrollbars.
+ */
+export function computeFloating(anchor, size, viewport, { side = 'bottom', align = 'start', offset = 6, padding = 8, flip = true } = {}) {
+    const space = {
+        top: anchor.top - offset - padding,
+        bottom: viewport.height - anchor.bottom - offset - padding,
+        left: anchor.left - offset - padding,
+        right: viewport.width - anchor.right - offset - padding
+    };
+    const vertical = side === 'top' || side === 'bottom';
+    const needed = vertical ? size.height : size.width;
+    let resolvedSide = side;
+    if (flip && space[side] < needed && space[opposite[side]] > space[side]) {
+        resolvedSide = opposite[side];
+    }
+    let x;
+    let y;
+    if (vertical) {
+        y = resolvedSide === 'top' ? anchor.top - offset - size.height : anchor.bottom + offset;
+        x =
+            align === 'start'
+                ? anchor.left
+                : align === 'end'
+                    ? anchor.right - size.width
+                    : anchor.left + (anchor.width - size.width) / 2;
+    }
+    else {
+        x = resolvedSide === 'left' ? anchor.left - offset - size.width : anchor.right + offset;
+        y =
+            align === 'start'
+                ? anchor.top
+                : align === 'end'
+                    ? anchor.bottom - size.height
+                    : anchor.top + (anchor.height - size.height) / 2;
+    }
+    // shift: the floating element stays in the viewport
+    x = clamp(x, padding, viewport.width - size.width - padding);
+    y = clamp(y, padding, viewport.height - size.height - padding);
+    const arrow = vertical
+        ? clamp(anchor.left + anchor.width / 2 - x, 8, size.width - 8)
+        : clamp(anchor.top + anchor.height / 2 - y, 8, size.height - 8);
+    return { x, y, side: resolvedSide, arrow };
+}
+function anchorRect(anchor) {
+    if (anchor instanceof HTMLElement)
+        return anchor.getBoundingClientRect();
+    return { top: anchor.y, right: anchor.x, bottom: anchor.y, left: anchor.x, width: 0, height: 0 };
+}
+function supportsPopover(node) {
+    return typeof node.showPopover === 'function';
+}
+/**
+ * floating - Shows an element in the top layer (Popover API) next to its anchor, and keeps it there.
+ * The element needs the popover attribute. It gets its position (left / top), its side (data-side)
+ * and the position of the arrow (--kit-floating-arrow).
+ * It follows the scroll of every ancestor, the resize of the viewport and the size of both elements.
+ */
+export function floating(node, options) {
+    let frame = 0;
+    function toggle() {
+        if (!supportsPopover(node))
+            return;
+        const shown = node.matches(':popover-open');
+        if (options.open !== false && !shown)
+            node.showPopover();
+        if (options.open === false && shown)
+            node.hidePopover();
+    }
+    function update() {
+        const { anchor, open, ...rest } = options;
+        if (open === false || !anchor || !node.isConnected)
+            return;
+        if (anchor instanceof HTMLElement && !anchor.isConnected)
+            return;
+        const position = computeFloating(anchorRect(anchor), { width: node.offsetWidth, height: node.offsetHeight }, {
+            width: document.documentElement.clientWidth,
+            height: document.documentElement.clientHeight
+        }, rest);
+        node.style.left = `${position.x}px`;
+        node.style.top = `${position.y}px`;
+        node.style.setProperty('--kit-floating-arrow', `${position.arrow}px`);
+        node.dataset.side = position.side;
+    }
+    function schedule() {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(update);
+    }
+    toggle();
+    update();
+    // capture: the scroll of any ancestor, not only the window
+    window.addEventListener('scroll', schedule, { capture: true, passive: true });
+    window.addEventListener('resize', schedule, { passive: true });
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+    observer?.observe(node);
+    if (options.anchor instanceof HTMLElement)
+        observer?.observe(options.anchor);
+    return {
+        update(next) {
+            if (next.anchor !== options.anchor) {
+                if (options.anchor instanceof HTMLElement)
+                    observer?.unobserve(options.anchor);
+                if (next.anchor instanceof HTMLElement)
+                    observer?.observe(next.anchor);
+            }
+            options = next;
+            toggle();
+            schedule();
+        },
+        destroy() {
+            cancelAnimationFrame(frame);
+            window.removeEventListener('scroll', schedule, { capture: true });
+            window.removeEventListener('resize', schedule);
+            observer?.disconnect();
+            if (supportsPopover(node) && node.matches(':popover-open'))
+                node.hidePopover();
+        }
+    };
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components.js';
 export * from './outside.js';
 export * from './color.js';
+export * from './floating.js';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
 export * from './components.js';
 export * from './outside.js';
 export * from './color.js';
+export * from './floating.js';