lapikit 0.7.3 → 0.7.4

package/dist/labs/sheet/sheet.svelte

@@ -72,7 +72,7 @@
 	{@render children?.()}
 </svelte:element>
 
-<style>.kit-sheet {
+<style>:where(.kit-sheet) {
   --kit-sheet-color: initial;
   --kit-sheet-on-color: initial;
   --kit-sheet-active-fg: initial;
@@ -93,12 +93,15 @@
   );
 }
 @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);
   }
 }
-.kit-sheet {
+: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);
@@ -129,7 +132,7 @@ button.kit-sheet {
   text-align: inherit;
 }
 
-.kit-sheet[data-variant=tonal] {
+: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;
@@ -137,7 +140,7 @@ button.kit-sheet {
   --kit-sheet-active-fg: var(--kit-sheet-ink);
 }
 
-.kit-sheet[data-variant=text] {
+:where(.kit-sheet[data-variant=text]) {
   --kit-sheet-bg: transparent;
   --kit-sheet-fg: var(--kit-sheet-ink);
   --kit-sheet-border: transparent;
@@ -145,7 +148,7 @@ button.kit-sheet {
   --kit-sheet-active-fg: var(--kit-sheet-ink);
 }
 
-.kit-sheet[data-variant=plain] {
+:where(.kit-sheet[data-variant=plain]) {
   --kit-sheet-bg: transparent;
   --kit-sheet-fg: var(--kit-sheet-ink);
   --kit-sheet-border: transparent;
@@ -157,25 +160,27 @@ button.kit-sheet {
   --kit-sheet-active-fg: var(--kit-sheet-color, var(--kit-color-accent));
 }
 
-.kit-sheet[data-variant=outline] {
+: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: var(--kit-outline-weight) 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);
+}
+
+.kit-sheet:is([data-variant=outline], [data-variant=surface]) {
   border: var(--kit-outline-weight) solid var(--kit-sheet-border);
 }
 
-.kit-sheet[data-active=true] {
+: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,
@@ -213,31 +218,31 @@ button.kit-sheet {
  * rounded
  * @link https://lapikit.dev/docs/customize
  */
-.kit-sheet[data-rounded="0"] {
+: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);
 }
 
@@ -245,22 +250,22 @@ button.kit-sheet {
  * density
  * @link https://lapikit.dev/docs/customize
  */
-.kit-sheet[data-density=dense] {
+:where(.kit-sheet[data-density=dense]) {
   --kit-sheet-density-offset: var(--kit-density-dense);
 }
 
-.kit-sheet[data-density=compact] {
+:where(.kit-sheet[data-density=compact]) {
   --kit-sheet-density-offset: var(--kit-density-compact);
 }
 
-.kit-sheet[data-density=default] {
+:where(.kit-sheet[data-density=default]) {
   --kit-sheet-density-offset: var(--kit-density-default);
 }
 
-.kit-sheet[data-density=comfortable] {
+:where(.kit-sheet[data-density=comfortable]) {
   --kit-sheet-density-offset: var(--kit-density-comfortable);
 }
 
-.kit-sheet[data-density=spacious] {
+:where(.kit-sheet[data-density=spacious]) {
   --kit-sheet-density-offset: var(--kit-density-spacious);
 }</style>

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';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.7.3",
+	"version": "0.7.4",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -81,7 +81,7 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.20.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
@@ -106,7 +106,7 @@
 		"prettier-plugin-svelte": "^3.3.3",
 		"publint": "^0.3.2",
 		"sass": "^1.105.1",
-		"svelte": "^5.0.0",
+		"svelte": "^5.20.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",