bits-ui 0.8.2 → 0.8.4

package/dist/bits/accordion/components/Accordion.svelte

@@ -8,7 +8,8 @@ export let asChild = false;
 const {
   elements: { root },
   states: { value: localValue },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   multiple,
   disabled,
@@ -33,9 +34,9 @@ const attrs = getAttrs("root");
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} {attrs} {ids} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {builder} {attrs} {ids} />
 	</div>
 {/if}

package/dist/bits/accordion/components/Accordion.svelte.d.ts

@@ -229,6 +229,9 @@ declare class __sveltets_Render<Multiple extends boolean> {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
             attrs: Record<string, string>;
+            ids: {
+                root: string;
+            };
         };
     };
 }

package/dist/bits/alert-dialog/components/AlertDialog.svelte

@@ -14,7 +14,8 @@ const tOpen = writable(open);
 let timeout = 0;
 const {
   states: { open: localOpen },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   closeOnEscape,
   preventScroll,
@@ -68,4 +69,4 @@ $:
   updateOption("forceVisible", forceVisible);
 </script>
 
-<slot />
+<slot {ids} />

package/dist/bits/alert-dialog/components/AlertDialog.svelte.d.ts

@@ -15,7 +15,14 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            ids: {
+                content: string;
+                title: string;
+                description: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type AlertDialogProps = typeof __propDef.props;

package/dist/bits/context-menu/components/ContextMenu.svelte

@@ -15,7 +15,8 @@ export let closeFocus = void 0;
 export let disableFocusFirstItem = void 0;
 const {
   states: { open: localOpen },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   closeOnOutsideClick,
   closeOnEscape,
@@ -66,4 +67,4 @@ $:
   updateOption("typeahead", typeahead);
 </script>
 
-<slot />
+<slot {ids} />

package/dist/bits/context-menu/components/ContextMenu.svelte.d.ts

@@ -20,7 +20,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            ids: {
+                menu: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type ContextMenuProps = typeof __propDef.props;

package/dist/bits/context-menu/components/ContextMenuSub.svelte

@@ -2,7 +2,7 @@
 export let positioning = void 0;
 export let disabled = void 0;
 export let arrowSize = void 0;
-const { updateOption } = setSubMenuCtx({
+const { updateOption, ids } = setSubMenuCtx({
   positioning,
   disabled,
   arrowSize
@@ -15,4 +15,4 @@ $:
   updateOption("arrowSize", arrowSize);
 </script>
 
-<slot />
+<slot subIds={ids} />

package/dist/bits/context-menu/components/ContextMenuSub.svelte.d.ts

@@ -9,7 +9,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            subIds: {
+                menu: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type ContextMenuSubProps = typeof __propDef.props;

package/dist/bits/context-menu/ctx.d.ts

@@ -4,6 +4,10 @@ import type { Readable } from "svelte/store";
 export declare const getAttrs: (part: "arrow" | "label" | "radio-group" | "separator" | "content" | "item" | "trigger" | "group" | "checkbox-indicator" | "checkbox-item" | "radio-item" | "sub-content" | "sub-trigger") => Record<string, string>;
 export declare function setCtx(props: CreateContextMenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    ids: {
+        menu: string;
+        trigger: string;
+    };
     elements: {
         menu: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Readable<boolean>, import("svelte/store").Writable<string | HTMLElement | null | undefined>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$isVisible, $portal]: [boolean, string | HTMLElement | null | undefined]) => {
             readonly role: "menu";

package/dist/bits/dialog/components/Dialog.svelte

@@ -16,7 +16,8 @@ const tOpen = writable(open);
 let timeout = 0;
 const {
   states: { open: localOpen },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   closeOnEscape,
   preventScroll,
@@ -79,4 +80,4 @@ $:
   updateOption("closeFocus", closeFocus);
 </script>
 
-<slot />
+<slot {ids} />

package/dist/bits/dialog/components/Dialog.svelte.d.ts

@@ -15,7 +15,14 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            ids: {
+                content: string;
+                title: string;
+                description: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type DialogProps = typeof __propDef.props;

package/dist/bits/dropdown-menu/components/DropdownMenu.svelte

@@ -15,7 +15,8 @@ export let closeFocus = void 0;
 export let disableFocusFirstItem = void 0;
 const {
   states: { open: localOpen },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   closeOnOutsideClick,
   closeOnEscape,
@@ -66,4 +67,4 @@ $:
   updateOption("typeahead", typeahead);
 </script>
 
-<slot />
+<slot {ids} />

package/dist/bits/dropdown-menu/components/DropdownMenu.svelte.d.ts

@@ -20,7 +20,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            ids: {
+                menu: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type DropdownMenuProps = typeof __propDef.props;

package/dist/bits/dropdown-menu/components/DropdownMenuSub.svelte

@@ -2,7 +2,7 @@
 export let positioning = void 0;
 export let disabled = void 0;
 export let arrowSize = void 0;
-const { updateOption } = setSubMenuCtx({
+const { updateOption, ids } = setSubMenuCtx({
   positioning,
   disabled,
   arrowSize
@@ -15,4 +15,4 @@ $:
   updateOption("arrowSize", arrowSize);
 </script>
 
-<slot />
+<slot subIds={ids} />

package/dist/bits/dropdown-menu/components/DropdownMenuSub.svelte.d.ts

@@ -9,7 +9,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            subIds: {
+                menu: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type DropdownMenuSubProps = typeof __propDef.props;

package/dist/bits/dropdown-menu/ctx.d.ts

@@ -5,6 +5,10 @@ export declare const getAttrs: (part: "arrow" | "label" | "radio-group" | "separ
 export declare function getCtx(): DropdownMenuReturn;
 export declare function setCtx(props: CreateDropdownMenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    ids: {
+        menu: string;
+        trigger: string;
+    };
     elements: {
         trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "pointerdown">, ([$rootOpen]: [boolean]) => {
             readonly 'aria-controls': string;

package/dist/bits/link-preview/components/LinkPreview.svelte

@@ -10,7 +10,8 @@ export let arrowSize = void 0;
 export let portal = void 0;
 const {
   states: { open: localOpen },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   defaultOpen: open,
   positioning,
@@ -46,4 +47,4 @@ $:
   updateOption("portal", portal);
 </script>
 
-<slot />
+<slot {ids} />

package/dist/bits/link-preview/components/LinkPreview.svelte.d.ts

@@ -16,7 +16,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            ids: {
+                content: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type LinkPreviewProps = typeof __propDef.props;

package/dist/bits/menubar/components/Menubar.svelte

@@ -5,7 +5,8 @@ export let closeOnEscape = true;
 export let asChild = false;
 const {
   elements: { menubar },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({ loop, closeOnEscape });
 $:
   updateOption("loop", loop);
@@ -17,9 +18,9 @@ const attrs = getAttrs("root");
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} {attrs} {ids} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {builder} {attrs} {ids} />
 	</div>
 {/if}

package/dist/bits/menubar/components/Menubar.svelte.d.ts

@@ -233,6 +233,9 @@ declare const __propDef: {
                 };
             };
             attrs: Record<string, string>;
+            ids: {
+                menubar: string;
+            };
         };
     };
 };

package/dist/bits/menubar/components/MenubarMenu.svelte

@@ -14,7 +14,8 @@ export let closeFocus = void 0;
 export let disableFocusFirstItem = void 0;
 const {
   states: { open: localOpen },
-  updateOption
+  updateOption,
+  ids
 } = setMenuCtx({
   closeOnOutsideClick,
   closeOnEscape,
@@ -61,4 +62,4 @@ $:
   updateOption("typeahead", typeahead);
 </script>
 
-<slot />
+<slot menuIds={ids} />

package/dist/bits/menubar/components/MenubarMenu.svelte.d.ts

@@ -20,7 +20,11 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            menuIds: {
+                menubar: string;
+            };
+        };
     };
 };
 export type MenubarMenuProps = typeof __propDef.props;

package/dist/bits/menubar/components/MenubarSub.svelte

@@ -2,7 +2,7 @@
 export let positioning = void 0;
 export let disabled = void 0;
 export let arrowSize = void 0;
-const { updateOption } = setSubMenuCtx({
+const { updateOption, ids } = setSubMenuCtx({
   positioning,
   disabled,
   arrowSize
@@ -15,4 +15,4 @@ $:
   updateOption("arrowSize", arrowSize);
 </script>
 
-<slot />
+<slot subIds={ids} />

package/dist/bits/menubar/components/MenubarSub.svelte.d.ts

@@ -9,7 +9,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            subIds: {
+                menu: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type MenubarSubProps = typeof __propDef.props;

package/dist/bits/menubar/ctx.d.ts

@@ -196,8 +196,8 @@ export declare function setCtx(props: MenubarProps): {
                 onOpenChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined> | undefined;
                 forceVisible: import("svelte/store").Writable<boolean>;
                 typeahead: import("svelte/store").Writable<boolean>;
-                closeFocus?: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined> | undefined;
-                disableFocusFirstItem?: import("svelte/store").Writable<boolean | undefined> | undefined;
+                closeFocus: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined>;
+                disableFocusFirstItem: import("svelte/store").Writable<boolean>;
             };
         };
     };
@@ -384,8 +384,8 @@ export declare function setMenuCtx(props: CreateMenubarMenuProps): {
         onOpenChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined> | undefined;
         forceVisible: import("svelte/store").Writable<boolean>;
         typeahead: import("svelte/store").Writable<boolean>;
-        closeFocus?: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined> | undefined;
-        disableFocusFirstItem?: import("svelte/store").Writable<boolean | undefined> | undefined;
+        closeFocus: import("svelte/store").Writable<import("@melt-ui/svelte").FocusProp | undefined>;
+        disableFocusFirstItem: import("svelte/store").Writable<boolean>;
     };
 };
 export declare function getMenuCtx(): MenubarMenuReturn;

package/dist/bits/popover/components/Popover.svelte

@@ -1,6 +1,4 @@
 <script>import { setCtx } from "../ctx.js";
-import { isBrowser } from "../../../internal/is.js";
-import { tick } from "svelte";
 export let positioning = void 0;
 export let arrowSize = void 0;
 export let disableFocusTrap = void 0;
@@ -10,13 +8,12 @@ export let preventScroll = void 0;
 export let portal = void 0;
 export let open = void 0;
 export let onOpenChange = void 0;
-export let focusTriggerOnClose = false;
 export let openFocus = void 0;
 export let closeFocus = void 0;
 const {
   updateOption,
   states: { open: localOpen },
-  ids: { trigger }
+  ids
 } = setCtx({
   positioning,
   arrowSize,
@@ -28,25 +25,14 @@ const {
   defaultOpen: open,
   openFocus,
   closeFocus,
-  onOpenChange: ({ next, curr }) => {
-    return customOnOpenChange({ next, curr });
-  }
-});
-const customOnOpenChange = ({ next }) => {
-  if (open === next)
+  onOpenChange: ({ next }) => {
+    if (open !== next) {
+      onOpenChange?.(next);
+      open = next;
+    }
     return next;
-  if (next === false && focusTriggerOnClose && isBrowser) {
-    tick().then(() => {
-      const triggerEl = document.getElementById(trigger);
-      if (triggerEl) {
-        triggerEl.focus();
-      }
-    });
   }
-  onOpenChange?.(next);
-  open = next;
-  return next;
-};
+});
 $:
   open !== void 0 && localOpen.set(open);
 $:
@@ -69,4 +55,4 @@ $:
   updateOption("closeFocus", closeFocus);
 </script>
 
-<slot />
+<slot {ids} />

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

@@ -13,13 +13,17 @@ declare const __propDef: {
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         open?: boolean | undefined;
         onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;
-        focusTriggerOnClose?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            ids: {
+                content: string;
+                trigger: string;
+            };
+        };
     };
 };
 export type PopoverProps = typeof __propDef.props;

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

@@ -5,14 +5,6 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 type Props = Expand<OmitOpen<CreatePopoverProps> & {
     open?: boolean;
     onOpenChange?: OnChangeFn<boolean>;
-    /**
-     * Focus the trigger when `open` is programmatically set to false.
-     * This is in addition to the automatic focus that occurs when you
-     * don't programmatically set `open` to false.
-     *
-     * @default false;
-     */
-    focusTriggerOnClose?: boolean;
 }>;
 type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type TriggerProps = AsChild & HTMLButtonAttributes;

package/dist/bits/select/components/Select.svelte

@@ -17,7 +17,8 @@ export let onOpenChange = void 0;
 export let forceVisible = true;
 const {
   states: { open: localOpen, selected: localSelected },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   required,
   disabled,
@@ -78,4 +79,4 @@ $:
   updateOption("forceVisible", forceVisible);
 </script>
 
-<slot />
+<slot {ids} />

package/dist/bits/select/components/Select.svelte.d.ts

@@ -26,7 +26,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            ids: {
+                trigger: string;
+                menu: string;
+                label: string;
+            };
+        };
     };
 };
 type SelectProps_ = typeof __propDef.props;

package/dist/bits/slider/components/Slider.svelte

@@ -11,7 +11,8 @@ export let asChild = false;
 const {
   elements: { root },
   states: { value: localValue },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   disabled,
   min,
@@ -45,9 +46,9 @@ const attrs = getAttrs("root");
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} {attrs} {ids} />
 {:else}
 	<span {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {builder} {attrs} {ids} />
 	</span>
 {/if}

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

@@ -235,6 +235,9 @@ declare const __propDef: {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
             attrs: Record<string, string>;
+            ids: {
+                root: string;
+            };
         };
     };
 };

package/dist/bits/tooltip/components/Tooltip.svelte

@@ -13,7 +13,8 @@ export let disableHoverableContent = void 0;
 export let group = void 0;
 const {
   states: { open: localOpen },
-  updateOption
+  updateOption,
+  ids
 } = setCtx({
   positioning,
   arrowSize,
@@ -58,4 +59,4 @@ $:
   updateOption("disableHoverableContent", disableHoverableContent);
 </script>
 
-<slot />
+<slot {ids} />

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

@@ -18,7 +18,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            ids: {
+                readonly content: string;
+                readonly trigger: string;
+            };
+        };
     };
 };
 export type TooltipProps = typeof __propDef.props;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bits-ui",
-	"version": "0.8.2",
+	"version": "0.8.4",
 	"license": "MIT",
 	"scripts": {
 		"dev": "concurrently \"pnpm:dev:content\" \"pnpm:dev:svelte\"",
@@ -86,7 +86,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.57.0",
+		"@melt-ui/svelte": "0.57.1",
 		"nanoid": "^5.0.2"
 	},
 	"peerDependencies": {