bits-ui 0.8.0 → 0.8.1

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

@@ -1,10 +1,7 @@
 /// <reference types="svelte" />
 import { type Checkbox as CheckboxReturn, type CreateCheckboxProps } from "@melt-ui/svelte";
-export declare const ctx: {
-    set: typeof set;
-    get: typeof get;
-};
-declare function set(props: CreateCheckboxProps): {
+export declare const getAttrs: (part: "root" | "input" | "indicator") => Record<string, string>;
+export declare function setCtx(props: CreateCheckboxProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
         root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
@@ -55,5 +52,4 @@ declare function set(props: CreateCheckboxProps): {
         onCheckedChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean | "indeterminate"> | undefined> | undefined;
     };
 };
-declare function get(): CheckboxReturn;
-export {};
+export declare function getCtx(): CheckboxReturn;

package/dist/bits/checkbox/ctx.js

@@ -1,12 +1,10 @@
 import { createCheckbox } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import { removeUndefined, getOptionUpdater } from "../../internal/index.js";
-const NAME = "Checkbox";
-export const ctx = {
-    set,
-    get
-};
-function set(props) {
+import { removeUndefined, getOptionUpdater, createBitAttrs } from "../../internal/index.js";
+const NAME = "checkbox";
+const PARTS = ["root", "input", "indicator"];
+export const getAttrs = createBitAttrs(NAME, PARTS);
+export function setCtx(props) {
     const checkbox = createCheckbox(removeUndefined(props));
     setContext(NAME, { ...checkbox });
     return {
@@ -14,6 +12,6 @@ function set(props) {
         updateOption: getOptionUpdater(checkbox.options)
     };
 }
-function get() {
+export function getCtx() {
     return getContext(NAME);
 }

package/dist/bits/collapsible/components/Collapsible.svelte

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { ctx } from "../ctx.js";
+import { setCtx, getAttrs } from "../ctx.js";
 export let forceVisible = false;
 export let disabled = void 0;
 export let open = void 0;
@@ -9,7 +9,7 @@ const {
   elements: { root },
   states: { open: localOpen },
   updateOption
-} = ctx.set({
+} = setCtx({
   disabled,
   forceVisible,
   defaultOpen: open,
@@ -27,13 +27,15 @@ $:
   updateOption("disabled", disabled);
 $:
   updateOption("forceVisible", forceVisible);
+$:
+  builder = $root;
+const attrs = getAttrs("root");
 </script>
 
 {#if asChild}
-	<slot builder={$root} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $root}
-	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
+	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
 	</div>
 {/if}

package/dist/bits/collapsible/components/Collapsible.svelte.d.ts

@@ -67,7 +67,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;
@@ -81,7 +81,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;
@@ -96,7 +96,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;
@@ -220,7 +220,15 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: any;
+            builder: {
+                'data-state': string;
+                'data-disabled': boolean | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+            attrs: Record<string, string>;
         };
     };
 };

package/dist/bits/collapsible/components/CollapsibleContent.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}

package/dist/bits/collapsible/components/CollapsibleContent.svelte.d.ts

@@ -70,7 +70,7 @@ declare class __sveltets_Render<T extends Transition, In extends Transition, Out
         '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;
@@ -84,7 +84,7 @@ declare class __sveltets_Render<T extends Transition, In extends Transition, Out
         '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;
@@ -99,7 +99,7 @@ declare class __sveltets_Render<T extends Transition, In extends Transition, Out
         '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;
@@ -223,7 +223,17 @@ declare class __sveltets_Render<T extends Transition, In extends Transition, Out
     };
     slots(): {
         default: {
-            builder: any;
+            builder: {
+                'data-state': string;
+                'data-disabled': boolean | undefined;
+                hidden: boolean | undefined;
+                style: string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+            attrs: Record<string, string>;
         };
     };
 }

package/dist/bits/collapsible/components/CollapsibleTrigger.svelte

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

package/dist/bits/collapsible/components/CollapsibleTrigger.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,16 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: any;
+            builder: {
+                readonly 'data-state': "open" | "closed";
+                readonly 'data-disabled': true | undefined;
+                readonly disabled: true | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">;
+            };
+            attrs: Record<string, string>;
         };
     };
     events: TriggerEvents;

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

@@ -1,10 +1,7 @@
 /// <reference types="svelte" />
 import { type Collapsible as CollapsibleReturn, type CreateCollapsibleProps } from "@melt-ui/svelte";
-export declare const ctx: {
-    get: typeof get;
-    set: typeof set;
-};
-declare function set(props: CreateCollapsibleProps): {
+export declare const getAttrs: (part: "root" | "content" | "trigger") => Record<string, string>;
+export declare function setCtx(props: CreateCollapsibleProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
         root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
@@ -43,5 +40,4 @@ declare function set(props: CreateCollapsibleProps): {
         forceVisible: import("svelte/store").Writable<boolean>;
     };
 };
-declare function get(): CollapsibleReturn;
-export {};
+export declare function getCtx(): CollapsibleReturn;

package/dist/bits/collapsible/ctx.js

@@ -1,12 +1,10 @@
-import { getOptionUpdater, removeUndefined } from "../../internal/index.js";
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
 import { createCollapsible } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-const NAME = "Collapsible";
-export const ctx = {
-    get,
-    set
-};
-function set(props) {
+const NAME = "collapsible";
+const PARTS = ["root", "content", "trigger"];
+export const getAttrs = createBitAttrs(NAME, PARTS);
+export function setCtx(props) {
     const collapsible = createCollapsible(removeUndefined(props));
     setContext(NAME, collapsible);
     return {
@@ -14,6 +12,6 @@ function set(props) {
         updateOption: getOptionUpdater(collapsible.options)
     };
 }
-function get() {
+export function getCtx() {
     return getContext(NAME);
 }

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

@@ -1,4 +1,4 @@
-<script>import { ctx } from "../ctx.js";
+<script>import { setCtx } from "../ctx.js";
 export let closeOnOutsideClick = void 0;
 export let closeOnEscape = void 0;
 export let portal = void 0;
@@ -16,7 +16,7 @@ export let disableFocusFirstItem = void 0;
 const {
   states: { open: localOpen },
   updateOption
-} = ctx.set({
+} = setCtx({
   closeOnOutsideClick,
   closeOnEscape,
   portal,

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

@@ -5,12 +5,12 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
+        loop?: boolean | undefined;
+        positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
+        arrowSize?: number | undefined;
         portal?: string | HTMLElement | null | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         dir?: import("@melt-ui/svelte/internal/types").TextDirection | undefined;
-        positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
-        arrowSize?: number | undefined;
-        loop?: boolean | undefined;
         typeahead?: boolean | undefined;
         disableFocusFirstItem?: boolean | undefined;
         open?: boolean | undefined;

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

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

package/dist/bits/context-menu/components/ContextMenuArrow.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;
@@ -225,6 +225,7 @@ declare const __propDef: {
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
+            attrs: Record<string, string>;
         };
     };
 };

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

@@ -1,8 +1,9 @@
-<script>import { ctx } from "../ctx.js";
-const checked = ctx.getCheckboxIndicator();
+<script>import { getCheckboxIndicator, getAttrs } from "../ctx.js";
+const checked = getCheckboxIndicator();
+const attrs = getAttrs("checkbox-indicator");
 </script>
 
-<div {...$$restProps}>
+<div {...$$restProps} {...attrs}>
 	{#if $checked}
 		<slot checked={$checked} />
 	{/if}

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

@@ -62,7 +62,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;
@@ -76,7 +76,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;
@@ -91,7 +91,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/context-menu/components/ContextMenuCheckboxItem.svelte

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { ctx } from "../ctx.js";
+import { setCheckboxItem, getAttrs } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let checked = void 0;
 export let disabled = void 0;
@@ -9,7 +9,7 @@ const {
   elements: { checkboxItem },
   states: { checked: localChecked },
   updateOption
-} = ctx.setCheckboxItem({
+} = setCheckboxItem({
   disabled,
   defaultChecked: checked,
   onCheckedChange: ({ next }) => {
@@ -23,16 +23,19 @@ $:
   checked !== void 0 && localChecked.set(checked);
 $:
   updateOption("disabled", disabled);
+$:
+  builder = $checkboxItem;
+const attrs = getAttrs("checkbox-item");
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if asChild}
-	<slot builder={$checkboxItem} />
+	<slot {builder} {attrs} />
 {:else}
-	{@const builder = $checkboxItem}
 	<div
 		{...builder} use:builder.action
 		{...$$restProps}
+		{...attrs}
 		on:m-click={dispatch}
 		on:m-focusin={dispatch}
 		on:m-focusout={dispatch}
@@ -41,6 +44,6 @@ $:
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</div>
 {/if}

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

@@ -67,7 +67,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;
@@ -81,7 +81,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;
@@ -96,7 +96,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;
@@ -217,7 +217,19 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: any;
+            builder: {
+                readonly role: "menuitemcheckbox";
+                readonly tabindex: -1;
+                readonly 'data-orientation': "vertical";
+                readonly 'aria-checked': "false" | "true" | "mixed";
+                readonly 'data-disabled': true | undefined;
+                readonly 'data-state': "checked" | "indeterminate" | "unchecked";
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusin" | "focusout" | "pointerdown" | "pointerleave" | "pointermove">;
+            };
+            attrs: Record<string, string>;
         };
     };
     events: CheckboxItemEvents;