@dereekb/dbx-web 13.11.17 → 13.12.0

package/lib/extension/pdf/_pdf.scss

@@ -10,6 +10,27 @@
     margin-top: 12px;
   }
 
+  .dbx-pdf-merge-editor-size-warning,
+  .dbx-pdf-merge-editor-size-error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    margin-top: 12px;
+    border-radius: var(--mat-sys-corner-small);
+    font: var(--mat-sys-body-medium);
+  }
+
+  .dbx-pdf-merge-editor-size-warning {
+    background-color: var(--mat-sys-tertiary-container);
+    color: var(--mat-sys-on-tertiary-container);
+  }
+
+  .dbx-pdf-merge-editor-size-error {
+    background-color: var(--mat-sys-error-container);
+    color: var(--mat-sys-on-error-container);
+  }
+
   // Slot upload
   .dbx-pdf-merge-editor-file-upload-header {
     display: flex;
@@ -85,6 +106,15 @@
   .dbx-pdf-merge-entry-meta {
     display: flex;
     gap: 8px;
+    align-items: center;
+  }
+
+  .dbx-pdf-merge-entry-compression {
+    padding: 1px 6px;
+    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;
   }
 
   // CDK animations

package/lib/layout/card/_card.scss

@@ -4,6 +4,42 @@
 
 // MARK: Mixin
 @mixin core() {
+  /// @dbx-utility mat-card-dbx-color
+  /// @intent re-emits the dbx-color background paint at higher specificity than MDC's `.mat-mdc-card` `background-color` rule, so a host-level `[dbxColor]` on `<mat-card>` shows through every appearance variant (elevated / outlined / filled). Tonal opacity is honoured via the existing `--dbx-color-bg-tone` channel; in tonal mode the text color flips to the vibrant theme color so contrast survives the light wash.
+  /// @role color
+  /// @see-also color, color-bg, color-tonal
+  mat-card.dbx-color {
+    background: color-mix(in srgb, var(#{theming.$dbx-bg-color-var}) var(#{theming.$dbx-bg-tone-var}, 100%), transparent);
+    color: var(#{theming.$dbx-color-var});
+
+    &.dbx-color-tonal {
+      color: var(#{theming.$dbx-bg-color-var});
+    }
+  }
+
+  /// @dbx-utility card-banner
+  /// @intent banner-style `<mat-card>` — pair with `[dbxColor]` (+ `[dbxColorTone]`) for the tonal surface. Drop `<mat-card-header>` entirely; put the icon + `<mat-card-title>` row inside `<mat-card-content>` via a `.dbx-card-banner-header` child, and the action buttons inside `<mat-card-footer>`.
+  /// @role layout
+  /// @see-also color, color-tonal, button-wrap-group
+  .dbx-card-banner {
+    > mat-card-content > .dbx-card-banner-header {
+      display: flex;
+      align-items: center;
+      gap: var(--dbx-padding-3);
+
+      > dbx-icon-tile {
+        flex-shrink: 0;
+      }
+    }
+
+    > mat-card-footer {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--dbx-padding-2);
+      padding: var(--dbx-padding-2) var(--dbx-padding-3) var(--dbx-padding-3);
+    }
+  }
 }
 
 @mixin theme($theme-config) {

package/lib/layout/content/_content.scss

@@ -88,6 +88,11 @@ $dbx-border-opacity-default: 20%;
     overflow-y: scroll;
   }
 
+  /// @dbx-utility content-pit-floating-button
+  /// @intent floats a button (typically a `dbx-button`) to the top-right of a `.dbx-content-pit` using `position: sticky` so it stays visible while the pit scrolls — used for inline pit actions like expand/collapse or copy
+  /// @role layout
+  /// @parent content-pit
+  /// @see-also dbx-content-pit, dbx-content-pit-scrollable
   .dbx-content-pit-floating-button {
     float: right;
     position: sticky;
@@ -123,6 +128,10 @@ $dbx-border-opacity-default: 20%;
     height: 100% !important;
   }
 
+  /// @dbx-utility content-scroll-lock
+  /// @intent locks a region to `height: 100%` with `overflow: hidden` so its children can scroll independently of the page — wrap potentially-infinite-height content (calendars, virtual lists) and let the inner element handle its own `overflow: scroll`
+  /// @role layout
+  /// @see-also dbx-content, dbx-content-page, dbx-scroll-content
   .dbx-content-scroll-lock {
     height: 100%;
     overflow: hidden;
@@ -200,6 +209,10 @@ $dbx-border-opacity-default: 20%;
     padding: $content-container-padding-small-screen;
   }
 
+  /// @dbx-utility scroll-content
+  /// @intent adds a small bottom padding (~42px) to a scrollable content region so the last item doesn't sit flush against the bottom edge of the viewport — apply to the scrolling element itself (typically a `.dbx-content-container` rendered inside a `dbx-two-column-right`, `dbx-content-page`, or any host whose body overflows)
+  /// @role spacing
+  /// @see-also dbx-content-container, dbx-content-page, dbx-content-pit-scrollable
   .dbx-scroll-content {
     padding-bottom: $scroll-content-bottom-padding;
   }

package/package.json

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