@dereekb/dbx-web 13.6.3 → 13.6.4

package/lib/button/_button.scss

@@ -17,6 +17,30 @@ $big-button-height: 46px; // 33% bigger
     }
   }
 
+  // Neutral hover/pressed/focus state layer instead of the primary-colored default.
+  // Apply to buttons with custom background colors where the primary tint looks wrong.
+  .dbx-button-neutral-interaction-color {
+    .mdc-button,
+    &.mdc-button {
+      $neutral: var(--mat-sys-on-surface, #000);
+
+      --mat-button-text-state-layer-color: #{$neutral};
+      --mat-button-text-pressed-state-layer-color: #{$neutral};
+      --mat-button-text-focus-state-layer-color: #{$neutral};
+      --mat-button-text-ripple-color: color-mix(in srgb, #{$neutral} 12%, transparent);
+      --mat-button-protected-state-layer-color: #{$neutral};
+      --mat-button-protected-pressed-state-layer-color: #{$neutral};
+      --mat-button-protected-focus-state-layer-color: #{$neutral};
+      --mat-button-protected-ripple-color: color-mix(in srgb, #{$neutral} 12%, transparent);
+      --mat-button-outlined-state-layer-color: #{$neutral};
+      --mat-button-outlined-pressed-state-layer-color: #{$neutral};
+      --mat-button-outlined-focus-state-layer-color: #{$neutral};
+      --mat-button-filled-state-layer-color: #{$neutral};
+      --mat-button-filled-pressed-state-layer-color: #{$neutral};
+      --mat-button-filled-focus-state-layer-color: #{$neutral};
+    }
+  }
+
   .dbx-button-wide {
     .dbx-button {
       min-width: 120px;

package/lib/button/progress/bar.button.component.scss

@@ -4,15 +4,23 @@ $bar-button-progress-bar-height-default: 5px;
   > button.dbx-progress-bar-button.mdc-button.mat-mdc-button {
     overflow: hidden; // clip progress bar to rounded corners
 
+    // normalize icon offset to match spinner button
+    --mat-button-text-icon-offset: 0px;
+    --mat-button-outlined-icon-offset: 0px;
+    --mat-button-protected-icon-offset: 0px;
+    --mat-button-filled-icon-offset: 0px;
+    --mat-button-tonal-icon-offset: 0px;
+
     &.working {
       cursor: not-allowed;
     }
     &.fullWidth {
       width: 100%;
     }
+
+    // ::ng-deep required for Material's internal .mdc-button__label element
     > ::ng-deep .mdc-button__label {
       position: unset; // required so the bar can expand fully
-
       display: flex;
       align-items: center;
 
@@ -23,15 +31,47 @@ $bar-button-progress-bar-height-default: 5px;
         --mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, #{$bar-button-progress-bar-height-default});
         --mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, #{$bar-button-progress-bar-height-default});
       }
+    }
+
+    // icon and text styles — outside ::ng-deep for proper view encapsulation
+    mat-icon.mat-button-icon {
+      padding-right: 5px;
+
+      font-size: 1.125rem;
+      height: 1.125rem;
+      width: 1.125rem;
+
+      margin-right: var(--mat-button-protected-icon-spacing, 8px);
+
+      &.is-mat-icon {
+        position: relative;
+      }
 
-      mat-icon {
-        padding-right: 5px;
-        &.is-mat-icon {
-          font-size: 18px;
-          position: relative;
-          top: 3px;
-        }
+      &.working {
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
       }
     }
+
+    span {
+      transition: opacity 0.3s ease-in-out;
+
+      &.working {
+        opacity: 0;
+      }
+    }
+
+    // echo overlay icon — centered within the button
+    .echo-overlay-icon {
+      position: absolute;
+      inset: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+    }
   }
 }

package/lib/button/progress/spinner.button.component.scss

@@ -18,6 +18,8 @@
     &.mat-mdc-button.mat-mdc-icon-button {
       // icon button fixes
       min-width: unset;
+      width: var(--mat-icon-button-state-layer-size, 36px);
+      padding: 0;
       --mat-icon-button-icon-size: unset;
       --mat-text-button-with-icon-horizontal-padding: 0px;
       --mat-icon-button-state-layer-size: 36px;
@@ -55,12 +57,6 @@
       }
     }
 
-    // mat-spinners marked with dbx-progress-spinner-custom should allow the stroke to be inherited.
-    .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,
-    .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle {
-      stroke: unset !important;
-    }
-
     .button-text {
       opacity: 1;
       transition: opacity 0.3s ease-in-out;
@@ -89,5 +85,18 @@
         opacity: 0;
       }
     }
+
+    // echo overlay icon — mirrors the spinner: absolutely positioned, centered in the button
+    .echo-overlay-icon {
+      position: absolute;
+      inset: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+    }
   }
 }

package/lib/layout/text/_text.scss

@@ -15,7 +15,7 @@ $dbx-detail-block-big-header-icon-size: 18px;
 
 $dbx-step-block-badge-size: 32px;
 $dbx-step-block-gap: 16px;
-$dbx-step-block-padding: 6px;
+$dbx-step-block-padding: 16px;
 $dbx-step-block-badge-font-size: 14px;
 $dbx-step-block-badge-icon-size: 18px;
 $dbx-step-block-header-font-weight: 500;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.6.3",
+  "version": "13.6.4",
   "peerDependencies": {
     "@angular/cdk": "21.2.3",
     "@angular/common": "21.2.3",
@@ -8,11 +8,11 @@
     "@angular/forms": "21.2.3",
     "@angular/material": "21.2.3",
     "@angular/platform-browser": "21.2.3",
-    "@dereekb/browser": "13.6.3",
-    "@dereekb/date": "13.6.3",
-    "@dereekb/dbx-core": "13.6.3",
-    "@dereekb/rxjs": "13.6.3",
-    "@dereekb/util": "13.6.3",
+    "@dereekb/browser": "13.6.4",
+    "@dereekb/date": "13.6.4",
+    "@dereekb/dbx-core": "13.6.4",
+    "@dereekb/rxjs": "13.6.4",
+    "@dereekb/util": "13.6.4",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.0.0",
     "@ngrx/effects": "^21.0.0",

package/types/dereekb-dbx-web.d.ts

@@ -1,5 +1,5 @@
 import * as _dereekb_dbx_core from '@dereekb/dbx-core';
-import { DbxActionWorkOrWorkProgress, DbxActionWorkProgress, DbxActionContextStoreSourceInstance, DbxActionContextSourceReference, DbxActionSuccessHandlerFunction, AbstractTransitionWatcherDirective, AbstractDbxButtonDirective, AuthUserIdentifier, DbxInjectionComponentConfig, SegueRef, ClickableAnchor, SegueRefOrSegueRefRouterLink, DbxButtonWorking, SimpleStorageAccessorFactory, StorageAccessor, DbxButtonDisplay, AbstractDbxAnchorDirective, ClickableIconAnchorLink, ClickableAnchorLink, DbxInjectionTemplateConfig, ClickableAnchorLinkTree, ExpandedClickableAnchorLinkTree, AbstractTransitionDirective, ClickableAnchorLinkSegueRef, AbstractIfDirective, AbstractDbxActionValueGetterDirective, FilterSourceDirective, ClickablePartialFilterPreset, AbstractDbxActionHandlerDirective, ClickableFilterPresetOrPartialPreset, ClickableFilterPreset, DbxButtonInterceptor, DbxButton } from '@dereekb/dbx-core';
+import { DbxActionWorkOrWorkProgress, DbxActionWorkProgress, DbxActionContextStoreSourceInstance, DbxActionContextSourceReference, DbxActionSuccessHandlerFunction, AbstractTransitionWatcherDirective, AbstractDbxButtonDirective, AuthUserIdentifier, DbxInjectionComponentConfig, SegueRef, ClickableAnchor, SegueRefOrSegueRefRouterLink, DbxButtonWorking, DbxButtonEcho, SimpleStorageAccessorFactory, StorageAccessor, DbxButtonDisplay, AbstractDbxAnchorDirective, ClickableIconAnchorLink, ClickableAnchorLink, DbxInjectionTemplateConfig, ClickableAnchorLinkTree, ExpandedClickableAnchorLinkTree, AbstractTransitionDirective, ClickableAnchorLinkSegueRef, AbstractIfDirective, AbstractDbxActionValueGetterDirective, FilterSourceDirective, ClickablePartialFilterPreset, AbstractDbxActionHandlerDirective, ClickableFilterPresetOrPartialPreset, ClickableFilterPreset, DbxButtonInterceptor, DbxButton } from '@dereekb/dbx-core';
 import * as _angular_core from '@angular/core';
 import { Signal, ElementRef, AfterViewInit, InjectionToken, Type, OnInit, OnDestroy, ViewContainerRef, Provider, Injector, TrackByFunction, OutputEmitterRef, OutputRef, EnvironmentProviders, TemplateRef } from '@angular/core';
 import { ProgressBarMode } from '@angular/material/progress-bar';
@@ -769,6 +769,10 @@ declare class DbxActionModule {
  * Lightweight button that renders as either an icon-only Material icon button or a text button
  * with an icon prefix, depending on whether text is provided.
  *
+ * @deprecated Use `dbx-button` instead. For icon-only buttons use `<dbx-button icon="settings" iconOnly>`.
+ * For icon+text buttons use `<dbx-button icon="settings" text="Label">`. The `dbx-button` component
+ * supports all the same inputs plus working/loading states, colors, and button style variants.
+ *
  * @example
  * ```html
  * <dbx-icon-button icon="settings" (buttonClick)="openSettings()"></dbx-icon-button>
@@ -785,7 +789,7 @@ declare class DbxIconButtonComponent extends AbstractDbxButtonDirective {
 }
 
 /**
- * @deprecated import DbxIconButtonComponent directly instead.
+ * @deprecated Use `dbx-button` instead of `dbx-icon-button`. See {@link DbxIconButtonComponent} for migration guidance.
  */
 declare class DbxIconButtonModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DbxIconButtonModule, never>;
@@ -4943,6 +4947,11 @@ interface DbxProgressButtonConfig {
      * Especially important for icon-only buttons that lack visible text.
      */
     readonly ariaLabel?: Maybe<string>;
+    /**
+     * Active button echo. When set, the button's text/icon fade out (preserving width)
+     * and a centered echo icon overlay appears, mirroring the spinner working animation.
+     */
+    readonly buttonEcho?: Maybe<DbxButtonEcho>;
 }
 /**
  * Configuration for the icon displayed inside a progress button.
@@ -5014,6 +5023,14 @@ declare abstract class AbstractProgressButtonDirective {
     readonly buttonTypeAttributeSignal: Signal<Maybe<string>>;
     readonly buttonDisabledSignal: Signal<Maybe<boolean>>;
     readonly showProgressSignal: Signal<boolean>;
+    /**
+     * Whether a button echo overlay is active (iconOnly echo mode).
+     */
+    readonly echoActiveSignal: Signal<boolean>;
+    /**
+     * Whether button content should be hidden via opacity (working spinner or echo overlay active).
+     */
+    readonly hideContentSignal: Signal<boolean>;
     /**
      * When true, the click handler will not call `stopImmediatePropagation()`,
      * allowing the click event to continue bubbling. Needed for components like
@@ -5063,7 +5080,7 @@ declare class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDi
     readonly showTextButtonIconSignal: _angular_core.Signal<false | Maybe<_dereekb_dbx_web.DbxProgressButtonIcon>>;
     readonly showIconSignal: _angular_core.Signal<boolean | _dereekb_util.MaybeNot>;
     readonly customSpinnerStyleSignal: _angular_core.Signal<{
-        stroke: string;
+        '--mat-progress-spinner-active-indicator-color': string;
     } | undefined>;
     readonly customSpinnerStyleClassSignal: _angular_core.Signal<{
         'dbx-progress-spinner-custom': boolean;