Minor adjustments

src/app.pcss

@@ -122,9 +122,8 @@ html.dark .shiki span {
 
 /* Utility Classes */
 
-/* Tooltip */
-.tooltip {
-	@apply bg-surface-500 text-white p-4 rounded;
+/* Floating */
+.floating {
 	/* Floating UI Requirements */
 	@apply w-max absolute top-0 left-0;
 }

src/lib/components/FloatingArrow/FloatingArrow.svelte

@@ -4,7 +4,7 @@
 	import type { FloatingArrowProps } from './types.js';
 
 	let {
-		arrowRef = $bindable(null),
+		ref = $bindable(null),
 		context,
 		// ---
 		width = 14,
@@ -66,7 +66,7 @@
 </script>
 
 <svg
-	bind:this={arrowRef}
+	bind:this={ref}
 	width={isCustomShape ? width : width + computedStrokeWidth}
 	height={width}
 	viewBox={`0 0 ${width} ${height > width ? height : width}`}

src/lib/components/FloatingArrow/types.ts

@@ -5,7 +5,7 @@ export interface FloatingArrowProps {
 	 * The binded HTML element reference.
 	 * @default null
 	 * */
-	arrowRef: Element | null;
+	ref: Element | null;
 	// Context Source: https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/types.ts#L132
 	/** The floating context. */
 	context: FloatingContext;

src/routes/context-menus/+page.svelte

@@ -20,9 +20,13 @@
 <div class="space-y-10">
 	<section>
 		<button bind:this={elements.reference} class="btn-rose-sm">Reference</button>
-		<div bind:this={elements.floating} style={floating.floatingStyles} class="tooltip">
-			<div>Floating</div>
-			<FloatingArrow bind:arrowRef context={floating.context} classes="fill-surface-500" />
+		<div
+			bind:this={elements.floating}
+			style={floating.floatingStyles}
+			class="floating bg-surface-500 text-white p-4 rounded"
+		>
+			<p>Floating</p>
+			<FloatingArrow bind:ref={arrowRef} context={floating.context} classes="fill-surface-500" />
 		</div>
 	</section>
 </div>