@dereekb/dbx-form 13.22.0 → 13.24.0

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

@@ -73,6 +73,7 @@
 
     .dbx-form-repeat-array-field > dbx-chip {
       position: absolute;
+      z-index: 1;
     }
 
     .dbx-form-repeat-array-footer {
@@ -88,6 +89,7 @@
     // 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.
+    position: relative; // containing block for the absolutely-positioned index chip
     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)));
   }

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

@@ -48,14 +48,18 @@ $dbx-forge-form-field-slider-thumb-margin: 22px;
     width: calc(100% - #{$dbx-forge-form-field-slider-thumb-margin * 2}) !important;
   }
 
-  // List selection field inside the form-field wrapper: reduce padding so the list
-  // items render at full width within the outlined border. Uses !important to
-  // override the component's scoped inline styles (ViewEncapsulation.Emulated
-  // adds attribute selectors that raise specificity above global rules).
+  // List selection field inside the form-field wrapper: inset the list from the
+  // outlined border on the sides so the card-styled items (12px corner radius)
+  // don't clip the rounded outline. The bottom keeps a 1px inset so the scrolled
+  // list background doesn't bleed over the lower border, and the top keeps the
+  // wrapper's default 16px gap below the notch label. Tune the side inset via
+  // --dbx-forge-list-item-field-inline-padding. Uses !important to override the
+  // component's scoped inline styles (ViewEncapsulation.Emulated adds attribute
+  // selectors that raise specificity above global rules).
   dbx-forge-form-field-wrapper .dbx-forge-form-field-content:has(dbx-forge-list-selection-field) {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    padding-bottom: 0 !important;
+    padding-left: var(--dbx-forge-list-item-field-inline-padding, var(--dbx-padding-3)) !important;
+    padding-right: var(--dbx-forge-list-item-field-inline-padding, var(--dbx-padding-3)) !important;
+    padding-bottom: 1px !important;
   }
 
   // Boolean fields (mat-checkbox / mat-slide-toggle): make the whole content
@@ -121,13 +125,12 @@ $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 {
+    // Per-item index number: render it as a compact, centered badge — a circle for a single digit,
+    // a pill once it spills to double digits. The chip is a direct child of the field div (placed
+    // before the bar so it overlays the top-left corner via `position: absolute`). Size via
+    // --dbx-form-repeat-array-index-size.
+    > .dbx-chip {
       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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "13.22.0",
+  "version": "13.24.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.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",
+    "@dereekb/date": "13.24.0",
+    "@dereekb/dbx-core": "13.24.0",
+    "@dereekb/dbx-web": "13.24.0",
+    "@dereekb/model": "13.24.0",
+    "@dereekb/rxjs": "13.24.0",
+    "@dereekb/util": "13.24.0",
+    "@dereekb/vitest": "13.24.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",