bits-ui 0.8.0 → 0.8.1

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

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

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

@@ -74,7 +74,7 @@ declare const __propDef: {
         'aria-atomic'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-autocomplete'?: "list" | "none" | "inline" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;
         'aria-colindex'?: number | null | undefined;
         'aria-colspan'?: number | null | undefined;
@@ -88,7 +88,7 @@ declare const __propDef: {
         'aria-expanded'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-flowto'?: string | null | undefined;
         'aria-grabbed'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-haspopup'?: import("svelte/elements.js").Booleanish | "dialog" | "grid" | "listbox" | "menu" | "tree" | null | undefined;
+        'aria-haspopup'?: "dialog" | import("svelte/elements.js").Booleanish | "grid" | "listbox" | "menu" | "tree" | null | undefined;
         'aria-hidden'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-invalid'?: import("svelte/elements.js").Booleanish | "grammar" | "spelling" | null | undefined;
         'aria-keyshortcuts'?: string | null | undefined;
@@ -103,7 +103,7 @@ declare const __propDef: {
         'aria-owns'?: string | null | undefined;
         'aria-placeholder'?: string | null | undefined;
         'aria-posinset'?: number | null | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-pressed'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-readonly'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined;
         'aria-required'?: import("svelte/elements.js").Booleanish | null | undefined;
@@ -224,7 +224,20 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: any;
+            builder: {
+                readonly 'aria-controls': string;
+                readonly 'aria-expanded': boolean;
+                readonly 'data-state': "open" | "closed";
+                readonly id: string;
+                readonly 'aria-haspopup': "menu";
+                readonly 'data-orientation': "horizontal";
+                readonly role: "menuitem";
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "pointerenter">;
+            };
+            attrs: Record<string, string>;
         };
     };
     events: TriggerEvents;

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

@@ -1,25 +1,8 @@
 /// <reference types="svelte" />
 import { type Menubar as MenubarReturn, type CreateMenubarProps as MenubarProps, type MenubarMenu as MenubarMenuReturn, type MenubarMenuRadioGroup as MenubarRadioGroupReturn, type CreateMenuRadioGroupProps, type CreateMenubarSubmenuProps, type CreateMenubarMenuProps, type MenubarMenuSubmenu as MenubarSubReturn, type CreateMenuCheckboxItemProps } from "@melt-ui/svelte";
 import type { Readable } from "svelte/store";
-export declare const ctx: {
-    get: typeof get;
-    set: typeof set;
-    setSub: typeof setSub;
-    getSub: typeof getSub;
-    setMenu: typeof setMenu;
-    getMenu: typeof getMenu;
-    setArrow: typeof setArrow;
-    setGroup: typeof setGroup;
-    getContent: typeof getContent;
-    setRadioItem: typeof setRadioItem;
-    getGroupLabel: typeof getGroupLabel;
-    setRadioGroup: typeof setRadioGroup;
-    getSubContent: typeof getSubContent;
-    setCheckboxItem: typeof setCheckboxItem;
-    getRadioIndicator: typeof getRadioIndicator;
-    getCheckboxIndicator: typeof getCheckboxIndicator;
-};
-declare function set(props: MenubarProps): {
+export declare const getAttrs: (part: "arrow" | "label" | "radio-group" | "separator" | "root" | "content" | "item" | "trigger" | "group" | "checkbox-indicator" | "checkbox-item" | "radio-item" | "sub-content" | "sub-trigger") => Record<string, string>;
+export declare function setCtx(props: MenubarProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
         menubar: string;
@@ -96,7 +79,7 @@ declare function set(props: MenubarProps): {
                             readonly role: "menuitemcheckbox";
                             readonly tabindex: -1;
                             readonly 'data-orientation': "vertical";
-                            readonly 'aria-checked': "true" | "false" | "mixed";
+                            readonly 'aria-checked': "false" | "true" | "mixed";
                             readonly 'data-disabled': true | undefined;
                             readonly 'data-state': "checked" | "indeterminate" | "unchecked";
                         }, string>;
@@ -223,8 +206,8 @@ declare function set(props: MenubarProps): {
         closeOnEscape: import("svelte/store").Writable<boolean>;
     };
 };
-declare function get(): MenubarReturn;
-declare function setMenu(props: CreateMenubarMenuProps): {
+export declare function getCtx(): MenubarReturn;
+export declare function setMenuCtx(props: CreateMenubarMenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
         menubar: string;
@@ -284,7 +267,7 @@ declare function setMenu(props: CreateMenubarMenuProps): {
                     readonly role: "menuitemcheckbox";
                     readonly tabindex: -1;
                     readonly 'data-orientation': "vertical";
-                    readonly 'aria-checked': "true" | "false" | "mixed";
+                    readonly 'aria-checked': "false" | "true" | "mixed";
                     readonly 'data-disabled': true | undefined;
                     readonly 'data-state': "checked" | "indeterminate" | "unchecked";
                 }, string>;
@@ -405,8 +388,8 @@ declare function setMenu(props: CreateMenubarMenuProps): {
         disableFocusFirstItem?: import("svelte/store").Writable<boolean | undefined> | undefined;
     };
 };
-declare function getMenu(): MenubarMenuReturn;
-declare function setSub(props: CreateMenubarSubmenuProps): {
+export declare function getMenuCtx(): MenubarMenuReturn;
+export declare function setSubMenuCtx(props: CreateMenubarSubmenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
         menu: string;
@@ -457,8 +440,8 @@ declare function setSub(props: CreateMenubarSubmenuProps): {
         typeahead: import("svelte/store").Writable<true>;
     };
 };
-declare function getSub(): MenubarSubReturn;
-declare function setRadioGroup(props: CreateMenuRadioGroupProps): {
+export declare function getSubMenuCtx(): MenubarSubReturn;
+export declare function setRadioGroupCtx(props: CreateMenuRadioGroupProps): {
     elements: {
         radioGroup: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => {
             role: string;
@@ -489,10 +472,10 @@ declare function setRadioGroup(props: CreateMenuRadioGroupProps): {
         isChecked: Readable<(itemValue: string) => boolean>;
     };
 };
-declare function setRadioItem(value: string): MenubarRadioGroupReturn;
-declare function getContent(sideOffset?: number): MenubarMenuReturn;
-declare function getSubContent(sideOffset?: number): MenubarSubReturn;
-declare function setCheckboxItem(props: CreateMenuCheckboxItemProps): {
+export declare function setRadioItemCtx(value: string): MenubarRadioGroupReturn;
+export declare function getContent(sideOffset?: number): MenubarMenuReturn;
+export declare function getSubContent(sideOffset?: number): MenubarSubReturn;
+export declare function setCheckboxItem(props: CreateMenuCheckboxItemProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
         checkboxItem: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
@@ -503,7 +486,7 @@ declare function setCheckboxItem(props: CreateMenuCheckboxItemProps): {
             readonly role: "menuitemcheckbox";
             readonly tabindex: -1;
             readonly 'data-orientation': "vertical";
-            readonly 'aria-checked': "true" | "false" | "mixed";
+            readonly 'aria-checked': "false" | "true" | "mixed";
             readonly 'data-disabled': true | undefined;
             readonly 'data-state': "checked" | "indeterminate" | "unchecked";
         }, string>;
@@ -519,27 +502,26 @@ declare function setCheckboxItem(props: CreateMenuCheckboxItemProps): {
         disabled: import("svelte/store").Writable<boolean>;
     };
 };
-declare function getCheckboxIndicator(): {
+export declare function getCheckboxIndicator(): {
     update: (updater: import("svelte/store").Updater<boolean | "indeterminate">, sideEffect?: ((newValue: boolean | "indeterminate") => void) | undefined) => void;
     set: (this: void, value: boolean | "indeterminate") => void;
     subscribe(this: void, run: import("svelte/store").Subscriber<boolean | "indeterminate">, invalidate?: import("svelte/store").Invalidator<boolean | "indeterminate"> | undefined): import("svelte/store").Unsubscriber;
 };
-declare function getRadioIndicator(): {
+export declare function getRadioIndicator(): {
     isChecked: Readable<(itemValue: string) => boolean>;
     value: string;
 };
-declare function setGroup(): {
+export declare function setGroupCtx(): {
     group: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => (groupId: string) => {
         role: string;
         'aria-labelledby': string;
     }, string>;
     id: string;
 };
-declare function getGroupLabel(): {
+export declare function getGroupLabel(): {
     groupLabel: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => (groupId: string) => {
         id: string;
     }, string>;
     id: string;
 };
-declare function setArrow(size?: number): MenubarMenuReturn;
-export {};
+export declare function setArrow(size?: number): MenubarMenuReturn;

package/dist/bits/menubar/ctx.js

@@ -1,32 +1,31 @@
 import { createMenubar } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import { generateId, getOptionUpdater, removeUndefined } from "../../internal/index.js";
-const NAME = "Menubar";
-const MENU_NAME = "MenubarMenu";
-const SUB_NAME = "MenubarSub";
-const CHECKBOX_ITEM_NAME = "MenubarCheckboxItem";
-const RADIO_GROUP_NAME = "MenubarRadioGroup";
-const RADIO_ITEM_NAME = "MenubarRadioItem";
-const GROUP_NAME = "MenubarGroup";
-export const ctx = {
-    get,
-    set,
-    setSub,
-    getSub,
-    setMenu,
-    getMenu,
-    setArrow,
-    setGroup,
-    getContent,
-    setRadioItem,
-    getGroupLabel,
-    setRadioGroup,
-    getSubContent,
-    setCheckboxItem,
-    getRadioIndicator,
-    getCheckboxIndicator
-};
-function set(props) {
+import { createBitAttrs, generateId, getOptionUpdater, removeUndefined } from "../../internal/index.js";
+const NAME = "menubar";
+const MENU_NAME = "menubar-menu";
+const SUB_NAME = "menubar-sub";
+const CHECKBOX_ITEM_NAME = "menubar-checkbox-item";
+const RADIO_GROUP_NAME = "menubar-radio-group";
+const RADIO_ITEM_NAME = "menubar-radio-item";
+const GROUP_NAME = "menubar-group";
+const PARTS = [
+    "root",
+    "arrow",
+    "checkbox-indicator",
+    "checkbox-item",
+    "content",
+    "group",
+    "item",
+    "label",
+    "radio-group",
+    "radio-item",
+    "separator",
+    "sub-content",
+    "sub-trigger",
+    "trigger"
+];
+export const getAttrs = createBitAttrs(NAME, PARTS);
+export function setCtx(props) {
     const menubar = createMenubar(removeUndefined(props));
     setContext(NAME, menubar);
     return {
@@ -34,11 +33,11 @@ function set(props) {
         updateOption: getOptionUpdater(menubar.options)
     };
 }
-function get() {
+export function getCtx() {
     return getContext(NAME);
 }
-function setMenu(props) {
-    const { builders: { createMenu } } = get();
+export function setMenuCtx(props) {
+    const { builders: { createMenu } } = getCtx();
     const menu = createMenu({ ...removeUndefined(props), forceVisible: false });
     setContext(MENU_NAME, menu);
     return {
@@ -46,11 +45,11 @@ function setMenu(props) {
         updateOption: getOptionUpdater(menu.options)
     };
 }
-function getMenu() {
+export function getMenuCtx() {
     return getContext(MENU_NAME);
 }
-function setSub(props) {
-    const { builders: { createSubmenu } } = getMenu();
+export function setSubMenuCtx(props) {
+    const { builders: { createSubmenu } } = getMenuCtx();
     const sub = createSubmenu(removeUndefined(props));
     setContext(SUB_NAME, sub);
     return {
@@ -58,32 +57,32 @@ function setSub(props) {
         updateOption: getOptionUpdater(sub.options)
     };
 }
-function getSub() {
+export function getSubMenuCtx() {
     return getContext(SUB_NAME);
 }
-function setRadioGroup(props) {
-    const { builders: { createMenuRadioGroup } } = getMenu();
+export function setRadioGroupCtx(props) {
+    const { builders: { createMenuRadioGroup } } = getMenuCtx();
     const radioGroup = createMenuRadioGroup(removeUndefined(props));
     setContext(RADIO_GROUP_NAME, radioGroup);
     return radioGroup;
 }
-function setRadioItem(value) {
+export function setRadioItemCtx(value) {
     const radioGroup = getContext(RADIO_GROUP_NAME);
     setContext(RADIO_ITEM_NAME, { isChecked: radioGroup.helpers.isChecked, value });
     return radioGroup;
 }
-function getContent(sideOffset = 5) {
-    const menu = getMenu();
+export function getContent(sideOffset = 5) {
+    const menu = getMenuCtx();
     menu.options.positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
     return menu;
 }
-function getSubContent(sideOffset = -1) {
-    const submenu = getSub();
+export function getSubContent(sideOffset = -1) {
+    const submenu = getSubMenuCtx();
     submenu.options.positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
     return submenu;
 }
-function setCheckboxItem(props) {
-    const { builders: { createCheckboxItem } } = getMenu();
+export function setCheckboxItem(props) {
+    const { builders: { createCheckboxItem } } = getMenuCtx();
     const checkboxItem = createCheckboxItem(removeUndefined(props));
     setContext(CHECKBOX_ITEM_NAME, checkboxItem.states.checked);
     return {
@@ -91,25 +90,25 @@ function setCheckboxItem(props) {
         updateOption: getOptionUpdater(checkboxItem.options)
     };
 }
-function getCheckboxIndicator() {
+export function getCheckboxIndicator() {
     return getContext(CHECKBOX_ITEM_NAME);
 }
-function getRadioIndicator() {
+export function getRadioIndicator() {
     return getContext(RADIO_ITEM_NAME);
 }
-function setGroup() {
-    const { elements: { group } } = getMenu();
+export function setGroupCtx() {
+    const { elements: { group } } = getMenuCtx();
     const id = generateId();
     setContext(GROUP_NAME, id);
     return { group, id };
 }
-function getGroupLabel() {
+export function getGroupLabel() {
     const id = getContext(GROUP_NAME) ?? generateId();
-    const { elements: { groupLabel } } = getMenu();
+    const { elements: { groupLabel } } = getMenuCtx();
     return { groupLabel, id };
 }
-function setArrow(size = 8) {
-    const menu = getMenu();
+export function setArrow(size = 8) {
+    const menu = getMenuCtx();
     menu.options.arrowSize.set(size);
     return menu;
 }

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

@@ -1,4 +1,4 @@
-<script>import { ctx } from "../ctx.js";
+<script>import { setCtx } from "../ctx.js";
 export let positioning = void 0;
 export let arrowSize = void 0;
 export let disableFocusTrap = void 0;
@@ -13,7 +13,7 @@ export let closeFocus = void 0;
 const {
   updateOption,
   states: { open: localOpen }
-} = ctx.set({
+} = setCtx({
   positioning,
   arrowSize,
   disableFocusTrap,

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

@@ -5,12 +5,12 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
-        portal?: string | HTMLElement | null | undefined;
-        openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
-        closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
         arrowSize?: number | undefined;
         disableFocusTrap?: boolean | undefined;
+        portal?: string | HTMLElement | null | undefined;
+        openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
+        closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         open?: boolean | undefined;
         onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;
     };

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

@@ -1,14 +1,17 @@
-<script>import { ctx } from "../ctx.js";
+<script>import { setArrow, getAttrs } from "../ctx.js";
 import { melt } from "@melt-ui/svelte";
 export let asChild = false;
 export let size = 8;
 const {
   elements: { arrow }
-} = ctx.setArrow(size);
+} = setArrow(size);
+$:
+  builder = $arrow;
+const attrs = getAttrs("arrow");
 </script>
 
 {#if asChild}
-	<slot builder={$arrow} />
+	<slot {builder} />
 {:else}
-	<div {...$arrow} use:$arrow.action {...$$restProps} />
+	<div {...builder} use:builder.action {...$$restProps} {...attrs} />
 {/if}

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

@@ -64,7 +64,7 @@ declare const __propDef: {
         'aria-atomic'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-autocomplete'?: "list" | "none" | "inline" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;
         'aria-colindex'?: number | null | undefined;
         'aria-colspan'?: number | null | undefined;
@@ -78,7 +78,7 @@ declare const __propDef: {
         'aria-expanded'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-flowto'?: string | null | undefined;
         'aria-grabbed'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-haspopup'?: import("svelte/elements.js").Booleanish | "dialog" | "grid" | "listbox" | "menu" | "tree" | null | undefined;
+        'aria-haspopup'?: "dialog" | import("svelte/elements.js").Booleanish | "grid" | "listbox" | "menu" | "tree" | null | undefined;
         'aria-hidden'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-invalid'?: import("svelte/elements.js").Booleanish | "grammar" | "spelling" | null | undefined;
         'aria-keyshortcuts'?: string | null | undefined;
@@ -93,7 +93,7 @@ declare const __propDef: {
         'aria-owns'?: string | null | undefined;
         'aria-placeholder'?: string | null | undefined;
         'aria-posinset'?: number | null | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-pressed'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-readonly'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined;
         'aria-required'?: import("svelte/elements.js").Booleanish | null | undefined;

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

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

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

@@ -74,7 +74,7 @@ declare const __propDef: {
         'aria-atomic'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-autocomplete'?: "list" | "none" | "inline" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;
         'aria-colindex'?: number | null | undefined;
         'aria-colspan'?: number | null | undefined;
@@ -88,7 +88,7 @@ declare const __propDef: {
         'aria-expanded'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-flowto'?: string | null | undefined;
         'aria-grabbed'?: import("svelte/elements.js").Booleanish | null | undefined;
-        'aria-haspopup'?: import("svelte/elements.js").Booleanish | "dialog" | "grid" | "listbox" | "menu" | "tree" | null | undefined;
+        'aria-haspopup'?: "dialog" | import("svelte/elements.js").Booleanish | "grid" | "listbox" | "menu" | "tree" | null | undefined;
         'aria-hidden'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-invalid'?: import("svelte/elements.js").Booleanish | "grammar" | "spelling" | null | undefined;
         'aria-keyshortcuts'?: string | null | undefined;
@@ -103,7 +103,7 @@ declare const __propDef: {
         'aria-owns'?: string | null | undefined;
         'aria-placeholder'?: string | null | undefined;
         'aria-posinset'?: number | null | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-pressed'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-readonly'?: import("svelte/elements.js").Booleanish | null | undefined;
         'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined;
         'aria-required'?: import("svelte/elements.js").Booleanish | null | undefined;
@@ -224,7 +224,14 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: any;
+            builder: {
+                readonly type: "button";
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;
+            };
+            attrs: Record<string, string>;
         };
     };
     events: TriggerEvents;

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

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { ctx } from "../ctx.js";
+import { getCtx, getAttrs } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
 export let inTransition = void 0;
@@ -10,40 +10,38 @@ export let asChild = false;
 const {
   elements: { content },
   states: { open }
-} = ctx.get();
+} = getCtx();
+$:
+  builder = $content;
+const attrs = getAttrs("content");
 </script>
 
 {#if asChild && $open}
-	{@const builder = $content}
-	<slot {builder} />
+	<slot {builder} {attrs} />
 {:else if transition && $open}
-	{@const builder = $content}
-	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
+	<div transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if inTransition && outTransition && $open}
-	{@const builder = $content}
 	<div
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...builder} use:builder.action
 		{...$$restProps}
+		{...attrs}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</div>
 {:else if inTransition && $open}
-	{@const builder = $content}
-	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
+	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if outTransition && $open}
-	{@const builder = $content}
-	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
+	<div out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {:else if $open}
-	{@const builder = $content}
-	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
+	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {/if}