compote-ui 0.75.2 → 0.75.4

package/dist/components/badge/badge.variants.d.ts

@@ -13,7 +13,7 @@ export declare const badge: import("tailwind-variants").TVReturnType<{
         success: "";
         info: "";
     };
-}, undefined, "inline-flex w-fit items-center gap-1 rounded px-2 py-0.5 text-xs font-medium [&_svg]:size-3 [&_svg]:shrink-0", {
+}, undefined, "inline-flex w-fit items-center gap-1 rounded px-2 py-0.5 text-xs font-medium **:data-[slot=icon]:size-3 [&_svg]:size-3 [&_svg]:shrink-0", {
     variant: {
         solid: "";
         subtle: "";

package/dist/components/badge/badge.variants.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const badge = tv({
-    base: 'inline-flex w-fit items-center gap-1 rounded px-2 py-0.5 text-xs font-medium [&_svg]:size-3 [&_svg]:shrink-0',
+    base: 'inline-flex w-fit items-center gap-1 rounded px-2 py-0.5 text-xs font-medium **:data-[slot=icon]:size-3 [&_svg]:size-3 [&_svg]:shrink-0',
     variants: {
         variant: {
             solid: '',

package/dist/components/button/button.variants.d.ts

@@ -7,13 +7,13 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
     };
     size: {
-        sm: "h-8 gap-1.5 px-2 [&_svg]:size-3.5";
-        default: "h-9 gap-2 px-3 [&_svg]:size-4";
-        lg: "h-10 gap-2.5 px-4 [&_svg]:size-5";
-        icon: "size-9 shrink-0 [&_svg]:size-6";
-        'icon-xs': "size-7 shrink-0 [&_svg]:size-4";
-        'icon-sm': "size-8 shrink-0 [&_svg]:size-5";
-        'icon-lg': "size-10 shrink-0 [&_svg]:size-7";
+        sm: "h-8 gap-1.5 px-2 **:data-[slot=icon]:size-3.5 [&_svg]:size-3.5";
+        default: "h-9 gap-2 px-3 **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        lg: "h-10 gap-2.5 px-4 **:data-[slot=icon]:size-5 [&_svg]:size-5";
+        icon: "size-9 shrink-0 **:data-[slot=icon]:size-6 [&_svg]:size-6";
+        'icon-xs': "size-7 shrink-0 **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        'icon-sm': "size-8 shrink-0 **:data-[slot=icon]:size-5 [&_svg]:size-5";
+        'icon-lg': "size-10 shrink-0 **:data-[slot=icon]:size-7 [&_svg]:size-7";
     };
 }, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0", {
     variant: {
@@ -23,13 +23,13 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
     };
     size: {
-        sm: "h-8 gap-1.5 px-2 [&_svg]:size-3.5";
-        default: "h-9 gap-2 px-3 [&_svg]:size-4";
-        lg: "h-10 gap-2.5 px-4 [&_svg]:size-5";
-        icon: "size-9 shrink-0 [&_svg]:size-6";
-        'icon-xs': "size-7 shrink-0 [&_svg]:size-4";
-        'icon-sm': "size-8 shrink-0 [&_svg]:size-5";
-        'icon-lg': "size-10 shrink-0 [&_svg]:size-7";
+        sm: "h-8 gap-1.5 px-2 **:data-[slot=icon]:size-3.5 [&_svg]:size-3.5";
+        default: "h-9 gap-2 px-3 **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        lg: "h-10 gap-2.5 px-4 **:data-[slot=icon]:size-5 [&_svg]:size-5";
+        icon: "size-9 shrink-0 **:data-[slot=icon]:size-6 [&_svg]:size-6";
+        'icon-xs': "size-7 shrink-0 **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        'icon-sm': "size-8 shrink-0 **:data-[slot=icon]:size-5 [&_svg]:size-5";
+        'icon-lg': "size-10 shrink-0 **:data-[slot=icon]:size-7 [&_svg]:size-7";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
@@ -39,13 +39,13 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
     };
     size: {
-        sm: "h-8 gap-1.5 px-2 [&_svg]:size-3.5";
-        default: "h-9 gap-2 px-3 [&_svg]:size-4";
-        lg: "h-10 gap-2.5 px-4 [&_svg]:size-5";
-        icon: "size-9 shrink-0 [&_svg]:size-6";
-        'icon-xs': "size-7 shrink-0 [&_svg]:size-4";
-        'icon-sm': "size-8 shrink-0 [&_svg]:size-5";
-        'icon-lg': "size-10 shrink-0 [&_svg]:size-7";
+        sm: "h-8 gap-1.5 px-2 **:data-[slot=icon]:size-3.5 [&_svg]:size-3.5";
+        default: "h-9 gap-2 px-3 **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        lg: "h-10 gap-2.5 px-4 **:data-[slot=icon]:size-5 [&_svg]:size-5";
+        icon: "size-9 shrink-0 **:data-[slot=icon]:size-6 [&_svg]:size-6";
+        'icon-xs': "size-7 shrink-0 **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        'icon-sm': "size-8 shrink-0 **:data-[slot=icon]:size-5 [&_svg]:size-5";
+        'icon-lg': "size-10 shrink-0 **:data-[slot=icon]:size-7 [&_svg]:size-7";
     };
 }, undefined>>;
 export type ButtonVariant = VariantProps<typeof button>['variant'];

package/dist/components/button/button.variants.js

@@ -9,13 +9,13 @@ export const button = tv({
             destructive: 'bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80'
         },
         size: {
-            sm: 'h-8 gap-1.5 px-2 [&_svg]:size-3.5',
-            default: 'h-9 gap-2 px-3 [&_svg]:size-4',
-            lg: 'h-10 gap-2.5 px-4 [&_svg]:size-5',
-            icon: 'size-9 shrink-0 [&_svg]:size-6',
-            'icon-xs': 'size-7 shrink-0 [&_svg]:size-4',
-            'icon-sm': 'size-8 shrink-0 [&_svg]:size-5',
-            'icon-lg': 'size-10 shrink-0 [&_svg]:size-7'
+            sm: 'h-8 gap-1.5 px-2 **:data-[slot=icon]:size-3.5 [&_svg]:size-3.5',
+            default: 'h-9 gap-2 px-3 **:data-[slot=icon]:size-4 [&_svg]:size-4',
+            lg: 'h-10 gap-2.5 px-4 **:data-[slot=icon]:size-5 [&_svg]:size-5',
+            icon: 'size-9 shrink-0 **:data-[slot=icon]:size-6 [&_svg]:size-6',
+            'icon-xs': 'size-7 shrink-0 **:data-[slot=icon]:size-4 [&_svg]:size-4',
+            'icon-sm': 'size-8 shrink-0 **:data-[slot=icon]:size-5 [&_svg]:size-5',
+            'icon-lg': 'size-10 shrink-0 **:data-[slot=icon]:size-7 [&_svg]:size-7'
         }
     },
     defaultVariants: { variant: 'default', size: 'default' }

package/dist/components/json-tree-view/json-tree-view.svelte

@@ -47,7 +47,7 @@
 	{...rootProps}
 >
 	<JsonTreeView.Tree
-		class={cn('flex flex-col leading-[1.8] [&_svg]:size-3', treeClass)}
+		class={cn('flex flex-col leading-[1.8] **:data-[slot=icon]:size-3 [&_svg]:size-3', treeClass)}
 		{indentGuide}
 		{renderValue}
 	>

package/dist/components/menu/menu-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Menu } from '@ark-ui/svelte/menu';
+	import { Menu, useMenuContext } from '@ark-ui/svelte/menu';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import type { MenuContentBaseProps } from '@ark-ui/svelte/menu';
 	import type { Snippet } from 'svelte';
@@ -11,6 +11,26 @@
 	};
 
 	const { class: className, children, ...restProps }: Props = $props();
+
+	const menu = useMenuContext();
+	const open = $derived(menu().open);
+
+	// Workaround for context menus opening at (0,0) the first time: zag skips
+	// `trackPositioning` for context triggers, so `currentPlacement` is first set in
+	// the popper's onComplete — after it wrote --x/--y. That changes the positioner
+	// style, and Svelte rewrites the whole `style` attribute, wiping --x/--y.
+	// Re-positioning once that settles makes the coordinates stick.
+	$effect(() => {
+		if (!open) return;
+		let inner = 0;
+		const outer = requestAnimationFrame(() => {
+			inner = requestAnimationFrame(() => menu().reposition());
+		});
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
+	});
 </script>
 
 <Portal>

package/dist/components/toggle/toggle.variants.d.ts

@@ -5,9 +5,9 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
         outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
     };
     size: {
-        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
-        md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
-        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
+        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs **:data-[slot=icon]:size-3.5 [&_svg]:size-3.5";
+        md: "h-9 min-w-9 gap-1.5 px-2 text-sm **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm **:data-[slot=icon]:size-5 [&_svg]:size-5";
     };
     icon: {
         true: "";
@@ -18,9 +18,9 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
         outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
     };
     size: {
-        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
-        md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
-        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
+        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs **:data-[slot=icon]:size-3.5 [&_svg]:size-3.5";
+        md: "h-9 min-w-9 gap-1.5 px-2 text-sm **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm **:data-[slot=icon]:size-5 [&_svg]:size-5";
     };
     icon: {
         true: "";
@@ -31,9 +31,9 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
         outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
     };
     size: {
-        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
-        md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
-        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
+        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs **:data-[slot=icon]:size-3.5 [&_svg]:size-3.5";
+        md: "h-9 min-w-9 gap-1.5 px-2 text-sm **:data-[slot=icon]:size-4 [&_svg]:size-4";
+        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm **:data-[slot=icon]:size-5 [&_svg]:size-5";
     };
     icon: {
         true: "";

package/dist/components/toggle/toggle.variants.js

@@ -7,18 +7,18 @@ export const toggle = tv({
             outline: 'border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm'
         },
         size: {
-            sm: 'h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5',
-            md: 'h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4',
-            lg: 'h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5'
+            sm: 'h-8 min-w-8 gap-1 px-1.5 text-xs **:data-[slot=icon]:size-3.5 [&_svg]:size-3.5',
+            md: 'h-9 min-w-9 gap-1.5 px-2 text-sm **:data-[slot=icon]:size-4 [&_svg]:size-4',
+            lg: 'h-10 min-w-10 gap-2 px-2.5 text-sm **:data-[slot=icon]:size-5 [&_svg]:size-5'
         },
         icon: {
             true: ''
         }
     },
     compoundVariants: [
-        { size: 'sm', icon: true, class: 'w-8 px-0 [&_svg]:size-5' },
-        { size: 'md', icon: true, class: 'w-9 px-0 [&_svg]:size-6' },
-        { size: 'lg', icon: true, class: 'w-10 px-0 [&_svg]:size-7' }
+        { size: 'sm', icon: true, class: 'w-8 px-0 **:data-[slot=icon]:size-5 [&_svg]:size-5' },
+        { size: 'md', icon: true, class: 'w-9 px-0 **:data-[slot=icon]:size-6 [&_svg]:size-6' },
+        { size: 'lg', icon: true, class: 'w-10 px-0 **:data-[slot=icon]:size-7 [&_svg]:size-7' }
     ],
     defaultVariants: { size: 'md', variant: 'ghost' }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.75.2",
+	"version": "0.75.4",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -71,12 +71,12 @@
 		"@tailwindcss/vite": "^4.3.3",
 		"@tanstack/intent": "^0.4.0",
 		"@tanstack/svelte-table": "9.2.4",
-		"@types/node": "^22.20.0",
+		"@types/node": "^24",
 		"eslint": "^10.10.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.23.0",
 		"globals": "^17.12.0",
-		"prettier": "^3.9.6",
+		"prettier": "^3.9.7",
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
 		"publint": "^0.3.24",
@@ -86,22 +86,22 @@
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.70.0",
-		"unplugin-icons": "^23.0.1",
+		"unplugin-icons": "^24.0.0",
 		"vite": "^8.3.0",
-		"vitest": "^5"
+		"vitest": "^5.0.1"
 	},
 	"keywords": [
 		"svelte",
 		"tanstack-intent"
 	],
 	"dependencies": {
-		"@ark-ui/svelte": "^5.24.1",
+		"@ark-ui/svelte": "^5.24.2",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@internationalized/date": "^3.12.4",
-		"@tanstack/svelte-virtual": "^3.13.37",
+		"@tanstack/svelte-virtual": "^3.13.39",
 		"runed": "^0.37.1",
-		"svelte-tel-input": "^4.3.2",
-		"tailwind-merge": "^3.6.0",
+		"svelte-tel-input": "^4.3.3",
+		"tailwind-merge": "^3.7.0",
 		"tailwind-variants": "^3.3.1"
 	},
 	"intent": {