@marianmeres/stuic 2.21.1 → 2.23.0

package/dist/actions/popover/popover.svelte.js

@@ -1,5 +1,6 @@
 import { mount, unmount } from "svelte";
 import { twMerge } from "../../utils/tw-merge.js";
+import { addAnchorName, removeAnchorName } from "../../utils/anchor-name.js";
 import PopoverContent from "./PopoverContent.svelte";
 //
 import "./index.css";
@@ -162,7 +163,8 @@ export function popover(anchorEl, fn) {
     let currentOptions = {};
     // Initialize anchor element - anchor-name is always set
     // In forceFallback mode, the CSS is just ignored
-    anchorEl.style.cssText += `anchor-name: ${anchorName};`;
+    // Use addAnchorName to support multiple anchor names on same element (e.g., popover + tooltip)
+    addAnchorName(anchorEl, anchorName);
     anchorEl.setAttribute("aria-haspopup", "dialog");
     anchorEl.setAttribute("aria-expanded", "false");
     anchorEl.setAttribute("aria-controls", id);
@@ -446,6 +448,8 @@ export function popover(anchorEl, fn) {
             anchorEl.removeEventListener("mouseleave", scheduleHide);
             anchorEl.removeEventListener("focus", scheduleShow);
             anchorEl.removeEventListener("blur", scheduleHide);
+            // Remove anchor name (preserves other anchor names on element)
+            removeAnchorName(anchorEl, anchorName);
             // Cleanup popover on unmount
             if (mountedComponent) {
                 unmount(mountedComponent);

package/dist/actions/tooltip/tooltip.svelte.js

@@ -1,4 +1,5 @@
 import { twMerge } from "../../utils/tw-merge.js";
+import { addAnchorName, removeAnchorName } from "../../utils/anchor-name.js";
 //
 import "./index.css";
 const TIMEOUT = 200;
@@ -103,7 +104,8 @@ export function tooltip(anchorEl, fn) {
     const id = `tooltip-${rnd}`;
     const anchorName = `--anchor-${rnd}`;
     // node once init
-    anchorEl.style.cssText += `anchor-name: ${anchorName};`;
+    // Use addAnchorName to support multiple anchor names on same element (e.g., popover + tooltip)
+    addAnchorName(anchorEl, anchorName);
     anchorEl.setAttribute("aria-describedby", id);
     anchorEl.setAttribute("aria-expanded", "false");
     const debug = (...args) => {
@@ -230,6 +232,8 @@ export function tooltip(anchorEl, fn) {
             anchorEl.removeEventListener("mouseleave", schedule_hide);
             anchorEl.removeEventListener("focus", schedule_show);
             anchorEl.removeEventListener("blur", schedule_hide);
+            // Remove anchor name (preserves other anchor names on element)
+            removeAnchorName(anchorEl, anchorName);
             // might not have been initialized
             tooltipEl?.removeEventListener("mouseenter", schedule_show);
             tooltipEl?.removeEventListener("mouseleave", schedule_hide);

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,127 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface Props extends Omit<
+		HTMLAttributes<HTMLDivElement>,
+		"children" | "class"
+	> {
+		/** Shape variant */
+		variant?: "text" | "circle" | "rectangle";
+		/** Width (e.g., "100%", "200px") */
+		width?: string;
+		/** Height (e.g., "1rem", "40px") */
+		height?: string;
+		/** Shorthand for circle size (sets both width & height) */
+		size?: string;
+		/** Number of text lines (for text variant) */
+		lines?: number;
+		/** Gap between lines (for text variant) */
+		gap?: string;
+		/** Last line width (for text variant) */
+		lastLineWidth?: string;
+		/** Animation style */
+		animation?: "shimmer" | "pulse" | "none";
+		/** Animation duration */
+		duration?: string;
+		/** Border radius (boolean for default, string for custom) */
+		rounded?: boolean | string;
+		/** Accessibility label */
+		ariaLabel?: string;
+		/** Bindable element reference */
+		el?: HTMLDivElement;
+		/** CSS class */
+		class?: string | string[];
+	}
+</script>
+
+<script lang="ts">
+	import "./index.css";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
+
+	let {
+		variant = "rectangle",
+		width,
+		height,
+		size,
+		lines = 1,
+		gap = "0.5rem",
+		lastLineWidth = "75%",
+		animation = "shimmer",
+		duration = "1.5s",
+		rounded = true,
+		ariaLabel,
+		el = $bindable(),
+		class: classProp = "",
+		...restProps
+	}: Props = $props();
+
+	const reduceMotion = prefersReducedMotion();
+
+	const effectiveAnimation = $derived(reduceMotion.current ? "none" : animation);
+
+	const baseClass = $derived(
+		twMerge(
+			"block bg-neutral-200 dark:bg-neutral-700",
+			effectiveAnimation === "shimmer" && "stuic-skeleton-shimmer",
+			effectiveAnimation === "pulse" && "stuic-skeleton-pulse",
+			variant === "circle" && "stuic-skeleton-circle",
+			rounded === true && variant !== "circle" && "rounded",
+			classProp
+		)
+	);
+
+	const baseStyle = $derived.by(() => {
+		const styles: string[] = [];
+		if (duration) styles.push(`--skeleton-duration: ${duration}`);
+		if (variant === "circle" && size) {
+			styles.push(`width: ${size}`, `height: ${size}`);
+		} else {
+			if (width) styles.push(`width: ${width}`);
+			if (height) styles.push(`height: ${height}`);
+		}
+		if (typeof rounded === "string") {
+			styles.push(`border-radius: ${rounded}`);
+		}
+		return styles.join("; ");
+	});
+</script>
+
+{#if variant === "text" && lines > 1}
+	<div
+		bind:this={el}
+		role="status"
+		aria-busy="true"
+		aria-label={ariaLabel}
+		class="stuic-skeleton-text-container"
+		style:gap
+		{...restProps}
+	>
+		{#each Array(lines) as _, i}
+			{@const isLast = i === lines - 1}
+			<div
+				class={baseClass}
+				style="{baseStyle}; width: {isLast
+					? lastLineWidth
+					: width || '100%'}; height: {height || '1rem'}"
+			></div>
+		{/each}
+		{#if ariaLabel}
+			<span class="sr-only">{ariaLabel}</span>
+		{/if}
+	</div>
+{:else}
+	<div
+		bind:this={el}
+		role="status"
+		aria-busy="true"
+		aria-label={ariaLabel}
+		class={baseClass}
+		style={baseStyle}
+		{...restProps}
+	>
+		{#if ariaLabel}
+			<span class="sr-only">{ariaLabel}</span>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "class"> {
+    /** Shape variant */
+    variant?: "text" | "circle" | "rectangle";
+    /** Width (e.g., "100%", "200px") */
+    width?: string;
+    /** Height (e.g., "1rem", "40px") */
+    height?: string;
+    /** Shorthand for circle size (sets both width & height) */
+    size?: string;
+    /** Number of text lines (for text variant) */
+    lines?: number;
+    /** Gap between lines (for text variant) */
+    gap?: string;
+    /** Last line width (for text variant) */
+    lastLineWidth?: string;
+    /** Animation style */
+    animation?: "shimmer" | "pulse" | "none";
+    /** Animation duration */
+    duration?: string;
+    /** Border radius (boolean for default, string for custom) */
+    rounded?: boolean | string;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Bindable element reference */
+    el?: HTMLDivElement;
+    /** CSS class */
+    class?: string | string[];
+}
+import "./index.css";
+declare const Skeleton: import("svelte").Component<Props, {}, "el">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Skeleton/index.css

@@ -0,0 +1,62 @@
+/* Define CSS custom properties for use in gradients */
+:root {
+	--skeleton-base: #e5e5e5;
+	--skeleton-highlight: #f5f5f5;
+}
+
+.dark {
+	--skeleton-base: #404040;
+	--skeleton-highlight: #525252;
+}
+
+.stuic-skeleton-circle {
+	border-radius: 50%;
+}
+
+.stuic-skeleton-text-container {
+	display: flex;
+	flex-direction: column;
+}
+
+/* Shimmer animation */
+@keyframes skeleton-shimmer {
+	0% {
+		background-position: -200% 0;
+	}
+	100% {
+		background-position: 200% 0;
+	}
+}
+
+.stuic-skeleton-shimmer {
+	background: linear-gradient(
+		90deg,
+		var(--skeleton-base) 25%,
+		var(--skeleton-highlight) 50%,
+		var(--skeleton-base) 75%
+	);
+	background-size: 200% 100%;
+	animation: skeleton-shimmer var(--skeleton-duration, 1.5s) ease-in-out infinite;
+}
+
+/* Pulse animation */
+@keyframes skeleton-pulse {
+	0%, 100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.4;
+	}
+}
+
+.stuic-skeleton-pulse {
+	animation: skeleton-pulse var(--skeleton-duration, 1.5s) ease-in-out infinite;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+	.stuic-skeleton-shimmer,
+	.stuic-skeleton-pulse {
+		animation: none;
+	}
+}

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton, type Props as SkeletonProps } from "./Skeleton.svelte";

package/dist/components/Skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.svelte";

package/dist/components/Switch/Switch.svelte

@@ -97,7 +97,7 @@
 	class={twMerge(
 		"stuic-switch",
 		`m-2 
-		relative inline-flex flex-shrink-0 items-center
+		relative inline-flex shrink-0 items-center
 		rounded-full cursor-pointer
 
 		transition-colors duration-100

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Notifications/index.js";
 export * from "./components/Progress/index.js";
+export * from "./components/Skeleton/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";

package/dist/index.js

@@ -41,6 +41,7 @@ export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Notifications/index.js";
 export * from "./components/Progress/index.js";
+export * from "./components/Skeleton/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";

package/dist/utils/anchor-name.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Utilities for managing CSS anchor-name property when multiple actions
+ * (like popover and tooltip) need to anchor to the same element.
+ *
+ * CSS anchor-name accepts a comma-separated list of names, allowing multiple
+ * anchor references on a single element.
+ */
+/**
+ * Adds an anchor name to an element without overwriting existing ones.
+ *
+ * @param el - The element to add the anchor name to
+ * @param name - The anchor name to add (e.g., "--anchor-popover-xyz")
+ */
+export declare function addAnchorName(el: HTMLElement, name: string): void;
+/**
+ * Removes an anchor name from an element, preserving other anchor names.
+ *
+ * @param el - The element to remove the anchor name from
+ * @param name - The anchor name to remove
+ */
+export declare function removeAnchorName(el: HTMLElement, name: string): void;

package/dist/utils/anchor-name.js

@@ -0,0 +1,47 @@
+/**
+ * Utilities for managing CSS anchor-name property when multiple actions
+ * (like popover and tooltip) need to anchor to the same element.
+ *
+ * CSS anchor-name accepts a comma-separated list of names, allowing multiple
+ * anchor references on a single element.
+ */
+/**
+ * Adds an anchor name to an element without overwriting existing ones.
+ *
+ * @param el - The element to add the anchor name to
+ * @param name - The anchor name to add (e.g., "--anchor-popover-xyz")
+ */
+export function addAnchorName(el, name) {
+    const current = el.style.getPropertyValue("anchor-name").trim();
+    if (current) {
+        // Append to existing list (avoid duplicates)
+        const names = current.split(",").map((n) => n.trim());
+        if (!names.includes(name)) {
+            el.style.setProperty("anchor-name", `${current}, ${name}`);
+        }
+    }
+    else {
+        el.style.setProperty("anchor-name", name);
+    }
+}
+/**
+ * Removes an anchor name from an element, preserving other anchor names.
+ *
+ * @param el - The element to remove the anchor name from
+ * @param name - The anchor name to remove
+ */
+export function removeAnchorName(el, name) {
+    const current = el.style.getPropertyValue("anchor-name").trim();
+    if (current) {
+        const names = current
+            .split(",")
+            .map((n) => n.trim())
+            .filter((n) => n !== name);
+        if (names.length > 0) {
+            el.style.setProperty("anchor-name", names.join(", "));
+        }
+        else {
+            el.style.removeProperty("anchor-name");
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.21.1",
+  "version": "2.23.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",