From fe79a5a8e63a0a6d84f73f893cd3ca67cc9f2616 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Wed, 18 Mar 2026 10:37:20 -0600 Subject: [PATCH 01/17] fix(accordion): remove divider from last accordion item in ionic theme --- core/src/components/accordion/accordion.ionic.scss | 5 +++++ core/src/components/accordion/accordion.tsx | 9 ++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/core/src/components/accordion/accordion.ionic.scss b/core/src/components/accordion/accordion.ionic.scss index 5ec75eb92d7..5ab0c82645e 100644 --- a/core/src/components/accordion/accordion.ionic.scss +++ b/core/src/components/accordion/accordion.ionic.scss @@ -28,6 +28,11 @@ z-index: 3; } +// Hide the divider for the last accordion item +:host(.accordion-last)::after { + display: none; +} + :host(.accordion-animated) { transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1); } diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index c6af7df483d..fad0c4c6619 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/core/src/components/accordion/accordion.tsx @@ -87,6 +87,7 @@ export class Accordion implements ComponentInterface { @State() state: AccordionState = AccordionState.Collapsed; @State() isNext = false; @State() isPrevious = false; + @State() isLast = false; /** * Tracks whether a user-initiated interaction has occurred. * Animations are disabled until the first interaction happens. @@ -431,6 +432,12 @@ export class Accordion implements ComponentInterface { const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue; + /** + * Check if this is the last accordion in the group. + */ + const nextAccordion = this.getNextSibling(); + this.isLast = nextAccordion === undefined; + if (shouldExpand) { this.expandAccordion(); this.isNext = this.isPrevious = false; @@ -444,7 +451,6 @@ export class Accordion implements ComponentInterface { * applied. Check to see if the * next or previous accordion is selected. */ - const nextAccordion = this.getNextSibling(); const nextAccordionValue = nextAccordion?.value; if (nextAccordionValue !== undefined) { @@ -525,6 +531,7 @@ export class Accordion implements ComponentInterface { 'accordion-next': this.isNext, 'accordion-previous': this.isPrevious, + 'accordion-last': this.isLast, 'accordion-disabled': disabled, 'accordion-readonly': readonly, From 16053379617b2ed95c8b4d66b5a6289784dcb620 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Wed, 18 Mar 2026 11:20:46 -0600 Subject: [PATCH 02/17] fix(accordian): update color for pressed state --- core/src/components/accordion/accordion.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index fad0c4c6619..4d2ada2a70d 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/core/src/components/accordion/accordion.tsx @@ -200,6 +200,15 @@ export class Accordion implements ComponentInterface { if (ionItem.lines === undefined) { ionItem.lines = 'full'; } + + /** + * Set the pressed state background color for ionic theme. + * This overrides the default blue color from ion-item. + */ + const theme = getIonTheme(this); + if (theme === 'ionic') { + ionItem.style.setProperty('--background-activated', 'var(--token-bg-neutral-subtlest-press)'); + } }; private getSlottedHeaderIonItem = () => { From aabdf467e83c5d4315a573f8575a4c144bee3946 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Thu, 19 Mar 2026 07:58:37 -0600 Subject: [PATCH 03/17] fix(accodian): add padding for nested accordians --- core/src/components/accordion/accordion.tsx | 6 ++++++ core/src/components/accordion/test/nested/index.html | 2 +- core/src/components/item/item.ionic.scss | 7 +++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index 4d2ada2a70d..c8f1efd8ea9 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/core/src/components/accordion/accordion.tsx @@ -201,6 +201,12 @@ export class Accordion implements ComponentInterface { ionItem.lines = 'full'; } + /** + * Add a class to identify this item as an accordion header + * for specific styling purposes + */ + ionItem.classList.add('accordion-header-item'); + /** * Set the pressed state background color for ionic theme. * This overrides the default blue color from ion-item. diff --git a/core/src/components/accordion/test/nested/index.html b/core/src/components/accordion/test/nested/index.html index 1588b27aead..783740c6634 100644 --- a/core/src/components/accordion/test/nested/index.html +++ b/core/src/components/accordion/test/nested/index.html @@ -11,7 +11,7 @@