bits-ui 2.3.0 → 2.4.0

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -7,7 +7,7 @@ import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { useId } from "../../shared/index.js";
-import { getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
 import { noop } from "../../internal/noop.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { kbd } from "../../internal/kbd.js";
@@ -17,16 +17,21 @@ import { useArrowNavigation } from "../../internal/use-arrow-navigation.js";
 import { boxAutoReset } from "../../internal/box-auto-reset.svelte.js";
 import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
 import { isElement } from "../../internal/is.js";
-const NAVIGATION_MENU_ROOT_ATTR = "data-navigation-menu-root";
-const NAVIGATION_MENU_ATTR = "data-navigation-menu";
-const NAVIGATION_MENU_SUB_ATTR = "data-navigation-menu-sub";
-const NAVIGATION_MENU_ITEM_ATTR = "data-navigation-menu-item";
-const NAVIGATION_MENU_INDICATOR_ATTR = "data-navigation-menu-indicator";
-const NAVIGATION_MENU_LIST_ATTR = "data-navigation-menu-list";
-const NAVIGATION_MENU_TRIGGER_ATTR = "data-navigation-menu-trigger";
-const NAVIGATION_MENU_CONTENT_ATTR = "data-navigation-menu-content";
-const NAVIGATION_MENU_LINK_ATTR = "data-navigation-menu-link";
-const NAVIGATION_MENU_VIEWPORT_ATTR = "data-navigation-menu-viewport";
+const navigationMenuAttrs = createBitsAttrs({
+    component: "navigation-menu",
+    parts: [
+        "root",
+        "sub",
+        "item",
+        "list",
+        "trigger",
+        "content",
+        "link",
+        "viewport",
+        "menu",
+        "indicator",
+    ],
+});
 class NavigationMenuProviderState {
     opts;
     indicatorTrackRef = box(null);
@@ -135,8 +140,8 @@ class NavigationMenuRootState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         dir: this.opts.dir.current,
-        [NAVIGATION_MENU_ROOT_ATTR]: "",
-        [NAVIGATION_MENU_ATTR]: "",
+        [navigationMenuAttrs.root]: "",
+        [navigationMenuAttrs.menu]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -173,8 +178,8 @@ class NavigationMenuSubState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
-        [NAVIGATION_MENU_SUB_ATTR]: "",
-        [NAVIGATION_MENU_ATTR]: "",
+        [navigationMenuAttrs.sub]: "",
+        [navigationMenuAttrs.menu]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -191,7 +196,7 @@ class NavigationMenuListState {
         this.context = context;
         this.rovingFocusGroup = useRovingFocus({
             rootNode: opts.ref,
-            candidateSelector: `[${NAVIGATION_MENU_TRIGGER_ATTR}]:not([data-disabled]), [${NAVIGATION_MENU_LINK_ATTR}]:not([data-disabled])`,
+            candidateSelector: `${navigationMenuAttrs.selector("trigger")}:not([data-disabled]), ${navigationMenuAttrs.selector("link")}:not([data-disabled])`,
             loop: box.with(() => false),
             orientation: this.context.opts.orientation,
         });
@@ -210,7 +215,7 @@ class NavigationMenuListState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.context.opts.orientation.current),
-        [NAVIGATION_MENU_LIST_ATTR]: "",
+        [navigationMenuAttrs.list]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -254,7 +259,7 @@ export class NavigationMenuItemState {
     onContentFocusOutside = this.#handleContentExit;
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [NAVIGATION_MENU_ITEM_ATTR]: "",
+        [navigationMenuAttrs.item]: "",
     }));
 }
 class NavigationMenuTriggerState {
@@ -347,7 +352,7 @@ class NavigationMenuTriggerState {
         "data-value": this.itemContext.opts.value.current,
         "aria-expanded": getAriaExpanded(this.open),
         "aria-controls": this.itemContext.contentId,
-        [NAVIGATION_MENU_TRIGGER_ATTR]: "",
+        [navigationMenuAttrs.trigger]: "",
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
         onpointerenter: this.onpointerenter,
@@ -428,7 +433,7 @@ class NavigationMenuLinkState {
         onblur: this.onblur,
         onpointerenter: this.onpointerenter,
         onpointermove: this.onpointermove,
-        [NAVIGATION_MENU_LINK_ATTR]: "",
+        [navigationMenuAttrs.link]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -489,7 +494,7 @@ class NavigationMenuIndicatorImplState {
                     transform: `translateY(${this.position?.offset}px)`,
                 }),
         },
-        [NAVIGATION_MENU_INDICATOR_ATTR]: "",
+        [navigationMenuAttrs.indicator]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -632,7 +637,7 @@ class NavigationMenuContentImplState {
         const target = e.target;
         if (!isElement(target))
             return;
-        if (target.closest(`[${NAVIGATION_MENU_ATTR}]`) !==
+        if (target.closest(navigationMenuAttrs.selector("menu")) !==
             this.context.opts.rootNavigationMenuRef.current)
             return;
         const isMetaKey = e.altKey || e.ctrlKey || e.metaKey;
@@ -669,7 +674,7 @@ class NavigationMenuContentImplState {
             return;
         const newSelectedElement = useArrowNavigation(e, activeEl, undefined, {
             itemsArray: candidates,
-            attributeName: `[${NAVIGATION_MENU_LINK_ATTR}]`,
+            candidateSelector: navigationMenuAttrs.selector("link"),
             loop: false,
             enableIgnoredElement: true,
         });
@@ -688,7 +693,7 @@ class NavigationMenuContentImplState {
         "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
         onkeydown: this.onkeydown,
-        [NAVIGATION_MENU_CONTENT_ATTR]: "",
+        [navigationMenuAttrs.content]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -745,7 +750,7 @@ class NavigationMenuViewportState {
             "--bits-navigation-menu-viewport-width": this.viewportWidth,
             "--bits-navigation-menu-viewport-height": this.viewportHeight,
         },
-        [NAVIGATION_MENU_VIEWPORT_ATTR]: "",
+        [navigationMenuAttrs.viewport]: "",
         onpointerenter: this.context.onContentEnter,
         onpointerleave: this.context.onContentLeave,
         ...attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v)),

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

@@ -38,7 +38,6 @@ declare class PaginationRootState {
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-pagination-root": "";
     };
 }
 type PaginationPageStateProps = WithRefProps<ReadableBoxedValues<{
@@ -57,7 +56,6 @@ declare class PaginationPageState {
         readonly "aria-label": `Page ${number}`;
         readonly "data-value": `${number}`;
         readonly "data-selected": "" | undefined;
-        readonly "data-pagination-page": "";
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
@@ -76,8 +74,6 @@ declare class PaginationButtonState {
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
-        readonly "data-pagination-prev": "" | undefined;
-        readonly "data-pagination-next": "" | undefined;
         readonly disabled: boolean;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;

package/dist/bits/pagination/pagination.svelte.js

@@ -1,14 +1,14 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getDataOrientation } from "../../internal/attrs.js";
+import { createBitsAttrs, getDataOrientation } from "../../internal/attrs.js";
 import { getElemDirection } from "../../internal/locale.js";
 import { kbd } from "../../internal/kbd.js";
 import { getDirectionalKeys } from "../../internal/get-directional-keys.js";
 import { useId } from "../../shared/index.js";
-const PAGINATION_ROOT_ATTR = "data-pagination-root";
-const PAGINATION_PAGE_ATTR = "data-pagination-page";
-const PAGINATION_PREV_ATTR = "data-pagination-prev";
-const PAGINATION_NEXT_ATTR = "data-pagination-next";
+const paginationAttrs = createBitsAttrs({
+    component: "pagination",
+    parts: ["root", "page", "prev", "next"],
+});
 class PaginationRootState {
     opts;
     totalPages = $derived.by(() => {
@@ -42,7 +42,7 @@ class PaginationRootState {
         const node = this.opts.ref.current;
         if (!node)
             return;
-        return node.querySelector(`[data-pagination-${type}]`);
+        return node.querySelector(paginationAttrs.selector(type));
     }
     hasPrevPage = $derived.by(() => this.opts.page.current > 1);
     hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
@@ -60,7 +60,7 @@ class PaginationRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
-        [PAGINATION_ROOT_ATTR]: "",
+        [paginationAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -95,7 +95,7 @@ class PaginationPageState {
         "aria-label": `Page ${this.opts.page.current.value}`,
         "data-value": `${this.opts.page.current.value}`,
         "data-selected": this.#isSelected ? "" : undefined,
-        [PAGINATION_PAGE_ATTR]: "",
+        [paginationAttrs.page]: "",
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
@@ -141,8 +141,7 @@ class PaginationButtonState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [PAGINATION_PREV_ATTR]: this.opts.type === "prev" ? "" : undefined,
-        [PAGINATION_NEXT_ATTR]: this.opts.type === "next" ? "" : undefined,
+        [paginationAttrs[this.opts.type]]: "",
         disabled: this.#isDisabled,
         //
         onclick: this.onclick,

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -27,7 +27,6 @@ declare class PinInputRootState {
     onkeydown: (e: BitsKeyboardEvent) => void;
     rootProps: {
         readonly id: string;
-        readonly "data-pin-input-root": "";
         readonly style: {
             position: string;
             cursor: string;
@@ -108,7 +107,6 @@ declare class PinInputCellState {
     constructor(opts: PinInputCellStateProps);
     props: {
         readonly id: string;
-        readonly "data-pin-input-cell": "";
         readonly "data-active": "" | undefined;
         readonly "data-inactive": "" | undefined;
     };

package/dist/bits/pin-input/pin-input.svelte.js

@@ -2,13 +2,15 @@ import { Previous, watch } from "runed";
 import { onMount } from "svelte";
 import { box, attachRef, DOMContext } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
-import { getDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, getDisabled } from "../../internal/attrs.js";
 import { on } from "svelte/events";
 export const REGEXP_ONLY_DIGITS = "^\\d+$";
 export const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
 export const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
-const ROOT_ATTR = "data-pin-input-root";
-const CELL_ATTR = "data-pin-input-cell";
+const pinInputAttrs = createBitsAttrs({
+    component: "pin-input",
+    parts: ["root", "cell"],
+});
 const KEYS_TO_IGNORE = [
     "Backspace",
     "Delete",
@@ -151,7 +153,7 @@ class PinInputRootState {
     }));
     rootProps = $derived.by(() => ({
         id: this.opts.id.current,
-        [ROOT_ATTR]: "",
+        [pinInputAttrs.root]: "",
         style: this.#rootStyles,
         ...attachRef(this.opts.ref),
     }));
@@ -394,7 +396,7 @@ class PinInputCellState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [CELL_ATTR]: "",
+        [pinInputAttrs.cell]: "",
         "data-active": this.opts.cell.current.isActive ? "" : undefined,
         "data-inactive": !this.opts.cell.current.isActive ? "" : undefined,
         ...attachRef(this.opts.ref),

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

@@ -28,7 +28,6 @@ declare class PopoverTriggerState {
         readonly "aria-expanded": "true" | "false";
         readonly "data-state": "open" | "closed";
         readonly "aria-controls": string | undefined;
-        readonly "data-popover-trigger": "";
         readonly disabled: boolean;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onclick: (e: BitsMouseEvent) => void;
@@ -53,7 +52,6 @@ declare class PopoverContentState {
         readonly id: string;
         readonly tabindex: -1;
         readonly "data-state": "open" | "closed";
-        readonly "data-popover-content": "";
         readonly style: {
             readonly pointerEvents: "auto";
         };
@@ -76,7 +74,6 @@ declare class PopoverCloseState {
         readonly onclick: (_: BitsPointerEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly type: "button";
-        readonly "data-popover-close": "";
     };
 }
 export declare function usePopoverRoot(props: PopoverRootStateProps): PopoverRootState;

package/dist/bits/popover/popover.svelte.js

@@ -1,8 +1,12 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
-import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement } from "../../internal/is.js";
+const popoverAttrs = createBitsAttrs({
+    component: "popover",
+    parts: ["root", "trigger", "content", "close"],
+});
 class PopoverRootState {
     opts;
     contentNode = $state(null);
@@ -55,7 +59,7 @@ class PopoverTriggerState {
         "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "aria-controls": this.#getAriaControls(),
-        "data-popover-trigger": "",
+        [popoverAttrs.trigger]: "",
         disabled: this.opts.disabled.current,
         //
         onkeydown: this.onkeydown,
@@ -76,7 +80,7 @@ class PopoverContentState {
             return;
         if (!isElement(e.target))
             return;
-        const closestTrigger = e.target.closest(`[data-popover-trigger]`);
+        const closestTrigger = e.target.closest(popoverAttrs.selector("trigger"));
         if (closestTrigger === this.root.triggerNode)
             return;
         this.root.handleClose();
@@ -99,7 +103,7 @@ class PopoverContentState {
         id: this.opts.id.current,
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        "data-popover-content": "",
+        [popoverAttrs.content]: "",
         style: {
             pointerEvents: "auto",
         },
@@ -134,7 +138,7 @@ class PopoverCloseState {
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         type: "button",
-        "data-popover-close": "",
+        [popoverAttrs.close]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -19,7 +19,6 @@ declare class ProgressRootState {
         readonly "data-max": number;
         readonly "data-min": number;
         readonly "data-indeterminate": "" | undefined;
-        readonly "data-progress-root": "";
     };
 }
 export declare function useProgressRootState(props: ProgressRootStateProps): ProgressRootState;

package/dist/bits/progress/progress.svelte.js

@@ -1,5 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-const ROOT_ATTR = "data-progress-root";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const progressAttrs = createBitsAttrs({
+    component: "progress",
+    parts: ["root"],
+});
 class ProgressRootState {
     opts;
     constructor(opts) {
@@ -16,7 +20,7 @@ class ProgressRootState {
         "data-max": this.opts.max.current,
         "data-min": this.opts.min.current,
         "data-indeterminate": this.opts.value.current === null ? "" : undefined,
-        [ROOT_ATTR]: "",
+        [progressAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -13,18 +13,17 @@ type RadioGroupRootStateProps = WithRefProps<ReadableBoxedValues<{
 }>>;
 declare class RadioGroupRootState {
     readonly opts: RadioGroupRootStateProps;
+    readonly hasValue: boolean;
     rovingFocusGroup: UseRovingFocusReturn;
-    hasValue: boolean;
     constructor(opts: RadioGroupRootStateProps);
     isChecked(value: string): boolean;
     setValue(value: string): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "radiogroup";
         readonly "aria-required": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": Orientation;
-        readonly "data-radio-group-root": "";
     };
 }
 type RadioGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
@@ -35,15 +34,15 @@ declare class RadioGroupItemState {
     #private;
     readonly opts: RadioGroupItemStateProps;
     readonly root: RadioGroupRootState;
-    checked: boolean;
+    readonly checked: boolean;
     constructor(opts: RadioGroupItemStateProps, root: RadioGroupRootState);
     onclick(_: BitsMouseEvent): void;
     onfocus(_: BitsFocusEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    snippetProps: {
+    readonly snippetProps: {
         checked: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "data-value": string;
@@ -51,7 +50,6 @@ declare class RadioGroupItemState {
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "checked" | "unchecked";
         readonly "aria-checked": "true" | "false" | "mixed";
-        readonly "data-radio-group-item": "";
         readonly type: "button";
         readonly role: "radio";
         readonly tabindex: number;
@@ -62,8 +60,8 @@ declare class RadioGroupItemState {
 }
 declare class RadioGroupInputState {
     readonly root: RadioGroupRootState;
-    shouldRender: boolean;
-    props: {
+    readonly shouldRender: boolean;
+    readonly props: {
         readonly name: string | undefined;
         readonly value: string;
         readonly required: boolean;

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

@@ -1,19 +1,21 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, getAriaRequired, getDataDisabled, } from "../../internal/attrs.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
-const RADIO_GROUP_ROOT_ATTR = "data-radio-group-root";
-const RADIO_GROUP_ITEM_ATTR = "data-radio-group-item";
+const radioGroupAttrs = createBitsAttrs({
+    component: "radio-group",
+    parts: ["root", "item"],
+});
 class RadioGroupRootState {
     opts;
-    rovingFocusGroup;
     hasValue = $derived.by(() => this.opts.value.current !== "");
+    rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
             rootNode: this.opts.ref,
-            candidateAttr: RADIO_GROUP_ITEM_ATTR,
+            candidateAttr: radioGroupAttrs.item,
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
@@ -30,7 +32,7 @@ class RadioGroupRootState {
         "aria-required": getAriaRequired(this.opts.required.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-orientation": this.opts.orientation.current,
-        [RADIO_GROUP_ROOT_ATTR]: "",
+        [radioGroupAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -93,7 +95,7 @@ class RadioGroupItemState {
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-state": this.#isChecked ? "checked" : "unchecked",
         "aria-checked": getAriaChecked(this.#isChecked, false),
-        [RADIO_GROUP_ITEM_ATTR]: "",
+        [radioGroupAttrs.item]: "",
         type: "button",
         role: "radio",
         tabindex: this.#tabIndex,
@@ -104,9 +106,6 @@ class RadioGroupItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-//
-// INPUT
-//
 class RadioGroupInputState {
     root;
     shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);

package/dist/bits/range-calendar/components/range-calendar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { type DateValue } from "@internationalized/date";
 	import type { RangeCalendarRootProps } from "../types.js";
@@ -6,7 +7,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	const uid = $props.id();
 
@@ -26,7 +27,7 @@
 		isDateUnavailable = () => false,
 		fixedWeeks = false,
 		numberOfMonths = 1,
-		locale = "en",
+		locale,
 		calendarLabel = "Event",
 		disabled = false,
 		readonly = false,
@@ -107,7 +108,7 @@
 		weekStartsOn: box.with(() => weekStartsOn),
 		weekdayFormat: box.with(() => weekdayFormat),
 		numberOfMonths: box.with(() => numberOfMonths),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		calendarLabel: box.with(() => calendarLabel),
 		fixedWeeks: box.with(() => fixedWeeks),
 		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),