diff --git a/packages/components/src/Accordion/src/Accordion.module.css b/packages/components/src/Accordion/src/Accordion.module.css index d94ba0325..f03a788a1 100644 --- a/packages/components/src/Accordion/src/Accordion.module.css +++ b/packages/components/src/Accordion/src/Accordion.module.css @@ -48,3 +48,7 @@ border-end-start-radius: var(--disclosure-border-radius-size); border-end-end-radius: var(--disclosure-border-radius-size); } + +.hop-Accordion__disclosure:last-child .hop-Accordion__disclosure-panel { + border-block-end-width: var(--disclosure-last-child-border-block-end-size); +} diff --git a/packages/components/src/Disclosure/src/Disclosure.module.css b/packages/components/src/Disclosure/src/Disclosure.module.css index 720e69641..4ae091ced 100644 --- a/packages/components/src/Disclosure/src/Disclosure.module.css +++ b/packages/components/src/Disclosure/src/Disclosure.module.css @@ -18,9 +18,9 @@ /* Inline */ --hop-Disclosure-inline-border-radius: 0; --hop-Disclosure-inline-box-shadow: none; - --hop-Disclosure-inline-panel-border-size: 0; - --hop-Disclosure-inline-panel-border-size-expanded: 0; - --hop-Disclosure-inline-panel-border-color: transparent; + --hop-Disclosure-inline-panel-border-size: 0 0 var(--hop-space-10) 0; + --hop-Disclosure-inline-panel-border-size-expanded: 0 0 var(--hop-space-10) 0; + --hop-Disclosure-inline-panel-border-color: var(--hop-neutral-border-weak); /* Disabled */ --hop-Disclosure-box-shadow-disabled: none; @@ -30,6 +30,7 @@ --panel-background-color: var(--hop-Disclosure-panel-background-color); --panel-padding: var(--hop-Disclosure-panel-padding); --panel-border-size: var(--hop-Disclosure-standalone-panel-border-size); + --panel-border-color: var(--hop-Disclosure-standalone-panel-border-color); box-sizing: border-box; border-radius: var(--border-radius); @@ -55,12 +56,12 @@ .hop-Disclosure:has(.hop-Disclosure__header)[data-expanded] { --panel-border-size: var(--hop-Disclosure-standalone-panel-border-size-expanded); - --panel-border-color: var(--hop-Disclosure-standalone-panel-border-color); --panel-padding: var(--hop-Disclosure-with-header-panel-padding); } .hop-Disclosure--inline { --panel-border-size: var(--hop-Disclosure-inline-panel-border-size); + --panel-border-color: var(--hop-Disclosure-inline-panel-border-color); } .hop-Disclosure--inline:has(.hop-Disclosure__header) { @@ -70,7 +71,6 @@ .hop-Disclosure--inline:has(.hop-Disclosure__header)[data-expanded] { --panel-border-size: var(--hop-Disclosure-inline-panel-border-size-expanded); - --panel-border-color: var(--hop-Disclosure-inline-panel-border-color); } .hop-Disclosure[data-disabled] { diff --git a/packages/components/src/Disclosure/src/DisclosureHeader.module.css b/packages/components/src/Disclosure/src/DisclosureHeader.module.css index ad12da248..e5dfdf973 100644 --- a/packages/components/src/Disclosure/src/DisclosureHeader.module.css +++ b/packages/components/src/Disclosure/src/DisclosureHeader.module.css @@ -21,8 +21,8 @@ /* Inline */ --hop-DisclosureHeader-inline-outline-size: 0; --hop-DisclosureHeader-inline-outline-color: transparent; - --hop-DisclosureHeader-inline-border-size: 0 0 var(--hop-space-10) 0; - --hop-DisclosureHeader-inline-border-color: var(--hop-neutral-border-weak); + --hop-DisclosureHeader-inline-border-size: 0; + --hop-DisclosureHeader-inline-border-color: transparent; --hop-DisclosureHeader-inline-border-radius: 0; /* Expanded */