@johly/bits-ui 2.18.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hunter Johnston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# Bits UI
+
+<!-- automd:badges license name="bits-ui" color="pink" github="huntabyte/bits-ui" -->
+
+[![npm version](https://flat.badgen.net/npm/v/bits-ui?color=pink)](https://npmjs.com/package/bits-ui)
+[![npm downloads](https://flat.badgen.net/npm/dm/bits-ui?color=pink)](https://npmjs.com/package/bits-ui)
+[![license](https://flat.badgen.net/github/license/huntabyte/bits-ui?color=pink)](https://github.com/huntabyte/bits-ui/blob/main/LICENSE)
+[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](https://discord.gg/fdXy3Sk8Gq)
+
+<img style="max-width: 100%" alt="hero" src="https://github.com/user-attachments/assets/19cac792-6a93-4289-b9c7-647794a7de79" />
+
+**Bits UI** – the headless components for Svelte.
+
+Flexible, unstyled, and accessible primitives that provide the foundation for building your own high-quality component library.
+
+## Documentation
+
+Visit https://bits-ui.com/docs to view the documentation.
+
+## Credits
+
+- [Bitworks](https://bitworks.cz) - The design team behind the Bits UI documentation and example components.
+- [Melt UI](https://melt-ui.com) - A powerful builder API that inspired the internal architecture of Bits UI.
+- [Radix UI](https://radix-ui.com) - The incredible headless component APIs that we've taken heavy inspiration from.
+- [React Spectrum](https://react-spectrum.adobe.com) - An incredible collection of headless components we've taken inspiration from.
+
+## Sponsors
+
+This project is supported by the following beautiful people/organizations:
+
+<p align="center">
+  <a href="https://github.com/sponsors/huntabyte">
+    <img src='https://github.com/huntabyte/static/blob/main/sponsors.svg?raw=true' alt="Logos from Sponsors" />
+  </a>
+</p>
+
+## License
+
+<!-- automd:contributors license=MIT author="huntabyte" github="huntabyte/bits-ui" -->
+
+Published under the [MIT](https://github.com/huntabyte/bits-ui/blob/main/LICENSE) license.
+Built by [@huntabyte](https://github.com/huntabyte) and [community](https://github.com/huntabyte/bits-ui/graphs/contributors). Designed by [Pavel Stianko](https://x.com/pavel_stianko) 💛
+<br><br>
+<a href="https://github.com/huntabyte/bits-ui/graphs/contributors">
+<img src="https://contrib.rocks/image?repo=huntabyte/bits-ui" />
+</a>
+
+<!-- /automd -->
+
+## Community
+
+Join the Discord server to ask questions, find collaborators, or just say hi!
+
+<a href="https://discord.gg/fdXy3Sk8Gq" alt="Svecosystem Discord community">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://invidget.switchblade.xyz/fdXy3Sk8Gq">
+  <img alt="Svecosystem Discord community" src="https://invidget.switchblade.xyz/fdXy3Sk8Gq?theme=light">
+</picture>
+</a>

package/dist/app.d.ts

@@ -0,0 +1,19 @@
+// oxlint-disable no-var
+import type { ReadableBox } from "svelte-toolbelt";
+import type { DismissibleLayerState } from "./bits/utilities/dismissible-layer/use-dismissable-layer.svelte.ts";
+import type { InteractOutsideBehaviorType } from "./bits/utilities/dismissible-layer/types.ts";
+import type { EscapeLayerState } from "./bits/utilities/escape-layer/use-escape-layer.svelte.ts";
+import type { EscapeBehaviorType } from "./bits/utilities/escape-layer/types.ts";
+import type { TextSelectionLayerState } from "./bits/utilities/text-selection-layer/use-text-selection-layer.svelte.ts";
+
+declare global {
+	var bitsDismissableLayers: Map<DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>>;
+	var bitsEscapeLayers: Map<EscapeLayerState, ReadableBox<EscapeBehaviorType>>;
+	var bitsTextSelectionLayers: Map<TextSelectionLayerState, ReadableBox<boolean>>;
+	var bitsIdCounter: { current: number };
+	var bitsBodyLockStackCount: {
+		readonly map: SvelteMap<string, boolean>;
+		resetBodyStyle: () => void;
+	};
+	var bitsAnimationsDisabled: boolean;
+}

package/dist/bits/accordion/accordion.svelte.d.ts

@@ -0,0 +1,161 @@
+import { type Box, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import type { Orientation } from "../../shared/index.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+interface AccordionBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    orientation: Orientation;
+    loop: boolean;
+}> {
+}
+interface AccordionSingleStateOpts extends AccordionBaseStateOpts, WritableBoxedValues<{
+    value: string;
+}> {
+}
+interface AccordionMultiStateOpts extends AccordionBaseStateOpts, WritableBoxedValues<{
+    value: string[];
+}> {
+}
+type AccordionRoot = AccordionSingleState | AccordionMultiState;
+interface AccordionItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    value: string;
+    disabled: boolean;
+}> {
+    rootState: AccordionRoot;
+}
+interface AccordionTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean | null | undefined;
+    tabindex: number;
+}> {
+}
+interface AccordionContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    forceMount: boolean;
+    hiddenUntilFound: boolean;
+}> {
+}
+interface AccordionHeaderStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+}> {
+}
+interface AccordionRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    orientation: Orientation;
+    loop: boolean;
+}> {
+    type: "single" | "multiple";
+    value: Box<string> | Box<string[]>;
+}
+declare abstract class AccordionBaseState {
+    readonly opts: AccordionBaseStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    abstract readonly isMulti: boolean;
+    readonly attachment: RefAttachment;
+    constructor(opts: AccordionBaseStateOpts);
+    abstract includesItem(item: string): boolean;
+    abstract toggleItem(item: string): void;
+    readonly props: {
+        readonly id: string;
+        readonly "data-orientation": Orientation;
+        readonly "data-disabled": "" | undefined;
+    };
+}
+declare class AccordionSingleState extends AccordionBaseState {
+    readonly opts: AccordionSingleStateOpts;
+    readonly isMulti: false;
+    constructor(opts: AccordionSingleStateOpts);
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
+}
+declare class AccordionMultiState extends AccordionBaseState {
+    #private;
+    readonly isMulti: true;
+    constructor(props: AccordionMultiStateOpts);
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
+}
+export declare class AccordionRootState {
+    static create(props: AccordionRootStateOpts): AccordionRoot;
+}
+export declare class AccordionItemState {
+    static create(props: Omit<AccordionItemStateOpts, "rootState">): AccordionItemState;
+    readonly opts: AccordionItemStateOpts;
+    readonly root: AccordionRoot;
+    readonly isActive: boolean;
+    readonly isDisabled: boolean;
+    readonly attachment: RefAttachment;
+    contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
+    constructor(opts: AccordionItemStateOpts);
+    updateValue(): void;
+    readonly props: {
+        readonly id: string;
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": Orientation;
+    };
+}
+export declare class AccordionTriggerState {
+    #private;
+    readonly opts: AccordionTriggerStateOpts;
+    readonly itemState: AccordionItemState;
+    readonly attachment: RefAttachment;
+    constructor(opts: AccordionTriggerStateOpts, itemState: AccordionItemState);
+    static create(props: AccordionTriggerStateOpts): AccordionTriggerState;
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly disabled: boolean;
+        readonly "aria-expanded": "true" | "false";
+        readonly "aria-disabled": "true" | "false";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-state": "open" | "closed";
+        readonly "data-orientation": Orientation;
+        readonly tabindex: number;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+export declare class AccordionContentState {
+    #private;
+    readonly opts: AccordionContentStateOpts;
+    readonly item: AccordionItemState;
+    readonly attachment: RefAttachment;
+    readonly open: boolean;
+    constructor(opts: AccordionContentStateOpts, item: AccordionItemState);
+    static create(props: AccordionContentStateOpts): AccordionContentState;
+    get shouldRender(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly hidden: boolean | "until-found" | undefined;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": Orientation;
+        readonly style: {
+            readonly "--bits-accordion-content-height": `${number}px`;
+            readonly "--bits-accordion-content-width": `${number}px`;
+        };
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly "data-state": "open" | "closed";
+    };
+}
+export declare class AccordionHeaderState {
+    readonly opts: AccordionHeaderStateOpts;
+    readonly item: AccordionItemState;
+    readonly attachment: RefAttachment;
+    constructor(opts: AccordionHeaderStateOpts, item: AccordionItemState);
+    static create(props: AccordionHeaderStateOpts): AccordionHeaderState;
+    readonly props: {
+        readonly id: string;
+        readonly role: "heading";
+        readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
+        readonly "data-heading-level": 1 | 2 | 3 | 4 | 5 | 6;
+        readonly "data-state": "open" | "closed";
+        readonly "data-orientation": Orientation;
+    };
+}
+export {};

package/dist/bits/accordion/accordion.svelte.js

@@ -0,0 +1,285 @@
+import { afterTick, attachRef, boxWith, } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { createBitsAttrs } from "../../internal/attrs.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+import { on } from "svelte/events";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+const accordionAttrs = createBitsAttrs({
+    component: "accordion",
+    parts: ["root", "trigger", "content", "item", "header"],
+});
+const AccordionRootContext = new Context("Accordion.Root");
+const AccordionItemContext = new Context("Accordion.Item");
+class AccordionBaseState {
+    opts;
+    rovingFocusGroup;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.rovingFocusGroup = new RovingFocusGroup({
+            rootNode: this.opts.ref,
+            candidateAttr: accordionAttrs.trigger,
+            loop: this.opts.loop,
+            orientation: this.opts.orientation,
+        });
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "data-orientation": this.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        [accordionAttrs.root]: "",
+        ...this.attachment,
+    }));
+}
+class AccordionSingleState extends AccordionBaseState {
+    opts;
+    isMulti = false;
+    constructor(opts) {
+        super(opts);
+        this.opts = opts;
+        this.includesItem = this.includesItem.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
+    }
+    includesItem(item) {
+        return this.opts.value.current === item;
+    }
+    toggleItem(item) {
+        this.opts.value.current = this.includesItem(item) ? "" : item;
+    }
+}
+class AccordionMultiState extends AccordionBaseState {
+    #value;
+    isMulti = true;
+    constructor(props) {
+        super(props);
+        this.#value = props.value;
+        this.includesItem = this.includesItem.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
+    }
+    includesItem(item) {
+        return this.#value.current.includes(item);
+    }
+    toggleItem(item) {
+        this.#value.current = this.includesItem(item)
+            ? this.#value.current.filter((v) => v !== item)
+            : [...this.#value.current, item];
+    }
+}
+export class AccordionRootState {
+    static create(props) {
+        const { type, ...rest } = props;
+        const rootState = type === "single"
+            ? new AccordionSingleState(rest)
+            : new AccordionMultiState(rest);
+        return AccordionRootContext.set(rootState);
+    }
+}
+export class AccordionItemState {
+    static create(props) {
+        return AccordionItemContext.set(new AccordionItemState({ ...props, rootState: AccordionRootContext.get() }));
+    }
+    opts;
+    root;
+    isActive = $derived.by(() => this.root.includesItem(this.opts.value.current));
+    isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    attachment;
+    contentNode = $state(null);
+    contentPresence;
+    constructor(opts) {
+        this.opts = opts;
+        this.root = opts.rootState;
+        this.updateValue = this.updateValue.bind(this);
+        this.attachment = attachRef(this.opts.ref);
+        this.contentPresence = new PresenceManager({
+            ref: boxWith(() => this.contentNode),
+            open: boxWith(() => this.isActive),
+        });
+    }
+    updateValue() {
+        this.root.toggleItem(this.opts.value.current);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "data-state": getDataOpenClosed(this.isActive),
+        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),
+        "data-orientation": this.root.opts.orientation.current,
+        [accordionAttrs.item]: "",
+        ...this.attachment,
+    }));
+}
+export class AccordionTriggerState {
+    opts;
+    itemState;
+    #root;
+    #isDisabled = $derived.by(() => this.opts.disabled.current ||
+        this.itemState.opts.disabled.current ||
+        this.#root.opts.disabled.current);
+    attachment;
+    constructor(opts, itemState) {
+        this.opts = opts;
+        this.itemState = itemState;
+        this.#root = itemState.root;
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.attachment = attachRef(this.opts.ref);
+    }
+    static create(props) {
+        return new AccordionTriggerState(props, AccordionItemContext.get());
+    }
+    onclick(e) {
+        if (this.#isDisabled || e.button !== 0) {
+            e.preventDefault();
+            return;
+        }
+        this.itemState.updateValue();
+    }
+    onkeydown(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.itemState.updateValue();
+            return;
+        }
+        this.#root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        disabled: this.#isDisabled,
+        "aria-expanded": boolToStr(this.itemState.isActive),
+        "aria-disabled": boolToStr(this.#isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        "data-state": getDataOpenClosed(this.itemState.isActive),
+        "data-orientation": this.#root.opts.orientation.current,
+        [accordionAttrs.trigger]: "",
+        tabindex: this.opts.tabindex.current,
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class AccordionContentState {
+    opts;
+    item;
+    attachment;
+    #originalStyles = undefined;
+    #isMountAnimationPrevented = false;
+    #dimensions = $state({ width: 0, height: 0 });
+    open = $derived.by(() => {
+        if (this.opts.hiddenUntilFound.current)
+            return this.item.isActive;
+        return this.opts.forceMount.current || this.item.isActive;
+    });
+    constructor(opts, item) {
+        this.opts = opts;
+        this.item = item;
+        this.#isMountAnimationPrevented = this.item.isActive;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.item.contentNode = v));
+        // Prevent mount animations on initial render
+        $effect(() => {
+            const rAF = requestAnimationFrame(() => {
+                this.#isMountAnimationPrevented = false;
+            });
+            return () => cancelAnimationFrame(rAF);
+        });
+        watch.pre([() => this.opts.ref.current, () => this.opts.hiddenUntilFound.current], ([node, hiddenUntilFound]) => {
+            if (!node || !hiddenUntilFound)
+                return;
+            const handleBeforeMatch = () => {
+                if (this.item.isActive)
+                    return;
+                // we need to defer opening until after browser completes search highlighting
+                // otherwise the browser will immediately open the accordion
+                // and the search highlighting will not be visible
+                requestAnimationFrame(() => {
+                    this.item.updateValue();
+                });
+            };
+            return on(node, "beforematch", handleBeforeMatch);
+        });
+        // Handle dimension updates
+        watch([() => this.open, () => this.opts.ref.current], this.#updateDimensions);
+    }
+    static create(props) {
+        return new AccordionContentState(props, AccordionItemContext.get());
+    }
+    #updateDimensions = ([_, node]) => {
+        if (!node)
+            return;
+        afterTick(() => {
+            const element = this.opts.ref.current;
+            if (!element)
+                return;
+            // store original styles on first run
+            this.#originalStyles ??= {
+                transitionDuration: element.style.transitionDuration,
+                animationName: element.style.animationName,
+            };
+            // temporarily disable animations for measurement
+            element.style.transitionDuration = "0s";
+            element.style.animationName = "none";
+            const rect = element.getBoundingClientRect();
+            this.#dimensions = { width: rect.width, height: rect.height };
+            // restore animations if not initial mount
+            if (!this.#isMountAnimationPrevented && this.#originalStyles) {
+                element.style.transitionDuration = this.#originalStyles.transitionDuration;
+                element.style.animationName = this.#originalStyles.animationName;
+            }
+        });
+    };
+    get shouldRender() {
+        return this.item.contentPresence.shouldRender;
+    }
+    snippetProps = $derived.by(() => ({ open: this.item.isActive }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "data-state": getDataOpenClosed(this.item.isActive),
+        ...getDataTransitionAttrs(this.item.contentPresence.transitionStatus),
+        "data-disabled": boolToEmptyStrOrUndef(this.item.isDisabled),
+        "data-orientation": this.item.root.opts.orientation.current,
+        [accordionAttrs.content]: "",
+        style: {
+            "--bits-accordion-content-height": `${this.#dimensions.height}px`,
+            "--bits-accordion-content-width": `${this.#dimensions.width}px`,
+        },
+        hidden: this.opts.hiddenUntilFound.current && !this.item.isActive
+            ? "until-found"
+            : undefined,
+        ...(this.opts.hiddenUntilFound.current && !this.shouldRender
+            ? {}
+            : {
+                hidden: this.opts.hiddenUntilFound.current
+                    ? !this.shouldRender
+                    : this.opts.forceMount.current
+                        ? undefined
+                        : !this.shouldRender,
+            }),
+        ...this.attachment,
+    }));
+}
+export class AccordionHeaderState {
+    opts;
+    item;
+    attachment;
+    constructor(opts, item) {
+        this.opts = opts;
+        this.item = item;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    static create(props) {
+        return new AccordionHeaderState(props, AccordionItemContext.get());
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "heading",
+        "aria-level": this.opts.level.current,
+        "data-heading-level": this.opts.level.current,
+        "data-state": getDataOpenClosed(this.item.isActive),
+        "data-orientation": this.item.root.opts.orientation.current,
+        [accordionAttrs.header]: "",
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { mergeProps, boxWith } from "svelte-toolbelt";
+	import { AccordionContentState } from "../accordion.svelte.js";
+	import type { AccordionContentProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		forceMount = false,
+		children,
+		hiddenUntilFound = false,
+		...restProps
+	}: AccordionContentProps = $props();
+
+	const contentState = AccordionContentState.create({
+		forceMount: boxWith(() => forceMount),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		hiddenUntilFound: boxWith(() => hiddenUntilFound),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if child}
+	{@render child({
+		props: mergedProps,
+		...contentState.snippetProps,
+	})}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/accordion/components/accordion-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionContentProps } from "../types.js";
+declare const AccordionContent: import("svelte").Component<AccordionContentProps, {}, "ref">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/bits/accordion/components/accordion-header.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { AccordionHeaderProps } from "../types.js";
+	import { AccordionHeaderState } from "../accordion.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		level = 2,
+		children,
+		child,
+		ref = $bindable(null),
+		...restProps
+	}: AccordionHeaderProps = $props();
+
+	const headerState = AccordionHeaderState.create({
+		id: boxWith(() => id),
+		level: boxWith(() => level),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, headerState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/accordion/components/accordion-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionHeaderProps } from "../types.js";
+declare const AccordionHeader: import("svelte").Component<AccordionHeaderProps, {}, "ref">;
+type AccordionHeader = ReturnType<typeof AccordionHeader>;
+export default AccordionHeader;

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { AccordionItemProps } from "../types.js";
+	import { AccordionItemState } from "../accordion.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+	const defaultId = createId(uid);
+
+	let {
+		id = defaultId,
+		disabled = false,
+		value = defaultId,
+		children,
+		child,
+		ref = $bindable(null),
+		...restProps
+	}: AccordionItemProps = $props();
+
+	const itemState = AccordionItemState.create({
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { AccordionItemProps } from "../types.js";
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "ref">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;