@dereekb/dbx-web 13.19.0 → 13.20.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,16 +9,121 @@ $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);
+
+    // 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 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'] {
+      --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);
     }
   }
 
@@ -219,6 +324,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>`.
@@ -352,7 +469,7 @@ $list-item-padded-min-height: 42px;
 
   .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/sidenav/_sidenav.scss

@@ -21,6 +21,8 @@ $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));
 
       .mat-drawer-inner-container {
         display: flex;
@@ -133,6 +135,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

package/lib/style/_root-variables.scss

@@ -161,6 +161,19 @@
     #{theming.$dbx-outline-variant-color-var}: var(--mat-sys-outline-variant);
     #{theming.$dbx-error-color-var}: var(--mat-sys-error);
 
+    // Shared border system — base divider color + opacity knob, blended into a single
+    // semi-transparent border color. Components apply var(--dbx-border-color-current);
+    // override --dbx-border-color or --dbx-border-opacity (globally here, or locally on a
+    // scope) and the computed value recomputes automatically at the point of use.
+    #{theming.$dbx-border-color-var}: var(--mat-sys-outline-variant);
+    #{theming.$dbx-border-opacity-var}: 60%;
+    #{theming.$dbx-border-color-current-var}: color-mix(in srgb, var(--dbx-border-color) var(--dbx-border-opacity), transparent);
+
+    // Shared divider color — defaults to the computed semi-transparent border so dbx-table-view,
+    // dbx-two-column, dbx-calendar (and any other) dividers stay consistent. Override here for an
+    // app-wide divider retint, or override a component's own divider token for a one-off.
+    #{theming.$dbx-divider-color-var}: var(--dbx-border-color-current);
+
     // Curated color set (avatar initials, etc.) — selects light/dark values from the theme's theme-type.
     @include curated.curated-color-variables($theme-config);
   }

package/lib/style/_style-demo.scss

@@ -115,6 +115,16 @@
   @return ('--dbx-anchor-list-item-border-radius': $value);
 }
 
+/// Builds the dbx-sidenav-only trailing-edge shape override map for a single corner-radius value.
+///
+/// Backs the `sidenav-corner-*` levers: re-points the nested `mat-sidenav` drawer's top/bottom trailing-edge
+/// radius tokens (`--dbx-sidenav-top-corner-radius` / `--dbx-sidenav-bottom-corner-radius`, extra-large by
+/// default) together so the rounded drawer edge flips live. Independent of every other shape lever — the
+/// sidenav reads its own tokens. Private to this module (`-` prefix).
+@function -dbx-style-demo-sidenav-shape-map($value) {
+  @return ('--dbx-sidenav-top-corner-radius': $value, '--dbx-sidenav-bottom-corner-radius': $value);
+}
+
 /// Map of demo template key -> CSS custom-property overrides emitted for that template's debug class.
 $dbx-style-demo-templates: (
   // M3 corner-radius scale levers. Each re-points the component shape tokens that `dbx-components-shapes()`
@@ -157,6 +167,12 @@ $dbx-style-demo-templates: (
   'anchor-list-corner-medium': -dbx-style-demo-anchor-list-shape-map(var(--mat-sys-corner-medium)),
   'anchor-list-corner-large': -dbx-style-demo-anchor-list-shape-map(var(--mat-sys-corner-large)),
   'anchor-list-corner-extra-large': -dbx-style-demo-anchor-list-shape-map(var(--mat-sys-corner-extra-large)),
+  // dbx-sidenav-only trailing-edge corner levers (own 'Sidenav Shape' toggle group), independent of every other
+  // shape lever (the sidenav drawer reads its own --dbx-sidenav-top/bottom-corner-radius tokens). Only the three
+  // requested stops are exposed: none (square), medium, and extra (extra-large, the drawer's default).
+  'sidenav-corner-none': -dbx-style-demo-sidenav-shape-map(0),
+  'sidenav-corner-medium': -dbx-style-demo-sidenav-shape-map(var(--mat-sys-corner-medium)),
+  'sidenav-corner-extra': -dbx-style-demo-sidenav-shape-map(var(--mat-sys-corner-extra-large)),
   // Tints surfaces toward the primary color by mixing the theme's own system tokens — stays theme-correct.
   'surface-tint': (
       '--mat-sys-surface': color-mix(in srgb, var(--mat-sys-primary) 8%, var(--mat-sys-surface)),

package/lib/style/_variables.scss

@@ -157,6 +157,37 @@ $dbx-outline-variant-color-var: --dbx-outline-variant-color;
 /// @see --mat-sys-error
 $dbx-error-color-var: --dbx-error-color;
 
+// Shared border system — a base color + an opacity knob blended into a single
+// semi-transparent border color. Components apply --dbx-border-color-current and
+// can tune either input token locally without touching the others.
+/// Base border color for the shared semi-transparent border system. Defaults to `--mat-sys-outline-variant` (the M3 divider color). Blended with `--dbx-border-opacity` to produce `--dbx-border-color-current`.
+/// @intent border base color, divider base color, outline base color
+/// @role color
+/// @see --mat-sys-outline-variant
+/// @see --dbx-border-opacity
+/// @see --dbx-border-color-current
+$dbx-border-color-var: --dbx-border-color;
+/// Opacity applied to `--dbx-border-color` when computing the effective border color. A percentage (e.g. `70%`). Lower it for a fainter border, raise it toward `100%` for a solid divider.
+/// @intent border opacity, divider transparency, border alpha, semi-transparent border opacity
+/// @role misc
+/// @see --dbx-border-color
+/// @see --dbx-border-color-current
+$dbx-border-opacity-var: --dbx-border-opacity;
+/// Effective, semi-transparent border color — a `color-mix` of `--dbx-border-color` at `--dbx-border-opacity`. Apply this directly to `border` / `border-top` / `border-bottom`. Overriding either input token (globally or on a local scope) recomputes this automatically.
+/// @intent border color, divider color, semi-transparent border color, computed border color
+/// @role color
+/// @anti-use Don't hardcode `border: 1px solid rgba(0,0,0,0.1)`; use this token so the color and opacity stay themeable.
+/// @see --dbx-border-color
+/// @see --dbx-border-opacity
+$dbx-border-color-current-var: --dbx-border-color-current;
+
+/// Shared divider color for component dividers/separators (dbx-table-view summary rule, dbx-two-column boundary, dbx-calendar cell borders, etc.). Defaults to `--dbx-border-color-current` so every divider inherits the themeable semi-transparent border by default; override this single token (globally or on a local scope) to retint all dividers at once, or override a component's own divider token to retint just that one.
+/// @intent divider color, separator color, shared divider, component divider color
+/// @role color
+/// @anti-use Don't hardcode a per-component divider color; default it to this token so dividers stay consistent and themeable.
+/// @see --dbx-border-color-current
+$dbx-divider-color-var: --dbx-divider-color;
+
 /// Per-app additional offset subtracted from the app-height base. Set to a non-zero value to shrink `--dbx-app-height` by a fixed amount (e.g. for a sticky footer). Defaults to `0px`.
 /// @intent app height offset, app height adjustment, shrink app height
 /// @role size
@@ -323,6 +354,11 @@ $dbx-outline-color: var($dbx-outline-color-var);
 $dbx-outline-variant-color: var($dbx-outline-variant-color-var);
 $dbx-error-color: var($dbx-error-color-var);
 
+$dbx-border-color: var($dbx-border-color-var);
+$dbx-border-opacity: var($dbx-border-opacity-var);
+$dbx-border-color-current: var($dbx-border-color-current-var);
+$dbx-divider-color: var($dbx-divider-color-var);
+
 /// Border radius for the `[dbxContentPit]`, applied by default to every pit. Defaults to `var(--mat-sys-corner-medium)`.
 /// @intent pit radius, rounded pit corner, content pit radius
 /// @role radius

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.19.0",
+  "version": "13.20.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.19.0",
-    "@dereekb/date": "13.19.0",
-    "@dereekb/dbx-core": "13.19.0",
-    "@dereekb/rxjs": "13.19.0",
-    "@dereekb/util": "13.19.0",
-    "@dereekb/vitest": "13.19.0",
+    "@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",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
     "@ngrx/effects": "^21.1.0",

package/types/dereekb-dbx-web-style-demo.d.ts

@@ -818,7 +818,9 @@ declare class DbxStyleDemoTypeRolesSectionComponent {
  * `'Shape'` toggle group, so only one is active at a time; `pill-controls` (`'Controls'`), `button-corner-*`
  * (`'Button Shape'`), `list-corner-*` (`'List Shape'`) and `anchor-list-corner-*` (`'Anchor List Shape'`) each live in
  * their own group so they compose on top of a corner lever instead of radio-excluding it — their debug classes are
- * emitted after `corner-shape-*` / `pill-controls` so they win the shape tokens they share.
+ * emitted after `corner-shape-*` / `pill-controls` so they win the shape tokens they share. The `sidenav-corner-*`
+ * levers (`'Sidenav Shape'`) re-round the nested `mat-sidenav` drawer's own trailing-edge tokens and are independent
+ * of every other shape lever.
  */
 declare const DBX_WEB_STYLE_DEMO_TEMPLATES: DbxStyleDemoStyleTemplate[];
 /**
@@ -827,7 +829,8 @@ declare const DBX_WEB_STYLE_DEMO_TEMPLATES: DbxStyleDemoStyleTemplate[];
  * The `corner-shape-*` levers share the `'Shape'` group (mutually exclusive); the component-scoped `button-corner-*`
  * (`'Button Shape'`), `list-corner-*` (`'List Shape'`) and `anchor-list-corner-*` (`'Anchor List Shape'`) levers are
  * mutually exclusive within their own groups but compose with `'Shape'` and `'Controls'`, letting a global corner
- * preset be overridden for just buttons, just `dbx-list` rows, or just `dbx-anchor-list` (nav) rows. `pill-controls`
+ * preset be overridden for just buttons, just `dbx-list` rows, or just `dbx-anchor-list` (nav) rows. The
+ * `sidenav-corner-*` levers (`'Sidenav Shape'`) re-round the `dbx-sidenav` drawer edge independently. `pill-controls`
  * (`'Controls'`), `surface-tint` and `vivid-primary` are independent toggles in their own groups.
  */
 declare const DBX_WEB_STYLE_DEMO_TEMPLATE_TOGGLES: DbxStyleDemoTemplateToggle[];

package/types/dereekb-dbx-web.d.ts

@@ -2448,9 +2448,14 @@ type DbxContentPitScrollableHeightSetting = 'small' | 'medium' | 'large';
  * Wraps content in a recessed "pit" container with optional scrollable overflow and rounded corners.
  * Useful for displaying bounded content areas such as lists or previews with a constrained height.
  *
- * Pits round their corners by default. Pass `[rounded]="false"` to square the pit — this applies the
+ * Pits round their corners by default. Pass `[square]="true"` to square the pit — this applies the
  * common `.dbx-corners-none` opt-out utility rather than a pit-specific class.
  *
+ * When `[scrollable]` is set the pit frame (padding, background, corners) stays fixed and an inner
+ * `.dbx-content-pit-scrollable-content` wrapper does the scrolling — wrap the body in that element so
+ * the frame doesn't shift at the scroll extremes. The resolved max height is published as the
+ * `--dbx-content-pit-scrollable-max-height` custom property, which the inner wrapper reads.
+ *
  * @dbxWebComponent
  * @dbxWebSlug content-pit
  * @dbxWebCategory layout
@@ -2467,10 +2472,11 @@ type DbxContentPitScrollableHeightSetting = 'small' | 'medium' | 'large';
  */
 declare class DbxContentPitDirective {
     readonly scrollable: _angular_core.InputSignal<Maybe<DbxContentPitScrollableInput>>;
-    readonly rounded: _angular_core.InputSignal<boolean>;
+    readonly square: _angular_core.InputSignal<boolean>;
     readonly scrollableHeightSignal: _angular_core.Signal<string | null>;
+    readonly scrollableMaxHeightSignal: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DbxContentPitDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "square": { "alias": "square"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**