### Install Floating UI Svelte

Source: https://floating-ui-svelte.vercel.app/docs/getting-started

Instructions for installing Floating UI Svelte using various package managers.

```bash
npm install @skeletonlabs/floating-ui-svelte
# pnpm add @skeletonlabs/floating-ui-svelte
# yarn add @skeletonlabs/floating-ui-svelte
# bun add @skeletonlabs/floating-ui-svelte
```

--------------------------------

### Import Floating UI Features

Source: https://floating-ui-svelte.vercel.app/docs/getting-started

Demonstrates how to import features like 'flip' and 'Strategy' from Floating UI Svelte.

```typescript
import { flip, type Strategy } from '@skeletonlabs/floating-ui-svelte';
```

--------------------------------

### Basic Floating Element Styles

Source: https://floating-ui-svelte.vercel.app/docs/getting-started

Provides essential CSS for making elements float, ensuring they don't disrupt document flow.

```css
.floating {
	width: max-content;
	position: absolute;
	top: 0;
	left: 0;
}
```

--------------------------------

### HTML Structure for Floating Element

Source: https://floating-ui-svelte.vercel.app/docs/getting-started

A simple HTML structure for a floating element using the 'floating' CSS class.

```html
<div class="floating">Some floating element.</div>
```

--------------------------------

### SSR Caveat: Handling Initial Positioning

Source: https://floating-ui-svelte.vercel.app/docs/getting-started

Demonstrates how to use the `isPositioned` prop from `useFloating` to prevent floating elements from appearing in the top-left corner during SSR.

```svelte
<script lang="ts">
import { useFloating } from "@skeletonlabs/floating-ui-svelte";
const floating = useFloating();
</script>
<!-- Floating element is always rendered -->
<div class="floating" bind:this={floating.elements.floating} style={floating.floatingStyles}>
	<!-- The content of the floating element is shown once `isPositioned` is true -->
	{#if floating.isPositioned}
		Floating
	{/if}
</div>
```

--------------------------------

### useInteractions Usage Example

Source: https://floating-ui-svelte.vercel.app/api/use-interactions

Demonstrates how to use the useInteractions hook by combining useHover and useFocus hooks with useFloating context. It shows how to get props for reference and floating elements.

```typescript
import { useFloating, useInteractions, useHover, useFocus } from '@skeletonlabs/floating-ui-svelte';
const floating = useFloating();
const hover = useHover(floating.context);
const focus = useFocus(floating.context);
const interactions = useInteractions([hover, focus]);
```

```svelte
<!-- Reference Element -->
<div {...interactions.getReferenceProps()}>Reference</div>
<!-- Floating Element -->
<div {...interactions.getFloatingProps()}>Floating</div>
```

--------------------------------

### useClick Hook Usage

Source: https://floating-ui-svelte.vercel.app/api/use-click

Demonstrates how to import and use the useClick hook from '@skeletonlabs/floating-ui-svelte' in a Svelte component. It shows the setup with useFloating and useInteractions to manage a reference and floating element.

```typescript
import { useClick } from '@skeletonlabs/floating-ui-svelte';
```

```svelte
<script lang="ts">
import {
	useClick,
	useFloating,
	useInteractions,
} from "@skeletonlabs/floating-ui-svelte";
const floating = useFloating();
const click = useClick(floating.context);
const interactions = useInteractions([click]);
</script>
<!-- Reference Element -->
<button bind:this={floating.elements.reference} {...interactions.getReferenceProps()}>
	Reference
</button>
<!-- Floating Element -->
<div
	bind:this={floating.elements.floating}
	style={floating.floatingStyles}
	{...interactions.getFloatingProps()}
>
	Floating
</div>
```

--------------------------------

### Floating UI Svelte Core Hooks

Source: https://floating-ui-svelte.vercel.app/examples/modals

Core hooks for managing floating elements and their interactions in Svelte applications. Includes setup, event handling, and accessibility features.

```APIDOC
useFloating(options)
  Manages the state and logic for positioning a floating element relative to a reference element.
  Parameters:
    options: Object containing configuration for positioning, strategy, and middleware.
      - placement: Preferred placement of the floating element (e.g., 'top', 'bottom-end').
      - strategy: Positioning strategy ('absolute' or 'fixed').
      - middleware: Array of middleware functions to adjust positioning.
  Returns:
    Object containing state and methods for managing the floating element.

useInteractions(context)
  Provides a set of event handlers and props to manage interactions with the floating element.
  Parameters:
    context: The context object returned by useFloating.
  Returns:
    Object containing event handlers (e.g., getReferenceProps, getFloatingProps) and state.

useHover(context, options)
  Adds hover-based interaction logic for showing and hiding the floating element.
  Parameters:
    context: The context object returned by useFloating.
    options: Configuration for hover behavior (e.g., delay).
  Returns:
    Object containing hover event handlers.

useFocus(context, options)
  Adds focus-based interaction logic for showing and hiding the floating element.
  Parameters:
    context: The context object returned by useFloating.
    options: Configuration for focus behavior.
  Returns:
    Object containing focus event handlers.

useClick(context, options)
  Adds click-based interaction logic for showing and hiding the floating element.
  Parameters:
    context: The context object returned by useFloating.
    options: Configuration for click behavior.
  Returns:
    Object containing click event handlers.

useRole(context, options)
  Manages ARIA roles and attributes for accessibility.
  Parameters:
    context: The context object returned by useFloating.
    options: Configuration for role management.
  Returns:
    Object containing ARIA props.

useDismiss(context, options)
  Handles dismissing the floating element based on user interactions (e.g., clicking outside).
  Parameters:
    context: The context object returned by useFloating.
    options: Configuration for dismissal behavior.
  Returns:
    Object containing dismissal event handlers.

FloatingArrow(props)
  A Svelte component to render a floating arrow, typically used with middleware.
  Parameters:
    props: Properties for styling and positioning the arrow.

Utilities
  Provides various utility functions for common tasks related to floating elements, such as:
  - computePosition: Computes the position of a floating element.
  - autoUpdate: Automatically re-updates the position of a floating element when its reference or the viewport changes.
  - offset: Middleware to shift the floating element.
  - flip: Middleware to flip the placement of the floating element.
  - shift: Middleware to prevent the floating element from being clipped.
  - arrow: Middleware to position an arrow.
  - hide: Middleware to hide the floating element when it's off-screen.
```

--------------------------------

### useFocus Hook Usage Example

Source: https://floating-ui-svelte.vercel.app/api/use-focus

Demonstrates how to use the useFocus hook in a Svelte component. It integrates with useFloating and useInteractions to manage the reference and floating elements' visibility based on focus events. The hook returns event handler props that are spread onto the respective elements.

```svelte
<script lang="ts">
import {
	useFloating,
	useFocus,
	useInteractions,
} from "@skeletonlabs/floating-ui-svelte";
const floating = useFloating();
const focus = useFocus(floating.context);
const interactions = useInteractions([focus]);
</script>
<!-- Reference Element -->
<button bind:this={floating.elements.reference} {...interactions.getReferenceProps()}>
	Reference
</button>
<!-- Floating Element -->
<div
	bind:this={floating.elements.floating}
	style={floating.floatingStyles}
	{...interactions.getFloatingProps()}
>
	Floating
</div>
```

--------------------------------

### useDismiss Hook Usage

Source: https://floating-ui-svelte.vercel.app/api/use-dismiss

Demonstrates how to integrate the `useDismiss` hook within a Svelte component to manage the visibility of a floating element. It shows the setup with `useFloating` and `useInteractions` and how to bind the reference and floating elements.

```typescript
import { useDismiss } from '@skeletonlabs/floating-ui-svelte';
```

```svelte
<script lang="ts">
import {
	useDismiss,
	useFloating,
	useInteractions,
} from "@skeletonlabs/floating-ui-svelte";
const floating = useFloating();
const dismiss = useDismiss(floating.context);
const interactions = useInteractions([dismiss]);
</script>
<!-- Reference Element -->
<button bind:this={floating.elements.reference} {...interactions.getReferenceProps()}>
	Reference
</button>
<!-- Floating Element -->
<div
	bind:this={floating.elements.floating}
	style={floating.floatingStyles}
	{...interactions.getFloatingProps()}
>
	Floating
</div>
```

--------------------------------

### Floating UI Svelte API Reference

Source: https://floating-ui-svelte.vercel.app/examples/context-menus

API reference for core Floating UI Svelte functionalities, including positioning, interaction management, and dismissal logic.

```APIDOC
useFloating:
  Manages the positioning of a floating element relative to a reference element.
  Parameters:
    - placement: The desired placement of the floating element (e.g., 'top', 'bottom-start').
    - strategy: The positioning strategy ('absolute' or 'fixed').
    - middleware: An array of middleware functions to adjust positioning.
  Returns:
    - x, y: The calculated coordinates for the floating element.
    - placement: The final computed placement.
    - strategy: The computed positioning strategy.
    - update: A function to manually trigger a positioning update.

useInteractions:
  Manages the interactions between a reference element and a floating element.
  Parameters:
    - context: The context object returned by useFloating.
  Returns:
    - getReferenceProps: Props to apply to the reference element.
    - getFloatingProps: Props to apply to the floating element.

useHover:
  Manages hover interactions for showing and hiding a floating element.
  Parameters:
    - context: The context object returned by useFloating.
    - hover: Configuration options for hover behavior.
  Returns:
    - getReferenceProps: Props to apply to the reference element.
    - getFloatingProps: Props to apply to the floating element.

useFocus:
  Manages focus interactions for showing and hiding a floating element.
  Parameters:
    - context: The context object returned by useFloating.
  Returns:
    - getReferenceProps: Props to apply to the reference element.
    - getFloatingProps: Props to apply to the floating element.

useClick:
  Manages click interactions for showing and hiding a floating element.
  Parameters:
    - context: The context object returned by useFloating.
  Returns:
    - getReferenceProps: Props to apply to the reference element.
    - getFloatingProps: Props to apply to the floating element.

useRole:
  Manages ARIA roles and attributes for accessibility.
  Parameters:
    - context: The context object returned by useFloating.
    - role: The ARIA role to apply.
  Returns:
    - getReferenceProps: Props to apply to the reference element.
    - getFloatingProps: Props to apply to the floating element.

useDismiss:
  Manages the dismissal of a floating element based on user interactions.
  Parameters:
    - context: The context object returned by useFloating.
    - outsidePressEvent: The event type for outside press dismissal ('pointerdown' or 'mousedown').
  Returns:
    - getReferenceProps: Props to apply to the reference element.
    - getFloatingProps: Props to apply to the floating element.

Floating Arrow:
  A component to render an arrow for the floating element.
  Props:
    - context: The context object returned by useFloating.
    - ...other props for styling the arrow.

Utilities:
  Provides utility functions for common tasks, such as:
    - autoPlacement: Automatically determines the best placement.
    - flip: Flips the placement if the floating element overflows the viewport.
    - shift: Shifts the floating element to keep it within the viewport.
    - offset: Adjusts the distance between the reference and floating elements.
    - arrow: Manages the positioning of an arrow element.
```

--------------------------------

### useFloating Hook Usage

Source: https://floating-ui-svelte.vercel.app/api/use-floating

Demonstrates the basic import and usage of the `useFloating` hook in Svelte. It shows how to initialize the hook and bind reference and floating elements for positioning.

```typescript
import { useFloating } from '@skeletonlabs/floating-ui-svelte';
```

```typescript
const floating = useFloating({
	/* options */
});
```

```html
<!-- Reference Element -->
<button bind:this="{floating.elements.reference}">
	Reference
</button>
<!-- Floating Element -->
<div
	bind:this="{floating.elements.floating}"
	style="{floating.floatingStyles}"
	class="floating"
>
	Floating
</div>
```

--------------------------------

### useFloating Hook Configuration

Source: https://floating-ui-svelte.vercel.app/examples/tooltips

Configures the `useFloating` hook for positioning and context. It takes the open state, a callback for state changes, middleware for collision detection, and `whileElementsMounted` for performance.

```typescript
const floating = useFloating({
  open: open,
  onOpenChange: (isOpen) => {
    open = isOpen;
  },
  middleware: [
    // Add middleware here, e.g., offset, flip, shift
  ],
  whileElementsMounted: autoUpdate
});
```

--------------------------------

### useFloating API Reference

Source: https://floating-ui-svelte.vercel.app/api/use-floating

Details the options and return values for the `useFloating` hook in Floating UI Svelte. It outlines parameters for controlling placement, strategy, middleware, and element mounting, as well as the properties returned for positioning and context.

```APIDOC
useFloating:
  Options:
    open: boolean (default: true) - Represents the open/close state of the floating element.
    onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void - Event handler for open state changes.
    placement: Placement (default: 'bottom') - Where to place the floating element relative to its reference.
    strategy: Strategy (default: 'absolute') - The type of CSS position property to use.
    middleware: Array<Middleware | undefined | null | false> (default: undefined) - Supports all Floating UI middleware.
    transform: boolean (default: true) - Whether to use transform instead of top and left styles for positioning.
    elements: FloatingElements (default: {}) - The reference and floating elements.
    whileElementsMounted: ((reference: ReferenceElement, floating: FloatingElement, update: () => void) => () => void) | undefined (default: undefined) - Callback to handle element mounting/unmounting.
    nodeId: string | undefined (default: undefined) - A unique node ID for the floating element when using a `FloatingTree`.
  Returns:
    x: number - The x-coord of the floating element.
    y: number - The y-coord of the floating element.
    placement: Placement - The stateful placement, which can be different from the initial placement.
    strategy: Strategy - The stateful strategy, which can be different from the initial strategy.
    middlewareData: MiddlewareData - Additional data from middleware.
    isPositioned: boolean - Indicates if the floating element has been positioned.
    floatingStyles: string - CSS styles to apply to the floating element for positioning.
    elements: FloatingElements - The reference and floating elements.
    update: () => void - Function to update floating position manually.
    context: FloatingContext - Context object containing internal logic to alter behavior.
```

--------------------------------

### useFocus Hook Import

Source: https://floating-ui-svelte.vercel.app/api/use-focus

Imports the useFocus hook from the @skeletonlabs/floating-ui-svelte library.

```typescript
import { useFocus } from '@skeletonlabs/floating-ui-svelte';
```

--------------------------------

### useHover Hook Import

Source: https://floating-ui-svelte.vercel.app/api/use-hover

Imports the useHover hook from the '@skeletonlabs/floating-ui-svelte' library.

```typescript
import { useHover } from '@skeletonlabs/floating-ui-svelte';
```

--------------------------------

### useRole Hook Options

Source: https://floating-ui-svelte.vercel.app/api/use-role

Details the configuration options available for the useRole hook, including 'enabled' to control its activation and 'role' to specify the ARIA role.

```APIDOC
Options:
`enabled` |  Enables the interaction. boolean true  
`role` |  The role that the floating element should be. AriaRole | ComponentRole 'dialog'
```

--------------------------------

### useHover Hook Options

Source: https://floating-ui-svelte.vercel.app/api/use-hover

Details the configurable options for the useHover hook, including enabling the hook, pointer type restrictions, delay settings, and handling closing events.

```APIDOC
useHover Options:

- enabled: Enables the hook. boolean true
- mouseOnly: Only allow pointers of type mouse to trigger the hover (thus excluding pens and touchscreens). boolean false
- delay: Time in ms that will delay the change of the open state. Also accepts an object with open and close properties for finer grained control. number 0
- restMs: Time in ms that the pointer must rest on the reference element before the open state is set to true. number 0
- move: Whether moving the pointer over the floating element will open it, without a regular hover event required. boolean true
- handleClose: Callback to handle the closing of the floating element. HandleCloseFn null
```

--------------------------------

### useHover Svelte Component Integration

Source: https://floating-ui-svelte.vercel.app/api/use-hover

Shows how to integrate the useHover hook into Svelte components, binding reference and floating elements and applying interaction props.

```svelte
<!-- Reference Element -->
<button
	bind:this="{floating.elements.reference}"
	{...interactions.getReferenceProps()}
>
	Reference
</button>
<!-- Floating Element -->
<div
	bind:this="{floating.elements.floating}"
	style="{floating.floatingStyles}"
	{...interactions.getFloatingProps()}
>
	Tooltip
</div>
```

--------------------------------

### Tooltip Rendering

Source: https://floating-ui-svelte.vercel.app/examples/tooltips

Renders the reference and floating elements for the tooltip. The `getReferenceProps` and `getFloatingProps` are spread onto the respective elements to apply event listeners and ARIA attributes.

```html
<!-- Reference Element -->
<button
	bind:this={floating.elements.reference}
	{...interactions.getReferenceProps()}
	class="btn-gradient"
>
	Hover Me
</button>

<!-- Floating Element -->
{#if open}
	<div
		bind:this={floating.elements.floating}
		style={floating.floatingStyles}
		{...interactions.getFloatingProps()}
		class="floating popover-neutral"
		transition:fade={{ duration: 200 }}
	>
		<p>
			A <strong>floating element</strong> is one that floats on top of the UI without disrupting the
			flow, like this one!
		</p>
		<FloatingArrow bind:ref={elemArrow} context={floating.context} fill="#575969" />
	</div>
{/if}
```

--------------------------------

### useRole Hook Usage

Source: https://floating-ui-svelte.vercel.app/api/use-role

Demonstrates how to import and use the useRole hook with useFloating and useInteractions in a Svelte component for accessibility.

```typescript
import { useFloating, useInteractions, useRole } from '@skeletonlabs/floating-ui-svelte';
const floating = useFloating();
const role = useRole(floating.context, { role: 'tooltip' });
const interactions = useInteractions([role]);
```

--------------------------------

### Svelte Component with useRole

Source: https://floating-ui-svelte.vercel.app/api/use-role

Shows the Svelte markup for a reference element (button) and a floating element (div) that utilize the props generated by the useRole hook for accessibility.

```svelte
<!-- Reference Element -->
<button
 bind:this="{floating.elements.reference}"
 {...interactions.getReferenceProps()}
>
 Reference
</button>
<!-- Floating Element -->
<div
	bind:this="{floating.elements.floating}"
	style="{floating.floatingStyles}"
	{...interactions.getFloatingProps()}
>
 Tooltip
</div>
```

--------------------------------

### useClick Hook Options

Source: https://floating-ui-svelte.vercel.app/api/use-click

Details the configurable options for the useClick hook, including enabling/disabling the hook, specifying the click event type ('click' or 'mousedown'), toggling behavior, ignoring mouse events, and handling keyboard interactions.

```APIDOC
useClick Options:

- enabled: Whether the Hook is enabled, including all internal Effects and event handlers. (boolean, default: true)
- event: The type of event to use to determine a "click" with mouse input. Keyboard clicks work as normal. ('click' | 'mousedown', default: 'click')
- toggle: Whether to toggle the open state with repeated clicks. (boolean, default: true)
- ignoreMouse: Whether to ignore the logic for mouse input (for example, if `useHover()` is also being used). When `useHover()` and `useClick()` are used together, clicking the reference element after hovering it will keep the floating element open even once the cursor leaves. This may not be desirable in some cases. (boolean, default: false)
- keyboardHandlers: Whether to add keyboard handlers (Enter and Space key functionality) for non-button elements (to open/close the floating element via keyboard "click"). (boolean, default: true)
```

--------------------------------

### useFloating Hook Configuration

Source: https://floating-ui-svelte.vercel.app/examples/popovers

The useFloating hook is essential for positioning the popover. It requires settings for open state, change callbacks, middleware for collision avoidance, and lifecycle management for performance.

```typescript
const floating = useFloating({
  // ...settings...
});
```

--------------------------------

### Tooltip Open State Management

Source: https://floating-ui-svelte.vercel.app/examples/tooltips

Manages the visibility state of the tooltip. The `open` variable is used for conditional rendering of the tooltip element.

```typescript
let open = $state(false);
```

--------------------------------

### Interaction Hooks for Popover Behavior

Source: https://floating-ui-svelte.vercel.app/examples/popovers

Combines interaction hooks (useRole, useClick, useDismiss) to manage accessibility and user interactions like opening, closing, and dismissal via keyboard or outside clicks.

```typescript
const role = useRole(floating.context);
const click = useClick(floating.context);
const dismiss = useDismiss(floating.context);
const interactions = useInteractions([role, click, dismiss]);
```

--------------------------------

### Applying Event Handlers with useInteractions

Source: https://floating-ui-svelte.vercel.app/api/use-interactions

Illustrates the correct way to apply event handlers when using props getters from useInteractions, ensuring all handlers are registered.

```svelte
<!-- Incorrect -->
<div {...interactions.getReferenceProps()} onclick={/* event handler */}>Reference</div>
<!-- Correct -->
<div {...interactions.getReferenceProps({ onclick: /* event handler */})}>Reference</div>
```

--------------------------------

### useInteractions Hook Import

Source: https://floating-ui-svelte.vercel.app/api/use-interactions

Imports the useInteractions hook from the @skeletonlabs/floating-ui-svelte library.

```typescript
import { useInteractions } from '@skeletonlabs/floating-ui-svelte';
```

--------------------------------

### Tooltip Interaction Hooks

Source: https://floating-ui-svelte.vercel.app/examples/tooltips

Applies accessibility and interaction logic to the tooltip and reference elements using various interaction hooks. `useRole` adds ARIA attributes, `useHover` handles mouse events, and `useDismiss` manages ESC key dismissal.

```typescript
const role = useRole(floating.context, { role: 'tooltip' });
const hover = useHover(floating.context, { move: false });
const dismiss = useDismiss(floating.context);
const interactions = useInteractions([role, hover, dismiss]);
```

--------------------------------

### useHover Hook Usage

Source: https://floating-ui-svelte.vercel.app/api/use-hover

Demonstrates how to use the useHover hook in conjunction with useFloating and useInteractions for managing hover interactions in Svelte components.

```typescript
import { useFloating, useInteractions, useHover } from '@skeletonlabs/floating-ui-svelte';
const floating = useFloating();
const hover = useHover(floating.context);
const interactions = useInteractions([hover]);
```

--------------------------------

### useFocus Hook Options

Source: https://floating-ui-svelte.vercel.app/api/use-focus

Details the configurable options for the useFocus hook. 'enabled' controls whether the hook is active, and 'visibleOnly' determines if the open state is tied to focus-visible states.

```APIDOC
useFocus:
  enabled: boolean (default: true) - Conditionally enable/disable the Hook.
  visibleOnly: boolean (default: true) - Whether the open state only changes if the focus event is considered visible (:focus-visible CSS selector).
```

--------------------------------

### Rendering Popover Elements

Source: https://floating-ui-svelte.vercel.app/examples/popovers

Renders the reference and floating elements for the popover. Interaction props are spread onto these elements for functionality. Conditional rendering and transitions are applied to the floating element.

```html
<!-- Reference Element -->
<button
	bind:this={floating.elements.reference}
	{...interactions.getReferenceProps()}
	class="btn-gradient"
>
	Click Me
</button>
<!-- Floating Element -->
{#if open}
	<div
		bind:this={floating.elements.floating}
		style={floating.floatingStyles}
		{...interactions.getFloatingProps()}
		class="floating popover-neutral"
		transition:fade={{ duration: 200 }}
	>
		<p>
			You can press the <kbd class="kbd">esc</kbd> key or click outside to
			<strong>*dismiss*</strong> this floating element.
		</p>
		<FloatingArrow bind:ref={elemArrow} context={floating.context} fill="#575969" />
	</div>
{/if}
```

--------------------------------

### FloatingArrow Component Usage

Source: https://floating-ui-svelte.vercel.app/api/floating-arrow

Demonstrates how to import and use the FloatingArrow component within a Svelte application, including its integration with the useFloating hook for positioning.

```typescript
import { FloatingArrow } from '@skeletonlabs/floating-ui-svelte';
```

```typescript
import { arrow, useFloating, FloatingArrow, autoUpdate, offset } from '@skeletonlabs/floating-ui-svelte';
let arrowRef: HTMLElement | null = $state(null);
const floating = useFloating({
	get middleware() {
		return [
			offset(10),
			arrowRef && arrow({ element: arrowRef })
		];
	}
});
```

```svelte
<!-- Reference Element -->
<button bind:this="{floating.elements.reference}">
	Reference
</button>
<!-- Floating Element -->
<div
	bind:this="{floating.elements.floating}"
	style="{floating.floatingStyles}"
	class="floating"
>
	<div>Floating</div>
	<FloatingArrow
		bind:this="{arrowRef}"
		context="{floating.context}"
	/>
</div>
```

```svelte
<FloatingArrow class="fill-white" />
```

--------------------------------

### Reacting to Dismissal Events

Source: https://floating-ui-svelte.vercel.app/api/use-dismiss

Shows how to handle dismissal events by utilizing the `onOpenChange` callback provided by `useFloating`. This allows developers to perform actions based on the reason for dismissal, such as logging a message when the element is closed via the escape key or an outside click.

```typescript
const floating = useFloating({
	get open() {
		return open;
	},
	onOpenChange: (value, event, reason) => {
		open = value;
		if (reason === 'escape-key' || reason === 'outside-press') {
			console.log('dismissed');
		}
	},
});
```

--------------------------------

### useInteractions Returns

Source: https://floating-ui-svelte.vercel.app/api/use-interactions

Details the return values of the useInteractions hook, including getReferenceProps, getFloatingProps, and getItemProps, along with their types and parameter descriptions.

```APIDOC
getReferenceProps |  The merged attributes for the reference element. (userProps?: HTMLAttributes) => Record<string, unknown>
getFloatingProps |  The merged attributes for the floating element. (userProps?: HTMLAttributes) => Record<string, unknown>
getItemProps |  The merged attributes for when dealing with a list inside the floating element. (userProps?: HTMLAttributes & ExtendedUserProps) => Record<string, unknown>
```

--------------------------------

### Popover Open State Management

Source: https://floating-ui-svelte.vercel.app/examples/popovers

Manages the visibility state of the popover. The `open` variable is used for conditional rendering of the popover element.

```typescript
let open = $state(false);
```

--------------------------------

### Generate Unique ID with useId

Source: https://floating-ui-svelte.vercel.app/api/utilities

The `useId` utility function generates a unique identifier string by combining a random string and an incrementing counter. This ensures uniqueness across different instances.

```typescript
import { useId } from '@skeletonlabs/floating-ui-svelte';

const id = useId();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.