bits-ui 2.3.0 → 2.4.0

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/bits/utilities/config/bits-config.d.ts

@@ -0,0 +1,44 @@
+import { Context } from "runed";
+import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
+import type { BitsConfigPropsWithoutChildren } from "./types.js";
+type BitsConfigStateProps = ReadableBoxedValues<BitsConfigPropsWithoutChildren>;
+export declare const BitsConfigContext: Context<BitsConfigState>;
+/**
+ * Gets the current Bits UI configuration state from the context.
+ *
+ * Returns a default configuration (where all values are `undefined`) if no configuration is found.
+ */
+export declare function getBitsConfig(): Required<ReadableBoxedValues<BitsConfigPropsWithoutChildren>>;
+/**
+ * Creates and sets a new Bits UI configuration state that inherits from parent configs.
+ *
+ * @param opts - Configuration options for this level
+ * @returns The configuration state instance
+ *
+ * @example
+ * ```typescript
+ * // In a component that wants to set a default portal target
+ * const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
+ *
+ * // Child components will inherit this config and can override specific values
+ * const childConfig = useBitsConfig({ someOtherProp: box("value") });
+ * // childConfig still has defaultPortalTo="#some-element" from parent
+ * ```
+ */
+export declare function useBitsConfig(opts: BitsConfigStateProps): BitsConfigState;
+/**
+ * Configuration state that inherits from parent configurations.
+ *
+ * @example
+ * Config resolution:
+ * ```
+ * Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
+ * Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
+ * Level 3: { theme: "light" }   // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
+ * ```
+ */
+export declare class BitsConfigState {
+    readonly opts: Required<BitsConfigStateProps>;
+    constructor(parent: BitsConfigState | null, opts: BitsConfigStateProps);
+}
+export {};

package/dist/bits/utilities/config/bits-config.js

@@ -0,0 +1,92 @@
+import { Context } from "runed";
+import { box } from "svelte-toolbelt";
+export const BitsConfigContext = new Context("BitsConfig");
+/**
+ * Gets the current Bits UI configuration state from the context.
+ *
+ * Returns a default configuration (where all values are `undefined`) if no configuration is found.
+ */
+export function getBitsConfig() {
+    const fallback = new BitsConfigState(null, {});
+    return BitsConfigContext.getOr(fallback).opts;
+}
+/**
+ * Creates and sets a new Bits UI configuration state that inherits from parent configs.
+ *
+ * @param opts - Configuration options for this level
+ * @returns The configuration state instance
+ *
+ * @example
+ * ```typescript
+ * // In a component that wants to set a default portal target
+ * const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
+ *
+ * // Child components will inherit this config and can override specific values
+ * const childConfig = useBitsConfig({ someOtherProp: box("value") });
+ * // childConfig still has defaultPortalTo="#some-element" from parent
+ * ```
+ */
+export function useBitsConfig(opts) {
+    return BitsConfigContext.set(new BitsConfigState(BitsConfigContext.getOr(null), opts));
+}
+/**
+ * Configuration state that inherits from parent configurations.
+ *
+ * @example
+ * Config resolution:
+ * ```
+ * Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
+ * Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
+ * Level 3: { theme: "light" }   // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
+ * ```
+ */
+export class BitsConfigState {
+    opts;
+    constructor(parent, opts) {
+        const resolveConfigOption = createConfigResolver(parent, opts);
+        this.opts = {
+            defaultPortalTo: resolveConfigOption((config) => config.defaultPortalTo),
+            defaultLocale: resolveConfigOption((config) => config.defaultLocale),
+        };
+    }
+}
+/**
+ * Returns a config resolver that resolves a given config option's value.
+ *
+ * The resolver creates reactive boxes that resolve config option values using this priority:
+ * 1. Current level's value (if defined)
+ * 2. Parent level's value (if defined and current is undefined)
+ * 3. `undefined` (if no value is found in either parent or child)
+ *
+ * @param parent - Parent configuration state (null if this is root level)
+ * @param currentOpts - Current level's configuration options
+ *
+ * @example
+ * ```typescript
+ * // Given this hierarchy:
+ * // Root: { defaultPortalTo: "#some-element" }
+ * // Child: { someOtherProp: "value" } // no defaultPortalTo specified
+ *
+ * const resolveConfigOption = createConfigResolver(parent, opts);
+ * const portalTo = resolveConfigOption(config => config.defaultPortalTo);
+ *
+ * // portalTo.current === "#some-element" (inherited from parent)
+ * // even when child didn't specify `defaultPortalTo`
+ * ```
+ */
+function createConfigResolver(parent, currentOpts) {
+    return (getter) => {
+        const configOption = box.with(() => {
+            // try current opts first
+            const value = getter(currentOpts)?.current;
+            if (value !== undefined)
+                return value;
+            // if no parent, return undefined
+            if (parent === null)
+                return undefined;
+            // get value from parent (which already has its own chain resolved)
+            return getter(parent.opts)?.current;
+        });
+        return configOption;
+    };
+}

package/dist/bits/utilities/config/components/bits-config.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { BitsConfigProps } from "../types.js";
+	import { useBitsConfig } from "../bits-config.js";
+	import { box } from "svelte-toolbelt";
+
+	let { children, defaultPortalTo, defaultLocale }: BitsConfigProps = $props();
+
+	useBitsConfig({
+		defaultPortalTo: box.with(() => defaultPortalTo),
+		defaultLocale: box.with(() => defaultLocale),
+	});
+</script>
+
+{@render children?.()}

package/dist/bits/utilities/config/components/bits-config.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BitsConfigProps } from "../types.js";
+declare const BitsConfig: import("svelte").Component<BitsConfigProps, {}, "">;
+type BitsConfig = ReturnType<typeof BitsConfig>;
+export default BitsConfig;

package/dist/bits/utilities/config/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as BitsConfig } from "./components/bits-config.svelte";
+export { getBitsConfig, BitsConfigState } from "./bits-config.js";

package/dist/bits/utilities/config/exports.js

@@ -0,0 +1,2 @@
+export { default as BitsConfig } from "./components/bits-config.svelte";
+export { getBitsConfig, BitsConfigState } from "./bits-config.js";

package/dist/bits/utilities/config/index.d.ts

@@ -0,0 +1 @@
+export * from "./exports.js";

package/dist/bits/utilities/config/index.js

@@ -0,0 +1 @@
+export * from "./exports.js";

package/dist/bits/utilities/config/prop-resolvers.d.ts

@@ -0,0 +1,13 @@
+import { type Getter, type ReadableBox } from "svelte-toolbelt";
+/**
+ * Resolves a locale value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"en"`
+ */
+export declare const resolveLocaleProp: (getProp: Getter<string | undefined>) => ReadableBox<string>;
+/**
+ * Resolves a portal's `to` value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"body"`
+ */
+export declare const resolvePortalToProp: (getProp: Getter<string | Element | undefined>) => ReadableBox<string | Element>;

package/dist/bits/utilities/config/prop-resolvers.js

@@ -0,0 +1,37 @@
+import { box } from "svelte-toolbelt";
+import { getBitsConfig } from "./bits-config.js";
+/**
+ * Creates a generic prop resolver that follows a standard priority chain:
+ * 1. The getter's prop value (if defined)
+ * 2. The config default value (if no getter prop value is defined)
+ * 3. The fallback value (if no config value found)
+ */
+function createPropResolver(configOption, fallback) {
+    return (getProp) => {
+        const config = getBitsConfig();
+        return box.with(() => {
+            // 1. return the prop's value, if provided
+            const propValue = getProp();
+            if (propValue !== undefined)
+                return propValue;
+            // 2. return the resolved config option value, if available
+            const option = configOption(config).current;
+            if (option !== undefined)
+                return option;
+            // 3. return the fallback if no other value is found
+            return fallback;
+        });
+    };
+}
+/**
+ * Resolves a locale value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"en"`
+ */
+export const resolveLocaleProp = createPropResolver((config) => config.defaultLocale, "en");
+/**
+ * Resolves a portal's `to` value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"body"`
+ */
+export const resolvePortalToProp = createPropResolver((config) => config.defaultPortalTo, "body");

package/dist/bits/utilities/config/types.d.ts

@@ -0,0 +1,13 @@
+import type { WithChildren } from "../../../internal/types.js";
+import type { PortalTarget } from "../portal/types.js";
+export type BitsConfigPropsWithoutChildren = {
+    /**
+     * The default portal `to`/target to use for the `Portal` components throughout the app.
+     */
+    defaultPortalTo?: PortalTarget;
+    /**
+     * The default locale to use for the components that support localization.
+     */
+    defaultLocale?: string;
+};
+export type BitsConfigProps = WithChildren<BitsConfigPropsWithoutChildren>;

package/dist/bits/utilities/config/types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/utilities/portal/portal.svelte

@@ -5,40 +5,41 @@
 	import PortalConsumer from "./portal-consumer.svelte";
 	import type { PortalProps } from "./types.js";
 	import { isBrowser } from "../../../internal/is.js";
+	import { resolvePortalToProp } from "../config/prop-resolvers.js";
 
-	let { to = "body", children, disabled }: PortalProps = $props();
+	let { to: toProp, children, disabled }: PortalProps = $props();
 
+	const to = resolvePortalToProp(() => toProp);
 	const context = getAllContexts();
 
 	let target = $derived(getTarget());
 
 	function getTarget() {
 		if (!isBrowser || disabled) return null;
-		let localTarget: HTMLElement | null | DocumentFragment | Element = null;
-		if (typeof to === "string") {
-			localTarget = document.querySelector(to);
-			if (localTarget === null) {
-				if (DEV) {
-					throw new Error(`Target element "${to}" not found.`);
-				}
+
+		let localTarget: Element | null = null;
+
+		if (typeof to.current === "string") {
+			const target = document.querySelector(to.current);
+			if (DEV && target === null) {
+				throw new Error(`Target element "${to.current}" not found.`);
 			}
-		} else if (to instanceof HTMLElement || to instanceof DocumentFragment) {
-			localTarget = to;
+			localTarget = target;
 		} else {
-			if (DEV) {
-				throw new TypeError(
-					`Unknown portal target type: ${
-						to === null ? "null" : typeof to
-					}. Allowed types: string (query selector), HTMLElement, or DocumentFragment.`
-				);
-			}
+			localTarget = to.current;
+		}
+
+		if (DEV && !(localTarget instanceof Element)) {
+			const type = localTarget === null ? "null" : typeof localTarget;
+			throw new TypeError(
+				`Unknown portal target type: ${type}. Allowed types: string (query selector) or Element.`
+			);
 		}
 
 		return localTarget;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	let instance: any;
+	let instance: ReturnType<typeof mount> | null;
 
 	function unmountInstance() {
 		if (instance) {
@@ -53,8 +54,7 @@
 			return;
 		}
 		instance = mount(PortalConsumer, {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			target: target as any,
+			target: target,
 			props: { children },
 			context,
 		});

package/dist/bits/utilities/portal/types.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from "svelte";
+export type PortalTarget = Element | string;
 export type PortalProps = {
     /**
      * Where to portal the content to.
      *
      * @default document.body
      */
-    to?: HTMLElement | string | DocumentFragment;
+    to?: PortalTarget;
     /**
      * Disable portalling and render the component inline
      *

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

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>;