bits-ui 2.8.1 → 2.8.3

package/dist/bits/toggle-group/toggle-group.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type WritableBox, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { Orientation } from "../../shared/index.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export declare const toggleGroupAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item"]>;
 interface ToggleGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -13,6 +13,7 @@ interface ToggleGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
 declare abstract class ToggleGroupBaseState {
     readonly opts: ToggleGroupBaseStateOpts;
     readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
     constructor(opts: ToggleGroupBaseStateOpts);
     readonly props: {
         readonly id: string;
@@ -68,6 +69,7 @@ export declare class ToggleGroupItemState {
     static create(opts: ToggleGroupItemStateOpts): ToggleGroupItemState;
     readonly opts: ToggleGroupItemStateOpts;
     readonly root: ToggleGroup;
+    readonly attachment: RefAttachment;
     readonly isPressed: boolean;
     constructor(opts: ToggleGroupItemStateOpts, root: ToggleGroup);
     onclick(_: BitsMouseEvent): void;

package/dist/bits/toggle-group/toggle-group.svelte.js

@@ -11,8 +11,10 @@ const ToggleGroupRootContext = new Context("ToggleGroup.Root");
 class ToggleGroupBaseState {
     opts;
     rovingFocusGroup;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             candidateAttr: toggleGroupAttrs.item,
             rootNode: opts.ref,
@@ -26,7 +28,7 @@ class ToggleGroupBaseState {
         role: "group",
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class ToggleGroupSingleState extends ToggleGroupBaseState {
@@ -86,6 +88,7 @@ export class ToggleGroupItemState {
     }
     opts;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     isPressed = $derived.by(() => this.root.includesItem(this.opts.value.current));
     #ariaChecked = $derived.by(() => {
@@ -97,6 +100,7 @@ export class ToggleGroupItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect(() => {
             if (!this.root.opts.rovingFocus.current) {
                 this.#tabIndex = 0;
@@ -149,7 +153,7 @@ export class ToggleGroupItemState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 function getToggleItemDataState(condition) {

package/dist/bits/toolbar/toolbar.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type WritableBox, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { Orientation } from "../../shared/index.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 export declare const toolbarAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item", "group", "group-item", "link", "button"]>;
 interface ToolbarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -12,6 +12,7 @@ export declare class ToolbarRootState {
     static create(opts: ToolbarRootStateOpts): ToolbarRootState;
     readonly opts: ToolbarRootStateOpts;
     readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarRootStateOpts);
     readonly props: {
         readonly id: string;
@@ -26,6 +27,7 @@ interface ToolbarGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
 declare abstract class ToolbarGroupBaseState {
     readonly opts: ToolbarGroupBaseStateOpts;
     readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarGroupBaseStateOpts, root: ToolbarRootState);
     readonly props: {
         readonly id: string;
@@ -81,6 +83,7 @@ export declare class ToolbarGroupItemState {
     readonly opts: ToolbarGroupItemStateOpts;
     readonly group: ToolbarGroup;
     readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarGroupItemStateOpts, group: ToolbarGroup, root: ToolbarRootState);
     onclick(_: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -107,6 +110,7 @@ export declare class ToolbarLinkState {
     static create(opts: ToolbarLinkStateOpts): ToolbarLinkState;
     readonly opts: ToolbarLinkStateOpts;
     readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarLinkStateOpts, root: ToolbarRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
@@ -126,6 +130,7 @@ export declare class ToolbarButtonState {
     static create(opts: ToolbarButtonStateOpts): ToolbarButtonState;
     readonly opts: ToolbarButtonStateOpts;
     readonly root: ToolbarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: ToolbarButtonStateOpts, root: ToolbarRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {

package/dist/bits/toolbar/toolbar.svelte.js

@@ -15,8 +15,10 @@ export class ToolbarRootState {
     }
     opts;
     rovingFocusGroup;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.rovingFocusGroup = new RovingFocusGroup({
             orientation: this.opts.orientation,
             loop: this.opts.loop,
@@ -29,15 +31,17 @@ export class ToolbarRootState {
         role: "toolbar",
         "data-orientation": this.opts.orientation.current,
         [toolbarAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class ToolbarGroupBaseState {
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -45,7 +49,7 @@ class ToolbarGroupBaseState {
         role: "group",
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class ToolbarGroupSingleState extends ToolbarGroupBaseState {
@@ -110,11 +114,13 @@ export class ToolbarGroupItemState {
     opts;
     group;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.group.opts.disabled.current);
     constructor(opts, group, root) {
         this.opts = opts;
         this.group = group;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -165,7 +171,7 @@ export class ToolbarGroupItemState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class ToolbarLinkState {
@@ -174,9 +180,11 @@ export class ToolbarLinkState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -203,7 +211,7 @@ export class ToolbarLinkState {
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         //
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class ToolbarButtonState {
@@ -212,9 +220,11 @@ export class ToolbarButtonState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -243,7 +253,7 @@ export class ToolbarButtonState {
         disabled: getDisabled(this.opts.disabled.current),
         //
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 //

package/dist/bits/tooltip/tooltip.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DOMContext, type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
-import type { OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 export declare const tooltipAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger"]>;
 interface TooltipProviderStateOpts extends ReadableBoxedValues<{
@@ -61,6 +61,7 @@ export declare class TooltipTriggerState {
     static create(opts: TooltipTriggerStateOpts): TooltipTriggerState;
     readonly opts: TooltipTriggerStateOpts;
     readonly root: TooltipRootState;
+    readonly attachment: RefAttachment;
     domContext: DOMContext;
     constructor(opts: TooltipTriggerStateOpts, root: TooltipRootState);
     handlePointerUp: () => void;
@@ -90,6 +91,7 @@ export declare class TooltipContentState {
     static create(opts: TooltipContentStateOpts): TooltipContentState;
     readonly opts: TooltipContentStateOpts;
     readonly root: TooltipRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: TooltipContentStateOpts, root: TooltipRootState);
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;

package/dist/bits/tooltip/tooltip.svelte.js

@@ -153,6 +153,7 @@ export class TooltipTriggerState {
     }
     opts;
     root;
+    attachment;
     #isPointerDown = box(false);
     #hasPointerMoveOpened = $state(false);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.disabled);
@@ -161,6 +162,7 @@ export class TooltipTriggerState {
         this.opts = opts;
         this.root = root;
         this.domContext = new DOMContext(opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
     }
     handlePointerUp = () => {
         this.#isPointerDown.current = false;
@@ -231,7 +233,7 @@ export class TooltipTriggerState {
         onfocus: this.#onfocus,
         onblur: this.#onblur,
         onclick: this.#onclick,
-        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
+        ...this.attachment,
     }));
 }
 export class TooltipContentState {
@@ -240,9 +242,11 @@ export class TooltipContentState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
         new GraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
@@ -300,7 +304,7 @@ export class TooltipContentState {
             outline: "none",
         },
         [tooltipAttrs.content]: "",
-        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
+        ...this.attachment,
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -45,6 +45,15 @@ export declare class FloatingContentState {
     contentRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     wrapperRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
     arrowRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
+    readonly contentAttachment: {
+        [x: symbol]: (node: HTMLElement) => () => void;
+    };
+    readonly wrapperAttachment: {
+        [x: symbol]: (node: HTMLElement) => () => void;
+    };
+    readonly arrowAttachment: {
+        [x: symbol]: (node: HTMLElement) => () => void;
+    };
     arrowId: Box<string>;
     hasExplicitBoundaries: boolean;
     detectOverflowOptions: {

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -52,6 +52,9 @@ export class FloatingContentState {
     contentRef = box(null);
     wrapperRef = box(null);
     arrowRef = box(null);
+    contentAttachment = attachRef(this.contentRef);
+    wrapperAttachment = attachRef(this.wrapperRef);
+    arrowAttachment = attachRef(this.arrowRef);
     // ids
     arrowId = box(useId());
     #transformedStyle = $derived.by(() => {
@@ -146,7 +149,7 @@ export class FloatingContentState {
         },
         // Floating UI calculates logical alignment based the `dir` attribute
         dir: this.opts.dir.current,
-        ...attachRef(this.wrapperRef),
+        ...this.wrapperAttachment,
     }));
     props = $derived.by(() => ({
         "data-side": this.placedSide,
@@ -154,7 +157,7 @@ export class FloatingContentState {
         style: styleToString({
             ...this.#transformedStyle,
         }),
-        ...attachRef(this.contentRef),
+        ...this.contentAttachment,
     }));
     arrowStyle = $derived({
         position: "absolute",
@@ -229,7 +232,7 @@ export class FloatingArrowState {
         id: this.opts.id.current,
         style: this.content.arrowStyle,
         "data-side": this.content.placedSide,
-        ...attachRef(this.content.arrowRef),
+        ...this.content.arrowAttachment,
     }));
 }
 export class FloatingAnchorState {

package/dist/internal/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import type { Box, ReadableBoxedValues, WritableBoxedValues } from "svelte-toolbelt";
+import type { attachRef, Box, ReadableBoxedValues, WritableBoxedValues } from "svelte-toolbelt";
 import type { StyleProperties } from "../shared/index.js";
 export type OnChangeFn<T> = (value: T) => void;
 export type ElementRef = Box<HTMLElement | null>;
@@ -90,3 +90,4 @@ export type BitsPointerEvent<T extends HTMLElement = HTMLElement> = BitsEvent<Po
 export type BitsKeyboardEvent<T extends HTMLElement = HTMLElement> = BitsEvent<KeyboardEvent, T>;
 export type BitsMouseEvent<T extends HTMLElement = HTMLElement> = BitsEvent<MouseEvent, T>;
 export type BitsFocusEvent<T extends HTMLElement = HTMLElement> = BitsEvent<FocusEvent, T>;
+export type RefAttachment<T extends HTMLElement = HTMLElement> = ReturnType<typeof attachRef<T>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.8.1",
+  "version": "2.8.3",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -19,30 +19,28 @@
     "!dist/**/*.spec.*"
   ],
   "devDependencies": {
-    "@internationalized/date": "^3.8.1",
-    "@sveltejs/kit": "^2.21.1",
+    "@internationalized/date": "^3.8.2",
+    "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "5.0.3",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@types/css.escape": "^1.5.2",
     "@types/node": "^20.17.6",
     "@types/resize-observer-browser": "^0.1.11",
     "csstype": "^3.1.3",
-    "jest-axe": "^9.0.0",
     "jsdom": "^24.1.3",
     "publint": "^0.2.12",
-    "svelte": "^5.33.2",
-    "svelte-check": "^4.2.1",
-    "tslib": "^2.8.1",
+    "svelte": "5.33.2",
+    "svelte-check": "^4.2.2",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.4"
+    "vitest": "3.2.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@floating-ui/core": "^1.7.0",
-    "@floating-ui/dom": "^1.7.0",
+    "@floating-ui/core": "^1.7.1",
+    "@floating-ui/dom": "^1.7.1",
     "css.escape": "^1.5.1",
     "esm-env": "^1.1.2",
     "runed": "^0.28.0",
@@ -54,7 +52,6 @@
     "svelte": "^5.33.0"
   },
   "engines": {
-    "pnpm": ">=8.7.0",
     "node": ">=20"
   },
   "sideEffects": false,