style(changelog): refine collapsible toggle styling

Use disclosure chevrons for expanded state changes
Align toggle metadata and adjust focus treatment
This commit is contained in:
2026-03-23 14:54:55 +01:00
parent eed12be06d
commit 8d2b0c02b6
+16 -21
View File
@@ -872,7 +872,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
chevron.className = 'changes-chevron';
chevron.setAttribute('aria-hidden', 'true');
chevron.textContent = '+';
chevron.textContent = '';
meta.append(count, chevron);
toggle.append(titleContent, meta);
@@ -887,7 +887,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
toggle.setAttribute('aria-expanded', String(nextExpanded));
list.hidden = !nextExpanded;
section.classList.toggle('changes-section-open', nextExpanded);
chevron.textContent = nextExpanded ? '' : '+';
chevron.textContent = nextExpanded ? '' : '';
});
title.replaceWith(toggle);
@@ -1193,7 +1193,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
.changes-toggle {
width: 100%;
justify-content: space-between;
justify-content: flex-start;
margin-bottom: 0;
padding: 0;
border: none;
@@ -1201,15 +1201,16 @@ import BaseLayout from '../layouts/BaseLayout.astro';
cursor: pointer;
text-align: left;
color: var(--color-accent);
font: inherit;
}
.changes-toggle:hover {
color: var(--color-text);
color: var(--color-accent);
}
.changes-toggle:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
outline: 1px solid var(--color-accent);
outline-offset: 3px;
}
.changes-toggle-main {
@@ -1222,25 +1223,19 @@ import BaseLayout from '../layouts/BaseLayout.astro';
.changes-toggle-meta {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
margin-left: var(--space-md);
gap: 0.35rem;
margin-left: 0.35rem;
flex-shrink: 0;
}
.changes-count {
color: var(--color-text-secondary);
font-size: 0.85rem;
color: var(--color-accent);
font-size: inherit;
}
.changes-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.85rem;
display: inline-block;
font-size: 0.9em;
line-height: 1;
}
@@ -1331,15 +1326,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
.changes-toggle {
align-items: flex-start;
gap: var(--space-sm);
gap: 0;
}
.changes-toggle-main {
flex: 1;
flex: initial;
}
.changes-toggle-meta {
margin-left: 0;
margin-left: 0.35rem;
}
}