@dereekb/dbx-web 13.20.0 → 13.21.0

package/eslint/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@dereekb/dbx-web/eslint",
-  "version": "13.20.0",
+  "version": "13.21.0",
   "peerDependencies": {
-    "@dereekb/util": "13.20.0",
+    "@dereekb/util": "13.21.0",
     "@typescript-eslint/utils": "8.59.3"
   },
   "devDependencies": {
     "@angular/core": "21.2.11",
-    "@dereekb/dbx-core": "13.20.0",
-    "@dereekb/rxjs": "13.20.0",
+    "@dereekb/dbx-core": "13.21.0",
+    "@dereekb/rxjs": "13.21.0",
     "@typescript-eslint/parser": "8.59.3",
     "eslint": "10.4.0",
     "rxjs": "^7.8.2"

package/lib/layout/list/_list.scss

@@ -31,6 +31,14 @@ $list-item-padded-min-height: 42px;
     --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;
@@ -98,14 +106,22 @@ $list-item-padded-min-height: 42px;
       --mat-list-list-item-container-shape: var(--dbx-list-item-radius-resolved);
     }
 
-    // Any hovered / focused / selected / activated row rounds all four corners (wins over the
-    // per-position rules above via source order at equal specificity, and the :hover/--selected
-    // selectors out-specify the bare position rules).
-    .dbx-list-view .mat-mdc-list-item:hover,
-    .dbx-list-view .mat-mdc-list-item:focus,
-    .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'] {
+    // 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);
     }
 
@@ -125,6 +141,12 @@ $list-item-padded-min-height: 42px;
       --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
@@ -140,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;
   }
@@ -463,8 +490,48 @@ $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 {

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

@@ -24,6 +24,17 @@ $active-background-transparent-color: 0.93;
       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;
         flex-direction: column;
@@ -40,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 {
@@ -165,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.20.0",
+  "version": "13.21.0",
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -13,12 +13,12 @@
     "@angular/material": "^21.2.9",
     "@angular/platform-browser": "21.2.11",
     "@cantoo/pdf-lib": "^2.6.5",
-    "@dereekb/browser": "13.20.0",
-    "@dereekb/date": "13.20.0",
-    "@dereekb/dbx-core": "13.20.0",
-    "@dereekb/rxjs": "13.20.0",
-    "@dereekb/util": "13.20.0",
-    "@dereekb/vitest": "13.20.0",
+    "@dereekb/browser": "13.21.0",
+    "@dereekb/date": "13.21.0",
+    "@dereekb/dbx-core": "13.21.0",
+    "@dereekb/rxjs": "13.21.0",
+    "@dereekb/util": "13.21.0",
+    "@dereekb/vitest": "13.21.0",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
     "@ngrx/effects": "^21.1.0",