@expressivecss/expressive 0.7.0 → 0.8.0

package/src/sass/components/_navbar.scss

@@ -12,8 +12,15 @@
 // (https://m3.material.io/components/app-bars/specs):
 //   container      surface, 64dp small / 112 medium / 152 large
 //   headline       on-surface, title-large (small), headline-small/medium
-//   icons          on-surface-variant, 24dp in a 48dp target, 4dp inset
-//   on scroll      surface-container fill (not elevation) so the bar
+//   icons          24dp in a 48dp target, 4dp inset. The spec mutes the
+//                  trailing ones (on-surface-variant) and leaves the leading
+//                  one on-surface; both inherit here instead, so a fill +
+//                  on-* pair on the header stays readable. The two tokens
+//                  below are the opt-in to the spec colors.
+//   medium/large   headline 16dp from the inline edges, 20dp (medium) /
+//                  28dp (large) above the container bottom
+//   on scroll      surface-container fill (not elevation - the spec's
+//                  level2 elevation carries a transparent shadow) so the bar
 //                  separates from the body. A color utility on the
 //                  header still wins — it sets background-color itself.
 
@@ -29,12 +36,25 @@
   initial-value: 0;
 }
 
-header:has(> nav:not(.navigation-bar, .navigation-rail)) {
+// The bar itself. A top app bar that holds destinations is a <nav>; one that
+// holds only a title and controls - as the docs chrome does - is not
+// navigation and says so with `.bar`, rather than claiming a landmark and
+// then having nothing to put in it. Both look identical.
+// Wrapped in :is() so it stays ONE compound selector. A bare comma-separated
+// list breaks out of its context on interpolation: `header.medium > #{$_bar}`
+// expanded to `header.medium > nav:not(...), .bar`, which styled every .bar on
+// the page as an app bar. Same trap as $_icon in _icons-material-design.
+// :is() also keeps the specificity where nav:not(...) had it.
+$_bar: ":is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)";
+
+header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
   --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
   --md-comp-top-app-bar-scrolled-container-color: var(--md-sys-color-surface-container);
   --md-comp-top-app-bar-headline-color: var(--md-sys-color-on-surface);
-  // Inherit so a fill + on-* pair on the header recolors the icons.
-  // Set this to --md-sys-color-on-surface-variant for the spec mute.
+  // Inherit so a fill + on-* pair on the header recolors the icons. The spec
+  // splits them - leading on-surface, trailing on-surface-variant - and each
+  // token below is the opt-in for its own side. Leading is everything before
+  // the headline; trailing is everything after it.
   --md-comp-top-app-bar-leading-icon-color: inherit;
   --md-comp-top-app-bar-trailing-icon-color: inherit;
   --md-comp-top-app-bar-container-height: 64px;
@@ -51,7 +71,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
   border-radius: var(--md-comp-top-app-bar-container-shape);
   width: 100%;
 
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+  > #{$_bar} {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -61,7 +81,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     margin: 0;
   }
 
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(h1, h2, h3, h4, h5, h6) {
+  > #{$_bar} > :is(h1, h2, h3, h4, h5, h6) {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
@@ -83,7 +103,11 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
   }
 
   // Icon-only actions — 48dp target, 24dp glyph, 4dp from the container edge.
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(a, button):not(.button):not(.circle):not(.extra):has(> i:only-child) {
+  // $icon, not `i`: the canonical icon is a <span class="material-symbols">, and
+  // keying on the element meant every bar written the documented way lost this
+  // rule — the leading action fell through to the generic button pill and the
+  // trailing ones were picked up by the text-destination rule below.
+  > #{$_bar} > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> #{$icon}:only-child) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -105,7 +129,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     text-decoration: none;
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       display: block;
       font-size: var(--md-comp-top-app-bar-leading-icon-size);
       width: var(--md-comp-top-app-bar-leading-icon-size);
@@ -122,12 +146,20 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     }
   }
 
+  // Trailing actions are the ones that follow the headline - DOM order is the
+  // anatomy, here as everywhere else in this file. Without this the trailing
+  // token was declared and consumed by nothing, so the documented way to opt
+  // into the spec's muted trailing icons did nothing at all.
+  > #{$_bar} > :is(h1, h2, h3, h4, h5, h6) ~ :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> #{$icon}:only-child) {
+    color: var(--md-comp-top-app-bar-trailing-icon-color);
+  }
+
   // Text destinations, either loose or grouped in a menu/list.
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > a:not(:has(> i:only-child)):not(.button):not(.circle):not(.breadcrumb) {
+  > #{$_bar} > a:not(:has(> #{$icon}:only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb) {
     @extend %app-bar-destination;
   }
 
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > :is(menu, ul) {
+  > #{$_bar} > :is(menu, ul) {
     display: flex;
     align-items: stretch;
     align-self: stretch;
@@ -151,7 +183,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
   // Breadcrumb trail. Layout only — colors stay on the breadcrumb tokens
   // (which this header remaps to inherit). Do not treat the crumbs as
   // destinations.
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > ol {
+  > #{$_bar} > ol {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -163,7 +195,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
     padding-inline: 12px;
   }
 
-  > nav:not(.tabs, .navigation-bar, .navigation-rail) > form {
+  > #{$_bar} > form {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -220,7 +252,7 @@ header:has(> nav:not(.navigation-bar, .navigation-rail)) {
 
 // Center-aligned small bar. The headline is taken out of flow so leading and
 // trailing actions can sit on the edges without shifting the title.
-header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+header.center:has(> #{$_bar}) > #{$_bar} {
   position: relative;
   justify-content: space-between;
 
@@ -241,17 +273,32 @@ header.center:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
 // so leading/trailing icons would otherwise pack together at the start.
 // `space-between` parks the icon row at the top and the title at the
 // bottom — that's what makes the 112/152 height readable.
-header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail),
-header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+header.medium:has(> #{$_bar}) > #{$_bar},
+header.large:has(> #{$_bar}) > #{$_bar} {
   flex-wrap: wrap;
   align-content: space-between;
   align-items: flex-start;
   height: auto;
-  padding-top: 4px;
+  // 8dp so the 48dp icon targets are centred in the 64dp top row, the
+  // same row the bar collapses to.
+  padding-top: 8px;
+
+  // The top row is 64dp whether or not it holds icons. Without this
+  // zero-width spacer a title-only bar has a single flex line and
+  // `space-between` pins it to the *top*, so the headline sits where the
+  // icons belong instead of on the bottom row.
+  &::before {
+    content: "";
+    flex: 0 0 0;
+    height: 48px;
+  }
 
   > :is(h1, h2, h3, h4, h5, h6) {
     order: 1;
-    flex: 1 0 100%;
+    // Wider than the line, so it always breaks onto its own one - a basis of
+    // exactly 100% still fits beside the zero-width spacer above, which put
+    // the headline back on the icon row. It shrinks to fit once there.
+    flex: 1 1 calc(100% + 1px);
     white-space: normal;
     overflow: visible;
     text-overflow: unset;
@@ -262,12 +309,12 @@ header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
   }
 }
 
-header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+header.medium:has(> #{$_bar}) > #{$_bar} {
   min-height: 112px;
-  padding-bottom: 16px;
+  padding-bottom: 20px;
 
   > :is(h1, h2, h3, h4, h5, h6) {
-    padding: 4px 12px 0 16px;
+    padding: 0 12px;
     font-family: var(--md-sys-typescale-headline-small-font-family-name);
     font-size: var(--md-sys-typescale-headline-small-font-size);
     font-weight: var(--md-sys-typescale-headline-small-font-weight);
@@ -276,12 +323,12 @@ header.medium:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
   }
 }
 
-header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
+header.large:has(> #{$_bar}) > #{$_bar} {
   min-height: 152px;
   padding-bottom: 28px;
 
   > :is(h1, h2, h3, h4, h5, h6) {
-    padding: 12px 12px 0 16px;
+    padding: 0 12px;
     font-family: var(--md-sys-typescale-headline-medium-font-family-name);
     font-size: var(--md-sys-typescale-headline-medium-font-size);
     font-weight: var(--md-sys-typescale-headline-medium-font-weight);
@@ -295,7 +342,7 @@ header.large:has(> nav) > nav:not(.tabs, .navigation-bar, .navigation-rail) {
 // progress; a utility class on the header sets background-color itself
 // and is not overwritten. Without animation-timeline the bar stays at
 // rest (surface), the spec default.
-header.fixed:has(> nav:not(.navigation-bar, .navigation-rail)) {
+header.fixed:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
   position: sticky;
   top: 0;
   z-index: 997;

package/src/sass/components/_navigation-bar.scss

@@ -15,7 +15,7 @@
 //   --md-comp-nav-bar-container-color
 //   --md-comp-nav-bar-container-height          64px
 //   --md-comp-nav-bar-icon-size                 24px
-//   --md-comp-nav-bar-indicator-width           56px
+//   --md-comp-nav-bar-indicator-width           64px
 //   --md-comp-nav-bar-indicator-height          32px
 //   --md-comp-nav-bar-indicator-shape           16px / 100px horizontal
 //   --md-comp-nav-bar-active-indicator-color    secondary-container
@@ -27,7 +27,10 @@
   --md-comp-nav-bar-container-color: var(--md-sys-color-surface-container);
   --md-comp-nav-bar-container-height: 64px;
   --md-comp-nav-bar-icon-size: 24px;
-  --md-comp-nav-bar-indicator-width: 56px;
+  // 64dp, not the rail's 56dp: md.comp.navigation-bar.active-indicator.width
+  // is 64 while md.comp.navigation-rail.active-indicator.width is 56. Both were
+  // 56 here, which is the rail's value copied onto the bar.
+  --md-comp-nav-bar-indicator-width: 64px;
   --md-comp-nav-bar-indicator-height: 32px;
   --md-comp-nav-bar-indicator-shape: 16px;
   --md-comp-nav-bar-active-indicator-color: var(--md-sys-color-secondary-container);
@@ -66,7 +69,7 @@
     @include typescale("label-medium");
     @include focus-visible;
 
-    > i {
+    > #{$icon} {
       display: flex;
       flex-shrink: 0;
       align-items: center;
@@ -80,15 +83,15 @@
       transition: background-color 0.2s ease-out;
     }
 
-    &:hover:not(.active, [aria-current]) > i {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+    &:hover:not(.active, [aria-current]) > #{$icon} {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
     }
 
     &.active,
     &[aria-current] {
       color: var(--md-sys-color-on-surface);
 
-      > i {
+      > #{$icon} {
         background-color: var(--md-comp-nav-bar-active-indicator-color);
         color: var(--md-comp-nav-bar-active-color);
         --md-icon-fill: 1;
@@ -123,7 +126,7 @@
       padding: 8px 16px;
       border-radius: var(--md-comp-nav-bar-indicator-shape);
 
-      > i {
+      > #{$icon} {
         width: var(--md-comp-nav-bar-icon-size);
         height: var(--md-comp-nav-bar-icon-size);
         border-radius: 0;
@@ -137,9 +140,9 @@
       }
 
       &:hover:not(.active, [aria-current]) {
-        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+        background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
 
-        > i {
+        > #{$icon} {
           background-color: transparent;
         }
       }
@@ -149,7 +152,7 @@
         background-color: var(--md-comp-nav-bar-active-indicator-color);
         color: var(--md-comp-nav-bar-active-color);
 
-        > i {
+        > #{$icon} {
           background-color: transparent;
           color: inherit;
         }

package/src/sass/components/{_sidenav.scss → _navigation-drawer.scss}

@@ -3,7 +3,7 @@
 // Navigation drawer.
 //
 // Overlay is a modal <dialog> (JS wraps a <ul class="sidenav"> in
-// dialog.sidenav-overlay, or the author writes <dialog class="sidenav">).
+// dialog:is(.sidenav-overlay, .navigation-drawer-overlay), or the author writes <dialog class="sidenav">).
 // showModal() puts it on the top layer; ::backdrop is the scrim; Escape
 // and a scrim tap close it. Drag writes --md-comp-nav-drawer-shift;
 // this file does the slide.
@@ -12,7 +12,7 @@
 // accordion. The summary is a destination row with an expand_more
 // chevron; there is no Collapsible plugin.
 //
-// .sidenav-fixed is a breakpoint, not a JS open(): at `large` the host
+// :is(.sidenav-fixed, .navigation-drawer-fixed) is a breakpoint, not a JS open(): at `large` the host
 // is display: contents so the list is a docked sidebar. Below that it
 // is the same overlay drawer as any other sidenav.
 //
@@ -26,13 +26,31 @@
 //   --md-comp-nav-drawer-font-size      14px
 //   --md-comp-nav-drawer-padding        16px
 //   --md-comp-nav-drawer-line-height    item height
-
-:root {
+//   --md-comp-nav-drawer-user-view-shape
+//                                       16px, bottom corners of the header
+//   --md-comp-nav-drawer-user-view-scrim
+//                                       gradient laid over the header image
+//   --md-comp-nav-drawer-user-view-ink-color
+//                                       text colour over that scrim
+
+:root, :host {
   --md-comp-nav-drawer-width: 300px;
 }
 
-dialog.sidenav-overlay,
-dialog.sidenav {
+// A drawer row is whatever element the list item holds: a destination
+// <a>, the <summary> of a nested section, the <button> a command row is
+// written with (.navigation-drawer-close), and the plain element a
+// .subheader label is. Keyed on `li > a`, the row layout disappeared the
+// moment a row stopped being an anchor - the same trap $_icon documents.
+// $_row-control is the subset that is operable: it takes the hover and
+// focus treatment, a label does not. Both are wrapped in :is() - a bare
+// comma list breaks out of its context (see $_bar in _navbar).
+$_row: ":is(li > :is(a, button, .subheader), summary)";
+$_row-control: ":is(li > :is(a, button):not(.button, .icon-button, .circle, .extra), summary)";
+
+
+dialog:is(.sidenav-overlay, .navigation-drawer-overlay),
+dialog:is(.sidenav, .navigation-drawer) {
   --md-comp-nav-drawer-item-height: 48px;
   --md-comp-nav-drawer-duration: 250ms;
   --md-comp-nav-drawer-easing: ease;
@@ -41,6 +59,14 @@ dialog.sidenav {
   --md-comp-nav-drawer-font-size: 14px;
   --md-comp-nav-drawer-padding: 16px;
   --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
+  --md-comp-nav-drawer-user-view-shape: 16px;
+  --md-comp-nav-drawer-user-view-ink-color: var(--md-ref-palette-neutral100);
+  --md-comp-nav-drawer-user-view-scrim: linear-gradient(
+    to bottom,
+    color-mix(in oklab, var(--md-sys-color-scrim) 15%, transparent) 0%,
+    color-mix(in oklab, var(--md-sys-color-scrim) 50%, transparent) 55%,
+    color-mix(in oklab, var(--md-sys-color-scrim) 80%, transparent) 100%
+  );
 
   box-sizing: border-box;
   width: var(--md-comp-nav-drawer-width);
@@ -85,7 +111,7 @@ dialog.sidenav {
   }
 
   &::backdrop {
-    background-color: color-mix(in oklab, var(--md-sys-color-scrim) 32%, transparent);
+    background-color: var(--md-comp-scrim-color);
     opacity: var(--md-comp-nav-drawer-open, 1);
     backdrop-filter: none;
     transition:
@@ -96,22 +122,22 @@ dialog.sidenav {
 }
 
 @starting-style {
-  :is(dialog.sidenav-overlay, dialog.sidenav):modal {
+  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)):modal {
     transform: translateX(-100%);
   }
 
-  :is(dialog.sidenav-overlay, dialog.sidenav).right-aligned:modal {
+  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)).right-aligned:modal {
     transform: translateX(100%);
   }
 
-  :is(dialog.sidenav-overlay, dialog.sidenav):modal::backdrop {
+  :is(dialog:is(.sidenav-overlay, .navigation-drawer-overlay), dialog:is(.sidenav, .navigation-drawer)):modal::backdrop {
     opacity: 0;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  dialog.sidenav-overlay,
-  dialog.sidenav {
+  dialog:is(.sidenav-overlay, .navigation-drawer-overlay),
+  dialog:is(.sidenav, .navigation-drawer) {
     transition: none;
 
     &::backdrop {
@@ -123,17 +149,25 @@ dialog.sidenav {
 // Docked sidebar: the host must not be a box, or it would steal the
 // list's position:fixed. Closed, so it is not :modal and does not
 // lock the page.
-@include bp-up("large") {
-  dialog.sidenav-overlay:has(> .sidenav-fixed):not(:modal) {
+@include bp-up("expanded") {
+  dialog:is(.sidenav-overlay, .navigation-drawer-overlay):has(> :is(.sidenav-fixed, .navigation-drawer-fixed)):not(:modal) {
     display: contents;
   }
 }
 
-.sidenav {
+:is(.sidenav, .navigation-drawer) {
   --md-comp-nav-drawer-item-height: 48px;
   --md-comp-nav-drawer-font-size: 14px;
   --md-comp-nav-drawer-padding: 16px;
   --md-comp-nav-drawer-line-height: var(--md-comp-nav-drawer-item-height);
+  --md-comp-nav-drawer-user-view-shape: 16px;
+  --md-comp-nav-drawer-user-view-ink-color: var(--md-ref-palette-neutral100);
+  --md-comp-nav-drawer-user-view-scrim: linear-gradient(
+    to bottom,
+    color-mix(in oklab, var(--md-sys-color-scrim) 15%, transparent) 0%,
+    color-mix(in oklab, var(--md-sys-color-scrim) 50%, transparent) 55%,
+    color-mix(in oklab, var(--md-sys-color-scrim) 80%, transparent) 100%
+  );
 
   box-sizing: border-box;
   position: fixed;
@@ -162,12 +196,32 @@ dialog.sidenav {
     align-content: center;
   }
 
-  li.active > a:not(.button, .circle, .extra) {
+  // The selected destination keeps its pill under the pointer: the row's own
+  // state layer mixes into `transparent`, so letting it reach a selected row
+  // would erase the fill rather than tint it. Higher specificity than the row
+  // rule, so order does not matter.
+  li.active > :is(a, button):not(.button, .icon-button, .circle, .extra) {
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
+
+    &:hover {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-secondary-container) state-opacity("hover"),
+        var(--md-sys-color-secondary-container)
+      );
+    }
+
+    &:active {
+      background-color: color-mix(
+        in oklab,
+        var(--md-sys-color-on-secondary-container) state-opacity("pressed"),
+        var(--md-sys-color-secondary-container)
+      );
+    }
   }
 
-  :is(li > a, summary) {
+  #{$_row} {
     display: flex;
     align-items: center;
     margin: 0 12px;
@@ -191,25 +245,32 @@ dialog.sidenav {
     }
   }
 
-  li > a:not(.button, .circle, .extra),
-  summary {
+  #{$_row-control} {
     color: var(--md-sys-color-on-surface-variant);
 
     &:hover {
-      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("hover"), transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) state-opacity("pressed"), transparent);
     }
 
     @include focus-visible;
   }
 
-  li > a.button,
-  li > a.circle,
-  li > a.extra {
+  li > :is(a, button):is(.button, .circle, .extra) {
     margin: 10px 15px;
   }
 
-  summary {
+  // Every <button> is a styled button ($_btn in _buttons is `button:not(...)`),
+  // so a command row has to be stripped back to a row the same way <summary>
+  // is. The chevron below stays summary-only.
+  :is(summary, li > button:not(.button, .icon-button, .circle, .extra)) {
     box-sizing: border-box;
+    // A <button> centres its own content, so a command row's label sat in the
+    // middle of the row while every anchor row started at the inset.
+    justify-content: flex-start;
     border: 0;
     background: transparent;
     font: inherit;
@@ -217,7 +278,9 @@ dialog.sidenav {
     list-style: none;
     cursor: pointer;
     appearance: none;
+  }
 
+  summary {
     &::-webkit-details-marker {
       display: none;
     }
@@ -282,16 +345,33 @@ dialog.sidenav {
       height: auto;
       padding: 0;
 
-      &:hover {
+      &:is(:hover, :active) {
         background-color: transparent;
       }
     }
 
+    // The header image is clipped by .background, so the radius goes on the
+    // clipping box rather than the <img>: the image is a child of an
+    // overflow: hidden box, and rounding the child alone leaves the box's own
+    // square corners painting behind it.
     .background {
       overflow: hidden;
       position: absolute;
       inset: 0;
       z-index: -1;
+      border-end-start-radius: var(--md-comp-nav-drawer-user-view-shape);
+      border-end-end-radius: var(--md-comp-nav-drawer-user-view-shape);
+
+      // The name and email sit on whatever photograph the author supplied, so
+      // the scrim is what makes them legible - bottom-weighted, because that
+      // is where the text is. It rides inside .background so the rounded
+      // corners clip it too.
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: var(--md-comp-nav-drawer-user-view-scrim);
+      }
     }
 
     .circle,
@@ -311,6 +391,17 @@ dialog.sidenav {
       line-height: calc(var(--md-comp-nav-drawer-line-height) * 0.5);
     }
 
+    // Over an image the surface roles mean nothing and the link colour these
+    // spans inherit is unreadable on a mid-tone photograph. Scoped to
+    // :has(> .background): with no image the header is on the drawer surface
+    // and must keep tracking the theme, where fixed light ink would vanish.
+    &:has(> .background) {
+      .name,
+      .email {
+        color: var(--md-comp-nav-drawer-user-view-ink-color);
+      }
+    }
+
     .name {
       margin-top: 16px;
       font-weight: 500;
@@ -324,10 +415,10 @@ dialog.sidenav {
 }
 
 // Overlay only: the dialog is the panel, so the list fills it. When the
-// host is `display: contents` (a docked .sidenav-fixed) this must not
+// host is `display: contents` (a docked :is(.sidenav-fixed, .navigation-drawer-fixed)) this must not
 // apply — static positioning would drop the list into the header flow
 // and it would read as part of the app bar.
-dialog.sidenav-overlay:modal > .sidenav {
+dialog:is(.sidenav-overlay, .navigation-drawer-overlay):modal > :is(.sidenav, .navigation-drawer) {
   position: static;
   inset: auto;
   width: 100%;
@@ -338,7 +429,7 @@ dialog.sidenav-overlay:modal > .sidenav {
   z-index: auto;
 }
 
-.sidenav.sidenav-fixed {
+:is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed) {
   transform: none;
 
   &.right-aligned {
@@ -346,11 +437,11 @@ dialog.sidenav-overlay:modal > .sidenav {
   }
 }
 
-@include bp-down("large") {
+@include bp-down("expanded") {
   // Uninitialized / no-js: keep a fixed drawer off-canvas. Once JS wraps
   // it, the host's display:none hides the closed drawer and this must
   // not also hide the list inside an open dialog.
-  .sidenav.sidenav-fixed {
+  :is(.sidenav, .navigation-drawer):is(.sidenav-fixed, .navigation-drawer-fixed) {
     transform: translateX(-100%);
 
     &.right-aligned {
@@ -358,7 +449,7 @@ dialog.sidenav-overlay:modal > .sidenav {
     }
   }
 
-  .sidenav .user-view {
+  :is(.sidenav, .navigation-drawer) .user-view {
     padding: var(--md-comp-nav-drawer-padding) var(--md-comp-nav-drawer-padding) 0;
   }
 }
@@ -376,11 +467,10 @@ dialog.sidenav-overlay:modal > .sidenav {
   }
 }
 
-@include bp-up("large") {
+@include bp-up("expanded") {
   .drag-target[data-fixed] {
     display: none;
     pointer-events: none;
   }
 }
 
-