bits-ui 2.3.0 → 2.4.0

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),
@@ -420,7 +442,7 @@ class SelectTriggerState {
                     return;
                 this.root.opts.value.current = matchedItem.value;
             },
-            enabled: !this.root.isMulti && this.root.dataTypeaheadEnabled,
+            enabled: () => !this.root.isMulti && this.root.dataTypeaheadEnabled,
             candidateValues: () => (this.root.isMulti ? [] : this.root.candidateLabels),
             getWindow: () => this.root.domContext.getWindow(),
         });
@@ -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;

package/dist/bits/separator/separator.svelte.js

@@ -1,6 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-import { getAriaHidden, getAriaOrientation, getDataOrientation } from "../../internal/attrs.js";
-const SEPARATOR_ROOT_ATTR = "data-separator-root";
+import { createBitsAttrs, getAriaHidden, getAriaOrientation, getDataOrientation, } from "../../internal/attrs.js";
+const separatorAttrs = createBitsAttrs({
+    component: "separator",
+    parts: ["root"],
+});
 class SeparatorRootState {
     opts;
     constructor(opts) {
@@ -12,7 +15,7 @@ class SeparatorRootState {
         "aria-orientation": getAriaOrientation(this.opts.orientation.current),
         "aria-hidden": getAriaHidden(this.opts.decorative.current),
         "data-orientation": getDataOrientation(this.opts.orientation.current),
-        [SEPARATOR_ROOT_ATTR]: "",
+        [separatorAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -4,6 +4,7 @@ import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/bo
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
 import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
 import type { SliderLabelPosition } from "./types.js";
+declare const sliderAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "thumb", "range", "tick", "tick-label", "thumb-label"]>;
 type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
@@ -33,7 +34,6 @@ declare class SliderBaseRootState {
         readonly style: {
             readonly touchAction: string | undefined;
         };
-        readonly "data-slider-root": "";
     };
 }
 type SliderSingleRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
@@ -56,6 +56,7 @@ declare class SliderSingleRootState extends SliderBaseRootState {
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
     thumbsPropsArr: {
+        readonly [sliderAttrs.thumb]: "";
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
@@ -65,17 +66,16 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         readonly "data-value": number;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb": "";
     }[];
     thumbsRenderArr: number[];
     ticksPropsArr: {
+        readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly "data-selected": "" | undefined;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick": "";
     }[];
     ticksRenderArr: number[];
     tickItemsArr: {
@@ -127,7 +127,8 @@ declare class SliderMultiRootState extends SliderBaseRootState {
     handlePointerUp: () => void;
     getAllThumbs: () => HTMLElement[];
     updateValue: (thumbValue: number, idx: number) => void;
-    thumbsPropsArr: {
+    readonly thumbsPropsArr: {
+        readonly [sliderAttrs.thumb]: "";
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
@@ -137,27 +138,26 @@ declare class SliderMultiRootState extends SliderBaseRootState {
         readonly "data-value": number | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb": "";
     }[];
-    thumbsRenderArr: number[];
-    ticksPropsArr: {
+    readonly thumbsRenderArr: number[];
+    readonly ticksPropsArr: {
+        readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick": "";
     }[];
-    ticksRenderArr: number[];
-    tickItemsArr: {
+    readonly ticksRenderArr: number[];
+    readonly tickItemsArr: {
         value: number;
         index: number;
     }[];
-    thumbItemsArr: {
+    readonly thumbItemsArr: {
         value: number;
         index: number;
     }[];
-    snippetProps: {
+    readonly snippetProps: {
         readonly ticks: number[];
         readonly thumbs: number[];
         readonly tickItems: {
@@ -175,7 +175,7 @@ declare class SliderRangeState {
     readonly opts: SliderRangeStateProps;
     readonly root: SliderRootState;
     constructor(opts: SliderRangeStateProps, root: SliderRootState);
-    rangeStyles: {
+    readonly rangeStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
         alignContent?: import("csstype").Property.AlignContent | undefined;
         alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -1002,7 +1002,7 @@ declare class SliderRangeState {
         textAnchor?: import("csstype").Property.TextAnchor | undefined;
         vectorEffect?: import("csstype").Property.VectorEffect | undefined;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
@@ -1833,7 +1833,6 @@ declare class SliderRangeState {
             textAnchor?: import("csstype").Property.TextAnchor | undefined;
             vectorEffect?: import("csstype").Property.VectorEffect | undefined;
         };
-        readonly "data-slider-range": "";
     };
 }
 type SliderThumbStateProps = WithRefProps & ReadableBoxedValues<{
@@ -1846,7 +1845,7 @@ declare class SliderThumbState {
     readonly root: SliderRootState;
     constructor(opts: SliderThumbStateProps, root: SliderRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly "data-active": "" | undefined;
@@ -1861,7 +1860,6 @@ declare class SliderThumbState {
         readonly "data-value": number;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb": "";
     } | {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
@@ -1877,7 +1875,6 @@ declare class SliderThumbState {
         readonly "data-value": number | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb": "";
     };
 }
 type SliderTickStateProps = WithRefProps & ReadableBoxedValues<{
@@ -1887,7 +1884,7 @@ declare class SliderTickState {
     readonly opts: SliderTickStateProps;
     readonly root: SliderRootState;
     constructor(opts: SliderTickStateProps, root: SliderRootState);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -1895,7 +1892,6 @@ declare class SliderTickState {
         readonly "data-value": number;
         readonly "data-selected": "" | undefined;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick": "";
     } | {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
@@ -1903,7 +1899,6 @@ declare class SliderTickState {
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick": "";
     };
 }
 type SliderTickLabelStateProps = WithRefProps & ReadableBoxedValues<{
@@ -1914,7 +1909,7 @@ declare class SliderTickLabelState {
     readonly opts: SliderTickLabelStateProps;
     readonly root: SliderRootState;
     constructor(opts: SliderTickLabelStateProps, root: SliderRootState);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
@@ -1923,7 +1918,6 @@ declare class SliderTickLabelState {
         readonly "data-selected": "" | undefined;
         readonly "data-position": SliderLabelPosition;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick-label": "";
     };
 }
 type SliderThumbLabelStateProps = WithRefProps & ReadableBoxedValues<{
@@ -1942,7 +1936,6 @@ declare class SliderThumbLabelState {
         readonly "data-active": "" | undefined;
         readonly "data-position": SliderLabelPosition;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb-label": "";
     };
 }
 type SliderRootState = SliderSingleRootState | SliderMultiRootState;