diff --git a/.changeset/giant-kings-suffer.md b/.changeset/giant-kings-suffer.md new file mode 100644 index 000000000..44876c57e --- /dev/null +++ b/.changeset/giant-kings-suffer.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/skeleton": patch +--- + +bugfix: Accordion Item `on:toggle` event now provides `id` and `panelId` values diff --git a/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte b/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte index 3cbb2ba58..1a8a1b2de 100644 --- a/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte +++ b/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte @@ -16,7 +16,7 @@ // Event Dispatcher type AccordionItemEvent = { - toggle: { event?: Event; id: string; open: boolean; autocollapse: boolean }; + toggle: { event?: Event; id: string; panelId: string; open: boolean; autocollapse: boolean }; }; const dispatch = createEventDispatcher(); @@ -108,8 +108,14 @@ function onToggle(event?: SvelteEvent): void { const currentOpenState = autocollapse ? $active === id : open; - /** @event {{ event: Event, id: string, open: boolean, autocollapse: boolean }} toggle - Fires when an accordion item is toggled. */ - dispatch('toggle', { event, id: `accordion-control-${id}`, open: currentOpenState, autocollapse }); + /** @event {{ event: Event, id: string, panelId: string, open: boolean, autocollapse: boolean }} toggle - Fires when an accordion item is toggled. */ + dispatch('toggle', { + event, + id, + panelId: `accordion-panel-${id}`, + open: currentOpenState, + autocollapse + }); } // If auto-collapse mode enabled and item is set open, set as this item active @@ -133,7 +139,7 @@