@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.1-next.1

package/dist/utils/focusVisible.svelte.js

@@ -13,12 +13,13 @@
 // Original licensing for the following can be found in the
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
-import { getOwnerDocument, getOwnerWindow } from "./dom.js";
+import { getOwnerWindow } from "./dom.js";
 import { isVirtualClick } from "./isVirtualEvent.js";
+import { getOwnerDocument } from "./owner.js";
 import { isMac } from "./platform.js";
 let currentModality = null;
-let changeHandlers = new Set();
-export let hasSetupGlobalListeners = new Map(); // We use a map here to support setting event listeners across multiple document objects.
+const changeHandlers = new Set();
+export const hasSetupGlobalListeners = new Map(); // We use a map here to support setting event listeners across multiple document objects.
 let hasEventBeforeFocus = false;
 let hasBlurredWindowRecently = false;
 // Only Tab or Esc keys will make focus visible on text input elements
@@ -27,7 +28,7 @@ const FOCUS_VISIBLE_INPUT_KEYS = {
     Escape: true,
 };
 function triggerChangeHandlers(modality, e) {
-    for (let handler of changeHandlers) {
+    for (const handler of changeHandlers) {
         handler(modality, e);
     }
 }
@@ -98,27 +99,31 @@ function setupGlobalFocusEvents(element) {
     // However, we need to detect other cases when a focus event occurs without
     // a preceding user event (e.g. screen reader focus). Overriding the focus
     // method on HTMLElement.prototype is a bit hacky, but works.
-    let focus = windowObject.HTMLElement.prototype.focus;
-    windowObject.HTMLElement.prototype.focus = function () {
+    const focus = windowObject.HTMLElement.prototype.focus;
+    windowObject.HTMLElement.prototype.focus = function (...args) {
         hasEventBeforeFocus = true;
-        focus.apply(this, arguments);
+        focus.apply(this, args);
     };
-    documentObject.addEventListener("keydown", handleKeyboardEvent, true);
-    documentObject.addEventListener("keyup", handleKeyboardEvent, true);
-    documentObject.addEventListener("click", handleClickEvent, true);
+    if (documentObject) {
+        documentObject.addEventListener("keydown", handleKeyboardEvent, true);
+        documentObject.addEventListener("keyup", handleKeyboardEvent, true);
+        documentObject.addEventListener("click", handleClickEvent, true);
+    }
     // Register focus events on the window so they are sure to happen
     // before React's event listeners (registered on the document).
     windowObject.addEventListener("focus", handleFocusEvent, true);
     windowObject.addEventListener("blur", handleWindowBlur, false);
-    if (typeof PointerEvent !== "undefined") {
-        documentObject.addEventListener("pointerdown", handlePointerEvent, true);
-        documentObject.addEventListener("pointermove", handlePointerEvent, true);
-        documentObject.addEventListener("pointerup", handlePointerEvent, true);
-    }
-    else {
-        documentObject.addEventListener("mousedown", handlePointerEvent, true);
-        documentObject.addEventListener("mousemove", handlePointerEvent, true);
-        documentObject.addEventListener("mouseup", handlePointerEvent, true);
+    if (documentObject) {
+        if (typeof PointerEvent !== "undefined") {
+            documentObject.addEventListener("pointerdown", handlePointerEvent, true);
+            documentObject.addEventListener("pointermove", handlePointerEvent, true);
+            documentObject.addEventListener("pointerup", handlePointerEvent, true);
+        }
+        else {
+            documentObject.addEventListener("mousedown", handlePointerEvent, true);
+            documentObject.addEventListener("mousemove", handlePointerEvent, true);
+            documentObject.addEventListener("mouseup", handlePointerEvent, true);
+        }
     }
     // Add unmount handler
     windowObject.addEventListener("beforeunload", () => {
@@ -129,27 +134,31 @@ function setupGlobalFocusEvents(element) {
 const tearDownWindowFocusTracking = (element, loadListener) => {
     const windowObject = getOwnerWindow(element);
     const documentObject = getOwnerDocument(element);
-    if (loadListener) {
+    if (loadListener && documentObject) {
         documentObject.removeEventListener("DOMContentLoaded", loadListener);
     }
     if (!hasSetupGlobalListeners.has(windowObject)) {
         return;
     }
     windowObject.HTMLElement.prototype.focus = hasSetupGlobalListeners.get(windowObject).focus;
-    documentObject.removeEventListener("keydown", handleKeyboardEvent, true);
-    documentObject.removeEventListener("keyup", handleKeyboardEvent, true);
-    documentObject.removeEventListener("click", handleClickEvent, true);
+    if (documentObject) {
+        documentObject.removeEventListener("keydown", handleKeyboardEvent, true);
+        documentObject.removeEventListener("keyup", handleKeyboardEvent, true);
+        documentObject.removeEventListener("click", handleClickEvent, true);
+    }
     windowObject.removeEventListener("focus", handleFocusEvent, true);
     windowObject.removeEventListener("blur", handleWindowBlur, false);
-    if (typeof PointerEvent !== "undefined") {
-        documentObject.removeEventListener("pointerdown", handlePointerEvent, true);
-        documentObject.removeEventListener("pointermove", handlePointerEvent, true);
-        documentObject.removeEventListener("pointerup", handlePointerEvent, true);
-    }
-    else {
-        documentObject.removeEventListener("mousedown", handlePointerEvent, true);
-        documentObject.removeEventListener("mousemove", handlePointerEvent, true);
-        documentObject.removeEventListener("mouseup", handlePointerEvent, true);
+    if (documentObject) {
+        if (typeof PointerEvent !== "undefined") {
+            documentObject.removeEventListener("pointerdown", handlePointerEvent, true);
+            documentObject.removeEventListener("pointermove", handlePointerEvent, true);
+            documentObject.removeEventListener("pointerup", handlePointerEvent, true);
+        }
+        else {
+            documentObject.removeEventListener("mousedown", handlePointerEvent, true);
+            documentObject.removeEventListener("mousemove", handlePointerEvent, true);
+            documentObject.removeEventListener("mouseup", handlePointerEvent, true);
+        }
     }
     hasSetupGlobalListeners.delete(windowObject);
 };
@@ -173,14 +182,16 @@ const tearDownWindowFocusTracking = (element, loadListener) => {
 export function addWindowFocusTracking(element) {
     const documentObject = getOwnerDocument(element);
     let loadListener;
-    if (documentObject.readyState !== "loading") {
-        setupGlobalFocusEvents(element);
-    }
-    else {
-        loadListener = () => {
+    if (documentObject) {
+        if (documentObject.readyState !== "loading") {
             setupGlobalFocusEvents(element);
-        };
-        documentObject.addEventListener("DOMContentLoaded", loadListener);
+        }
+        else {
+            loadListener = () => {
+                setupGlobalFocusEvents(element);
+            };
+            documentObject.addEventListener("DOMContentLoaded", loadListener);
+        }
     }
     return () => tearDownWindowFocusTracking(element, loadListener);
 }
@@ -246,8 +257,8 @@ function isKeyboardFocusEvent(isTextInput, modality, e) {
  * Manages focus visible state for the page, and subscribes individual components for updates.
  */
 /*export function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResult {
-  let { isTextInput, autoFocus } = props
-  let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible())
+  let { isTextInput, autofocus } = props
+  let [isFocusVisibleState, setFocusVisible] = useState(autofocus || isFocusVisible())
   useFocusVisibleListener(
     (isFocusVisible) => {
       setFocusVisible(isFocusVisible)

package/dist/utils/get-text-value.d.ts

@@ -0,0 +1 @@
+export declare function getTextValue(element: HTMLElement): string;

package/dist/utils/get-text-value.js

@@ -0,0 +1,71 @@
+let emojiRegex = /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g;
+function getTextContents(element) {
+    // Using innerText instead of textContent because:
+    //
+    // > textContent gets the content of all elements, including <script> and <style> elements. In
+    // > contrast, innerText only shows "human-readable" elements.
+    // >
+    // > — https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
+    let currentInnerText = element.innerText ?? "";
+    // Remove all the elements that shouldn't be there.
+    //
+    // [hidden]       — The user doesn't see it
+    // [aria-hidden]  — The screen reader doesn't see it
+    // [role="img"]   — Even if it is text, it is used as an image
+    //
+    // This is probably the slowest part, but if you want complete control over the text value, then
+    // it is better to set an `aria-label` instead.
+    let copy = element.cloneNode(true);
+    if (!(copy instanceof HTMLElement)) {
+        return currentInnerText;
+    }
+    let dropped = false;
+    // Drop the elements that shouldn't be there.
+    for (let child of copy.querySelectorAll('[hidden],[aria-hidden],[role="img"]')) {
+        child.remove();
+        dropped = true;
+    }
+    // Now that the elements are removed, we can get the innerText such that we can strip the emojis.
+    let value = dropped ? copy.innerText ?? "" : currentInnerText;
+    // Check if it contains some emojis or not, if so, we need to remove them
+    // because ideally we work with simple text values.
+    //
+    // Ideally we can use the much simpler RegEx: /\p{Extended_Pictographic}/u
+    // but we can't rely on this yet, so we use the more complex one.
+    if (emojiRegex.test(value)) {
+        value = value.replace(emojiRegex, "");
+    }
+    return value;
+}
+export function getTextValue(element) {
+    // Try to use the `aria-label` first
+    let label = element.getAttribute("aria-label");
+    if (typeof label === "string")
+        return label.trim();
+    // Try to use the `aria-labelledby` second
+    let labelledby = element.getAttribute("aria-labelledby");
+    if (labelledby) {
+        // aria-labelledby can be a space-separated list of IDs, so we need to split them up and
+        // combine them into a single string.
+        let labels = labelledby
+            .split(" ")
+            .map((labelledby) => {
+            let labelEl = document.getElementById(labelledby);
+            if (labelEl) {
+                let label = labelEl.getAttribute("aria-label");
+                // Try to use the `aria-label` first (of the referenced element)
+                if (typeof label === "string")
+                    return label.trim();
+                // This time, the `aria-labelledby` isn't used anymore (in Safari), so we just have to
+                // look at the contents itself.
+                return getTextContents(labelEl).trim();
+            }
+            return null;
+        })
+            .filter(Boolean);
+        if (labels.length > 0)
+            return labels.join(", ");
+    }
+    // Try to use the text contents of the element itself
+    return getTextContents(element).trim();
+}

package/dist/utils/id.d.ts

@@ -1,4 +1,4 @@
-export declare const alphaid: (size?: number | undefined) => string;
+export declare const alphaid: (size?: number) => string;
 export declare const htmlid: (size?: number) => string;
 export declare const getIdContext: () => string | undefined;
 export declare const createIdContext: (id: string) => string | undefined;

package/dist/utils/match.d.ts

@@ -0,0 +1 @@
+export declare function match<TValue extends string | number = string, TReturnValue = unknown>(value: TValue, lookup: Record<TValue, TReturnValue | ((...args: any[]) => TReturnValue)>, ...args: any[]): TReturnValue;

package/dist/utils/match.js

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function match(value, lookup, ...args) {
+    if (value in lookup) {
+        const returnValue = lookup[value];
+        return typeof returnValue === "function" ? returnValue(...args) : returnValue;
+    }
+    const error = new Error(`Tried to handle "${value}" but there is no handler defined. Only defined handlers are: ${Object.keys(lookup)
+        .map((key) => `"${key}"`)
+        .join(", ")}.`);
+    if (Error.captureStackTrace)
+        Error.captureStackTrace(error, match);
+    throw error;
+}

package/dist/utils/once.d.ts

@@ -0,0 +1 @@
+export declare function once<T>(cb: (...args: T[]) => void): (...args: T[]) => void;

package/dist/utils/once.js

@@ -0,0 +1,9 @@
+export function once(cb) {
+    let state = { called: false };
+    return (...args) => {
+        if (state.called)
+            return;
+        state.called = true;
+        return cb(...args);
+    };
+}

package/dist/utils/owner.d.ts

@@ -0,0 +1 @@
+export declare function getOwnerDocument<T extends Element>(element: T | null | undefined): Document | null;

package/dist/utils/owner.js

@@ -0,0 +1,8 @@
+import { BROWSER } from "esm-env";
+export function getOwnerDocument(element) {
+    if (!BROWSER)
+        return null;
+    if (element instanceof Node)
+        return element.ownerDocument;
+    return document;
+}

package/dist/utils/platform.d.ts

@@ -2,3 +2,5 @@ export declare function testUserAgent(re: RegExp): any;
 export declare function testPlatform(re: RegExp): boolean;
 export declare const isMac: () => boolean;
 export declare const isAndroid: () => boolean;
+export declare function isIOS(): any;
+export declare function isMobile(): any;

package/dist/utils/platform.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export function testUserAgent(re) {
     if (typeof window === "undefined" || window.navigator == null) {
         return false;
@@ -27,3 +28,19 @@ export const isMac = cached(function () {
 export const isAndroid = cached(function () {
     return testUserAgent(/Android/i);
 });
+export function isIOS() {
+    // TODO: This is not a great way to detect iOS, but it's the best I can do for now.
+    // - `window.platform` is deprecated
+    // - `window.userAgentData.platform` is still experimental (https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform)
+    // - `window.userAgent` also doesn't contain the required information
+    return (
+    // Check if it is an iPhone
+    testUserAgent(/iPhone/i) ||
+        // Check if it is an iPad. iPad reports itself as "MacIntel", but we can check if it is a touch
+        // screen. Let's hope that Apple doesn't release a touch screen Mac (or maybe this would then
+        // work as expected 🤔).
+        (isMac() && typeof window !== "undefined" && window.navigator != null && window.navigator.maxTouchPoints > 0));
+}
+export function isMobile() {
+    return isIOS() || isAndroid();
+}

package/dist/utils/ref.svelte.d.ts

@@ -0,0 +1,4 @@
+export type MutableRefObject<T> = {
+    current: T;
+};
+export declare const useRef: <T>(current: T) => MutableRefObject<T>;

package/dist/utils/ref.svelte.js

@@ -0,0 +1,4 @@
+export const useRef = (current) => {
+    const ref = $state({ current });
+    return ref;
+};

package/dist/utils/render.d.ts

@@ -0,0 +1,31 @@
+import type { Props } from "./types.js";
+export declare enum RenderFeatures {
+    /** No features at all */
+    None = 0,
+    /**
+     * When used, this will allow us to use one of the render strategies.
+     *
+     * **The render strategies are:**
+     *    - **Unmount**   _(Will unmount the component.)_
+     *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
+     */
+    RenderStrategy = 1,
+    /**
+     * When used, this will allow the user of our component to be in control. This can be used when
+     * you want to transition based on some state.
+     */
+    Static = 2
+}
+export declare enum RenderStrategy {
+    Unmount = 0,
+    Hidden = 1
+}
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+type PropsForFeature<TPassedInFeatures extends RenderFeatures, TForFeature extends RenderFeatures, TProps> = TPassedInFeatures extends TForFeature ? TProps : {};
+export type PropsForFeatures<T extends RenderFeatures> = Expand<UnionToIntersection<PropsForFeature<T, RenderFeatures.Static, {
+    static?: boolean;
+}> | PropsForFeature<T, RenderFeatures.RenderStrategy, {
+    unmount?: boolean;
+}>>>;
+export declare function mergeProps<T extends Props<any, any>[]>(...listOfProps: T): Props<any, any>;
+export {};

package/dist/utils/render.js

@@ -0,0 +1,56 @@
+export var RenderFeatures;
+(function (RenderFeatures) {
+    /** No features at all */
+    RenderFeatures[RenderFeatures["None"] = 0] = "None";
+    /**
+     * When used, this will allow us to use one of the render strategies.
+     *
+     * **The render strategies are:**
+     *    - **Unmount**   _(Will unmount the component.)_
+     *    - **Hidden**    _(Will hide the component using the [hidden] attribute.)_
+     */
+    RenderFeatures[RenderFeatures["RenderStrategy"] = 1] = "RenderStrategy";
+    /**
+     * When used, this will allow the user of our component to be in control. This can be used when
+     * you want to transition based on some state.
+     */
+    RenderFeatures[RenderFeatures["Static"] = 2] = "Static";
+})(RenderFeatures || (RenderFeatures = {}));
+export var RenderStrategy;
+(function (RenderStrategy) {
+    RenderStrategy[RenderStrategy["Unmount"] = 0] = "Unmount";
+    RenderStrategy[RenderStrategy["Hidden"] = 1] = "Hidden";
+})(RenderStrategy || (RenderStrategy = {}));
+export function mergeProps(...listOfProps) {
+    if (listOfProps.length === 0)
+        return {};
+    if (listOfProps.length === 1)
+        return listOfProps[0];
+    let target = {};
+    let eventHandlers = {};
+    for (let props of listOfProps) {
+        for (let prop in props) {
+            // Merge event listeners
+            if (prop.startsWith("on") && typeof props[prop] === "function") {
+                eventHandlers[prop] ??= [];
+                eventHandlers[prop].push(props[prop]);
+            }
+            else {
+                // Override incoming prop
+                target[prop] = props[prop];
+            }
+        }
+    }
+    // Merge event handlers
+    for (let eventName in eventHandlers) {
+        Object.assign(target, {
+            [eventName](...args) {
+                let handlers = eventHandlers[eventName];
+                for (let handler of handlers) {
+                    handler?.(...args);
+                }
+            },
+        });
+    }
+    return target;
+}

package/dist/utils/store.d.ts

@@ -0,0 +1,11 @@
+type ChangeFn = () => void;
+type UnsubscribeFn = () => void;
+type ActionFn<T> = (this: T, ...args: any[]) => T | void;
+type StoreActions<Key extends string, T> = Record<Key, ActionFn<T>>;
+export interface Store<T, ActionKey extends string> {
+    getSnapshot(): T;
+    subscribe(onChange: ChangeFn): UnsubscribeFn;
+    dispatch(action: ActionKey, ...args: any[]): void;
+}
+export declare function createStore<T, ActionKey extends string>(initial: () => T, actions: StoreActions<ActionKey, T>): Store<T, ActionKey>;
+export {};

package/dist/utils/store.js

@@ -0,0 +1,20 @@
+export function createStore(initial, actions) {
+    let state = initial();
+    let listeners = new Set();
+    return {
+        getSnapshot() {
+            return state;
+        },
+        subscribe(onChange) {
+            listeners.add(onChange);
+            return () => listeners.delete(onChange);
+        },
+        dispatch(key, ...args) {
+            let newState = actions[key].call(state, ...args);
+            if (newState) {
+                state = newState;
+                listeners.forEach((listener) => listener());
+            }
+        },
+    };
+}

package/dist/utils/types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, SvelteHTMLElements } from "svelte/elements";
+declare const __: "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
+export type __ = typeof __;
+export type ElementType = keyof SvelteHTMLElements;
+export type HTMLElementType<T extends keyof SvelteHTMLElements> = SvelteHTMLElements[T] extends HTMLAttributes<infer U> ? (U extends HTMLElement ? U : never) : never;
+export type Expand<T> = T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never;
+export type PropsOf<TTag extends keyof SvelteHTMLElements> = TTag extends keyof SvelteHTMLElements ? SvelteHTMLElements[TTag] : never;
+type PropsWeControl = "as" | "children" | "class";
+type CleanProps<TTag extends keyof SvelteHTMLElements, TOmittableProps extends PropertyKey = never> = Omit<SvelteHTMLElements[TTag], TOmittableProps | PropsWeControl>;
+type OurProps<TTag extends keyof SvelteHTMLElements, TSlot> = {
+    as?: TTag;
+    children?: Snippet<[TSlot]>;
+};
+type HasProperty<T extends object, K extends PropertyKey> = T extends never ? never : K extends keyof T ? true : never;
+type ClassNameOverride<TTag extends keyof SvelteHTMLElements, TSlot = {}> = true extends HasProperty<PropsOf<TTag>, "class"> ? {
+    class?: PropsOf<TTag>["class"] | ((bag: TSlot) => string);
+} : {};
+export type Props<TTag extends keyof SvelteHTMLElements, TSlot = {}, TOmittableProps extends PropertyKey = never, Overrides = {}> = CleanProps<TTag, TOmittableProps | keyof Overrides> & OurProps<TTag, TSlot> & ClassNameOverride<TTag, TSlot> & Overrides;
+type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+export type XOR<T, U> = T | U extends __ ? never : T extends __ ? U : U extends __ ? T : T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export type EnsureArray<T> = T extends any[] ? T : Expand<T>[];
+export {};

package/dist/utils/types.js

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+// A unique placeholder we can use as a default. This is nice because we can use this instead of
+// defaulting to null / never / ... and possibly collide with actual data.
+// Ideally we use a unique symbol here.
+const __ = "1D45E01E-AF44-47C4-988A-19A94EBAF55C";
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.0.0-next.1",
+  "version": "2.1.1-next.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -16,38 +16,44 @@
     "svelte": "^5.0.0-next.1"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.5",
+    "@changesets/cli": "^2.27.7",
     "@changesets/types": "^6.0.0",
-    "@playwright/test": "^1.44.1",
-    "@sveltejs/adapter-auto": "^3.2.1",
-    "@sveltejs/kit": "^2.5.10",
-    "@sveltejs/package": "^2.3.1",
+    "@playwright/test": "^1.45.2",
+    "@pzerelles/heroicons-svelte": "^2.1.5",
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "@sveltejs/kit": "^2.5.18",
+    "@sveltejs/package": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/svelte": "^5.2.0",
     "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.10",
     "autoprefixer": "^10.4.19",
-    "eslint": "^9.4.0",
+    "clsx": "^2.1.1",
+    "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.39.0",
-    "globals": "^15.3.0",
+    "eslint-plugin-svelte": "^2.42.0",
+    "globals": "^15.8.0",
+    "jsdom": "^24.1.0",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.38",
-    "prettier": "^3.3.1",
-    "prettier-plugin-svelte": "^3.2.3",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "publint": "^0.1.16",
-    "svelte": "5.0.0-next.150",
-    "svelte-check": "^3.8.0",
-    "tailwindcss": "^3.4.4",
+    "svelte": "5.0.0-next.184",
+    "svelte-check": "^3.8.4",
+    "tailwindcss": "^3.4.5",
     "tslib": "^2.6.3",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.3",
     "typescript-eslint": "8.0.0-alpha.28",
-    "vite": "^5.2.12",
-    "vitest": "^1.6.0"
+    "vite": "^5.3.4",
+    "vitest": "^2.0.3"
   },
   "dependencies": {
-    "nanoid": "^5.0.7",
-    "svelte-interactions": "^0.2.0"
+    "@skeletonlabs/floating-ui-svelte": "^0.3.1",
+    "esm-env": "^1.0.0",
+    "nanoid": "^5.0.7"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -57,6 +63,7 @@
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-package --watch",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

package/dist/actions/activePress.svelte.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="svelte" />
-import type { Action } from "svelte/action";
-export declare const createActivePress: ({ disabled }: {
-    disabled?: boolean;
-}) => {
-    activePressAction: Action<HTMLElement, undefined, Record<never, any>>;
-    readonly pressed: boolean;
-};

package/dist/actions/focusRing.svelte.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="svelte" />
-import type { Action } from "svelte/action";
-export declare const createFocusRing: ({ autoFocus, within }?: {
-    autoFocus?: boolean;
-    within?: boolean;
-}) => {
-    focusRingAction: Action<HTMLElement, undefined, Record<never, any>>;
-    readonly focusVisible: boolean;
-};

package/dist/actions/focusRing.svelte.js

@@ -1,34 +0,0 @@
-import { isFocusVisible, useFocusVisibleListener } from "../utils/focusVisible.svelte.js";
-export const createFocusRing = ({ autoFocus = false, within } = {}) => {
-    let focused = $state(false);
-    let focusVisible = $state(autoFocus || isFocusVisible());
-    useFocusVisibleListener((isFocusVisible) => {
-        focusVisible = isFocusVisible;
-    });
-    const focusRingAction = (node) => {
-        const handleFocus = (e) => {
-            focused = true;
-        };
-        const handleBlur = (e) => {
-            focused = false;
-        };
-        if (!within) {
-            node.addEventListener("focus", handleFocus);
-            node.addEventListener("blur", handleBlur);
-        }
-        return {
-            destroy: () => {
-                if (!within) {
-                    node.removeEventListener("focus", handleFocus);
-                    node.removeEventListener("blur", handleBlur);
-                }
-            },
-        };
-    };
-    return {
-        focusRingAction,
-        get focusVisible() {
-            return focusVisible && focused;
-        },
-    };
-};

package/dist/utils/disabled.d.ts

@@ -1,3 +0,0 @@
-export declare const getDisabledContext: () => {
-    readonly disabled: boolean;
-} | undefined;

package/dist/utils/disabled.js

@@ -1,2 +0,0 @@
-import { getContext } from "svelte";
-export const getDisabledContext = () => getContext("Disabled");