apunkt/ktx
1
0
Fork 0
mirror of https://github.com/Kaelio/ktx.git synced 2026-06-10 08:05:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(docs): tighten sidebar selectors + add focus-visible

Browse source 
- Scope section trigger rules to div[data-state]:not([class]) so they
  don't bleed onto other Radix collapsibles inside #nd-sidebar.
  Fumadocs 15 section wrapper divs are bare (no class, no id); content
  panels and popovers always carry a class attribute.
- Add focus-visible rings for section buttons and page links
  (a11y gap from code review).
- Add !important to margin-top for consistency with the
  surrounding padding overrides.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Luca Martial 2026-05-11 00:31:58 -07:00
parent 0049a47cc6
commit ea2d002a69
1 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

28
docs/app/global.css
View file

@ -194,8 +194,10 @@ th {
}
/* Section folder trigger — uppercase tracked label
Fumadocs 15 uses div[data-state] > button[data-state] for collapsible sections */
#nd-sidebar div[data-state] > button[data-state] {
Fumadocs 15 section wrappers are bare <div data-state> (no class, no id);
content panels and other Radix collapsibles always carry a class attribute,
so :not([class]) tightly scopes these rules to section triggers only. */
#nd-sidebar div[data-state]:not([class]) > button[data-state] {
font-family: var(--font-display), var(--font-sans), sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
@ -203,7 +205,7 @@ th {
text-transform: uppercase !important;
color: var(--color-fd-muted-foreground) !important;
padding: 14px 12px 8px !important;
margin-top: 8px;
margin-top: 8px !important;
border-top: 1px solid var(--color-fd-border);
width: 100%;
display: flex;
@ -215,19 +217,25 @@ th {
transition: color 0.15s ease;
}
#nd-sidebar div[data-state] > button[data-state]:hover {
#nd-sidebar div[data-state]:not([class]) > button[data-state]:hover {
color: var(--color-fd-foreground) !important;
}
#nd-sidebar div[data-state]:not([class]) > button[data-state]:focus-visible {
outline: 2px solid var(--color-fd-primary);
outline-offset: 2px;
border-radius: 4px;
}
/* Remove top border from the first section in the sidebar */
#nd-sidebar div[data-state]:first-child > button[data-state] {
#nd-sidebar div[data-state]:not([class]):first-child > button[data-state] {
border-top: none;
margin-top: 0;
margin-top: 0 !important;
padding-top: 4px !important;
}
/* Chevron rotation on toggle */
#nd-sidebar div[data-state] > button[data-state] svg {
#nd-sidebar div[data-state]:not([class]) > button[data-state] svg {
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0.7;
}
@ -254,6 +262,12 @@ th {
font-weight: 500;
}
#nd-sidebar a[data-active]:focus-visible {
outline: 2px solid var(--color-fd-primary);
outline-offset: 2px;
border-radius: 6px;
}
.dark #nd-sidebar a[data-active="true"] {
background: color-mix(in oklch, var(--color-fd-primary) 12%, transparent) !important;
}