@dereekb/dbx-web 13.16.0 → 13.18.0

package/lib/layout/text/_text.scss

@@ -1,14 +1,15 @@
 @use '../../style/theming';
+@use '../style/style';
 
 // MARK: Variables
-$icon-spacing: 6px;
-$chip-spacing: 2px;
+$icon-spacing: var(--dbx-padding-2);
+$chip-spacing: var(--dbx-padding-1);
 $hint-opacity: 0.8;
 $faint-opacity: 0.54;
 $note-opacity: 0.7;
 $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
-$dbx-label-padded-padding: 6px;
-$dbx-detail-block-bottom-padding: 12px;
+$dbx-label-padded-padding: var(--dbx-padding-2);
+$dbx-detail-block-bottom-padding: var(--dbx-padding-3);
 $dbx-detail-block-content-offset: 30px;
 $click-to-copy-icon-size: 18px;
 $dbx-detail-block-big-header-icon-size: 18px;
@@ -92,7 +93,7 @@ $dbx-step-block-badge-font-weight: 600;
     align-items: center;
 
     .mat-icon {
-      padding-right: 6px;
+      padding-right: var(--dbx-padding-2);
       flex-shrink: 0; // do not allow shrinking
     }
 
@@ -104,7 +105,7 @@ $dbx-step-block-badge-font-weight: 600;
   }
 
   .dbx-detail-block-header-no-icon {
-    padding-left: $dbx-detail-block-content-offset;
+    padding-left: var(--dbx-detail-block-content-offset, #{$dbx-detail-block-content-offset});
   }
 
   .dbx-detail-line {
@@ -113,7 +114,7 @@ $dbx-step-block-badge-font-weight: 600;
   }
 
   .dbx-detail-block-header-label {
-    padding-right: 2px;
+    padding-right: var(--dbx-padding-1);
   }
 
   .dbx-detail-block-header.dbx-detail-block-header-align {
@@ -132,7 +133,7 @@ $dbx-step-block-badge-font-weight: 600;
     display: block;
 
     .dbx-detail-block-header {
-      padding-bottom: 2px;
+      padding-bottom: var(--dbx-padding-1);
 
       .dbx-detail-block-header-label {
         font-weight: 400;
@@ -142,7 +143,7 @@ $dbx-step-block-badge-font-weight: 600;
     .dbx-detail-block-content {
       opacity: 0.8;
       font-size: 0.9em;
-      padding-left: $dbx-detail-block-content-offset;
+      padding-left: var(--dbx-detail-block-content-offset, #{$dbx-detail-block-content-offset});
     }
 
     padding-bottom: $dbx-detail-block-bottom-padding;
@@ -201,7 +202,7 @@ $dbx-step-block-badge-font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--dbx-icon-tile-border-radius, 12px);
+    border-radius: var(--dbx-icon-tile-border-radius, var(--mat-sys-corner-medium, 12px));
     padding: var(--dbx-icon-tile-padding, 8px);
     width: var(--dbx-icon-tile-width);
     height: var(--dbx-icon-tile-height);
@@ -216,6 +217,21 @@ $dbx-step-block-badge-font-weight: 600;
     }
   }
 
+  // Colored tile surface. `[dbxColor]` only provides the color tokens (and the
+  // `.dbx-color` marker); the tile itself paints from them here, scoped on the
+  // marker so a tile inside a `[dbxColor]` page section doesn't repaint from
+  // inherited tokens. Mirrors the `mat-card.dbx-color` model.
+  // `:not(.dbx-default)` guard: `[dbxColor]` always adds the `.dbx-color` marker,
+  // and a nullish color resolves to the `dbx-default` token class (which sets no
+  // `--dbx-bg-color-current`), so the guard keeps an uncolored tile from painting.
+  .dbx-icon-tile.dbx-color:not(.dbx-default) {
+    @include style.dbx-color-surface();
+
+    &.dbx-color-tonal {
+      color: var(#{theming.$dbx-bg-color-var});
+    }
+  }
+
   // Round modifier — turns the rounded-square tile into a circle. Pair
   // with explicit width/height (or square content) to keep it true round.
   /// @dbx-utility icon-tile-round
@@ -243,7 +259,7 @@ $dbx-step-block-badge-font-weight: 600;
     --dbx-icon-tile-width: var(--dbx-step-block-badge-size, #{$dbx-step-block-badge-size});
     --dbx-icon-tile-height: var(--dbx-step-block-badge-size, #{$dbx-step-block-badge-size});
     --dbx-icon-tile-min-width: var(--dbx-step-block-badge-size, #{$dbx-step-block-badge-size});
-    --dbx-icon-tile-font-size: var(--dbx-step-block-badge-font-size, #{$dbx-step-block-badge-font-size});
+    --dbx-icon-tile-font-size: var(--dbx-step-block-badge-font-size, var(--mat-sys-label-large-size, #{$dbx-step-block-badge-font-size}));
     --dbx-icon-tile-font-weight: var(--dbx-step-block-badge-font-weight, #{$dbx-step-block-badge-font-weight});
     --dbx-icon-tile-icon-size: var(--dbx-step-block-badge-icon-size, #{$dbx-step-block-badge-icon-size});
   }
@@ -305,17 +321,36 @@ $dbx-step-block-badge-font-weight: 600;
   }
 
   /// @dbx-utility chip
-  /// @intent chip label — `<dbx-chip>` body that lays out a 14px/500 inline chip; compose with `.dbx-chip-small`, `.dbx-chip-block`, or `.dbx-chip-small-text` for size variants
+  /// @intent chip label — `<dbx-chip>` body that lays out an inline-flex chip (label-large text, 7px/12px padding, 32px min-height) with an M3 corner-small radius; override the radius via `--dbx-chip-container-shape` (e.g. set it to `var(--mat-sys-corner-full)` to restore a pill). Compose with `.dbx-chip-small`, `.dbx-chip-block`, or `.dbx-chip-small-text` for size variants
   /// @role layout
   /// @component DbxChipDirective
   /// @scope component-class
   /// @see-also chip-spacer, chip-margin
   .dbx-chip {
-    font-size: 14px;
-    font-weight: 500;
+    font-size: var(--mat-sys-label-large-size);
+    font-weight: var(--mat-sys-label-large-weight);
     position: relative;
     box-sizing: border-box;
     white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    cursor: default;
+    padding: 7px 12px;
+    min-height: 32px;
+    border-radius: var(--dbx-chip-container-shape, var(--mat-chip-container-shape-radius, var(--mat-sys-corner-small, 8px)));
+  }
+
+  /// @dbx-utility dot
+  /// @intent small round status dot painted from `currentColor` — pair with `[dbxTextColor]` (or any colored text context); size via `--dbx-dot-size`.
+  /// @role text
+  /// @see-also card-horizontal-header-dot, text-color, chip
+  .dbx-dot {
+    display: inline-block;
+    flex-shrink: 0;
+    width: var(--dbx-dot-size, 8px);
+    height: var(--dbx-dot-size, 8px);
+    border-radius: 50%;
+    background: currentColor;
   }
 
   /// @dbx-utility chip-spacer
@@ -326,21 +361,23 @@ $dbx-step-block-badge-font-weight: 600;
     margin-right: $chip-spacing;
   }
 
-  .dbx-chip.mat-standard-chip {
-    // include default mat-standard-chip styling
-    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-    display: inline-flex;
-    padding: 7px 12px;
-    border-radius: var(--dbx-chip-container-shape, var(--mat-sys-corner-full, 9999px));
-    align-items: center;
-    cursor: default;
-    min-height: 32px;
-    height: 1px;
+  // Colored chip surface. `<dbx-chip>` hosts a DbxColorDirective that supplies the
+  // color tokens (named `dbx-{color}-bg` token class or inline config vars) and the
+  // `.dbx-color` marker; the chip directive supplies `--dbx-color-bg-tone` (default
+  // 18 → tonal). Painting happens here from those tokens. `:not(.dbx-default)`
+  // guard: the host directive always adds the `.dbx-color` marker, so an uncolored
+  // chip (marked `dbx-default`) must not paint. `.dbx-color-tonal` (tone < 100)
+  // flips the text to the vibrant color.
+  .dbx-chip.dbx-color:not(.dbx-default) {
+    @include style.dbx-color-surface(18%);
+
+    &.dbx-color-tonal {
+      color: var(#{theming.$dbx-bg-color-var});
+    }
   }
 
-  .dbx-chip.dbx-chip-small,
-  .dbx-chip.mat-standard-chip.dbx-chip-small {
-    font-size: 12px;
+  .dbx-chip.dbx-chip-small {
+    font-size: var(--mat-sys-label-medium-size);
     padding: 2px 8px;
     min-height: 20px;
   }
@@ -348,7 +385,7 @@ $dbx-step-block-badge-font-weight: 600;
   .dbx-chip-small-text .dbx-chip,
   .dbx-chip-small-text.dbx-chip,
   .dbx-chip-small-text.dbx-chip.dbx-chip-small {
-    font-size: 10px;
+    font-size: var(--mat-sys-label-small-size, 10px);
   }
 
   .dbx-chip.dbx-chip-block {
@@ -453,13 +490,20 @@ $dbx-step-block-badge-font-weight: 600;
   }
 
   .dbx-number-with-limit {
-    padding: 2px 6px;
+    padding: var(--dbx-padding-1) var(--dbx-padding-2);
 
     .dbx-number-with-limit-divider {
       margin: 0 3px;
     }
   }
 
+  // `<dbx-number-with-limit>` applies a ratio-derived `[dbxColor]` (ok/notice/warn)
+  // to itself; paint the colored pill from those tokens. The `:not(.dbx-default)`
+  // guard keeps the no-limit (uncolored) state from painting.
+  .dbx-number-with-limit.dbx-color:not(.dbx-default) {
+    @include style.dbx-color-surface();
+  }
+
   .dbx-number-with-limit-rounded {
     border-radius: var(--dbx-number-with-limit-container-shape, var(--mat-sys-corner-medium));
   }

package/lib/loading/_loading.scss

@@ -25,10 +25,17 @@ $linear-line-height: 4px;
 
   .loading-progress-view-indicator {
     background: none !important; // no background color
-    --mat-progress-spinner-active-indicator-color: #{$color-value};
   }
 
-  .loading-progress-view-indicator.dbx-color > .mat-mdc-progress-bar {
+  // Colored progress indicator. `[dbxColor]` on the `<dbx-loading>` /
+  // `<dbx-basic-loading>` / `<dbx-loading-progress>` host supplies the
+  // `--dbx-bg-color-current` token + the `.dbx-color` marker; map the Material
+  // progress indicator colors to it. Scoped on the marker (no inheritance-only
+  // repaint). Without `[dbxColor]` the indicator keeps the Material default color.
+  dbx-loading.dbx-color,
+  dbx-basic-loading.dbx-color,
+  dbx-loading-progress.dbx-color {
+    --mat-progress-spinner-active-indicator-color: #{$color-value};
     --mat-progress-bar-active-indicator-color: #{$color-value};
   }
 }

package/lib/router/layout/navbar/_navbar.scss

@@ -6,6 +6,20 @@
 
 // MARK: Mixin
 @mixin core() {
+  // Browser-tab style: each tab link rounds its TOP corners; the bar stays
+  // square. `--dbx-navbar-item-border-radius` holds a SINGLE radius ("how
+  // round"); the component owns the "top corners only" geometry by applying it
+  // as `R R 0 0`, so levers / app overrides can re-round the tabs without ever
+  // breaking the tab shape.
+  .dbx-navbar .mat-mdc-tab-nav-bar .mat-mdc-tab-link {
+    border-radius: var(--dbx-navbar-item-border-radius, var(--mat-sys-corner-large, 16px)) var(--dbx-navbar-item-border-radius, var(--mat-sys-corner-large, 16px)) 0 0;
+    // Clip the hover/focus state layer (`.mdc-tab__ripple::before`) and the
+    // click ripple (`.mat-mdc-tab-ripple`) to the rounded shape — neither
+    // inherits the radius. The keyboard-focus indicator pseudo is inset 5px so
+    // it stays clear of the clip, and the active underline sits on the square
+    // bottom edge (both unaffected).
+    overflow: hidden;
+  }
 }
 
 @mixin theme($theme-config) {

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

@@ -26,7 +26,7 @@ $active-background-transparent-color: 0.93;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
-        padding-bottom: 24px;
+        padding-bottom: var(--dbx-padding-5);
       }
 
       .dbx-anchor-list.mat-mdc-nav-list {
@@ -152,7 +152,7 @@ $active-background-transparent-color: 0.93;
     --mat-sidenav-scrim-color: var(--dbx-sidenav-scrim-color, color-mix(in srgb, var(--mat-sys-neutral-variant20) 40%, transparent));
 
     mat-sidenav.mat-drawer {
-      --mat-sidenav-container-text-color: var(--dbx-sidenav-text-color, var(--mat-sys-primary-container));
+      --mat-sidenav-container-text-color: var(--dbx-sidenav-text-color, var(--dbx-color-current, var(--mat-sys-on-surface)));
       --mat-sidenav-container-divider-color: var(--dbx-sidenav-divider-color, transparent);
       background: var(--dbx-sidenav-background, var(--dbx-bg-color-current));
 

package/lib/style/_core.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use './all-core';
 @use './all-typography';
+@use './corners';
 @use './root-variables';
 @use './config';
 
@@ -11,5 +12,8 @@
   }
 
   @include all-core.all-component-core($theme-config);
+  // Generic corner helpers — emitted AFTER all-component-core() so these
+  // single-class utilities win source-order ties against component baselines.
+  @include corners.core();
   @include root-variables.root-variables('body', $theme-config);
 }

package/lib/style/_corners.scss

@@ -0,0 +1,79 @@
+// MARK: Generic corner-rounding helpers
+//
+// Single-class utilities for applying an M3 corner radius to any element. The
+// base `.dbx-corners` reads the app-overridable `--dbx-corners-border-radius`
+// token (root-emitted to the M3 "medium" radius in `_root-variables.scss`,
+// alongside the content-pit radius token) so it tracks the corner system and
+// the style-demo levers; the explicit level variants are self-sufficient fixed
+// design choices that bypass the token.
+//
+// Emitted by `core()`, which `_core.scss` includes AFTER `all-component-core()`
+// so these single-class helpers win source-order ties against component-level
+// shape baselines (e.g. the content-pit default).
+
+@use './theming';
+
+// MARK: Mixin
+@mixin core() {
+  /// @dbx-utility corners
+  /// @intent rounded-corner surface — applies the M3 "medium" corner radius via the app-overridable `--dbx-corners-border-radius` token, so it tracks the corner system / style-demo levers
+  /// @role layout
+  /// @see-also dbx-corners-small, dbx-corners-medium, dbx-corners-large, dbx-corners-extra-large, dbx-corners-full, dbx-corners-none
+  .dbx-corners {
+    border-radius: theming.$dbx-corners-border-radius;
+  }
+
+  // Level variants are self-sufficient (no `.dbx-corners` base required) and
+  // deliberately bypass the token: an explicit level is a fixed design choice.
+
+  /// @dbx-utility corners-small
+  /// @intent fixed M3 "small" (8px) corner radius — explicit, token-independent level choice
+  /// @role layout
+  /// @see-also dbx-corners
+  .dbx-corners-small {
+    border-radius: var(--mat-sys-corner-small, 8px);
+  }
+
+  /// @dbx-utility corners-medium
+  /// @intent fixed M3 "medium" (12px) corner radius — explicit, token-independent level choice
+  /// @role layout
+  /// @see-also dbx-corners
+  .dbx-corners-medium {
+    border-radius: var(--mat-sys-corner-medium, 12px);
+  }
+
+  /// @dbx-utility corners-large
+  /// @intent fixed M3 "large" (16px) corner radius — explicit, token-independent level choice
+  /// @role layout
+  /// @see-also dbx-corners
+  .dbx-corners-large {
+    border-radius: var(--mat-sys-corner-large, 16px);
+  }
+
+  /// @dbx-utility corners-extra-large
+  /// @intent fixed M3 "extra-large" (28px) corner radius — explicit, token-independent level choice
+  /// @role layout
+  /// @see-also dbx-corners
+  .dbx-corners-extra-large {
+    border-radius: var(--mat-sys-corner-extra-large, 28px);
+  }
+
+  /// @dbx-utility corners-full
+  /// @intent fixed M3 "full" (pill) corner radius — explicit, token-independent level choice
+  /// @role layout
+  /// @see-also dbx-corners
+  .dbx-corners-full {
+    border-radius: var(--mat-sys-corner-full, 9999px);
+  }
+
+  /// @dbx-utility corners-none
+  /// @intent square corners (radius 0) — doubles as the common opt-out for components that round by default (e.g. `.dbx-content-pit`)
+  /// @role layout
+  /// @see-also dbx-corners, dbx-content-pit
+  .dbx-corners-none {
+    border-radius: 0;
+  }
+}
+
+@mixin theme($theme-config) {
+}

package/lib/style/_root-variables.scss

@@ -30,7 +30,24 @@
     #{theming.$dbx-page-height-additional-offset-var}: 0px;
     #{theming.$dbx-content-height-additional-offset-var}: 0px;
 
+    // M3 shape-scale system tokens. `mat.theme()` emits these, but the `mat.define-theme()`-based
+    // API does not — emit them so `var(--mat-sys-corner-*)` references resolve.
+    // Values mirror @angular/material/core/tokens/m3/_md-sys-shape.scss.
+    --mat-sys-corner-none: 0;
+    --mat-sys-corner-extra-small: 4px;
+    --mat-sys-corner-extra-small-top: 4px 4px 0 0;
+    --mat-sys-corner-small: 8px;
+    --mat-sys-corner-medium: 12px;
+    --mat-sys-corner-large: 16px;
+    --mat-sys-corner-large-start: 16px 0 0 16px;
+    --mat-sys-corner-large-end: 0 16px 16px 0;
+    --mat-sys-corner-large-top: 16px 16px 0 0;
+    --mat-sys-corner-extra-large: 28px;
+    --mat-sys-corner-extra-large-top: 28px 28px 0 0;
+    --mat-sys-corner-full: 9999px;
+
     #{theming.$dbx-content-pit-rounded-border-radius-var}: var(--mat-sys-corner-medium);
+    #{theming.$dbx-corners-border-radius-var}: var(--mat-sys-corner-medium);
     #{theming.$dbx-content-pit-scrollable-max-height-var}: 140px;
 
     #{theming.$dbx-avatar-size-var}: theming.get-dbx-avatar-size($theme-config);

package/lib/style/_shapes.scss

@@ -0,0 +1,56 @@
+/// Applies M3 "small" (8px) corner rounding to components that default to
+/// larger radii in M3 (buttons default to "full"/pill, dialogs to 28px, etc).
+/// This gives a modern but restrained look.
+@mixin dbx-components-shapes() {
+  // Buttons: M3 default is "full" (pill). Small = 8px.
+  --mat-button-filled-container-shape: 8px;
+  --mat-button-outlined-container-shape: 8px;
+  --mat-button-text-container-shape: 8px;
+  --mat-button-protected-container-shape: 8px;
+  --mat-button-tonal-container-shape: 8px;
+
+  // FAB: M3 default is "large" (16px). Small = 8px.
+  --mat-fab-container-shape: 8px;
+  --mat-fab-small-container-shape: 8px;
+
+  // Dialog: M3 default is "extra-large" (28px). Small = 8px.
+  --mat-dialog-container-shape: 8px;
+
+  // Card: M3 default is "medium" (12px). Small = 8px.
+  --mat-card-elevated-container-shape: 8px;
+  --mat-card-filled-container-shape: 8px;
+  --mat-card-outlined-container-shape: 8px;
+
+  // Sidenav: M3 default is "large" (16px). No rounding for dbx-components.
+  --mat-sidenav-container-shape: 0;
+
+  // Chip: Small = 8px.
+  --mat-chip-container-shape-radius: 8px;
+
+  // Form fields: Small = 8px.
+  --mat-form-field-filled-container-shape: 8px;
+  --mat-form-field-outlined-container-shape: 8px;
+
+  // Snackbar: Small = 8px.
+  --mat-snack-bar-container-shape: 8px;
+
+  // Menu / Select / Autocomplete: Small = 8px.
+  --mat-menu-container-shape: 8px;
+  --mat-autocomplete-container-shape: 8px;
+
+  // Expansion panel
+  --mat-expansion-container-shape: 8px;
+
+  // Datepicker
+  --mat-datepicker-calendar-container-shape: 8px;
+
+  // Bottom sheet
+  --mat-bottom-sheet-container-shape: 8px;
+
+  // Tooltip
+  --mat-tooltip-container-shape: 8px;
+
+  // List item rounding (active indicator + container shape) is intentionally NOT pinned here —
+  // it is owned by the dbx-list / dbx-anchor-list component rules in `_list.scss` (medium default
+  // via `--dbx-list-item-border-radius`), so each list type controls its own radius.
+}

package/lib/style/_style-demo.scss

@@ -0,0 +1,183 @@
+// MARK: Style Demo (disposable demo/debug classes)
+//
+// These `.dbx-style-demo-template-<key>` classes back the `className` levers in
+// `@dereekb/dbx-web/style-demo` (DbxStyleDemoStyleTemplate.className). They are
+// DISPOSABLE demo/debug classes: they exist only to drive the styling showcase /
+// live token-override preview harness and should be removed once the styling
+// migration they support is complete. They are NOT a dbx-web core runtime primitive.
+//
+// Each template re-points CSS custom properties; values reference `--mat-sys-*`
+// tokens (per the component-token convention) except where an intentional demo
+// override value (e.g. an exaggerated corner radius) is the whole point of the lever.
+//
+// Authored like `_shapes.scss` as an opt-in mixin and emitted via an
+// `@each` map loop (the `_curated-colors.scss` pattern). Include the mixin once at a
+// global/root scope; the `var(--mat-sys-*)` references resolve per-theme at use-site,
+// so a single emission works under both light and dark themes.
+
+/// Builds the component-shape token override map for a single corner-radius value.
+///
+/// Re-points the same Material component shape tokens that `dbx-components-shapes()` pins to the
+/// baseline `8px`, plus the dbx component corner tokens that track the system scale
+/// (`--dbx-content-pit-rounded-border-radius`, `--dbx-prompt-box-border-radius`,
+/// `--dbx-corners-border-radius`, `--dbx-navbar-item-border-radius`).
+///
+/// EXCEPT the intentional `--mat-sidenav-container-shape` (0) and `--mat-list-active-indicator-shape`
+/// (2px global pin) entries — those keep their deliberate non-default shapes. For the same reason
+/// `--dbx-list-item-border-radius` (the `.dbx-list` row radius; medium default) and
+/// `--dbx-list-item-card-border-radius` (card-list rows) stay excluded here — they are owned by the list
+/// component, re-rounded only by the `pill-controls` (`--dbx-list-item-border-radius` only) and the
+/// dedicated `list-corner-*` levers (both list tokens).
+///
+/// `$value` may be a literal (e.g. `0`) or a token reference (e.g. `var(--mat-sys-corner-medium)`); the
+/// emitting mixin interpolates either form via `#{$value}`. Private to this module (`-` prefix).
+@function -dbx-style-demo-shape-map($value) {
+  @return (
+    '--mat-button-filled-container-shape': $value,
+    '--mat-button-outlined-container-shape': $value,
+    '--mat-button-text-container-shape': $value,
+    '--mat-button-protected-container-shape': $value,
+    '--mat-button-tonal-container-shape': $value,
+    '--mat-fab-container-shape': $value,
+    '--mat-fab-small-container-shape': $value,
+    '--mat-dialog-container-shape': $value,
+    '--mat-card-elevated-container-shape': $value,
+    '--mat-card-filled-container-shape': $value,
+    '--mat-card-outlined-container-shape': $value,
+    '--mat-chip-container-shape-radius': $value,
+    '--mat-form-field-filled-container-shape': $value,
+    '--mat-form-field-outlined-container-shape': $value,
+    '--mat-snack-bar-container-shape': $value,
+    '--mat-menu-container-shape': $value,
+    '--mat-autocomplete-container-shape': $value,
+    '--mat-expansion-container-shape': $value,
+    '--mat-datepicker-calendar-container-shape': $value,
+    '--mat-bottom-sheet-container-shape': $value,
+    '--mat-tooltip-container-shape': $value,
+    // dbx component corner tokens that track the system scale.
+    '--dbx-content-pit-rounded-border-radius': $value,
+    '--dbx-prompt-box-border-radius': $value,
+    '--dbx-corners-border-radius': $value,
+    '--dbx-navbar-item-border-radius': $value // single radius; navbar keeps its top-only geometry
+  );
+}
+
+/// Builds the controls-only shape override map for a single corner-radius value.
+///
+/// Backs the `pill-controls` lever: re-rounds only the interactive "controls" surfaces (buttons, FABs,
+/// `.dbx-list` rows via `--dbx-list-item-border-radius`, and `.dbx-anchor-list` rows via
+/// `--dbx-anchor-list-item-border-radius`) without touching content surfaces. The sidenav anchor list keeps
+/// its own token. Chips and form-fields are intentionally excluded — pilling them reads as a different design
+/// intent than rounding controls. Private to this module (`-` prefix).
+@function -dbx-style-demo-controls-shape-map($value) {
+  @return (
+    '--mat-button-filled-container-shape': $value,
+    '--mat-button-outlined-container-shape': $value,
+    '--mat-button-text-container-shape': $value,
+    '--mat-button-protected-container-shape': $value,
+    '--mat-button-tonal-container-shape': $value,
+    '--mat-fab-container-shape': $value,
+    '--mat-fab-small-container-shape': $value,
+    '--mat-list-active-indicator-shape': $value,
+    // list + nav/anchor-list rows (each list type reads its own token)
+    '--dbx-list-item-border-radius': $value,
+    '--dbx-anchor-list-item-border-radius': $value
+  );
+}
+
+/// Builds the button-only shape override map for a single corner-radius value.
+///
+/// Backs the `button-corner-*` levers: re-rounds only the 5 `--mat-button-*-container-shape` tokens,
+/// leaving FABs / cards / lists / form-fields / etc. untouched. Composes on top of a
+/// `corner-shape-*` / `pill-controls` lever — emitted later in `$dbx-style-demo-templates` so this map
+/// wins the `--mat-button-*` tokens it shares with them. Private to this module (`-` prefix).
+@function -dbx-style-demo-button-shape-map($value) {
+  @return ('--mat-button-filled-container-shape': $value, '--mat-button-outlined-container-shape': $value, '--mat-button-text-container-shape': $value, '--mat-button-protected-container-shape': $value, '--mat-button-tonal-container-shape': $value);
+}
+
+/// Builds the dbx-list-only shape override map for a single corner-radius value.
+///
+/// Backs the `list-corner-*` levers: re-points the default `.dbx-list` row radius
+/// (`--dbx-list-item-border-radius`, medium by default) and card-list rows (`--dbx-list-item-card-border-radius`)
+/// — the two list tokens that `-dbx-style-demo-shape-map` deliberately excludes — without touching any other
+/// surface. Composes on top of `pill-controls` (emitted later → wins `--dbx-list-item-border-radius`).
+/// Private to this module (`-` prefix).
+@function -dbx-style-demo-list-shape-map($value) {
+  @return ('--dbx-list-item-border-radius': $value, '--dbx-list-item-card-border-radius': $value);
+}
+
+/// Builds the dbx-anchor-list-only shape override map for a single corner-radius value.
+///
+/// Backs the `anchor-list-corner-*` levers: re-points the default `.dbx-anchor-list` (nav) row radius
+/// (`--dbx-anchor-list-item-border-radius`, medium by default) independently of `.dbx-list` and the sidenav
+/// anchor list — which carry their own tokens. Private to this module (`-` prefix).
+@function -dbx-style-demo-anchor-list-shape-map($value) {
+  @return ('--dbx-anchor-list-item-border-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()`
+  // pins to the baseline 8px, so cards / buttons / form-fields / etc. re-round live as the lever flips.
+  // Values reference the `--mat-sys-corner-*` token where one exists; `none` is the literal 0.
+  // 'corner-shape-small' is intentionally omitted — the baseline is already 8px (= small), so it would be a no-op.
+  // 'corner-shape-full' was removed — pilling every surface broke too many components; use the
+  // controls-only 'pill-controls' lever below instead.
+  'corner-shape-none': -dbx-style-demo-shape-map(0),
+  'corner-shape-extra-small': -dbx-style-demo-shape-map(var(--mat-sys-corner-extra-small)),
+  'corner-shape-medium': -dbx-style-demo-shape-map(var(--mat-sys-corner-medium)),
+  'corner-shape-large': -dbx-style-demo-shape-map(var(--mat-sys-corner-large)),
+  'corner-shape-extra-large': -dbx-style-demo-shape-map(var(--mat-sys-corner-extra-large)),
+  // Controls-only pill preset. Emitted AFTER the corner-shape-* entries so that when it is composed
+  // with a corner lever (its own toggle group, not 'Shape'), this later emission wins the tokens they
+  // share (buttons / FABs / list items) — guard this ordering when reordering the map.
+  'pill-controls': -dbx-style-demo-controls-shape-map(var(--mat-sys-corner-full)),
+  // Button-only corner levers (own 'Button Shape' toggle group). Emitted AFTER the corner-shape-* /
+  // pill-controls levers so this later emission wins the shared --mat-button-* shape tokens when composed
+  // (e.g. corner-shape-large + button-corner-none → buttons square, everything else large). Baseline is
+  // 8px (= small) so 'small' is omitted as a no-op; 'extra-small' (4px) is the meaningful step down.
+  'button-corner-none': -dbx-style-demo-button-shape-map(0),
+  'button-corner-extra-small': -dbx-style-demo-button-shape-map(var(--mat-sys-corner-extra-small)),
+  'button-corner-medium': -dbx-style-demo-button-shape-map(var(--mat-sys-corner-medium)),
+  'button-corner-large': -dbx-style-demo-button-shape-map(var(--mat-sys-corner-large)),
+  'button-corner-extra-large': -dbx-style-demo-button-shape-map(var(--mat-sys-corner-extra-large)),
+  // dbx-list-only corner levers (own 'List Shape' toggle group). Re-point the list item tokens that
+  // -dbx-style-demo-shape-map deliberately excludes; emitted after pill-controls so they win the shared
+  // --dbx-list-item-border-radius. The .dbx-list default is medium, so 'small' (8px) is meaningful and
+  // 'extra-small' is omitted.
+  'list-corner-none': -dbx-style-demo-list-shape-map(0),
+  'list-corner-small': -dbx-style-demo-list-shape-map(var(--mat-sys-corner-small)),
+  'list-corner-medium': -dbx-style-demo-list-shape-map(var(--mat-sys-corner-medium)),
+  'list-corner-large': -dbx-style-demo-list-shape-map(var(--mat-sys-corner-large)),
+  'list-corner-extra-large': -dbx-style-demo-list-shape-map(var(--mat-sys-corner-extra-large)),
+  // dbx-anchor-list-only corner levers (own 'Anchor List Shape' toggle group), independent of list-corner-*
+  // (anchor lists read their own --dbx-anchor-list-item-border-radius token). Same medium-baseline scale.
+  'anchor-list-corner-none': -dbx-style-demo-anchor-list-shape-map(0),
+  'anchor-list-corner-small': -dbx-style-demo-anchor-list-shape-map(var(--mat-sys-corner-small)),
+  '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)),
+  // 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)),
+      '--mat-sys-surface-container': color-mix(in srgb, var(--mat-sys-primary) 12%, var(--mat-sys-surface-container)),
+      '--mat-sys-surface-container-high': color-mix(in srgb, var(--mat-sys-primary) 16%, var(--mat-sys-surface-container-high))
+    )
+);
+
+/// Opt-in mixin that emits the disposable `.dbx-style-demo-template-<key>` debug classes.
+///
+/// Usage (include once at a global/root scope):
+/// ```scss
+/// @use '@dereekb/dbx-web' as dbx;
+/// @include dbx.dbx-style-demo-debug-classes();
+/// ```
+@mixin dbx-style-demo-debug-classes() {
+  @each $key, $tokens in $dbx-style-demo-templates {
+    .dbx-style-demo-template-#{$key} {
+      @each $token, $value in $tokens {
+        #{$token}: #{$value};
+      }
+    }
+  }
+}

package/lib/style/_variables.scss

@@ -323,13 +323,20 @@ $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);
 
-/// Border radius for the `[dbxContentPit]` rounded variant. Defaults to `var(--mat-sys-corner-medium)`.
+/// 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
 /// @see --mat-sys-corner-medium
 $dbx-content-pit-rounded-border-radius-var: --dbx-content-pit-rounded-border-radius;
 $dbx-content-pit-rounded-border-radius: var($dbx-content-pit-rounded-border-radius-var);
 
+/// Border radius for the generic `.dbx-corners` utility class. Defaults to `var(--mat-sys-corner-medium)`.
+/// @intent corners radius, generic corner radius, dbx-corners radius
+/// @role radius
+/// @see --mat-sys-corner-medium
+$dbx-corners-border-radius-var: --dbx-corners-border-radius;
+$dbx-corners-border-radius: var($dbx-corners-border-radius-var);
+
 $dbx-content-pit-scrollable-max-height-var: --dbx-content-pit-scrollable-max-height;
 $dbx-content-pit-scrollable-max-height: var($dbx-content-pit-scrollable-max-height-var);