bits-ui 1.0.0-next.6 → 1.0.0-next.61

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import ScrollLock from "../scroll-lock/scroll-lock.svelte";
+	import type { PopperLayerImplProps } from "./types.js";
+	import PopperContent from "./popper-content.svelte";
+	import EscapeLayer from "../escape-layer/escape-layer.svelte";
+	import DismissibleLayer from "../dismissible-layer/dismissible-layer.svelte";
+	import TextSelectionLayer from "../text-selection-layer/text-selection-layer.svelte";
+	import FocusScope from "../focus-scope/focus-scope.svelte";
+
+	let {
+		popper,
+		onEscapeKeydown,
+		escapeKeydownBehavior,
+		preventOverflowTextSelection,
+		id,
+		onPointerDown,
+		onPointerUp,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		arrowPadding,
+		avoidCollisions,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		hideWhenDetached,
+		updatePositionStrategy,
+		strategy,
+		dir,
+		preventScroll,
+		wrapperId,
+		style,
+		onPlaced,
+		onInteractOutside,
+		onCloseAutoFocus,
+		onOpenAutoFocus,
+		onFocusOutside,
+		interactOutsideBehavior = "close",
+		loop,
+		trapFocus = true,
+		isValidEvent = () => false,
+		customAnchor = null,
+		isStatic = false,
+		enabled,
+		...restProps
+	}: Omit<PopperLayerImplProps, "present" | "children"> & {
+		enabled: boolean;
+	} = $props();
+</script>
+
+<PopperContent
+	{isStatic}
+	{id}
+	{side}
+	{sideOffset}
+	{align}
+	{alignOffset}
+	{arrowPadding}
+	{avoidCollisions}
+	{collisionBoundary}
+	{collisionPadding}
+	{sticky}
+	{hideWhenDetached}
+	{updatePositionStrategy}
+	{strategy}
+	{dir}
+	{wrapperId}
+	{style}
+	{onPlaced}
+	{customAnchor}
+>
+	{#snippet content({ props: floatingProps })}
+		{#if restProps.forceMount && enabled}
+			<ScrollLock {preventScroll} />
+		{:else if !restProps.forceMount}
+			<ScrollLock {preventScroll} />
+		{/if}
+		<FocusScope
+			{id}
+			{onOpenAutoFocus}
+			{onCloseAutoFocus}
+			{loop}
+			trapFocus={enabled && trapFocus}
+			forceMount={restProps.forceMount}
+		>
+			{#snippet focusScope({ props: focusScopeProps })}
+				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled}>
+					<DismissibleLayer
+						{id}
+						{onInteractOutside}
+						{onFocusOutside}
+						{interactOutsideBehavior}
+						{isValidEvent}
+						{enabled}
+					>
+						{#snippet children({ props: dismissibleProps })}
+							<TextSelectionLayer
+								{id}
+								{preventOverflowTextSelection}
+								{onPointerDown}
+								{onPointerUp}
+								{enabled}
+							>
+								{@render popper?.({
+									props: mergeProps(
+										restProps,
+										floatingProps,
+										dismissibleProps,
+										focusScopeProps,
+										{
+											style: {
+												pointerEvents: "auto",
+											},
+										}
+									),
+								})}
+							</TextSelectionLayer>
+						{/snippet}
+					</DismissibleLayer>
+				</EscapeLayer>
+			{/snippet}
+		</FocusScope>
+	{/snippet}
+</PopperContent>

package/dist/bits/{listbox/components/listbox-group.svelte.d.ts → utilities/popper-layer/popper-layer-inner.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { GroupProps } from "../index.js";
+import type { PopperLayerImplProps } from "./types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,8 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ListboxGroup: $$__sveltets_2_IsomorphicComponent<GroupProps, {
+declare const PopperLayerInner: $$__sveltets_2_IsomorphicComponent<Omit<PopperLayerImplProps, "children" | "present"> & {
+    enabled: boolean;
+}, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type ListboxGroup = InstanceType<typeof ListboxGroup>;
-export default ListboxGroup;
+}, {}, {}, "">;
+type PopperLayerInner = InstanceType<typeof PopperLayerInner>;
+export default PopperLayerInner;

package/dist/bits/utilities/popper-layer/popper-layer.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
-	import ScrollLock from "../scroll-lock/scroll-lock.svelte";
 	import type { PopperLayerImplProps } from "./types.js";
-	import PopperContent from "./popper-content.svelte";
-	import { EscapeLayer } from "../escape-layer/index.js";
-	import { DismissibleLayer } from "../dismissible-layer/index.js";
-	import { TextSelectionLayer } from "../text-selection-layer/index.js";
-	import { PresenceLayer } from "../presence-layer/index.js";
-	import { FocusScope } from "../focus-scope/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import PopperLayerInner from "./popper-layer-inner.svelte";
+	import PresenceLayer from "../presence-layer/presence-layer.svelte";
 
 	let {
 		popper,
@@ -36,7 +30,6 @@
 		style,
 		onPlaced,
 		onInteractOutside,
-		onInteractOutsideStart,
 		onCloseAutoFocus,
 		onOpenAutoFocus,
 		onFocusOutside,
@@ -52,9 +45,14 @@
 
 <PresenceLayer {id} {present} {...restProps}>
 	{#snippet presence({ present })}
-		<PopperContent
-			{isStatic}
+		<PopperLayerInner
+			{popper}
+			{onEscapeKeydown}
+			{escapeKeydownBehavior}
+			{preventOverflowTextSelection}
 			{id}
+			{onPointerDown}
+			{onPointerUp}
 			{side}
 			{sideOffset}
 			{align}
@@ -68,65 +66,23 @@
 			{updatePositionStrategy}
 			{strategy}
 			{dir}
+			{preventScroll}
 			{wrapperId}
 			{style}
 			{onPlaced}
 			{customAnchor}
-		>
-			{#snippet content({ props: floatingProps })}
-				{#if preventScroll}
-					<ScrollLock {preventScroll} />
-				{/if}
-				<FocusScope
-					{id}
-					{onOpenAutoFocus}
-					{onCloseAutoFocus}
-					{loop}
-					trapFocus={present.current && trapFocus}
-				>
-					{#snippet focusScope({ props: focusScopeProps })}
-						<EscapeLayer
-							{onEscapeKeydown}
-							{escapeKeydownBehavior}
-							enabled={present.current}
-						>
-							<DismissibleLayer
-								{id}
-								{onInteractOutside}
-								{onInteractOutsideStart}
-								{onFocusOutside}
-								{interactOutsideBehavior}
-								{isValidEvent}
-								enabled={present.current}
-							>
-								{#snippet children({ props: dismissibleProps })}
-									<TextSelectionLayer
-										{id}
-										{preventOverflowTextSelection}
-										{onPointerDown}
-										{onPointerUp}
-										enabled={present.current}
-									>
-										{@render popper?.({
-											props: mergeProps(
-												restProps,
-												floatingProps,
-												dismissibleProps,
-												focusScopeProps,
-												{
-													style: {
-														pointerEvents: "auto",
-													},
-												}
-											),
-										})}
-									</TextSelectionLayer>
-								{/snippet}
-							</DismissibleLayer>
-						</EscapeLayer>
-					{/snippet}
-				</FocusScope>
-			{/snippet}
-		</PopperContent>
+			{isStatic}
+			enabled={present.current}
+			{onInteractOutside}
+			{onCloseAutoFocus}
+			{onOpenAutoFocus}
+			{interactOutsideBehavior}
+			{loop}
+			{trapFocus}
+			{isValidEvent}
+			{onFocusOutside}
+			forceMount={false}
+			{...restProps}
+		/>
 	{/snippet}
 </PresenceLayer>

package/dist/bits/utilities/popper-layer/types.d.ts

@@ -7,8 +7,8 @@ import type { PresenceLayerImplProps, PresenceLayerProps } from "../presence-lay
 import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
 import type { ScrollLockProps } from "../scroll-lock/index.js";
 import type { Direction } from "../../../shared/index.js";
-export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & ScrollLockProps;
-export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & ScrollLockProps & {
+export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay">;
+export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay"> & {
     content?: Snippet<[{
         props: Record<string, unknown>;
     }]>;

package/dist/bits/utilities/presence-layer/usePresence.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ReadableBox } from "svelte-toolbelt";
+import { type ReadableBox } from "svelte-toolbelt";
 export declare function usePresence(present: ReadableBox<boolean>, id: ReadableBox<string>): {
     readonly current: boolean;
 };

package/dist/bits/utilities/presence-layer/usePresence.svelte.js

@@ -1,11 +1,13 @@
-import { afterTick } from "../../../internal/afterTick.js";
-import { useStateMachine } from "../../../internal/useStateMachine.svelte.js";
-import { watch } from "../../../internal/box.svelte.js";
+import { afterTick } from "svelte-toolbelt";
+import { Previous } from "runed";
+import { untrack } from "svelte";
+import { useStateMachine } from "../../../internal/use-state-machine.svelte.js";
 export function usePresence(present, id) {
     let styles = $state({});
     let prevAnimationNameState = $state("none");
     const initialState = present.current ? "mounted" : "unmounted";
     let node = $state(null);
+    const prevPresent = new Previous(() => present.current);
     $effect(() => {
         if (!id.current)
             return;
@@ -28,40 +30,43 @@ export function usePresence(present, id) {
             MOUNT: "mounted",
         },
     });
-    watch(present, (currPresent, prevPresent) => {
-        if (!node) {
-            node = document.getElementById(id.current);
-        }
-        if (!node)
-            return;
-        const hasPresentChanged = currPresent !== prevPresent;
-        if (!hasPresentChanged)
-            return;
-        const prevAnimationName = prevAnimationNameState;
-        const currAnimationName = getAnimationName(node);
-        if (currPresent) {
-            dispatch("MOUNT");
-        }
-        else if (currAnimationName === "none" || styles.display === "none") {
-            // If there is no exit animation or the element is hidden, animations won't run
-            // so we unmount instantly
-            dispatch("UNMOUNT");
-        }
-        else {
-            /**
-             * When `present` changes to `false`, we check changes to animation-name to
-             * determine whether an animation has started. We chose this approach (reading
-             * computed styles) because there is no `animationrun` event and `animationstart`
-             * fires after `animation-delay` has expired which would be too late.
-             */
-            const isAnimating = prevAnimationName !== currAnimationName;
-            if (prevPresent && isAnimating) {
-                dispatch("ANIMATION_OUT");
+    $effect(() => {
+        const currPresent = present.current;
+        untrack(() => {
+            if (!node) {
+                node = document.getElementById(id.current);
             }
-            else {
+            if (!node)
+                return;
+            const hasPresentChanged = currPresent !== prevPresent.current;
+            if (!hasPresentChanged)
+                return;
+            const prevAnimationName = prevAnimationNameState;
+            const currAnimationName = getAnimationName(node);
+            if (currPresent) {
+                dispatch("MOUNT");
+            }
+            else if (currAnimationName === "none" || styles.display === "none") {
+                // If there is no exit animation or the element is hidden, animations won't run
+                // so we unmount instantly
                 dispatch("UNMOUNT");
             }
-        }
+            else {
+                /**
+                 * When `present` changes to `false`, we check changes to animation-name to
+                 * determine whether an animation has started. We chose this approach (reading
+                 * computed styles) because there is no `animationrun` event and `animationstart`
+                 * fires after `animation-delay` has expired which would be too late.
+                 */
+                const isAnimating = prevAnimationName !== currAnimationName;
+                if (prevPresent && isAnimating) {
+                    dispatch("ANIMATION_OUT");
+                }
+                else {
+                    dispatch("UNMOUNT");
+                }
+            }
+        });
     });
     /**
      * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
@@ -90,14 +95,17 @@ export function usePresence(present, id) {
             prevAnimationNameState = getAnimationName(node);
         }
     }
-    watch(state, () => {
-        if (!node) {
-            node = document.getElementById(id.current);
-        }
-        if (!node)
-            return;
-        const currAnimationName = getAnimationName(node);
-        prevAnimationNameState = state.current === "mounted" ? currAnimationName : "none";
+    $effect(() => {
+        state.current;
+        untrack(() => {
+            if (!node) {
+                node = document.getElementById(id.current);
+            }
+            if (!node)
+                return;
+            const currAnimationName = getAnimationName(node);
+            prevAnimationNameState = state.current === "mounted" ? currAnimationName : "none";
+        });
     });
     $effect(() => {
         if (!node)

package/dist/bits/utilities/scroll-lock/index.d.ts

@@ -5,4 +5,14 @@ export type ScrollLockProps = {
      * @defaultValue true
      */
     preventScroll?: boolean;
+    /**
+     * The delay in milliseconds before the scrollbar is restored after closing the
+     * dialog. This is only applicable when using the `child` snippet for custom
+     * transitions and `preventScroll` is `true`. You should set this to a value
+     * greater than the transition duration to prevent content from shifting during
+     * the transition.
+     *
+     * @defaultValue null
+     */
+    restoreScrollDelay?: number | null;
 };

package/dist/bits/utilities/scroll-lock/scroll-lock.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { ScrollLockProps } from "./index.js";
-	import { useBodyScrollLock } from "../../../internal/useBodyScrollLock.svelte.js";
+	import { useBodyScrollLock } from "../../../internal/use-body-scroll-lock.svelte.js";
 
-	let { preventScroll = true }: ScrollLockProps = $props();
+	let { preventScroll = true, restoreScrollDelay = null }: ScrollLockProps = $props();
 
-	useBodyScrollLock(preventScroll);
+	useBodyScrollLock(preventScroll, () => restoreScrollDelay);
 </script>

package/dist/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.js

@@ -1,13 +1,10 @@
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
-import { composeHandlers } from "../../../internal/composeHandlers.js";
+import { box, composeHandlers, executeCallbacks, useRefById, } from "svelte-toolbelt";
 import { addEventListener } from "../../../internal/events.js";
 import { noop } from "../../../internal/noop.js";
-import { useRefById } from "../../../internal/useRefById.svelte.js";
 import { isHTMLElement } from "../../../internal/is.js";
 import { isOrContainsTarget } from "../../../internal/elements.js";
-import { executeCallbacks } from "../../../internal/executeCallbacks.js";
-const layers = new Map();
+globalThis.bitsTextSelectionLayers ??= new Map();
 export class TextSelectionLayerState {
     #id;
     #onPointerDownProp;
@@ -23,18 +20,18 @@ export class TextSelectionLayerState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.#enabled.current,
+            deps: () => this.#enabled.current,
         });
         let unsubEvents = noop;
         $effect(() => {
             if (this.#enabled.current) {
-                layers.set(this, untrack(() => this.#enabled));
+                globalThis.bitsTextSelectionLayers.set(this, untrack(() => this.#enabled));
                 unsubEvents = this.#addEventListeners();
             }
             return () => {
                 unsubEvents();
                 this.#resetSelectionLock();
-                layers.delete(this);
+                globalThis.bitsTextSelectionLayers.delete(this);
             };
         });
     }
@@ -48,7 +45,7 @@ export class TextSelectionLayerState {
             return;
         /**
          * We only lock user-selection overflow if layer is the top most layer and
-         * pointerdown occured inside the node. You are still allowed to select text
+         * pointerdown occurred inside the node. You are still allowed to select text
          * outside the node provided pointerdown occurs outside the node.
          */
         if (!isHighestLayer(this) || !isOrContainsTarget(node, target))
@@ -83,7 +80,7 @@ function setUserSelect(node, value) {
     node.style.webkitUserSelect = value;
 }
 function isHighestLayer(instance) {
-    const layersArr = [...layers];
+    const layersArr = [...globalThis.bitsTextSelectionLayers];
     if (!layersArr.length)
         return false;
     const highestLayer = layersArr.at(-1);

package/dist/bits/utilities/visually-hidden/types.d.ts

@@ -1,3 +1,3 @@
 import type { WithChild } from "../../../internal/types.js";
-import type { PrimitiveSpanAttributes } from "../../../shared/attributes.js";
-export type VisuallyHiddenProps = WithChild<PrimitiveSpanAttributes>;
+import type { BitsPrimitiveSpanAttributes } from "../../../shared/attributes.js";
+export type VisuallyHiddenProps = WithChild<BitsPrimitiveSpanAttributes>;

package/dist/bits/utilities/visually-hidden/visually-hidden.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
 	import type { VisuallyHiddenProps } from "./types.js";
 	import type { StyleProperties } from "../../../shared/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
 
 	let { children, child, ...restProps }: VisuallyHiddenProps = $props();
 

package/dist/internal/arrays.d.ts

@@ -65,3 +65,26 @@ export declare function forward<T>(array: T[], index: number, increment: number,
  * @param loop loop around the array if the target index is out of bounds?
  */
 export declare function backward<T>(array: T[], index: number, decrement: number, loop?: boolean): T | undefined;
+/**
+ * This is the "meat" of the typeahead matching logic. It takes in all the values,
+ * the search and the current match, and returns the next match (or `undefined`).
+ *
+ * We normalize the search because if a user has repeatedly pressed a character,
+ * we want the exact same behavior as if we only had that one character
+ * (ie. cycle through options starting with that character)
+ *
+ * We also reorder the values by wrapping the array around the current match.
+ * This is so we always look forward from the current match, and picking the first
+ * match will always be the correct one.
+ *
+ * Finally, if the normalized search is exactly one character, we exclude the
+ * current match from the values because otherwise it would be the first to match always
+ * and focus would never move. This is as opposed to the regular case, where we
+ * don't want focus to move if the current match still matches.
+ */
+export declare function getNextMatch(values: string[], search: string, currentMatch?: string): string | undefined;
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export declare function wrapArray<T>(array: T[], startIndex: number): T[];

package/dist/internal/arrays.js

@@ -168,3 +168,38 @@ export function backward(array, index, decrement, loop = true) {
     }
     return array[targetIndex];
 }
+/**
+ * This is the "meat" of the typeahead matching logic. It takes in all the values,
+ * the search and the current match, and returns the next match (or `undefined`).
+ *
+ * We normalize the search because if a user has repeatedly pressed a character,
+ * we want the exact same behavior as if we only had that one character
+ * (ie. cycle through options starting with that character)
+ *
+ * We also reorder the values by wrapping the array around the current match.
+ * This is so we always look forward from the current match, and picking the first
+ * match will always be the correct one.
+ *
+ * Finally, if the normalized search is exactly one character, we exclude the
+ * current match from the values because otherwise it would be the first to match always
+ * and focus would never move. This is as opposed to the regular case, where we
+ * don't want focus to move if the current match still matches.
+ */
+export function getNextMatch(values, search, currentMatch) {
+    const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+    const normalizedSearch = isRepeated ? search[0] : search;
+    const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+    let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+    const excludeCurrentMatch = normalizedSearch.length === 1;
+    if (excludeCurrentMatch)
+        wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+    return nextMatch !== currentMatch ? nextMatch : undefined;
+}
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export function wrapArray(array, startIndex) {
+    return array.map((_, index) => array[(startIndex + index) % array.length]);
+}

package/dist/internal/attrs.d.ts

@@ -6,7 +6,7 @@ export declare function getAriaExpanded(condition: boolean): "true" | "false";
 export declare function getDataDisabled(condition: boolean): "" | undefined;
 export declare function getAriaRequired(condition: boolean): "true" | "false";
 export declare function getAriaSelected(condition: boolean): "true" | "false";
-export declare function getAriaChecked(condition: boolean | "indeterminate"): "true" | "false" | "mixed";
+export declare function getAriaChecked(checked: boolean, indeterminate: boolean): "true" | "false" | "mixed";
 export declare function getAriaOrientation(orientation: "horizontal" | "vertical"): "horizontal" | "vertical";
 export declare function getAriaHidden(condition: boolean): "true" | undefined;
 export declare function getAriaInvalid(condition: boolean): "true" | undefined;

package/dist/internal/attrs.js

@@ -22,11 +22,11 @@ export function getAriaRequired(condition) {
 export function getAriaSelected(condition) {
     return condition ? "true" : "false";
 }
-export function getAriaChecked(condition) {
-    if (condition === "indeterminate") {
+export function getAriaChecked(checked, indeterminate) {
+    if (indeterminate) {
         return "mixed";
     }
-    return condition ? "true" : "false";
+    return checked ? "true" : "false";
 }
 export function getAriaOrientation(orientation) {
     return orientation;

package/dist/internal/{createEventHook.svelte.js → create-event-hook.svelte.js}

@@ -1,4 +1,4 @@
-import { executeCallbacks } from "./callbacks.js";
+import { executeCallbacks } from "svelte-toolbelt";
 export function createEventHook() {
     const callbacks = new Set();
     const callbacksToDispose = [];

package/dist/{shared/date → internal/date-time}/announcer.js

@@ -1,5 +1,5 @@
-import { isBrowser, isHTMLElement } from "../../internal/is.js";
-import { styleToString } from "../../internal/style.js";
+import { srOnlyStylesString } from "svelte-toolbelt";
+import { isBrowser, isHTMLElement } from "../is.js";
 /**
  * Creates or gets an announcer element which is used to announce messages to screen readers.
  * Within the date components, we use this to announce when the values of the individual segments
@@ -11,18 +11,7 @@ function initAnnouncer() {
     let el = document.querySelector("[data-bits-announcer]");
     if (!isHTMLElement(el)) {
         const div = document.createElement("div");
-        div.style.cssText = styleToString({
-            border: "0px",
-            clip: "rect(0px, 0px, 0px, 0px)",
-            clipPath: "inset(50%)",
-            height: "1px",
-            margin: "-1px",
-            overflow: "hidden",
-            padding: "0px",
-            position: "absolute",
-            whiteSpace: "nowrap",
-            width: "1px",
-        });
+        div.style.cssText = srOnlyStylesString;
         div.setAttribute("data-bits-announcer", "");
         div.appendChild(createLog("assertive"));
         div.appendChild(createLog("polite"));

package/dist/{shared/date → internal/date-time}/calendar-helpers.svelte.d.ts

@@ -1,9 +1,7 @@
 import { type DateValue } from "@internationalized/date";
-import type { ReadableBox, WritableBox } from "svelte-toolbelt";
-import type { Month } from "./types.js";
-import { type Formatter } from "./index.js";
-import type { CalendarRootState } from "../../bits/calendar/calendar.svelte.js";
-import { RangeCalendarRootState } from "../../bits/range-calendar/range-calendar.svelte.js";
+import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
+import type { Formatter } from "./formatter.js";
+import type { Month } from "../../shared/index.js";
 /**
  * Checks if a given node is a calendar cell element.
  *
@@ -184,6 +182,5 @@ export declare function getCalendarElementProps({ fullCalendarLabel, id, isInval
     readonly "data-readonly": "" | undefined;
 };
 export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading";
-export declare function getCalendarBitsAttr(root: CalendarRootState | RangeCalendarRootState, part: CalendarParts): string;
 export declare function pickerOpenFocus(e: Event): void;
 export {};