bits-ui 0.12.0 → 0.13.1

package/dist/bits/range-calendar/ctx.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 import { type CreateRangeCalendarProps } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "day" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function setCtx(props: CreateRangeCalendarProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "day" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
     elements: {
         calendar: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<string>, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$fullCalendarLabel, $isInvalid, $calendarId, $disabled, $readonly]: [string, boolean, string, boolean, boolean]) => {
             id: string;
@@ -19,8 +20,8 @@ export declare function setCtx(props: CreateRangeCalendarProps): {
         grid: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$readonly, $disabled]: [boolean, boolean]) => {
             tabindex: number;
             role: string;
-            'aria-readonly': string | undefined;
-            'aria-disabled': string | undefined;
+            'aria-readonly': "true" | undefined;
+            'aria-disabled': "true" | undefined;
             'data-readonly': string | undefined;
             'data-disabled': string | undefined;
         }, string>;
@@ -66,146 +67,14 @@ export declare function setCtx(props: CreateRangeCalendarProps): {
         nextButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">, ([$isNextButtonDisabled]: [boolean]) => {
             role: string;
             'aria-label': string;
-            'aria-disabled': string | undefined;
+            'aria-disabled': "true" | undefined;
             disabled: boolean | undefined;
             'data-disabled': string | undefined;
         }, string>;
         prevButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">, ([$isPrevButtonDisabled]: [boolean]) => {
             role: string;
             'aria-label': string;
-            'aria-disabled': string | undefined;
-            disabled: boolean | undefined;
-            'data-disabled': string | undefined;
-        }, string>;
-    };
-    states: {
-        placeholder: {
-            set: (this: void, value: import("@internationalized/date").DateValue) => void;
-            subscribe: (this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue> | undefined) => import("svelte/store").Unsubscriber;
-            update: (this: void, updater: import("svelte/store").Updater<import("@internationalized/date").DateValue>) => void;
-        };
-        months: import("svelte/store").Writable<import("@melt-ui/svelte").Month<import("@internationalized/date").DateValue>[]>;
-        weekdays: import("svelte/store").Readable<string[]>;
-        headingValue: import("svelte/store").Readable<string>;
-        value: {
-            update: (updater: import("svelte/store").Updater<import("@melt-ui/svelte").DateRange>, sideEffect?: ((newValue: import("@melt-ui/svelte").DateRange) => void) | undefined) => void;
-            set: (this: void, value: import("@melt-ui/svelte").DateRange) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").DateRange>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").DateRange> | undefined): import("svelte/store").Unsubscriber;
-        };
-        startValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
-        endValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
-    };
-    helpers: {
-        nextPage: () => void;
-        prevPage: () => void;
-        nextYear: () => void;
-        prevYear: () => void;
-        setYear: (year: number) => void;
-        setMonth: (month: number) => void;
-        isDateDisabled: import("svelte/store").Readable<(date: import("@internationalized/date").DateValue) => boolean>;
-        isDateUnavailable: import("svelte/store").Readable<(date: import("@internationalized/date").DateValue) => boolean>;
-    };
-    options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
-        disabled: boolean;
-        onValueChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<import("@melt-ui/svelte").DateRange> | undefined;
-        defaultValue: import("@melt-ui/svelte").DateRange;
-        ids?: Partial<{
-            calendar: string;
-            accessibleHeading: string;
-        }> | undefined;
-        numberOfMonths: number;
-        preventDeselect: boolean;
-        minValue: import("@internationalized/date").DateValue | undefined;
-        maxValue: import("@internationalized/date").DateValue | undefined;
-        defaultPlaceholder?: import("@internationalized/date").DateValue | undefined;
-        onPlaceholderChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<import("@internationalized/date").DateValue> | undefined;
-        pagedNavigation: boolean;
-        weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-        weekdayFormat: "narrow" | "short" | "long";
-        isDateDisabled: import("@melt-ui/svelte").Matcher | undefined;
-        isDateUnavailable: import("@melt-ui/svelte").Matcher | undefined;
-        fixedWeeks: boolean;
-        calendarLabel: string;
-        locale: string;
-        readonly: boolean;
-    }>;
-    ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
-        calendar: string;
-        accessibleHeading: string;
-    }>;
-};
-export declare function getCtx(): {
-    elements: {
-        calendar: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<string>, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$fullCalendarLabel, $isInvalid, $calendarId, $disabled, $readonly]: [string, boolean, string, boolean, boolean]) => {
-            id: string;
-            role: string;
-            'aria-label': string;
-            'data-invalid': string | undefined;
-            'data-disabled': string | undefined;
-            'data-readonly': string | undefined;
-        }, string>;
-        heading: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$disabled]: [boolean]) => {
-            'aria-hidden': boolean;
-            'data-disabled': string | undefined;
-        }, string>;
-        grid: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$readonly, $disabled]: [boolean, boolean]) => {
-            tabindex: number;
-            role: string;
-            'aria-readonly': string | undefined;
-            'aria-disabled': string | undefined;
-            'data-readonly': string | undefined;
-            'data-disabled': string | undefined;
-        }, string>;
-        cell: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<(date: import("@internationalized/date").DateValue) => boolean>, import("svelte/store").Readable<(date: import("@internationalized/date").DateValue) => boolean>, import("svelte/store").Readable<(date: import("@internationalized/date").DateValue) => boolean>, import("svelte/store").Readable<{
-            start: import("@internationalized/date").DateValue;
-            end: import("@internationalized/date").DateValue;
-        } | null>, import("svelte/store").Readable<(date: import("@internationalized/date").DateValue) => boolean>, import("svelte/store").Readable<(date: import("@internationalized/date").DateValue) => boolean>, {
-            set: (this: void, value: import("@internationalized/date").DateValue) => void;
-            update: (this: void, updater: import("svelte/store").Updater<import("@internationalized/date").DateValue>) => void;
-            subscribe: (this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue> | undefined) => import("svelte/store").Unsubscriber;
-            add: (duration: import("@internationalized/date").DateTimeDuration | import("@internationalized/date").DateDuration) => void;
-            subtract: (duration: import("@internationalized/date").DateTimeDuration | import("@internationalized/date").DateDuration) => void;
-            setDate: (fields: import("@internationalized/date").DateFields | (import("@internationalized/date").DateFields & import("@internationalized/date").TimeFields), disambiguation?: import("@internationalized/date").Disambiguation | undefined) => void;
-            reset: () => void;
-            toWritable: () => {
-                set: (this: void, value: import("@internationalized/date").DateValue) => void;
-                subscribe: (this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue> | undefined) => import("svelte/store").Unsubscriber;
-                update: (this: void, updater: import("svelte/store").Updater<import("@internationalized/date").DateValue>) => void;
-            };
-            nextPage: (amount: number) => void;
-            prevPage: (amount: number) => void;
-        }, import("svelte/store").Readable<(date: import("@internationalized/date").DateValue) => boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "focusin" | "mouseenter">, ([$isSelected, $isSelectionEnd, $isSelectionStart, $highlightedRange, $isDateDisabled, $isDateUnavailable, $placeholder, $isOutsideVisibleMonths,]: [(date: import("@internationalized/date").DateValue) => boolean, (date: import("@internationalized/date").DateValue) => boolean, (date: import("@internationalized/date").DateValue) => boolean, {
-            start: import("@internationalized/date").DateValue;
-            end: import("@internationalized/date").DateValue;
-        } | null, (date: import("@internationalized/date").DateValue) => boolean, (date: import("@internationalized/date").DateValue) => boolean, import("@internationalized/date").DateValue, (date: import("@internationalized/date").DateValue) => boolean]) => (cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
-            readonly role: "button";
-            readonly 'aria-label': string;
-            readonly 'aria-selected': true | undefined;
-            readonly 'aria-disabled': true | undefined;
-            readonly 'data-selected': true | undefined;
-            readonly 'data-selection-start': true | undefined;
-            readonly 'data-selection-end': true | undefined;
-            readonly 'data-value': string;
-            readonly 'data-disabled': "" | undefined;
-            readonly 'data-unavailable': "" | undefined;
-            readonly 'data-today': "" | undefined;
-            readonly 'data-outside-month': "" | undefined;
-            readonly 'data-outside-visible-months': "" | undefined;
-            readonly 'data-focused': "" | undefined;
-            readonly 'data-highlighted': "" | undefined;
-            readonly tabindex: 0 | -1 | undefined;
-        }, string>;
-        nextButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">, ([$isNextButtonDisabled]: [boolean]) => {
-            role: string;
-            'aria-label': string;
-            'aria-disabled': string | undefined;
-            disabled: boolean | undefined;
-            'data-disabled': string | undefined;
-        }, string>;
-        prevButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">, ([$isPrevButtonDisabled]: [boolean]) => {
-            role: string;
-            'aria-label': string;
-            'aria-disabled': string | undefined;
+            'aria-disabled': "true" | undefined;
             disabled: boolean | undefined;
             'data-disabled': string | undefined;
         }, string>;
@@ -266,3 +135,5 @@ export declare function getCtx(): {
         accessibleHeading: string;
     }>;
 };
+export declare function getCtx(): GetReturn;
+export {};

package/dist/bits/range-calendar/ctx.js

@@ -1,24 +1,28 @@
 import { createRangeCalendar } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "../../internal/index.js";
-const NAME = "calendar";
-const PARTS = [
-    "root",
-    "prev-button",
-    "next-button",
-    "heading",
-    "grid",
-    "day",
-    "header",
-    "grid-head",
-    "head-cell",
-    "grid-body",
-    "cell",
-    "grid-row"
-];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getRangeCalendarData() {
+    const NAME = "calendar";
+    const PARTS = [
+        "root",
+        "prev-button",
+        "next-button",
+        "heading",
+        "grid",
+        "day",
+        "header",
+        "grid-head",
+        "head-cell",
+        "grid-body",
+        "cell",
+        "grid-row"
+    ];
+    return { NAME, PARTS };
+}
 export function setCtx(props) {
-    const rangeCalendar = createRangeCalendar(removeUndefined(props));
+    const { NAME, PARTS } = getRangeCalendarData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const rangeCalendar = { ...createRangeCalendar(removeUndefined(props)), getAttrs };
     setContext(NAME, rangeCalendar);
     return {
         ...rangeCalendar,
@@ -26,5 +30,6 @@ export function setCtx(props) {
     };
 }
 export function getCtx() {
+    const { NAME } = getRangeCalendarData();
     return getContext(NAME);
 }

package/dist/bits/select/components/select-arrow.svelte

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setArrow, getAttrs } from "../ctx.js";
+import { setArrow } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 export let size = 8;
 const {
-  elements: { arrow }
+  elements: { arrow },
+  getAttrs
 } = setArrow(size);
 const attrs = getAttrs("arrow");
 $:

package/dist/bits/select/components/select-content.svelte

@@ -1,6 +1,6 @@
 <script>import { createDispatcher } from "../../../internal/events.js";
 import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
+import { getCtx, updatePositioning } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
 export let inTransition = void 0;
@@ -22,7 +22,8 @@ export let el = void 0;
 const {
   elements: { menu },
   states: { open },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("content");

package/dist/bits/select/components/select-group.svelte

@@ -1,8 +1,8 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setGroupCtx, getAttrs } from "../ctx.js";
+import { setGroupCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
-const { group, id } = setGroupCtx();
+const { group, id, getAttrs } = setGroupCtx();
 const attrs = getAttrs("group");
 $:
   builder = $group(id);

package/dist/bits/select/components/select-group.svelte.d.ts

@@ -7,10 +7,10 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: ((groupId: string) => {
+            builder: {
                 role: string;
                 'aria-labelledby': string;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;

package/dist/bits/select/components/select-input.svelte

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 const {
   elements: { hiddenInput },
-  options: { disabled }
+  options: { disabled },
+  getAttrs
 } = getCtx();
 $:
   attrs = {

package/dist/bits/select/components/select-item-indicator.svelte

@@ -1,7 +1,7 @@
-<script>import { getAttrs, getItemIndicator } from "../ctx.js";
+<script>import { getItemIndicator } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
-const { isSelected, value } = getItemIndicator();
+const { isSelected, value, getAttrs } = getItemIndicator();
 const attrs = getAttrs("indicator");
 </script>
 

package/dist/bits/select/components/select-item.svelte

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setItemCtx, getAttrs } from "../ctx.js";
+import { setItemCtx } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let value;
 export let disabled = void 0;
@@ -7,7 +7,8 @@ export let label = void 0;
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { option: item }
+  elements: { option: item },
+  getAttrs
 } = setItemCtx(value);
 const dispatch = createDispatcher();
 const attrs = getAttrs("item");

package/dist/bits/select/components/select-item.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: ItemProps;
     slots: {
         default: {
-            builder: ((props: import("@melt-ui/svelte/index.js").ComboboxOptionProps<unknown>) => {
+            builder: {
                 readonly 'data-value': string;
                 readonly 'data-label': string | undefined;
                 readonly 'data-disabled': true | undefined;
@@ -13,7 +13,7 @@ declare const __propDef: {
                 readonly 'data-selected': "" | undefined;
                 readonly id: string;
                 readonly role: "option";
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "pointermove">;

package/dist/bits/select/components/select-label.svelte

@@ -1,9 +1,9 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getGroupLabel, getAttrs, getCtx } from "../ctx.js";
+import { getGroupLabel, getCtx } from "../ctx.js";
 export let asChild = false;
 export let id = void 0;
 export let el = void 0;
-const { ids } = getCtx();
+const { ids, getAttrs } = getCtx();
 const { groupLabel, id: groupId } = getGroupLabel();
 const attrs = getAttrs("label");
 $:

package/dist/bits/select/components/select-label.svelte.d.ts

@@ -4,9 +4,9 @@ declare const __propDef: {
     props: LabelProps;
     slots: {
         default: {
-            builder: ((groupId: string) => {
+            builder: {
                 id: string;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;

package/dist/bits/select/components/select-trigger.svelte

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let id = void 0;
 export let el = void 0;
 const {
   elements: { trigger },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("trigger");

package/dist/bits/select/components/select-value.svelte

@@ -1,9 +1,10 @@
-<script>import { getCtx, getAttrs } from "../ctx.js";
+<script>import { getCtx } from "../ctx.js";
 export let placeholder = "";
 export let asChild = false;
 export let el = void 0;
 const {
-  states: { selectedLabel }
+  states: { selectedLabel },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("value");
 $:

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

@@ -16,6 +16,7 @@ export let onSelectedChange = void 0;
 export let open = void 0;
 export let onOpenChange = void 0;
 export let items = [];
+export let onOutsideClick = void 0;
 const {
   states: { open: localOpen, selected: localSelected },
   updateOption,
@@ -29,6 +30,7 @@ const {
   closeOnOutsideClick,
   portal,
   name,
+  onOutsideClick,
   multiple,
   forceVisible: true,
   defaultSelected: Array.isArray(selected) ? [...selected] : (
@@ -94,6 +96,8 @@ $:
   updateOption("name", name);
 $:
   updateOption("multiple", multiple);
+$:
+  updateOption("onOutsideClick", onOutsideClick);
 </script>
 
 <slot ids={$idValues} />

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

@@ -5,6 +5,7 @@ declare class __sveltets_Render<T, Multiple extends boolean = false> {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
         portal?: string | HTMLElement | null | undefined;
         required?: boolean | undefined;
         name?: string | undefined;

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

@@ -1,9 +1,8 @@
 /// <reference types="svelte" />
-import { type CreateSelectProps, type Select as SelectReturn } from "@melt-ui/svelte";
+import { type CreateSelectProps } from "@melt-ui/svelte";
 import type { Writable } from "svelte/store";
 import type { FloatingProps } from "../floating/_types.js";
-export declare const getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "input" | "item" | "trigger" | "indicator") => Record<string, string>;
-type GetReturn = SelectReturn;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function getCtx(): GetReturn;
 type Items<T> = {
     value: T;
@@ -14,6 +13,7 @@ type Props<T = unknown, M extends boolean = false> = CreateSelectProps<T, M> & {
 };
 export declare function setCtx<T = unknown, M extends boolean = false>(props: Props<T, M>): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "input" | "item" | "trigger" | "indicator") => Record<string, string>;
     elements: {
         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;
@@ -121,6 +121,7 @@ export declare function setCtx<T = unknown, M extends boolean = false>(props: Pr
         onSelectedChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<import("@melt-ui/svelte/internal/types").WhenTrue<M, import("@melt-ui/svelte/index.js").ComboboxOption<T>[], import("@melt-ui/svelte/index.js").ComboboxOption<T>, import("@melt-ui/svelte/index.js").ComboboxOption<T>[] | import("@melt-ui/svelte/index.js").ComboboxOption<T>> | undefined> | undefined;
         closeOnOutsideClick: boolean;
         closeOnEscape: boolean;
+        onOutsideClick: ((event: PointerEvent) => void) | undefined;
         typeahead: boolean;
         highlightOnHover: boolean;
     }>;
@@ -131,6 +132,7 @@ export declare function setGroupCtx(): {
         'aria-labelledby': string;
     }, string>;
     id: string;
+    getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "input" | "item" | "trigger" | "indicator") => Record<string, string>;
 };
 export declare function setItemCtx(value: unknown): GetReturn;
 export declare function getGroupLabel(): {
@@ -138,10 +140,12 @@ export declare function getGroupLabel(): {
         id: string;
     }, string>;
     id: string;
+    getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "input" | "item" | "trigger" | "indicator") => Record<string, string>;
 };
 export declare function getItemIndicator(): {
     value: unknown;
     isSelected: import("svelte/store").Readable<(value: unknown) => boolean>;
+    getAttrs: (part: "content" | "value" | "arrow" | "label" | "group" | "input" | "item" | "trigger" | "indicator") => Record<string, string>;
 };
 export declare function setArrow(size?: number): GetReturn;
 export declare function updatePositioning(props: FloatingProps): void;

package/dist/bits/select/ctx.js

@@ -2,28 +2,38 @@ import { createSelect } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, generateId, getOptionUpdater, removeUndefined } from "../../internal/index.js";
 import { getPositioningUpdater } from "../floating/helpers.js";
-const NAME = "select";
-const GROUP_NAME = "select-group";
-const ITEM_NAME = "select-item";
-const PARTS = [
-    "arrow",
-    "content",
-    "group",
-    "item",
-    "indicator",
-    "input",
-    "label",
-    "trigger",
-    "value"
-];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getSelectData() {
+    const NAME = "select";
+    const GROUP_NAME = "select-group";
+    const ITEM_NAME = "select-item";
+    const PARTS = [
+        "arrow",
+        "content",
+        "group",
+        "item",
+        "indicator",
+        "input",
+        "label",
+        "trigger",
+        "value"
+    ];
+    return {
+        NAME,
+        GROUP_NAME,
+        ITEM_NAME,
+        PARTS
+    };
+}
 export function getCtx() {
+    const { NAME } = getSelectData();
     return getContext(NAME);
 }
 export function setCtx(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 props) {
-    const select = createSelect(removeUndefined(props));
+    const { NAME, PARTS } = getSelectData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const select = { ...createSelect(removeUndefined(props)), getAttrs };
     setContext(NAME, select);
     return {
         ...select,
@@ -31,27 +41,32 @@ props) {
     };
 }
 export function setGroupCtx() {
+    const { GROUP_NAME } = getSelectData();
     const id = generateId();
     setContext(GROUP_NAME, id);
-    const { elements: { group } } = getCtx();
-    return { group, id };
+    const { elements: { group }, getAttrs } = getCtx();
+    return { group, id, getAttrs };
 }
 export function setItemCtx(value) {
+    const { ITEM_NAME } = getSelectData();
     const select = getCtx();
     setContext(ITEM_NAME, value);
     return select;
 }
 export function getGroupLabel() {
+    const { GROUP_NAME } = getSelectData();
     const id = getContext(GROUP_NAME);
-    const { elements: { groupLabel } } = getCtx();
-    return { groupLabel, id };
+    const { elements: { groupLabel }, getAttrs } = getCtx();
+    return { groupLabel, id, getAttrs };
 }
 export function getItemIndicator() {
-    const { helpers: { isSelected } } = getCtx();
+    const { ITEM_NAME } = getSelectData();
+    const { helpers: { isSelected }, getAttrs } = getCtx();
     const value = getContext(ITEM_NAME);
     return {
         value,
-        isSelected
+        isSelected,
+        getAttrs
     };
 }
 export function setArrow(size = 8) {
@@ -59,12 +74,12 @@ export function setArrow(size = 8) {
     select.options.arrowSize?.set(size);
     return select;
 }
-const defaultPlacement = {
-    side: "bottom",
-    align: "center",
-    sameWidth: true
-};
 export function updatePositioning(props) {
+    const defaultPlacement = {
+        side: "bottom",
+        align: "center",
+        sameWidth: true
+    };
     const withDefaults = { ...defaultPlacement, ...props };
     const { options: { positioning } } = getCtx();
     const updater = getPositioningUpdater(positioning);

package/dist/bits/separator/components/separator.svelte

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setCtx, getAttrs } from "../ctx.js";
+import { setCtx } from "../ctx.js";
 export let orientation = "horizontal";
 export let decorative = true;
 export let asChild = false;
 export let el = void 0;
 const {
   elements: { root },
-  updateOption
+  updateOption,
+  getAttrs
 } = setCtx({ orientation, decorative });
 const attrs = getAttrs("root");
 $:

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

@@ -1,8 +1,8 @@
 /// <reference types="svelte" />
 import { type CreateSeparatorProps } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "root") => Record<string, string>;
 export declare function setCtx(props: CreateSeparatorProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "root") => Record<string, string>;
     elements: {
         root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$orientation, $decorative]: [import("@melt-ui/svelte/internal/types").Orientation, boolean]) => {
             role: string;