@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/nav.module.scss

@@ -1,494 +1,494 @@
-@use 'base/variables' as *;
-@use 'base/color' as *;
-
-// ==========================================================
-// EvoNav — compose-based sidebar / drawer.
-// ----------------------------------------------------------
-// Layout layers:
-//   .navContainer  — the <nav> landmark
-//   .navList       — top-level <ul>
-//   .navSubList    — nested <ul> (uses --evo-nav-indent on rows)
-//   .navRow        — shared row (button or anchor)
-//   .navGroup      — group with heading
-//
-// Responsive:
-//   .navDesktop    — inline sidebar (>= breakpoint)
-//   .navMobile     — off-canvas drawer (< breakpoint, default 768)
-//
-// Tokens only — no raw hex. Touch targets stay >= 44px on mobile via
-// rem-based `min-height` on rows.
-// ==========================================================
-
-.navContainer {
-  width: 100%;
-  font-family: $font-sans;
-  color: $color-text-secondary;
-}
-
-.navList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.navLi {
-  list-style: none;
-}
-
-// ---------- Row (button or anchor) ----------
-
-.navRow {
-  // Stretch the click area across the row, no matter button-vs-anchor.
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  padding-left: calc(0.75rem + var(--evo-nav-indent, 0rem));
-  min-height: 2.25rem;
-  font-family: inherit;
-  font-size: $text-sm;
-  font-weight: 500;
-  line-height: 1.4;
-  color: $color-text-secondary;
-  background: transparent;
-  border: none;
-  border-radius: $evo-border-radius;
-  cursor: pointer;
-  text-align: left;
-  text-decoration: none;
-  transition:
-    background-color $transition-fast,
-    color $transition-fast;
-  position: relative;
-  // Ensure the focus outline isn't clipped by sibling rows.
-  outline-offset: 2px;
-
-  &:hover {
-    background-color: $color-surface-hover;
-    color: $color-text-primary;
-
-    .navIcon {
-      color: $color-text-primary;
-      transform: translateX(1px);
-    }
-  }
-
-  &:focus-visible {
-    outline: $evo-btn-outline-width solid $evo-primary-focus;
-    outline-offset: $evo-btn-outline-offset;
-  }
-
-  &.active {
-    background-color: $evo-primary-soft;
-    color: $evo-primary-color;
-    font-weight: 600;
-
-    .navIcon {
-      color: $evo-primary-color;
-    }
-  }
-
-  &.disabled,
-  &[aria-disabled='true'] {
-    opacity: $evo-btn-disabled-opacity;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-.navRowTop {
-  font-weight: 500;
-}
-
-.navRowSub {
-  font-weight: 400;
-  font-size: $text-sm;
-  // Tighter density for nested rows.
-  min-height: 2rem;
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-
-.navLabel {
-  flex: 1;
-  text-align: left;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  clip-path: inset(0 0 0 0);
-  transition:
-    opacity 200ms ease,
-    transform 220ms ease,
-    clip-path 260ms ease;
-}
-
-// When the rail expands, labels reveal top-to-bottom (per-row delay) and
-// left-to-right (clip-path sweep). Only opacity/transform/clip-path transition,
-// so the delay is invisible in the steady expanded state.
-@for $i from 1 through 12 {
-  .navList .navLi:nth-child(#{$i}) .navLabel {
-    transition-delay: #{($i - 1) * 14}ms;
-  }
-}
-
-.navIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 1.125rem;
-  height: 1.125rem;
-  font-size: 1rem;
-  line-height: 1;
-  color: $color-text-muted;
-  transition:
-    color $transition-fast,
-    transform $transition-fast;
-
-  svg {
-    width: 1.05rem;
-    height: 1.05rem;
-  }
-}
-
-.chevron {
-  flex-shrink: 0;
-  color: $color-text-muted;
-  transition: transform $transition-fast;
-
-  &.chevronOpen {
-    transform: rotate(90deg);
-  }
-}
-
-.navSubList {
-  list-style: none;
-  margin: 0.125rem 0 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-
-  &[hidden] {
-    display: none;
-  }
-}
-
-// ---------- Group ----------
-
-.navGroup {
-  list-style: none;
-  margin: 0.85rem 0 0;
-  padding: 0;
-
-  &:first-child {
-    margin-top: 0.25rem;
-  }
-}
-
-.navGroupLabel {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-size: $text-xs;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: $color-text-muted;
-  padding: 0.4rem 0.75rem 0.3rem;
-}
-
-.navGroupLabelText {
-  flex: 1;
-  min-width: 0;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Collapsible group heading — same look as the static label, plus button chrome.
-.navGroupToggle {
-  background: transparent;
-  border: none;
-  border-radius: $radius-sm;
-  cursor: pointer;
-  font-family: inherit;
-  transition: color $transition-fast;
-
-  &:hover {
-    color: $color-text-secondary;
-  }
-
-  &:focus-visible {
-    outline: $evo-btn-outline-width solid $evo-primary-focus;
-    outline-offset: $evo-btn-outline-offset;
-  }
-
-  .chevron {
-    margin-left: 0.4rem;
-    color: $color-text-muted;
-  }
-}
-
-.navGroupCount {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.15rem;
-  height: 1.15rem;
-  padding: 0 0.35rem;
-  margin-left: 0.4rem;
-  font-size: 0.65rem;
-  font-weight: 600;
-  letter-spacing: 0;
-  color: $color-text-secondary;
-  background: $color-surface-hover;
-  border-radius: $radius-full;
-}
-
-// Accordion panel — animates height via grid-template-rows (0fr <-> 1fr), no
-// JS measuring. The inner list must clip its overflow for the collapse to read.
-.navGroupPanel {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  &[data-open='false'] {
-    grid-template-rows: 0fr;
-  }
-
-  > .navList {
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  // Rows inside the clipped panel draw their focus ring INSET, so the
-  // overflow:hidden needed for the height animation can't clip it.
-  .navRow:focus-visible {
-    outline-offset: -2px;
-  }
-}
-
-// ---------- Skeleton ----------
-
-.navSkeletonItem {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.5rem 0.75rem;
-}
-
-.navSkeletonIcon {
-  width: 1.125rem;
-  height: 1.125rem;
-  border-radius: $radius-sm;
-  background: $color-skeleton-base;
-  flex-shrink: 0;
-  animation: navShimmer 1.6s ease-in-out infinite;
-}
-
-.navSkeletonText {
-  height: 0.6875rem;
-  border-radius: $radius-sm;
-  background: $color-skeleton-base;
-  animation: navShimmer 1.6s ease-in-out infinite;
-  animation-delay: 0.1s;
-}
-
-@keyframes navShimmer {
-  0%, 100% { opacity: 0.4; }
-  50%      { opacity: 0.9; }
-}
-
-// ---------- Quick action ----------
-
-.navQuickAction {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  min-height: 2.25rem;
-  font-family: inherit;
-  font-size: $text-sm;
-  font-weight: 500;
-  color: $evo-primary-color;
-  background: $evo-primary-soft;
-  border: 1px dashed color-mix(in srgb, $evo-primary-color 35%, transparent);
-  border-radius: $radius-sm;
-  cursor: pointer;
-  transition:
-    background-color $transition-fast,
-    border-color $transition-fast;
-
-  &:hover {
-    background: color-mix(in srgb, $evo-primary-color 15%, transparent);
-    border-color: color-mix(in srgb, $evo-primary-color 55%, transparent);
-  }
-
-  &:active {
-    background: color-mix(in srgb, $evo-primary-color 22%, transparent);
-  }
-
-  &:focus-visible {
-    outline: $evo-btn-outline-width solid $evo-primary-focus;
-    outline-offset: $evo-btn-outline-offset;
-  }
-}
-
-// ---------- Responsive: hamburger + drawer ----------
-
-.navTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.75rem;
-  height: 2.75rem;
-  padding: 0;
-  background: transparent;
-  border: 1px solid $color-border;
-  border-radius: $radius-sm;
-  color: $color-text-primary;
-  cursor: pointer;
-  transition:
-    background-color $transition-fast,
-    border-color $transition-fast;
-
-  &:hover {
-    background-color: $color-surface-hover;
-    border-color: $color-border-strong;
-  }
-
-  &:focus-visible {
-    outline: $evo-btn-outline-width solid $evo-primary-focus;
-    outline-offset: $evo-btn-outline-offset;
-  }
-}
-
-.navBackdrop {
-  position: fixed;
-  inset: 0;
-  background: $color-backdrop;
-  z-index: 60;
-  animation: navFadeIn $transition-fast;
-}
-
-// Desktop default — nav renders inline as a sidebar.
-.navDesktop {
-  position: relative;
-}
-
-// Mobile default — nav lives off-canvas. The trigger sits next to it
-// (rendered by the root before the <nav>); the drawer slides in when
-// `aria-hidden` is not set.
-.navMobile {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: min(280px, 85vw);
-  padding: 1rem 0.75rem;
-  background: $color-surface-elevated;
-  border-right: 1px solid $color-border;
-  box-shadow: $shadow-lg;
-  z-index: 70;
-  transform: translateX(-100%);
-  transition: transform $transition-normal;
-  // Always allow scrolling inside the drawer; touch-action keeps native
-  // scroll smooth on mobile.
-  overflow-y: auto;
-  touch-action: pan-y;
-
-  // Slightly larger touch targets inside the drawer.
-  .navRow,
-  .navQuickAction {
-    min-height: 2.75rem;
-  }
-}
-
-.navMobile.navDrawerOpen {
-  transform: translateX(0);
-}
-
-@keyframes navFadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-// ---------- Collapsed (icon-only rail) ----------
-
-.navCollapsed {
-  .navRow,
-  .navQuickAction {
-    justify-content: center;
-    gap: 0;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .navLabel {
-    flex: 0;
-    opacity: 0;
-    transform: translateX(-4px);
-    clip-path: inset(0 100% 0 0);
-  }
-
-  // Group heading text stays in the a11y tree (it names the heading) but is
-  // visually hidden; the decorative count chip is removed entirely.
-  .navGroupLabelText {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  .navGroupCount {
-    display: none;
-  }
-
-  .navGroupLabel {
-    min-height: 0.5rem;
-    padding: 0.25rem 0;
-  }
-
-  // Accordion is meaningless in rail mode — force panels open.
-  .navGroupPanel {
-    grid-template-rows: 1fr;
-  }
-}
-
-// Collapsing fades labels out together — outrank the per-row expand stagger.
-.navCollapsed .navList .navLi .navLabel {
-  transition-delay: 0ms;
-}
-
-// ---------- Reduced motion ----------
-
-@media (prefers-reduced-motion: reduce) {
-  .navRow,
-  .navRow .navIcon,
-  .navLabel,
-  .navGroupPanel,
-  .navGroupToggle,
-  .navQuickAction,
-  .chevron,
-  .navTrigger,
-  .navMobile {
-    transition: none;
-  }
-  .navSkeletonIcon,
-  .navSkeletonText,
-  .navBackdrop {
-    animation-duration: 0.001ms;
-  }
-}
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+// ==========================================================
+// EvoNav — compose-based sidebar / drawer.
+// ----------------------------------------------------------
+// Layout layers:
+//   .navContainer  — the <nav> landmark
+//   .navList       — top-level <ul>
+//   .navSubList    — nested <ul> (uses --evo-nav-indent on rows)
+//   .navRow        — shared row (button or anchor)
+//   .navGroup      — group with heading
+//
+// Responsive:
+//   .navDesktop    — inline sidebar (>= breakpoint)
+//   .navMobile     — off-canvas drawer (< breakpoint, default 768)
+//
+// Tokens only — no raw hex. Touch targets stay >= 44px on mobile via
+// rem-based `min-height` on rows.
+// ==========================================================
+
+.navContainer {
+  width: 100%;
+  font-family: $font-sans;
+  color: $color-text-secondary;
+}
+
+.navList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.navLi {
+  list-style: none;
+}
+
+// ---------- Row (button or anchor) ----------
+
+.navRow {
+  // Stretch the click area across the row, no matter button-vs-anchor.
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  padding-left: calc(0.75rem + var(--evo-nav-indent, 0rem));
+  min-height: 2.25rem;
+  font-family: inherit;
+  font-size: $text-sm;
+  font-weight: 500;
+  line-height: 1.4;
+  color: $color-text-secondary;
+  background: transparent;
+  border: none;
+  border-radius: $evo-border-radius;
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+  transition:
+    background-color $transition-fast,
+    color $transition-fast;
+  position: relative;
+  // Ensure the focus outline isn't clipped by sibling rows.
+  outline-offset: 2px;
+
+  &:hover {
+    background-color: $color-surface-hover;
+    color: $color-text-primary;
+
+    .navIcon {
+      color: $color-text-primary;
+      transform: translateX(1px);
+    }
+  }
+
+  &:focus-visible {
+    outline: $evo-btn-outline-width solid $evo-primary-focus;
+    outline-offset: $evo-btn-outline-offset;
+  }
+
+  &.active {
+    background-color: $evo-primary-soft;
+    color: $evo-primary-color;
+    font-weight: 600;
+
+    .navIcon {
+      color: $evo-primary-color;
+    }
+  }
+
+  &.disabled,
+  &[aria-disabled='true'] {
+    opacity: $evo-btn-disabled-opacity;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.navRowTop {
+  font-weight: 500;
+}
+
+.navRowSub {
+  font-weight: 400;
+  font-size: $text-sm;
+  // Tighter density for nested rows.
+  min-height: 2rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.navLabel {
+  flex: 1;
+  text-align: left;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  clip-path: inset(0 0 0 0);
+  transition:
+    opacity 200ms ease,
+    transform 220ms ease,
+    clip-path 260ms ease;
+}
+
+// When the rail expands, labels reveal top-to-bottom (per-row delay) and
+// left-to-right (clip-path sweep). Only opacity/transform/clip-path transition,
+// so the delay is invisible in the steady expanded state.
+@for $i from 1 through 12 {
+  .navList .navLi:nth-child(#{$i}) .navLabel {
+    transition-delay: #{($i - 1) * 14}ms;
+  }
+}
+
+.navIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  font-size: 1rem;
+  line-height: 1;
+  color: $color-text-muted;
+  transition:
+    color $transition-fast,
+    transform $transition-fast;
+
+  svg {
+    width: 1.05rem;
+    height: 1.05rem;
+  }
+}
+
+.chevron {
+  flex-shrink: 0;
+  color: $color-text-muted;
+  transition: transform $transition-fast;
+
+  &.chevronOpen {
+    transform: rotate(90deg);
+  }
+}
+
+.navSubList {
+  list-style: none;
+  margin: 0.125rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+// ---------- Group ----------
+
+.navGroup {
+  list-style: none;
+  margin: 0.85rem 0 0;
+  padding: 0;
+
+  &:first-child {
+    margin-top: 0.25rem;
+  }
+}
+
+.navGroupLabel {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: $text-xs;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: $color-text-muted;
+  padding: 0.4rem 0.75rem 0.3rem;
+}
+
+.navGroupLabelText {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Collapsible group heading — same look as the static label, plus button chrome.
+.navGroupToggle {
+  background: transparent;
+  border: none;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  font-family: inherit;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $color-text-secondary;
+  }
+
+  &:focus-visible {
+    outline: $evo-btn-outline-width solid $evo-primary-focus;
+    outline-offset: $evo-btn-outline-offset;
+  }
+
+  .chevron {
+    margin-left: 0.4rem;
+    color: $color-text-muted;
+  }
+}
+
+.navGroupCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  padding: 0 0.35rem;
+  margin-left: 0.4rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: $color-text-secondary;
+  background: $color-surface-hover;
+  border-radius: $radius-full;
+}
+
+// Accordion panel — animates height via grid-template-rows (0fr <-> 1fr), no
+// JS measuring. The inner list must clip its overflow for the collapse to read.
+.navGroupPanel {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &[data-open='false'] {
+    grid-template-rows: 0fr;
+  }
+
+  > .navList {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  // Rows inside the clipped panel draw their focus ring INSET, so the
+  // overflow:hidden needed for the height animation can't clip it.
+  .navRow:focus-visible {
+    outline-offset: -2px;
+  }
+}
+
+// ---------- Skeleton ----------
+
+.navSkeletonItem {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.navSkeletonIcon {
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: $radius-sm;
+  background: $color-skeleton-base;
+  flex-shrink: 0;
+  animation: navShimmer 1.6s ease-in-out infinite;
+}
+
+.navSkeletonText {
+  height: 0.6875rem;
+  border-radius: $radius-sm;
+  background: $color-skeleton-base;
+  animation: navShimmer 1.6s ease-in-out infinite;
+  animation-delay: 0.1s;
+}
+
+@keyframes navShimmer {
+  0%, 100% { opacity: 0.4; }
+  50%      { opacity: 0.9; }
+}
+
+// ---------- Quick action ----------
+
+.navQuickAction {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  min-height: 2.25rem;
+  font-family: inherit;
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $evo-primary-color;
+  background: $evo-primary-soft;
+  border: 1px dashed color-mix(in srgb, $evo-primary-color 35%, transparent);
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition:
+    background-color $transition-fast,
+    border-color $transition-fast;
+
+  &:hover {
+    background: color-mix(in srgb, $evo-primary-color 15%, transparent);
+    border-color: color-mix(in srgb, $evo-primary-color 55%, transparent);
+  }
+
+  &:active {
+    background: color-mix(in srgb, $evo-primary-color 22%, transparent);
+  }
+
+  &:focus-visible {
+    outline: $evo-btn-outline-width solid $evo-primary-focus;
+    outline-offset: $evo-btn-outline-offset;
+  }
+}
+
+// ---------- Responsive: hamburger + drawer ----------
+
+.navTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid $color-border;
+  border-radius: $radius-sm;
+  color: $color-text-primary;
+  cursor: pointer;
+  transition:
+    background-color $transition-fast,
+    border-color $transition-fast;
+
+  &:hover {
+    background-color: $color-surface-hover;
+    border-color: $color-border-strong;
+  }
+
+  &:focus-visible {
+    outline: $evo-btn-outline-width solid $evo-primary-focus;
+    outline-offset: $evo-btn-outline-offset;
+  }
+}
+
+.navBackdrop {
+  position: fixed;
+  inset: 0;
+  background: $color-backdrop;
+  z-index: 60;
+  animation: navFadeIn $transition-fast;
+}
+
+// Desktop default — nav renders inline as a sidebar.
+.navDesktop {
+  position: relative;
+}
+
+// Mobile default — nav lives off-canvas. The trigger sits next to it
+// (rendered by the root before the <nav>); the drawer slides in when
+// `aria-hidden` is not set.
+.navMobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(280px, 85vw);
+  padding: 1rem 0.75rem;
+  background: $color-surface-elevated;
+  border-right: 1px solid $color-border;
+  box-shadow: $shadow-lg;
+  z-index: 70;
+  transform: translateX(-100%);
+  transition: transform $transition-normal;
+  // Always allow scrolling inside the drawer; touch-action keeps native
+  // scroll smooth on mobile.
+  overflow-y: auto;
+  touch-action: pan-y;
+
+  // Slightly larger touch targets inside the drawer.
+  .navRow,
+  .navQuickAction {
+    min-height: 2.75rem;
+  }
+}
+
+.navMobile.navDrawerOpen {
+  transform: translateX(0);
+}
+
+@keyframes navFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+// ---------- Collapsed (icon-only rail) ----------
+
+.navCollapsed {
+  .navRow,
+  .navQuickAction {
+    justify-content: center;
+    gap: 0;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .navLabel {
+    flex: 0;
+    opacity: 0;
+    transform: translateX(-4px);
+    clip-path: inset(0 100% 0 0);
+  }
+
+  // Group heading text stays in the a11y tree (it names the heading) but is
+  // visually hidden; the decorative count chip is removed entirely.
+  .navGroupLabelText {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .navGroupCount {
+    display: none;
+  }
+
+  .navGroupLabel {
+    min-height: 0.5rem;
+    padding: 0.25rem 0;
+  }
+
+  // Accordion is meaningless in rail mode — force panels open.
+  .navGroupPanel {
+    grid-template-rows: 1fr;
+  }
+}
+
+// Collapsing fades labels out together — outrank the per-row expand stagger.
+.navCollapsed .navList .navLi .navLabel {
+  transition-delay: 0ms;
+}
+
+// ---------- Reduced motion ----------
+
+@media (prefers-reduced-motion: reduce) {
+  .navRow,
+  .navRow .navIcon,
+  .navLabel,
+  .navGroupPanel,
+  .navGroupToggle,
+  .navQuickAction,
+  .chevron,
+  .navTrigger,
+  .navMobile {
+    transition: none;
+  }
+  .navSkeletonIcon,
+  .navSkeletonText,
+  .navBackdrop {
+    animation-duration: 0.001ms;
+  }
+}