bits-ui 2.3.0 → 2.3.1

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

@@ -1,9 +1,11 @@
 import { attachRef, DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-const RATING_GROUP_ROOT_ATTR = "data-rating-group-root";
-const RATING_GROUP_ITEM_ATTR = "data-rating-group-item";
+const ratingGroupAttrs = createBitsAttrs({
+    component: "rating-group",
+    parts: ["root", "item"],
+});
 class RatingGroupRootState {
     opts;
     #hoverValue = $state(null);
@@ -85,22 +87,42 @@ class RatingGroupRootState {
         this.setHoverValue(null);
     }
     handlers = {
-        [kbd.ARROW_UP]: () => this.#adjustValue(this.opts.allowHalf.current ? 0.5 : 1),
+        [kbd.ARROW_UP]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(this.opts.allowHalf.current ? 0.5 : 1);
+        },
         [kbd.ARROW_RIGHT]: () => {
+            this.setHoverValue(null);
             const increment = this.opts.allowHalf.current ? 0.5 : 1;
             // in RTL mode, right arrow should decrement
             this.#adjustValue(this.isRTL ? -increment : increment);
         },
-        [kbd.ARROW_DOWN]: () => this.#adjustValue(this.opts.allowHalf.current ? -0.5 : -1),
+        [kbd.ARROW_DOWN]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(this.opts.allowHalf.current ? -0.5 : -1);
+        },
         [kbd.ARROW_LEFT]: () => {
+            this.setHoverValue(null);
             const increment = this.opts.allowHalf.current ? 0.5 : 1;
             // in RTL mode, left arrow should increment
             this.#adjustValue(this.isRTL ? increment : -increment);
         },
-        [kbd.HOME]: () => this.setValue(this.opts.min.current),
-        [kbd.END]: () => this.setValue(this.opts.max.current),
-        [kbd.PAGE_UP]: () => this.#adjustValue(1),
-        [kbd.PAGE_DOWN]: () => this.#adjustValue(-1),
+        [kbd.HOME]: () => {
+            this.setHoverValue(null);
+            this.setValue(this.opts.min.current);
+        },
+        [kbd.END]: () => {
+            this.setHoverValue(null);
+            this.setValue(this.opts.max.current);
+        },
+        [kbd.PAGE_UP]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(1);
+        },
+        [kbd.PAGE_DOWN]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(-1);
+        },
     };
     onkeydown(e) {
         if (this.opts.disabled.current || this.opts.readonly.current)
@@ -188,7 +210,7 @@ class RatingGroupRootState {
             "data-readonly": this.opts.readonly.current ? "" : undefined,
             "data-orientation": this.opts.orientation.current,
             tabindex: this.opts.disabled.current ? -1 : 0,
-            [RATING_GROUP_ROOT_ATTR]: "",
+            [ratingGroupAttrs.root]: "",
             onkeydown: this.onkeydown,
             onpointerleave: this.onpointerleave,
             ...attachRef(this.opts.ref),
@@ -263,7 +285,7 @@ class RatingGroupItemState {
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-readonly": this.root.opts.readonly.current ? "" : undefined,
         "data-state": this.#state,
-        [RATING_GROUP_ITEM_ATTR]: "",
+        [ratingGroupAttrs.item]: "",
         //
         onclick: this.onclick,
         onpointermove: this.onpointermove,

package/dist/bits/scroll-area/scroll-area.svelte.d.ts

@@ -45,7 +45,6 @@ declare class ScrollAreaRootState {
             readonly "--bits-scroll-area-corner-height": `${number}px`;
             readonly "--bits-scroll-area-corner-width": `${number}px`;
         };
-        readonly "data-scroll-area-root": "";
     };
 }
 type ScrollAreaViewportStateProps = WithRefProps;
@@ -60,7 +59,6 @@ declare class ScrollAreaViewportState {
             readonly overflowX: "hidden" | "scroll";
             readonly overflowY: "hidden" | "scroll";
         };
-        readonly "data-scroll-area-viewport": "";
     };
     contentProps: {
         readonly id: string;
@@ -83,7 +81,7 @@ type ScrollAreaScrollbarStateProps = WithRefProps<ReadableBoxedValues<{
 declare class ScrollAreaScrollbarState {
     readonly opts: ScrollAreaScrollbarStateProps;
     readonly root: ScrollAreaRootState;
-    isHorizontal: boolean;
+    readonly isHorizontal: boolean;
     hasThumb: boolean;
     constructor(opts: ScrollAreaScrollbarStateProps, root: ScrollAreaRootState);
 }
@@ -92,7 +90,7 @@ declare class ScrollAreaScrollbarHoverState {
     root: ScrollAreaRootState;
     isVisible: boolean;
     constructor(scrollbar: ScrollAreaScrollbarState);
-    props: {
+    readonly props: {
         readonly "data-state": "hidden" | "visible";
     };
 }
@@ -103,11 +101,11 @@ declare class ScrollAreaScrollbarScrollState {
         state: import("svelte-toolbelt").WritableBox<"hidden" | "scrolling" | "idle" | "interacting">;
         dispatch: (event: string | number | symbol) => void;
     };
-    isHidden: boolean;
+    readonly isHidden: boolean;
     constructor(scrollbar: ScrollAreaScrollbarState);
     onpointerenter(_: BitsPointerEvent): void;
     onpointerleave(_: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly "data-state": "hidden" | "visible";
         readonly onpointerenter: (_: BitsPointerEvent) => void;
         readonly onpointerleave: (_: BitsPointerEvent) => void;
@@ -118,7 +116,7 @@ declare class ScrollAreaScrollbarAutoState {
     root: ScrollAreaRootState;
     isVisible: boolean;
     constructor(scrollbar: ScrollAreaScrollbarState);
-    props: {
+    readonly props: {
         readonly "data-state": "hidden" | "visible";
     };
 }
@@ -128,8 +126,8 @@ declare class ScrollAreaScrollbarVisibleState {
     thumbNode: HTMLElement | null;
     pointerOffset: number;
     sizes: Sizes;
-    thumbRatio: number;
-    hasThumb: boolean;
+    readonly thumbRatio: number;
+    readonly hasThumb: boolean;
     prevTransformStyle: string;
     constructor(scrollbar: ScrollAreaScrollbarState);
     setSizes(sizes: Sizes): void;
@@ -184,8 +182,8 @@ declare class ScrollAreaScrollbarXState implements ScrollbarAxisState {
     onThumbPositionChange: () => void;
     onWheelScroll: (e: WheelEvent, maxScrollPos: number) => void;
     onResize: () => void;
-    thumbSize: number;
-    props: {
+    readonly thumbSize: number;
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal";
         readonly style: {
@@ -215,8 +213,8 @@ declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
     onThumbPositionChange(): void;
     onWheelScroll(e: WheelEvent, maxScrollPos: number): void;
     onResize(): void;
-    thumbSize: number;
-    props: {
+    readonly thumbSize: number;
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "vertical";
         readonly style: {
@@ -244,7 +242,7 @@ declare class ScrollAreaScrollbarSharedState {
         y: number;
     }) => void;
     handleThumbPointerUp: () => void;
-    maxScrollPos: number;
+    readonly maxScrollPos: number;
     constructor(scrollbarState: ScrollbarAxis);
     handleDragScroll(e: PointerEvent): void;
     onpointerdown(e: BitsPointerEvent): void;
@@ -262,7 +260,7 @@ declare class ScrollAreaThumbImplState {
     constructor(opts: ScrollAreaThumbImplStateProps, scrollbarState: ScrollAreaScrollbarSharedState);
     onpointerdowncapture(e: BitsPointerEvent): void;
     onpointerup(_: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-state": "hidden" | "visible";
         readonly style: {
@@ -272,7 +270,6 @@ declare class ScrollAreaThumbImplState {
         };
         readonly onpointerdowncapture: (e: BitsPointerEvent) => void;
         readonly onpointerup: (_: BitsPointerEvent) => void;
-        readonly "data-scroll-area-thumb": "";
     };
 }
 type ScrollAreaCornerImplStateProps = WithRefProps;
@@ -280,9 +277,9 @@ declare class ScrollAreaCornerImplState {
     #private;
     readonly opts: ScrollAreaCornerImplStateProps;
     readonly root: ScrollAreaRootState;
-    hasSize: boolean;
+    readonly hasSize: boolean;
     constructor(opts: ScrollAreaCornerImplStateProps, root: ScrollAreaRootState);
-    props: {
+    readonly props: {
         id: string;
         style: {
             width: number;
@@ -292,7 +289,6 @@ declare class ScrollAreaCornerImplState {
             left: number | undefined;
             bottom: number;
         };
-        "data-scroll-area-corner": string;
     };
 }
 export declare const ScrollAreaRootContext: Context<ScrollAreaRootState>;

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -13,11 +13,11 @@ import { useStateMachine } from "../../internal/use-state-machine.svelte.js";
 import { clamp } from "../../internal/clamp.js";
 import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
 import { on } from "svelte/events";
-const SCROLL_AREA_ROOT_ATTR = "data-scroll-area-root";
-const SCROLL_AREA_VIEWPORT_ATTR = "data-scroll-area-viewport";
-const SCROLL_AREA_CORNER_ATTR = "data-scroll-area-corner";
-const SCROLL_AREA_THUMB_ATTR = "data-scroll-area-thumb";
-const SCROLL_AREA_SCROLLBAR_ATTR = "data-scroll-area-scrollbar";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const scrollAreaAttrs = createBitsAttrs({
+    component: "scroll-area",
+    parts: ["root", "viewport", "corner", "thumb", "scrollbar"],
+});
 class ScrollAreaRootState {
     opts;
     scrollAreaNode = $state(null);
@@ -42,7 +42,7 @@ class ScrollAreaRootState {
             "--bits-scroll-area-corner-height": `${this.cornerHeight}px`,
             "--bits-scroll-area-corner-width": `${this.cornerWidth}px`,
         },
-        [SCROLL_AREA_ROOT_ATTR]: "",
+        [scrollAreaAttrs.root]: "",
         ...attachRef(this.opts.ref, (v) => (this.scrollAreaNode = v)),
     }));
 }
@@ -61,7 +61,7 @@ class ScrollAreaViewportState {
             overflowX: this.root.scrollbarXEnabled ? "scroll" : "hidden",
             overflowY: this.root.scrollbarYEnabled ? "scroll" : "hidden",
         },
-        [SCROLL_AREA_VIEWPORT_ATTR]: "",
+        [scrollAreaAttrs.viewport]: "",
         ...attachRef(this.opts.ref, (v) => (this.root.viewportNode = v)),
     }));
     contentProps = $derived.by(() => ({
@@ -565,7 +565,7 @@ class ScrollAreaScrollbarSharedState {
             position: "absolute",
             ...this.scrollbarState.props.style,
         },
-        [SCROLL_AREA_SCROLLBAR_ATTR]: "",
+        [scrollAreaAttrs.scrollbar]: "",
         onpointerdown: this.onpointerdown,
         onpointermove: this.onpointermove,
         onpointerup: this.onpointerup,
@@ -627,7 +627,7 @@ class ScrollAreaThumbImplState {
         },
         onpointerdowncapture: this.onpointerdowncapture,
         onpointerup: this.onpointerup,
-        [SCROLL_AREA_THUMB_ATTR]: "",
+        [scrollAreaAttrs.thumb]: "",
         ...attachRef(this.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v)),
     }));
 }
@@ -661,7 +661,7 @@ class ScrollAreaCornerImplState {
             left: this.root.opts.dir.current === "rtl" ? 0 : undefined,
             bottom: 0,
         },
-        [SCROLL_AREA_CORNER_ATTR]: "",
+        [scrollAreaAttrs.corner]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -8,6 +8,7 @@ export declare const LAST_KEYS: string[];
 export declare const FIRST_LAST_KEYS: string[];
 export declare const SELECTION_KEYS: string[];
 export declare const CONTENT_MARGIN = 10;
+declare const selectAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["trigger", "content", "item", "viewport", "scroll-up-button", "scroll-down-button", "group", "group-label", "separator", "arrow", "input", "content-wrapper", "item-text", "value"]>;
 type SelectBaseRootStateProps = ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
@@ -34,12 +35,11 @@ declare class SelectBaseRootState {
     triggerNode: HTMLElement | null;
     valueId: string;
     highlightedNode: HTMLElement | null;
-    highlightedValue: string | null;
-    highlightedId: string | undefined;
-    highlightedLabel: string | null;
+    readonly highlightedValue: string | null;
+    readonly highlightedId: string | undefined;
+    readonly highlightedLabel: string | null;
     isUsingKeyboard: boolean;
     isCombobox: boolean;
-    bitsAttrs: SelectBitsAttrs;
     domContext: DOMContext;
     constructor(opts: SelectBaseRootStateProps);
     setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
@@ -51,17 +51,18 @@ declare class SelectBaseRootState {
     handleOpen(): void;
     handleClose(): void;
     toggleMenu(): void;
+    getBitsAttr: typeof selectAttrs.getAttr;
 }
 type SelectSingleRootStateProps = SelectBaseRootStateProps & WritableBoxedValues<{
     value: string;
 }>;
 declare class SelectSingleRootState extends SelectBaseRootState {
     readonly opts: SelectSingleRootStateProps;
-    isMulti: false;
-    hasValue: boolean;
-    currentLabel: string;
-    candidateLabels: string[];
-    dataTypeaheadEnabled: boolean;
+    readonly isMulti: false;
+    readonly hasValue: boolean;
+    readonly currentLabel: string;
+    readonly candidateLabels: string[];
+    readonly dataTypeaheadEnabled: boolean;
     constructor(opts: SelectSingleRootStateProps);
     includesItem(itemValue: string): boolean;
     toggleItem(itemValue: string, itemLabel?: string): void;
@@ -72,8 +73,8 @@ type SelectMultipleRootStateProps = SelectBaseRootStateProps & WritableBoxedValu
 }>;
 declare class SelectMultipleRootState extends SelectBaseRootState {
     readonly opts: SelectMultipleRootStateProps;
-    isMulti: true;
-    hasValue: boolean;
+    readonly isMulti: true;
+    readonly hasValue: boolean;
     constructor(opts: SelectMultipleRootStateProps);
     includesItem(itemValue: string): boolean;
     toggleItem(itemValue: string, itemLabel?: string): void;
@@ -89,7 +90,7 @@ declare class SelectInputState {
     constructor(opts: SelectInputStateProps, root: SelectRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     oninput(e: BitsEvent<Event, HTMLInputElement>): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "combobox";
         readonly disabled: true | undefined;
@@ -113,7 +114,7 @@ declare class SelectComboTriggerState {
      * behavior of focusing the button and keep focus on the input.
      */
     onpointerdown(e: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
@@ -133,7 +134,7 @@ declare class SelectTriggerState {
     onclick(e: BitsMouseEvent): void;
     onpointerdown(e: BitsPointerEvent): void;
     onpointerup(e: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
@@ -165,10 +166,10 @@ declare class SelectContentState {
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
     onCloseAutoFocus: (e: Event) => void;
-    snippetProps: {
+    readonly snippetProps: {
         open: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "listbox";
         readonly "aria-multiselectable": "true" | undefined;
@@ -182,7 +183,7 @@ declare class SelectContentState {
         };
         readonly onpointermove: (_: BitsPointerEvent) => void;
     };
-    popperProps: {
+    readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;
         onEscapeKeydown: (e: KeyboardEvent) => void;
         onOpenAutoFocus: (e: Event) => void;
@@ -202,9 +203,9 @@ type SelectItemStateProps = WithRefProps<ReadableBoxedValues<{
 declare class SelectItemState {
     readonly opts: SelectItemStateProps;
     readonly root: SelectRootState;
-    isSelected: boolean;
-    isHighlighted: boolean;
-    prevHighlighted: Previous<boolean>;
+    readonly isSelected: boolean;
+    readonly isHighlighted: boolean;
+    readonly prevHighlighted: Previous<boolean>;
     mounted: boolean;
     constructor(opts: SelectItemStateProps, root: SelectRootState);
     handleSelect(): void;
@@ -240,7 +241,7 @@ declare class SelectGroupState {
     readonly root: SelectBaseRootState;
     labelNode: HTMLElement | null;
     constructor(opts: SelectGroupStateProps, root: SelectBaseRootState);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
@@ -251,7 +252,7 @@ declare class SelectGroupHeadingState {
     readonly opts: SelectGroupHeadingStateProps;
     readonly group: SelectGroupState;
     constructor(opts: SelectGroupHeadingStateProps, group: SelectGroupState);
-    props: {
+    readonly props: {
         readonly id: string;
     };
 }
@@ -264,7 +265,7 @@ declare class SelectHiddenInputState {
     shouldRender: boolean;
     constructor(opts: SelectHiddenInputStateProps, root: SelectBaseRootState);
     onfocus(e: BitsFocusEvent): void;
-    props: {
+    readonly props: {
         readonly disabled: true | undefined;
         readonly required: true | undefined;
         readonly name: string;
@@ -279,7 +280,7 @@ declare class SelectViewportState {
     root: SelectBaseRootState;
     prevScrollTop: number;
     constructor(opts: SelectViewportStateProps, content: SelectContentState);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "presentation";
         readonly style: {
@@ -307,7 +308,7 @@ declare class SelectScrollButtonImplState {
     onpointerdown(_: BitsPointerEvent): void;
     onpointermove(e: BitsPointerEvent): void;
     onpointerleave(_: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "aria-hidden": "true" | undefined;
         readonly style: {
@@ -331,7 +332,7 @@ declare class SelectScrollDownButtonState {
      */
     handleScroll: (manual?: boolean) => void;
     handleAutoScroll: () => void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "aria-hidden": "true" | undefined;
         readonly style: {
@@ -354,7 +355,7 @@ declare class SelectScrollUpButtonState {
      */
     handleScroll: (manual?: boolean) => void;
     handleAutoScroll: () => void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "aria-hidden": "true" | undefined;
         readonly style: {
@@ -398,7 +399,4 @@ export declare function useSelectScrollDownButton(props: SelectScrollButtonImplS
 export declare function useSelectGroup(props: SelectGroupStateProps): SelectGroupState;
 export declare function useSelectGroupHeading(props: SelectGroupHeadingStateProps): SelectGroupHeadingState;
 export declare function useSelectHiddenInput(props: SelectHiddenInputStateProps): SelectHiddenInputState;
-declare const selectParts: readonly ["trigger", "content", "item", "viewport", "scroll-up-button", "scroll-down-button", "group", "group-label", "separator", "arrow", "input", "content-wrapper", "item-text", "value"];
-type SelectBitsAttrs = Record<(typeof selectParts)[number], string>;
-export declare function getSelectBitsAttrs(root: SelectBaseRootState): SelectBitsAttrs;
 export {};

package/dist/bits/select/select.svelte.js

@@ -8,6 +8,8 @@ import { noop } from "../../internal/noop.js";
 import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
 import { useDataTypeahead } from "../../internal/use-data-typeahead.svelte.js";
 import { isIOS } from "../../internal/is.js";
+import { createBitsAttrs } from "../../internal/attrs.js";
+import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte.js";
 // prettier-ignore
 export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
 export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
@@ -15,6 +17,25 @@ export const LAST_KEYS = [kbd.ARROW_UP, kbd.PAGE_DOWN, kbd.END];
 export const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
 export const SELECTION_KEYS = [kbd.ENTER, kbd.SPACE];
 export const CONTENT_MARGIN = 10;
+const selectAttrs = createBitsAttrs({
+    component: "select",
+    parts: [
+        "trigger",
+        "content",
+        "item",
+        "viewport",
+        "scroll-up-button",
+        "scroll-down-button",
+        "group",
+        "group-label",
+        "separator",
+        "arrow",
+        "input",
+        "content-wrapper",
+        "item-text",
+        "value",
+    ],
+});
 class SelectBaseRootState {
     opts;
     touchedInput = $state(false);
@@ -40,12 +61,10 @@ class SelectBaseRootState {
     });
     isUsingKeyboard = false;
     isCombobox = false;
-    bitsAttrs;
     domContext = new DOMContext(() => null);
     constructor(opts) {
         this.opts = opts;
         this.isCombobox = opts.isCombobox;
-        this.bitsAttrs = getSelectBitsAttrs(this);
         $effect.pre(() => {
             if (!this.opts.open.current) {
                 this.setHighlightedNode(null);
@@ -62,7 +81,7 @@ class SelectBaseRootState {
         const node = this.contentNode;
         if (!node)
             return [];
-        return Array.from(node.querySelectorAll(`[${this.bitsAttrs.item}]:not([data-disabled])`));
+        return Array.from(node.querySelectorAll(`[${this.getBitsAttr("item")}]:not([data-disabled])`));
     }
     setHighlightedToFirstCandidate() {
         this.setHighlightedNode(null);
@@ -91,6 +110,9 @@ class SelectBaseRootState {
     toggleMenu() {
         this.toggleOpen();
     }
+    getBitsAttr = (part) => {
+        return selectAttrs.getAttr(part, this.isCombobox ? "combobox" : undefined);
+    };
 }
 class SelectSingleRootState extends SelectBaseRootState {
     opts;
@@ -338,7 +360,7 @@ class SelectInputState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         onkeydown: this.onkeydown,
         oninput: this.oninput,
-        [this.root.bitsAttrs.input]: "",
+        [this.root.getBitsAttr("input")]: "",
         ...attachRef(this.opts.ref, (v) => (this.root.inputNode = v)),
     }));
 }
@@ -381,7 +403,7 @@ class SelectComboTriggerState {
         "aria-haspopup": "listbox",
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        [this.root.bitsAttrs.trigger]: "",
+        [this.root.getBitsAttr("trigger")]: "",
         onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
         ...attachRef(this.opts.ref),
@@ -612,7 +634,7 @@ class SelectTriggerState {
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-placeholder": this.root.hasValue ? undefined : "",
-        [this.root.bitsAttrs.trigger]: "",
+        [this.root.getBitsAttr("trigger")]: "",
         onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
         onclick: this.onclick,
@@ -648,14 +670,7 @@ class SelectContentState {
         this.root.isUsingKeyboard = false;
     }
     #styles = $derived.by(() => {
-        const prefix = this.root.isCombobox ? "--bits-combobox" : "--bits-select";
-        return {
-            [`${prefix}-content-transform-origin`]: "var(--bits-floating-transform-origin)",
-            [`${prefix}-content-available-width`]: "var(--bits-floating-available-width)",
-            [`${prefix}-content-available-height`]: "var(--bits-floating-available-height)",
-            [`${prefix}-anchor-width`]: " var(--bits-floating-anchor-width)",
-            [`${prefix}-anchor-height`]: "var(--bits-floating-anchor-height)",
-        };
+        return getFloatingContentCSSVars(this.root.isCombobox ? "combobox" : "select");
     });
     onInteractOutside = (e) => {
         if (e.target === this.root.triggerNode || e.target === this.root.inputNode) {
@@ -685,7 +700,7 @@ class SelectContentState {
         role: "listbox",
         "aria-multiselectable": this.root.isMulti ? "true" : undefined,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        [this.root.bitsAttrs.content]: "",
+        [this.root.getBitsAttr("content")]: "",
         style: {
             display: "flex",
             flexDirection: "column",
@@ -822,7 +837,7 @@ class SelectItemState {
             : undefined,
         "data-selected": this.root.includesItem(this.opts.value.current) ? "" : undefined,
         "data-label": this.opts.label.current,
-        [this.root.bitsAttrs.item]: "",
+        [this.root.getBitsAttr("item")]: "",
         onpointermove: this.onpointermove,
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
@@ -840,7 +855,7 @@ class SelectGroupState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
-        [this.root.bitsAttrs.group]: "",
+        [this.root.getBitsAttr("group")]: "",
         "aria-labelledby": this.labelNode?.id ?? undefined,
         ...attachRef(this.opts.ref),
     }));
@@ -854,7 +869,7 @@ class SelectGroupHeadingState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.group.root.bitsAttrs["group-label"]]: "",
+        [this.group.root.getBitsAttr("group-label")]: "",
         ...attachRef(this.opts.ref, (v) => (this.group.labelNode = v)),
     }));
 }
@@ -897,7 +912,7 @@ class SelectViewportState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "presentation",
-        [this.root.bitsAttrs.viewport]: "",
+        [this.root.getBitsAttr("viewport")]: "",
         style: {
             // we use position: 'relative' here on the `viewport` so that when we call
             // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
@@ -1032,7 +1047,7 @@ class SelectScrollDownButtonState {
     };
     props = $derived.by(() => ({
         ...this.scrollButtonState.props,
-        [this.root.bitsAttrs["scroll-down-button"]]: "",
+        [this.root.getBitsAttr("scroll-down-button")]: "",
     }));
 }
 class SelectScrollUpButtonState {
@@ -1073,7 +1088,7 @@ class SelectScrollUpButtonState {
     };
     props = $derived.by(() => ({
         ...this.scrollButtonState.props,
-        [this.root.bitsAttrs["scroll-up-button"]]: "",
+        [this.root.getBitsAttr("scroll-up-button")]: "",
     }));
 }
 const SelectRootContext = new Context("Select.Root | Combobox.Root");
@@ -1119,30 +1134,3 @@ export function useSelectGroupHeading(props) {
 export function useSelectHiddenInput(props) {
     return new SelectHiddenInputState(props, SelectRootContext.get());
 }
-////////////////////////////////////
-// Helpers
-////////////////////////////////////
-const selectParts = [
-    "trigger",
-    "content",
-    "item",
-    "viewport",
-    "scroll-up-button",
-    "scroll-down-button",
-    "group",
-    "group-label",
-    "separator",
-    "arrow",
-    "input",
-    "content-wrapper",
-    "item-text",
-    "value",
-];
-export function getSelectBitsAttrs(root) {
-    const isCombobox = root.isCombobox;
-    const attrObj = {};
-    for (const part of selectParts) {
-        attrObj[part] = isCombobox ? `data-combobox-${part}` : `data-select-${part}`;
-    }
-    return attrObj;
-}

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

@@ -8,13 +8,12 @@ type SeparatorRootStateProps = WithRefProps<ReadableBoxedValues<{
 declare class SeparatorRootState {
     readonly opts: SeparatorRootStateProps;
     constructor(opts: SeparatorRootStateProps);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "none" | "separator";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "aria-hidden": "true" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-separator-root": "";
     };
 }
 export declare function useSeparatorRoot(props: SeparatorRootStateProps): SeparatorRootState;