next: accordion tests and pagination (#493)

packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts

@@ -46,7 +46,7 @@ class AccordionBaseState {
 		if (!this.node.value) return [];
 		return Array.from(
 			this.node.value.querySelectorAll<HTMLElement>("[data-accordion-trigger]")
-		).filter((el) => !el.dataset.disabled);
+		).filter((el) => !el.hasAttribute("data-disabled"));
 	}
 }
 

packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte

@@ -18,6 +18,7 @@
 		"aria-level": level,
 		"data-heading-level": level,
 		style: styleToString(style),
+		"data-accordion-header": "",
 	});
 </script>
 

packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { setAccordionRootState } from "../accordion.svelte.js";
-	import type { AccordionRootProps } from "../types.js";
+	import type { RootProps } from "../index.js";
 	import { Box, box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { generateId } from "$lib/internal/id.js";
 	import { styleToString } from "$lib/internal/style.js";
@@ -17,7 +17,7 @@
 		style,
 		onValueChange,
 		...restProps
-	}: AccordionRootProps = $props();
+	}: RootProps = $props();
 
 	valueProp === undefined && (valueProp = type === "single" ? "" : []);
 

packages/bits-ui/src/lib/bits/accordion/index.ts

@@ -5,7 +5,7 @@ export { default as Trigger } from "./components/accordion-trigger.svelte";
 export { default as Content } from "./components/accordion-content.svelte";
 
 export type {
-	AccordionRootProps as Props,
+	AccordionRootProps as RootProps,
 	AccordionItemProps as ItemProps,
 	AccordionHeaderProps as HeaderProps,
 	AccordionTriggerProps as TriggerProps,

packages/bits-ui/src/lib/bits/accordion/types.ts

@@ -12,23 +12,23 @@ interface BaseAccordionProps {
 	id?: string;
 }
 
-interface SingleAccordionProps extends BaseAccordionProps {
+export type SingleAccordionProps = BaseAccordionProps & {
 	type: "single";
 	value?: string;
 	onValueChange?: (value: string) => void;
-}
+};
 
-interface MultipleAccordionProps extends BaseAccordionProps {
+export type MultipleAccordionProps = BaseAccordionProps & {
 	type: "multiple";
 	value?: string[];
 	onValueChange?: (value: string[]) => void;
-}
+};
 
 export type AccordionRootPropsWithoutHTML =
 	| WithAsChild<SingleAccordionProps>
 	| WithAsChild<MultipleAccordionProps>;
 
-export type AccordionRootProps = AccordionRootPropsWithoutHTML & Omit<PrimitiveDivAttributes, "id">;
+export type AccordionRootProps = AccordionRootPropsWithoutHTML & PrimitiveDivAttributes;
 
 export type AccordionTriggerPropsWithoutHTML = WithAsChild<{
 	id?: string;
@@ -38,7 +38,7 @@ export type AccordionTriggerPropsWithoutHTML = WithAsChild<{
 }>;
 
 export type AccordionTriggerProps = AccordionTriggerPropsWithoutHTML &
-	Omit<PrimitiveButtonAttributes, "disabled" | "id" | "onclick" | "onkeydown">;
+	Omit<PrimitiveButtonAttributes, "disabled" | "onclick" | "onkeydown">;
 
 export type AccordionItemContext = {
 	value: string;

packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte

@@ -1,32 +1,43 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import type { NextButtonEvents, NextButtonProps } from "../index.js";
-	import { getCtx } from "../ctx.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import type { NextButtonProps } from "../index.js";
+	import { setPaginationButtonState } from "../pagination.svelte.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { generateId } from "$lib/internal/id.js";
+	import { styleToString } from "$lib/internal/style.js";
 
-	type $$Props = NextButtonProps;
-	type $$Events = NextButtonEvents;
+	let {
+		id = generateId(),
+		asChild,
+		child,
+		children,
+		el = $bindable(),
+		onclick = noop,
+		onkeydown = noop,
+		style = {},
+		type = "button",
+		...restProps
+	}: NextButtonProps = $props();
 
-	export let asChild: $$Props["asChild"] = undefined;
-	export let el: $$Props["el"] = undefined;
+	const state = setPaginationButtonState({
+		type: "next",
+		id: readonlyBox(() => id),
+		onclick: readonlyBox(() => onclick),
+		onkeydown: readonlyBox(() => onkeydown),
+	});
 
-	const {
-		elements: { nextButton },
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("next-button");
-
-	$: builder = $nextButton;
-	$: Object.assign(builder, attrs);
-
-	const dispatch = createDispatcher();
+	const mergedProps = $derived({
+		...restProps,
+		...state.props,
+		type,
+		style: styleToString(style),
+	});
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<button bind:this={el} use:melt={builder} type="button" {...$$restProps} on:m-click={dispatch}>
-		<slot {builder} />
+	<button bind:this={el} {...mergedProps}>
+		{@render children?.()}
 	</button>
 {/if}

packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte

@@ -1,35 +1,48 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { PageEvents, PageProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import type { PageProps } from "../index.js";
+	import { setPaginationPageState } from "../pagination.svelte.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { generateId } from "$lib/internal/id.js";
+	import { styleToString } from "$lib/internal/style.js";
 
-	type $$Props = PageProps;
-	type $$Events = PageEvents;
+	let {
+		id = generateId(),
+		page,
+		asChild,
+		child,
+		children,
+		type = "button",
+		el = $bindable(),
+		onclick = noop,
+		onkeydown = noop,
+		style = {},
+		...restProps
+	}: PageProps = $props();
 
-	export let asChild: $$Props["asChild"] = undefined;
-	export let page: $$Props["page"];
-	export let el: $$Props["el"] = undefined;
+	const state = setPaginationPageState({
+		id: readonlyBox(() => id),
+		page: readonlyBox(() => page),
+		onclick: readonlyBox(() => onclick),
+		onkeydown: readonlyBox(() => onkeydown),
+	});
 
-	const {
-		elements: { pageTrigger },
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("page");
-
-	$: builder = $pageTrigger(page);
-	$: Object.assign(builder, attrs);
-
-	const dispatch = createDispatcher();
+	const mergedProps = $derived({
+		...restProps,
+		...state.props,
+		type,
+		style: styleToString(style),
+	});
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<button bind:this={el} type="button" use:melt={builder} on:m-click={dispatch} {...$$restProps}>
-		<slot {builder}>
-			{page.value}
-		</slot>
+	<button bind:this={el} {...mergedProps}>
+		{#if children}
+			{@render children?.()}
+		{:else}
+			{page}
+		{/if}
 	</button>
 {/if}

packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte

@@ -1,32 +1,43 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import type { PrevButtonEvents, PrevButtonProps } from "../index.js";
-	import { getCtx } from "../ctx.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import type { PrevButtonProps } from "../index.js";
+	import { setPaginationButtonState } from "../pagination.svelte.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { generateId } from "$lib/internal/id.js";
+	import { styleToString } from "$lib/internal/style.js";
 
-	type $$Props = PrevButtonProps;
-	type $$Events = PrevButtonEvents;
+	let {
+		id = generateId(),
+		asChild,
+		child,
+		children,
+		el = $bindable(),
+		onclick = noop,
+		onkeydown = noop,
+		style = {},
+		type = "button",
+		...restProps
+	}: PrevButtonProps = $props();
 
-	export let asChild: $$Props["asChild"] = undefined;
-	export let el: $$Props["el"] = undefined;
+	const state = setPaginationButtonState({
+		type: "prev",
+		id: readonlyBox(() => id),
+		onclick: readonlyBox(() => onclick),
+		onkeydown: readonlyBox(() => onkeydown),
+	});
 
-	const {
-		elements: { prevButton },
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("prev-button");
-
-	$: builder = $prevButton;
-	$: Object.assign(builder, attrs);
-
-	const dispatch = createDispatcher();
+	const mergedProps = $derived({
+		...restProps,
+		...state.props,
+		type,
+		style: styleToString(style),
+	});
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<button bind:this={el} use:melt={builder} type="button" {...$$restProps} on:m-click={dispatch}>
-		<slot {builder} />
+	<button bind:this={el} {...mergedProps}>
+		{@render children?.()}
 	</button>
 {/if}

packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte

@@ -1,54 +1,54 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setCtx } from "../ctx.js";
-	import type { Props } from "../index.js";
-
-	type $$Props = Props;
-
-	export let count: $$Props["count"];
-	export let page: $$Props["page"] = undefined;
-	export let onPageChange: $$Props["onPageChange"] = undefined;
-	export let perPage: $$Props["perPage"] = undefined;
-	export let siblingCount: $$Props["siblingCount"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { root },
-		states: { pages, range, page: localPage },
-		getAttrs,
-		updateOption,
-	} = setCtx({
+	import type { RootProps } from "../index.js";
+	import { setPaginationRootState } from "../pagination.svelte.js";
+	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
+	import { generateId } from "$lib/internal/id.js";
+	import { styleToString } from "$lib/internal/style.js";
+
+	let {
+		id = generateId(),
 		count,
-		perPage,
-		siblingCount,
-		defaultPage: page,
-		onPageChange: ({ next }) => {
-			if (page !== next) {
-				onPageChange?.(next);
-				page = next;
+		perPage = 1,
+		page = $bindable(1),
+		el = $bindable(),
+		siblingCount = 1,
+		onPageChange,
+		asChild,
+		loop = false,
+		orientation = "horizontal",
+		child,
+		children,
+		style = {},
+		...restProps
+	}: RootProps = $props();
+
+	const state = setPaginationRootState({
+		id: readonlyBox(() => id),
+		count: readonlyBox(() => count),
+		perPage: readonlyBox(() => perPage),
+		page: box(
+			() => page,
+			(v) => {
+				page = v;
+				onPageChange?.(v);
 			}
-
-			return next;
-		},
+		),
+		loop: readonlyBox(() => loop),
+		siblingCount: readonlyBox(() => siblingCount),
+		orientation: readonlyBox(() => orientation),
 	});
 
-	$: page !== undefined && localPage.set(page);
-
-	const attrs = getAttrs("root");
-
-	$: builder = $root;
-	$: Object.assign(builder, attrs);
-
-	$: updateOption("count", count);
-	$: updateOption("perPage", perPage);
-	$: updateOption("siblingCount", siblingCount);
+	const mergedProps = $derived({
+		...restProps,
+		...state.props,
+		style: styleToString(style),
+	});
 </script>
 
 {#if asChild}
-	<slot {builder} pages={$pages} range={$range} />
+	{@render child?.({ props: mergedProps, pages: state.pages, range: state.range })}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} pages={$pages} range={$range} />
+	<div bind:this={el} {...mergedProps}>
+		{@render children?.({ pages: state.pages, range: state.range })}
 	</div>
 {/if}