@dereekb/dbx-web 13.17.0 → 13.18.0

package/fesm2022/dereekb-dbx-web.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, inject, effect, Directive, NgModule, ChangeDetectionStrategy, Component, output, computed, HostListener, forwardRef, InjectionToken, viewChild, ElementRef, makeEnvironmentProviders, ApplicationRef, Injector, EnvironmentInjector, createComponent, DestroyRef, signal, TemplateRef, model, SecurityContext, ViewContainerRef, booleanAttribute, Renderer2 } from '@angular/core';
-import { asPromise, DASH_CHARACTER_PREFIX_INSTANCE, hashStringToNumber, cssTokenVar, isDefinedAndNotFalse, useIterableOrValue, spaceSeparatedCssClasses, cssClassesSet, objectHasNoKeys, getValueFromGetter, firstValue, filterUndefinedValues, separateValues, splitFront, asDecisionFunction, SLASH_PATH_FILE_TYPE_SEPARATOR, filterMaybeArrayValues, mapIterable, toReadableError, isDefaultReadableError, MS_IN_SECOND, mergeObjects, build, ServerErrorResponse, UnauthorizedServerErrorResponse, makeTimer, MS_IN_MINUTE, toggleTimerRunning, unixDateTimeSecondsNumberForNow, ModelRelationUtility, encodeModelKeyTypePair, safeCompareEquality, addMilliseconds, isPast, asArray, slashPathDetails, mimeTypeForFileExtension, slashPathDirectoryTree, nameToInitials, isMaybeNot, isNotFalse, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, maybeModifierMapToFunction, makeValuesGroupMap, compareWithMappedValuesFunction, invertMaybeBoolean, splitCommaSeparatedStringToSet, ZIP_FILE_MIME_TYPE, cachedGetter, sortByNumberFunction, JPEG_MIME_TYPES, JPEG_MIME_TYPE, PNG_MIME_TYPE, PDF_MIME_TYPE, sequentialIncrementingNumberStringModelIdFactory, PDF_HEADER, PDF_EOF_MARKER, PDF_ENCRYPT_MARKER } from '@dereekb/util';
+import { Injectable, input, inject, effect, Directive, NgModule, ChangeDetectionStrategy, Component, output, computed, HostListener, forwardRef, model, InjectionToken, viewChild, ElementRef, makeEnvironmentProviders, untracked, ApplicationRef, Injector, EnvironmentInjector, createComponent, DestroyRef, signal, TemplateRef, SecurityContext, ViewContainerRef, booleanAttribute, Renderer2 } from '@angular/core';
+import { asPromise, DASH_CHARACTER_PREFIX_INSTANCE, hashStringToNumber, cssTokenVar, useIterableOrValue, isDefinedAndNotFalse, spaceSeparatedCssClasses, cssClassesSet, objectHasNoKeys, getValueFromGetter, firstValue, filterUndefinedValues, separateValues, splitFront, asDecisionFunction, SLASH_PATH_FILE_TYPE_SEPARATOR, filterMaybeArrayValues, mapIterable, toReadableError, isDefaultReadableError, MS_IN_SECOND, mergeObjects, build, ServerErrorResponse, UnauthorizedServerErrorResponse, makeTimer, MS_IN_MINUTE, toggleTimerRunning, unixDateTimeSecondsNumberForNow, ModelRelationUtility, encodeModelKeyTypePair, safeCompareEquality, addMilliseconds, isPast, asArray, slashPathDetails, mimeTypeForFileExtension, slashPathDirectoryTree, nameToInitials, isMaybeNot, isNotFalse, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, maybeModifierMapToFunction, makeValuesGroupMap, compareWithMappedValuesFunction, invertMaybeBoolean, splitCommaSeparatedStringToSet, ZIP_FILE_MIME_TYPE, cachedGetter, sortByNumberFunction, JPEG_MIME_TYPES, JPEG_MIME_TYPE, PNG_MIME_TYPE, PDF_MIME_TYPE, sequentialIncrementingNumberStringModelIdFactory, PDF_HEADER, PDF_EOF_MARKER, PDF_ENCRYPT_MARKER } from '@dereekb/util';
 import * as i1$2 from '@dereekb/dbx-core';
 import { completeOnDestroy, clean, AbstractTransitionWatcherDirective, DbxInjectionComponent, dbxActionWorkProgress, AbstractDbxButtonDirective, hasNonTrivialChildNodes, provideDbxButton, DbxCoreButtonModule, createInjectorForInjectionComponentConfig, initInjectionComponent, AbstractDbxActionValueGetterDirective, cleanSubscription, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionWorkable, provideDbxActionWorkable, DbxActionContextStoreSourceInstance, cleanSubscriptionWithLockSet, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, cleanLoadingContext, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, mergeStaticProviders, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive, anchorTypeForAnchor } from '@dereekb/dbx-core';
 import { NgPopoverRef, NgOverlayContainerService } from 'ng-overlay-container';
@@ -778,7 +778,14 @@ const DBX_COLOR_CUSTOM_BG_CSS_CLASS = 'dbx-color-bg';
  */
 const DBX_COLOR_CUSTOM_TEXT_CSS_CLASS = 'dbx-color-text';
 /**
- * Returns the CSS class name for a themed background color.
+ * Returns the token-providing CSS class name for a themed background color.
+ *
+ * Under the token-only contract the returned `dbx-{color}-bg` classes declare the `--dbx-bg-color-current` /
+ * `--dbx-color-current` custom properties but paint nothing on their own — painting is performed by the
+ * `.dbx-color-bg` utility (or a `.dbx-color`-scoped component) reading those tokens. For named colors this returns the
+ * `dbx-{color}-bg` token class; for a {@link DbxColorConfig} it returns {@link DBX_COLOR_CUSTOM_BG_CSS_CLASS} so static
+ * (non-directive) callers still paint, while the `[dbxColor]` directive itself bypasses this for configs and supplies the
+ * tokens through inline style bindings instead.
  *
  * @param color - The theme color, color config, or nullish/empty for the default class.
  * @returns The CSS class name for the themed background (e.g., `'dbx-primary-bg'`, `'dbx-color-bg'`, or `'dbx-default'`)
@@ -861,174 +868,6 @@ const dbxThemeColorCssVariable = dbxThemeColorCssToken;
  */
 const dbxThemeColorCssVariableVar = dbxThemeColorCssTokenVar;
 
-/**
- * Injection token for providing a global array of progress button configurations.
- */
-const DBX_PROGRESS_BUTTON_GLOBAL_CONFIG = new InjectionToken('DbxProgressButtonGlobalConfig');
-
-/**
- * Abstract base for progress button components. Manages configuration merging with global defaults,
- * working/disabled state computation, CSS class generation, and click event handling.
- * Subclasses provide the specific template (spinner or bar).
- */
-class AbstractProgressButtonDirective {
-    globalConfig = inject(DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, { optional: true }) ?? [];
-    btnClick = output();
-    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-    buttonId = input(...(ngDevMode ? [undefined, { debugName: "buttonId" }] : /* istanbul ignore next */ []));
-    working = input(...(ngDevMode ? [undefined, { debugName: "working" }] : /* istanbul ignore next */ []));
-    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
-    globalOptionsSignal = computed(() => {
-        const buttonId = this.buttonId();
-        return buttonId ? this.globalConfig.find((config) => config.id === buttonId) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "globalOptionsSignal" }] : /* istanbul ignore next */ []));
-    configSignal = computed(() => {
-        const config = this.config();
-        const globalConfig = this.globalOptionsSignal();
-        let completeConfig;
-        if (config || globalConfig) {
-            completeConfig = {
-                ...globalConfig,
-                ...config
-            };
-            // set the iconOnly property if the buttonType is icon
-            if (completeConfig.buttonType === 'icon') {
-                completeConfig.iconOnly = true;
-            }
-            else if (completeConfig.iconOnly) {
-                completeConfig.buttonType = 'icon';
-            }
-        }
-        return completeConfig;
-    }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
-    baseCssClassSignal = computed(() => {
-        const config = this.configSignal();
-        const classes = [config?.customClass ?? ''];
-        if (config?.fullWidth) {
-            classes.push('fullWidth');
-        }
-        if (config?.disabled) {
-            classes.push('disabled');
-        }
-        let buttonType = 'basic';
-        if (config?.iconOnly) {
-            buttonType = 'icon';
-        }
-        else if (config?.buttonType) {
-            buttonType = config.buttonType;
-        }
-        switch (buttonType) {
-            case 'icon':
-                classes.push('mdc-icon-button mat-mdc-icon-button mat-unthemed');
-                break;
-            case 'raised':
-                classes.push('mat-mdc-raised-button mdc-button--raised');
-                break;
-            case 'stroked':
-                classes.push('mat-mdc-outlined-button mdc-button--outlined');
-                break;
-            case 'flat':
-                classes.push('mat-mdc-unelevated-button mdc-button--unelevated');
-                break;
-            case 'tonal':
-                classes.push('mat-mdc-tonal-button mdc-button--tonal');
-                break;
-            default:
-                classes.push('mat-unthemed');
-                break;
-        }
-        return classes;
-    }, ...(ngDevMode ? [{ debugName: "baseCssClassSignal" }] : /* istanbul ignore next */ []));
-    baseCssClasses$ = toObservable(this.baseCssClassSignal);
-    workingProgressSignal = computed(() => {
-        const working = this.working();
-        const config = this.configSignal();
-        const configWorking = config?.working;
-        return dbxActionWorkProgress([working, configWorking]);
-    }, ...(ngDevMode ? [{ debugName: "workingProgressSignal" }] : /* istanbul ignore next */ []));
-    isWorkingSignal = computed(() => isDefinedAndNotFalse(this.workingProgressSignal()), ...(ngDevMode ? [{ debugName: "isWorkingSignal" }] : /* istanbul ignore next */ []));
-    workingValueSignal = computed(() => {
-        const working = this.workingProgressSignal();
-        let result;
-        if (typeof working === 'number') {
-            result = working;
-        }
-        return result;
-    }, ...(ngDevMode ? [{ debugName: "workingValueSignal" }] : /* istanbul ignore next */ []));
-    modeSignal = computed(() => {
-        const config = this.configSignal();
-        const workingValue = this.workingValueSignal();
-        const mode = config?.mode;
-        let result;
-        if (mode) {
-            result = mode;
-        }
-        else if (workingValue == null) {
-            result = 'indeterminate';
-        }
-        else {
-            result = 'determinate';
-        }
-        return result;
-    }, ...(ngDevMode ? [{ debugName: "modeSignal" }] : /* istanbul ignore next */ []));
-    disabledSignal = computed(() => {
-        const disabled = this.disabled();
-        const configDisabled = this.configSignal()?.disabled;
-        return disabled || configDisabled;
-    }, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : /* istanbul ignore next */ []));
-    buttonTypeAttributeSignal = computed(() => {
-        const options = this.configSignal();
-        return options?.buttonTypeAttribute;
-    }, ...(ngDevMode ? [{ debugName: "buttonTypeAttributeSignal" }] : /* istanbul ignore next */ []));
-    buttonDisabledSignal = computed(() => {
-        const working = this.isWorkingSignal();
-        const disabled = this.disabledSignal();
-        return working || disabled;
-    }, ...(ngDevMode ? [{ debugName: "buttonDisabledSignal" }] : /* istanbul ignore next */ []));
-    showProgressSignal = computed(() => {
-        const working = this.isWorkingSignal();
-        const disabled = this.disabledSignal();
-        return working && !disabled;
-    }, ...(ngDevMode ? [{ debugName: "showProgressSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether a button echo overlay is active (iconOnly echo mode).
-     */
-    echoActiveSignal = computed(() => {
-        return this.configSignal()?.buttonEcho != null;
-    }, ...(ngDevMode ? [{ debugName: "echoActiveSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether button content should be hidden via opacity (working spinner or echo overlay active).
-     */
-    hideContentSignal = computed(() => {
-        const echoActive = this.echoActiveSignal();
-        return this.showProgressSignal() || echoActive;
-    }, ...(ngDevMode ? [{ debugName: "hideContentSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * When true, the click handler will not call `stopImmediatePropagation()`,
-     * allowing the click event to continue bubbling. Needed for components like
-     * file upload buttons where a parent must handle the click synchronously.
-     */
-    allowClickPropagation = input(false, { ...(ngDevMode ? { debugName: "allowClickPropagation" } : /* istanbul ignore next */ {}), transform: Boolean });
-    handleClick(event) {
-        const working = this.isWorkingSignal();
-        const disabled = this.disabledSignal();
-        if (!working && !disabled) {
-            this.btnClick.emit(event);
-            if (!this.allowClickPropagation()) {
-                event.stopImmediatePropagation();
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractProgressButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: AbstractProgressButtonDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, working: { classPropertyName: "working", publicName: "working", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowClickPropagation: { classPropertyName: "allowClickPropagation", publicName: "allowClickPropagation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { btnClick: "btnClick" }, host: { listeners: { "click": "handleClick($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractProgressButtonDirective, decorators: [{
-            type: Directive
-        }], propDecorators: { btnClick: [{ type: i0.Output, args: ["btnClick"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], working: [{ type: i0.Input, args: [{ isSignal: true, alias: "working", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowClickPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClickPropagation", required: false }] }], handleClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 /**
  * Configuration provided in the root module/environment for seeding {@link DbxColorService} with initial templates.
  */
@@ -1163,10 +1002,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }], ctorParameters: () => [] });
 
 /**
- * Applies a themed background color to the host element.
+ * Provides themed color *tokens* to the host element — it never paints a background itself.
  *
  * Accepts either a {@link DbxThemeColor} string (e.g. `'primary'`, `'success'`) or a {@link DbxColorConfig}
  * object carrying arbitrary CSS color values (any hex, `rgb()`, `hsl()`, `var(...)`, `color-mix(...)`, etc.).
+ * The directive sets the `--dbx-bg-color-current` / `--dbx-color-current` (and tone) custom properties and adds the
+ * `.dbx-color` marker class, leaving the actual painting to either the explicit `.dbx-color-bg` utility on the same
+ * element or a colored-surface component's own `.dbx-color`-scoped SCSS (e.g. `<dbx-bar>`, `<dbx-button>`, `<dbx-loading>`,
+ * `<dbx-icon-tile>`, `<mat-card>`) that reads the inherited tokens.
  *
  * Optionally set {@link dbxColorTone} (0-100) to control background opacity for a tonal/muted appearance.
  * When tonal mode is active, the `dbx-color-tonal` CSS class is added and a CSS rule overrides the text
@@ -1180,26 +1023,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * @dbxWebCategory layout
  * @dbxWebRelated text-color, color-service
  * @dbxWebMinimalExample ```html
- * <div [dbxColor]="'primary'"></div>
+ * <div dbxColor="primary" class="dbx-color-bg"></div>
  * ```
  *
  * @example
  * ```html
- * <div [dbxColor]="'primary'">Themed background</div>
- * <div [dbxColor]="'primary'" [dbxColorTone]="18">Tonal themed</div>
- * <div [dbxColor]="{ color: '#ff0066', contrast: 'white' }">Custom hex</div>
- * <div [dbxColor]="{ color: 'var(--mat-sys-tertiary)', contrast: 'var(--mat-sys-on-tertiary)', tone: 18 }">Custom tonal</div>
+ * <!-- pair with .dbx-color-bg to paint a plain element -->
+ * <div dbxColor="primary" class="dbx-color-bg">Themed background</div>
+ * <div dbxColor="primary" [dbxColorTone]="18" class="dbx-color-bg">Tonal themed</div>
+ * <div [dbxColor]="{ color: '#ff0066', contrast: 'white' }" class="dbx-color-bg">Custom hex</div>
+ *
+ * <!-- a colored-surface component paints itself from the tokens; no .dbx-color-bg needed -->
+ * <dbx-bar dbxColor="primary">Bar paints itself</dbx-bar>
+ * <dbx-button color="warn" raised text="Delete"></dbx-button>
  * ```
  */
 class DbxColorDirective {
     _colorService = inject(DbxColorService, { optional: true });
-    dbxColor = input(...(ngDevMode ? [undefined, { debugName: "dbxColor" }] : /* istanbul ignore next */ []));
+    /**
+     * The color to provide tokens for. Declared as a `model` so a colored-surface component on the same host (e.g.
+     * `dbx-button`) can push its resolved color into the directive, keeping it the single token provider on the element.
+     */
+    dbxColor = model(...(ngDevMode ? [undefined, { debugName: "dbxColor" }] : /* istanbul ignore next */ []));
     /**
      * Background tone level (0-100). When set, the background becomes semi-transparent
      * and text color switches to the vibrant theme color for a tonal appearance.
      */
     dbxColorTone = input(...(ngDevMode ? [undefined, { debugName: "dbxColorTone" }] : /* istanbul ignore next */ []));
-    cssClassSignal = computed(() => dbxColorBackground(this.dbxColor()), ...(ngDevMode ? [{ debugName: "cssClassSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a color is currently bound. When nothing is bound the directive is fully inert — it adds no marker class
+     * and no token class — so color tokens inherited from a `[dbxColor]` ancestor pass through untouched (important for
+     * components that host this directive unconditionally, e.g. `dbx-button` inside a tonal `[dbxColor]` card).
+     */
+    hasColorSignal = computed(() => Boolean(this.dbxColor()), ...(ngDevMode ? [{ debugName: "hasColorSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Applies the named `dbx-{color}-bg` token class for a {@link DbxThemeColor} string, or `''` both for a
+     * {@link DbxColorConfig} (whose tokens are supplied by the inline `--dbx-bg-color-current` / `--dbx-color-current`
+     * style bindings instead) and when no color is bound (inert; inherited tokens pass through). The directive is a pure
+     * token provider — none of these classes paint a background; painting is done by the `.dbx-color-bg` utility or a
+     * component's own `.dbx-color`-scoped SCSS.
+     */
+    cssClassSignal = computed(() => {
+        const value = this.dbxColor();
+        let cssClass = '';
+        if (value) {
+            cssClass = isDbxColorConfig(value) ? '' : dbxColorBackground(value);
+        }
+        return cssClass;
+    }, ...(ngDevMode ? [{ debugName: "cssClassSignal" }] : /* istanbul ignore next */ []));
     _configSignal = computed(() => {
         const value = this.dbxColor();
         return isDbxColorConfig(value) ? (this._colorService?.expandColorConfig(value) ?? value) : undefined;
@@ -1255,7 +1126,7 @@ class DbxColorDirective {
         return tone == null ? null : `${tone}%`;
     }, ...(ngDevMode ? [{ debugName: "bgToneStyleSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxColorDirective, isStandalone: true, selector: "[dbxColor]", inputs: { dbxColor: { classPropertyName: "dbxColor", publicName: "dbxColor", isSignal: true, isRequired: false, transformFunction: null }, dbxColorTone: { classPropertyName: "dbxColorTone", publicName: "dbxColorTone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClassSignal()", "class.dbx-color": "true", "class.dbx-color-tonal": "isTonalSignal()", "style.--dbx-color-bg-tone": "bgToneStyleSignal()", "style.--dbx-bg-color-current": "bgColorStyleSignal()", "style.--dbx-color-current": "colorStyleSignal()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxColorDirective, isStandalone: true, selector: "[dbxColor]", inputs: { dbxColor: { classPropertyName: "dbxColor", publicName: "dbxColor", isSignal: true, isRequired: false, transformFunction: null }, dbxColorTone: { classPropertyName: "dbxColorTone", publicName: "dbxColorTone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dbxColor: "dbxColorChange" }, host: { properties: { "class": "cssClassSignal()", "class.dbx-color": "hasColorSignal()", "class.dbx-color-tonal": "isTonalSignal()", "style.--dbx-color-bg-tone": "bgToneStyleSignal()", "style.--dbx-bg-color-current": "bgColorStyleSignal()", "style.--dbx-color-current": "colorStyleSignal()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxColorDirective, decorators: [{
             type: Directive,
@@ -1263,7 +1134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     selector: '[dbxColor]',
                     host: {
                         '[class]': 'cssClassSignal()',
-                        '[class.dbx-color]': 'true',
+                        '[class.dbx-color]': 'hasColorSignal()',
                         '[class.dbx-color-tonal]': 'isTonalSignal()',
                         '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()',
                         '[style.--dbx-bg-color-current]': 'bgColorStyleSignal()',
@@ -1271,7 +1142,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     },
                     standalone: true
                 }]
-        }], propDecorators: { dbxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxColor", required: false }] }], dbxColorTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxColorTone", required: false }] }] } });
+        }], propDecorators: { dbxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxColor", required: false }] }, { type: i0.Output, args: ["dbxColorChange"] }], dbxColorTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxColorTone", required: false }] }] } });
+
+/**
+ * Injection token for providing a global array of progress button configurations.
+ */
+const DBX_PROGRESS_BUTTON_GLOBAL_CONFIG = new InjectionToken('DbxProgressButtonGlobalConfig');
+
+/**
+ * Abstract base for progress button components. Manages configuration merging with global defaults,
+ * working/disabled state computation, CSS class generation, and click event handling.
+ * Subclasses provide the specific template (spinner or bar).
+ */
+class AbstractProgressButtonDirective {
+    globalConfig = inject(DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, { optional: true }) ?? [];
+    btnClick = output();
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    buttonId = input(...(ngDevMode ? [undefined, { debugName: "buttonId" }] : /* istanbul ignore next */ []));
+    working = input(...(ngDevMode ? [undefined, { debugName: "working" }] : /* istanbul ignore next */ []));
+    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+    globalOptionsSignal = computed(() => {
+        const buttonId = this.buttonId();
+        return buttonId ? this.globalConfig.find((config) => config.id === buttonId) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "globalOptionsSignal" }] : /* istanbul ignore next */ []));
+    configSignal = computed(() => {
+        const config = this.config();
+        const globalConfig = this.globalOptionsSignal();
+        let completeConfig;
+        if (config || globalConfig) {
+            completeConfig = {
+                ...globalConfig,
+                ...config
+            };
+            // set the iconOnly property if the buttonType is icon
+            if (completeConfig.buttonType === 'icon') {
+                completeConfig.iconOnly = true;
+            }
+            else if (completeConfig.iconOnly) {
+                completeConfig.buttonType = 'icon';
+            }
+        }
+        return completeConfig;
+    }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
+    baseCssClassSignal = computed(() => {
+        const config = this.configSignal();
+        const classes = [config?.customClass ?? ''];
+        if (config?.fullWidth) {
+            classes.push('fullWidth');
+        }
+        if (config?.disabled) {
+            classes.push('disabled');
+        }
+        let buttonType = 'basic';
+        if (config?.iconOnly) {
+            buttonType = 'icon';
+        }
+        else if (config?.buttonType) {
+            buttonType = config.buttonType;
+        }
+        switch (buttonType) {
+            case 'icon':
+                classes.push('mdc-icon-button mat-mdc-icon-button mat-unthemed');
+                break;
+            case 'raised':
+                classes.push('mat-mdc-raised-button mdc-button--raised');
+                break;
+            case 'stroked':
+                classes.push('mat-mdc-outlined-button mdc-button--outlined');
+                break;
+            case 'flat':
+                classes.push('mat-mdc-unelevated-button mdc-button--unelevated');
+                break;
+            case 'tonal':
+                classes.push('mat-mdc-tonal-button mdc-button--tonal');
+                break;
+            default:
+                classes.push('mat-unthemed');
+                break;
+        }
+        return classes;
+    }, ...(ngDevMode ? [{ debugName: "baseCssClassSignal" }] : /* istanbul ignore next */ []));
+    baseCssClasses$ = toObservable(this.baseCssClassSignal);
+    workingProgressSignal = computed(() => {
+        const working = this.working();
+        const config = this.configSignal();
+        const configWorking = config?.working;
+        return dbxActionWorkProgress([working, configWorking]);
+    }, ...(ngDevMode ? [{ debugName: "workingProgressSignal" }] : /* istanbul ignore next */ []));
+    isWorkingSignal = computed(() => isDefinedAndNotFalse(this.workingProgressSignal()), ...(ngDevMode ? [{ debugName: "isWorkingSignal" }] : /* istanbul ignore next */ []));
+    workingValueSignal = computed(() => {
+        const working = this.workingProgressSignal();
+        let result;
+        if (typeof working === 'number') {
+            result = working;
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "workingValueSignal" }] : /* istanbul ignore next */ []));
+    modeSignal = computed(() => {
+        const config = this.configSignal();
+        const workingValue = this.workingValueSignal();
+        const mode = config?.mode;
+        let result;
+        if (mode) {
+            result = mode;
+        }
+        else if (workingValue == null) {
+            result = 'indeterminate';
+        }
+        else {
+            result = 'determinate';
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "modeSignal" }] : /* istanbul ignore next */ []));
+    disabledSignal = computed(() => {
+        const disabled = this.disabled();
+        const configDisabled = this.configSignal()?.disabled;
+        return disabled || configDisabled;
+    }, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : /* istanbul ignore next */ []));
+    buttonTypeAttributeSignal = computed(() => {
+        const options = this.configSignal();
+        return options?.buttonTypeAttribute;
+    }, ...(ngDevMode ? [{ debugName: "buttonTypeAttributeSignal" }] : /* istanbul ignore next */ []));
+    buttonDisabledSignal = computed(() => {
+        const working = this.isWorkingSignal();
+        const disabled = this.disabledSignal();
+        return working || disabled;
+    }, ...(ngDevMode ? [{ debugName: "buttonDisabledSignal" }] : /* istanbul ignore next */ []));
+    showProgressSignal = computed(() => {
+        const working = this.isWorkingSignal();
+        const disabled = this.disabledSignal();
+        return working && !disabled;
+    }, ...(ngDevMode ? [{ debugName: "showProgressSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a button echo overlay is active (iconOnly echo mode).
+     */
+    echoActiveSignal = computed(() => {
+        return this.configSignal()?.buttonEcho != null;
+    }, ...(ngDevMode ? [{ debugName: "echoActiveSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether button content should be hidden via opacity (working spinner or echo overlay active).
+     */
+    hideContentSignal = computed(() => {
+        const echoActive = this.echoActiveSignal();
+        return this.showProgressSignal() || echoActive;
+    }, ...(ngDevMode ? [{ debugName: "hideContentSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, the click handler will not call `stopImmediatePropagation()`,
+     * allowing the click event to continue bubbling. Needed for components like
+     * file upload buttons where a parent must handle the click synchronously.
+     */
+    allowClickPropagation = input(false, { ...(ngDevMode ? { debugName: "allowClickPropagation" } : /* istanbul ignore next */ {}), transform: Boolean });
+    handleClick(event) {
+        const working = this.isWorkingSignal();
+        const disabled = this.disabledSignal();
+        if (!working && !disabled) {
+            this.btnClick.emit(event);
+            if (!this.allowClickPropagation()) {
+                event.stopImmediatePropagation();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractProgressButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: AbstractProgressButtonDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, working: { classPropertyName: "working", publicName: "working", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowClickPropagation: { classPropertyName: "allowClickPropagation", publicName: "allowClickPropagation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { btnClick: "btnClick" }, host: { listeners: { "click": "handleClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractProgressButtonDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { btnClick: [{ type: i0.Output, args: ["btnClick"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], working: [{ type: i0.Input, args: [{ isSignal: true, alias: "working", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowClickPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClickPropagation", required: false }] }], handleClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 /**
  * Progress button that displays a Material progress bar beneath the button while working.
@@ -1294,11 +1333,11 @@ class DbxProgressBarButtonComponent extends AbstractProgressButtonDirective {
     buttonCss$ = this.baseCssClasses$.pipe(distinctUntilItemsHaveDifferentValues((x) => x[1]), map((x) => spaceSeparatedCssClasses(x[1])), shareReplay(1));
     buttonCssSignal = toSignal(this.buttonCss$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxProgressBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxProgressBarButtonComponent, isStandalone: true, selector: "dbx-progress-bar-button,dbx-bar-button", usesInheritance: true, ngImport: i0, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [class.dbx-icon-no-text]=\"configSignal()?.hasTextContent === false\" [class.working]=\"echoActiveSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n      {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n    </mat-icon>\n  }\n  @if (!configSignal()?.fab && !configSignal()?.iconOnly && !(configSignal()?.hasTextContent === false && configSignal()?.buttonIcon)) {\n    <span [class.working]=\"echoActiveSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n  @if (echoActiveSignal()) {\n    <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden;--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}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0;--mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, 5px);--mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, 5px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button 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)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.is-mat-icon{position:relative}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.working{opacity:0;transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.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)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span{transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span.working{opacity:0}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxProgressBarButtonComponent, isStandalone: true, selector: "dbx-progress-bar-button,dbx-bar-button", usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-color-bg dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [class.dbx-icon-no-text]=\"configSignal()?.hasTextContent === false\" [class.working]=\"echoActiveSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n      {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n    </mat-icon>\n  }\n  @if (!configSignal()?.fab && !configSignal()?.iconOnly && !(configSignal()?.hasTextContent === false && configSignal()?.buttonIcon)) {\n    <span [class.working]=\"echoActiveSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n  @if (echoActiveSignal()) {\n    <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden;--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}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0;--mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, 5px);--mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, 5px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button 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)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.is-mat-icon{position:relative}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.working{opacity:0;transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.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)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span{transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span.working{opacity:0}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxProgressBarButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-progress-bar-button,dbx-bar-button', imports: [MatButtonModule, DbxColorDirective, MatIconModule, MatProgressBar, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [class.dbx-icon-no-text]=\"configSignal()?.hasTextContent === false\" [class.working]=\"echoActiveSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n      {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n    </mat-icon>\n  }\n  @if (!configSignal()?.fab && !configSignal()?.iconOnly && !(configSignal()?.hasTextContent === false && configSignal()?.buttonIcon)) {\n    <span [class.working]=\"echoActiveSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n  @if (echoActiveSignal()) {\n    <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden;--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}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0;--mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, 5px);--mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, 5px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button 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)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.is-mat-icon{position:relative}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.working{opacity:0;transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.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)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span{transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span.working{opacity:0}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
+            args: [{ selector: 'dbx-progress-bar-button,dbx-bar-button', imports: [MatButtonModule, MatIconModule, MatProgressBar, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button class=\"dbx-color-bg dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [class.dbx-icon-no-text]=\"configSignal()?.hasTextContent === false\" [class.working]=\"echoActiveSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n      {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n    </mat-icon>\n  }\n  @if (!configSignal()?.fab && !configSignal()?.iconOnly && !(configSignal()?.hasTextContent === false && configSignal()?.buttonIcon)) {\n    <span [class.working]=\"echoActiveSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n  @if (echoActiveSignal()) {\n    <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden;--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}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0;--mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, 5px);--mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, 5px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button 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)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.is-mat-icon{position:relative}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.working{opacity:0;transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.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)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span{transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span.working{opacity:0}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
         }] });
 
 /**
@@ -1387,11 +1426,11 @@ class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective
         return hasCustomStyle ? { 'dbx-progress-spinner-custom': true } : undefined;
     }, ...(ngDevMode ? [{ debugName: "customSpinnerStyleClassSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxProgressSpinnerButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxProgressSpinnerButtonComponent, isStandalone: true, selector: "dbx-progress-spinner-button,dbx-spinner-button", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n  @if (showTextContentSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"hideContentSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\">\n        {{ configSignal()?.buttonIcon?.fontSet ? '' : configSignal()?.buttonIcon?.fontIcon }}\n      </mat-icon>\n    }\n    <span class=\"button-text\" [class.working]=\"hideContentSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showIconSignal()) {\n    <!-- Use ng-container to prevent mat-icon from being a child of the button which changes the behavior -->\n    <ng-container>\n      <mat-icon class=\"mat-fab-icon\" [class.working]=\"hideContentSignal()\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.fab && configSignal()?.buttonIcon?.inline!\">\n        {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n      </mat-icon>\n    </ng-container>\n  }\n  @if (showProgressSignal()) {\n    <mat-spinner class=\"spinner\" [diameter]=\"spinnerSizeSignal()\" [color]=\"configSignal()?.spinnerColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\n  }\n  @if (echoActiveSignal()) {\n    <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n  }\n</button>\n", styles: [":host button{min-height:var(--mat-button-text-container-height);height:unset;outline:none}:host button.mat-mdc-unelevated-button{min-height:var(--mat-button-filled-container-height)}:host button.mat-mdc-raised-button{min-height:var(--mat-button-protected-container-height)}:host button.mat-mdc-outlined-button{min-height:var(--mat-button-outlined-container-height)}:host button.mat-mdc-tonal-button{min-height:var(--mat-button-tonal-container-height)}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;width:var(--mat-icon-button-state-layer-size, 40px);height:var(--mat-icon-button-state-layer-size, 40px);padding:0;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 40px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button:disabled,:host button.mat-mdc-button.mat-mdc-icon-button.disabled{color:var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, currentColor 38%, transparent))}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 40px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mat-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 48px}:host button.fullWidth{width:100%}:host button .mat-mdc-progress-spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .mat-mdc-progress-spinner.working{opacity:1}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-button-protected-icon-spacing, 8px)}:host button mat-icon.mat-button-icon.is-mat-icon{position:relative;left:3px}:host button mat-icon.mat-button-icon.working{opacity:0}:host button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxProgressSpinnerButtonComponent, isStandalone: true, selector: "dbx-progress-spinner-button,dbx-spinner-button", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-color-bg dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n  @if (showTextContentSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"hideContentSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\">\n        {{ configSignal()?.buttonIcon?.fontSet ? '' : configSignal()?.buttonIcon?.fontIcon }}\n      </mat-icon>\n    }\n    <span class=\"button-text\" [class.working]=\"hideContentSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showIconSignal()) {\n    <!-- Use ng-container to prevent mat-icon from being a child of the button which changes the behavior -->\n    <ng-container>\n      <mat-icon class=\"mat-fab-icon\" [class.working]=\"hideContentSignal()\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.fab && configSignal()?.buttonIcon?.inline!\">\n        {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n      </mat-icon>\n    </ng-container>\n  }\n  @if (showProgressSignal()) {\n    <mat-spinner class=\"spinner\" [diameter]=\"spinnerSizeSignal()\" [color]=\"configSignal()?.spinnerColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\n  }\n  @if (echoActiveSignal()) {\n    <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n  }\n</button>\n", styles: [":host button{min-height:var(--mat-button-text-container-height);height:unset;outline:none}:host button.mat-mdc-unelevated-button{min-height:var(--mat-button-filled-container-height)}:host button.mat-mdc-raised-button{min-height:var(--mat-button-protected-container-height)}:host button.mat-mdc-outlined-button{min-height:var(--mat-button-outlined-container-height)}:host button.mat-mdc-tonal-button{min-height:var(--mat-button-tonal-container-height)}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;width:var(--mat-icon-button-state-layer-size, 40px);height:var(--mat-icon-button-state-layer-size, 40px);padding:0;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 40px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button:disabled,:host button.mat-mdc-button.mat-mdc-icon-button.disabled{color:var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, currentColor 38%, transparent))}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 40px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mat-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 48px}:host button.fullWidth{width:100%}:host button .mat-mdc-progress-spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .mat-mdc-progress-spinner.working{opacity:1}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-button-protected-icon-spacing, 8px)}:host button mat-icon.mat-button-icon.is-mat-icon{position:relative;left:3px}:host button mat-icon.mat-button-icon.working{opacity:0}:host button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxProgressSpinnerButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-progress-spinner-button,dbx-spinner-button', imports: [MatButtonModule, DbxColorDirective, MatIconModule, MatProgressSpinner, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n  @if (showTextContentSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"hideContentSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\">\n        {{ configSignal()?.buttonIcon?.fontSet ? '' : configSignal()?.buttonIcon?.fontIcon }}\n      </mat-icon>\n    }\n    <span class=\"button-text\" [class.working]=\"hideContentSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showIconSignal()) {\n    <!-- Use ng-container to prevent mat-icon from being a child of the button which changes the behavior -->\n    <ng-container>\n      <mat-icon class=\"mat-fab-icon\" [class.working]=\"hideContentSignal()\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.fab && configSignal()?.buttonIcon?.inline!\">\n        {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n      </mat-icon>\n    </ng-container>\n  }\n  @if (showProgressSignal()) {\n    <mat-spinner class=\"spinner\" [diameter]=\"spinnerSizeSignal()\" [color]=\"configSignal()?.spinnerColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\n  }\n  @if (echoActiveSignal()) {\n    <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n  }\n</button>\n", styles: [":host button{min-height:var(--mat-button-text-container-height);height:unset;outline:none}:host button.mat-mdc-unelevated-button{min-height:var(--mat-button-filled-container-height)}:host button.mat-mdc-raised-button{min-height:var(--mat-button-protected-container-height)}:host button.mat-mdc-outlined-button{min-height:var(--mat-button-outlined-container-height)}:host button.mat-mdc-tonal-button{min-height:var(--mat-button-tonal-container-height)}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;width:var(--mat-icon-button-state-layer-size, 40px);height:var(--mat-icon-button-state-layer-size, 40px);padding:0;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 40px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button:disabled,:host button.mat-mdc-button.mat-mdc-icon-button.disabled{color:var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, currentColor 38%, transparent))}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 40px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mat-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 48px}:host button.fullWidth{width:100%}:host button .mat-mdc-progress-spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .mat-mdc-progress-spinner.working{opacity:1}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-button-protected-icon-spacing, 8px)}:host button mat-icon.mat-button-icon.is-mat-icon{position:relative;left:3px}:host button mat-icon.mat-button-icon.working{opacity:0}:host button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
+            args: [{ selector: 'dbx-progress-spinner-button,dbx-spinner-button', imports: [MatButtonModule, MatIconModule, MatProgressSpinner, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button class=\"dbx-color-bg dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n  @if (showTextContentSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"hideContentSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\">\n        {{ configSignal()?.buttonIcon?.fontSet ? '' : configSignal()?.buttonIcon?.fontIcon }}\n      </mat-icon>\n    }\n    <span class=\"button-text\" [class.working]=\"hideContentSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showIconSignal()) {\n    <!-- Use ng-container to prevent mat-icon from being a child of the button which changes the behavior -->\n    <ng-container>\n      <mat-icon class=\"mat-fab-icon\" [class.working]=\"hideContentSignal()\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.fab && configSignal()?.buttonIcon?.inline!\">\n        {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n      </mat-icon>\n    </ng-container>\n  }\n  @if (showProgressSignal()) {\n    <mat-spinner class=\"spinner\" [diameter]=\"spinnerSizeSignal()\" [color]=\"configSignal()?.spinnerColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\n  }\n  @if (echoActiveSignal()) {\n    <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n  }\n</button>\n", styles: [":host button{min-height:var(--mat-button-text-container-height);height:unset;outline:none}:host button.mat-mdc-unelevated-button{min-height:var(--mat-button-filled-container-height)}:host button.mat-mdc-raised-button{min-height:var(--mat-button-protected-container-height)}:host button.mat-mdc-outlined-button{min-height:var(--mat-button-outlined-container-height)}:host button.mat-mdc-tonal-button{min-height:var(--mat-button-tonal-container-height)}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;width:var(--mat-icon-button-state-layer-size, 40px);height:var(--mat-icon-button-state-layer-size, 40px);padding:0;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 40px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button:disabled,:host button.mat-mdc-button.mat-mdc-icon-button.disabled{color:var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, currentColor 38%, transparent))}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 40px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mat-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 48px}:host button.fullWidth{width:100%}:host button .mat-mdc-progress-spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .mat-mdc-progress-spinner.working{opacity:1}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-button-protected-icon-spacing, 8px)}:host button mat-icon.mat-button-icon.is-mat-icon{position:relative;left:3px}:host button mat-icon.mat-button-icon.working{opacity:0}:host button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
         }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 const importsAndExports$r = [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent];
@@ -1423,7 +1462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * bootstrapApplication(AppComponent, {
  *   providers: [
  *     provideDbxProgressButtonGlobalConfig([
- *       { id: 'primary-save', buttonType: 'raised', buttonColor: 'primary' }
+ *       { id: 'primary-save', buttonType: 'raised', spinnerColor: 'primary' }
  *     ])
  *   ]
  * });
@@ -1482,6 +1521,26 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
         super();
         const el = inject((ElementRef));
         this._hasProjectedContent = hasNonTrivialChildNodes(el.nativeElement);
+        const dbxColorDirective = inject(DbxColorDirective, { self: true });
+        let originalColor;
+        let overridden = false;
+        // Pushes the button's resolved color (echo > color input > buttonStyle) into the host DbxColorDirective, which
+        // provides the color tokens + `.dbx-color` marker the button paints from. The directive's own value is restored once
+        // the button stops supplying a color (e.g. an echo ends).
+        effect(() => {
+            const color = this.colorSignal();
+            if (color != null) {
+                if (!overridden) {
+                    originalColor = untracked(dbxColorDirective.dbxColor);
+                    overridden = true;
+                }
+                dbxColorDirective.dbxColor.set(color);
+            }
+            else if (overridden) {
+                dbxColorDirective.dbxColor.set(originalColor);
+                overridden = false;
+            }
+        });
     }
     bar = input(false, { ...(ngDevMode ? { debugName: "bar" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
@@ -1504,6 +1563,27 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
     customContent = input(false, { ...(ngDevMode ? { debugName: "customContent" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     allowClickPropagation = input(false, { ...(ngDevMode ? { debugName: "allowClickPropagation" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     mode = input(...(ngDevMode ? [undefined, { debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * The echo currently being displayed, if any. Echoes only display while the button is neither working nor disabled,
+     * mirroring the echo gating in {@link configSignal}.
+     */
+    _activeEchoSignal = computed(() => {
+        const echo = this.buttonEchoSignal();
+        const working = this.workingSignal();
+        const disabled = !this.isWorkingSignal() && this.disabledSignal();
+        return echo && !working && !disabled ? echo : undefined;
+    }, ...(ngDevMode ? [{ debugName: "_activeEchoSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved button color from the active echo, the {@link color} input, or {@link buttonStyle} (in that order). Pushed
+     * into the host {@link DbxColorDirective}, which provides the color tokens + `.dbx-color` marker that the button's
+     * `dbx-button.dbx-color .mdc-button` SCSS paints from; an active echo's color temporarily takes over those tokens.
+     */
+    colorSignal = computed(() => {
+        const color = this.color();
+        const buttonStyle = this.buttonStyle();
+        const echoColor = this._activeEchoSignal()?.color;
+        return echoColor ?? color ?? buttonStyle?.color;
+    }, ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
     styleTypeSignal = computed(() => {
         const iconOnly = this.iconOnly();
         const raised = this.raised();
@@ -1547,7 +1627,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
         }
         const customSpinnerColorValue = this.customSpinnerColor() ?? buttonStyle?.customSpinnerColor;
         const customSpinnerColor = customSpinnerColorValue ?? customTextColorValue;
-        const buttonColor = this.color() ?? buttonStyle?.color;
+        const buttonColor = this.colorSignal();
         // mat-spinner [color] only accepts ThemePalette/named colors, so coerce a DbxColorConfig or empty-string buttonColor away.
         const buttonColorSpinnerFallback = !buttonColor || isDbxColorConfig(buttonColor) ? undefined : buttonColor;
         const spinnerColor = this.spinnerColor() ?? buttonStyle?.spinnerColor ?? buttonColorSpinnerFallback;
@@ -1572,7 +1652,6 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
             text: textValue ?? '',
             hasTextContent,
             buttonType: buttonType ?? (isIconOnlyButton ? 'icon' : 'basic'),
-            buttonColor,
             barColor: 'accent',
             mode,
             spinnerColor,
@@ -1581,11 +1660,8 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
             ariaLabel
         };
         // Apply button echo when not working and not disabled
-        const echo = this.buttonEchoSignal();
-        if (echo && !working && !disabled) {
-            if (echo.color) {
-                config.buttonColor = echo.color;
-            }
+        const echo = this._activeEchoSignal();
+        if (echo) {
             if (echo.iconOnly && isIconOnlyButton) {
                 // Icon-only button: directly swap icon and color
                 if (echo.icon) {
@@ -1610,7 +1686,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
         return config;
     }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxButtonComponent, isStandalone: true, selector: "dbx-button", inputs: { bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, spinnerColor: { classPropertyName: "spinnerColor", publicName: "spinnerColor", isSignal: true, isRequired: false, transformFunction: null }, customButtonColor: { classPropertyName: "customButtonColor", publicName: "customButtonColor", isSignal: true, isRequired: false, transformFunction: null }, customTextColor: { classPropertyName: "customTextColor", publicName: "customTextColor", isSignal: true, isRequired: false, transformFunction: null }, customSpinnerColor: { classPropertyName: "customSpinnerColor", publicName: "customSpinnerColor", isSignal: true, isRequired: false, transformFunction: null }, basic: { classPropertyName: "basic", publicName: "basic", isSignal: true, isRequired: false, transformFunction: null }, tonal: { classPropertyName: "tonal", publicName: "tonal", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, stroked: { classPropertyName: "stroked", publicName: "stroked", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, fab: { classPropertyName: "fab", publicName: "fab", isSignal: true, isRequired: false, transformFunction: null }, customContent: { classPropertyName: "customContent", publicName: "customContent", isSignal: true, isRequired: false, transformFunction: null }, allowClickPropagation: { classPropertyName: "allowClickPropagation", publicName: "allowClickPropagation", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: provideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxButtonComponent, isStandalone: true, selector: "dbx-button", inputs: { bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, spinnerColor: { classPropertyName: "spinnerColor", publicName: "spinnerColor", isSignal: true, isRequired: false, transformFunction: null }, customButtonColor: { classPropertyName: "customButtonColor", publicName: "customButtonColor", isSignal: true, isRequired: false, transformFunction: null }, customTextColor: { classPropertyName: "customTextColor", publicName: "customTextColor", isSignal: true, isRequired: false, transformFunction: null }, customSpinnerColor: { classPropertyName: "customSpinnerColor", publicName: "customSpinnerColor", isSignal: true, isRequired: false, transformFunction: null }, basic: { classPropertyName: "basic", publicName: "basic", isSignal: true, isRequired: false, transformFunction: null }, tonal: { classPropertyName: "tonal", publicName: "tonal", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, stroked: { classPropertyName: "stroked", publicName: "stroked", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, fab: { classPropertyName: "fab", publicName: "fab", isSignal: true, isRequired: false, transformFunction: null }, customContent: { classPropertyName: "customContent", publicName: "customContent", isSignal: true, isRequired: false, transformFunction: null }, allowClickPropagation: { classPropertyName: "allowClickPropagation", publicName: "allowClickPropagation", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: provideDbxButton(DbxButtonComponent), usesInheritance: true, hostDirectives: [{ directive: DbxColorDirective }], ngImport: i0, template: `
     @if (bar()) {
       <dbx-progress-bar-button (btnClick)="clickButton()" [config]="configSignal()" [allowClickPropagation]="allowClickPropagation()">
         <ng-template [ngTemplateOutlet]="content"></ng-template>
@@ -1647,6 +1723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
   `,
                     providers: provideDbxButton(DbxButtonComponent),
                     imports: [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent, NgTemplateOutlet],
+                    hostDirectives: [DbxColorDirective],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
@@ -6726,7 +6803,10 @@ const DEFAULT_LOADING_PROGRESS_DIAMETER = 96;
  * Renders a Material progress spinner or progress bar to indicate loading.
  *
  * Supports both linear (bar) and circular (spinner) modes with configurable
- * diameter, color, and optional hint text below the indicator.
+ * diameter and optional hint text below the indicator. To color the indicator,
+ * apply `[dbxColor]` directly on the host — its `dbx-loading-progress.dbx-color`
+ * SCSS maps the indicator color to the supplied token. Without `[dbxColor]` the
+ * indicator uses the Material default color.
  *
  * @dbxWebComponent
  * @dbxWebSlug loading-progress
@@ -6739,7 +6819,7 @@ const DEFAULT_LOADING_PROGRESS_DIAMETER = 96;
  *
  * @example
  * ```html
- * <dbx-loading-progress mode="bar"></dbx-loading-progress>
+ * <dbx-loading-progress mode="bar" dbxColor="accent"></dbx-loading-progress>
  * ```
  */
 class DbxLoadingProgressComponent {
@@ -6748,16 +6828,15 @@ class DbxLoadingProgressComponent {
     text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     linear = input(...(ngDevMode ? [undefined, { debugName: "linear" }] : /* istanbul ignore next */ []));
     mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     bufferValue = input(...(ngDevMode ? [undefined, { debugName: "bufferValue" }] : /* istanbul ignore next */ []));
     bmodeSignal = computed(() => this.mode(), ...(ngDevMode ? [{ debugName: "bmodeSignal" }] : /* istanbul ignore next */ []));
     smodeSignal = computed(() => this.mode(), ...(ngDevMode ? [{ debugName: "smodeSignal" }] : /* istanbul ignore next */ []));
     diameterSignal = computed(() => this.diameter() || this.defaultDiameter, ...(ngDevMode ? [{ debugName: "diameterSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLoadingProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxLoadingProgressComponent, isStandalone: true, selector: "dbx-loading-progress", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, bufferValue: { classPropertyName: "bufferValue", publicName: "bufferValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxLoadingProgressComponent, isStandalone: true, selector: "dbx-loading-progress", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, bufferValue: { classPropertyName: "bufferValue", publicName: "bufferValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="loading-progress-view" role="status" [attr.aria-label]="text() || 'Loading'">
-      <span class="loading-progress-view-indicator" [dbxColor]="color()">
+      <span class="loading-progress-view-indicator">
         @switch (linear()) {
           @case (true) {
             <mat-progress-bar [mode]="bmodeSignal()" [bufferValue]="bufferValue()" [value]="value()" style="margin: auto;"></mat-progress-bar>
@@ -6771,7 +6850,7 @@ class DbxLoadingProgressComponent {
         <div class="dbx-loading-progress-hint dbx-hint dbx-small" [ngClass]="{ 'text-center': !linear() }" aria-hidden="true">{{ text() }}</div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLoadingProgressComponent, decorators: [{
             type: Component,
@@ -6779,7 +6858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     selector: 'dbx-loading-progress',
                     template: `
     <div class="loading-progress-view" role="status" [attr.aria-label]="text() || 'Loading'">
-      <span class="loading-progress-view-indicator" [dbxColor]="color()">
+      <span class="loading-progress-view-indicator">
         @switch (linear()) {
           @case (true) {
             <mat-progress-bar [mode]="bmodeSignal()" [bufferValue]="bufferValue()" [value]="value()" style="margin: auto;"></mat-progress-bar>
@@ -6794,11 +6873,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
       }
     </div>
   `,
-                    imports: [MatProgressBar, MatProgressSpinner, NgClass, DbxColorDirective],
+                    imports: [MatProgressBar, MatProgressSpinner, NgClass],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], bufferValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferValue", required: false }] }] } });
+        }], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], bufferValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferValue", required: false }] }] } });
 
 /**
  * Low-level loading component that renders a spinner or progress bar, error state, and projected content.
@@ -6817,7 +6896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  *
  * @example
  * ```html
- * <dbx-basic-loading [loading]="true" color="accent" text="Loading data...">
+ * <dbx-basic-loading [loading]="true" dbxColor="accent" text="Loading data...">
  *   <p>Content appears here when loading is false.</p>
  * </dbx-basic-loading>
  * ```
@@ -6827,7 +6906,6 @@ class DbxBasicLoadingComponent {
     customLoading = viewChild('customLoading', { ...(ngDevMode ? { debugName: "customLoading" } : /* istanbul ignore next */ {}), read: ElementRef });
     diameter = input(...(ngDevMode ? [undefined, { debugName: "diameter" }] : /* istanbul ignore next */ []));
     mode = input(...(ngDevMode ? [undefined, { debugName: "mode" }] : /* istanbul ignore next */ []));
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     linear = input(false, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
     show = input(true, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
@@ -6880,12 +6958,12 @@ class DbxBasicLoadingComponent {
     hasNoCustomErrorSignal = computed(() => !checkNgContentWrapperHasContent(this.customError()), ...(ngDevMode ? [{ debugName: "hasNoCustomErrorSignal" }] : /* istanbul ignore next */ []));
     hasNoCustomLoadingSignal = computed(() => !checkNgContentWrapperHasContent(this.customLoading()), ...(ngDevMode ? [{ debugName: "hasNoCustomLoadingSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxBasicLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxBasicLoadingComponent, isStandalone: true, selector: "dbx-basic-loading", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "customError", first: true, predicate: ["customError"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "customLoading", first: true, predicate: ["customLoading"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@switch (stateSignal()) {\n  @case ('none') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('loading') {\n    <!-- Loading -->\n    <div role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\">\n      <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n    </div>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <div role=\"alert\" aria-live=\"assertive\">\n      <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n    </div>\n  }\n}\n\n<ng-template #loadingTemplate>\n  @if (hasNoCustomLoadingSignal()) {\n    <dbx-loading-progress [mode]=\"modeSignal()\" [value]=\"loadingProgressSignal()\" [color]=\"color()\" [text]=\"text()\" [linear]=\"linear()\" [diameter]=\"diameter()\"></dbx-loading-progress>\n  }\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  @if (hasNoCustomErrorSignal()) {\n    <dbx-error [error]=\"error()\"></dbx-error>\n  }\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "component", type: DbxLoadingProgressComponent, selector: "dbx-loading-progress", inputs: ["diameter", "text", "linear", "mode", "color", "value", "bufferValue"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxBasicLoadingComponent, isStandalone: true, selector: "dbx-basic-loading", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "customError", first: true, predicate: ["customError"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "customLoading", first: true, predicate: ["customLoading"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@switch (stateSignal()) {\n  @case ('none') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('loading') {\n    <!-- Loading -->\n    <div role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\">\n      <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n    </div>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <div role=\"alert\" aria-live=\"assertive\">\n      <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n    </div>\n  }\n}\n\n<ng-template #loadingTemplate>\n  @if (hasNoCustomLoadingSignal()) {\n    <dbx-loading-progress [mode]=\"modeSignal()\" [value]=\"loadingProgressSignal()\" [text]=\"text()\" [linear]=\"linear()\" [diameter]=\"diameter()\"></dbx-loading-progress>\n  }\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  @if (hasNoCustomErrorSignal()) {\n    <dbx-error [error]=\"error()\"></dbx-error>\n  }\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "component", type: DbxLoadingProgressComponent, selector: "dbx-loading-progress", inputs: ["diameter", "text", "linear", "mode", "value", "bufferValue"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxBasicLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-basic-loading', imports: [DbxErrorComponent, DbxLoadingProgressComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (stateSignal()) {\n  @case ('none') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('loading') {\n    <!-- Loading -->\n    <div role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\">\n      <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n    </div>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <div role=\"alert\" aria-live=\"assertive\">\n      <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n    </div>\n  }\n}\n\n<ng-template #loadingTemplate>\n  @if (hasNoCustomLoadingSignal()) {\n    <dbx-loading-progress [mode]=\"modeSignal()\" [value]=\"loadingProgressSignal()\" [color]=\"color()\" [text]=\"text()\" [linear]=\"linear()\" [diameter]=\"diameter()\"></dbx-loading-progress>\n  }\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  @if (hasNoCustomErrorSignal()) {\n    <dbx-error [error]=\"error()\"></dbx-error>\n  }\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n" }]
-        }], propDecorators: { customError: [{ type: i0.ViewChild, args: ['customError', { ...{ read: ElementRef }, isSignal: true }] }], customLoading: [{ type: i0.ViewChild, args: ['customLoading', { ...{ read: ElementRef }, isSignal: true }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
+            args: [{ selector: 'dbx-basic-loading', imports: [DbxErrorComponent, DbxLoadingProgressComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (stateSignal()) {\n  @case ('none') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('loading') {\n    <!-- Loading -->\n    <div role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\">\n      <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n    </div>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <div role=\"alert\" aria-live=\"assertive\">\n      <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n    </div>\n  }\n}\n\n<ng-template #loadingTemplate>\n  @if (hasNoCustomLoadingSignal()) {\n    <dbx-loading-progress [mode]=\"modeSignal()\" [value]=\"loadingProgressSignal()\" [text]=\"text()\" [linear]=\"linear()\" [diameter]=\"diameter()\"></dbx-loading-progress>\n  }\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  @if (hasNoCustomErrorSignal()) {\n    <dbx-error [error]=\"error()\"></dbx-error>\n  }\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n" }]
+        }], propDecorators: { customError: [{ type: i0.ViewChild, args: ['customError', { ...{ read: ElementRef }, isSignal: true }] }], customLoading: [{ type: i0.ViewChild, args: ['customLoading', { ...{ read: ElementRef }, isSignal: true }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
 
 /**
  * Primary loading wrapper that shows a spinner/progress bar while data is being fetched,
@@ -6920,7 +6998,6 @@ class DbxLoadingComponent {
     show = input(...(ngDevMode ? [undefined, { debugName: "show" }] : /* istanbul ignore next */ []));
     text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     mode = input(...(ngDevMode ? [undefined, { debugName: "mode" }] : /* istanbul ignore next */ []));
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     diameter = input(...(ngDevMode ? [undefined, { debugName: "diameter" }] : /* istanbul ignore next */ []));
     linear = input(...(ngDevMode ? [undefined, { debugName: "linear" }] : /* istanbul ignore next */ []));
     loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : /* istanbul ignore next */ []));
@@ -6966,8 +7043,8 @@ class DbxLoadingComponent {
         this._contextOverrideSignal.set(context);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxLoadingComponent, isStandalone: true, selector: "dbx-loading", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <dbx-basic-loading [show]="show()" [color]="color()" [text]="text()" [mode]="mode()" [linear]="linear()" [diameter]="diameter()" [error]="stateSignal().error" [loading]="stateSignal().loading">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxLoadingComponent, isStandalone: true, selector: "dbx-loading", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <dbx-basic-loading [show]="show()" [text]="text()" [mode]="mode()" [linear]="linear()" [diameter]="diameter()" [error]="stateSignal().error" [loading]="stateSignal().loading">
       <ng-content loading select="[loading]"></ng-content>
       @if (showPaddingSignal()) {
         <div class="dbx-loading-linear-done-padding"></div>
@@ -6976,14 +7053,14 @@ class DbxLoadingComponent {
       <ng-content error select="[error]"></ng-content>
       <ng-content errorAction select="[errorAction]"></ng-content>
     </dbx-basic-loading>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxBasicLoadingComponent, selector: "dbx-basic-loading", inputs: ["diameter", "mode", "color", "text", "linear", "show", "loading", "error"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxBasicLoadingComponent, selector: "dbx-basic-loading", inputs: ["diameter", "mode", "text", "linear", "show", "loading", "error"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLoadingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-loading',
                     template: `
-    <dbx-basic-loading [show]="show()" [color]="color()" [text]="text()" [mode]="mode()" [linear]="linear()" [diameter]="diameter()" [error]="stateSignal().error" [loading]="stateSignal().loading">
+    <dbx-basic-loading [show]="show()" [text]="text()" [mode]="mode()" [linear]="linear()" [diameter]="diameter()" [error]="stateSignal().error" [loading]="stateSignal().loading">
       <ng-content loading select="[loading]"></ng-content>
       @if (showPaddingSignal()) {
         <div class="dbx-loading-linear-done-padding"></div>
@@ -6997,7 +7074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
+        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
 /**
  * Links a {@link DbxLoadingComponent} to a {@link DbxActionContextStoreSourceInstance} by forwarding its loading state.
@@ -8903,6 +8980,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Wraps content in a recessed "pit" container with optional scrollable overflow and rounded corners.
  * Useful for displaying bounded content areas such as lists or previews with a constrained height.
  *
+ * Pits round their corners by default. Pass `[rounded]="false"` to square the pit — this applies the
+ * common `.dbx-corners-none` opt-out utility rather than a pit-specific class.
+ *
  * @dbxWebComponent
  * @dbxWebSlug content-pit
  * @dbxWebCategory layout
@@ -8919,7 +8999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class DbxContentPitDirective {
     scrollable = input(...(ngDevMode ? [undefined, { debugName: "scrollable" }] : /* istanbul ignore next */ []));
-    rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
     scrollableHeightSignal = computed(() => {
         let scrollable = this.scrollable();
         let scrollableHeight;
@@ -8950,7 +9030,7 @@ class DbxContentPitDirective {
         return scrollableHeight ?? null;
     }, ...(ngDevMode ? [{ debugName: "scrollableHeightSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxContentPitDirective, isStandalone: true, selector: "dbx-content-pit, [dbxContentPit]", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-content-pit-scrollable": "scrollableHeightSignal() != null", "class.dbx-content-pit-rounded": "rounded()", "style.max-height": "scrollableHeightSignal()" }, classAttribute: "d-block dbx-content-pit" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxContentPitDirective, isStandalone: true, selector: "dbx-content-pit, [dbxContentPit]", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-content-pit-scrollable": "scrollableHeightSignal() != null", "class.dbx-corners-none": "!rounded()", "style.max-height": "scrollableHeightSignal()" }, classAttribute: "d-block dbx-content-pit" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPitDirective, decorators: [{
             type: Directive,
@@ -8959,7 +9039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     host: {
                         class: 'd-block dbx-content-pit',
                         '[class.dbx-content-pit-scrollable]': 'scrollableHeightSignal() != null',
-                        '[class.dbx-content-pit-rounded]': 'rounded()',
+                        '[class.dbx-corners-none]': '!rounded()',
                         '[style.max-height]': 'scrollableHeightSignal()'
                     },
                     standalone: true
@@ -9028,7 +9108,7 @@ class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective {
         this.expandPreview.update((value) => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDownloadTextViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, showExpandPreviewButton: { classPropertyName: "showExpandPreviewButton", publicName: "showExpandPreviewButton", isSignal: true, isRequired: false, transformFunction: null }, expandPreview: { classPropertyName: "expandPreview", publicName: "expandPreview", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandPreview: "expandPreviewChange" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        @if (showExpandPreviewButton()) {\n          <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n        }\n        {{ contentDataSignal() }}\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, showExpandPreviewButton: { classPropertyName: "showExpandPreviewButton", publicName: "showExpandPreviewButton", isSignal: true, isRequired: false, transformFunction: null }, expandPreview: { classPropertyName: "expandPreview", publicName: "expandPreview", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandPreview: "expandPreviewChange" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        @if (showExpandPreviewButton()) {\n          <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n        }\n        {{ contentDataSignal() }}\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDownloadTextViewComponent, decorators: [{
             type: Component,
@@ -9619,7 +9699,7 @@ class DbxAvatarViewComponent {
         <mat-icon>{{ avatarIconSignal() }}</mat-icon>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxAvatarViewComponent, decorators: [{
             type: Component,
@@ -9851,7 +9931,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }], propDecorators: { context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], avatarSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSelector", required: false }] }], avatarUid: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUid", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarName", required: false }] }], avatarKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarKey", required: false }] }], avatarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIcon", required: false }] }], avatarStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarStyle", required: false }] }], avatarSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSize", required: false }] }], avatarHideOnError: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarHideOnError", required: false }] }] } });
 
 /**
- * Renders a horizontal bar with a themed background color, used to visually group or separate content.
+ * Renders a horizontal bar used to visually group or separate content.
+ *
+ * To give the bar a themed background apply `[dbxColor]` (optionally with `[dbxColorTone]`) directly on the host —
+ * the bar paints itself from the supplied color tokens via its `.dbx-bar.dbx-color` SCSS. The directive itself only
+ * applies the `.dbx-bar` layout class.
  *
  * @dbxWebComponent
  * @dbxWebSlug bar
@@ -9864,51 +9948,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  *
  * @example
  * ```html
- * <dbx-bar>
- *   <dbx-button text="Save" raised color="primary"></dbx-button>
+ * <dbx-bar dbxColor="primary">
+ *   <dbx-button text="Save" raised></dbx-button>
  *   <dbx-button-spacer></dbx-button-spacer>
  *   <dbx-button text="Cancel" stroked></dbx-button>
  * </dbx-bar>
  * ```
  */
 class DbxBarDirective {
-    _colorService = inject(DbxColorService, { optional: true });
-    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
-    cssClassSignal = computed(() => {
-        const color = this.color();
-        return color ? dbxColorBackground(color) : '';
-    }, ...(ngDevMode ? [{ debugName: "cssClassSignal" }] : /* istanbul ignore next */ []));
-    _configSignal = computed(() => {
-        const value = this.color();
-        return isDbxColorConfig(value) ? (this._colorService?.expandColorConfig(value) ?? value) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "_configSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Inline `--dbx-bg-color-current` value applied when a {@link DbxColorConfig} is bound. Resolves to `null` for named-color strings.
-     */
-    bgColorStyleSignal = computed(() => this._configSignal()?.color ?? null, ...(ngDevMode ? [{ debugName: "bgColorStyleSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Inline `--dbx-color-current` value applied when a {@link DbxColorConfig} is bound. Resolves to `null` for named-color strings.
-     */
-    colorStyleSignal = computed(() => this._configSignal()?.contrast ?? null, ...(ngDevMode ? [{ debugName: "colorStyleSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxBarDirective, isStandalone: true, selector: "dbx-bar,[dbxBar]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClassSignal()", "style.--dbx-bg-color-current": "bgColorStyleSignal()", "style.--dbx-color-current": "colorStyleSignal()" }, classAttribute: "dbx-bar" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: DbxBarDirective, isStandalone: true, selector: "dbx-bar,[dbxBar]", host: { classAttribute: "dbx-bar" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxBarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'dbx-bar,[dbxBar]',
                     host: {
-                        class: 'dbx-bar',
-                        '[class]': 'cssClassSignal()',
-                        '[style.--dbx-bg-color-current]': 'bgColorStyleSignal()',
-                        '[style.--dbx-color-current]': 'colorStyleSignal()'
+                        class: 'dbx-bar'
                     },
                     standalone: true
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+        }] });
 
 /**
- * A themed header bar displaying an optional icon and text label, useful as a section divider.
+ * A header bar displaying an optional icon and text label, useful as a section divider.
+ *
+ * To give it a themed background apply `[dbxColor]` directly on the host — the inner `<dbx-bar>` paints from the
+ * inherited tokens via the `dbx-bar-header.dbx-color .dbx-bar` SCSS.
  *
  * @dbxWebComponent
  * @dbxWebSlug bar-header
@@ -9921,7 +9987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  *
  * @example
  * ```html
- * <dbx-bar-header header="Members" icon="group">
+ * <dbx-bar-header header="Members" icon="group" dbxColor="primary">
  *   <button mat-icon-button><mat-icon>add</mat-icon></button>
  * </dbx-bar-header>
  * ```
@@ -9929,10 +9995,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 class DbxBarHeaderComponent {
     text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxBarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxBarHeaderComponent, isStandalone: true, selector: "dbx-bar-header", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-bar-header dbx-hint" }, ngImport: i0, template: `
-    <dbx-bar [color]="color()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxBarHeaderComponent, isStandalone: true, selector: "dbx-bar-header", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-bar-header dbx-hint" }, ngImport: i0, template: `
+    <dbx-bar>
       @if (icon()) {
         <mat-icon class="button-spacer">{{ icon() }}</mat-icon>
       }
@@ -9941,14 +10006,14 @@ class DbxBarHeaderComponent {
       }
       <ng-content></ng-content>
     </dbx-bar>
-  `, isInline: true, dependencies: [{ kind: "directive", type: DbxBarDirective, selector: "dbx-bar,[dbxBar]", inputs: ["color"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxBarDirective, selector: "dbx-bar,[dbxBar]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxBarHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-bar-header',
                     template: `
-    <dbx-bar [color]="color()">
+    <dbx-bar>
       @if (icon()) {
         <mat-icon class="button-spacer">{{ icon() }}</mat-icon>
       }
@@ -9965,11 +10030,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /**
  * A page-level toolbar with left and right content slots, built on Angular Material's mat-toolbar.
  *
+ * To give it a themed background apply `[dbxColor]` directly on the host — the inner `mat-toolbar` maps its
+ * `--mat-toolbar-*` colors to the inherited tokens via the `dbx-pagebar.dbx-color mat-toolbar` SCSS.
+ *
  * @dbxWebComponent
  * @dbxWebSlug pagebar
  * @dbxWebCategory layout
@@ -9981,7 +10049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  *
  * @example
  * ```html
- * <dbx-pagebar>
+ * <dbx-pagebar dbxColor="primary">
  *   <h2>Settings</h2>
  *   <span class="spacer"></span>
  *   <button mat-stroked-button>Save</button>
@@ -9989,36 +10057,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * ```
  */
 class DbxPagebarComponent {
-    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
-    cssClassSignal = computed(() => {
-        const color = this.color();
-        return color ? `dbx-bar-${color}` : '';
-    }, ...(ngDevMode ? [{ debugName: "cssClassSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPagebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: DbxPagebarComponent, isStandalone: true, selector: "dbx-pagebar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <mat-toolbar class="dbx-pagebar dbx-flex-bar" [ngClass]="cssClassSignal()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxPagebarComponent, isStandalone: true, selector: "dbx-pagebar", ngImport: i0, template: `
+    <mat-toolbar class="dbx-pagebar dbx-flex-bar">
       <ng-content select="[left]"></ng-content>
       <span class="spacer"></span>
       <ng-content select="[right]"></ng-content>
     </mat-toolbar>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPagebarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-pagebar',
                     template: `
-    <mat-toolbar class="dbx-pagebar dbx-flex-bar" [ngClass]="cssClassSignal()">
+    <mat-toolbar class="dbx-pagebar dbx-flex-bar">
       <ng-content select="[left]"></ng-content>
       <span class="spacer"></span>
       <ng-content select="[right]"></ng-content>
     </mat-toolbar>
   `,
-                    imports: [NgClass, MatToolbarModule],
+                    imports: [MatToolbarModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+        }] });
 
 const importsAndExports$d = [DbxBarDirective, DbxBarHeaderComponent, DbxPagebarComponent];
 /**
@@ -11281,7 +11344,6 @@ function resolveSideNavDisplayMode(mode, allowedModes) {
 class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
     _sidenavSub = cleanSubscription();
     _screenMediaService = inject(DbxScreenMediaService);
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     position = input('start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     /**
      * Overrides the responsive display mode. When set, the sidenav ignores screen-width breakpoints and uses this mode instead.
@@ -11405,9 +11467,9 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSidenavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: DbxSidenavComponent, isStandalone: true, selector: "dbx-sidenav", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, allowedModes: { classPropertyName: "allowedModes", publicName: "allowedModes", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], exportAs: ["sidenav"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: DbxSidenavComponent, isStandalone: true, selector: "dbx-sidenav", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, allowedModes: { classPropertyName: "allowedModes", publicName: "allowedModes", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], exportAs: ["sidenav"], usesInheritance: true, ngImport: i0, template: `
     <mat-sidenav-container class="dbx-sidenav" [ngClass]="cssClassesSignal()">
-      <mat-sidenav [dbxColor]="color()" [position]="position()" [disableClose]="disableBackdropSignal()" [mode]="drawerSignal()">
+      <mat-sidenav [position]="position()" [disableClose]="disableBackdropSignal()" [mode]="drawerSignal()">
         <ng-content select="[top]"></ng-content>
         <dbx-anchor-list class="dbx-sidenav-anchor-list" [anchors]="anchors()"></dbx-anchor-list>
         <span class="spacer"></span>
@@ -11418,7 +11480,7 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
         <ng-content></ng-content>
       </mat-sidenav-content>
     </mat-sidenav-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: DbxRouterAnchorModule }, { kind: "component", type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: DbxRouterAnchorModule }, { kind: "component", type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSidenavComponent, decorators: [{
             type: Component,
@@ -11427,7 +11489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     exportAs: 'sidenav',
                     template: `
     <mat-sidenav-container class="dbx-sidenav" [ngClass]="cssClassesSignal()">
-      <mat-sidenav [dbxColor]="color()" [position]="position()" [disableClose]="disableBackdropSignal()" [mode]="drawerSignal()">
+      <mat-sidenav [position]="position()" [disableClose]="disableBackdropSignal()" [mode]="drawerSignal()">
         <ng-content select="[top]"></ng-content>
         <dbx-anchor-list class="dbx-sidenav-anchor-list" [anchors]="anchors()"></dbx-anchor-list>
         <span class="spacer"></span>
@@ -11439,11 +11501,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
       </mat-sidenav-content>
     </mat-sidenav-container>
   `,
-                    imports: [NgClass, DbxColorDirective, MatSidenavModule, DbxRouterAnchorModule, DbxAnchorListComponent],
+                    imports: [NgClass, MatSidenavModule, DbxRouterAnchorModule, DbxAnchorListComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], sidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenav), { isSignal: true }] }], allowedModes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedModes", required: false }] }], anchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchors", required: false }] }] } });
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], sidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenav), { isSignal: true }] }], allowedModes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedModes", required: false }] }], anchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchors", required: false }] }] } });
 
 /**
  * Default icon displayed on the sidenav toggle button.
@@ -11499,7 +11561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  *
  * @example
  * ```html
- * <dbx-sidenav-pagebar sidenavMenuIcon="menu" color="primary">
+ * <dbx-sidenav-pagebar sidenavMenuIcon="menu" dbxColor="primary">
  *   <span left>Left Content</span>
  *   <span>Right Content</span>
  * </dbx-sidenav-pagebar>
@@ -11509,7 +11571,7 @@ class DbxSidenavPagebarComponent extends DbxPagebarComponent {
     sidenavMenuIcon = input(...(ngDevMode ? [undefined, { debugName: "sidenavMenuIcon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSidenavPagebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: DbxSidenavPagebarComponent, isStandalone: true, selector: "dbx-sidenav-pagebar", inputs: { sidenavMenuIcon: { classPropertyName: "sidenavMenuIcon", publicName: "sidenavMenuIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <dbx-pagebar class="dbx-sidenav-pagebar" [color]="color()">
+    <dbx-pagebar class="dbx-sidenav-pagebar">
       <span left>
         <dbx-sidenav-button [sidenavMenuIcon]="sidenavMenuIcon()"></dbx-sidenav-button>
         <dbx-button-spacer></dbx-button-spacer>
@@ -11517,14 +11579,14 @@ class DbxSidenavPagebarComponent extends DbxPagebarComponent {
       </span>
       <ng-content right></ng-content>
     </dbx-pagebar>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxPagebarComponent, selector: "dbx-pagebar", inputs: ["color"] }, { kind: "component", type: DbxSidenavButtonComponent, selector: "dbx-sidenav-button", inputs: ["sidenavMenuIcon"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxPagebarComponent, selector: "dbx-pagebar" }, { kind: "component", type: DbxSidenavButtonComponent, selector: "dbx-sidenav-button", inputs: ["sidenavMenuIcon"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSidenavPagebarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-sidenav-pagebar',
                     template: `
-    <dbx-pagebar class="dbx-sidenav-pagebar" [color]="color()">
+    <dbx-pagebar class="dbx-sidenav-pagebar">
       <span left>
         <dbx-sidenav-button [sidenavMenuIcon]="sidenavMenuIcon()"></dbx-sidenav-button>
         <dbx-button-spacer></dbx-button-spacer>
@@ -11562,15 +11624,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class DbxSidenavPageComponent {
     parent = inject(DbxSidenavComponent);
-    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     sidenavMenuIcon = input(...(ngDevMode ? [undefined, { debugName: "sidenavMenuIcon" }] : /* istanbul ignore next */ []));
     mobileOnly = input(false, ...(ngDevMode ? [{ debugName: "mobileOnly" }] : /* istanbul ignore next */ []));
     mobileOnly$ = toObservable(this.mobileOnly);
     hidePagebar$ = this.mobileOnly$.pipe(switchMap((mobileOnly) => (mobileOnly ? this.parent.mode$.pipe(map((x) => x !== SideNavDisplayMode.MOBILE)) : of(false))), shareReplay(1));
     hidePagebarSignal = toSignal(this.hidePagebar$, { initialValue: false });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSidenavPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: DbxSidenavPageComponent, isStandalone: true, selector: "dbx-sidenav-page", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, sidenavMenuIcon: { classPropertyName: "sidenavMenuIcon", publicName: "sidenavMenuIcon", isSignal: true, isRequired: false, transformFunction: null }, mobileOnly: { classPropertyName: "mobileOnly", publicName: "mobileOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-pagebar-hide": "hidePagebarSignal()" }, classAttribute: "d-block" }, ngImport: i0, template: `
-    <dbx-sidenav-pagebar [sidenavMenuIcon]="sidenavMenuIcon()" [color]="color()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: DbxSidenavPageComponent, isStandalone: true, selector: "dbx-sidenav-page", inputs: { sidenavMenuIcon: { classPropertyName: "sidenavMenuIcon", publicName: "sidenavMenuIcon", isSignal: true, isRequired: false, transformFunction: null }, mobileOnly: { classPropertyName: "mobileOnly", publicName: "mobileOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-pagebar-hide": "hidePagebarSignal()" }, classAttribute: "d-block" }, ngImport: i0, template: `
+    <dbx-sidenav-pagebar [sidenavMenuIcon]="sidenavMenuIcon()">
       <ng-content left select="[navLeft]"></ng-content>
       <ng-content select="[navRight]"></ng-content>
     </dbx-sidenav-pagebar>
@@ -11584,7 +11645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             args: [{
                     selector: 'dbx-sidenav-page',
                     template: `
-    <dbx-sidenav-pagebar [sidenavMenuIcon]="sidenavMenuIcon()" [color]="color()">
+    <dbx-sidenav-pagebar [sidenavMenuIcon]="sidenavMenuIcon()">
       <ng-content left select="[navLeft]"></ng-content>
       <ng-content select="[navRight]"></ng-content>
     </dbx-sidenav-pagebar>
@@ -11600,7 +11661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], sidenavMenuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavMenuIcon", required: false }] }], mobileOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOnly", required: false }] }] } });
+        }], propDecorators: { sidenavMenuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavMenuIcon", required: false }] }], mobileOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOnly", required: false }] }] } });
 
 /**
  * Structural directive that conditionally renders its host element based on the current {@link SideNavDisplayMode} of the parent {@link DbxSidenavComponent}.
@@ -14092,7 +14153,7 @@ class DbxListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxListComponent, isStandalone: true, selector: "dbx-list", inputs: { padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentScrolled: "contentScrolled" }, host: { attributes: { "role": "list" }, properties: { "class.dbx-list-padded": "padded()" }, classAttribute: "d-block dbx-list" }, ngImport: i0, template: "<dbx-loading [context]=\"context\" [linear]=\"true\"></dbx-loading>\n<div dbxListInternalContent [hide]=\"hideContentSignal()\" infinite-scroll [infiniteScrollDistance]=\"infiniteScrollDistanceSignal()\" [infiniteScrollUpDistance]=\"infiniteScrollDistanceSignal()\" [infiniteScrollThrottle]=\"infiniteScrollThrottleSignal()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\" (scrolledUp)=\"onScrollUp()\">\n  <ng-content select=\"[top]\"></ng-content>\n  <dbx-injection [config]=\"injectedComponentConfigSignal()\"></dbx-injection>\n  <ng-content select=\"[bottom]\"></ng-content>\n  @if (isEndSignal()) {\n    <ng-content select=\"[end]\"></ng-content>\n  }\n</div>\n@if (isEmptyAndNotLoadingSignal()) {\n  <ng-content select=\"[empty]\"></ng-content>\n}\n@if (isEmptyLoadingSignal()) {\n  <ng-content select=\"[emptyLoading]\"></ng-content>\n}\n", dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: DbxListInternalContentDirective, selector: "[dbxListInternalContent]", inputs: ["hide"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxListComponent, isStandalone: true, selector: "dbx-list", inputs: { padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentScrolled: "contentScrolled" }, host: { attributes: { "role": "list" }, properties: { "class.dbx-list-padded": "padded()" }, classAttribute: "d-block dbx-list" }, ngImport: i0, template: "<dbx-loading [context]=\"context\" [linear]=\"true\"></dbx-loading>\n<div dbxListInternalContent [hide]=\"hideContentSignal()\" infinite-scroll [infiniteScrollDistance]=\"infiniteScrollDistanceSignal()\" [infiniteScrollUpDistance]=\"infiniteScrollDistanceSignal()\" [infiniteScrollThrottle]=\"infiniteScrollThrottleSignal()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\" (scrolledUp)=\"onScrollUp()\">\n  <ng-content select=\"[top]\"></ng-content>\n  <dbx-injection [config]=\"injectedComponentConfigSignal()\"></dbx-injection>\n  <ng-content select=\"[bottom]\"></ng-content>\n  @if (isEndSignal()) {\n    <ng-content select=\"[end]\"></ng-content>\n  }\n</div>\n@if (isEmptyAndNotLoadingSignal()) {\n  <ng-content select=\"[empty]\"></ng-content>\n}\n@if (isEmptyLoadingSignal()) {\n  <ng-content select=\"[emptyLoading]\"></ng-content>\n}\n", dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: DbxListInternalContentDirective, selector: "[dbxListInternalContent]", inputs: ["hide"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxListComponent, decorators: [{
             type: Component,
@@ -14701,9 +14762,21 @@ class DbxStyleService {
     _defaultConfig = new BehaviorSubject(inject(DEFAULT_DBX_STYLE_CONFIG_TOKEN));
     _config = new BehaviorSubject(undefined);
     _styleClassSuffix = new BehaviorSubject(undefined);
+    _supplement = new BehaviorSubject(undefined);
     config$ = this._config.pipe(switchMap((x) => x ?? this._defaultConfig), filterMaybe(), distinctUntilChanged(), shareReplay(1));
     styleClassSuffix$ = this._styleClassSuffix.pipe(distinctUntilChanged(), shareReplay(1));
     styleClassName$ = this.getStyleClassWithConfig(this.config$);
+    /**
+     * The currently active style supplement, or undefined when none is set.
+     */
+    supplement$ = this._supplement.pipe(switchMap((x) => x ?? of(undefined)), distinctUntilChanged(), shareReplay(1));
+    /**
+     * The flattened body application: the root style class plus any supplement classes, alongside the supplement inline styles.
+     */
+    styleApplication$ = combineLatest([this.styleClassName$, this.supplement$]).pipe(map(([styleClassName, supplement]) => ({
+        classes: [styleClassName, ...(supplement?.classes ?? [])],
+        style: supplement?.style ?? {}
+    })), shareReplay(1));
     /**
      * Returns the style class given the input configuration.
      *
@@ -14788,10 +14861,29 @@ class DbxStyleService {
             this._config.next(undefined);
         }
     }
+    /**
+     * Sets the active style supplement (classes + inline styles) layered on top of the configured style on the body.
+     *
+     * @param supplement - A supplement value or observable, or nullish to clear the current supplement.
+     */
+    setSupplement(supplement) {
+        this._supplement.next(supplement == null ? undefined : asObservable(supplement));
+    }
+    /**
+     * Clears the active supplement if it matches the given reference.
+     *
+     * @param supplement - The supplement reference to compare against the current supplement.
+     */
+    unsetSupplement(supplement) {
+        if (this._supplement.value === supplement) {
+            this._supplement.next(undefined);
+        }
+    }
     destroy() {
         this._defaultConfig.complete();
         this._config.complete();
         this._styleClassSuffix.complete();
+        this._supplement.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleService });
@@ -14923,9 +15015,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }], ctorParameters: () => [] });
 
 /**
- * Applies the current application style class from {@link DbxStyleService} to the document `<body>` element.
+ * Applies the current {@link DbxStyleService} body application — the active style class, any supplement classes, and
+ * supplement inline styles (CSS custom properties) — to the document `<body>` element.
  *
- * Place this directive on a root-level element so that the body tag receives the active style class.
+ * Place this directive on a root-level element so that the body tag receives the active style.
  *
  * @dbxWebComponent
  * @dbxWebSlug style-body
@@ -14943,17 +15036,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 class DbxStyleBodyDirective {
     _styleService = inject(DbxStyleService);
     _renderer = inject(Renderer2);
-    _styleClassName = undefined;
+    _classes = [];
+    _styleKeys = [];
     constructor() {
-        cleanSubscription(this._styleService.styleClassName$.pipe(delay(0)).subscribe((newClassStyleToApply) => {
-            const currentStyle = this._styleClassName;
-            if (currentStyle) {
-                this._renderer.removeClass(document.body, currentStyle);
-            }
-            if (newClassStyleToApply) {
-                this._renderer.addClass(document.body, newClassStyleToApply);
-            }
-            this._styleClassName = newClassStyleToApply;
+        cleanSubscription(this._styleService.styleApplication$.pipe(delay(0)).subscribe((application) => {
+            const nextClasses = application.classes.filter(Boolean);
+            const nextClassSet = new Set(nextClasses);
+            // Diff classes: remove ones no longer present, add new ones.
+            this._classes.forEach((currentClass) => {
+                if (!nextClassSet.has(currentClass)) {
+                    this._renderer.removeClass(document.body, currentClass);
+                }
+            });
+            const currentClassSet = new Set(this._classes);
+            nextClasses.forEach((nextClass) => {
+                if (!currentClassSet.has(nextClass)) {
+                    this._renderer.addClass(document.body, nextClass);
+                }
+            });
+            this._classes = nextClasses;
+            // Diff inline styles: custom properties (e.g. --mat-sys-*) require setProperty/removeProperty.
+            const bodyStyle = document.body.style;
+            const nextStyle = application.style;
+            const nextStyleKeys = Object.keys(nextStyle).filter((key) => nextStyle[key] != null);
+            const nextStyleKeySet = new Set(nextStyleKeys);
+            this._styleKeys.forEach((currentKey) => {
+                if (!nextStyleKeySet.has(currentKey)) {
+                    bodyStyle.removeProperty(currentKey);
+                }
+            });
+            nextStyleKeys.forEach((key) => {
+                bodyStyle.setProperty(key, String(nextStyle[key]));
+            });
+            this._styleKeys = nextStyleKeys;
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -15254,16 +15369,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
  * @dbxWebContentProjection Optional fallback content rendered when `icon` is not supplied (e.g. a custom icon component).
  * @dbxWebMinimalExample ```html
- * <dbx-icon-tile [icon]="'verified'" [dbxColor]="'success'"></dbx-icon-tile>
+ * <dbx-icon-tile [icon]="'verified'" dbxColor="success"></dbx-icon-tile>
  * ```
  *
  * @example
  * ```html
- * <dbx-icon-tile [icon]="'check'" [dbxColor]="'primary'" [dbxColorTone]="18"></dbx-icon-tile>
+ * <dbx-icon-tile [icon]="'check'" dbxColor="primary" [dbxColorTone]="18"></dbx-icon-tile>
  *
- * <dbx-icon-tile [icon]="'star'" [round]="true" [dbxColor]="'accent'"></dbx-icon-tile>
+ * <dbx-icon-tile [icon]="'star'" [round]="true" dbxColor="accent"></dbx-icon-tile>
  *
- * <dbx-icon-tile [dbxColor]="'accent'">
+ * <dbx-icon-tile dbxColor="accent">
  *   <my-custom-glyph></my-custom-glyph>
  * </dbx-icon-tile>
  * ```
@@ -15327,7 +15442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * @dbxWebRelated icon-tile, dbx-color, list-two-line-item
  * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
  * @dbxWebMinimalExample ```html
- * <div dbxIconTile [dbxColor]="'primary'" [dbxColorTone]="18">
+ * <div dbxIconTile dbxColor="primary" [dbxColorTone]="18">
  *   <mat-icon>star</mat-icon>
  * </div>
  * ```
@@ -15335,7 +15450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * @example
  * ```html
  * <div class="dbx-list-two-line-item dbx-list-two-line-item-with-icon">
- *   <div class="item-icon" dbxIconTile [dbxColor]="'primary'" [dbxColorTone]="18">
+ *   <div class="item-icon" dbxIconTile dbxColor="primary" [dbxColorTone]="18">
  *     <mat-icon>check_circle</mat-icon>
  *   </div>
  *   <div class="item-left">
@@ -15446,7 +15561,7 @@ class DbxStepBlockComponent {
       }
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxIconTileComponent, selector: "dbx-icon-tile", inputs: ["icon", "round"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxIconTileComponent, selector: "dbx-icon-tile", inputs: ["icon", "round"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStepBlockComponent, decorators: [{
             type: Component,
@@ -15687,6 +15802,11 @@ const DEFAULT_DBX_CHIP_TONE = 18;
 /**
  * Renders a styled chip element with optional small, block, and color modes.
  *
+ * Hosts a {@link DbxColorDirective} that provides the color tokens + `.dbx-color` marker the chip's
+ * `.dbx-chip.dbx-color` SCSS paints from. The color can be supplied either through the {@link color}/{@link display}
+ * inputs (pushed into the host directive) or by binding `[dbxColor]` directly; the chip's tone handling (default
+ * {@link DEFAULT_DBX_CHIP_TONE} → tonal text) applies to both.
+ *
  * @dbxWebComponent
  * @dbxWebSlug chip
  * @dbxWebCategory text
@@ -15702,11 +15822,31 @@ const DEFAULT_DBX_CHIP_TONE = 18;
  * ```
  */
 class DbxChipDirective {
-    _colorService = inject(DbxColorService, { optional: true });
+    _dbxColorDirective = inject(DbxColorDirective, { self: true });
+    constructor() {
+        let originalColor;
+        let overridden = false;
+        // Pushes the chip's resolved color (color input > display config) into the host DbxColorDirective so it stays the
+        // single token provider on the element. The directive's own value is restored once the chip stops supplying a color.
+        effect(() => {
+            const color = this.colorSignal();
+            if (color != null) {
+                if (!overridden) {
+                    originalColor = untracked(this._dbxColorDirective.dbxColor);
+                    overridden = true;
+                }
+                this._dbxColorDirective.dbxColor.set(color);
+            }
+            else if (overridden) {
+                this._dbxColorDirective.dbxColor.set(originalColor);
+                overridden = false;
+            }
+        });
+    }
     small = input(...(ngDevMode ? [undefined, { debugName: "small" }] : /* istanbul ignore next */ []));
     block = input(...(ngDevMode ? [undefined, { debugName: "block" }] : /* istanbul ignore next */ []));
     /**
-     * Theme color or {@link DbxColorConfig} applied to the chip background via {@link dbxColorBackground}.
+     * Theme color or {@link DbxColorConfig} applied to the chip, pushed into the host {@link DbxColorDirective}.
      *
      * When {@link display} is also set, its color is used as a fallback.
      */
@@ -15727,44 +15867,32 @@ class DbxChipDirective {
         const display = this.display();
         return this.color() ?? display?.color;
     }, ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
-    _configSignal = computed(() => {
-        const value = this.colorSignal();
-        return isDbxColorConfig(value) ? (this._colorService?.expandColorConfig(value) ?? value) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "_configSignal" }] : /* istanbul ignore next */ []));
     /**
-     * Inline `--dbx-bg-color-current` value applied when a {@link DbxColorConfig} is bound. Resolves to `null` for named-color strings so the named `.dbx-{color}-bg` class supplies the variable instead.
+     * The effective color on the host {@link DbxColorDirective} — either pushed from {@link colorSignal} or bound
+     * directly via `[dbxColor]`. Drives the chip's tone/tonal handling.
      */
-    bgColorStyleSignal = computed(() => this._configSignal()?.color ?? null, ...(ngDevMode ? [{ debugName: "bgColorStyleSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Inline `--dbx-color-current` value applied when a {@link DbxColorConfig} is bound. Resolves to `null` for named-color strings.
-     */
-    colorStyleSignal = computed(() => this._configSignal()?.contrast ?? null, ...(ngDevMode ? [{ debugName: "colorStyleSignal" }] : /* istanbul ignore next */ []));
+    effectiveColorSignal = computed(() => this._dbxColorDirective.dbxColor(), ...(ngDevMode ? [{ debugName: "effectiveColorSignal" }] : /* istanbul ignore next */ []));
     toneSignal = computed(() => {
         const display = this.display();
-        const _config = this._configSignal();
-        return this.tone() ?? display?.tone ?? _config?.tone ?? DEFAULT_DBX_CHIP_TONE;
+        return this.tone() ?? display?.tone ?? this._dbxColorDirective.effectiveToneSignal() ?? DEFAULT_DBX_CHIP_TONE;
     }, ...(ngDevMode ? [{ debugName: "toneSignal" }] : /* istanbul ignore next */ []));
     styleSignal = computed(() => {
         const display = this.display();
         const small = this.small() ?? display?.small;
         const block = this.block() ?? display?.block;
-        const color = this.colorSignal();
         let style = small ? 'dbx-chip-small' : '';
         if (block) {
             style = style + ' dbx-chip-block';
         }
-        if (color) {
-            style = style + ' ' + dbxColorBackground(color);
-        }
         return style;
     }, ...(ngDevMode ? [{ debugName: "styleSignal" }] : /* istanbul ignore next */ []));
     /**
-     * Sets `--dbx-color-bg-tone` on the host to control the background opacity via `color-mix` in the `-bg` class mixin.
+     * Sets `--dbx-color-bg-tone` on the host to control the background opacity of the painted chip surface.
      * Only applied when a color is set.
      */
     bgToneStyleSignal = computed(() => {
         const tone = this.toneSignal();
-        const color = this.colorSignal();
+        const color = this.effectiveColorSignal();
         if (color) {
             return `${tone}%`;
         }
@@ -15777,11 +15905,11 @@ class DbxChipDirective {
      */
     isTonalSignal = computed(() => {
         const tone = this.toneSignal();
-        const color = this.colorSignal();
+        const color = this.effectiveColorSignal();
         return Boolean(color) && tone < 100;
     }, ...(ngDevMode ? [{ debugName: "isTonalSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxChipDirective, isStandalone: true, selector: "dbx-chip", inputs: { small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "styleSignal()", "class.dbx-color-tonal": "isTonalSignal()", "style.--dbx-color-bg-tone": "bgToneStyleSignal()", "style.--dbx-bg-color-current": "bgColorStyleSignal()", "style.--dbx-color-current": "colorStyleSignal()" }, classAttribute: "dbx-chip mat-standard-chip" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxChipDirective, isStandalone: true, selector: "dbx-chip", inputs: { small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "styleSignal()", "class.dbx-color-tonal": "isTonalSignal()", "style.--dbx-color-bg-tone": "bgToneStyleSignal()" }, classAttribute: "dbx-chip" }, hostDirectives: [{ directive: DbxColorDirective }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipDirective, decorators: [{
             type: Directive,
@@ -15789,16 +15917,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'dbx-chip',
                     host: {
-                        class: 'dbx-chip mat-standard-chip',
+                        class: 'dbx-chip',
                         '[class]': 'styleSignal()',
                         '[class.dbx-color-tonal]': 'isTonalSignal()',
-                        '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()',
-                        '[style.--dbx-bg-color-current]': 'bgColorStyleSignal()',
-                        '[style.--dbx-color-current]': 'colorStyleSignal()'
+                        '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()'
                     },
+                    hostDirectives: [DbxColorDirective],
                     standalone: true
                 }]
-        }], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
 
 /**
  * Renders a row of colored chips from an array of {@link DbxChipDisplay} items.
@@ -15994,7 +16121,7 @@ class DbxNumberWithLimitComponent {
       }
       <span>{{ suffixSignal() }}</span>
     </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxNumberWithLimitComponent, decorators: [{
             type: Component,
@@ -16448,7 +16575,7 @@ class DbxZipBlobPreviewComponent {
         this.selectedNodeSignal.set(selectedNode?.parent);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxZipBlobPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxZipBlobPreviewComponent, isStandalone: true, selector: "dbx-zip-blob-preview", inputs: { blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, downloadFileName: { classPropertyName: "downloadFileName", publicName: "downloadFileName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n  <div class=\"dbx-flex-bar dbx-zip-blob-preview-toolbar\">\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"arrow_upward\" text=\"Back\" (buttonClick)=\"backClicked()\"></dbx-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"home\" text=\"Home\" (buttonClick)=\"homeClicked()\"></dbx-button>\n    <dbx-spacer></dbx-spacer>\n    @if (downloadZipFileBlobButtonConfigSignal()) {\n      <dbx-download-blob-button [config]=\"downloadZipFileBlobButtonConfigSignal()\"></dbx-download-blob-button>\n    }\n  </div>\n  <dbx-bar-header class=\"dbx-zip-blob-preview-header\" [icon]=\"selectedNodeIconSignal()\" [text]=\"selectedNodePathSignal()\"></dbx-bar-header>\n  <div class=\"dbx-zip-blob-preview-content\">\n    @switch (modeSignal()) {\n      @case ('view_directory') {\n        <dbx-zip-preview-file-entry-list [state]=\"listEntriesState$\" [dbxListTitleGroup]=\"listTitleGroupDelegate\" [dbxListItemModifier] [dbxListItemAnchorModifier]=\"makeEntryAnchor\"></dbx-zip-preview-file-entry-list>\n      }\n      @case ('view_entry') {\n        <dbx-embed class=\"dbx-zip-blob-preview-content-embed\" [blob]=\"selectedFileEntryBlobSignal()\"></dbx-embed>\n      }\n    }\n  </div>\n</dbx-loading>\n", dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon", "color"] }, { kind: "directive", type: DbxListTitleGroupDirective, selector: "[dbxListTitleGroup]", inputs: ["dbxListTitleGroup"] }, { kind: "component", type: DbxZipPreviewEntryListComponent, selector: "dbx-zip-preview-file-entry-list" }, { kind: "component", type: DbxEmbedComponent, selector: "dbx-embed", inputs: ["embedElement", "sanitizeUrl", "srcUrl", "type", "blob"], outputs: ["embedElementChange", "sanitizeUrlChange", "srcUrlChange", "typeChange", "blobChange"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: DbxListItemAnchorModifierDirective, selector: "[dbxListItemAnchorModifier]", inputs: ["dbxListItemAnchorModifier"] }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxZipBlobPreviewComponent, isStandalone: true, selector: "dbx-zip-blob-preview", inputs: { blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, downloadFileName: { classPropertyName: "downloadFileName", publicName: "downloadFileName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n  <div class=\"dbx-flex-bar dbx-zip-blob-preview-toolbar\">\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"arrow_upward\" text=\"Back\" (buttonClick)=\"backClicked()\"></dbx-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"home\" text=\"Home\" (buttonClick)=\"homeClicked()\"></dbx-button>\n    <dbx-spacer></dbx-spacer>\n    @if (downloadZipFileBlobButtonConfigSignal()) {\n      <dbx-download-blob-button [config]=\"downloadZipFileBlobButtonConfigSignal()\"></dbx-download-blob-button>\n    }\n  </div>\n  <dbx-bar-header class=\"dbx-zip-blob-preview-header\" [icon]=\"selectedNodeIconSignal()\" [text]=\"selectedNodePathSignal()\"></dbx-bar-header>\n  <div class=\"dbx-zip-blob-preview-content\">\n    @switch (modeSignal()) {\n      @case ('view_directory') {\n        <dbx-zip-preview-file-entry-list [state]=\"listEntriesState$\" [dbxListTitleGroup]=\"listTitleGroupDelegate\" [dbxListItemModifier] [dbxListItemAnchorModifier]=\"makeEntryAnchor\"></dbx-zip-preview-file-entry-list>\n      }\n      @case ('view_entry') {\n        <dbx-embed class=\"dbx-zip-blob-preview-content-embed\" [blob]=\"selectedFileEntryBlobSignal()\"></dbx-embed>\n      }\n    }\n  </div>\n</dbx-loading>\n", dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon"] }, { kind: "directive", type: DbxListTitleGroupDirective, selector: "[dbxListTitleGroup]", inputs: ["dbxListTitleGroup"] }, { kind: "component", type: DbxZipPreviewEntryListComponent, selector: "dbx-zip-preview-file-entry-list" }, { kind: "component", type: DbxEmbedComponent, selector: "dbx-embed", inputs: ["embedElement", "sanitizeUrl", "srcUrl", "type", "blob"], outputs: ["embedElementChange", "sanitizeUrlChange", "srcUrlChange", "typeChange", "blobChange"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: DbxListItemAnchorModifierDirective, selector: "[dbxListItemAnchorModifier]", inputs: ["dbxListItemAnchorModifier"] }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxZipBlobPreviewComponent, decorators: [{
             type: Component,
@@ -16502,7 +16629,7 @@ class DbxZipPreviewComponent {
     <dbx-loading [context]="context">
       <dbx-zip-blob-preview [downloadFileName]="downloadFileName()" [blob]="zipFileBlobSignal()"></dbx-zip-blob-preview>
     </dbx-loading>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "component", type: DbxZipBlobPreviewComponent, selector: "dbx-zip-blob-preview", inputs: ["blob", "downloadFileName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "component", type: DbxZipBlobPreviewComponent, selector: "dbx-zip-blob-preview", inputs: ["blob", "downloadFileName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxZipPreviewComponent, decorators: [{
             type: Component,