DRAFT: Parity

.gitignore

@@ -1,6 +1,5 @@
 # IDE's
 .idea
-.vscode
 
 # Artifacts
 node_modules

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"[typescript][javascript][json][html][css][jsonc][markdown][typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome",
+		"editor.formatOnSave": true
+	}
+}

biome.json

@@ -9,7 +9,24 @@
 				"rules": {
 					"style": {
 						"useConst": "off",
-						"useImportType": "off"
+						"useImportType": "off",
+						"noNonNullAssertion": "off"
+					},
+					"suspicious": {
+						"noAssignInExpressions": "off"
+					}
+				}
+			}
+		},
+		{
+			"include": ["*.ts"],
+			"linter": {
+				"rules": {
+					"style": {
+						"noNonNullAssertion": "off"
+					},
+					"suspicious": {
+						"noAssignInExpressions": "off"
 					}
 				}
 			}

package.json

@@ -2,14 +2,14 @@
 	"name": "monorepo",
 	"private": true,
 	"scripts": {
+		"dev": "pnpm -F \"./packages/**\" sync && pnpm -r --parallel --reporter append-only --color dev",
 		"format": "biome check . --write",
 		"format:check": "biome check .",
 		"build": "pnpm --recursive build",
 		"build:watch": "pnpm --recursive --parallel build:watch",
-		"test": "pnpm --recursive test",
-		"test:watch": "pnpm --recursive test:watch",
-		"sync": "pnpm --recursive sync",
-		"postinstall": "pnpm sync"
+		"test": "pnpm --recursive --reporter append-only --color test",
+		"test:watch": "pnpm --recursive --reporter append-only --color test:watch",
+		"sync": "pnpm --recursive sync"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",

packages/floating-ui-svelte/package.json

@@ -2,9 +2,12 @@
 	"name": "@skeletonlabs/floating-ui-svelte",
 	"version": "0.3.9",
 	"scripts": {
+		"dev": "pnpm \"/dev:/\"",
 		"build": "svelte-package --input ./src",
 		"build:watch": "pnpm build --watch",
 		"test": "vitest run",
+		"dev:visual": "vite dev",
+		"dev:build": "pnpm build:watch",
 		"test:watch": "pnpm test --watch",
 		"sync": "svelte-kit sync && pnpm build"
 	},
@@ -31,17 +34,26 @@
 		"@sveltejs/kit": "^2.15.1",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "4.0.0-beta.9",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.6",
 		"@testing-library/user-event": "^14.5.2",
+		"bits-ui": "^1.0.0-next.78",
+		"clsx": "^2.1.1",
 		"csstype": "^3.1.3",
-		"svelte": "^5.16.0",
+		"lucide-svelte": "^0.469.0",
+		"resize-observer-polyfill": "^1.5.1",
+		"svelte": "^5.17.3",
+		"tailwindcss": "4.0.0-beta.9",
 		"typescript": "^5.7.2",
-		"vite": "^6.0.6",
+		"vite": "6.0.7",
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.6.12",
-		"@floating-ui/utils": "^0.2.8"
+		"@floating-ui/utils": "^0.2.8",
+		"esm-env": "^1.2.1",
+		"style-to-object": "^1.0.8",
+		"tabbable": "^6.2.0"
 	}
 }

packages/floating-ui-svelte/src/app.d.ts

@@ -0,0 +1,12 @@
+// These global variables enable projects that potentially use multiple versions of
+// floating ui via dependencies, etc. to share these variables across all instances.
+// From experience with vaul-svelte using Bits UI under the hood, without these globals,
+// composing multiple instances of floating ui components would not work as expected.
+declare global {
+	var fuiLockCount: { current: number };
+	// biome-ignore lint/complexity/noBannedTypes: <explanation>
+	var fuiLockCleanup: { current: Function };
+	var fuiPrevFocusedElements: Element[];
+}
+
+export {};

packages/floating-ui-svelte/src/components/composite/composite-item.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { Boxed, WithRef } from "../../types.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { CompositeContext } from "./context.js";
+	import { useListItem } from "../floating-list/hooks.svelte.js";
+	import { box } from "../../internal/box.svelte.js";
+
+	interface CompositeItemProps {
+		render?: Snippet<
+			[HTMLAttributes<HTMLElement>, Boxed<HTMLElement | null>]
+		>;
+	}
+
+	export type { CompositeItemProps };
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		render,
+		...rest
+	}: WithRef & HTMLAttributes<HTMLElement> & CompositeItemProps = $props();
+
+	const ctx = CompositeContext.get();
+	const listItem = useListItem();
+
+	const isActive = $derived(ctx.activeIndex === listItem.index);
+
+	const mergedProps: HTMLAttributes<HTMLElement> = $derived({
+		...rest,
+		tabindex: isActive ? 0 : -1,
+		"data-active": isActive ? "" : undefined,
+		onfocus: (event) => {
+			rest.onfocus?.(event);
+			ctx.onNavigate(listItem.index);
+		},
+	});
+
+	const boxedRef = box.with(
+		() => ref,
+		(v) => {
+			ref = v;
+			listItem.ref = v;
+		}
+	);
+</script>
+
+{#if render}
+	{@render render(mergedProps, boxedRef)}
+{:else}
+	{@const { children, ...restMerged } = mergedProps}
+	<div {...restMerged} bind:this={boxedRef.current}>
+		{@render children?.()}
+	</div>
+{/if}