bits-ui 0.0.33 → 0.5.1

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

@@ -19,7 +19,6 @@ export declare const ctx: {
     getRadioIndicator: typeof getRadioIndicator;
     getCheckboxIndicator: typeof getCheckboxIndicator;
 };
-declare function get(): MenubarReturn;
 declare function set(props: MenubarProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
@@ -210,7 +209,7 @@ declare function set(props: MenubarProps): {
         closeOnEscape: import("svelte/store").Writable<boolean>;
     };
 };
-declare function getMenu(): MenubarMenuReturn;
+declare function get(): MenubarReturn;
 declare function setMenu(props: CreateMenubarMenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
@@ -381,6 +380,7 @@ declare function setMenu(props: CreateMenubarMenuProps): {
         forceVisible: import("svelte/store").Writable<boolean>;
     };
 };
+declare function getMenu(): MenubarMenuReturn;
 declare function setSub(props: CreateMenubarSubmenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/bits/menubar/ctx.js

@@ -26,9 +26,6 @@ export const ctx = {
     getRadioIndicator,
     getCheckboxIndicator
 };
-function get() {
-    return getContext(NAME);
-}
 function set(props) {
     const menubar = createMenubar(removeUndefined(props));
     setContext(NAME, menubar);
@@ -37,8 +34,8 @@ function set(props) {
         updateOption: getOptionUpdater(menubar.options)
     };
 }
-function getMenu() {
-    return getContext(MENU_NAME);
+function get() {
+    return getContext(NAME);
 }
 function setMenu(props) {
     const { builders: { createMenu } } = get();
@@ -49,6 +46,9 @@ function setMenu(props) {
         updateOption: getOptionUpdater(menu.options)
     };
 }
+function getMenu() {
+    return getContext(MENU_NAME);
+}
 function setSub(props) {
     const { builders: { createSubmenu } } = getMenu();
     const sub = createSubmenu(removeUndefined(props));

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

@@ -1,6 +1,6 @@
-import type { AsChild, Expand, HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue, OnChangeFn } from "../../internal/index.js";
-import type { DivEventHandler, ButtonEventHandler } from "../../index.js";
-import type { CreateMenubarProps, CreateMenubarMenuProps, CreateMenuCheckboxItemProps, CreateMenuRadioGroupProps, MenubarRadioItemProps, CreateMenubarSubmenuProps, MenubarComponentEvents } from "@melt-ui/svelte";
+import type { AsChild, Expand, HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
+import type { CustomEventHandler } from "../../index.js";
+import type { CreateMenubarProps, CreateMenubarMenuProps, CreateMenuCheckboxItemProps, CreateMenuRadioGroupProps, MenubarRadioItemProps, CreateMenubarSubmenuProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 type Props = Expand<CreateMenubarProps & AsChild> & HTMLDivAttributes;
 type MenuProps = Expand<OmitOpen<CreateMenubarMenuProps> & {
@@ -16,9 +16,9 @@ type RadioGroupProps = Expand<OmitValue<CreateMenuRadioGroupProps> & {
     value?: CreateMenuRadioGroupProps["defaultValue"] & {};
     onValueChange?: OnChangeFn<CreateMenuRadioGroupProps["defaultValue"]>;
 } & AsChild> & HTMLDivAttributes;
-type ContentProps = Expand<{
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<{
     sideOffset?: number;
-} & AsChild> & HTMLDivAttributes;
+} & TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type GroupProps = AsChild & HTMLDivAttributes;
 type ItemProps = Expand<{
     disabled?: boolean;
@@ -28,7 +28,9 @@ type LabelProps = AsChild & HTMLDivAttributes;
 type RadioItemProps = Expand<MenubarRadioItemProps & AsChild> & HTMLDivAttributes;
 type SeparatorProps = AsChild & HTMLDivAttributes;
 type SubProps = Expand<CreateMenubarSubmenuProps>;
-type SubContentProps = AsChild & HTMLDivAttributes;
+type SubContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<{
+    sideOffset?: number;
+} & TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type SubTriggerProps = Expand<{
     disabled?: boolean;
 } & AsChild> & HTMLDivAttributes;
@@ -36,17 +38,29 @@ type TriggerProps = AsChild & HTMLButtonAttributes;
 type ArrowProps = Expand<{
     size?: number;
 } & AsChild> & HTMLDivAttributes;
-type ItemEvents = {
-    "m-click": DivEventHandler<MouseEvent>;
-    "m-keydown": DivEventHandler<KeyboardEvent>;
+type ItemEvents<T extends Element = HTMLDivElement> = {
+    click: CustomEventHandler<PointerEvent, T>;
+    focusin: CustomEventHandler<FocusEvent, T>;
+    focusout: CustomEventHandler<FocusEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    pointerdown: CustomEventHandler<PointerEvent, T>;
+    pointerleave: CustomEventHandler<PointerEvent, T>;
+    pointermove: CustomEventHandler<PointerEvent, T>;
 };
+type SubTriggerEvents<T extends Element = HTMLDivElement> = Expand<Omit<ItemEvents<T>, "pointerdown">>;
 type CheckboxItemEvents = ItemEvents;
 type RadioItemEvents = ItemEvents;
-type SubTriggerEvents = ItemEvents;
-type TriggerEvents = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+type TriggerEvents<T extends Element = HTMLButtonElement> = {
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    click: CustomEventHandler<MouseEvent, T>;
+    pointerenter: CustomEventHandler<PointerEvent, T>;
+};
+type ContentEvents<T extends Element = HTMLDivElement> = {
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+};
+type SubContentEvents<T extends Element = HTMLDivElement> = {
+    focusout: CustomEventHandler<FocusEvent, T>;
+    pointermove: CustomEventHandler<PointerEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
 };
-type ContentEvents = MenubarComponentEvents["menu"];
-type SubContentEvents = MenubarComponentEvents["submenu"];
 export type { Props, SubProps, MenuProps, ItemProps, ArrowProps, GroupProps, LabelProps, TriggerProps, ContentProps, RadioItemProps, SeparatorProps, RadioGroupProps, SubContentProps, SubTriggerProps, CheckboxItemProps, CheckboxItemIndicatorProps, Props as MenubarProps, SubProps as MenubarSubProps, MenuProps as MenubarMenuProps, ItemProps as MenubarItemProps, ArrowProps as MenubarArrowProps, GroupProps as MenubarGroupProps, LabelProps as MenubarLabelProps, ContentProps as MenubarContentProps, TriggerProps as MenubarTriggerProps, RadioItemProps as MenubarRadioItemProps, SeparatorProps as MenubarSeparatorProps, SubContentProps as MenubarSubContentProps, SubTriggerProps as MenubarSubTriggerProps, RadioGroupProps as MenubarRadioGroupProps, CheckboxItemProps as MenubarCheckboxItemProps, CheckboxItemIndicatorProps as MenubarCheckboxItemIndicatorProps, TriggerEvents, ItemEvents, SubTriggerEvents, CheckboxItemEvents, RadioItemEvents, ContentEvents, SubContentEvents, TriggerEvents as MenubarTriggerEvents, ItemEvents as MenubarItemEvents, SubTriggerEvents as MenubarSubTriggerEvents, CheckboxItemEvents as MenubarCheckboxItemEvents, RadioItemEvents as MenubarRadioItemEvents, ContentEvents as MenubarContentEvents, SubContentEvents as MenubarSubContentEvents };

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

@@ -21,8 +21,10 @@ const {
   portal,
   defaultOpen: open,
   onOpenChange: ({ next }) => {
-    onOpenChange?.(next);
-    open = next;
+    if (open !== next) {
+      onOpenChange?.(next);
+      open = next;
+    }
     return next;
   }
 });

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

@@ -1,14 +1,18 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
-const close = ctx.get().elements.close;
+const {
+  elements: { close }
+} = ctx.get();
+const dispatch = createDispatcher();
 </script>
 
 {#if asChild}
 	<slot builder={$close} />
 {:else}
 	{@const builder = $close}
-	<button {...builder} use:builder.action {...$$restProps} on:m-click on:m-keydown>
+	<button {...builder} use:builder.action {...$$restProps} on:m-click={dispatch} on:m-keydown={dispatch}>
 		<slot {builder} />
 	</button>
 {/if}

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

@@ -2,6 +2,10 @@
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { content },
@@ -9,17 +13,37 @@ const {
 } = ctx.get();
 </script>
 
-{#if $open}
+{#if asChild && $open}
 	{@const builder = $content}
-	{#if asChild}
+	<slot {builder} />
+{:else if transition && $open}
+	{@const builder = $content}
+	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	{@const builder = $content}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $open}
+	{@const builder = $content}
+	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $open}
+	{@const builder = $content}
+	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if $open}
+	{@const builder = $content}
+	<div {...$$restProps}>
 		<slot {builder} />
-	{:else if transition}
-		<div {...$$restProps} {...builder} use:builder.action transition:transition={transitionConfig}>
-			<slot {builder} />
-		</div>
-	{:else}
-		<div {...builder} use:builder.action {...$$restProps}>
-			<slot {builder} />
-		</div>
-	{/if}
+	</div>
 {/if}

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

@@ -1,9 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/index.js";
-declare class __sveltets_Render<T extends Transition> {
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/index.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/index.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/index.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -223,9 +227,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type PopoverContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type PopoverContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type PopoverContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class PopoverContent<T extends Transition> extends SvelteComponent<PopoverContentProps<T>, PopoverContentEvents<T>, PopoverContentSlots<T>> {
+export type PopoverContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type PopoverContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type PopoverContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class PopoverContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<PopoverContentProps<T, In, Out>, PopoverContentEvents<T, In, Out>, PopoverContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -1,14 +1,18 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
-const trigger = ctx.get().elements.trigger;
+const {
+  elements: { trigger }
+} = ctx.get();
+const dispatch = createDispatcher();
 </script>
 
 {#if asChild}
 	<slot builder={$trigger} />
 {:else}
 	{@const builder = $trigger}
-	<button {...builder} use:builder.action {...$$restProps} on:m-click on:m-keydown>
+	<button {...builder} use:builder.action {...$$restProps} on:m-click={dispatch} on:m-keydown={dispatch}>
 		<slot {builder} />
 	</button>
 {/if}

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

@@ -1,23 +1,20 @@
-import type { OmitOpen, Expand, HTMLDivAttributes, Transition, TransitionParams, OnChangeFn, AsChild } from "../../internal/index.js";
-import type { ButtonEventHandler } from "../../index.js";
+import type { OmitOpen, Expand, HTMLDivAttributes, Transition, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
+import type { CustomEventHandler } from "../../index.js";
 import type { CreatePopoverProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 type Props = Expand<OmitOpen<CreatePopoverProps> & {
     open?: CreatePopoverProps["defaultOpen"];
     onOpenChange?: OnChangeFn<CreatePopoverProps["defaultOpen"]>;
 }>;
-type ContentProps<T extends Transition = Transition> = Expand<{
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+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;
 type CloseProps = AsChild & HTMLButtonAttributes;
 type ArrowProps = Expand<{
     size?: number;
 } & AsChild> & HTMLDivAttributes;
-type TriggerEvents = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+type TriggerEvents<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
 };
 type CloseEvents = TriggerEvents;
 export type { Props, CloseProps, ArrowProps, ContentProps, TriggerProps, Props as PopoverProps, ArrowProps as PopoverArrowProps, CloseProps as PopoverCloseProps, ContentProps as PopoverContentProps, TriggerProps as PopoverTriggerProps, TriggerEvents, CloseEvents, TriggerEvents as PopoverTriggerEvents, CloseEvents as PopoverCloseEvents };

package/dist/bits/radio-group/components/RadioGroup.svelte

@@ -18,8 +18,10 @@ const {
   loop,
   orientation,
   onValueChange: ({ next }) => {
-    onValueChange?.(next);
-    value = next;
+    if (value !== next) {
+      onValueChange?.(next);
+      value = next;
+    }
     return next;
   }
 });

package/dist/bits/radio-group/components/RadioGroupInput.svelte

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

package/dist/bits/radio-group/components/RadioGroupInput.svelte.d.ts

@@ -251,19 +251,17 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: ((props: import("@melt-ui/svelte/index.js").RadioGroupItemProps) => ((props: import("@melt-ui/svelte/index.js").RadioGroupItemProps) => {
-                type: string;
+            builder: {
                 'aria-hidden': boolean;
                 tabindex: number;
-                value: string;
-                checked: boolean;
                 disabled: boolean;
-            }) & {
+                value: string;
+                required: boolean;
+                style: string;
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
-                action: import("svelte/action").Action<any, any, Record<never, any>>;
-            }) & {
-                action: import("svelte/action").Action<any, any, Record<never, any>>;
+                action: (_node: HTMLInputElement) => void;
             };
         };
     };

package/dist/bits/radio-group/components/RadioGroupItem.svelte

@@ -1,16 +1,26 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
 export let value;
 export let disabled = false;
 export let asChild = false;
-const item = ctx.setItem(value).elements.item;
+const {
+  elements: { item }
+} = ctx.setItem(value);
+const dispatch = createDispatcher();
 </script>
 
 {#if asChild}
 	<slot builder={$item} />
 {:else}
 	{@const builder = $item({ value, disabled })}
-	<button {...builder} use:builder.action {...$$restProps} on:m-click on:m-focus on:m-keydown>
+	<button
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-click={dispatch}
+		on:m-focus={dispatch}
+		on:m-keydown={dispatch}
+	>
 		<slot {builder} />
 	</button>
 {/if}

package/dist/bits/radio-group/ctx.d.ts

@@ -30,17 +30,17 @@ declare function set(props: CreateRadioGroupProps): {
             readonly role: "radio";
             readonly tabindex: 0 | -1;
         }, string>;
-        itemInput: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, {
+        hiddenInput: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, {
             update: (updater: import("svelte/store").Updater<string>, sideEffect?: ((newValue: string) => void) | undefined) => void;
             set: (this: void, value: string) => void;
             subscribe(this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined): import("svelte/store").Unsubscriber;
-        }], import("svelte/action").Action<any, any, Record<never, any>>, ([$disabled, $value]: [boolean, string]) => (props: import("@melt-ui/svelte").RadioGroupItemProps) => {
-            type: string;
+        }, import("svelte/store").Writable<boolean>], (_node: HTMLInputElement) => void, ([$disabled, $value, $required]: [boolean, string, boolean]) => {
             'aria-hidden': boolean;
             tabindex: number;
-            value: string;
-            checked: boolean;
             disabled: boolean;
+            value: string;
+            required: boolean;
+            style: string;
         }, string>;
     };
     states: {

package/dist/bits/radio-group/types.d.ts

@@ -1,5 +1,5 @@
 import type { Expand, HTMLDivAttributes, OmitValue, OnChangeFn, ObjectVariation, AsChild } from "../../internal/index.js";
-import type { ButtonEventHandler } from "../../index.js";
+import type { CustomEventHandler } from "../../index.js";
 import type { CreateRadioGroupProps, RadioGroupItemProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
 type Props = Expand<OmitValue<CreateRadioGroupProps> & {
@@ -8,8 +8,9 @@ type Props = Expand<OmitValue<CreateRadioGroupProps> & {
 } & AsChild> & HTMLDivAttributes;
 type InputProps = AsChild & HTMLInputAttributes;
 type ItemProps = Expand<ObjectVariation<RadioGroupItemProps> & AsChild> & HTMLButtonAttributes;
-type ItemEvents = {
-    "m-click": ButtonEventHandler<MouseEvent>;
-    "m-keydown": ButtonEventHandler<KeyboardEvent>;
+type ItemEvents<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    focus: CustomEventHandler<FocusEvent, T>;
 };
 export type { Props, InputProps, ItemProps, Props as RadioGroupProps, InputProps as RadioGroupInputProps, ItemProps as RadioGroupItemProps, ItemEvents, ItemEvents as RadioGroupItemEvents };

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

@@ -10,13 +10,13 @@ export let portal = void 0;
 export let positioning = void 0;
 export let name = void 0;
 export let multiple = void 0;
-export let value = void 0;
-export let onValueChange = void 0;
+export let selected = void 0;
+export let onSelectedChange = void 0;
 export let open = void 0;
 export let onOpenChange = void 0;
-export let label = void 0;
+export let forceVisible = true;
 const {
-  states: { open: localOpen, value: localValue },
+  states: { open: localOpen, selected: localSelected },
   updateOption
 } = ctx.set({
   required,
@@ -30,24 +30,28 @@ const {
   positioning,
   name,
   multiple,
-  defaultValue: value,
+  forceVisible,
+  defaultSelected: selected,
   defaultOpen: open,
-  defaultValueLabel: label,
-  onValueChange: ({ next }) => {
-    onValueChange?.(next);
-    value = next;
+  onSelectedChange: ({ next }) => {
+    if (selected !== next) {
+      onSelectedChange?.(next);
+      selected = next;
+    }
     return next;
   },
   onOpenChange: ({ next }) => {
-    onOpenChange?.(next);
-    open = next;
+    if (open !== next) {
+      onOpenChange?.(next);
+      open = next;
+    }
     return next;
   }
 });
 $:
   open !== void 0 && localOpen.set(open);
 $:
-  value !== void 0 && localValue.set(value);
+  selected !== void 0 && localSelected.set(selected);
 $:
   updateOption("required", required);
 $:
@@ -70,6 +74,8 @@ $:
   updateOption("name", name);
 $:
   updateOption("multiple", multiple);
+$:
+  updateOption("forceVisible", forceVisible);
 </script>
 
 <slot />

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { SelectProps } from "../types.js";
 declare const __propDef: {
     props: {
+        forceVisible?: boolean | undefined;
         multiple?: false | undefined;
         disabled?: boolean | undefined;
         preventScroll?: boolean | undefined;
@@ -13,11 +14,10 @@ declare const __propDef: {
         positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
         arrowSize?: number | undefined;
         loop?: boolean | undefined;
-        value?: any;
-        onValueChange?: import("../../../internal/types.js").OnChangeFn<any> | undefined;
+        selected?: import("@melt-ui/svelte/index.js").SelectOption<unknown> | undefined;
+        onSelectedChange?: import("../../../internal/types.js").OnChangeFn<import("@melt-ui/svelte/index.js").SelectOption<unknown> | undefined> | undefined;
         open?: boolean | undefined;
         onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean | undefined> | undefined;
-        label?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,27 +1,73 @@
-<script>import { melt } from "@melt-ui/svelte";
+<script>import { createDispatcher } from "../../../internal/events.js";
+import { melt } from "@melt-ui/svelte";
+import Overlay from "../../../internal/overlay.svelte";
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { menu },
   states: { open }
 } = ctx.get();
+const dispatch = createDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 
 {#if $open}
+	<Overlay />
+{/if}
+{#if asChild && $open}
+	{@const builder = $menu}
+	<slot {builder} />
+{:else if transition && $open}
+	{@const builder = $menu}
+	<div
+		transition:transition={transitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	{@const builder = $menu}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $open}
+	{@const builder = $menu}
+	<div
+		in:inTransition={inTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $open}
+	{@const builder = $menu}
+	<div
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{:else if $open}
 	{@const builder = $menu}
-	{#if asChild}
+	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
 		<slot {builder} />
-	{:else if transition}
-		<div {...builder} use:builder.action {...$$restProps} on:m-keydown transition:transition={transitionConfig}>
-			<slot {builder} />
-		</div>
-	{:else}
-		<div {...builder} use:builder.action {...$$restProps} on:m-keydown>
-			<slot {builder} />
-		</div>
-	{/if}
+	</div>
 {/if}

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

@@ -1,9 +1,14 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/types.js";
-declare class __sveltets_Render<T extends Transition> {
+import type { ContentEvents } from "../types.js";
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/types.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/types.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/types.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -214,18 +219,16 @@ declare class __sveltets_Render<T extends Transition> {
         'on:fullscreenchange'?: import("svelte/elements.js").EventHandler<Event, HTMLDivElement> | null | undefined;
         'on:fullscreenerror'?: import("svelte/elements.js").EventHandler<Event, HTMLDivElement> | null | undefined;
     };
-    events(): {
-        "m-keydown"?: import("@melt-ui/svelte/internal/types").MeltEventHandler<KeyboardEvent> | undefined;
-    };
+    events(): ContentEvents;
     slots(): {
         default: {
             builder: any;
         };
     };
 }
-export type SelectContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type SelectContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type SelectContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class SelectContent<T extends Transition> extends SvelteComponent<SelectContentProps<T>, SelectContentEvents<T>, SelectContentSlots<T>> {
+export type SelectContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type SelectContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type SelectContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class SelectContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<SelectContentProps<T, In, Out>, SelectContentEvents<T, In, Out>, SelectContentSlots<T, In, Out>> {
 }
 export {};