@dereekb/dbx-web 13.6.3 → 13.6.5

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;
@@ -171,13 +195,14 @@ $big-button-height: 46px; // 33% bigger
 
     // icon buttons
     &.mat-mdc-icon-button.dbx-default {
-      color: var(--mat-icon-button-icon-color, var(--mat-sys-primary));
+      --mat-icon-button-icon-color: var(--dbx-button-icon-color, currentColor);
+      color: var(--mat-icon-button-icon-color);
     }
 
     &.mat-mdc-icon-button:not(.dbx-default) {
       background: none;
 
-      --mat-icon-button-icon-color: #{$color-value};
+      --mat-icon-button-icon-color: var(--dbx-button-icon-color, #{$color-value});
       --mat-icon-button-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
       --mat-icon-button-state-layer-color: #{$color-value};
     }

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,55 @@ $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;
+      }
+
+      &.working {
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+      }
+
+      &.dbx-icon-no-text {
+        padding-right: 0;
+        margin-right: 0;
+        font-size: var(--mat-icon-button-icon-size, 24px);
+        height: var(--mat-icon-button-icon-size, 24px);
+        width: var(--mat-icon-button-icon-size, 24px);
+      }
+    }
+
+    span {
+      transition: opacity 0.3s ease-in-out;
 
-      mat-icon {
-        padding-right: 5px;
-        &.is-mat-icon {
-          font-size: 18px;
-          position: relative;
-          top: 3px;
-        }
+      &.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/list/_list.scss

@@ -153,7 +153,7 @@ $list-item-padded-min-height: 42px;
     cursor: unset;
 
     &:hover {
-      --mdc-list-list-item-hover-state-layer-opacity: 0;
+      --mat-list-list-item-hover-state-layer-opacity: 0;
     }
   }
 

package/lib/layout/style/_style.scss

@@ -101,6 +101,24 @@
   .dbx-fiflex {
     display: inline-flex !important;
   }
+
+  @each $color, $colorConfig in theming.$dbx-theme-colors-main {
+    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
+  }
+
+  @each $color, $colorConfig in theming.$dbx-theme-extra-colors-main {
+    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
+  }
+
+  @each $color, $colorConfig in theming.$dbx-theme-extra-colors-secondary {
+    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
+  }
+
+  // tonal mode: use the vibrant theme color as text instead of the contrast color.
+  // Applied via CSS class (not [style.color]) to avoid conflicting with [ngStyle] on buttons.
+  .dbx-color-tonal {
+    color: var(#{theming.$dbx-bg-color-var});
+  }
 }
 
 @mixin define-dbx-color-class($name, $color, $contrast, $swap-bg: false) {
@@ -119,38 +137,20 @@
     background: color-mix(in srgb, #{theming.$dbx-bg-color} var(#{theming.$dbx-bg-tone-var}), transparent);
     color: #{theming.$dbx-color};
   }
-
-  // add the css for the default background color
-  @if ($name == 'default') {
-    #{theming.$dbx-color-var}: #{$bg-text};
-    #{theming.$dbx-bg-color-var}: #{$bg-color};
-    background: #{theming.$dbx-bg-color};
-    // color: #{theming.$dbx-color};
-  }
 }
 
 @mixin color($theme-config) {
-  @each $color, $colorConfig in theming.$dbx-theme-colors-main {
-    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
-  }
-
-  @each $color, $colorConfig in theming.$dbx-theme-extra-colors-main {
-    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
-  }
-
-  @each $color, $colorConfig in theming.$dbx-theme-extra-colors-secondary {
-    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
-  }
-
-  // tonal mode: use the vibrant theme color as text instead of the contrast color.
-  // Applied via CSS class (not [style.color]) to avoid conflicting with [ngStyle] on buttons.
-  .dbx-color-tonal {
-    color: var(#{theming.$dbx-bg-color-var});
-  }
+  // add the css for the default background color
+  $default-config: map.get(theming.$dbx-theme-extra-colors-secondary, 'default');
+  #{theming.$dbx-color-var}: #{map.get($default-config, 'contrast')};
+  #{theming.$dbx-bg-color-var}: #{map.get($default-config, 'color')};
+  background: #{theming.$dbx-bg-color};
 
   // material color overrides
-  // --mdc-text-button-label-text-color: #{theming.$dbx-color-var};
+  // - button
+  --mat-icon-button-icon-color: #{theming.$dbx-color-var};
   --mat-button-text-label-text-color: #{theming.$dbx-color-var};
+  // - list item
   --mat-list-list-item-label-text-color: #{theming.$dbx-color-var};
   --mat-list-list-item-leading-icon-color: #{theming.$dbx-color-var};
 }

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/lib/router/layout/sidenav/_sidenav.scss

@@ -121,26 +121,12 @@ $active-background-transparent-color: 0.93;
     mat-sidenav.mat-drawer {
       // darken the sidenav background slightly for better contrast with active items
       --dbx-sidenav-background: color-mix(in srgb, var(--dbx-bg-color-current) 75%, var(--mat-sys-shadow));
+      --mat-sidenav-container-text-color: var(--mat-sys-primary-container);
       background: var(--dbx-sidenav-background);
 
       .dbx-anchor-list.mat-mdc-nav-list {
         --dbx-sidenav-active-accent: color-mix(in srgb, var(--dbx-accent-color) 65%, var(--mat-sys-surface));
 
-        --mdc-list-list-item-label-text-color: var(--mat-sys-on-primary-container);
-        --mdc-list-list-item-supporting-text-color: var(--mat-sys-on-primary-container);
-        --mdc-list-list-item-leading-icon-color: var(--mat-sys-on-primary-container);
-
-        --mdc-list-list-item-disabled-label-text-color: var(--mat-sys-on-primary-container);
-        --mdc-list-list-item-disabled-leading-icon-color: var(--mat-sys-on-primary-container);
-        --mdc-list-list-item-disabled-trailing-icon-color: var(--mat-sys-on-primary-container);
-
-        --mdc-list-list-item-hover-state-layer-color: var(--mat-sys-on-primary-container);
-        --mdc-list-list-item-focus-state-layer-color: var(--mat-sys-on-primary-container);
-
-        --mdc-list-list-item-hover-label-text-color: color-mix(in srgb, var(--mat-sys-on-primary-container) 80%, transparent);
-        --mdc-list-list-item-hover-supporting-text-color: color-mix(in srgb, var(--mat-sys-on-primary-container) 80%, transparent);
-        --mdc-list-list-item-hover-leading-icon-color: color-mix(in srgb, var(--mat-sys-on-primary-container) 80%, transparent);
-
         .dbx-anchor-active {
           .mat-mdc-list-item {
             .mat-mdc-list-item-icon {
@@ -161,7 +147,7 @@ $active-background-transparent-color: 0.93;
             border-left: var(--dbx-sidenav-active-child-item-border-left-width, #{$default-active-border-left-width}) solid var(--dbx-sidenav-active-accent);
 
             .mat-mdc-list-item-icon {
-              --mdc-list-list-item-leading-icon-color: var(--dbx-sidenav-active-accent);
+              --mat-list-list-item-leading-icon-color: var(--dbx-sidenav-active-accent);
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.6.3",
+  "version": "13.6.5",
   "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.5",
+    "@dereekb/date": "13.6.5",
+    "@dereekb/dbx-core": "13.6.5",
+    "@dereekb/rxjs": "13.6.5",
+    "@dereekb/util": "13.6.5",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.0.0",
     "@ngrx/effects": "^21.0.0",

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

@@ -503,6 +503,37 @@ declare class DbxMapboxInjectionStoreInjectionBlockDirective {
  */
 declare function provideMapboxInjectionStoreIfParentIsUnavailable(): Provider;
 
+declare class DbxMapboxConfig {
+    readonly defaultStyle?: MapOptions['style'];
+    readonly defaultZoom?: MapboxZoomLevel;
+    readonly defaultCenter?: LatLngPointInput;
+    readonly defaultStoreRefreshPeriod?: number;
+    /**
+     * Width to use for the mapbox layout drawer (mat-sidenav).
+     *
+     * Overrides the `--mat-sidenav-container-width` CSS token on the layout component.
+     * Defaults to 'auto' so the drawer width is determined by its content rather than
+     * the M3 default of 360px.
+     */
+    readonly drawerWidth?: string;
+}
+declare const DEFAULT_MAPBOX_STYLE: KnownMapboxStyle;
+declare const DEFAULT_MAPBOX_CENTER: LatLngPointInput;
+declare const DEFAULT_MAPBOX_ZOOM: MapboxZoomLevel;
+declare const DEFAULT_MAPBOX_LAYOUT_DRAWER_WIDTH = "auto";
+declare const DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD: Milliseconds;
+declare class DbxMapboxService {
+    private readonly _config;
+    get defaultStyle(): string | MapboxGl.StyleSpecification;
+    get defaultZoom(): MapboxZoomLevel;
+    get defaultCenter(): LatLngPointInput;
+    get drawerWidth(): string;
+    get mapboxMapStoreTimerRefreshPeriod(): number;
+    initializationOptions(): Partial<MapOptions>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxMapboxService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxMapboxService>;
+}
+
 type DbxMapboxLayoutSide = 'left' | 'right';
 type DbxMapboxLayoutMode = 'side' | 'push';
 /**
@@ -513,6 +544,7 @@ type DbxMapboxLayoutMode = 'side' | 'push';
  * Requires a TwoColumnsContextStore to be provided.
  */
 declare class DbxMapboxLayoutComponent implements OnInit, OnDestroy {
+    readonly dbxMapboxService: DbxMapboxService;
     readonly dbxMapboxMapStore: DbxMapboxMapStore;
     private readonly _viewResized;
     private readonly _refreshContentMargins;
@@ -564,27 +596,6 @@ declare class DbxMapboxLayoutVirtualResizeSyncComponent {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxMapboxLayoutVirtualResizeSyncComponent, "[dbxMapboxLayoutVirtualResizeSync]", never, {}, {}, never, never, true, never>;
 }
 
-declare class DbxMapboxConfig {
-    readonly defaultStyle?: MapOptions['style'];
-    readonly defaultZoom?: MapboxZoomLevel;
-    readonly defaultCenter?: LatLngPointInput;
-    readonly defaultStoreRefreshPeriod?: number;
-}
-declare const DEFAULT_MAPBOX_STYLE: KnownMapboxStyle;
-declare const DEFAULT_MAPBOX_CENTER: LatLngPointInput;
-declare const DEFAULT_MAPBOX_ZOOM: MapboxZoomLevel;
-declare const DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD: Milliseconds;
-declare class DbxMapboxService {
-    private readonly _config;
-    get defaultStyle(): string | MapboxGl.StyleSpecification;
-    get defaultZoom(): MapboxZoomLevel;
-    get defaultCenter(): LatLngPointInput;
-    get mapboxMapStoreTimerRefreshPeriod(): number;
-    initializationOptions(): Partial<MapOptions>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxMapboxService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DbxMapboxService>;
-}
-
 /**
  * Directive that configures a MapComponent with content from DbxMapboxService. Connects a host MapService to a parent DbxMapboxMapStore if available.
  */
@@ -774,5 +785,5 @@ interface DbxMapboxEnvironmentOptions extends DbxMapboxConfig {
  */
 type DbxMapboxOptions = DbxMapboxEnvironmentOptions;
 
-export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxInjectionComponent, DbxMapboxInjectionStore, DbxMapboxInjectionStoreInjectionBlockDirective, DbxMapboxInjectionStoreProviderBlock, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxLayoutVirtualResizeSyncComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideDbxMapbox, provideMapboxInjectionStoreIfParentIsUnavailable, provideMapboxStoreIfParentIsUnavailable, updateDbxMapboxMapInjectionStoreStateWithInjectionConfig, updateDbxMapboxMapInjectionStoreStateWithRemovedKey };
+export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_LAYOUT_DRAWER_WIDTH, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxInjectionComponent, DbxMapboxInjectionStore, DbxMapboxInjectionStoreInjectionBlockDirective, DbxMapboxInjectionStoreProviderBlock, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxLayoutVirtualResizeSyncComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideDbxMapbox, provideMapboxInjectionStoreIfParentIsUnavailable, provideMapboxStoreIfParentIsUnavailable, updateDbxMapboxMapInjectionStoreStateWithInjectionConfig, updateDbxMapboxMapInjectionStoreStateWithRemovedKey };
 export type { DbxMapboxClickEvent, DbxMapboxEnvironmentOptions, DbxMapboxInjectionConfig, DbxMapboxInjectionKey, DbxMapboxLayoutMode, DbxMapboxLayoutSide, DbxMapboxMapInjectionStoreState, DbxMapboxMarginCalculationSizing, DbxMapboxMarker, DbxMapboxMarkerDisplayConfig, DbxMapboxMarkerFactory, DbxMapboxMarkerPresentation, DbxMapboxMarkerSize, DbxMapboxOptions, DbxMapboxStoreBoundRefreshSettings, DbxMapboxStoreBoundRefreshType, DbxMapboxStoreState, FilterMapboxBoundConfig, FilterMapboxBoundReadItemValueFunction, KnownMapboxStyle, MapboxBearing, MapboxEaseTo, MapboxEaseToOptions, MapboxEaseToPositionOptions, MapboxEventData, MapboxFitBounds, MapboxFitBoundsOptions, MapboxFitPositions, MapboxFlyTo, MapboxFlyToOptions, MapboxFlyToPositionOptions, MapboxJumpTo, MapboxJumpToPositionOptions, MapboxMapLifecycleState, MapboxMapMoveState, MapboxMapRotateState, MapboxMapZoomState, MapboxPitch, MapboxResetNorth, MapboxResetNorthPitch, MapboxRotateTo, MapboxSetStyleOptions, MapboxSnapToNorth, MapboxStyleConfig, MapboxTileSize, MapboxViewportBoundFunction, MapboxViewportBoundFunctionConfig, MapboxViewportBoundFunctionInput, MapboxViewportBoundFunctionItem, MapboxViewportBoundFunctionItemValue, MapboxZoomLevel, MapboxZoomLevelRange, ProvideDbxMapboxConfig, StringMapboxListenerPair, TypedMapboxListenerPair };

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,17 @@ 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>;
+    /**
+     * Whether the button has meaningful text or projected content to display alongside the icon.
+     * When explicitly `false`, the button renders the icon without text-mode margins/padding,
+     * centering the icon properly. When `true` or `undefined`, the button renders the text area normally.
+     */
+    readonly hasTextContent?: Maybe<boolean>;
 }
 /**
  * Configuration for the icon displayed inside a progress button.
@@ -5014,6 +5029,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 +5086,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;
@@ -5126,6 +5149,12 @@ declare function provideDbxProgressButtonGlobalConfig(config: DbxProgressButtonG
  * ```
  */
 declare class DbxButtonComponent extends AbstractDbxButtonDirective {
+    /**
+     * Whether the host element has projected content (checked at construction time,
+     * before Angular moves the nodes for content projection).
+     */
+    private readonly _hasProjectedContent;
+    constructor();
     readonly bar: _angular_core.InputSignalWithTransform<boolean, Maybe<boolean | "">>;
     readonly type: _angular_core.InputSignal<Maybe<DbxButtonType>>;
     readonly buttonStyle: _angular_core.InputSignal<Maybe<DbxButtonStyle>>;