@svelte-atoms/core 1.0.0-alpha.14

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

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+	export type AccordionItemBodyProps<
+		E extends keyof HTMLElementTagNameMap = 'div',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import { AccordionItemBond } from './bond.svelte';
+	import { toClassValue } from '../../../utils';
+	import { getPreset } from '../../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
+
+	const bond = AccordionItemBond.get();
+	const isOpen = $derived(bond?.state.isOpen ?? false);
+
+	const accordionItemBond = AccordionItemBond.get();
+
+	const preset = getPreset('accordion.item.body');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AccordionItemBodyProps<E, B> = $props();
+
+	const bodyProps = $derived({
+		...bond?.body(),
+		...restProps
+	});
+</script>
+
+{#if isOpen}
+	<HtmlAtom
+		class={[
+			'box-content',
+			toClassValue.apply(bond, [preset?.class, { bond: accordionItemBond }]),
+			toClassValue.apply(bond, [klass, { bond: accordionItemBond }])
+		]}
+		onmount={onmount?.bind(bond.state)}
+		ondestroy={ondestroy?.bind(bond.state)}
+		animate={animate?.bind(bond.state)}
+		enter={enter?.bind(bond.state)}
+		exit={exit?.bind(bond.state)}
+		initial={initial?.bind(bond.state)}
+		{as}
+		{base}
+		{...bodyProps}
+	>
+		{@render children?.({ accordionItem: bond })}
+	</HtmlAtom>
+{/if}

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

@@ -0,0 +1,32 @@
+export type AccordionItemBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
+    children?: Snippet<[{
+        accordionItem: AccordionItemBond;
+    }]>;
+};
+import type { Snippet } from 'svelte';
+import { AccordionItemBond } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: AccordionItemBodyProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const AccordionItemBody: $$IsomorphicComponent;
+type AccordionItemBody<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof AccordionItemBody<E, B>>;
+export default AccordionItemBody;

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

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+	export type AccordionItemHeaderProps<
+		E extends keyof HTMLElementTagNameMap = 'div',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import { AccordionItemBond } from './bond.svelte';
+	import { toClassValue } from '../../../utils';
+	import { getPreset } from '../../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
+
+	const preset = getPreset('accordion.item.header');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'button',
+		base = preset?.base as B,
+		children = undefined,
+		onpointerdown = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+
+	const bond = AccordionItemBond.get();
+
+	const headerProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<HtmlAtom
+	class={[
+		'relative box-border flex w-full cursor-pointer items-center',
+		toClassValue(preset?.class, {
+			bond: bond
+		}),
+		toClassValue(klass, {
+			bond: bond
+		})
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	tabindex={as !== 'button' ? 0 : undefined}
+	{as}
+	{base}
+	{...headerProps}
+>
+	{@render children?.({
+		accordionItem: bond
+	})}
+</HtmlAtom>

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

@@ -0,0 +1,44 @@
+export type AccordionItemHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
+    children?: Snippet<[{
+        accordionItem: AccordionItemBond;
+    }]>;
+};
+import type { Snippet } from 'svelte';
+import { AccordionItemBond } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: {
+        class?: string;
+        as?: any;
+        base?: B;
+        children?: any;
+        onpointerdown?: any;
+        onmount?: any;
+        ondestroy?: any;
+        animate?: any;
+        enter?: any;
+        exit?: any;
+        initial?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const AccordionItemHeader: $$IsomorphicComponent;
+type AccordionItemHeader<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof AccordionItemHeader<E, B>>;
+export default AccordionItemHeader;

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

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+	export type AccordionItemIndicatorProps<
+		E extends keyof HTMLElementTagNameMap = 'div',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import { animate as motion } from 'motion';
+	import { AccordionItemBond } from './bond.svelte';
+	import { toClassValue } from '../../../utils';
+	import { Icon } from '../../icon';
+	import IconArrowDown from '../../../icons/icon-arrow-down.svelte';
+	import { getPreset } from '../../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
+
+	const bond = AccordionItemBond.get();
+	const isOpen = $derived(bond?.state?.isOpen ?? false);
+
+	const preset = getPreset('accordion.item.indicator');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AccordionItemIndicatorProps<E, B> = $props();
+
+	const indicatorProps = $derived({
+		...bond?.indicator(),
+		...restProps
+	});
+
+	function _animate(node: HTMLElement) {
+		return motion(node, { rotate: 180 * +isOpen }, { duration: 0.3, ease: 'anticipate' });
+	}
+</script>
+
+<HtmlAtom
+	class={[
+		'pointer-events-none flex items-center justify-center',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [klass])
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{as}
+	{base}
+	{...indicatorProps}
+>
+	{#if children}
+		{@render children({ accordionItem: bond })}
+	{:else}
+		<Icon src={IconArrowDown} />
+	{/if}
+</HtmlAtom>

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

@@ -0,0 +1,32 @@
+export type AccordionItemIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
+    children?: Snippet<[{
+        accordionItem: AccordionItemBond;
+    }]>;
+};
+import type { Snippet } from 'svelte';
+import { AccordionItemBond } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: AccordionItemIndicatorProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const AccordionItemIndicator: $$IsomorphicComponent;
+type AccordionItemIndicator<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof AccordionItemIndicator<E, B>>;
+export default AccordionItemIndicator;

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

@@ -0,0 +1,84 @@
+<script module>
+	export type AccordionItemRootProps<
+		E extends keyof HTMLElementTagNameMap = 'div',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		children?: Snippet<[{ accordionItem: AccordionItemBond }]>;
+		value?: string;
+		data?: any;
+		disabled?: boolean;
+		factory?: Factory<AccordionItemBond>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import { nanoid } from 'nanoid';
+	import {
+		AccordionItemBond,
+		AccordionItemBondState,
+		type AccordionItemBondProps
+	} from './bond.svelte';
+	import { defineProperty, defineState, toClassValue } from '../../../utils';
+	import { getPreset } from '../../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
+	import type { Factory } from '../../../types';
+
+	const preset = getPreset('accordion.item');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		value = nanoid(),
+		data = undefined,
+		disabled = false,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: AccordionItemRootProps<E, B> = $props();
+
+	const accordionItemProps = defineState<AccordionItemBondProps>([
+		defineProperty('data', () => data),
+		defineProperty('disabled', () => disabled),
+		defineProperty('value', () => value)
+	]);
+	const bond = factory(accordionItemProps).share();
+
+	bond.state.mount();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof accordionItemProps) {
+		const accordionItemState = new AccordionItemBondState(() => props);
+		return new AccordionItemBond(accordionItemState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{as}
+	{base}
+	{...rootProps}
+>
+	{@render children?.({ accordionItem: bond })}
+</HtmlAtom>

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

@@ -0,0 +1,41 @@
+export type AccordionItemRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
+    children?: Snippet<[{
+        accordionItem: AccordionItemBond;
+    }]>;
+    value?: string;
+    data?: any;
+    disabled?: boolean;
+    factory?: Factory<AccordionItemBond>;
+};
+import type { Snippet } from 'svelte';
+import { AccordionItemBond } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../../atom';
+import type { Factory } from '../../../types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: AccordionItemRootProps<E, B>;
+    exports: {
+        getBond: () => any;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {
+        getBond: () => any;
+    };
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const AccordionItemRoot: $$IsomorphicComponent;
+type AccordionItemRoot<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof AccordionItemRoot<E, B>>;
+export default AccordionItemRoot;

package/dist/components/accordion/item/atoms.d.ts

@@ -0,0 +1,4 @@
+export { default as Root } from './accordion-item-root.svelte';
+export { default as Header } from './accordion-item-header.svelte';
+export { default as Indicator } from './accordion-item-indicator.svelte';
+export { default as Body } from './accordion-item-body.svelte';

package/dist/components/accordion/item/atoms.js

@@ -0,0 +1,4 @@
+export { default as Root } from './accordion-item-root.svelte';
+export { default as Header } from './accordion-item-header.svelte';
+export { default as Indicator } from './accordion-item-indicator.svelte';
+export { default as Body } from './accordion-item-body.svelte';

package/dist/components/accordion/item/attachments.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { AccordionBond } from '../bond.svelte';
+import { AccordionItemBond } from './bond.svelte';
+export declare function accordionItem(callback: (node: HTMLElement, item?: AccordionItemBond, accordion?: AccordionBond) => any): (node: HTMLElement) => any;

package/dist/components/accordion/item/attachments.svelte.js

@@ -0,0 +1,6 @@
+import { AccordionItemBond } from './bond.svelte';
+export function accordionItem(callback) {
+    const item = AccordionItemBond.get();
+    const accordion = item?.accordion;
+    return (node) => callback(node, item, accordion);
+}

package/dist/components/accordion/item/bond.svelte.d.ts

@@ -0,0 +1,63 @@
+import { AccordionState } from '../bond.svelte.js';
+import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte.js';
+export type AccordionItemBondProps = BondStateProps & {
+    value: string;
+    disabled: boolean;
+};
+export type AccordionItemBondElements = {
+    root: HTMLElement;
+    header: HTMLElement;
+    body: HTMLElement;
+    indicator: HTMLElement;
+};
+export declare class AccordionItemBond extends Bond<AccordionItemBondProps, AccordionItemBondState, AccordionItemBondElements> {
+    constructor(state: AccordionItemBondState);
+    share(): this;
+    root(props?: Record<string, unknown>): {
+        'data-accordion': string;
+        'data-atom': string;
+        'data-kind': string;
+    };
+    header(props?: Record<string, unknown>): {
+        'aria-controls': string;
+        'data-kind': string;
+        'aria-disabled': boolean;
+        'aria-expanded': boolean;
+        'aria-selected': boolean;
+        role: string | undefined;
+        tabindex: number;
+        id: string;
+        'data-atom': string;
+        disabled: boolean | undefined;
+        onpointerdown: (ev: PointerEvent) => void;
+    };
+    body(props?: Record<string, unknown>): {
+        'aria-labelledby': string;
+        'aria-hidden': boolean;
+        role: string;
+        'data-atom': string;
+        'data-kind': string;
+        id: string;
+    };
+    indicator(props?: Record<string, unknown>): {
+        'data-controled-by': string;
+        'data-kind': string;
+    };
+    static get(): AccordionItemBond | undefined;
+    static set(bond: AccordionItemBond): AccordionItemBond;
+}
+export declare class AccordionItemBondState extends BondState<AccordionItemBondProps> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(props: () => AccordionItemBondProps);
+    get id(): string;
+    get accordionId(): string | undefined;
+    get isOpen(): boolean | undefined;
+    get isActive(): boolean | undefined;
+    get accordion(): AccordionState | undefined;
+    mount(): () => void;
+    unmount(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}

package/dist/components/accordion/item/bond.svelte.js

@@ -0,0 +1,141 @@
+import { createAttachmentKey } from 'svelte/attachments';
+import { getContext, setContext } from 'svelte';
+import { AccordionBond, AccordionState } from '../bond.svelte.js';
+import { Bond, BondState } from '../../../shared/bond.svelte.js';
+import { isBrowser } from '../../../utils/dom.svelte.js';
+export class AccordionItemBond extends Bond {
+    constructor(state) {
+        super(state);
+    }
+    share() {
+        return AccordionItemBond.set(this);
+    }
+    root(props = {}) {
+        return {
+            'data-accordion': this.state?.accordionId ?? '',
+            'data-atom': this.id ?? '',
+            'data-kind': 'accordion-item',
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    header(props = {}) {
+        const isButtonElement = isBrowser() ? this.elements.header instanceof HTMLButtonElement : false;
+        return {
+            'aria-controls': `accordion-body-${this.id}`,
+            'data-kind': 'accordion-header',
+            'aria-disabled': this.state?.props?.disabled ?? false,
+            'aria-expanded': this.state?.isOpen ?? false,
+            'aria-selected': this.state?.isActive ?? false,
+            role: isButtonElement ? undefined : 'button',
+            tabindex: this.state?.isActive ? 0 : -1, // Make focusable if active
+            id: `accordion-header-${this.id}`,
+            'data-atom': this.id ?? '',
+            disabled: isButtonElement ? this.state?.props.disabled : undefined,
+            onpointerdown: (ev) => {
+                if (this.state.props.disabled)
+                    return;
+                props?.onpointerdown?.(ev, { accordionItem: this });
+                if (ev.defaultPrevented) {
+                    return;
+                }
+                if (this.state.accordion?.props.multiple) {
+                    this?.state.toggle();
+                }
+                else {
+                    if (this.state.accordion?.props.collapsible) {
+                        const isActive = this.state.isActive;
+                        // accordionAtom?.state.close(accordionAtom.state.props.values);
+                        this.state.accordion.close(this.state.accordion.props.values ?? []);
+                        if (!isActive) {
+                            this?.state.open();
+                        }
+                    }
+                    else {
+                        this?.state.open();
+                    }
+                }
+            },
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.header = node;
+            }
+        };
+    }
+    body(props = {}) {
+        return {
+            'aria-labelledby': `accordion-header-${this.id}`,
+            'aria-hidden': !this.state?.isOpen, // Hide when closed
+            role: 'region', // Announce as a region
+            'data-atom': this.id ?? '',
+            'data-kind': 'accordion-body',
+            id: `accordion-body-${this.id}`,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.body = node;
+            }
+        };
+    }
+    indicator(props = {}) {
+        return {
+            'data-controled-by': this.state?.accordionId ?? '',
+            'data-kind': 'accordion-indicator',
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.indicator = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(AccordionItemBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(AccordionItemBond.CONTEXT_KEY, bond);
+    }
+}
+export class AccordionItemBondState extends BondState {
+    static CONTEXT_KEY = '@atoms/context/accordion/item';
+    #accordion;
+    constructor(props) {
+        super(props);
+        this.#accordion = AccordionBond.get()?.state;
+        if (!this.#accordion) {
+            throw new Error('AccordionItemAtom must be used within an AccordionAtom context.');
+        }
+    }
+    get id() {
+        return this.props.value ?? super.id;
+    }
+    get accordionId() {
+        return this.accordion?.id;
+    }
+    get isOpen() {
+        return this.accordion?.props.values.includes(this.id);
+    }
+    get isActive() {
+        return (!this.props.disabled &&
+            !this.accordion?.props?.disabled &&
+            this.accordion?.props?.values.includes(this.id));
+    }
+    get accordion() {
+        return this.#accordion;
+    }
+    mount() {
+        this.accordion?.mountItem(this.id, {});
+        return this.unmount;
+    }
+    unmount() {
+        this.accordion?.unmountItem(this.id);
+    }
+    open() {
+        this.accordion?.open([this.id]);
+    }
+    close() {
+        this.accordion?.close([this.id]);
+    }
+    toggle() {
+        this.accordion?.toggle(this.id);
+    }
+}

package/dist/components/accordion/item/index.d.ts

@@ -0,0 +1 @@
+export * as AccordionItem from './atoms';

package/dist/components/accordion/item/index.js

@@ -0,0 +1 @@
+export * as AccordionItem from './atoms';