@dereekb/dbx-form 13.20.0 → 13.22.0

package/lib/forge/field/texteditor/_texteditor.scss

@@ -19,15 +19,32 @@
 
   .dbx-texteditor-field {
     .NgxEditor {
-      background: transparent;
+      // Drive ngx-editor's own background token to the M3 system background so the editing "paper"
+      // tracks the theme (and dark mode) instead of ngx-editor's default white.
+      --ngx-editor-background-color: var(--mat-sys-background);
+      padding-top: var(--dbx-texteditor-field-padding-top, var(--dbx-padding-3));
       color: var(--mat-sys-on-surface);
-      border-color: var(--mat-sys-outline);
+      border-color: var(--dbx-texteditor-field-bg, color-mix(in srgb, var(--dbx-bg-color-current, var(--mat-sys-primary)) var(--dbx-texteditor-field-tone, 8%), color-mix(in srgb, var(--mat-sys-surface-dim) var(--dbx-texteditor-field-dim, 45%), var(--mat-sys-surface))));
+      border-radius: var(--dbx-texteditor-field-container-shape, var(--dbx-corners-border-radius, var(--mat-sys-corner-large)));
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
 
     .NgxEditor__MenuBar {
-      background: var(--mat-sys-background);
+      // The formatting toolbar is the filled footer of the sunken field "card": it carries the same
+      // dim tonal --dbx-texteditor-field surface as the editor body above (a wash of the active
+      // dbxColor over a lightened surface-dim), rounded only on its bottom corners so the two join
+      // into one container, plus a soft --mat-sys-level1 lift shadow (replacing the former Material
+      // elevation(2) shadow). Tuned via the shared --dbx-texteditor-field-* tokens.
+
       color: var(--mat-sys-on-surface);
-      @include theming.elevation(2);
+
+      padding: var(--dbx-texteditor-field-padding, var(--dbx-padding-2));
+      border-radius: var(--dbx-texteditor-field-container-shape, var(--dbx-corners-border-radius, var(--mat-sys-corner-large)));
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      background: var(--dbx-texteditor-field-bg, color-mix(in srgb, var(--dbx-bg-color-current, var(--mat-sys-primary)) var(--dbx-texteditor-field-tone, 8%), color-mix(in srgb, var(--mat-sys-surface-dim) var(--dbx-texteditor-field-dim, 45%), var(--mat-sys-surface))));
+      box-shadow: var(--dbx-texteditor-field-shadow, var(--mat-sys-level1));
 
       svg {
         fill: var(--mat-sys-on-surface);

package/lib/forge/field/value/array/_array.scss

@@ -18,10 +18,34 @@
   }
 
   .dbx-form-repeat-array {
+    // Encapsulating "tray" that groups the whole repeat-array (items + footer) into one surface —
+    // the second, outer elevation. M3 nested elevation, the dim/bright counterpart to the bright
+    // item cards: the tray sits on a tonal wash of the active dbxColor (--dbx-bg-color-current,
+    // primary by default, driven by an ancestor/host [dbxColor]) over a lightened `surface-dim`
+    // base. `surface-dim` is the dimmest M3 surface — the opposite end of the dim/bright pair from
+    // the items' `surface-bright`, the one M3 pairing with stable light/dark luminance ordering — but
+    // pure surface-dim reads too heavy as a large tray, so the base is blended toward the normal
+    // `surface` (--dbx-form-repeat-array-dim, the surface-dim share; lower = lighter). It stays ≤
+    // `surface` < the items' `surface-bright`, so the bright item cards reliably pop within the tray
+    // in both themes. A soft lift shadow raises the whole group off the page. Override
+    // --dbx-form-repeat-array-bg to replace the tray surface, --dbx-form-repeat-array-tone (percentage)
+    // to tune the color wash, --dbx-form-repeat-array-dim (percentage) to tune the base darkness,
+    // --dbx-form-repeat-array-shadow to retune/remove (`none`) the lift,
+    // --dbx-form-repeat-array-container-shape for the corner radius, or
+    // --dbx-form-repeat-array-padding-vertical / --dbx-form-repeat-array-padding-horizontal for the
+    // inset around the items.
     margin-bottom: 8px;
+    padding: var(--dbx-form-repeat-array-padding-vertical, var(--dbx-padding-3)) var(--dbx-form-repeat-array-padding-horizontal, var(--dbx-padding-2));
+    border-radius: var(--dbx-form-repeat-array-container-shape, var(--dbx-corners-border-radius, var(--mat-sys-corner-large)));
+    background: var(--dbx-form-repeat-array-bg, color-mix(in srgb, var(--dbx-bg-color-current, var(--mat-sys-primary)) var(--dbx-form-repeat-array-tone, 8%), color-mix(in srgb, var(--mat-sys-surface-dim) var(--dbx-form-repeat-array-dim, 45%), var(--mat-sys-surface))));
+    box-shadow: var(--dbx-form-repeat-array-shadow, var(--mat-sys-level1));
 
     .dbx-form-repeat-array-field {
-      @include theming.elevation(1);
+      // M3 elevation: each repeated array item reads as a raised card — a brighter tonal surface
+      // (set in the base rule below) plus this soft lift shadow for protection against the
+      // background — replacing the former Material elevation(1) shadow. Override
+      // --dbx-form-repeat-array-field-elevate-shadow to retune/remove (`none`) the shadow.
+      box-shadow: var(--dbx-form-repeat-array-field-elevate-shadow, var(--mat-sys-level1));
 
       h4 {
         margin: 0;
@@ -34,7 +58,12 @@
 
       padding: 0;
       margin-bottom: 4px;
-      border-radius: var(--dbx-form-repeat-array-field-container-shape, var(--mat-sys-corner-medium));
+      border-radius: var(--dbx-form-repeat-array-field-container-shape, var(--dbx-corners-border-radius, var(--mat-sys-corner-medium)));
+
+      .dbx-form-repeat-array-bar {
+        padding-top: 6px;
+        padding-left: 6px;
+      }
 
       .dbx-form-repeat-array-field-content {
         display: block;
@@ -42,14 +71,25 @@
       }
     }
 
+    .dbx-form-repeat-array-field > dbx-chip {
+      position: absolute;
+    }
+
     .dbx-form-repeat-array-footer {
-      margin-top: var(--dbx-padding-2);
+      padding: var(--dbx-form-repeat-array-padding-vertical, var(--dbx-padding-3));
+      padding-bottom: 0;
     }
   }
 
   .dbx-form-repeat-array-field {
-    background: var(--mat-sys-surface);
-    border: 4px solid var(--mat-sys-surface);
+    // Elevated card surface (M3 color-first elevation): a low-opacity tonal wash of the active
+    // dbxColor (--dbx-bg-color-current, primary by default, driven by an ancestor/host [dbxColor])
+    // over surface-bright, so the card reads as raised by color and not a flat grey. The 4px frame
+    // uses the same surface so the card stays one continuous tone. Override
+    // --dbx-form-repeat-array-field-elevate-bg to replace the surface outright, or
+    // --dbx-form-repeat-array-field-elevate-tone (percentage) to tune the wash strength.
+    background: var(--dbx-form-repeat-array-field-elevate-bg, color-mix(in srgb, var(--dbx-bg-color-current, var(--mat-sys-primary)) var(--dbx-form-repeat-array-field-elevate-tone, 8%), var(--mat-sys-surface-bright)));
+    border: 4px solid var(--dbx-form-repeat-array-field-elevate-bg, color-mix(in srgb, var(--dbx-bg-color-current, var(--mat-sys-primary)) var(--dbx-form-repeat-array-field-elevate-tone, 8%), var(--mat-sys-surface-bright)));
   }
 
   .dbx-form-repeat-array-drag-button.mdc-button > .mat-icon {

package/lib/forge/field/wrapper/_wrapper.scss

@@ -121,8 +121,18 @@ $dbx-forge-form-field-slider-thumb-margin: 22px;
   }
 
   .dbx-form-repeat-array-field {
+    // Per-item index number: render it as a compact, centered badge that lines up with the item
+    // label — a circle for a single digit, a pill once it spills to double digits — instead of the
+    // default lopsided small-chip rounded rectangle. Square it off (min-width == min-height) and
+    // center the digit so it reads as a tidy step badge. Size via --dbx-form-repeat-array-index-size.
     .dbx-form-repeat-array-bar .dbx-chip {
-      margin-right: 3px;
+      box-sizing: border-box;
+      margin-right: 6px;
+      min-width: var(--dbx-form-repeat-array-index-size, 22px);
+      min-height: var(--dbx-form-repeat-array-index-size, 22px);
+      padding: 0 6px;
+      justify-content: center;
+      border-radius: var(--mat-sys-corner-full, 999px);
     }
   }
 }

package/lib/style/_theming.scss

@@ -1,5 +1,3 @@
-@forward '@angular/material' show elevation;
-
 @forward './config';
 @forward './variables';
 @forward './mixin';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "13.20.0",
+  "version": "13.22.0",
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -14,13 +14,13 @@
     "@angular/material-date-fns-adapter": "21.2.9",
     "@angular/platform-browser": "21.2.11",
     "@bobbyquantum/ngx-editor": "21.0.0",
-    "@dereekb/date": "13.20.0",
-    "@dereekb/dbx-core": "13.20.0",
-    "@dereekb/dbx-web": "13.20.0",
-    "@dereekb/model": "13.20.0",
-    "@dereekb/rxjs": "13.20.0",
-    "@dereekb/util": "13.20.0",
-    "@dereekb/vitest": "13.20.0",
+    "@dereekb/date": "13.22.0",
+    "@dereekb/dbx-core": "13.22.0",
+    "@dereekb/dbx-web": "13.22.0",
+    "@dereekb/model": "13.22.0",
+    "@dereekb/rxjs": "13.22.0",
+    "@dereekb/util": "13.22.0",
+    "@dereekb/vitest": "13.22.0",
     "@ng-forge/dynamic-forms": "0.10.0-next.4",
     "@ng-forge/dynamic-forms-material": "0.10.0-next.4",
     "@ng-web-apis/geolocation": "^5.2.0",