@bridge-ui/vue 0.0.9 → 0.0.10

package/ai/skills/bridge-ui-components/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: bridge-ui-components
 description: >-
-  Use Bridge UI Vue components — Button, Avatar, Card, Alert, Badge, Icon,
+  Use Bridge UI Vue components — Button, Avatar, Card, Alert, Accordion, Badge, Icon,
   Link, List, Tabs, Spinner, Skeleton, Progress, TextField, Select,
   Autocomplete, DateField, DatePicker, DateRangeField, DateRangePicker,
   TimeField, TimePicker, DateTimeField, DateTimePicker, classes, customProps,
@@ -23,6 +23,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Avatar                        | `.ai/docs/components/Avatar.md`                                       |
 | Badge                         | `.ai/docs/components/Badge.md`                                        |
 | Alert                         | `.ai/docs/components/Alert.md`                                        |
+| Accordion                     | `.ai/docs/components/Accordion.md`                                    |
 | Icon                          | `.ai/docs/components/Icon.md`                                         |
 | Lists                         | `.ai/docs/components/List.md`                                         |
 | Tabs                          | `.ai/docs/components/Tabs.md`                                         |

package/dist/Components/Accordion/Accordion.js

@@ -0,0 +1,5 @@
+import e from "./Accordion.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/Accordion/Accordion.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/Accordion/Accordion.vue.d.ts

@@ -0,0 +1,26 @@
+import { AccordionValue } from '@bridge-ui/core';
+import { AccordionOwnProps, AccordionSlots } from './accordion.types';
+type __VLS_Slots = AccordionSlots;
+type __VLS_Props = AccordionOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: AccordionValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: AccordionValue) => any;
+    "update:modelValue": (...args: unknown[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: AccordionValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/Accordion/Accordion.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { useAccordion as e } from "./composables/useAccordion.js";
+import { createElementBlock as t, defineComponent as n, guardReactiveProps as r, mergeModels as i, normalizeProps as a, openBlock as o, renderSlot as s, unref as c, useModel as l } from "vue";
+//#region src/Components/Accordion/Accordion.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	__name: "Accordion",
+	props: /*@__PURE__*/ i({
+		classes: {},
+		color: {},
+		customProps: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		size: {},
+		variant: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ i(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(n, { emit: i }) {
+		let u = i, d = n, f = l(n, "modelValue"), { rootBind: p } = e(d, {
+			size: "md",
+			multiple: !1,
+			disabled: !1,
+			color: "primary",
+			variant: "default"
+		}, f, u);
+		return (e, n) => (o(), t("div", a(r(c(p))), [s(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { u as default };

package/dist/Components/Accordion/accordion.types.d.ts

@@ -0,0 +1,88 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { AccordionColor, AccordionSize, AccordionValue, AccordionVariant, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+export interface AccordionSizeOverrides {}
+export interface AccordionColorOverrides {}
+export interface AccordionVariantOverrides {}
+export interface AccordionClasses {
+    /**
+     * Classes merged onto the root.
+     */
+    root?: string;
+}
+export interface AccordionCustomProps {
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface AccordionEmits {
+    /**
+     * Emitted when the expanded value(s) change.
+     */
+    change: [value: AccordionValue];
+    /**
+     * Emitted when `v-model` should update.
+     */
+    "update:modelValue": [value: AccordionValue];
+}
+/**
+ * Accordion context root. Compose with `AccordionItem`.
+ */
+export interface AccordionOwnProps {
+    /**
+     * Classes for accordion parts.
+     *
+     * @default undefined
+     */
+    classes?: AccordionClasses;
+    /**
+     * Accent color for the expanded indicator and trigger.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<AccordionColor, AccordionColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: AccordionCustomProps;
+    /**
+     * Disable all items.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allow more than one item expanded at once.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Density of triggers and content.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<AccordionSize, AccordionSizeOverrides>;
+    /**
+     * Visual layout: flush (`default`), boxed (`outlined`), quiet (`plain`), or cards (`separated`).
+     *
+     * @default "default"
+     */
+    variant?: MergeProps<AccordionVariant, AccordionVariantOverrides>;
+}
+export interface AccordionSlots {
+    /**
+     * The children to render (`AccordionItem`, etc.).
+     */
+    default?: Slot<undefined>;
+}
+export type AccordionProps = MergeHtmlProps<AccordionOwnProps, HTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     */
+    modelValue?: AccordionValue;
+};

package/dist/Components/Accordion/accordionInjectionKey.d.ts

@@ -0,0 +1,63 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { AccordionValue } from '@bridge-ui/core';
+/**
+ * Merged token classes for items / triggers / panels.
+ */
+export type AccordionTokenClasses = {
+    colorIndicator?: string;
+    colorTriggerExpanded?: string;
+    iconSize?: string;
+    itemSize?: string;
+    itemVariant?: string;
+    panelSize?: string;
+    rootSize?: string;
+    rootVariant?: string;
+    triggerSize?: string;
+    triggerVariant?: string;
+};
+/**
+ * Shared accordion state for `AccordionItem` descendants.
+ */
+export type AccordionContextValue = {
+    /**
+     * Whether the entire accordion is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Disabled item values.
+     */
+    disabledValues: string[];
+    /**
+     * Expanded value(s).
+     */
+    expanded: AccordionValue;
+    /**
+     * Focus a trigger by item value (arrow navigation).
+     */
+    focusTrigger: (value: string) => void;
+    /**
+     * Stable id prefix for trigger / panel pairing.
+     */
+    id: string;
+    /**
+     * Ordered item values (mount order).
+     */
+    itemValues: string[];
+    /**
+     * Whether more than one item may be expanded.
+     */
+    multiple: boolean;
+    /**
+     * Registers an item and returns unregister.
+     */
+    registerItem: (value: string, disabled?: boolean) => () => void;
+    /**
+     * Toggles an item by value.
+     */
+    toggleItem: (value: string) => void;
+    /**
+     * Merged token classes for items / triggers / panels.
+     */
+    tokenClasses: AccordionTokenClasses;
+};
+export declare const ACCORDION_INJECTION_KEY: InjectionKey<ComputedRef<AccordionContextValue>>;

package/dist/Components/Accordion/accordionInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/Accordion/accordionInjectionKey.ts
+var e = Symbol("bridge-accordion");
+//#endregion
+export { e as ACCORDION_INJECTION_KEY };

package/dist/Components/Accordion/composables/useAccordion.d.ts

@@ -0,0 +1,14 @@
+import { Ref, SetupContext } from 'vue';
+import { AccordionValue, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { AccordionEmits, AccordionOwnProps, AccordionProps } from '../accordion.types';
+import { AccordionContextValue } from '../accordionInjectionKey';
+type AccordionLibDefaults = LibDefaultsShape<AccordionOwnProps, "size" | "color" | "variant" | "disabled" | "multiple">;
+type AccordionMerged = MergeLibDefaults<AccordionOwnProps, AccordionLibDefaults>;
+export declare function useAccordion(props: AccordionOwnProps, libDefaults: AccordionLibDefaults, model: Ref<undefined | AccordionValue>, emit: SetupContext<AccordionEmits>["emit"]): {
+    merged: import('vue').ComputedRef<AccordionMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<AccordionProps, "color" | "size" | "classes" | "customProps" | "variant" | "disabled" | "multiple">>>;
+    contextValue: import('vue').ComputedRef<AccordionContextValue>;
+};
+export {};

package/dist/Components/Accordion/composables/useAccordion.js

@@ -0,0 +1,79 @@
+import { ACCORDION_INJECTION_KEY as e } from "../accordionInjectionKey.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { computed as i, provide as a, ref as o, useAttrs as s, useId as c } from "vue";
+import { cn as l, getAccordionTriggerId as u, mergeBridgeUILayeredClasses as d, normalizeAccordionValue as f, splitComponentProps as p, toggleAccordionItem as m } from "@bridge-ui/core";
+import { get as h } from "es-toolkit/compat";
+import { colorProps as g, sizeProps as _, variantProps as v } from "@bridge-ui/core/Tokens/Accordion";
+//#region src/Components/Accordion/composables/useAccordion.ts
+var y = [
+	"size",
+	"color",
+	"classes",
+	"variant",
+	"disabled",
+	"multiple",
+	"customProps"
+];
+function b(b, x, S, C) {
+	let w = c(), T = s(), E = `bridge-accordion${w}`, D = o([]), O = o([]), k = i(() => p({
+		props: {
+			...T,
+			...b
+		},
+		bridgeKeys: y
+	})), { merged: A, entry: j } = n({
+		libDefaults: x,
+		componentName: "Accordion",
+		props: () => k.value.componentProps
+	}), M = i(() => A.value.multiple === !0), N = i(() => f(S.value, M.value));
+	function P(e) {
+		if (A.value.disabled || O.value.includes(e)) return;
+		let t = m(N.value, e, M.value);
+		S.value = t, C("update:modelValue", t), C("change", t);
+	}
+	function F(e, t = !1) {
+		return D.value.includes(e) || (D.value = [...D.value, e]), t ? O.value.includes(e) || (O.value = [...O.value, e]) : O.value = O.value.filter((t) => t !== e), () => {
+			D.value = D.value.filter((t) => t !== e), O.value = O.value.filter((t) => t !== e);
+		};
+	}
+	function I(e) {
+		document.getElementById(u(E, e))?.focus();
+	}
+	let L = r({
+		entry: j,
+		props: () => k.value.componentProps
+	}), R = i(() => d(_, j.value?.tokens?.size)), z = i(() => d(v, j.value?.tokens?.variant)), B = i(() => d(g, j.value?.tokens?.color)), V = i(() => h(R.value, A.value.size)), H = i(() => h(z.value, A.value.variant)), U = i(() => h(B.value, A.value.color)), W = i(() => ({
+		toggleItem: P,
+		registerItem: F,
+		focusTrigger: I,
+		id: E,
+		multiple: M.value,
+		expanded: N.value,
+		itemValues: D.value,
+		disabledValues: O.value,
+		disabled: A.value.disabled === !0,
+		tokenClasses: {
+			rootSize: h(V.value, "root"),
+			itemSize: h(V.value, "item"),
+			iconSize: h(V.value, "icon"),
+			panelSize: h(V.value, "panel"),
+			triggerSize: h(V.value, "trigger"),
+			rootVariant: h(H.value, "root"),
+			itemVariant: h(H.value, "item"),
+			triggerVariant: h(H.value, "trigger"),
+			colorIndicator: h(U.value, "indicator"),
+			colorTriggerExpanded: h(U.value, "triggerExpanded")
+		}
+	}));
+	return a(e, W), {
+		merged: A,
+		rootBind: i(() => t(A.value.customProps?.root, k.value.inheritedAttrs, { class: l({
+			[h(V.value, "root") ?? ""]: !0,
+			[h(H.value, "root") ?? ""]: !0,
+			[h(L.value, "root") ?? ""]: !0
+		}) })),
+		contextValue: W
+	};
+}
+//#endregion
+export { b as useAccordion };

package/dist/Components/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+export type { AccordionClasses, AccordionColorOverrides, AccordionCustomProps, AccordionEmits, AccordionOwnProps, AccordionProps, AccordionSizeOverrides, AccordionSlots, AccordionVariantOverrides, } from './accordion.types';
+export { default as Accordion } from './Accordion.vue';
+export { ACCORDION_INJECTION_KEY, type AccordionContextValue, type AccordionTokenClasses, } from './accordionInjectionKey';
+export { useAccordion } from './composables/useAccordion';

package/dist/Components/Accordion/index.js

@@ -0,0 +1,4 @@
+import { ACCORDION_INJECTION_KEY as e } from "./accordionInjectionKey.js";
+import { useAccordion as t } from "./composables/useAccordion.js";
+import n from "./Accordion.js";
+export { e as ACCORDION_INJECTION_KEY, n as Accordion, t as useAccordion };

package/dist/Components/AccordionItem/AccordionItem.js

@@ -0,0 +1,5 @@
+import e from "./AccordionItem.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/AccordionItem/AccordionItem.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/AccordionItem/AccordionItem.vue.d.ts

@@ -0,0 +1,11 @@
+import { AccordionItemOwnProps, AccordionItemSlots } from './accordionItem.types';
+type __VLS_Slots = AccordionItemSlots;
+declare const __VLS_base: import('vue').DefineComponent<AccordionItemOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AccordionItemOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/AccordionItem/AccordionItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { hasNamedSlot as e, isPropPresent as t } from "../../Utils/slotOrProp.js";
+import { useAccordionItem as n } from "./composables/useAccordionItem.js";
+import r from "../Icon/Icon.js";
+import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _ } from "vue";
+//#region src/Components/AccordionItem/AccordionItem.vue?vue&type=script&setup=true&lang.ts
+var v = /*@__PURE__*/ u({
+	inheritAttrs: !1,
+	__name: "AccordionItem",
+	props: {
+		classes: {},
+		customProps: {},
+		disabled: { type: Boolean },
+		title: {},
+		value: {}
+	},
+	setup(u) {
+		let { slots: v, merged: y, rootBind: b, titleBind: x, panelBind: S, triggerBind: C, collapseBind: w, indicatorBind: T, panelInnerBind: E } = n(u);
+		return (n, u) => (m(), s("div", p(d(_(b))), [c("button", p(d(_(C))), [c("span", p(d(_(x))), [_(e)(_(v), "title") ? h(n.$slots, "title", {}, void 0, void 0, 0) : _(t)(_(y).title) ? (m(), s(i, { key: 1 }, [l(g(_(y).title), 1)], 64)) : o("", !0)], 16), _(e)(_(v), "indicator") ? h(n.$slots, "indicator", {}, void 0, void 0, 0) : (m(), a(_(r), f({
+			key: 1,
+			icon: "chevronDown"
+		}, _(T)), null, 16))], 16), c("div", p(d(_(w))), [c("div", p(d(_(E))), [c("div", p(d(_(S))), [h(n.$slots, "default")], 16)], 16)], 16)], 16));
+	}
+});
+//#endregion
+export { v as default };

package/dist/Components/AccordionItem/accordionItem.types.d.ts

@@ -0,0 +1,105 @@
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { MergeHtmlProps } from '@bridge-ui/core';
+import { IconProps } from '../Icon';
+export interface AccordionItemClasses {
+    /**
+     * Classes merged onto the expand indicator icon.
+     */
+    indicator?: string;
+    /**
+     * Classes merged onto the panel region.
+     */
+    panel?: string;
+    /**
+     * Classes merged onto the item shell.
+     */
+    root?: string;
+    /**
+     * Classes merged onto the title text wrapper.
+     */
+    title?: string;
+    /**
+     * Classes merged onto the trigger button.
+     */
+    trigger?: string;
+}
+export interface AccordionItemCustomProps {
+    /**
+     * Props forwarded to the expand indicator `Icon`.
+     *
+     * @default undefined
+     */
+    indicator?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the panel region.
+     *
+     * @default undefined
+     */
+    panel?: HTMLAttributes;
+    /**
+     * Props forwarded to the item shell.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the title wrapper.
+     *
+     * @default undefined
+     */
+    title?: HTMLAttributes;
+    /**
+     * Props forwarded to the trigger button.
+     *
+     * @default undefined
+     */
+    trigger?: ButtonHTMLAttributes;
+}
+/**
+ * One accordion section (trigger + panel). Must be used inside `Accordion`.
+ */
+export interface AccordionItemOwnProps {
+    /**
+     * Classes for accordion item parts.
+     *
+     * @default undefined
+     */
+    classes?: AccordionItemClasses;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: AccordionItemCustomProps;
+    /**
+     * Disable this item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Trigger label (prefer `#title` slot when set).
+     *
+     * @default undefined
+     */
+    title?: string;
+    /**
+     * Stable id for expanded state.
+     */
+    value: string;
+}
+export interface AccordionItemSlots {
+    /**
+     * Panel content.
+     */
+    default?: Slot<undefined>;
+    /**
+     * Custom expand indicator (defaults to chevron icon).
+     */
+    indicator?: Slot<undefined>;
+    /**
+     * Custom title content (overrides `title` prop when set).
+     */
+    title?: Slot<undefined>;
+}
+export type AccordionItemProps = MergeHtmlProps<AccordionItemOwnProps, HTMLAttributes>;

package/dist/Components/AccordionItem/composables/useAccordionItem.d.ts

@@ -0,0 +1,41 @@
+import { IconSize } from '@bridge-ui/core';
+import { AccordionItemOwnProps, AccordionItemProps } from '../accordionItem.types';
+export declare function useAccordionItem(props: AccordionItemOwnProps): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    merged: import('vue').ComputedRef<AccordionItemOwnProps>;
+    expanded: import('vue').ComputedRef<boolean>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<AccordionItemProps, "value" | "classes" | "customProps" | "title" | "disabled">>>;
+    iconSize: import('vue').ComputedRef<keyof IconSize>;
+    titleBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        role: string;
+        "aria-hidden": boolean;
+        id: string;
+        "aria-labelledby": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        onClick: (event: MouseEvent) => void;
+        type: "button";
+        disabled: boolean;
+        onKeydown: (event: KeyboardEvent) => void;
+        "aria-expanded": boolean;
+        id: string;
+        "aria-controls": string;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    collapseBind: import('vue').ComputedRef<{
+        class: string;
+    }>;
+    indicatorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    panelInnerBind: import('vue').ComputedRef<{
+        class: string;
+    }>;
+};

package/dist/Components/AccordionItem/composables/useAccordionItem.js

@@ -0,0 +1,123 @@
+import { ACCORDION_INJECTION_KEY as e } from "../../Accordion/accordionInjectionKey.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { computed as i, inject as a, onBeforeUnmount as o, onMounted as s, useAttrs as c, useSlots as l, watch as u } from "vue";
+import { cn as d, getAccordionPanelId as f, getAccordionTriggerId as p, getAdjacentAccordionValue as m, isAccordionItemExpanded as h, splitComponentProps as g } from "@bridge-ui/core";
+import { get as _ } from "es-toolkit/compat";
+//#region src/Components/AccordionItem/composables/useAccordionItem.ts
+var v = [
+	"title",
+	"value",
+	"classes",
+	"disabled",
+	"customProps"
+];
+function y(y) {
+	let b = c(), x = l(), S = a(e, null);
+	if (!S) throw Error("AccordionItem must be used within an Accordion provider");
+	let C = S, w = i(() => g({
+		props: {
+			...b,
+			...y
+		},
+		bridgeKeys: v
+	})), { merged: T, entry: E } = n({
+		componentName: "AccordionItem",
+		props: () => w.value.componentProps
+	}), D = i(() => T.value.value), O = i(() => C.value.disabled || T.value.disabled === !0), k = i(() => h(C.value.expanded, D.value, C.value.multiple)), A = i(() => C.value.tokenClasses.iconSize ?? "md"), j = null;
+	function M() {
+		j?.(), j = C.value.registerItem(D.value, O.value);
+	}
+	s(M), u([D, O], M), o(() => {
+		j?.(), j = null;
+	});
+	let N = r({
+		entry: E,
+		props: () => w.value.componentProps
+	});
+	function P(e) {
+		O.value || (C.value.toggleItem(D.value), (T.value.customProps?.trigger)?.onClick?.(e));
+	}
+	function F(e) {
+		let t = C.value, n = new Set(t.disabledValues);
+		if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+			e.preventDefault();
+			let r = m(t.itemValues, D.value, 1, n);
+			t.focusTrigger(r);
+		}
+		if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+			e.preventDefault();
+			let r = m(t.itemValues, D.value, -1, n);
+			t.focusTrigger(r);
+		}
+		if (e.key === "Home") {
+			e.preventDefault();
+			let r = m(t.itemValues, t.itemValues[t.itemValues.length - 1] ?? D.value, 1, n);
+			t.focusTrigger(r);
+		}
+		if (e.key === "End") {
+			e.preventDefault();
+			let r = m(t.itemValues, t.itemValues[0] ?? D.value, -1, n);
+			t.focusTrigger(r);
+		}
+		(T.value.customProps?.trigger)?.onKeydown?.(e);
+	}
+	let I = i(() => t(T.value.customProps?.root, w.value.inheritedAttrs, { class: d({
+		[C.value.tokenClasses.itemSize ?? ""]: !0,
+		[C.value.tokenClasses.itemVariant ?? ""]: !0,
+		[_(N.value, "root") ?? ""]: !0
+	}) })), L = i(() => t(T.value.customProps?.trigger, {}, {
+		onClick: P,
+		type: "button",
+		disabled: O.value,
+		onKeydown: F,
+		"aria-expanded": k.value,
+		id: p(C.value.id, D.value),
+		"aria-controls": f(C.value.id, D.value),
+		class: d({
+			"inline-flex w-full cursor-pointer items-center justify-between text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 disabled:pointer-events-none disabled:opacity-50": !0,
+			[C.value.tokenClasses.triggerSize ?? ""]: !0,
+			[C.value.tokenClasses.triggerVariant ?? ""]: !0,
+			[C.value.tokenClasses.colorTriggerExpanded ?? ""]: k.value,
+			[_(N.value, "trigger") ?? ""]: !0
+		})
+	})), R = i(() => t(T.value.customProps?.title, {}, d({
+		"min-w-0 flex-1": !0,
+		[_(N.value, "title") ?? ""]: !0
+	}))), z = i(() => t(T.value.customProps?.indicator, {}, {
+		size: A.value,
+		class: d({
+			"shrink-0 transition-transform duration-200 motion-reduce:transition-none": !0,
+			"rotate-180": k.value,
+			[C.value.tokenClasses.colorIndicator ?? ""]: k.value,
+			[_(N.value, "indicator") ?? ""]: !0
+		})
+	})), B = i(() => ({ class: d({
+		"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none": !0,
+		"grid-rows-[1fr]": k.value,
+		"grid-rows-[0fr]": !k.value
+	}) })), V = i(() => ({ class: "min-h-0 overflow-hidden" }));
+	return {
+		slots: x,
+		merged: T,
+		expanded: k,
+		rootBind: I,
+		iconSize: A,
+		titleBind: R,
+		panelBind: i(() => t(T.value.customProps?.panel, {}, {
+			role: "region",
+			"aria-hidden": !k.value,
+			id: f(C.value.id, D.value),
+			"aria-labelledby": p(C.value.id, D.value),
+			class: d({
+				[C.value.tokenClasses.panelSize ?? ""]: !0,
+				[_(N.value, "panel") ?? ""]: !0
+			})
+		})),
+		triggerBind: L,
+		collapseBind: B,
+		indicatorBind: z,
+		panelInnerBind: V
+	};
+}
+//#endregion
+export { y as useAccordionItem };

package/dist/Components/AccordionItem/index.d.ts

@@ -0,0 +1,3 @@
+export type { AccordionItemClasses, AccordionItemCustomProps, AccordionItemOwnProps, AccordionItemProps, AccordionItemSlots, } from './accordionItem.types';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { useAccordionItem } from './composables/useAccordionItem';