bits-ui 2.3.0 → 2.3.1

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

@@ -1,5 +1,6 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+export declare const toggleAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root"]>;
 type ToggleRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
 }> & WritableBoxedValues<{
@@ -10,11 +11,10 @@ declare class ToggleRootState {
     readonly opts: ToggleRootStateProps;
     constructor(opts: ToggleRootStateProps);
     onclick(_: BitsMouseEvent): void;
-    snippetProps: {
+    readonly snippetProps: {
         pressed: boolean;
     };
-    props: {
-        readonly "data-toggle-root": "";
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "aria-pressed": "true" | "false";

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

@@ -1,6 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-import { getAriaPressed, getDataDisabled, getDisabled } from "../../internal/attrs.js";
-const TOGGLE_ROOT_ATTR = "data-toggle-root";
+import { createBitsAttrs, getAriaPressed, getDataDisabled, getDisabled, } from "../../internal/attrs.js";
+export const toggleAttrs = createBitsAttrs({
+    component: "toggle",
+    parts: ["root"],
+});
 class ToggleRootState {
     opts;
     constructor(opts) {
@@ -21,7 +24,7 @@ class ToggleRootState {
         pressed: this.opts.pressed.current,
     }));
     props = $derived.by(() => ({
-        [TOGGLE_ROOT_ATTR]: "",
+        [toggleAttrs.root]: "",
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "aria-pressed": getAriaPressed(this.opts.pressed.current),

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

@@ -3,6 +3,7 @@ import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/bo
 import type { Orientation } from "../../shared/index.js";
 import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+export declare const toggleGroupAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "item"]>;
 type ToggleGroupBaseStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     rovingFocus: boolean;
@@ -15,7 +16,6 @@ declare class ToggleGroupBaseState {
     constructor(opts: ToggleGroupBaseStateProps);
     props: {
         readonly id: string;
-        readonly "data-toggle-group-root": "";
         readonly role: "group";
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
@@ -70,7 +70,6 @@ declare class ToggleGroupItemState {
         readonly "aria-pressed": "true" | "false" | undefined;
         readonly "aria-checked": "true" | "false" | "mixed" | undefined;
         readonly disabled: true | undefined;
-        readonly "data-toggle-group-item": "";
         readonly onclick: (_: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };

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

@@ -1,17 +1,19 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
-const TOGGLE_GROUP_ROOT_ATTR = "data-toggle-group-root";
-const TOGGLE_GROUP_ITEM_ATTR = "data-toggle-group-item";
+export const toggleGroupAttrs = createBitsAttrs({
+    component: "toggle-group",
+    parts: ["root", "item"],
+});
 class ToggleGroupBaseState {
     opts;
     rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
-            candidateAttr: TOGGLE_GROUP_ITEM_ATTR,
+            candidateAttr: toggleGroupAttrs.item,
             rootNode: opts.ref,
             loop: opts.loop,
             orientation: opts.orientation,
@@ -19,7 +21,7 @@ class ToggleGroupBaseState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [TOGGLE_GROUP_ROOT_ATTR]: "",
+        [toggleGroupAttrs.root]: "",
         role: "group",
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
@@ -130,7 +132,7 @@ class ToggleGroupItemState {
         "aria-pressed": this.#ariaPressed,
         "aria-checked": this.#ariaChecked,
         disabled: getDisabled(this.#isDisabled),
-        [TOGGLE_GROUP_ITEM_ATTR]: "",
+        [toggleGroupAttrs.item]: "",
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,

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

@@ -3,6 +3,7 @@ import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/bo
 import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Orientation } from "../../shared/index.js";
 import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+export declare const toolbarAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "item", "group", "group-item", "link", "button"]>;
 type ToolbarRootStateProps = WithRefProps<ReadableBoxedValues<{
     orientation: Orientation;
     loop: boolean;
@@ -11,11 +12,10 @@ declare class ToolbarRootState {
     readonly opts: ToolbarRootStateProps;
     rovingFocusGroup: UseRovingFocusReturn;
     constructor(opts: ToolbarRootStateProps);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "toolbar";
         readonly "data-orientation": Orientation;
-        readonly "data-toolbar-root": "";
     };
 }
 type ToolbarGroupBaseStateProps = WithRefProps<ReadableBoxedValues<{
@@ -25,9 +25,8 @@ declare class ToolbarGroupBaseState {
     readonly opts: ToolbarGroupBaseStateProps;
     readonly root: ToolbarRootState;
     constructor(opts: ToolbarGroupBaseStateProps, root: ToolbarRootState);
-    props: {
+    readonly props: {
         readonly id: string;
-        readonly "data-toolbar-group": "";
         readonly role: "group";
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
@@ -39,8 +38,8 @@ type ToolbarGroupSingleStateProps = ToolbarGroupBaseStateProps & WritableBoxedVa
 declare class ToolbarGroupSingleState extends ToolbarGroupBaseState {
     readonly opts: ToolbarGroupSingleStateProps;
     readonly root: ToolbarRootState;
-    isMulti: boolean;
-    anyPressed: boolean;
+    readonly isMulti: false;
+    readonly anyPressed: boolean;
     constructor(opts: ToolbarGroupSingleStateProps, root: ToolbarRootState);
     includesItem(item: string): boolean;
     toggleItem(item: string): void;
@@ -51,8 +50,8 @@ type ToolbarGroupMultipleStateProps = ToolbarGroupBaseStateProps & WritableBoxed
 declare class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
     readonly opts: ToolbarGroupMultipleStateProps;
     readonly root: ToolbarRootState;
-    isMulti: boolean;
-    anyPressed: boolean;
+    readonly isMulti: true;
+    readonly anyPressed: boolean;
     constructor(opts: ToolbarGroupMultipleStateProps, root: ToolbarRootState);
     includesItem(item: string): boolean;
     toggleItem(item: string): void;
@@ -70,8 +69,8 @@ declare class ToolbarGroupItemState {
     constructor(opts: ToolbarGroupItemStateProps, group: ToolbarGroupState, root: ToolbarRootState);
     onclick(_: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    isPressed: boolean;
-    props: {
+    readonly isPressed: boolean;
+    readonly props: {
         readonly id: string;
         readonly role: "radio" | undefined;
         readonly tabindex: number;
@@ -81,8 +80,6 @@ declare class ToolbarGroupItemState {
         readonly "data-value": string;
         readonly "aria-pressed": "true" | "false" | undefined;
         readonly "aria-checked": "true" | "false" | "mixed" | undefined;
-        readonly "data-toolbar-item": "";
-        readonly "data-toolbar-group-item": "";
         readonly disabled: true | undefined;
         readonly onclick: (_: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
@@ -95,10 +92,8 @@ declare class ToolbarLinkState {
     readonly root: ToolbarRootState;
     constructor(opts: ToolbarLinkStateProps, root: ToolbarRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
-        readonly "data-toolbar-link": "";
-        readonly "data-toolbar-item": "";
         readonly role: "link" | undefined;
         readonly tabindex: number;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -114,10 +109,8 @@ declare class ToolbarButtonState {
     readonly root: ToolbarRootState;
     constructor(opts: ToolbarButtonStateProps, root: ToolbarRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
-        readonly "data-toolbar-item": "";
-        readonly "data-toolbar-button": "";
         readonly role: "button" | undefined;
         readonly tabindex: number;
         readonly "data-disabled": "" | undefined;

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

@@ -1,15 +1,12 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
-const TOOLBAR_ROOT_ATTR = "data-toolbar-root";
-// all links, buttons, and items must have the ITEM_ATTR for roving focus
-const TOOLBAR_ITEM_ATTR = "data-toolbar-item";
-const TOOLBAR_GROUP_ATTR = "data-toolbar-group";
-const TOOLBAR_GROUP_ITEM_ATTR = "data-toolbar-group-item";
-const TOOLBAR_LINK_ATTR = "data-toolbar-link";
-const TOOLBAR_BUTTON_ATTR = "data-toolbar-button";
+export const toolbarAttrs = createBitsAttrs({
+    component: "toolbar",
+    parts: ["root", "item", "group", "group-item", "link", "button"],
+});
 class ToolbarRootState {
     opts;
     rovingFocusGroup;
@@ -19,14 +16,14 @@ class ToolbarRootState {
             orientation: this.opts.orientation,
             loop: this.opts.loop,
             rootNode: this.opts.ref,
-            candidateAttr: TOOLBAR_ITEM_ATTR,
+            candidateAttr: toolbarAttrs.item,
         });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "toolbar",
         "data-orientation": this.opts.orientation.current,
-        [TOOLBAR_ROOT_ATTR]: "",
+        [toolbarAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -39,7 +36,7 @@ class ToolbarGroupBaseState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [TOOLBAR_GROUP_ATTR]: "",
+        [toolbarAttrs.group]: "",
         role: "group",
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
@@ -143,8 +140,8 @@ class ToolbarGroupItemState {
         "data-value": this.opts.value.current,
         "aria-pressed": this.#ariaPressed,
         "aria-checked": this.#ariaChecked,
-        [TOOLBAR_ITEM_ATTR]: "",
-        [TOOLBAR_GROUP_ITEM_ATTR]: "",
+        [toolbarAttrs.item]: "",
+        [toolbarAttrs["group-item"]]: "",
         disabled: getDisabled(this.#isDisabled),
         //
         onclick: this.onclick,
@@ -177,8 +174,8 @@ class ToolbarLinkState {
     #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [TOOLBAR_LINK_ATTR]: "",
-        [TOOLBAR_ITEM_ATTR]: "",
+        [toolbarAttrs.link]: "",
+        [toolbarAttrs.item]: "",
         role: this.#role,
         tabindex: this.#tabIndex,
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
@@ -212,8 +209,8 @@ class ToolbarButtonState {
     });
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [TOOLBAR_ITEM_ATTR]: "",
-        [TOOLBAR_BUTTON_ATTR]: "",
+        [toolbarAttrs.item]: "",
+        [toolbarAttrs.button]: "",
         role: this.#role,
         tabindex: this.#tabIndex,
         "data-disabled": getDataDisabled(this.opts.disabled.current),

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

@@ -2,6 +2,7 @@ import { DOMContext } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
+export declare const tooltipAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["content", "trigger"]>;
 type TooltipProviderStateProps = ReadableBoxedValues<{
     delayDuration: number;
     disableHoverableContent: boolean;
@@ -33,14 +34,14 @@ declare class TooltipRootState {
     #private;
     readonly opts: TooltipRootStateProps;
     readonly provider: TooltipProviderState;
-    delayDuration: number;
-    disableHoverableContent: boolean;
-    disableCloseOnTriggerClick: boolean;
-    disabled: boolean;
-    ignoreNonKeyboardFocus: boolean;
+    readonly delayDuration: number;
+    readonly disableHoverableContent: boolean;
+    readonly disableCloseOnTriggerClick: boolean;
+    readonly disabled: boolean;
+    readonly ignoreNonKeyboardFocus: boolean;
     contentNode: HTMLElement | null;
     triggerNode: HTMLElement | null;
-    stateAttr: string;
+    readonly stateAttr: string;
     constructor(opts: TooltipRootStateProps, provider: TooltipProviderState);
     handleOpen: () => void;
     handleClose: () => void;
@@ -57,13 +58,12 @@ declare class TooltipTriggerState {
     domContext: DOMContext;
     constructor(opts: TooltipTriggerStateProps, root: TooltipRootState);
     handlePointerUp: () => void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "aria-describedby": string | undefined;
-        readonly "data-state": string;
+        readonly "data-state": "closed" | "delayed-open" | "instant-open";
         readonly "data-disabled": "" | undefined;
         readonly "data-delay-duration": `${number}`;
-        readonly "data-tooltip-trigger": "";
         readonly tabindex: 0 | undefined;
         readonly disabled: boolean;
         readonly onpointerup: PointerEventHandler<HTMLElement>;
@@ -87,20 +87,19 @@ declare class TooltipContentState {
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
     onCloseAutoFocus: (e: Event) => void;
-    snippetProps: {
+    readonly snippetProps: {
         open: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
-        readonly "data-state": string;
+        readonly "data-state": "closed" | "delayed-open" | "instant-open";
         readonly "data-disabled": "" | undefined;
         readonly style: {
             readonly pointerEvents: "auto";
             readonly outline: "none";
         };
-        readonly "data-tooltip-content": "";
     };
-    popperProps: {
+    readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;
         onEscapeKeydown: (e: KeyboardEvent) => void;
         onOpenAutoFocus: (e: Event) => void;

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

@@ -4,9 +4,11 @@ import { Context, watch } from "runed";
 import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
 import { isElement, isFocusVisible } from "../../internal/is.js";
 import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
-import { getDataDisabled } from "../../internal/attrs.js";
-const TOOLTIP_CONTENT_ATTR = "data-tooltip-content";
-const TOOLTIP_TRIGGER_ATTR = "data-tooltip-trigger";
+import { createBitsAttrs, getDataDisabled } from "../../internal/attrs.js";
+export const tooltipAttrs = createBitsAttrs({
+    component: "tooltip",
+    parts: ["content", "trigger"],
+});
 class TooltipProviderState {
     opts;
     isOpenDelayed = $state(true);
@@ -200,7 +202,7 @@ class TooltipTriggerState {
         "data-state": this.root.stateAttr,
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-delay-duration": `${this.root.delayDuration}`,
-        [TOOLTIP_TRIGGER_ATTR]: "",
+        [tooltipAttrs.trigger]: "",
         tabindex: this.#isDisabled ? undefined : 0,
         disabled: this.opts.disabled.current,
         onpointerup: this.#onpointerup,
@@ -275,7 +277,7 @@ class TooltipContentState {
             pointerEvents: "auto",
             outline: "none",
         },
-        [TOOLTIP_CONTENT_ATTR]: "",
+        [tooltipAttrs.content]: "",
         ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {

package/dist/internal/attrs.d.ts

@@ -20,3 +20,17 @@ export declare function getHidden(condition: boolean): true | undefined;
 export declare function getDisabled(condition: boolean): true | undefined;
 export declare function getAriaPressed(condition: boolean): "true" | "false";
 export declare function getRequired(condition: boolean): true | undefined;
+export type BitsAttrsConfig<T extends readonly string[]> = {
+    component: string;
+    parts: T;
+    getVariant?: () => string | null;
+};
+export type BitsAttrs<T extends readonly string[]> = {
+    [K in T[number]]: string;
+} & {
+    selector: (part: T[number]) => string;
+    getAttr: (part: T[number], variant?: string) => string;
+};
+export declare function createBitsAttrs<const T extends readonly string[]>(config: Omit<BitsAttrsConfig<T>, "parts"> & {
+    parts: T;
+}): BitsAttrs<T>;

package/dist/internal/attrs.js

@@ -67,3 +67,21 @@ export function getAriaPressed(condition) {
 export function getRequired(condition) {
     return condition ? true : undefined;
 }
+export function createBitsAttrs(config) {
+    const variant = config.getVariant?.();
+    const prefix = variant ? `data-${variant}-` : `data-${config.component}-`;
+    function getAttr(part, variantOverride) {
+        if (variantOverride)
+            return `data-${variantOverride}-${part}`;
+        return `${prefix}${part}`;
+    }
+    function selector(part, variantOverride) {
+        return `[${getAttr(part, variantOverride)}]`;
+    }
+    const attrs = Object.fromEntries(config.parts.map((part) => [part, getAttr(part)]));
+    return {
+        ...attrs,
+        selector,
+        getAttr,
+    };
+}

package/dist/internal/date-time/calendar-helpers.svelte.d.ts

@@ -198,4 +198,5 @@ export declare function useEnsureNonDisabledPlaceholder({ ref, placeholder, defa
     defaultPlaceholder: DateValue;
 }): void;
 export declare function getDateWithPreviousTime(date: DateValue | undefined, prev: DateValue | undefined): DateValue | undefined;
+export declare const calendarAttrs: import("../attrs.js").BitsAttrs<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading"]>;
 export {};

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -2,7 +2,7 @@ import { endOfMonth, isSameDay, isSameMonth, startOfMonth, } from "@internationa
 import { afterTick, getDocument, styleToString, } from "svelte-toolbelt";
 import { untrack } from "svelte";
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, hasTime, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from "./utils.js";
-import { getDataDisabled, getDataInvalid, getDataReadonly } from "../attrs.js";
+import { createBitsAttrs, getDataDisabled, getDataInvalid, getDataReadonly, } from "../attrs.js";
 import { chunk, isValidIndex } from "../arrays.js";
 import { isBrowser, isHTMLElement } from "../is.js";
 import { kbd } from "../kbd.js";
@@ -514,3 +514,20 @@ export function getDateWithPreviousTime(date, prev) {
     }
     return date;
 }
+export const calendarAttrs = createBitsAttrs({
+    component: "calendar",
+    parts: [
+        "root",
+        "grid",
+        "cell",
+        "next-button",
+        "prev-button",
+        "day",
+        "grid-body",
+        "grid-head",
+        "grid-row",
+        "head-cell",
+        "header",
+        "heading",
+    ],
+});

package/dist/internal/use-arrow-navigation.d.ts

@@ -8,9 +8,9 @@ interface ArrowNavigationOptions {
      */
     arrowKeyOptions?: ArrowKeyOptions;
     /**
-     * The attribute name to find the collection items in the parent element.
+     * The selector to find the collection items in the parent element.
      */
-    attributeName: string;
+    candidateSelector: string;
     /**
      * The parent element where contains all the collection items, this will collect every item to be used when nav
      * It will be ignored if attributeName is provided

package/dist/internal/use-arrow-navigation.js

@@ -12,7 +12,7 @@ export function useArrowNavigation(e, currentElement, parentElement, options) {
         (options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName))) {
         return null;
     }
-    const { arrowKeyOptions = "both", attributeName, itemsArray = [], loop = true, dir = "ltr", preventScroll = true, focus = false, } = options;
+    const { arrowKeyOptions = "both", candidateSelector: attributeName, itemsArray = [], loop = true, dir = "ltr", preventScroll = true, focus = false, } = options;
     const [right, left, up, down, home, end] = [
         e.key === "ArrowRight",
         e.key === "ArrowLeft",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",