bits-ui 0.0.26 → 0.0.27

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

@@ -3,7 +3,7 @@ export let preventScroll = void 0;
 export let closeOnEscape = void 0;
 export let closeOnOutsideClick = void 0;
 export let portal = void 0;
-export let forceVisible = void 0;
+export let forceVisible = true;
 export let open = void 0;
 export let onOpenChange = void 0;
 const {

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

@@ -3,19 +3,23 @@ import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
 export let asChild = false;
-const content = ctx.get().elements.content;
+const {
+  elements: { content },
+  states: { open }
+} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$content} />
-{:else if transition}
+{#if $open}
 	{@const builder = $content}
-	<div {...builder} use:builder.action {...$$restProps} transition:transition={transitionConfig}>
+	{#if asChild}
 		<slot {builder} />
-	</div>
-{:else}
-	{@const builder = $content}
-	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
-	</div>
+	{:else if transition}
+		<div {...builder} use:builder.action {...$$restProps} transition:transition={transitionConfig}>
+			<slot {builder} />
+		</div>
+	{:else}
+		<div {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{/if}
 {/if}

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

@@ -1,11 +1,17 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 export let asChild = false;
-const overlay = ctx.get().elements.overlay;
+const {
+  elements: { overlay },
+  states: { open }
+} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$overlay} />
-{:else}
-	<div {...$overlay} use:$overlay.action {...$$restProps} />
+{#if $open}
+	{@const builder = $overlay}
+	{#if asChild}
+		<slot {builder} />
+	{:else}
+		<div {...builder} use:builder.action {...$$restProps} />
+	{/if}
 {/if}

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

@@ -216,19 +216,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: {
-                readonly hidden: true | undefined;
-                readonly tabindex: -1;
-                readonly style: string;
-                readonly 'aria-hidden': true;
-                readonly 'data-state': "open" | "closed";
-            } & {
-                [x: `data-melt-${string}`]: "";
-            } & {
-                action: <Node_2 extends unknown>(node: HTMLElement) => {
-                    destroy(): void;
-                };
-            };
+            builder: any;
         };
     };
 };

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

@@ -7,13 +7,11 @@ const {
 } = ctx.get();
 </script>
 
-{#if $open}
+{#if asChild}
+	<slot builder={$portalled} />
+{:else}
 	{@const builder = $portalled}
-	{#if asChild}
-		<slot builder={$portalled} />
-	{:else}
-		<div {...builder} use:builder.action {...$$restProps}>
-			<slot {builder} />
-		</div>
-	{/if}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
 {/if}

package/dist/bits/alert-dialog/ctx.js

@@ -5,8 +5,7 @@ const NAME = "AlertDialog";
 function set(props) {
     const alertDialog = createDialog({
         ...removeUndefined(props),
-        role: "alertdialog",
-        forceVisible: true
+        role: "alertdialog"
     });
     setContext(NAME, alertDialog);
     return {

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

@@ -1,4 +1,5 @@
-<script>import { melt } from "@melt-ui/svelte";
+<script>import Overlay from "../../../internal/overlay.svelte";
+import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 export let sideOffset = 5;
 export let transition = void 0;
@@ -11,14 +12,17 @@ const {
 </script>
 
 {#if $open}
+	<Overlay />
 	{@const builder = $menu}
 	{#if asChild}
 		<slot {builder} />
 	{:else if transition}
+		<Overlay />
 		<div {...builder} use:builder.action {...$$restProps} on:m-keydown transition:transition={transitionConfig}>
 			<slot {builder} />
 		</div>
 	{:else}
+		<Overlay />
 		<div {...builder} use:builder.action {...$$restProps} on:m-keydown>
 			<slot {builder} />
 		</div>

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

@@ -3,7 +3,7 @@ export let preventScroll = void 0;
 export let closeOnEscape = void 0;
 export let closeOnOutsideClick = void 0;
 export let portal = void 0;
-export let forceVisible = void 0;
+export let forceVisible = true;
 export let open = void 0;
 export let onOpenChange = void 0;
 const {

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

@@ -3,19 +3,24 @@ import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
 export let asChild = false;
-const content = ctx.get().elements.content;
+const {
+  elements: { content },
+  states: { open }
+} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$content} />
-{:else if transition}
-	{@const builder = $content}
-	<div {...builder} use:builder.action {...$$restProps} transition:transition={transitionConfig}>
-		<slot {builder} />
-	</div>
-{:else}
-	{@const builder = $content}
-	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
-	</div>
+{#if $open}
+	{#if asChild}
+		<slot builder={$content} />
+	{:else if transition}
+		{@const builder = $content}
+		<div {...builder} use:builder.action {...$$restProps} transition:transition={transitionConfig}>
+			<slot {builder} />
+		</div>
+	{:else}
+		{@const builder = $content}
+		<div {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{/if}
 {/if}

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

@@ -1,11 +1,17 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 export let asChild = false;
-const overlay = ctx.get().elements.overlay;
+const {
+  elements: { overlay },
+  states: { open }
+} = ctx.get();
 </script>
 
-{#if asChild}
-	<slot builder={$overlay} />
-{:else}
-	<div {...$overlay} use:$overlay.action {...$$restProps} />
+{#if $open}
+	{@const builder = $overlay}
+	{#if asChild}
+		<slot {builder} />
+	{:else}
+		<div {...builder} use:builder.action {...$$restProps} />
+	{/if}
 {/if}

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

@@ -216,19 +216,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: {
-                readonly hidden: true | undefined;
-                readonly tabindex: -1;
-                readonly style: string;
-                readonly 'aria-hidden': true;
-                readonly 'data-state': "open" | "closed";
-            } & {
-                [x: `data-melt-${string}`]: "";
-            } & {
-                action: <Node_2 extends unknown>(node: HTMLElement) => {
-                    destroy(): void;
-                };
-            };
+            builder: any;
         };
     };
 };

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

@@ -1,13 +1,10 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 const {
-  elements: { portalled },
-  states: { open }
+  elements: { portalled }
 } = ctx.get();
 </script>
 
-{#if $open}
-	<div {...$portalled} use:$portalled.action {...$$restProps}>
-		<slot />
-	</div>
-{/if}
+<div {...$portalled} use:$portalled.action {...$$restProps}>
+	<slot />
+</div>

package/dist/bits/dialog/ctx.js

@@ -7,7 +7,7 @@ export const ctx = {
     get
 };
 function set(props) {
-    const dialog = createDialog({ ...removeUndefined(props), role: "dialog", forceVisible: true });
+    const dialog = createDialog({ ...removeUndefined(props), role: "dialog" });
     setContext(NAME, dialog);
     return {
         ...dialog,

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

@@ -1,4 +1,5 @@
-<script>import { melt } from "@melt-ui/svelte";
+<script>import Overlay from "../../../internal/overlay.svelte";
+import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 export let sideOffset = 5;
 export let transition = void 0;
@@ -12,6 +13,7 @@ const {
 
 <!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if $open}
+	<Overlay />
 	{@const builder = $menu}
 	{#if asChild}
 		<slot {builder} />

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

@@ -1,4 +1,5 @@
-<script>import { melt } from "@melt-ui/svelte";
+<script>import Overlay from "../../../internal/overlay.svelte";
+import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
@@ -12,6 +13,7 @@ const {
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 
 {#if $open}
+	<Overlay />
 	{@const builder = $menu}
 	{#if asChild}
 		<slot {builder} />

package/dist/internal/helpers.d.ts

@@ -22,4 +22,6 @@ export declare function disabledAttrs(disabled: boolean): {
     "data-disabled"?: undefined;
 };
 export declare function bitWrap<T extends object>(storeValues: T, bit: string): T;
+export declare function sleep(ms: number): Promise<unknown>;
+export declare function styleToString(style: Record<string, number | string | undefined>): string;
 export {};

package/dist/internal/helpers.js

@@ -61,3 +61,13 @@ export function bitWrap(storeValues, bit) {
         [`data-bits-${bit}`]: ""
     };
 }
+export function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+export function styleToString(style) {
+    return Object.keys(style).reduce((str, key) => {
+        if (style[key] === undefined)
+            return str;
+        return str + `${key}:${style[key]};`;
+    }, "");
+}

package/dist/internal/overlay.svelte

@@ -0,0 +1,10 @@
+<script>import { styleToString } from ".";
+</script>
+
+<div
+	style={styleToString({
+		position: "fixed",
+		inset: 0,
+		"z-index": 50
+	})}
+/>

package/dist/internal/overlay.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OverlayProps = typeof __propDef.props;
+export type OverlayEvents = typeof __propDef.events;
+export type OverlaySlots = typeof __propDef.slots;
+export default class Overlay extends SvelteComponent<OverlayProps, OverlayEvents, OverlaySlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "license": "MIT",
   "exports": {
     ".": {
@@ -47,6 +47,7 @@
     "svelte-wrap-balancer": "^0.0.4",
     "tailwind-variants": "^0.1.13",
     "tailwindcss": "^3.3.2",
+    "tailwindcss-animate": "^1.0.6",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "unist-util-visit": "^5.0.0",