@dereekb/dbx-web 13.17.0 → 13.18.0

package/lib/button/_button.scss

@@ -4,7 +4,7 @@
 @use '../style/theming';
 
 // MARK: Variables
-$button-spacer-width: 6px;
+$button-spacer-width: var(--dbx-padding-2);
 $big-button-height: 46px; // 33% bigger
 
 // MARK: Mixin
@@ -16,11 +16,11 @@ $big-button-height: 46px; // 33% bigger
   /// @see-also button-wide
   .dbx-button-big,
   .dbx-button-large {
-    --mat-button-text-container-height: #{$big-button-height};
-    --mat-button-filled-container-height: #{$big-button-height};
-    --mat-button-protected-container-height: #{$big-button-height};
-    --mat-button-outlined-container-height: #{$big-button-height};
-    --mat-button-tonal-container-height: #{$big-button-height};
+    --mat-button-text-container-height: var(--dbx-button-big-height, #{$big-button-height});
+    --mat-button-filled-container-height: var(--dbx-button-big-height, #{$big-button-height});
+    --mat-button-protected-container-height: var(--dbx-button-big-height, #{$big-button-height});
+    --mat-button-outlined-container-height: var(--dbx-button-big-height, #{$big-button-height});
+    --mat-button-tonal-container-height: var(--dbx-button-big-height, #{$big-button-height});
   }
 
   /// @dbx-utility button-form-field-height
@@ -68,7 +68,7 @@ $big-button-height: 46px; // 33% bigger
   /// @see-also button-grow
   .dbx-button-wide {
     .dbx-button {
-      min-width: 120px;
+      min-width: var(--dbx-button-wide-min-width, 120px);
       max-width: 100%;
     }
   }
@@ -81,12 +81,12 @@ $big-button-height: 46px; // 33% bigger
     > dbx-button,
     > dbx-anchor {
       display: inline-block;
-      padding: 0 6px 6px 0;
+      padding: 0 var(--dbx-padding-2) var(--dbx-padding-2) 0;
     }
 
     > button,
     > dbx-icon-button {
-      margin: 0 6px 6px 0;
+      margin: 0 var(--dbx-padding-2) var(--dbx-padding-2) 0;
     }
   }
 
@@ -138,7 +138,7 @@ $big-button-height: 46px; // 33% bigger
 
   .dbx-button-text-option-button {
     .dbx-button {
-      margin-bottom: 6px;
+      margin-bottom: var(--dbx-padding-2);
     }
 
     .dbx-base-button .mdc-button__label {
@@ -180,7 +180,7 @@ $big-button-height: 46px; // 33% bigger
     align-items: flex-start;
 
     > * {
-      margin-bottom: 6px !important;
+      margin-bottom: var(--dbx-padding-2) !important;
     }
   }
 
@@ -190,23 +190,30 @@ $big-button-height: 46px; // 33% bigger
   }
 
   // dbx-color interactions
+  // `DbxColorDirective` is a pure token provider — it sets `--dbx-bg-color-current` /
+  // `--dbx-color-current` and adds the `.dbx-color` marker, but never paints the
+  // host itself; the named `.dbx-{color}-bg` classes it applies are token-only too.
+  // `<dbx-button>` hosts the directive (via `hostDirectives`) and pushes its
+  // resolved color (active echo > `color` input > `buttonStyle.color`) into it —
+  // so use the button's `color` input, never `[dbxColor]`, on a `dbx-button`. The
+  // standalone `<dbx-progress-spinner-button>` / `<dbx-progress-bar-button>` take
+  // `[dbxColor]` directly. The rules below map the host tokens onto the Material
+  // button vars per variant on the inner `.mdc-button.dbx-base-button`. Scoped on
+  // the host marker so a button inside a `[dbxColor]` section doesn't repaint from
+  // inherited tokens — only a directly-colored button host reacts. `:not(.dbx-default)`
+  // guard: the host directive always adds the `.dbx-color` marker, so an uncolored
+  // button (marked `dbx-default`) keeps native Material styling. `buttonColor` on
+  // `DbxProgressButtonConfig` was removed.
   $color-value: theming.$dbx-bg-color;
   $contrast-value: theming.$dbx-color;
-  $disabled-color-value: theming.$dbx-disabled-color;
-  $disabled-contrast-value: theming.$dbx-disabled-color-contrast;
 
-  .mdc-button.dbx-base-button.dbx-color {
-    // default button
-    &.dbx-default {
-      color: var(--mat-button-text-label-text-color, var(--mat-sys-primary));
-
-      &.mat-mdc-button-disabled {
-        color: var(--mat-button-text-disabled-label-text-color, var(--mat-sys-on-surface));
-      }
-    }
-
-    // default button
-    &:not(.dbx-default) {
+  dbx-button.dbx-color:not(.dbx-default),
+  dbx-progress-spinner-button.dbx-color:not(.dbx-default),
+  dbx-spinner-button.dbx-color:not(.dbx-default),
+  dbx-progress-bar-button.dbx-color:not(.dbx-default),
+  dbx-bar-button.dbx-color:not(.dbx-default) {
+    .mdc-button.dbx-base-button {
+      // text/basic buttons
       background: none;
       --mat-button-text-label-text-color: #{$color-value};
       --mat-button-text-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
@@ -216,93 +223,62 @@ $big-button-height: 46px; // 33% bigger
       .mat-mdc-progress-bar {
         --mat-progress-bar-active-indicator-color: #{$color-value};
       }
-    }
-
-    // raised buttons
-    &.mat-mdc-raised-button.dbx-default {
-      color: var(--mat-button-protected-label-text-color, var(--mat-sys-primary));
-    }
 
-    &.mat-mdc-raised-button:not(.dbx-default) {
-      background: var(--mat-button-protected-container-color);
+      // raised buttons
+      &.mat-mdc-raised-button {
+        background: var(--mat-button-protected-container-color);
 
-      --mat-button-protected-container-color: #{$color-value};
-      --mat-button-protected-label-text-color: #{$contrast-value};
-      --mat-button-protected-state-layer-color: #{$contrast-value};
-      --mat-button-protected-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
+        --mat-button-protected-container-color: #{$color-value};
+        --mat-button-protected-label-text-color: #{$contrast-value};
+        --mat-button-protected-state-layer-color: #{$contrast-value};
+        --mat-button-protected-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
 
-      &.mat-mdc-button-disabled {
-        background-color: var(--mat-button-protected-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent));
+        &.mat-mdc-button-disabled {
+          background-color: var(--mat-button-protected-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent));
+        }
       }
-    }
-
-    // stroked/outlined buttons
-    &.mat-mdc-outlined-button.dbx-default {
-      color: var(--mat-button-outlined-label-text-color, var(--mat-sys-primary));
-    }
 
-    &.mat-mdc-outlined-button:not(.dbx-default) {
-      --mat-button-outlined-container-color: #{$contrast-value};
-      --mat-button-outlined-label-text-color: #{$color-value};
-      --mat-button-outlined-state-layer-color: #{$color-value};
-      --mat-button-outlined-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
+      // stroked/outlined buttons
+      &.mat-mdc-outlined-button {
+        --mat-button-outlined-container-color: #{$contrast-value};
+        --mat-button-outlined-label-text-color: #{$color-value};
+        --mat-button-outlined-state-layer-color: #{$color-value};
+        --mat-button-outlined-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
 
-      --mat-progress-spinner-active-indicator-color: #{$color-value};
-    }
-
-    // flat buttons
-    &.mat-mdc-unelevated-button.dbx-default {
-      color: var(--mat-button-filled-label-text-color, var(--mat-sys-primary));
-    }
-
-    &.mat-mdc-unelevated-button:not(.dbx-default) {
-      background: var(--mat-button-filled-container-color);
-
-      --mat-button-filled-container-color: #{$color-value};
-      --mat-button-filled-label-text-color: #{$contrast-value};
-      --mat-button-filled-state-layer-color: #{$contrast-value};
-      --mat-button-filled-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
-
-      &.mat-mdc-button-disabled {
-        background-color: var(--mat-button-protected-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent));
+        --mat-progress-spinner-active-indicator-color: #{$color-value};
       }
-    }
 
-    // icon buttons
-    &.mat-mdc-icon-button.dbx-default {
-      --mat-icon-button-icon-color: var(--dbx-button-icon-color, currentColor);
-      color: var(--mat-icon-button-icon-color);
-    }
+      // flat buttons
+      &.mat-mdc-unelevated-button {
+        background: var(--mat-button-filled-container-color);
 
-    &.mat-mdc-icon-button:not(.dbx-default) {
-      background: none;
+        --mat-button-filled-container-color: #{$color-value};
+        --mat-button-filled-label-text-color: #{$contrast-value};
+        --mat-button-filled-state-layer-color: #{$contrast-value};
+        --mat-button-filled-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
 
-      --mat-icon-button-icon-color: var(--dbx-button-icon-color, #{$color-value});
-      --mat-icon-button-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
-      --mat-icon-button-state-layer-color: #{$color-value};
-    }
-
-    // tonal buttons
-    &.mat-mdc-tonal-button.dbx-default {
-      color: var(--mat-button-tonal-label-text-color, var(--mat-sys-primary));
-      background: rgb(from var(--mat-button-tonal-label-text-color) r g b / calc(alpha * 0.06));
-    }
+        &.mat-mdc-button-disabled {
+          background-color: var(--mat-button-protected-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent));
+        }
+      }
 
-    &.mat-mdc-tonal-button:not(.dbx-default) {
-      background: rgb(from #{$color-value} r g b / calc(alpha * 0.12));
+      // icon buttons
+      &.mat-mdc-icon-button {
+        background: none;
 
-      --mat-button-tonal-container-color: color-mix(in srgb, #{$color-value} 12%, transparent);
-      --mat-button-tonal-label-text-color: #{$contrast-value};
-      --mat-button-tonal-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
-      --mat-button-tonal-state-layer-color: #{$contrast-value};
-    }
+        --mat-icon-button-icon-color: var(--dbx-button-icon-color, #{$color-value});
+        --mat-icon-button-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
+        --mat-icon-button-state-layer-color: #{$color-value};
+      }
 
-    &.dbx-default.mat-mdc-button-disabled {
-      &.mat-mdc-raised-button,
-      &.mat-mdc-unelevated-button,
-      &.mat-mdc-outlined-button,
+      // tonal buttons
       &.mat-mdc-tonal-button {
-        color: var(--mat-button-text-disabled-label-text-color, var(--mat-sys-on-surface));
+        background: rgb(from #{$color-value} r g b / calc(alpha * 0.12));
+
+        --mat-button-tonal-container-color: color-mix(in srgb, #{$color-value} 12%, transparent);
+        --mat-button-tonal-label-text-color: #{$contrast-value};
+        --mat-button-tonal-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
+        --mat-button-tonal-state-layer-color: #{$contrast-value};
       }
     }
   }

package/lib/extension/pdf/_pdf.scss

@@ -7,7 +7,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-top: 12px;
+    margin-top: var(--dbx-padding-3);
   }
 
   .dbx-pdf-merge-editor-size-warning,
@@ -17,7 +17,7 @@
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
-    margin-top: 12px;
+    margin-top: var(--dbx-padding-3);
     border-radius: var(--mat-sys-corner-small);
     font: var(--mat-sys-body-medium);
   }
@@ -46,7 +46,7 @@
   }
 
   .dbx-pdf-merge-editor-file-upload-header:not(:empty) {
-    margin-bottom: 6px;
+    margin-bottom: var(--dbx-padding-2);
   }
 
   .dbx-pdf-merge-editor-file-upload-label {
@@ -57,7 +57,7 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
-    margin-top: 6px;
+    margin-top: var(--dbx-padding-2);
   }
 
   .dbx-pdf-preview-frame {
@@ -120,7 +120,7 @@
     border-radius: var(--mat-sys-corner-extra-small);
     background-color: var(--mat-sys-secondary-container);
     color: var(--mat-sys-on-secondary-container);
-    font-size: 11px;
+    font-size: var(--mat-sys-label-small-size);
   }
 
   .dbx-pdf-merge-entry-encrypted-chip {

package/lib/extension/table/_table.scss

@@ -7,7 +7,7 @@
 @mixin core() {
   .dbx-table-view {
     .dbx-table-view-table-wrapper {
-      max-height: 600px;
+      max-height: var(--dbx-table-view-max-height, 600px);
       overflow: auto;
     }
 
@@ -45,7 +45,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-app-outline, rgba(0, 0, 0, 0.12)));
+    border-top-color: var(--mat-table-row-item-outline-color, var(--mat-sys-outline-variant));
     border-top-width: var(--mat-table-row-item-outline-width, 1px);
     border-top-style: solid;
   }

package/lib/interaction/detach/_detach.scss

@@ -5,7 +5,6 @@ $dbx-detach-controls-height: 33px;
 $dbx-detach-content-padding: 8px;
 $dbx-detach-content-padding-top: 2px;
 $dbx-detach-controls-vertical-padding: 4px;
-$dbx-detach-border-radius: 4px;
 
 // MARK: Mixin
 @mixin core() {
@@ -29,7 +28,7 @@ $dbx-detach-border-radius: 4px;
     display: flex;
     align-items: center;
     padding: $dbx-detach-controls-vertical-padding $dbx-detach-content-padding;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
     box-sizing: border-box;
     color: var(--mat-sys-on-surface);
     background: var(--mat-sys-surface);
@@ -52,6 +51,27 @@ $dbx-detach-border-radius: 4px;
   .dbx-detach-overlay {
     height: 100%;
     overflow: hidden;
+
+    // The moved component host element (an arbitrary tag that defaults to inline) needs to fill
+    // the fixed-height overlay pane so its content chain can establish a flex column that scrolls.
+    > * {
+      display: block;
+      height: 100%;
+    }
+
+    // Inside the fixed-height overlay (vs. the viewport-based in-page mode), the content fills the
+    // pane and the container flexes to scroll within it rather than against the viewport height.
+    .dbx-detach-content {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .dbx-detach-content-container {
+      flex: 1 1 auto;
+      min-height: 0;
+      max-height: none;
+    }
   }
 
   .dbx-detach-overlay-host {

package/lib/interaction/dialog/_dialog.scss

@@ -2,10 +2,6 @@
 
 // MARK: Variables
 $max-dialog-width: 90vw;
-$mat-dialog-close-icon-size: 48px;
-$mat-dialog-close-icon-half-size: $mat-dialog-close-icon-size / 2;
-$mat-dialog-container-padding: 18px;
-$mat-dialog-container-close-button-padding: $mat-dialog-container-padding;
 $dbx-dialog-content-close-edge-padding: 4px;
 $dbx-dialog-content-close-top-offset: $dbx-dialog-content-close-edge-padding;
 $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
@@ -23,7 +19,7 @@ $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
   /// @scope component-class
   .dbx-dialog-content {
     display: block;
-    padding: $mat-dialog-container-padding;
+    padding: var(--dbx-dialog-content-padding, var(--dbx-padding-4));
   }
 
   .dbx-dialog-content-with-header {
@@ -32,7 +28,7 @@ $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
     $dbx-dialog-content-header-padding: 18px;
 
     .dbx-dialog-content-close.dbx-dialog-content-close-padding {
-      padding-bottom: 12px;
+      padding-bottom: var(--dbx-padding-3);
     }
 
     .dbx-dialog-content-header {
@@ -79,7 +75,7 @@ $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
   }
 
   .dbx-dialog-content-close.dbx-dialog-content-close-padding {
-    padding-bottom: $mat-dialog-container-close-button-padding;
+    padding-bottom: var(--dbx-dialog-content-padding, var(--dbx-padding-4));
 
     > .dbx-dialog-content-close-button {
       top: $dbx-dialog-content-close-edge-padding;
@@ -98,7 +94,7 @@ $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
   }
 
   .dbx-dialog-content-100.dbx-dialog-content-100-padded-closed.dbx-dialog-content {
-    height: calc(100% - #{$mat-dialog-container-close-button-padding + ($mat-dialog-container-padding * 2)});
+    height: calc(100% - (var(--dbx-dialog-content-padding, var(--dbx-padding-4)) * 3));
   }
 }
 

package/lib/interaction/popup/_popup.scss

@@ -7,7 +7,6 @@ $dbx-popup-content-padding-top: 2px;
 
 $dbx-popup-container-margin: 16px;
 $dbx-popup-controls-vertical-padding: 4px;
-$dbx-popup-border-radius: 4px;
 
 // MARK: Mixin
 @mixin core() {
@@ -36,7 +35,7 @@ $dbx-popup-border-radius: 4px;
     display: flex;
     align-items: center;
     padding: $dbx-popup-controls-vertical-padding $dbx-popup-content-padding;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
     box-sizing: border-box;
   }
 

package/lib/interaction/prompt/_prompt.scss

@@ -13,13 +13,18 @@ $dbx-popup-controls-height: 33px;
   }
 
   /// @dbx-utility prompt-box
-  /// @intent centered prompt panel — auto-margined max-width box with a 40px inset (compose with `.elevate` to lift it with elevation 2)
+  /// @intent centered prompt panel — auto-margined max-width box with a 40px inset (override via `--dbx-prompt-box-padding`) and a "medium" corner radius (override via `--dbx-prompt-box-border-radius`); compose with `.elevate` to lift it with elevation 2
   /// @role layout
   /// @see-also content-box, content-elevate
   .dbx-prompt-box {
     margin: auto;
-    padding: 40px;
+    padding: var(--dbx-prompt-box-padding, 40px);
     max-width: $box-max-width;
+    // Visible via the `.elevate` shadow (default) or any app-supplied background;
+    // the box itself intentionally has no background. Deliberately NOT chained
+    // through `--mat-dialog-container-shape` — a prompt box is a page surface,
+    // not a dialog.
+    border-radius: var(--dbx-prompt-box-border-radius, var(--mat-sys-corner-medium, 12px));
 
     &.elevate {
       @include theming.elevation(2);

package/lib/layout/avatar/_avatar.scss

@@ -1,4 +1,5 @@
 @use '../../style/theming';
+@use '../style/style';
 
 // MARK: Variables
 $icon-to-avatar-size-ratio: 0.65;
@@ -109,6 +110,13 @@ $initials-to-avatar-size-ratio: 0.4;
     user-select: none;
   }
 
+  // `<dbx-avatar-view>` applies a curated `[dbxColor]` config to the initials
+  // surface; paint its background/text from those tokens. The `:not(.dbx-default)`
+  // guard keeps a blank-name (uncolored) avatar from painting.
+  .dbx-avatar-view-initials.dbx-color:not(.dbx-default) {
+    @include style.dbx-color-surface();
+  }
+
   /// @dbx-utility avatar-view-circle
   /// @intent circle modifier for `.dbx-avatar-view` — `border-radius: 50%`
   /// @role layout

package/lib/layout/bar/_bar.scss

@@ -1,4 +1,5 @@
 @use '../../style/theming';
+@use '../style/style';
 
 // MARK: Variables
 $pagebar-height-var: theming.$page-navbar-height-var;
@@ -36,6 +37,33 @@ $bar-fixed-height: 40px;
     color: var(--mat-sys-on-surface);
   }
 
+  // Colored bar surface. `[dbxColor]` on the host provides the tokens + the
+  // `.dbx-color` marker; the bar paints from them here, scoped on the marker so
+  // a bar nested inside a `[dbxColor]` 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 (no
+  // `--dbx-bg-color-current`), so the guard keeps an uncolored bar from painting.
+  .dbx-bar.dbx-color:not(.dbx-default) {
+    @include style.dbx-color-surface();
+
+    &.dbx-color-tonal {
+      color: var(#{theming.$dbx-bg-color-var});
+    }
+  }
+
+  // `<dbx-bar-header>` forwards a host-level `[dbxColor]` down to its inner
+  // `<dbx-bar>`: the `.dbx-color` marker + tokens land on the header host (tokens
+  // inherit), so paint the inner bar here. Scoped on the header marker so only a
+  // directly-colored header paints.
+  .dbx-bar-header.dbx-color:not(.dbx-default) .dbx-bar {
+    @include style.dbx-color-surface();
+  }
+
+  .dbx-bar-header.dbx-color.dbx-color-tonal:not(.dbx-default) .dbx-bar {
+    color: var(#{theming.$dbx-bg-color-var});
+  }
+
   /// @dbx-utility bar-background
   /// @intent paint a `.dbx-bar` with the `--mat-sys-surface-container` background
   /// @role layout
@@ -55,9 +83,20 @@ $bar-fixed-height: 40px;
   }
 
   // MARK: Bar Colors
-  // Color classes applied by DbxPagebarComponent based on the color input.
+  // Colored pagebar surface. `[dbxColor]` on the `<dbx-pagebar>` /
+  // `<dbx-sidenav-pagebar>` host provides the tokens + the `.dbx-color` marker
+  // (tokens inherit); map the inner `mat-toolbar`'s Material color tokens to them.
+  // Scoped on the host marker so only a directly-colored pagebar paints.
+  dbx-pagebar.dbx-color mat-toolbar,
+  dbx-sidenav-pagebar.dbx-color mat-toolbar {
+    --mat-toolbar-container-background-color: color-mix(in srgb, var(#{theming.$dbx-bg-color-var}) var(#{theming.$dbx-bg-tone-var}, 100%), transparent);
+    --mat-toolbar-container-text-color: var(#{theming.$dbx-color-var});
+  }
+
+  // DEPRECATED back-compat: the `.dbx-bar-{color}` classes were previously applied
+  // by `DbxPagebarComponent`'s `color` input (now removed in favor of `[dbxColor]`).
+  // Kept for downstream templates that still apply them directly.
   // Uses Material toolbar CSS tokens for background and text color.
-  // Background uses color-mix with surface-container for consistent dark-mode contrast.
   /// @dbx-utility bar-primary
   /// @intent paint a `mat-toolbar`/`.dbx-pagebar` with the `--dbx-primary-color` palette via Material's toolbar tokens
   /// @role layout