@dereekb/dbx-web 13.19.0 → 13.21.0

package/lib/extension/calendar/_calendar.scss

@@ -147,24 +147,32 @@ $calendar-content-border-consideration: 2px;
     }
 
     // Calendar color tokens (theme-aware via --mat-sys-* / --dbx-* CSS variables)
+    //
+    // Tone-based colors resolve from a public `--dbx-calendar-<name>-color` (hue)
+    // + `--dbx-calendar-<name>-tone` (opacity level) pair so consumers can re-tint or
+    // soften a state independently without redefining the full color-mix() expression.
     #{calendar.$cal-event-icon-color-var}: var(--dbx-primary-color);
     #{calendar.$cal-event-color-primary-var}: var(--mat-sys-on-primary-container);
     #{calendar.$cal-event-color-secondary-var}: var(--mat-sys-primary-container);
-    #{calendar.$cal-border-color-var}: var(--mat-sys-outline);
+    // Defaults to the shared divider at full strength so calendar cell borders match
+    // dbx-table-view / dbx-two-column. --dbx-divider-color is already semi-transparent, so
+    // applying an extra tone here would double-fade it; lower --dbx-calendar-border-tone
+    // (or this whole calendar's --dbx-divider-color) to soften the dense grid if desired.
+    #{calendar.$cal-border-color-var}: color-mix(in srgb, var(--dbx-calendar-border-color, var(--dbx-divider-color)) var(--dbx-calendar-border-tone, 100%), transparent);
     #{calendar.$cal-bg-primary-var}: var(--mat-sys-background);
-    #{calendar.$cal-bg-secondary-var}: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
-    #{calendar.$cal-bg-hover-var}: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
-    #{calendar.$cal-bg-active-var}: color-mix(in srgb, var(--dbx-accent-color) 30%, transparent);
-    #{calendar.$cal-bg-selected-var}: color-mix(in srgb, var(--dbx-primary-color) 60%, transparent);
+    #{calendar.$cal-bg-secondary-var}: color-mix(in srgb, var(--dbx-calendar-secondary-color, var(--mat-sys-on-surface)) var(--dbx-calendar-secondary-tone, 4%), transparent);
+    #{calendar.$cal-bg-hover-var}: color-mix(in srgb, var(--dbx-calendar-hover-color, var(--mat-sys-on-surface)) var(--dbx-calendar-hover-tone, 4%), transparent);
+    #{calendar.$cal-bg-active-var}: color-mix(in srgb, var(--dbx-calendar-active-day-color, var(--dbx-primary-color)) var(--dbx-calendar-active-day-tone, 30%), transparent);
+    #{calendar.$cal-bg-selected-var}: color-mix(in srgb, var(--dbx-calendar-selected-day-color, var(--dbx-primary-color)) var(--dbx-calendar-selected-day-tone, 60%), transparent);
     #{calendar.$cal-bg-disabled-var}: var(--mat-sys-surface);
     #{calendar.$cal-bg-not-applicable-var}: var(--mat-sys-surface);
-    #{calendar.$cal-bg-highlight-var}: color-mix(in srgb, var(--dbx-accent-color) 30%, transparent);
-    #{calendar.$cal-today-bg-var}: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
+    #{calendar.$cal-bg-highlight-var}: color-mix(in srgb, var(--dbx-calendar-highlight-color, var(--dbx-accent-color)) var(--dbx-calendar-highlight-tone, 30%), transparent);
+    #{calendar.$cal-today-bg-var}: color-mix(in srgb, var(--dbx-calendar-today-color, var(--mat-sys-on-surface)) var(--dbx-calendar-today-tone, 4%), transparent);
     #{calendar.$cal-weekend-color-var}: var(--mat-sys-on-surface);
     #{calendar.$cal-badge-color-var}: var(--dbx-accent-color);
     #{calendar.$cal-selected-var}: var(--mat-sys-on-primary);
     #{calendar.$cal-disabled-var}: var(--dbx-warn-color);
-    #{calendar.$cal-not-applicable-var}: color-mix(in srgb, var(--mat-sys-on-surface) 30%, transparent);
+    #{calendar.$cal-not-applicable-var}: color-mix(in srgb, var(--dbx-calendar-not-applicable-color, var(--mat-sys-on-surface)) var(--dbx-calendar-not-applicable-tone, 30%), transparent);
     #{calendar.$cal-current-time-marker-color-var}: var(--dbx-accent-color);
     #{calendar.$cal-white-var}: var(--mat-sys-surface);
     #{calendar.$cal-gray-var}: var(--mat-sys-on-surface-variant);

package/lib/extension/table/_table.scss

@@ -6,6 +6,11 @@
 // MARK: Mixin
 @mixin core() {
   .dbx-table-view {
+    // Route Material's table row outline through the shared divider token so the row
+    // separators match dbx-two-column / dbx-calendar dividers. (Material always sets
+    // --mat-table-row-item-outline-color, so a fallback alone never takes effect.)
+    --mat-table-row-item-outline-color: var(--dbx-divider-color);
+
     .dbx-table-view-table-wrapper {
       max-height: var(--dbx-table-view-max-height, 600px);
       overflow: auto;
@@ -45,7 +50,7 @@
 
   // MARK: Full summary row
   .dbx-table-view-full-summary-row-container > .mat-mdc-row {
-    border-top-color: var(--mat-table-row-item-outline-color, var(--mat-sys-outline-variant));
+    border-top-color: var(--mat-table-row-item-outline-color, var(--dbx-divider-color));
     border-top-width: var(--mat-table-row-item-outline-width, 1px);
     border-top-style: solid;
   }

package/lib/interaction/style/_style.scss

@@ -1,5 +1,3 @@
-@use '../../style/theming';
-
 // Sections
 @mixin core() {
   .cdk-overlay-pane .mat-menu-panel {
@@ -9,8 +7,7 @@
   .cdk-overlay-pane.ng-overlay-container {
     color: var(--mat-sys-on-surface);
     background-color: var(--mat-sys-surface);
-    @include theming.elevation(8);
-    border: 1px solid color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
+    border-radius: var(--dbx-overlay-border-radius, var(--mat-sys-corner-medium));
   }
 }
 

package/lib/layout/column/_column.scss

@@ -18,6 +18,12 @@ $two-columns-right-padding-size: var(--dbx-padding-2);
     flex-direction: row;
     overflow-x: hidden;
 
+    // Top boundary separating the two-column block from the page header above it.
+    // Uses the shared divider token; apps can disable or restyle the boundary by
+    // overriding --dbx-two-column-border-top (e.g. to `none`).
+    box-sizing: border-box;
+    border-top: var(--dbx-two-column-border-top, 1px solid var(--dbx-divider-color));
+
     .dbx-content-container {
       margin: 0;
     }
@@ -84,7 +90,7 @@ $two-columns-right-padding-size: var(--dbx-padding-2);
 
   .dbx-two-column-head {
     padding: 0 var(--dbx-padding-2); // only padded on the left
-    border-bottom: 1px solid var(--mat-sys-outline-variant);
+    border-bottom: 1px solid var(--dbx-divider-color);
     height: $two-column-navbar-height;
 
     display: flex;

package/lib/layout/content/_content.scss

@@ -33,12 +33,18 @@ $dbx-border-opacity-default: 20%;
   }
 
   /// @dbx-utility content-elevate
-  /// @intent padded content surface lifted with elevation 2 — combines inner padding with a Material elevation shadow
+  /// @intent padded content surface lifted above its surroundings — the mirror of `.dbx-content-pit`. Per Material 3, elevation is communicated primarily with color (the brightest `surface-bright` tone, always lighter than the pit's `surface-dim` in both light and dark) plus a soft lift shadow for protection against the background, so it reads as raised and stays clearly distinct from the recessed pit. Tonal by default — a low-opacity wash of the active dbxColor over `surface-bright`; rounded by default, opt out with `.dbx-corners-none`. Override `--dbx-content-elevate-tone` (percentage) to tune the wash, `--dbx-content-elevate-bg` to replace the background outright, or `--dbx-content-elevate-shadow` to retune/remove (`none`) the shadow.
   /// @role layout
-  /// @see-also dbx-content-border, dbx-content-pit
+  /// @see-also dbx-content-border, dbx-content-pit, dbx-corners-none
   .dbx-content-elevate {
     padding: $content-border-inner-padding;
-    @include theming.elevation(2);
+  }
+
+  // Elevate rounds by default. Kept OUT of the `.dbx-content-elevate` rule and
+  // wrapped in `:where()` so specificity stays at 0 — any single-class utility
+  // (`.dbx-corners-none`, `.dbx-corners-large`, or an app class) overrides it.
+  :where(.dbx-content-elevate) {
+    border-radius: theming.$dbx-content-pit-rounded-border-radius;
   }
 
   /// @dbx-utility content-box
@@ -57,7 +63,7 @@ $dbx-border-opacity-default: 20%;
   }
 
   /// @dbx-utility content-pit
-  /// @intent recessed surface pit — `--mat-sys-surface-container` background with a `padding-4` inset, used to visually nest content (e.g. logs, JSON, quoted blocks); rounded by default, opt out with `.dbx-corners-none`
+  /// @intent recessed surface pit ("negative elevation") — a semi-transparent tonal wash of the active dbxColor over `--mat-sys-surface-dim` (the dimmest/greyest M3 surface, the opposite end of the dim/bright pair from `.dbx-content-elevate`) so the lighter surface behind shows through, with a `padding-4` inset, used to visually nest content (e.g. logs, JSON, quoted blocks); rounded by default, opt out with `.dbx-corners-none`
   /// @role layout
   /// @see-also dbx-content-pit-scrollable, dbx-content-border, dbx-content-elevate, dbx-corners-none
   .dbx-content-pit {
@@ -86,14 +92,39 @@ $dbx-border-opacity-default: 20%;
   }
 
   /// @dbx-utility content-pit-scrollable
-  /// @intent scrollable modifier for `.dbx-content-pit` — caps height at `theming.$dbx-content-pit-scrollable-max-height` and forces `overflow-y: scroll` for long inner content
+  /// @intent scrollable modifier for `.dbx-content-pit` — turns the pit into a fixed frame that clips an inner `.dbx-content-pit-scrollable-content` wrapper; the wrapper (not the frame) scrolls, so the padded/cornered surface never shifts. Drive the height via the `[scrollable]` input (which writes `--dbx-content-pit-scrollable-max-height`) or fall back to `theming.$dbx-content-pit-scrollable-max-height`.
   /// @role layout
   /// @parent content-pit
-  /// @see-also dbx-content-pit
+  /// @see-also dbx-content-pit, dbx-content-pit-scrollable-content
   .dbx-content-pit-scrollable {
+    // Fixed frame that clips its scrolling child. Keeping the pit's padding here
+    // and the overflow on the inner wrapper (rather than both on this box) avoids
+    // the Chrome scroll-anchor / overscroll shift that moves the whole pit when
+    // the scroll reaches its top or bottom.
+    overflow: hidden;
+    max-width: 100%;
+  }
+
+  /// @dbx-utility content-pit-scrollable-content
+  /// @intent inner scroll region for a scrollable `.dbx-content-pit` — wrap the pit body in this element when using `[scrollable]`; it owns the height cap + `overflow-y` so the pit frame stays put. The cap reads `--dbx-content-pit-scrollable-max-height` (published per-pit by `dbxContentPit`; `none` when the pit isn't scrollable).
+  /// @role layout
+  /// @parent content-pit-scrollable
+  /// @see-also dbx-content-pit, dbx-content-pit-scrollable
+  .dbx-content-pit .dbx-content-pit-scrollable-content {
     max-height: theming.$dbx-content-pit-scrollable-max-height;
     max-width: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    overflow-anchor: none;
+
+    // Negate the pit's vertical padding so the scroll region spans the full pit
+    // height, then re-add it as padding here — the inset now scrolls with the
+    // content so it can scroll flush to the pit's top and bottom edges, instead
+    // of being clipped by a static padding band.
+    margin-top: calc(-1 * #{$pit-padding});
+    margin-bottom: calc(-1 * #{$pit-padding});
+    padding-top: $pit-padding;
+    padding-bottom: $pit-padding;
   }
 
   /// @dbx-utility content-pit-floating-button
@@ -110,7 +141,9 @@ $dbx-border-opacity-default: 20%;
     margin-bottom: $dbx-content-pit-floating-button-margin;
   }
 
-  .dbx-content-pit-scrollable > .dbx-content-pit-floating-button {
+  // In a scrollable pit the floating button lives inside the inner scroll region
+  // so `position: sticky` anchors to it; pin it flush to the top of that region.
+  .dbx-content-pit-scrollable-content > .dbx-content-pit-floating-button {
     top: 0;
   }
 
@@ -225,19 +258,47 @@ $dbx-border-opacity-default: 20%;
     padding-bottom: var(--dbx-scroll-content-bottom-padding, #{$scroll-content-bottom-padding});
   }
 
+  // Recessed surface ("negative elevation"): the pit reads as a tonal step below the surfaces it
+  // nests in. It sits on `surface-dim` — the dimmest/greyest M3 surface tone — so it reads as a
+  // grey recess in light mode and the darkest surface in dark mode, the opposite end of the
+  // dim/bright pair from `.dbx-content-elevate`. (`surface-dim`/`surface-bright` are the one M3
+  // pairing whose light/dark luminance ordering is stable, so the pit is reliably dimmer than the
+  // elevate in both themes — the container ladder flips and can't guarantee that.) Tonal by
+  // default — a low-opacity wash of the active dbxColor (`--dbx-bg-color-current`, primary by
+  // default, driven by an ancestor/host `[dbxColor]`) laid over `surface-dim`, so the pit both
+  // steps down a tone AND picks up the color context, instead of being a flat grey. That dim wash is
+  // then rendered semi-transparent (`--dbx-content-pit-opacity`, default 50%) so the lighter surface
+  // behind it shows through — the pit reads as a soft, airy recess rather than a heavy grey block,
+  // while keeping its grey/dim character so it stays clearly dimmer than the elevate's
+  // `surface-bright`. Override `--dbx-content-pit-tone` (percentage) to tune the wash strength,
+  // `--dbx-content-pit-opacity` to make the recess lighter (lower %, more transparent) or heavier
+  // (higher %), or set `--dbx-content-pit-bg` to replace the background outright (e.g. on a painted
+  // surface where the tonal wash would clash).
   .dbx-content-pit {
-    background: var(--mat-sys-surface-container);
+    background: var(--dbx-content-pit-bg, color-mix(in srgb, color-mix(in srgb, #{theming.$dbx-bg-color} var(--dbx-content-pit-tone, 8%), var(--mat-sys-surface-dim)) var(--dbx-content-pit-opacity, 50%), transparent));
   }
 
-  // pits on a [dbxColor]-painted surface wash from the current contrast color instead of the
-  // surface-container token, which would clash with the painted background (e.g. a dark inverse
-  // card). Override --dbx-content-pit-color-tone (percentage) to tune the wash.
-  .dbx-color .dbx-content-pit {
-    background: color-mix(in srgb, #{theming.$dbx-color} var(--dbx-content-pit-color-tone, 11%), transparent);
+  // Elevated surface ("positive elevation"): the tonal mirror of the pit. It sits on
+  // `surface-bright` — the brightest M3 surface tone — so it reads lighter than its surroundings
+  // (and always lighter than the pit's `surface-dim`, in BOTH themes, since dim/bright are the one
+  // M3 pairing with a stable luminance ordering). It also carries a soft M3 shadow: per M3 the lift
+  // is communicated primarily with color, and the subtle shadow is the sanctioned "protection
+  // against a background" that sells the raise. Tonal by default — a low-opacity wash of the active
+  // dbxColor (`--dbx-bg-color-current`, primary by default, driven by an ancestor/host `[dbxColor]`)
+  // over `surface-bright`. Override `--dbx-content-elevate-tone` (percentage) to tune the wash,
+  // `--dbx-content-elevate-bg` to replace the background outright, or `--dbx-content-elevate-shadow`
+  // to retune/remove (`none`) the lift shadow.
+  .dbx-content-elevate {
+    background: var(--dbx-content-elevate-bg, color-mix(in srgb, #{theming.$dbx-bg-color} var(--dbx-content-elevate-tone, 8%), var(--mat-sys-surface-bright)));
+    box-shadow: var(--dbx-content-elevate-shadow, var(--mat-sys-level1));
   }
 
   .dbx-content-border {
-    border: 3px dashed color-mix(in srgb, var(--dbx-border-color, var(--mat-sys-outline-variant)) var(--dbx-border-opacity, $dbx-border-opacity-default), transparent);
+    // Faint dashed frame — keeps its own low opacity locally while sharing the global
+    // border base color. The computed --dbx-border-color-current re-blends with this
+    // overridden opacity at the point of use.
+    --dbx-border-opacity: #{$dbx-border-opacity-default};
+    border: 3px dashed var(--dbx-border-color-current);
   }
 }
 

package/lib/layout/list/_list.scss

@@ -9,17 +9,144 @@ $list-item-padded-min-height: 42px;
     overflow: hidden;
     height: 100%;
 
-    // dbx-list (selection/standard) rows default to an M3 medium corner via the overridable
-    // `--dbx-list-item-border-radius` token; `.dbx-list-square-items` zeroes it and the style-demo
-    // `list-corner-*` levers re-point it. Both shape tokens resolve to the same value, so no
-    // `border-radius` redeclaration is needed; the more specific `.dbx-list-card-items-list` item rule
-    // deliberately wins for card lists.
-    --mat-list-active-indicator-shape: var(--dbx-list-item-border-radius, var(--mat-sys-corner-medium, 12px));
-    --mat-list-list-item-container-shape: var(--dbx-list-item-border-radius, var(--mat-sys-corner-medium, 12px));
+    // `--dbx-list-item-border-radius` (medium default) is the "how round" knob for the corners that
+    // actually round — the first row's top, the last row's bottom, and any hovered/selected/activated
+    // row. Interior corners stay square so the rows read as one connected group (see the per-position
+    // and per-state rules below). `.dbx-list-square-items` zeroes the token and the style-demo
+    // `list-corner-*` levers re-point it, so both keep working. The more specific
+    // `.dbx-list-card-items-list` item rules deliberately win for card lists.
+    //
+    // IMPORTANT: do NOT declare `--dbx-list-item-border-radius` here — the style-demo levers set it on
+    // an ancestor, and a local declaration would shadow that inherited value (killing the levers).
+    // Instead resolve it once (with the medium fallback) into a private var the rules below consume;
+    // referencing it here still reads the inherited lever value, so the levers keep control.
+    --dbx-list-item-radius-resolved: var(--dbx-list-item-border-radius, var(--mat-sys-corner-medium, 12px));
+
+    // Hairline gap between rows. Default 1px.
+    --dbx-list-item-spacing: 1px;
+
+    // Selected (selection list) / activated (nav list) row tone. Defaults to the M3 primary container
+    // tone instead of the grey `--mat-sys-secondary-container` Material ships, with an on-tone for the
+    // row's text + icons.
+    --dbx-list-item-selected-color: var(--mat-sys-primary-container);
+    --dbx-list-item-selected-on-color: var(--mat-sys-on-primary-container);
+
+    // Active route (nav/value list `dbx-anchor-active`) row tone. A `dbx-anchor` row marks the active
+    // route with its own `dbx-anchor-active` class rather than Material's `.mdc-list-item--activated`, so
+    // it carries its own tone token here. Defaults to the selected/activated tone above (so an active
+    // route reads the same as a selected row out of the box), but can be retargeted independently — e.g.
+    // set `--dbx-list-item-active-color` on the list host — to give active routes a distinct color.
+    --dbx-list-item-active-color: var(--dbx-list-item-selected-color);
+    --dbx-list-item-active-on-color: var(--dbx-list-item-selected-on-color);
+
+    // Rows are square by default; their corners round per-position / per-state below.
+    --mat-list-active-indicator-shape: 0;
+    --mat-list-list-item-container-shape: 0;
+
+    // Selected (selection-list `--selected`) + activated (nav-list `--activated`) rows pick up the
+    // primary tone rather than the grey default.
+    --mat-list-list-item-selected-container-color: var(--dbx-list-item-selected-color);
+    --mat-list-active-indicator-color: var(--dbx-list-item-selected-color);
+
+    // Soften the hover state-layer so hovering doesn't grey-out as heavily (M3 default is 0.08).
+    --mat-list-list-item-hover-state-layer-opacity: var(--dbx-list-item-hover-state-layer-opacity, 0.04);
 
     .mat-mdc-list-item {
+      // Focus ring follows the row's own (per-position / per-state) shape token.
       --mat-focus-indicator-border-radius: var(--mat-list-list-item-container-shape);
+      // Hairline gap between rows; the trailing row's gap is stripped by the :last-of-type / :only-of-type rules.
+      margin-bottom: var(--dbx-list-item-spacing);
     }
+
+    // Angular Material's `.mat-mdc-nav-list .mat-mdc-list-item` rule pins `border-radius` to
+    // `--mat-list-active-indicator-shape` (which we set to 0 for square-by-default rows), so it would
+    // otherwise ignore the per-position / per-state `--mat-list-list-item-container-shape` we set below
+    // and leave nav/value-list rows square. Redeclare `border-radius` from the container-shape token at
+    // higher specificity so those rows round too. (Selection-list `<mat-list-option>` rows have no
+    // nav-list ancestor and already honor the container-shape token directly.)
+    .dbx-list-view .mat-mdc-list-item {
+      border-radius: var(--mat-list-list-item-container-shape);
+    }
+
+    // Connected-group corner shaping. The list rows are square by default (token = 0 above); here we
+    // round only the outer corners of the group and any row in an interactive/selected state.
+    //
+    // Selection list (`<mat-selection-list>` > `<mat-list-option>` siblings). NOTE: the element's CSS
+    // class is `.mat-mdc-selection-list` (there is no `.mat-selection-list` class), so match the host
+    // by its element/tag name instead.
+    mat-selection-list > .dbx-list-view-item:first-of-type {
+      --mat-list-list-item-container-shape: var(--dbx-list-item-radius-resolved) var(--dbx-list-item-radius-resolved) 0 0;
+    }
+
+    mat-selection-list > .dbx-list-view-item:last-of-type {
+      --mat-list-list-item-container-shape: 0 0 var(--dbx-list-item-radius-resolved) var(--dbx-list-item-radius-resolved);
+      margin-bottom: 0;
+    }
+
+    mat-selection-list > .dbx-list-view-item:only-of-type {
+      --mat-list-list-item-container-shape: var(--dbx-list-item-radius-resolved);
+    }
+
+    // Value/nav list (`dbx-list-view-content-group` > `dbx-anchor` rows). First/last is resolved per
+    // group, so a grouped list reads as one connected block per group; a single-group list rounds the
+    // whole list. Header/footer are `div`s, so `:first/last-of-type` of `dbx-anchor` is correct.
+    .dbx-list-view-group-content > dbx-anchor:first-of-type .dbx-list-view-item {
+      --mat-list-list-item-container-shape: var(--dbx-list-item-radius-resolved) var(--dbx-list-item-radius-resolved) 0 0;
+    }
+
+    .dbx-list-view-group-content > dbx-anchor:last-of-type .dbx-list-view-item {
+      --mat-list-list-item-container-shape: 0 0 var(--dbx-list-item-radius-resolved) var(--dbx-list-item-radius-resolved);
+    }
+
+    .dbx-list-view-group-content > dbx-anchor:last-of-type .dbx-list-view-item.mat-mdc-list-item {
+      margin-bottom: 0;
+    }
+
+    .dbx-list-view-group-content > dbx-anchor:only-of-type .dbx-list-view-item {
+      --mat-list-list-item-container-shape: var(--dbx-list-item-radius-resolved);
+    }
+
+    // Any hovered / focused / selected / activated / active-route row rounds all four corners. These must
+    // out-specify the per-position first/last/only rules above — and the value-list ones
+    // (`.dbx-list-view-group-content > dbx-anchor:first-of-type .dbx-list-view-item`) carry an element +
+    // pseudo-class, landing at (0,3,1). A bare `.dbx-list-view .mat-mdc-list-item` state selector is only
+    // (0,3,0), so it would LOSE and leave the outer corner square — e.g. the active first row keeping a
+    // square bottom. Qualifying each row with `.dbx-list-view-item` raises these to (0,4,0) so the
+    // all-corners shape wins (every `.dbx-list-view` row — value-list `<a mat-list-item>` and selection
+    // `<mat-list-option>` alike — carries that class). `.dbx-anchor-active` covers nav/value-list rows
+    // whose active route is signaled by `dbx-anchor` — it never adds Material's `.mdc-list-item--activated`,
+    // so without this the active (un-hovered) row would otherwise fall back to the square per-position shape.
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item:hover,
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item:focus,
+    .dbx-list-view .dbx-anchor-active .dbx-list-view-item.mat-mdc-list-item,
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item.mdc-list-item--selected,
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item.mdc-list-item--activated,
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item[aria-selected='true'] {
+      --mat-list-list-item-container-shape: var(--dbx-list-item-radius-resolved);
+    }
+
+    // Paint the selected / activated row with the primary tone, and set an on-tone `color` so the
+    // injected row content stays legible (Material only recolors its own `.mdc-list-item__primary-text`
+    // / `__start`).
+    //
+    // A multi-select `mat-list-option` conveys selection via `aria-selected` + its checkbox — it does
+    // NOT get the `.mdc-list-item--selected` class (Material only adds that in single-select mode), and
+    // it never paints `--mat-list-list-item-selected-container-color`. So match `[aria-selected='true']`
+    // too and drive the tint through `--mat-list-list-item-container-color` (the row's own background
+    // token), which paints every selected row regardless of the missing class. Nav rows use
+    // `.mdc-list-item--activated`.
+    .dbx-list-view .mat-mdc-list-item.mdc-list-item--selected,
+    .dbx-list-view .mat-mdc-list-item.mdc-list-item--activated,
+    .dbx-list-view .mat-mdc-list-item[aria-selected='true'] {
+      --mat-list-list-item-container-color: var(--dbx-list-item-selected-color);
+      color: var(--dbx-list-item-selected-on-color);
+    }
+
+    // Active-route row tone (a `dbx-anchor` row whose route is active) is painted in `_anchorlist.scss`,
+    // which targets both `.dbx-anchor-list` and `.dbx-list-view` nav lists via the
+    // `--dbx-anchor-list-item-active-color` token. That token defaults to `--dbx-list-item-active-color`
+    // (defined above), so a value list's active route matches its selected tone out of the box; the
+    // sidenav overrides the token for its accent treatment. Only the corner shape is handled here (above).
   }
 
   // dbx-anchor-list (nav) rows default to an M3 medium corner via their OWN
@@ -35,13 +162,18 @@ $list-item-padded-min-height: 42px;
     }
   }
 
-  // The sidenav anchor list rows sit flush against the left screen edge, so only the RIGHT corners round —
-  // the radius is composed into a `0 r r 0` shorthand (top-left / top-right / bottom-right / bottom-left),
+  // Sidenav anchor-list rows sit flush against the left drawer edge, so only the RIGHT corners round — the
+  // radius is composed into a `0 r r 0` shorthand (top-left / top-right / bottom-right / bottom-left),
   // leaving the left corners square. The "how round" radius defaults to the regular anchor-list radius
   // (`--dbx-anchor-list-item-border-radius`) so the sidenav tracks the `anchor-list-corner-*` lever by default,
-  // but `--dbx-sidenav-anchor-list-item-border-radius` overrides it for sidenav-specific tuning. Higher
-  // specificity than `.dbx-anchor-list`, so it wins for the inner nav-list inside a sidenav host.
-  .dbx-sidenav-anchor-list .dbx-anchor-list {
+  // but `--dbx-sidenav-anchor-list-item-border-radius` overrides it for sidenav-specific tuning.
+  //
+  // Scoped to EVERY anchor list inside a sidenav drawer (`.dbx-sidenav .mat-drawer .dbx-anchor-list`), not
+  // just the `[anchors]` list (`.dbx-sidenav-anchor-list`): a separate `<dbx-anchor-list>` dropped into a
+  // `[top]` / `[bottom]` content slot must round the same way, otherwise it falls back to the generic
+  // all-corners `.dbx-anchor-list` radius and reads as floating full-radius pills beside the flush main
+  // rows. Higher specificity than `.dbx-anchor-list`, so it wins for any inner nav-list inside a sidenav.
+  .dbx-sidenav .mat-drawer .dbx-anchor-list {
     --mat-list-active-indicator-shape: 0 var(--dbx-sidenav-anchor-list-item-border-radius, var(--dbx-anchor-list-item-border-radius, var(--mat-sys-corner-medium, 12px))) var(--dbx-sidenav-anchor-list-item-border-radius, var(--dbx-anchor-list-item-border-radius, var(--mat-sys-corner-medium, 12px))) 0;
     --mat-list-list-item-container-shape: 0 var(--dbx-sidenav-anchor-list-item-border-radius, var(--dbx-anchor-list-item-border-radius, var(--mat-sys-corner-medium, 12px))) var(--dbx-sidenav-anchor-list-item-border-radius, var(--dbx-anchor-list-item-border-radius, var(--mat-sys-corner-medium, 12px))) 0;
   }
@@ -219,6 +351,18 @@ $list-item-padded-min-height: 42px;
       margin-bottom: var(--dbx-list-card-items-list-gap);
     }
 
+    // Keep every card a fully-rounded standalone surface — defeat the connected-list per-position /
+    // per-state corner shaping defined on `.dbx-list` (those rules out-specify the card item rule
+    // above). Re-scoping under `.dbx-list` adds the card-ancestor class so these always win.
+    .dbx-list .dbx-list-view-group-content > dbx-anchor .dbx-list-view-item.mat-mdc-list-item,
+    .dbx-list mat-selection-list > .dbx-list-view-item.mat-mdc-list-item,
+    .dbx-list .dbx-list-view .mat-mdc-list-item:hover,
+    .dbx-list .dbx-list-view .mat-mdc-list-item:focus,
+    .dbx-list .dbx-list-view .mat-mdc-list-item.mdc-list-item--selected,
+    .dbx-list .dbx-list-view .mat-mdc-list-item.mdc-list-item--activated {
+      --mat-list-list-item-container-shape: var(--dbx-list-item-card-border-radius, var(--mat-sys-corner-large, calc(var(--mat-chip-container-shape-radius) * 2)));
+    }
+
     // Strip the trailing card's bottom gap. The nav-list path wraps each
     // item in a `<dbx-anchor>`; the selection-list path renders
     // `<mat-list-option>` siblings directly under `<mat-selection-list>`.
@@ -346,13 +490,53 @@ $list-item-padded-min-height: 42px;
     position: unset; // do not touch the divider in dbx-list
   }
 
+  // Accordion list view renders as a card with a rounded TOP. The rounded frame lives on the scroll
+  // VIEWPORT (`.dbx-list-content`) so it clips the scrolling content — including panels that scroll BEHIND a
+  // sticky group header — which stops them bleeding through the rounded corner. (A rounded ancestor can't
+  // clip a composited `position: sticky` element in Chrome, so each group header additionally rounds its OWN
+  // top corners below.) Only the top corners are rounded — the bottom stays square so the last panel's
+  // elevation shadow isn't clipped by a rounded bottom edge. Scoped with `:has()` so only accordion lists
+  // get framed.
+  .dbx-list-content:has(.dbx-list-accordion-view) {
+    border-top-left-radius: var(--dbx-list-accordion-view-border-radius, var(--mat-sys-corner-medium, 12px));
+    border-top-right-radius: var(--dbx-list-accordion-view-border-radius, var(--mat-sys-corner-medium, 12px));
+  }
+
   .dbx-list-accordion-view {
+    // Breathing-room margin (`--dbx-list-accordion-view-margin`, default `--dbx-padding-1` / 2px) so the
+    // card sits inset from its container and its walls stay visible — flush against the container the card's
+    // edges read as cut off. `padding-bottom` leaves room below the last panel so its elevation shadow shows
+    // instead of being clipped at the scroll edge.
+    display: block;
+    margin: var(--dbx-list-accordion-view-margin, var(--dbx-padding-1));
+    padding-bottom: var(--dbx-list-accordion-view-bottom-space, var(--dbx-padding-2));
+    --dbx-list-accordion-view-radius-resolved: var(--dbx-list-accordion-view-border-radius, var(--mat-sys-corner-medium, 12px));
     --mat-expansion-container-shape: 0px;
+
+    // Round the top corners of the first entry (the very top of the card) AND of every group header. Group
+    // headers are sticky — when one pins at the rounded top corner, the scroll frame's clip would otherwise
+    // shave that header's square corner (and its border) flat, so each header rounds its OWN top corners to
+    // follow the curve. `overflow: hidden` clips the header's content/border to those corners.
+    mat-accordion > :first-child,
+    .dbx-list-view-group-header {
+      border-top-left-radius: var(--dbx-list-accordion-view-radius-resolved);
+      border-top-right-radius: var(--dbx-list-accordion-view-radius-resolved);
+      overflow: hidden;
+    }
+
+    // Box every group header with the same hairline the two-column view uses (`1px solid
+    // var(--dbx-divider-color)`) rather than the heavier/darker `--mat-divider-*`; the shorthand overrides
+    // the bottom divider on the base `.dbx-list-view-group-header` rule so all four sides match. The `-1px`
+    // margin pulls the header out so its border overlaps the adjacent panel edges (no doubled hairline / gap).
+    .dbx-list-view-group-header {
+      margin: -1px;
+      border: 1px solid var(--dbx-divider-color);
+    }
   }
 
   .dbx-list-view-group-header {
     color: var(--mdc-list-list-item-label-text-color);
-    background: var(--mat-sidenav-content-background-color);
+    background: var(--dbx-list-view-group-header-background, var(--mat-sidenav-content-background-color));
 
     .item-details {
       color: var(--mdc-list-list-item-supporting-text-color);

package/lib/router/layout/anchorlist/_anchorlist.scss

@@ -56,6 +56,16 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
   .dbx-list-view .mat-mdc-nav-list {
     --mat-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 15%, transparent);
 
+    // Active/selected route rows default to the shared dbx list tone so anchor lists match value lists
+    // out of the box, instead of a bare on-surface overlay. A standalone `.dbx-anchor-list` isn't
+    // necessarily inside a `.dbx-list`, so fall back to the M3 container tones directly when the
+    // `--dbx-list-item-*-color` knobs aren't inherited. Override the `--dbx-anchor-list-item-*` tokens to
+    // give a list its own active/selected treatment (the sidenav does, for its accent tint + border).
+    --dbx-anchor-list-item-selected-color: var(--dbx-list-item-selected-color, var(--mat-sys-primary-container));
+    --dbx-anchor-list-item-selected-on-color: var(--dbx-list-item-selected-on-color, var(--mat-sys-on-primary-container));
+    --dbx-anchor-list-item-active-color: var(--dbx-list-item-active-color, var(--dbx-anchor-list-item-selected-color));
+    --dbx-anchor-list-item-active-on-color: var(--dbx-list-item-active-on-color, var(--dbx-anchor-list-item-selected-on-color));
+
     // MARK: Muting
     // items that are not active are muted
     .mat-mdc-list-item {
@@ -77,11 +87,32 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
       }
     }
 
+    // MARK: Anchor Tree
+    // Nested child rows get a subtle depth-shading background. This is the BASE tone for a child row, so
+    // it is declared BEFORE the selected / active-route rules below: those match the same row at equal
+    // specificity (0,4,0), so source order decides — keeping this first lets an active or selected child
+    // row layer its own tone on top instead of being masked by the depth shading (which left an active
+    // child reading as un-selected: grey background, only the text recolored).
+    //
+    // The tone is an override point: set `--dbx-anchor-list-item-child-background` (e.g. to `transparent`)
+    // to flatten the depth-shade so nested children read like top-level root rows. Because the
+    // active/selected rules below win by source order, overriding the token never clears an active child's
+    // accent — only the inactive depth-shade. The `.dbx-sidenav-flat` modifier uses this.
+
+    /// Background tone applied to nested (depth > 0) anchor-list child rows to set them apart from
+    /// top-level root rows. Override to `transparent` to flatten the nesting depth-shade.
+    /// @role color
+    /// @intent nested child row background, anchor list depth shade, flatten nested rows
+    .dbx-anchor-list-child .mat-mdc-list-item {
+      background: var(--dbx-anchor-list-item-child-background, color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent));
+    }
+
     // selected
     .dbx-anchor-selected {
       .mat-mdc-list-item {
         opacity: #{$anchor-list-item-active-opacity};
-        background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
+        background: var(--dbx-anchor-list-item-selected-color);
+        color: var(--dbx-anchor-list-item-selected-on-color);
       }
     }
 
@@ -89,14 +120,10 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
     .dbx-anchor-active-eq {
       .mat-mdc-list-item {
         opacity: #{$anchor-list-item-active-opacity};
-        background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
+        background: var(--dbx-anchor-list-item-active-color);
+        color: var(--dbx-anchor-list-item-active-on-color);
       }
     }
-
-    // MARK: Anchor Tree
-    .dbx-anchor-list-child .mat-mdc-list-item {
-      background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
-    }
   }
 }
 

package/lib/router/layout/sidenav/_sidenav.scss

@@ -21,6 +21,19 @@ $active-background-transparent-color: 0.93;
 
     > mat-sidenav {
       width: var(--dbx-sidenav-width, #{$width});
+      border-top-right-radius: var(--dbx-sidenav-top-corner-radius, var(--mat-sys-corner-extra-large, 24px));
+      border-bottom-right-radius: var(--dbx-sidenav-bottom-corner-radius, var(--mat-sys-corner-extra-large, 24px));
+
+      // Uniform nav items (default). A sidenav is typically assembled from differently-created nav
+      // elements — top-level root anchors and nested child anchors in the `[anchors]` tree, plus separate
+      // `<dbx-anchor-list>` lists dropped into the `[top]` / `[bottom]` content slots. Left to the generic
+      // anchor-list styling these would NOT match up (a separate list rounds all four corners as floating
+      // pills, and nested child rows carry a depth-shade). The sidenav normalizes them so every element
+      // reads as one consistent nav: nested children drop the depth-shade here (the active/selected rules
+      // override this token by source order, so the active route still keeps its accent), the right-only
+      // flush-left corner shape is applied to all drawer anchor lists in `_list.scss`, and child content is
+      // aligned with root rows below. Apps can restore the depth-shade per list via the token if desired.
+      --dbx-anchor-list-item-child-background: transparent;
 
       .mat-drawer-inner-container {
         display: flex;
@@ -38,6 +51,12 @@ $active-background-transparent-color: 0.93;
           }
         }
 
+        // Align nested child content with root rows (cancel the small left nudge `_anchorlist.scss` adds
+        // to child rows) so a nested child reads like a top-level root item.
+        .dbx-anchor-list-child .mat-mdc-list-item .mdc-list-item__content {
+          padding-left: 0;
+        }
+
         // directly active links have a side border indicator
         .dbx-anchor-active-eq,
         .dbx-anchor-list-child .dbx-anchor-active {
@@ -133,6 +152,10 @@ $active-background-transparent-color: 0.93;
   //   --dbx-sidenav-mobile-width       Mobile overlay drawer width (default: 80vw)
   //   --dbx-sidenav-icon-width         Icon rail drawer width (default: 65px)
   //
+  // Shape:
+  //   --dbx-sidenav-top-corner-radius     Top trailing-edge corner radius (default: --mat-sys-corner-extra-large / 24px)
+  //   --dbx-sidenav-bottom-corner-radius  Bottom trailing-edge corner radius (default: --mat-sys-corner-extra-large / 24px)
+  //
   // Drawer colors:
   //   --dbx-sidenav-background         Drawer background color
   //   --dbx-sidenav-text-color         Drawer text color
@@ -159,6 +182,17 @@ $active-background-transparent-color: 0.93;
       .dbx-anchor-list.mat-mdc-nav-list {
         --dbx-sidenav-active-accent: color-mix(in srgb, var(--dbx-accent-color) 65%, var(--mat-sys-surface));
 
+        // The sidenav opts out of the default solid list tone (which anchor lists now inherit from
+        // `--dbx-list-item-active-color`) in favor of its subtle accent overlay + side-border treatment.
+        // Define the anchor-list active/selected override tokens here so the base `_anchorlist.scss` rows
+        // pick up the accent tint, and pin the on-color to the drawer text color so the active label is
+        // not recolored to the list's on-primary-container tone. The explicit root/child background +
+        // border rules below still apply on top (they distinguish root vs child and add the indicator).
+        --dbx-anchor-list-item-active-color: var(--dbx-sidenav-active-item-background, color-mix(in srgb, var(--dbx-sidenav-active-accent) 12%, transparent));
+        --dbx-anchor-list-item-active-on-color: var(--dbx-sidenav-text-color, var(--dbx-color-current, var(--mat-sys-on-surface)));
+        --dbx-anchor-list-item-selected-color: var(--dbx-anchor-list-item-active-color);
+        --dbx-anchor-list-item-selected-on-color: var(--dbx-anchor-list-item-active-on-color);
+
         .dbx-anchor-active {
           .mat-mdc-list-item {
             .mat-mdc-list-item-icon {