@dereekb/dbx-form 13.16.0 → 13.18.0

package/lib/extension/calendar/_calendar.scss

@@ -44,7 +44,7 @@ $cal-cell-min-width: 20px;
 
     // Remove padding from form
     .mat-mdc-form-field-wrapper {
-      padding-bottom: 6px;
+      padding-bottom: var(--dbx-padding-2);
     }
 
     .mat-mdc-form-field-infix {
@@ -75,13 +75,13 @@ $cal-cell-min-width: 20px;
       margin-right: 3px;
       font-size: 0.8em;
       font-weight: bold;
-      border-radius: 25px;
+      border-radius: var(--mat-sys-corner-full);
     }
   }
 
   .dbx-schedule-selection-calendar-date-range-field-content {
     width: 100%;
-    padding-right: 12px;
+    padding-right: var(--dbx-padding-3);
   }
 
   .dbx-schedule-selection-calendar-cell {

package/lib/forge/field/_field.scss

@@ -1,12 +1,27 @@
 @use './selection/selection';
+@use './value/array/array';
+@use './value/phone/phone';
+@use './value/date/date';
+@use './value/duration/duration';
+@use './texteditor/texteditor';
 @use './wrapper/wrapper';
 
 @mixin all-field-core() {
   @include selection.all-selection-core();
+  @include array.core();
+  @include phone.core();
+  @include date.core();
+  @include duration.core();
+  @include texteditor.core();
   @include wrapper.core();
 }
 
 @mixin all-field-theme($theme-config) {
   @include selection.all-selection-theme($theme-config);
+  @include array.theme($theme-config);
+  @include phone.theme($theme-config);
+  @include date.theme($theme-config);
+  @include duration.theme($theme-config);
+  @include texteditor.theme($theme-config);
   @include wrapper.theme($theme-config);
 }

package/lib/forge/field/selection/pickable/_pickable.scss

@@ -1,15 +1,20 @@
 // MARK: Mixin
 @mixin core() {
-  // Container margin and chip list max-height are defined in formly's _pickable.scss
-  // and apply to both formly and forge contexts (same class names).
-  //
-  // Bare input styling is provided by the .dbx-forge-bare-input class
-  // applied directly in the pickable templates.
+  // Shared pickable styles (migrated from the removed formly _pickable.scss). Bare input styling
+  // is provided by the .dbx-forge-bare-input class applied directly in the pickable templates.
+  .dbx-pickable-item-field-filter {
+    margin-bottom: 4px;
+  }
+
+  .dbx-pickable-item-field-list-content {
+    max-height: var(--dbx-pickable-item-field-list-content-max-height, 400px);
+    overflow: auto;
+  }
 
   // List variant styling
   .dbx-pickable-item-field-list {
     .dbx-pickable-item-field-list-content {
-      max-height: 300px;
+      max-height: var(--dbx-pickable-item-field-list-content-max-height, 300px);
       overflow-y: auto;
     }
 

package/lib/forge/field/selection/searchable/_searchable.scss

@@ -16,10 +16,78 @@
 
   // Bare input styling is provided by the .dbx-forge-bare-input class
   // applied directly in the searchable templates.
+
+  // Shared searchable styles (migrated from the removed formly _searchable.scss). These class
+  // names are produced by the searchable autocomplete/display components (now in
+  // field/selection/searchable) and the searchable field templates.
+  .dbx-searchable-text-field-value {
+    width: 100%;
+  }
+
+  .dbx-searchable-text-field-autocomplete > .mat-mdc-option > .mdc-list-item__primary-text {
+    width: 100%;
+  }
+
+  // When a mat-option wraps a dbx-anchor, the anchor must cover the entire option surface so that
+  // every click lands inside the anchor's child click target (where the override click handler is
+  // attached). Otherwise clicks on the mat-option's padding/edge land on mat-option itself,
+  // bypassing dbx-anchor's onClick handler — selection still fires (via mat-option's own click
+  // listener) but the anchor click is silently dropped. Inner padding is provided by
+  // .dbx-default-searchable-field-display.
   //
-  // The show/hide pattern (.dbx-searchable-text-field-has-value) and
-  // .dbx-searchable-text-field-value width are defined in formly's _searchable.scss
-  // and apply to both formly and forge contexts (same class names).
+  // The .mdc-list-item compound is needed to outweigh Material's own .mat-mdc-option.mdc-list-item
+  // rule (which sets align-items: center).
+  .mat-mdc-option.mdc-list-item.dbx-searchable-field-anchor-option {
+    padding: 0;
+    align-items: stretch;
+
+    > .mdc-list-item__primary-text {
+      width: 100%;
+      margin: 0;
+      display: flex;
+      align-items: stretch;
+    }
+
+    dbx-searchable-field-autocomplete-item,
+    dbx-anchor,
+    .dbx-anchor-a {
+      display: flex;
+      align-items: stretch;
+      flex: 1;
+      width: 100%;
+    }
+
+    .dbx-anchor-a > span {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      width: 100%;
+    }
+  }
+
+  .dbx-chip-input-error {
+    display: block;
+    font-size: var(--mat-sys-body-small-size);
+    padding: 4px 0 0;
+    color: var(--mat-sys-error);
+  }
+
+  .dbx-default-searchable-field-display {
+    padding: 0 16px;
+  }
+
+  .dbx-searchable-text-field-has-value.dbx-searchable-text-field-show-value {
+    .dbx-searchable-text-field-value {
+      margin-bottom: -6px;
+    }
+
+    // hide without clearing display, which will prevent the input from being clickable.
+    .dbx-searchable-text-field-input {
+      margin-top: 0;
+      height: 0;
+      opacity: 0;
+    }
+  }
 
   // Reveal the search input when the ancestor form-field wrapper has focus.
   // The forge wrapper uses :focus-within instead of the .mat-focused class.

package/lib/forge/field/selection/sourceselect/_sourceselect.scss

@@ -6,7 +6,7 @@
     left: 0px;
     right: 0px;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--mat-sys-corner-full);
   }
 
   dbx-forge-source-select-field {

package/lib/{formly → forge}/field/texteditor/_texteditor.scss

@@ -6,14 +6,14 @@
 @mixin core() {
   .dbx-texteditor-field-compact {
     .dbx-texteditor-field-input {
-      min-height: 120px;
-      height: 300px;
+      min-height: var(--dbx-texteditor-field-compact-min-height, 120px);
+      height: var(--dbx-texteditor-field-compact-height, 300px);
       max-height: calc(var(--vh100) * 0.5);
     }
   }
 
   .dbx-texteditor-field-input {
-    max-height: 400px;
+    max-height: var(--dbx-texteditor-field-max-height, 400px);
     overflow: auto;
   }
 
@@ -52,6 +52,10 @@
       color: var(--mat-sys-on-surface);
     }
 
+    .NgxEditor__MenuBar svg {
+      fill: var(--mat-sys-outline);
+    }
+
     .NgxEditor__Dropdown.NgxEditor__Dropdown--Selected .NgxEditor__Dropdown--Text {
       color: var(--mat-sys-on-surface);
     }

package/lib/{formly → forge}/field/value/array/_array.scss

@@ -5,8 +5,8 @@
 // MARK: Mixin
 @mixin core() {
   .dbx-form-repeat-array-drag-placeholder {
-    background: #ccc;
-    border: dotted 3px #999;
+    background: var(--mat-sys-surface-container-highest);
+    border: dotted 3px var(--mat-sys-outline);
     min-height: 100px;
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 
@@ -38,12 +38,12 @@
 
       .dbx-form-repeat-array-field-content {
         display: block;
-        padding: 6px;
+        padding: var(--dbx-padding-2);
       }
     }
 
     .dbx-form-repeat-array-footer {
-      margin-top: 6px;
+      margin-top: var(--dbx-padding-2);
     }
   }
 

package/lib/{formly → forge}/field/value/date/_date.scss

@@ -1,10 +1,6 @@
 @use '../../../../style/theming';
 
 // MARK: Variables
-$dbx-datetime-button-spacing: 6px;
-$dbx-datetime-date-and-time-spacing: 6px;
-$dbx-datetime-button-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 for the spacing between the date and time inputs
-$dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 for the spacing between the date and time inputs
 
 // MARK: Mixin
 @mixin core() {
@@ -38,12 +34,12 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
     width: 100%;
 
     .dbx-datetime-timezone {
-      padding: 0 6px;
+      padding: 0 var(--dbx-padding-2);
       pointer-events: none;
     }
 
     .dbx-datetime-timezone-button .mat-mdc-button {
-      font-size: 18px;
+      font-size: var(--mat-sys-title-medium-size);
     }
   }
 
@@ -68,7 +64,7 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
 
     &.add-time-button-full {
       width: 100%;
-      margin-bottom: 6px;
+      margin-bottom: var(--dbx-padding-2);
     }
   }
 
@@ -86,8 +82,8 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
     .mat-calendar,
     .dbx-fixeddaterange-field-input {
       margin: auto;
-      min-width: 240px;
-      max-width: 320px;
+      min-width: var(--dbx-fixeddaterange-field-min-width, 240px);
+      max-width: var(--dbx-fixeddaterange-field-max-width, 320px);
     }
   }
 

package/lib/{formly → forge}/field/value/duration/_duration.scss

@@ -15,7 +15,7 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    gap: 12px;
+    gap: var(--dbx-padding-3);
     padding: 16px 8px;
     height: 100%;
     box-sizing: border-box;
@@ -27,7 +27,7 @@
     align-items: center;
     min-width: 48px;
     gap: 8px;
-    border-radius: 8px;
+    border-radius: var(--mat-sys-corner-small);
     padding: 4px;
     outline: none;
 
@@ -38,16 +38,16 @@
   }
 
   .dbx-duration-picker-label {
-    font-size: 12px;
-    font-weight: 500;
+    font-size: var(--mat-sys-label-medium-size);
+    font-weight: var(--mat-sys-label-medium-weight);
     text-transform: uppercase;
-    opacity: 0.7;
+    color: var(--mat-sys-on-surface-variant);
     margin-bottom: 4px;
   }
 
   .dbx-duration-picker-value {
-    font-size: 18px;
-    font-weight: 500;
+    font-size: var(--mat-sys-title-medium-size);
+    font-weight: var(--mat-sys-title-medium-weight);
     min-height: 28px;
     display: flex;
     align-items: center;

package/lib/{formly → forge}/field/value/phone/_phone.scss

@@ -13,7 +13,7 @@ $country-selector-width: 85px !default;
   }
 
   .dbx-form-phone-field-phone-content button.country-selector {
-    opacity: 100;
+    opacity: 1;
     width: var(--dbx-phone-field-country-selector-width, #{$country-selector-width});
   }
 

package/lib/forge/preset/_preset.scss

@@ -76,7 +76,7 @@
       > .mat-mdc-form-field-flex > .mdc-notched-outline {
         .mdc-notched-outline__notch,
         .mdc-notched-outline__trailing {
-          border-bottom: var(--mdc-outlined-text-field-outline-width) solid;
+          border-bottom: var(--mat-form-field-outlined-outline-width, 1px) solid;
           border-radius: 0;
         }
       }
@@ -86,7 +86,7 @@
         > .mat-mdc-form-field-flex > .mdc-notched-outline {
           .mdc-notched-outline__notch,
           .mdc-notched-outline__trailing {
-            border-bottom-width: var(--mdc-outlined-text-field-focus-outline-width);
+            border-bottom-width: var(--mat-form-field-outlined-focus-outline-width, 2px);
           }
         }
       }
@@ -97,7 +97,7 @@
       > .dbx-forge-form-field-outline {
         .dbx-forge-form-field-outline-notch,
         .dbx-forge-form-field-outline-trailing {
-          border-bottom: var(--mdc-outlined-text-field-outline-width) solid;
+          border-bottom: var(--mat-form-field-outlined-outline-width, 1px) solid;
           border-radius: 0;
         }
       }
@@ -107,7 +107,7 @@
         > .dbx-forge-form-field-outline {
           .dbx-forge-form-field-outline-notch,
           .dbx-forge-form-field-outline-trailing {
-            border-bottom-width: var(--mdc-outlined-text-field-focus-outline-width);
+            border-bottom-width: var(--mat-form-field-outlined-focus-outline-width, 2px);
           }
         }
       }

package/lib/forge/style/_shared.scss

@@ -4,6 +4,15 @@
 //
 // Apply by adding the class directly to <input> elements in forge templates.
 @mixin core() {
+  // Adds a small amount of vertical padding to each Material form field (and the forge
+  // form-field wrapper, which opts in via .dbx-forge-form-field). Angular Material's
+  // dynamic-padding fields reserve no inter-field space on their own. (Migrated from the
+  // removed formly core styles; applies to all mat-form-field + forge wrapper fields.)
+  .mat-mdc-form-field,
+  .dbx-forge-form-field {
+    padding: 6px 0;
+  }
+
   // Resets native <input> elements that render inside the forge form-field wrapper
   // (outside a <mat-form-field>) so they match Material body-large typography.
   // Used by pickable filter inputs and searchable text/chip field inputs.

package/lib/form/_form.scss

@@ -5,6 +5,9 @@
 // MARK: Mixin
 @mixin core() {
   // Generic forge disabled class for fields that only need CSS-based disabling.
+  // NOTE: the `opacity: 0.38` literal used here and in `.dbx-forge-form-disabled` below
+  // is the Material 3 disabled-state content opacity. M3 exposes no `--mat-sys-*`
+  // disabled-opacity token, so the literal is intentional (see VISUAL_CHANGES.md KEEP-2).
   .dbx-forge-disabled {
     opacity: 0.38;
     pointer-events: none;

package/lib/style/_all-core.scss

@@ -1,15 +1,11 @@
 @use '../form/form';
-@use '../formly/formly';
 @use '../layout/layout';
-@use '../formly/field/field';
 @use '../forge/forge';
 @use '../extension/extension';
 
 // Includes all theming config
 @mixin all-component-core($theme-config) {
   @include form.core();
-  @include formly.core();
-  @include field.all-field-core();
   @include forge.all-forge-core();
   @include layout.core();
   @include extension.all-extension-core($theme-config);

package/lib/style/_all-theme.scss

@@ -1,15 +1,11 @@
 @use '../form/form';
-@use '../formly/formly';
 @use '../layout/layout';
-@use '../formly/field/field';
 @use '../forge/forge';
 @use '../extension/extension';
 
 // Includes all theming config
 @mixin all-component-themes($theme-config) {
   @include form.theme($theme-config);
-  @include formly.theme($theme-config);
-  @include field.all-field-theme($theme-config);
   @include forge.all-forge-theme($theme-config);
   @include layout.theme($theme-config);
   @include extension.all-extension-theme($theme-config);

package/lib/style/_all-typography.scss

@@ -1,8 +1,6 @@
 @use './theming';
 @use '../form/form';
-@use '../formly/formly';
 @use '../layout/layout';
-@use '../formly/field/field';
 @use '../forge/forge';
 @use '../extension/extension';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "13.16.0",
+  "version": "13.18.0",
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -14,20 +14,18 @@
     "@angular/material-date-fns-adapter": "21.2.9",
     "@angular/platform-browser": "21.2.11",
     "@bobbyquantum/ngx-editor": "21.0.0",
-    "@dereekb/date": "13.16.0",
-    "@dereekb/dbx-core": "13.16.0",
-    "@dereekb/dbx-web": "13.16.0",
-    "@dereekb/model": "13.16.0",
-    "@dereekb/rxjs": "13.16.0",
-    "@dereekb/util": "13.16.0",
-    "@dereekb/vitest": "13.16.0",
+    "@dereekb/date": "13.18.0",
+    "@dereekb/dbx-core": "13.18.0",
+    "@dereekb/dbx-web": "13.18.0",
+    "@dereekb/model": "13.18.0",
+    "@dereekb/rxjs": "13.18.0",
+    "@dereekb/util": "13.18.0",
+    "@dereekb/vitest": "13.18.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",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
-    "@ngx-formly/core": "git+https://git@github.com/dereekb/ngx-formly#996d1041c8d2afbe429985a5ad394e59327bfa1d",
-    "@ngx-formly/material": "git+https://git@github.com/dereekb/ngx-formly#02e615006744374a587b5d35de3b2d137e2e05a8",
     "@uirouter/core": "^6.1.2",
     "angular-calendar": "^0.32.2",
     "change-case-all": "^2.1.0",
@@ -52,6 +50,10 @@
       "types": "./types/dereekb-dbx-form-mapbox.d.ts",
       "default": "./fesm2022/dereekb-dbx-form-mapbox.mjs"
     },
+    "./style-demo": {
+      "types": "./types/dereekb-dbx-form-style-demo.d.ts",
+      "default": "./fesm2022/dereekb-dbx-form-style-demo.mjs"
+    },
     "./package.json": {
       "default": "./package.json"
     },

package/style-demo/README.md

@@ -0,0 +1,7 @@
+# @dereekb/dbx-form/style-demo
+
+Plumbing entry that registers `@dereekb/dbx-form` sections with the `<dbx-style-demo>` showcase shell from `@dereekb/dbx-web/style-demo`.
+
+Wire `provideDbxFormStyleDemo()` into an app alongside `provideDbxStyleDemo()` (the shell) and `provideDbxWebStyleDemo()` (the web sections) to add form-styling sections to the playground.
+
+> Phase 1 ships the plumbing only (a placeholder section). Real form-styling sections arrive in a later phase.