bits-ui 0.7.0 → 0.8.1

package/dist/bits/toggle/ctx.js

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

package/dist/bits/tooltip/components/Tooltip.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 closeOnEscape = void 0;
@@ -9,10 +9,12 @@ export let closeDelay = void 0;
 export let open = void 0;
 export let onOpenChange = void 0;
 export let forceVisible = true;
+export let disableHoverableContent = void 0;
+export let group = void 0;
 const {
   states: { open: localOpen },
   updateOption
-} = ctx.set({
+} = setCtx({
   positioning,
   arrowSize,
   closeOnEscape,
@@ -22,6 +24,8 @@ const {
   closeDelay,
   forceVisible,
   defaultOpen: open,
+  disableHoverableContent,
+  group,
   onOpenChange: ({ next }) => {
     if (open !== next) {
       onOpenChange?.(next);
@@ -48,6 +52,10 @@ $:
   updateOption("closeDelay", closeDelay);
 $:
   updateOption("forceVisible", forceVisible);
+$:
+  updateOption("group", group);
+$:
+  updateOption("disableHoverableContent", disableHoverableContent);
 </script>
 
 <slot />

package/dist/bits/tooltip/components/Tooltip.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         forceVisible?: boolean | undefined;
-        group?: string | boolean | undefined;
         closeOnEscape?: boolean | undefined;
-        portal?: string | HTMLElement | null | undefined;
         positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
         arrowSize?: number | undefined;
         openDelay?: number | undefined;
         closeDelay?: number | undefined;
+        group?: string | boolean | undefined;
+        portal?: string | HTMLElement | null | undefined;
         closeOnPointerDown?: boolean | undefined;
         disableHoverableContent?: boolean | undefined;
         open?: boolean | undefined;

package/dist/bits/tooltip/components/TooltipArrow.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 {...builder} use:builder.action {...attrs} {...$$restProps} />
 {/if}

package/dist/bits/tooltip/components/TooltipArrow.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/tooltip/components/TooltipContent.svelte

@@ -1,6 +1,6 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { createDispatcher } from "../../../internal/index.js";
-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;
@@ -12,61 +12,68 @@ export let sideOffset = 4;
 const {
   elements: { content },
   states: { open }
-} = ctx.get(sideOffset);
+} = getCtx(sideOffset);
 const dispatch = createDispatcher();
+$:
+  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
 		{...builder} use:builder.action
 		transition:transition={transitionConfig}
 		{...$$restProps}
+		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</div>
 {:else if inTransition && outTransition && $open}
-	{@const builder = $content}
 	<div
 		{...builder} use:builder.action
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...$$restProps}
+		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</div>
 {:else if inTransition && $open}
-	{@const builder = $content}
 	<div
 		{...builder} use:builder.action
 		in:inTransition={inTransitionConfig}
 		{...$$restProps}
+		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</div>
 {:else if outTransition && $open}
-	{@const builder = $content}
 	<div
 		{...builder} use:builder.action
 		out:outTransition={outTransitionConfig}
 		{...$$restProps}
+		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</div>
 {:else if $open}
-	{@const builder = $content}
-	<div {...builder} use:builder.action {...$$restProps} on:m-pointerdown={dispatch} on:m-pointerenter={dispatch}>
-		<slot {builder} />
+	<div
+		{...builder} use:builder.action
+		{...$$restProps}
+		{...attrs}
+		on:m-pointerdown={dispatch}
+		on:m-pointerenter={dispatch}
+	>
+		<slot {builder} {attrs} />
 	</div>
 {/if}

package/dist/bits/tooltip/components/TooltipContent.svelte.d.ts

@@ -72,7 +72,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;
@@ -86,7 +86,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;
@@ -101,7 +101,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,19 @@ declare class __sveltets_Render<T extends Transition, In extends Transition, Out
     events(): ContentEvents;
     slots(): {
         default: {
-            builder: any;
+            builder: {
+                role: string;
+                hidden: boolean | undefined;
+                tabindex: number;
+                style: string;
+                id: string;
+                'data-portal': string | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointerenter">;
+            };
+            attrs: Record<string, string>;
         };
     };
 }

package/dist/bits/tooltip/components/TooltipTrigger.svelte

@@ -1,18 +1,23 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { createDispatcher } from "../../../internal/index.js";
-import { ctx } from "../ctx.js";
+import { getCtx, getAttrs } from "../ctx.js";
 export let asChild = false;
-const trigger = ctx.get().elements.trigger;
+const {
+  elements: { trigger }
+} = 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}
+		{...attrs}
 		on:m-blur={dispatch}
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}
@@ -20,6 +25,6 @@ const dispatch = createDispatcher();
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {builder} />
+		<slot {builder} {attrs} />
 	</button>
 {/if}

package/dist/bits/tooltip/components/TooltipTrigger.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,15 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: any;
+            builder: {
+                'aria-describedby': string;
+                id: string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "blur" | "focus" | "pointerdown" | "pointerenter" | "pointerleave">;
+            };
+            attrs: Record<string, string>;
         };
     };
     events: TriggerEvents;

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

@@ -1,11 +1,7 @@
 /// <reference types="svelte" />
 import { type Tooltip as TooltipReturn, type CreateTooltipProps } from "@melt-ui/svelte";
-export declare const ctx: {
-    set: typeof set;
-    get: typeof get;
-    setArrow: typeof setArrow;
-};
-declare function set(props: CreateTooltipProps): {
+export declare const getAttrs: (part: "arrow" | "content" | "trigger") => Record<string, string>;
+export declare function setCtx(props: CreateTooltipProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     ids: {
         readonly content: string;
@@ -53,6 +49,5 @@ declare function set(props: CreateTooltipProps): {
         disableHoverableContent: import("svelte/store").Writable<boolean>;
     };
 };
-declare function get(sideOffset?: number): TooltipReturn;
-declare function setArrow(size?: number): TooltipReturn;
-export {};
+export declare function getCtx(sideOffset?: number): TooltipReturn;
+export declare function setArrow(size?: number): TooltipReturn;

package/dist/bits/tooltip/ctx.js

@@ -1,13 +1,10 @@
 import { createTooltip } from "@melt-ui/svelte";
-import { getOptionUpdater, removeUndefined } from "../../internal/index.js";
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
 import { getContext, setContext } from "svelte";
-const NAME = "Tooltip";
-export const ctx = {
-    set,
-    get,
-    setArrow
-};
-function set(props) {
+const NAME = "tooltip";
+const PARTS = ["arrow", "content", "trigger"];
+export const getAttrs = createBitAttrs(NAME, PARTS);
+export function setCtx(props) {
     const tooltip = createTooltip({
         positioning: {
             placement: "top"
@@ -21,14 +18,14 @@ function set(props) {
         updateOption: getOptionUpdater(tooltip.options)
     };
 }
-function get(sideOffset = 0) {
+export function getCtx(sideOffset = 0) {
     const tooltip = getContext(NAME);
     const { options: { positioning } } = tooltip;
     positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
     return tooltip;
 }
-function setArrow(size = 8) {
-    const tooltip = get();
+export function setArrow(size = 8) {
+    const tooltip = getCtx();
     tooltip.options.arrowSize.set(size);
     return tooltip;
 }

package/dist/internal/helpers.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
 import type { Writable } from "svelte/store";
 import type { Builder, Transition, TransitionParams, TransitionTimesStore } from "./types.js";
+import type { Bit } from "@/content/api-reference/index.js";
 export declare function noop(): void;
 export declare function generateId(): string;
 export declare function removeUndefined<T extends object>(obj: T): T;
@@ -21,7 +22,6 @@ export declare function disabledAttrs(disabled: boolean): {
     "aria-disabled"?: undefined;
     "data-disabled"?: undefined;
 };
-export declare function bitWrap<T extends object>(storeValues: T, bit: string): T;
 export declare function sleep(ms: number): Promise<unknown>;
 export declare function styleToString(style: Record<string, number | string | undefined>): string;
 type TransitionsObj<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = {
@@ -33,4 +33,5 @@ type TransitionsObj<T extends Transition = Transition, In extends Transition = T
     outTransitionConfig?: TransitionParams<Out>;
 };
 export declare function setTransitionTimes(transitionTimes: TransitionTimesStore, transitionsObj: TransitionsObj): void;
+export declare function createBitAttrs<T extends readonly string[]>(bit: Bit, parts: T): (part: T[number]) => Record<string, string>;
 export {};

package/dist/internal/helpers.js

@@ -56,12 +56,6 @@ export function getAttrs(builders) {
 export function disabledAttrs(disabled) {
     return disabled ? { "aria-disabled": true, "data-disabled": "" } : {};
 }
-export function bitWrap(storeValues, bit) {
-    return {
-        ...storeValues,
-        [`data-bits-${bit}`]: ""
-    };
-}
 export function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -126,3 +120,13 @@ function calcTime(delay, duration) {
     const numDuration = duration ?? 0;
     return numDelay + numDuration;
 }
+export function createBitAttrs(bit, parts) {
+    const attrs = {};
+    parts.forEach((part) => {
+        attrs[part] = {
+            [`data-bits-${bit}-${part}`]: ""
+        };
+    });
+    // return a getter that given a part returns the attrs for that part
+    return (part) => attrs[part];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bits-ui",
-	"version": "0.7.0",
+	"version": "0.8.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "concurrently \"pnpm:dev:content\" \"pnpm:dev:svelte\"",
@@ -56,6 +56,7 @@
 		"esm-env": "^1.0.0",
 		"hast-util-to-html": "^9.0.0",
 		"lucide-svelte": "^0.268.0",
+		"phosphor-svelte": "^1.3.0",
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.8",
@@ -85,8 +86,8 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.55.3",
-		"nanoid": "^4.0.2"
+		"@melt-ui/svelte": "0.57.0",
+		"nanoid": "^5.0.2"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0"