@dereekb/dbx-web 13.5.2 → 13.6.1

package/fesm2022/dereekb-dbx-web.mjs

@@ -233,7 +233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxCompact", required: true }] }] } });
 
-const importsAndExports$s = [DbxCompactDirective];
+const importsAndExports$r = [DbxCompactDirective];
 /**
  * @deprecated import DbxCompactDirective directly instead.
  */
@@ -245,8 +245,8 @@ class DbxCompactLayoutModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCompactLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$s,
-                    exports: importsAndExports$s
+                    imports: importsAndExports$r,
+                    exports: importsAndExports$r
                 }]
         }] });
 
@@ -516,7 +516,7 @@ class DbxPopoverComponent extends AbstractTransitionWatcherDirective {
                 provide: CompactContextStore
             }
         ], usesInheritance: true, ngImport: i0, template: `
-    <dbx-popover-coordinator (dbxWindowKeyDownListener)="handleKeydown()" [dbxWindowKeyDownFilter]="triggerCloseKeys">
+    <dbx-popover-coordinator role="dialog" aria-modal="true" [attr.aria-label]="key" (dbxWindowKeyDownListener)="handleKeydown()" [dbxWindowKeyDownFilter]="triggerCloseKeys">
       <div class="dbx-popover-component" dbx-injection [config]="contentConfig"></div>
     </dbx-popover-coordinator>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxPopoverCoordinatorComponent, selector: "dbx-popover-coordinator" }, { kind: "directive", type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["dbxWindowKeyDownEnabled", "dbxWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -525,7 +525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             type: Component,
             args: [{
                     template: `
-    <dbx-popover-coordinator (dbxWindowKeyDownListener)="handleKeydown()" [dbxWindowKeyDownFilter]="triggerCloseKeys">
+    <dbx-popover-coordinator role="dialog" aria-modal="true" [attr.aria-label]="key" (dbxWindowKeyDownListener)="handleKeydown()" [dbxWindowKeyDownFilter]="triggerCloseKeys">
       <div class="dbx-popover-component" dbx-injection [config]="contentConfig"></div>
     </dbx-popover-coordinator>
   `,
@@ -819,7 +819,7 @@ function sanitizeDbxDialogContentConfig(input) {
     };
 }
 
-const importsAndExports$r = [DbxDialogContentDirective, DbxActionDialogDirective, DbxDialogContentFooterComponent, DbxDialogContentCloseComponent];
+const importsAndExports$q = [DbxDialogContentDirective, DbxActionDialogDirective, DbxDialogContentFooterComponent, DbxDialogContentCloseComponent];
 class DbxDialogModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxDialogModule, imports: [DbxDialogContentDirective, DbxActionDialogDirective, DbxDialogContentFooterComponent, DbxDialogContentCloseComponent], exports: [DbxDialogContentDirective, DbxActionDialogDirective, DbxDialogContentFooterComponent, DbxDialogContentCloseComponent] });
@@ -828,8 +828,8 @@ class DbxDialogModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$r,
-                    exports: importsAndExports$r
+                    imports: importsAndExports$q,
+                    exports: importsAndExports$q
                 }]
         }] });
 // MARK: Compat
@@ -1303,7 +1303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
-const importsAndExports$q = [DbxPopoverContentComponent, DbxPopoverControlsDirective, DbxPopoverHeaderComponent, DbxPopoverCloseButtonComponent, DbxPopoverScrollContentDirective];
+const importsAndExports$p = [DbxPopoverContentComponent, DbxPopoverControlsDirective, DbxPopoverHeaderComponent, DbxPopoverCloseButtonComponent, DbxPopoverScrollContentDirective];
 /**
  * Contains all popover content components, allowing other sibling dbx-web modules to use the directives without referencing the full popover module.
  */
@@ -1315,12 +1315,12 @@ class DbxPopoverInteractionContentModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxPopoverInteractionContentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$q,
-                    exports: importsAndExports$q
+                    imports: importsAndExports$p,
+                    exports: importsAndExports$p
                 }]
         }] });
 
-const importsAndExports$p = [DbxPopoverComponent, DbxPopoverCoordinatorComponent, DbxActionPopoverDirective, DbxPopoverInteractionContentModule];
+const importsAndExports$o = [DbxPopoverComponent, DbxPopoverCoordinatorComponent, DbxActionPopoverDirective, DbxPopoverInteractionContentModule];
 class DbxPopoverInteractionModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxPopoverInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxPopoverInteractionModule, imports: [DbxPopoverComponent, DbxPopoverCoordinatorComponent, DbxActionPopoverDirective, DbxPopoverInteractionContentModule], exports: [DbxPopoverComponent, DbxPopoverCoordinatorComponent, DbxActionPopoverDirective, DbxPopoverInteractionContentModule] });
@@ -1329,8 +1329,8 @@ class DbxPopoverInteractionModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxPopoverInteractionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$p,
-                    exports: importsAndExports$p
+                    imports: importsAndExports$o,
+                    exports: importsAndExports$o
                 }]
         }] });
 
@@ -1524,7 +1524,7 @@ class DbxIconButtonComponent extends AbstractDbxButtonDirective {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxIconButtonComponent, isStandalone: true, selector: "dbx-icon-button", host: { classAttribute: "dbx-icon-button" }, providers: provideDbxButton(DbxIconButtonComponent), usesInheritance: true, ngImport: i0, template: `
     @switch (buttonDisplayTypeSignal()) {
       @case ('text_button') {
-        <button mat-button class="mat-unthemed" [disabled]="disabledSignal()" (click)="clickButton()">
+        <button mat-button class="mat-unthemed" [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel()" (click)="clickButton()">
           @if (iconSignal()) {
             <mat-icon class="dbx-icon-spacer">{{ iconSignal() }}</mat-icon>
           }
@@ -1533,8 +1533,8 @@ class DbxIconButtonComponent extends AbstractDbxButtonDirective {
         </button>
       }
       @case ('icon_button') {
-        <button mat-icon-button [disabled]="disabledSignal()" (click)="clickButton()">
-          <mat-icon>{{ iconSignal() }}</mat-icon>
+        <button mat-icon-button [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel() || iconSignal()" (click)="clickButton()">
+          <mat-icon aria-hidden="true">{{ iconSignal() }}</mat-icon>
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </button>
       }
@@ -1551,7 +1551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     template: `
     @switch (buttonDisplayTypeSignal()) {
       @case ('text_button') {
-        <button mat-button class="mat-unthemed" [disabled]="disabledSignal()" (click)="clickButton()">
+        <button mat-button class="mat-unthemed" [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel()" (click)="clickButton()">
           @if (iconSignal()) {
             <mat-icon class="dbx-icon-spacer">{{ iconSignal() }}</mat-icon>
           }
@@ -1560,8 +1560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
         </button>
       }
       @case ('icon_button') {
-        <button mat-icon-button [disabled]="disabledSignal()" (click)="clickButton()">
-          <mat-icon>{{ iconSignal() }}</mat-icon>
+        <button mat-icon-button [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel() || iconSignal()" (click)="clickButton()">
+          <mat-icon aria-hidden="true">{{ iconSignal() }}</mat-icon>
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </button>
       }
@@ -1789,14 +1789,14 @@ const DBX_THEME_COLORS = [...DBX_THEME_COLORS_MAIN, ...DBX_THEME_COLORS_EXTRA, .
  * @example
  * ```ts
  * dbxColorBackground('primary'); // 'dbx-primary-bg'
- * dbxColorBackground(undefined); // 'dbx-default-bg'
+ * dbxColorBackground(undefined); // 'dbx-default'
  * ```
  *
  * @param color - the theme color to convert, or nullish/empty for the default class
- * @returns the CSS class name for the themed background (e.g., `'dbx-primary-bg'` or `'dbx-default-bg'`)
+ * @returns the CSS class name for the themed background (e.g., `'dbx-primary-bg'` or `'dbx-default'`)
  */
 function dbxColorBackground(color) {
-    let cssClass = 'dbx-default-bg'; // background by default
+    let cssClass = 'dbx-default'; // default text color class (not -bg) to avoid setting --dbx-bg-color-current which interferes with button label color tokens
     switch (color) {
         case 'primary':
         case 'secondary':
@@ -1864,6 +1864,8 @@ const dbxThemeColorCssVariableVar = dbxThemeColorCssTokenVar;
  * Applies a themed background color to the host element based on a {@link DbxThemeColor} value.
  *
  * Optionally set {@link dbxColorTone} 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 color to the vibrant theme color (via `--dbx-bg-color-current`).
  *
  * @example
  * ```html
@@ -1879,6 +1881,12 @@ class DbxColorDirective {
      */
     dbxColorTone = input(...(ngDevMode ? [undefined, { debugName: "dbxColorTone" }] : /* istanbul ignore next */ []));
     cssClassSignal = computed(() => dbxColorBackground(this.dbxColor()), ...(ngDevMode ? [{ debugName: "cssClassSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether tonal mode is active. Adds the `dbx-color-tonal` CSS class which
+     * overrides the text color to the vibrant theme color via CSS rather than
+     * an inline style binding (which would conflict with `[ngStyle]`).
+     */
+    isTonalSignal = computed(() => this.dbxColorTone() != null, ...(ngDevMode ? [{ debugName: "isTonalSignal" }] : /* istanbul ignore next */ []));
     /**
      * Sets `--dbx-color-bg-tone` on the host to control the background opacity via `color-mix` in the `-bg` class mixin.
      */
@@ -1886,18 +1894,8 @@ class DbxColorDirective {
         const tone = this.dbxColorTone();
         return tone != null ? `${tone}%` : null;
     }, ...(ngDevMode ? [{ debugName: "bgToneStyleSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Overrides the host text color to use the vibrant theme color when tonal mode is active.
-     *
-     * Normally a `-bg` class sets the contrast color as text (e.g. white on blue).
-     * In tonal mode the background is semi-transparent, so white text would be unreadable.
-     * Instead we use `--dbx-bg-color-current` (the vibrant color set by the `-bg` mixin) as the text color.
-     */
-    tonalColorSignal = computed(() => {
-        return this.dbxColorTone() != null ? cssTokenVar('--dbx-bg-color-current') : null;
-    }, ...(ngDevMode ? [{ debugName: "tonalColorSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.3", 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", "style.--dbx-color-bg-tone": "bgToneStyleSignal()", "style.color": "tonalColorSignal()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.3", 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()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxColorDirective, decorators: [{
             type: Directive,
@@ -1906,8 +1904,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     host: {
                         '[class]': 'cssClassSignal()',
                         '[class.dbx-color]': 'true',
-                        '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()',
-                        '[style.color]': 'tonalColorSignal()'
+                        '[class.dbx-color-tonal]': 'isTonalSignal()',
+                        '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()'
                     },
                     standalone: true
                 }]
@@ -1927,11 +1925,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.3", ngImport: i0, type: DbxProgressBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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()\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [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  <span>\n    {{ configSignal()?.text }}\n    <ng-content></ng-content>\n  </span>\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden}: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>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\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$1.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.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.3", 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!\" [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  <span>\n    {{ configSignal()?.text }}\n    <ng-content></ng-content>\n  </span>\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden}: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>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\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$1.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.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.3", 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()\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [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  <span>\n    {{ configSignal()?.text }}\n    <ng-content></ng-content>\n  </span>\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden}: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>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\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, 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!\" [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  <span>\n    {{ configSignal()?.text }}\n    <ng-content></ng-content>\n  </span>\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden}: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>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\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"] }]
         }] });
 
 /**
@@ -2010,27 +2008,27 @@ 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.3", ngImport: i0, type: DbxProgressSpinnerButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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()\">\n  @if (showTextContentSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"showProgressSignal()\" [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]=\"showProgressSignal()\">\n      <!-- TODO: Check ng-content has content, and if there is no ng-content input or text, then showTextContentSignal() should be false. -->\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\" [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</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}: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;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 36px}: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 .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}: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}\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$1.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.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.3", 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]=\"showProgressSignal()\" [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]=\"showProgressSignal()\">\n      <!-- TODO: Check ng-content has content, and if there is no ng-content input or text, then showTextContentSignal() should be false. -->\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\" [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</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}: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;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 36px}: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 .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}: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}\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$1.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.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.3", 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()\">\n  @if (showTextContentSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"showProgressSignal()\" [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]=\"showProgressSignal()\">\n      <!-- TODO: Check ng-content has content, and if there is no ng-content input or text, then showTextContentSignal() should be false. -->\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\" [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</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}: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;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 36px}: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 .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}: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}\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, 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]=\"showProgressSignal()\" [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]=\"showProgressSignal()\">\n      <!-- TODO: Check ng-content has content, and if there is no ng-content input or text, then showTextContentSignal() should be false. -->\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\" [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</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}: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;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 36px}: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 .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}: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}\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$o = [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent];
+const importsAndExports$n = [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent];
 /**
  * @deprecated import DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent directly instead.
  */
 class DbxProgressButtonsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressButtonsModule, imports: [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent], exports: [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressButtonsModule, imports: [importsAndExports$o] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressButtonsModule, imports: [importsAndExports$n] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressButtonsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$o,
-                    exports: importsAndExports$o
+                    imports: importsAndExports$n,
+                    exports: importsAndExports$n
                 }]
         }] });
 
@@ -2090,8 +2088,8 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
     bar = input(false, { ...(ngDevMode ? { debugName: "bar" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
     buttonStyle = input(...(ngDevMode ? [undefined, { debugName: "buttonStyle" }] : /* istanbul ignore next */ []));
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    spinnerColor = input(undefined, ...(ngDevMode ? [{ debugName: "spinnerColor" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    spinnerColor = input(...(ngDevMode ? [undefined, { debugName: "spinnerColor" }] : /* istanbul ignore next */ []));
     customButtonColor = input(...(ngDevMode ? [undefined, { debugName: "customButtonColor" }] : /* istanbul ignore next */ []));
     customTextColor = input(...(ngDevMode ? [undefined, { debugName: "customTextColor" }] : /* istanbul ignore next */ []));
     customSpinnerColor = input(...(ngDevMode ? [undefined, { debugName: "customSpinnerColor" }] : /* istanbul ignore next */ []));
@@ -2153,6 +2151,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
         const mode = this.mode() ?? buttonStyle?.mode;
         const working = this.workingSignal();
         const buttonType = this.typeSignal();
+        const ariaLabel = this.ariaLabel();
         const config = {
             fab,
             working,
@@ -2166,7 +2165,8 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
             mode,
             spinnerColor,
             customSpinnerColor,
-            disabled
+            disabled,
+            ariaLabel
         };
         return config;
     }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
@@ -2229,7 +2229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
-const importsAndExports$n = [
+const importsAndExports$m = [
     DbxCoreButtonModule,
     DbxIconButtonComponent,
     // buttons
@@ -2272,8 +2272,8 @@ class DbxButtonModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$n,
-                    exports: importsAndExports$n
+                    imports: importsAndExports$m,
+                    exports: importsAndExports$m
                 }]
         }] });
 
@@ -2815,17 +2815,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
-const importsAndExports$m = [DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxCoreFilterModule];
+const importsAndExports$l = [DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxCoreFilterModule];
 class DbxFilterInteractionModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterInteractionModule, imports: [DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxCoreFilterModule], exports: [DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxCoreFilterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterInteractionModule, imports: [importsAndExports$m, DbxCoreFilterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterInteractionModule, imports: [importsAndExports$l, DbxCoreFilterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterInteractionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$m,
-                    exports: importsAndExports$m
+                    imports: importsAndExports$l,
+                    exports: importsAndExports$l
                 }]
         }] });
 
@@ -3521,7 +3521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }] } });
 
-const importsAndExports$l = [DbxPopupComponent, DbxPopupCoordinatorComponent, DbxPopupContentComponent, DbxPopupControlsComponent, DbxPopupControlButtonsComponent];
+const importsAndExports$k = [DbxPopupComponent, DbxPopupCoordinatorComponent, DbxPopupContentComponent, DbxPopupControlsComponent, DbxPopupControlButtonsComponent];
 class DbxPopupInteractionModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxPopupInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxPopupInteractionModule, imports: [DbxPopupComponent, DbxPopupCoordinatorComponent, DbxPopupContentComponent, DbxPopupControlsComponent, DbxPopupControlButtonsComponent], exports: [DbxPopupComponent, DbxPopupCoordinatorComponent, DbxPopupContentComponent, DbxPopupControlsComponent, DbxPopupControlButtonsComponent] });
@@ -3530,8 +3530,8 @@ class DbxPopupInteractionModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxPopupInteractionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$l,
-                    exports: importsAndExports$l
+                    imports: importsAndExports$k,
+                    exports: importsAndExports$k
                 }]
         }] });
 
@@ -3746,7 +3746,7 @@ class DbxSectionHeaderComponent {
     }
     <ng-template #headerContentTitleTemplate>
       @if (headerConfigSignal().icon) {
-        <mat-icon>{{ headerConfigSignal().icon }}</mat-icon>
+        <mat-icon aria-hidden="true">{{ headerConfigSignal().icon }}</mat-icon>
       }
       <span class="title-text">
         {{ headerConfigSignal().header }}
@@ -3802,7 +3802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
     }
     <ng-template #headerContentTitleTemplate>
       @if (headerConfigSignal().icon) {
-        <mat-icon>{{ headerConfigSignal().icon }}</mat-icon>
+        <mat-icon aria-hidden="true">{{ headerConfigSignal().icon }}</mat-icon>
       }
       <span class="title-text">
         {{ headerConfigSignal().header }}
@@ -3845,7 +3845,7 @@ class DbxSectionComponent extends DbxSectionHeaderComponent {
         return this.elevate() ? 'dbx-section-elevate dbx-content-elevate' : '';
     }, ...(ngDevMode ? [{ debugName: "classConfig" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: DbxSectionComponent, isStandalone: true, selector: "dbx-section", inputs: { elevate: { classPropertyName: "elevate", publicName: "elevate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classConfig()" }, classAttribute: "d-block dbx-section" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: DbxSectionComponent, isStandalone: true, selector: "dbx-section", inputs: { elevate: { classPropertyName: "elevate", publicName: "elevate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region" }, properties: { "class": "classConfig()", "attr.aria-label": "headerConfigSignal().header" }, classAttribute: "d-block dbx-section" }, usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-section-header" [h]="headerConfigSignal().h ?? 3" [header]="headerConfigSignal().header" [onlyHeader]="headerConfigSignal().onlyHeader" [icon]="headerConfigSignal().icon" [hint]="headerConfigSignal().hint" [hintInline]="headerConfigSignal().hintInline">
       <ng-content select="[sectionHeader]"></ng-content>
     </div>
@@ -3868,7 +3868,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
   `,
                     host: {
                         class: 'd-block dbx-section',
-                        '[class]': 'classConfig()'
+                        role: 'region',
+                        '[class]': 'classConfig()',
+                        '[attr.aria-label]': 'headerConfigSignal().header'
                     },
                     imports: [DbxSectionHeaderComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4221,7 +4223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
-const importsAndExports$k = [DbxPromptComponent, DbxPromptBoxDirective, DbxPromptPageComponent, DbxPromptConfirmComponent, DbxPromptConfirmButtonDirective, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective];
+const importsAndExports$j = [DbxPromptComponent, DbxPromptBoxDirective, DbxPromptPageComponent, DbxPromptConfirmComponent, DbxPromptConfirmButtonDirective, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective];
 class DbxPromptModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxPromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxPromptModule, imports: [DbxPromptComponent, DbxPromptBoxDirective, DbxPromptPageComponent, DbxPromptConfirmComponent, DbxPromptConfirmButtonDirective, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective], exports: [DbxPromptComponent, DbxPromptBoxDirective, DbxPromptPageComponent, DbxPromptConfirmComponent, DbxPromptConfirmButtonDirective, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective] });
@@ -4230,12 +4232,12 @@ class DbxPromptModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxPromptModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$k,
-                    exports: importsAndExports$k
+                    imports: importsAndExports$j,
+                    exports: importsAndExports$j
                 }]
         }] });
 
-const importsAndExports$j = [DbxPromptModule, DbxDialogModule, DbxFilterInteractionModule, DbxPopoverInteractionModule, DbxPopupInteractionModule];
+const importsAndExports$i = [DbxPromptModule, DbxDialogModule, DbxFilterInteractionModule, DbxPopoverInteractionModule, DbxPopupInteractionModule];
 /**
  * @deprecated import individual modules instead.
  *
@@ -4248,13 +4250,13 @@ const importsAndExports$j = [DbxPromptModule, DbxDialogModule, DbxFilterInteract
 class DbxInteractionModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxInteractionModule, imports: [DbxPromptModule, DbxDialogModule, DbxFilterInteractionModule, DbxPopoverInteractionModule, DbxPopupInteractionModule], exports: [DbxPromptModule, DbxDialogModule, DbxFilterInteractionModule, DbxPopoverInteractionModule, DbxPopupInteractionModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxInteractionModule, imports: [importsAndExports$j, DbxPromptModule, DbxDialogModule, DbxFilterInteractionModule, DbxPopoverInteractionModule, DbxPopupInteractionModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxInteractionModule, imports: [importsAndExports$i, DbxPromptModule, DbxDialogModule, DbxFilterInteractionModule, DbxPopoverInteractionModule, DbxPopupInteractionModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxInteractionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$j,
-                    exports: importsAndExports$j
+                    imports: importsAndExports$i,
+                    exports: importsAndExports$i
                 }]
         }] });
 
@@ -4622,6 +4624,7 @@ class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponent {
     fileInput = viewChild.required('fileInput', { read: ElementRef });
     text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     buttonStyle = input(...(ngDevMode ? [undefined, { debugName: "buttonStyle" }] : /* istanbul ignore next */ []));
     filesChanged = output();
     buttonAcceptSignal = computed(() => {
@@ -4675,8 +4678,8 @@ class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFileUploadButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxFileUploadButtonComponent, isStandalone: true, selector: "dbx-file-upload-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadButtonComponent), viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <dbx-button [buttonStyle]="buttonStyle()" [text]="text()" [icon]="icon()" (buttonClick)="openInput()" [disabled]="disabledSignal()" [working]="workingSignal()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxFileUploadButtonComponent, isStandalone: true, selector: "dbx-file-upload-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadButtonComponent), viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <dbx-button [buttonStyle]="buttonStyle()" [text]="text()" [icon]="icon()" [ariaLabel]="ariaLabel() || text() || 'Upload file'" (buttonClick)="openInput()" [disabled]="disabledSignal()" [working]="workingSignal()">
       <ng-content></ng-content>
     </dbx-button>
     <input #fileInput hidden type="file" [attr.accept]="buttonAcceptSignal() ?? null" [attr.multiple]="multipleAttributeSignal() ? '' : null" (change)="fileInputChanged()" />
@@ -4687,7 +4690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             args: [{
                     selector: 'dbx-file-upload-button',
                     template: `
-    <dbx-button [buttonStyle]="buttonStyle()" [text]="text()" [icon]="icon()" (buttonClick)="openInput()" [disabled]="disabledSignal()" [working]="workingSignal()">
+    <dbx-button [buttonStyle]="buttonStyle()" [text]="text()" [icon]="icon()" [ariaLabel]="ariaLabel() || text() || 'Upload file'" (buttonClick)="openInput()" [disabled]="disabledSignal()" [working]="workingSignal()">
       <ng-content></ng-content>
     </dbx-button>
     <input #fileInput hidden type="file" [attr.accept]="buttonAcceptSignal() ?? null" [attr.multiple]="multipleAttributeSignal() ? '' : null" (change)="fileInputChanged()" />
@@ -4697,7 +4700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { ...{ read: ElementRef }, isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], filesChanged: [{ type: i0.Output, args: ["filesChanged"] }] } });
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { ...{ read: ElementRef }, isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], filesChanged: [{ type: i0.Output, args: ["filesChanged"] }] } });
 
 /**
  * Combines a drag-and-drop upload area with a file picker button into a single configurable component.
@@ -4793,7 +4796,7 @@ class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
     <ng-template #buttonTemplate>
       <dbx-file-upload-button #button [text]="buttonTextSignal()" [icon]="buttonIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" (filesChanged)="buttonFilesChanged($event)" [disabled]="disabledSignal()" [working]="workingSignal()" [buttonStyle]="buttonStyle()"></dbx-file-upload-button>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxFileUploadAreaComponent, selector: "dbx-file-upload-area", inputs: ["icon", "text", "hint", "show"], outputs: ["filesChanged", "areaClicked", "areaDragActiveChanged"] }, { kind: "component", type: DbxFileUploadButtonComponent, selector: "dbx-file-upload-button", inputs: ["text", "icon", "buttonStyle"], outputs: ["filesChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxFileUploadAreaComponent, selector: "dbx-file-upload-area", inputs: ["icon", "text", "hint", "show"], outputs: ["filesChanged", "areaClicked", "areaDragActiveChanged"] }, { kind: "component", type: DbxFileUploadButtonComponent, selector: "dbx-file-upload-button", inputs: ["text", "icon", "ariaLabel", "buttonStyle"], outputs: ["filesChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFileUploadComponent, decorators: [{
             type: Component,
@@ -5255,11 +5258,11 @@ class DbxErrorViewComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxErrorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxErrorViewComponent, isStandalone: true, selector: "dbx-error-view", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "buttonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, host: { classAttribute: "dbx-error dbx-warn dbx-b" }, viewQueries: [{ propertyName: "buttonOrigin", first: true, predicate: ["buttonPopoverOrigin"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
-    <button class="dbx-error-button" [disabled]="buttonDisabled()" [dbxTextColor]="'warn'" #buttonPopoverOrigin mat-icon-button (click)="clickError()">
-      <mat-icon>{{ icon() }}</mat-icon>
+    <button class="dbx-error-button" [disabled]="buttonDisabled()" [dbxTextColor]="'warn'" #buttonPopoverOrigin mat-icon-button (click)="clickError()" [attr.aria-label]="message() ? 'View error details' : 'Error'">
+      <mat-icon aria-hidden="true">{{ icon() }}</mat-icon>
     </button>
     @if (message()) {
-      <span class="dbx-error-message">{{ message() }}</span>
+      <span class="dbx-error-message" role="alert">{{ message() }}</span>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DbxTextColorDirective, selector: "[dbxTextColor]", inputs: ["dbxTextColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5268,11 +5271,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             args: [{
                     selector: 'dbx-error-view',
                     template: `
-    <button class="dbx-error-button" [disabled]="buttonDisabled()" [dbxTextColor]="'warn'" #buttonPopoverOrigin mat-icon-button (click)="clickError()">
-      <mat-icon>{{ icon() }}</mat-icon>
+    <button class="dbx-error-button" [disabled]="buttonDisabled()" [dbxTextColor]="'warn'" #buttonPopoverOrigin mat-icon-button (click)="clickError()" [attr.aria-label]="message() ? 'View error details' : 'Error'">
+      <mat-icon aria-hidden="true">{{ icon() }}</mat-icon>
     </button>
     @if (message()) {
-      <span class="dbx-error-message">{{ message() }}</span>
+      <span class="dbx-error-message" role="alert">{{ message() }}</span>
     }
   `,
                     host: {
@@ -5425,7 +5428,7 @@ class DbxLoadingProgressComponent {
     diameterSignal = computed(() => this.diameter() || this.defaultDiameter, ...(ngDevMode ? [{ debugName: "diameterSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxLoadingProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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: `
-    <div class="loading-progress-view">
+    <div class="loading-progress-view" role="status" [attr.aria-label]="text() || 'Loading'">
       <span class="loading-progress-view-indicator" [dbxColor]="color()">
         @switch (linear()) {
           @case (true) {
@@ -5437,7 +5440,7 @@ class DbxLoadingProgressComponent {
         }
       </span>
       @if (text()) {
-        <div class="dbx-loading-progress-hint dbx-hint dbx-small" [ngClass]="{ 'text-center': !linear() }">{{ text() }}</div>
+        <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 });
@@ -5447,7 +5450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             args: [{
                     selector: 'dbx-loading-progress',
                     template: `
-    <div class="loading-progress-view">
+    <div class="loading-progress-view" role="status" [attr.aria-label]="text() || 'Loading'">
       <span class="loading-progress-view-indicator" [dbxColor]="color()">
         @switch (linear()) {
           @case (true) {
@@ -5459,7 +5462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
         }
       </span>
       @if (text()) {
-        <div class="dbx-loading-progress-hint dbx-hint dbx-small" [ngClass]="{ 'text-center': !linear() }">{{ text() }}</div>
+        <div class="dbx-loading-progress-hint dbx-hint dbx-small" [ngClass]="{ 'text-center': !linear() }" aria-hidden="true">{{ text() }}</div>
       }
     </div>
   `,
@@ -5542,11 +5545,11 @@ 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.3", ngImport: i0, type: DbxBasicLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\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.3", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", 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    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\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" }]
+            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 }] }] } });
 
 /**
@@ -5689,7 +5692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const importsAndExports$i = [DbxLoadingComponent, DbxBasicLoadingComponent, DbxLoadingProgressComponent, DbxActionLoadingContextDirective];
+const importsAndExports$h = [DbxLoadingComponent, DbxBasicLoadingComponent, DbxLoadingProgressComponent, DbxActionLoadingContextDirective];
 /**
  * Convenience NgModule that imports and exports all loading-related components and directives.
  *
@@ -5704,8 +5707,8 @@ class DbxLoadingModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxLoadingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$i,
-                    exports: importsAndExports$i
+                    imports: importsAndExports$h,
+                    exports: importsAndExports$h
                 }]
         }] });
 
@@ -6123,7 +6126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { dbxActionSnackbarDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionSnackbarDefault", required: false }] }], dbxActionSnackbarUndo: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionSnackbarUndo", required: false }] }], dbxActionSnackbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionSnackbar", required: false }] }] } });
 
-const importsAndExports$h = [DbxActionSnackbarComponent, DbxActionSnackbarDirective];
+const importsAndExports$g = [DbxActionSnackbarComponent, DbxActionSnackbarDirective];
 /**
  * Bundles the snackbar component and directive for convenient import.
  */
@@ -6135,8 +6138,8 @@ class DbxActionSnackbarModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxActionSnackbarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$h,
-                    exports: importsAndExports$h
+                    imports: importsAndExports$g,
+                    exports: importsAndExports$g
                 }]
         }] });
 
@@ -6454,7 +6457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 args: ['document:keyup', ['$event']]
             }] } });
 
-const importsAndExports$g = [DbxCoreActionModule, DbxActionButtonDirective, DbxActionKeyTriggerDirective, DbxActionConfirmDirective];
+const importsAndExports$f = [DbxCoreActionModule, DbxActionButtonDirective, DbxActionKeyTriggerDirective, DbxActionConfirmDirective];
 /**
  * Convenience module that bundles all base dbxAction-related directives from
  * both @dereekb/dbx-core and @dereekb/dbx-web, including key triggers and confirmation dialogs.
@@ -6467,8 +6470,8 @@ class DbxActionModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxActionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$g,
-                    exports: importsAndExports$g
+                    imports: importsAndExports$f,
+                    exports: importsAndExports$f
                 }]
         }] });
 
@@ -6749,7 +6752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionSnackbarError", required: false }] }] } });
 
-const importsAndExports$f = [
+const importsAndExports$e = [
     //
     DbxErrorComponent,
     DbxLoadingErrorDirective,
@@ -6813,8 +6816,8 @@ class DbxReadableErrorModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxReadableErrorModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$f,
-                    exports: importsAndExports$f
+                    imports: importsAndExports$e,
+                    exports: importsAndExports$e
                 }]
         }] });
 
@@ -8569,7 +8572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
-const importsAndExports$e = [DbxBarDirective, DbxBarHeaderComponent, DbxPagebarComponent];
+const importsAndExports$d = [DbxBarDirective, DbxBarHeaderComponent, DbxPagebarComponent];
 /**
  * Module for dbx-bar components.
  */
@@ -8581,8 +8584,8 @@ class DbxBarLayoutModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxBarLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$e,
-                    exports: importsAndExports$e
+                    imports: importsAndExports$d,
+                    exports: importsAndExports$d
                 }]
         }] });
 
@@ -8752,7 +8755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
-const importsAndExports$d = [DbxCardBoxComponent, DbxCardBoxContainerDirective];
+const importsAndExports$c = [DbxCardBoxComponent, DbxCardBoxContainerDirective];
 /**
  * Convenience module that imports and exports all card box layout components and directives.
  *
@@ -8766,8 +8769,8 @@ class DbxCardBoxLayoutModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxCardBoxLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$d,
-                    exports: importsAndExports$d
+                    imports: importsAndExports$c,
+                    exports: importsAndExports$c
                 }]
         }] });
 
@@ -9692,13 +9695,13 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
     hasNoAnchorsSignal = toSignal(this.hasNoAnchors$);
     nextRotateAnchorSignal = toSignal(this.nextRotateAnchor$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxNavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxNavbarComponent, isStandalone: true, selector: "dbx-navbar", inputs: { showMenuCaret: { classPropertyName: "showMenuCaret", publicName: "showMenuCaret", isSignal: true, isRequired: false, transformFunction: null }, navAlign: { classPropertyName: "navAlign", publicName: "navAlign", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultText: { classPropertyName: "defaultText", publicName: "defaultText", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon>arrow_drop_down</mat-icon>\n          }\n        </dbx-icon-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\">\n                @if (x.anchor.icon) {\n                  <mat-icon>{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-icon-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxNavbarComponent, isStandalone: true, selector: "dbx-navbar", inputs: { showMenuCaret: { classPropertyName: "showMenuCaret", publicName: "showMenuCaret", isSignal: true, isRequired: false, transformFunction: null }, navAlign: { classPropertyName: "navAlign", publicName: "navAlign", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultText: { classPropertyName: "defaultText", publicName: "defaultText", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-icon-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-icon-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-navbar', host: {
                         class: 'dbx-navbar'
-                    }, imports: [DbxAnchorComponent, MatTabNav, MatTabNavPanel, MatTabLink, DbxIconButtonComponent, MatIconModule, MatMenu, MatMenuItem, NgClass, MatMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon>arrow_drop_down</mat-icon>\n          }\n        </dbx-icon-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\">\n                @if (x.anchor.icon) {\n                  <mat-icon>{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-icon-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n" }]
+                    }, imports: [DbxAnchorComponent, MatTabNav, MatTabNavPanel, MatTabLink, DbxIconButtonComponent, MatIconModule, MatMenu, MatMenuItem, NgClass, MatMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-icon-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-icon-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n" }]
         }], propDecorators: { showMenuCaret: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuCaret", required: false }] }], navAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAlign", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: false }] }], defaultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultText", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], anchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchors", required: false }] }] } });
 
 /**
@@ -9895,8 +9898,8 @@ class DbxSidenavButtonComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxSidenavButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxSidenavButtonComponent, isStandalone: true, selector: "dbx-sidenav-button", inputs: { sidenavMenuIcon: { classPropertyName: "sidenavMenuIcon", publicName: "sidenavMenuIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (showMenuButtonSignal()) {
-      <button class="dbx-sidenav-button" mat-icon-button (click)="toggleNav()" aria-label="open sidenav button">
-        <mat-icon>{{ sidenavMenuIcon() }}</mat-icon>
+      <button class="dbx-sidenav-button" mat-icon-button (click)="toggleNav()" aria-label="Toggle sidebar navigation">
+        <mat-icon aria-hidden="true">{{ sidenavMenuIcon() }}</mat-icon>
       </button>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -9907,8 +9910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     selector: 'dbx-sidenav-button',
                     template: `
     @if (showMenuButtonSignal()) {
-      <button class="dbx-sidenav-button" mat-icon-button (click)="toggleNav()" aria-label="open sidenav button">
-        <mat-icon>{{ sidenavMenuIcon() }}</mat-icon>
+      <button class="dbx-sidenav-button" mat-icon-button (click)="toggleNav()" aria-label="Toggle sidebar navigation">
+        <mat-icon aria-hidden="true">{{ sidenavMenuIcon() }}</mat-icon>
       </button>
     }
   `,
@@ -10057,7 +10060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { modes: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxIfSidenavDisplayMode", required: false }] }] } });
 
-const importsAndExports$c = [DbxIfSidenavDisplayModeDirective, DbxSidenavComponent, DbxSidenavButtonComponent, DbxSidenavPagebarComponent, DbxSidenavPageComponent];
+const importsAndExports$b = [DbxIfSidenavDisplayModeDirective, DbxSidenavComponent, DbxSidenavButtonComponent, DbxSidenavPagebarComponent, DbxSidenavPageComponent];
 /**
  * NgModule that re-exports all standalone sidenav-related components and directives for backward compatibility.
  *
@@ -10071,8 +10074,8 @@ class DbxRouterSidenavModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxRouterSidenavModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$c,
-                    exports: importsAndExports$c
+                    imports: importsAndExports$b,
+                    exports: importsAndExports$b
                 }]
         }] });
 
@@ -10354,7 +10357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const importsAndExports$b = [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadDirective, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective, DbxTwoColumnSrefShowRightDirective];
+const importsAndExports$a = [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadDirective, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective, DbxTwoColumnSrefShowRightDirective];
 /**
  * Module that bundles all two-column layout components and directives for convenient importing.
  */
@@ -10366,12 +10369,12 @@ class DbxTwoColumnLayoutModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxTwoColumnLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$b,
-                    exports: importsAndExports$b
+                    imports: importsAndExports$a,
+                    exports: importsAndExports$a
                 }]
         }] });
 
-const importsAndExports$a = [DbxOneColumnComponent, DbxTwoColumnLayoutModule];
+const importsAndExports$9 = [DbxOneColumnComponent, DbxTwoColumnLayoutModule];
 /**
  * Convenience module that bundles all column layout components and directives,
  * including both one-column and two-column layouts.
@@ -10384,8 +10387,8 @@ class DbxColumnLayoutModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxColumnLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$a,
-                    exports: importsAndExports$a
+                    imports: importsAndExports$9,
+                    exports: importsAndExports$9
                 }]
         }] });
 
@@ -10576,7 +10579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
-const importsAndExports$9 = [
+const importsAndExports$8 = [
     //
     DbxContentDirective,
     DbxContentContainerDirective,
@@ -10614,8 +10617,8 @@ class DbxContentLayoutModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxContentLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$9,
-                    exports: importsAndExports$9
+                    imports: importsAndExports$8,
+                    exports: importsAndExports$8
                 }]
         }] });
 
@@ -10698,20 +10701,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
-const importsAndExports$8 = [DbxFlagComponent, DbxFlagPromptComponent];
+const importsAndExports$7 = [DbxFlagComponent, DbxFlagPromptComponent];
 /**
  * Angular module that bundles {@link DbxFlagComponent} and {@link DbxFlagPromptComponent}.
  */
 class DbxFlagLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFlagLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxFlagLayoutModule, imports: [DbxFlagComponent, DbxFlagPromptComponent], exports: [DbxFlagComponent, DbxFlagPromptComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFlagLayoutModule, imports: [importsAndExports$8] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFlagLayoutModule, imports: [importsAndExports$7] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFlagLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$8,
-                    exports: importsAndExports$8
+                    imports: importsAndExports$7,
+                    exports: importsAndExports$7
                 }]
         }] });
 
@@ -10799,7 +10802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { dbxFlexSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxFlexSize", required: true }] }] } });
 
-const importsAndExports$7 = [DbxFlexGroupDirective, DbxFlexSizeDirective];
+const importsAndExports$6 = [DbxFlexGroupDirective, DbxFlexSizeDirective];
 /**
  * Module that exports {@link DbxFlexGroupDirective} and {@link DbxFlexSizeDirective}.
  *
@@ -10813,8 +10816,8 @@ class DbxFlexLayoutModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFlexLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$7,
-                    exports: importsAndExports$7
+                    imports: importsAndExports$6,
+                    exports: importsAndExports$6
                 }]
         }] });
 
@@ -12044,7 +12047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { listItemIsSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxListItemIsSelectedModifier", required: true }] }] } });
 
-const importsAndExports$6 = [DbxValueListItemModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective];
+const importsAndExports$5 = [DbxValueListItemModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective];
 /**
  * Exports all dbx-list modifier-related directives.
  */
@@ -12056,8 +12059,8 @@ class DbxListModifierModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxListModifierModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$6,
-                    exports: importsAndExports$6
+                    imports: importsAndExports$5,
+                    exports: importsAndExports$5
                 }]
         }] });
 
@@ -12326,12 +12329,13 @@ class DbxListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", 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: { 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.3", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-list', host: {
                         class: 'd-block dbx-list',
+                        role: 'list',
                         '[class.dbx-list-padded]': 'padded()'
                     }, imports: [DbxInjectionComponent, InfiniteScrollDirective, DbxListInternalContentDirective, DbxLoadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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" }]
         }], propDecorators: { contentScrolled: [{ type: i0.Output, args: ["contentScrolled"] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }] } });
@@ -12431,7 +12435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             type: Directive
         }], propDecorators: { selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
-const importsAndExports$5 = [
+const importsAndExports$4 = [
     // directives
     DbxListEmptyContentComponent,
     DbxListViewMetaIconComponent,
@@ -12460,8 +12464,8 @@ class DbxListModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxListModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$5,
-                    exports: importsAndExports$5
+                    imports: importsAndExports$4,
+                    exports: importsAndExports$4
                 }]
         }] });
 
@@ -12859,7 +12863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }] } });
 
-const importsAndExports$4 = [DbxSectionHeaderComponent, DbxSectionPageComponent, DbxSectionComponent, DbxSubSectionComponent, DbxIntroActionSectionComponent];
+const importsAndExports$3 = [DbxSectionHeaderComponent, DbxSectionPageComponent, DbxSectionComponent, DbxSubSectionComponent, DbxIntroActionSectionComponent];
 /**
  * Bundles all section layout components including section headers, sections, subsections,
  * section pages, and the intro action section for convenient import.
@@ -12867,111 +12871,9 @@ const importsAndExports$4 = [DbxSectionHeaderComponent, DbxSectionPageComponent,
 class DbxSectionLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxSectionLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxSectionLayoutModule, imports: [DbxSectionHeaderComponent, DbxSectionPageComponent, DbxSectionComponent, DbxSubSectionComponent, DbxIntroActionSectionComponent], exports: [DbxSectionHeaderComponent, DbxSectionPageComponent, DbxSectionComponent, DbxSubSectionComponent, DbxIntroActionSectionComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxSectionLayoutModule, imports: [importsAndExports$4] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxSectionLayoutModule, imports: [importsAndExports$3] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxSectionLayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: importsAndExports$4,
-                    exports: importsAndExports$4
-                }]
-        }] });
-
-/**
- * Displays a numbered step with optional completion state, header text, and hint.
- *
- * Projects child content into a step section body below the header. When `done` is true,
- * a checkmark icon is shown and the `done` CSS class is applied to the host element.
- *
- * **Note:** This component is currently incomplete and requires additional styling.
- *
- * @example
- * ```html
- * <dbx-step [step]="1" text="Create your account" hint="Fill in all required fields" [done]="accountCreated">
- *   <form>...</form>
- * </dbx-step>
- * ```
- */
-// TODO: Incomplete component. Requires styling.
-class DbxStepComponent {
-    /**
-     * Whether this step has been completed. Shows a checkmark icon when true.
-     */
-    done = input(...(ngDevMode ? [undefined, { debugName: "done" }] : /* istanbul ignore next */ []));
-    /**
-     * The step number displayed in the header.
-     */
-    step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
-    /**
-     * The main label text for this step.
-     */
-    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
-    /**
-     * Optional hint text displayed below the step label.
-     */
-    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxStepComponent, isStandalone: true, selector: "dbx-step", inputs: { done: { classPropertyName: "done", publicName: "done", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.done": "done()" }, classAttribute: "dbx-step" }, ngImport: i0, template: `
-    <div class="step-section">
-      <div class="step-section-header">
-        <span class="step">{{ step() }}.</span>
-        @if (done()) {
-          <mat-icon class="done-check">done</mat-icon>
-        }
-        <span class="text">{{ text() }}</span>
-        @if (hint()) {
-          <p class="hint">{{ hint() }}</p>
-        }
-      </div>
-      <div class="step-section-content">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.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.3", ngImport: i0, type: DbxStepComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'dbx-step',
-                    template: `
-    <div class="step-section">
-      <div class="step-section-header">
-        <span class="step">{{ step() }}.</span>
-        @if (done()) {
-          <mat-icon class="done-check">done</mat-icon>
-        }
-        <span class="text">{{ text() }}</span>
-        @if (hint()) {
-          <p class="hint">{{ hint() }}</p>
-        }
-      </div>
-      <div class="step-section-content">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `,
-                    host: {
-                        class: 'dbx-step',
-                        '[class.done]': 'done()'
-                    },
-                    imports: [MatIconModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { done: [{ type: i0.Input, args: [{ isSignal: true, alias: "done", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
-
-const importsAndExports$3 = [DbxStepComponent];
-/**
- * Module that exports {@link DbxStepComponent}.
- *
- * @deprecated Import `DbxStepComponent` directly instead.
- */
-class DbxStepLayoutModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxStepLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxStepLayoutModule, imports: [DbxStepComponent], exports: [DbxStepComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxStepLayoutModule, imports: [importsAndExports$3] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxStepLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$3,
@@ -13478,6 +13380,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], alignHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignHeader", required: false }] }], bigHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "bigHeader", required: false }] }] } });
 
+/**
+ * A step-oriented content block that displays a numbered circle badge on the left
+ * with header, hint, and projected content on the right.
+ *
+ * Use the `icon` input to replace the step number with a Material icon.
+ * Use the `[header]` content slot for extra header-level content (like `dbx-detail-block`).
+ * Use the `color` input to customize the badge color (defaults to `'primary'`).
+ *
+ * Use the `center` input to vertically center the badge with the content.
+ *
+ * @example
+ * ```html
+ * <dbx-step-block [step]="1" header="Create Account" hint="Fill in the registration form.">
+ *   <p>Enter your email and password to get started.</p>
+ * </dbx-step-block>
+ *
+ * <dbx-step-block [step]="2" color="accent" header="Custom Header Content">
+ *   <span header>Extra header content</span>
+ *   <p>Detail content goes here.</p>
+ * </dbx-step-block>
+ * ```
+ */
+class DbxStepBlockComponent {
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    center = input(false, ...(ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxStepBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxStepBlockComponent, isStandalone: true, selector: "dbx-step-block", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-step-block-center": "center()" }, classAttribute: "dbx-step-block d-block" }, ngImport: i0, template: `
+    <div class="dbx-step-block-badge" [dbxColor]="color()">
+      @if (icon()) {
+        <mat-icon>{{ icon() }}</mat-icon>
+      } @else {
+        {{ step() }}
+      }
+    </div>
+    <div class="dbx-step-block-content">
+      @if (header()) {
+        <div class="dbx-step-block-header">
+          <span class="dbx-step-block-header-label">{{ header() }}</span>
+          <ng-content select="[header]"></ng-content>
+        </div>
+      }
+      @if (hint()) {
+        <span class="dbx-step-block-hint">{{ hint() }}</span>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxStepBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-step-block',
+                    template: `
+    <div class="dbx-step-block-badge" [dbxColor]="color()">
+      @if (icon()) {
+        <mat-icon>{{ icon() }}</mat-icon>
+      } @else {
+        {{ step() }}
+      }
+    </div>
+    <div class="dbx-step-block-content">
+      @if (header()) {
+        <div class="dbx-step-block-header">
+          <span class="dbx-step-block-header-label">{{ header() }}</span>
+          <ng-content select="[header]"></ng-content>
+        </div>
+      }
+      @if (hint()) {
+        <span class="dbx-step-block-hint">{{ hint() }}</span>
+      }
+      <ng-content></ng-content>
+    </div>
+  `,
+                    host: {
+                        class: 'dbx-step-block d-block',
+                        '[class.dbx-step-block-center]': 'center()'
+                    },
+                    imports: [MatIconModule, DbxColorDirective],
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
+
 /**
  * Adds inline spacing sized for icons, typically used to align text that sits next to icon-bearing siblings.
  *
@@ -13740,18 +13729,16 @@ class DbxChipDirective {
         return null;
     }, ...(ngDevMode ? [{ debugName: "bgToneStyleSignal" }] : /* istanbul ignore next */ []));
     /**
-     * Overrides the host text color to use the vibrant theme color when tonal mode is active.
-     *
-     * Normally a `-bg` class sets the contrast color as text (e.g. white on blue).
-     * In tonal mode the background is semi-transparent, so white text would be unreadable.
-     * Instead we use `--dbx-bg-color-current` (the vibrant color set by the `-bg` mixin) as the text color.
+     * Whether tonal mode is active (color is set and tone < 100). Adds the `dbx-color-tonal`
+     * CSS class which overrides text color to the vibrant theme color via CSS rather than
+     * an inline style binding (which would conflict with `[ngStyle]`).
      */
-    tonalColorSignal = computed(() => {
+    isTonalSignal = computed(() => {
         const color = this.colorSignal();
-        return color && this.toneSignal() < 100 ? 'var(--dbx-bg-color-current)' : null;
-    }, ...(ngDevMode ? [{ debugName: "tonalColorSignal" }] : /* istanbul ignore next */ []));
+        return Boolean(color) && this.toneSignal() < 100;
+    }, ...(ngDevMode ? [{ debugName: "isTonalSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxChipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.3", 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()", "style.--dbx-color-bg-tone": "bgToneStyleSignal()", "style.color": "tonalColorSignal()" }, classAttribute: "dbx-chip mat-standard-chip" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.3", 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 mat-standard-chip" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxChipDirective, decorators: [{
             type: Directive,
@@ -13761,8 +13748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     host: {
                         class: 'dbx-chip mat-standard-chip',
                         '[class]': 'styleSignal()',
-                        '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()',
-                        '[style.color]': 'tonalColorSignal()'
+                        '[class.dbx-color-tonal]': 'isTonalSignal()',
+                        '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()'
                     },
                     standalone: true
                 }]
@@ -13784,7 +13771,7 @@ class DbxChipListComponent {
     small = input(...(ngDevMode ? [undefined, { debugName: "small" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxChipListComponent, isStandalone: true, selector: "dbx-chip-list", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"inline\"" }, classAttribute: "dbx-chip-list" }, ngImport: i0, template: `
-    @for (chip of chips(); track chip.value) {
+    @for (chip of chips(); track chip.key ?? chip.label) {
       <dbx-chip class="dbx-chip-spacer" [display]="chip" [small]="small()">{{ chip.label }}</dbx-chip>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: DbxChipDirective, selector: "dbx-chip", inputs: ["small", "block", "color", "display", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -13794,7 +13781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             args: [{
                     selector: 'dbx-chip-list',
                     template: `
-    @for (chip of chips(); track chip.value) {
+    @for (chip of chips(); track chip.key ?? chip.label) {
       <dbx-chip class="dbx-chip-spacer" [display]="chip" [small]="small()">{{ chip.label }}</dbx-chip>
     }
   `,
@@ -13808,12 +13795,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }] } });
 
-/**
- * Returns the display label for a {@link TextChip}, preferring `label` over the deprecated `text` field.
- */
-function textChipLabel(chip) {
-    return chip.label ?? chip.text ?? '';
-}
 /**
  * Renders a read-only list of Material chip options from an array of {@link TextChip} objects.
  *
@@ -13825,10 +13806,6 @@ function textChipLabel(chip) {
 class DbxTextChipsComponent {
     defaultSelection = input(...(ngDevMode ? [undefined, { debugName: "defaultSelection" }] : /* istanbul ignore next */ []));
     chips = input(...(ngDevMode ? [undefined, { debugName: "chips" }] : /* istanbul ignore next */ []));
-    /**
-     * Returns the display label for a chip.
-     */
-    chipLabel = textChipLabel;
     /**
      * Returns the themed background CSS class for a chip's color.
      */
@@ -13839,9 +13816,9 @@ class DbxTextChipsComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxTextChipsComponent, isStandalone: true, selector: "dbx-text-chips", inputs: { defaultSelection: { classPropertyName: "defaultSelection", publicName: "defaultSelection", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (chips()) {
       <mat-chip-listbox class="dbx-text-chips-listbox">
-        @for (chip of chips(); track chipLabel(chip)) {
+        @for (chip of chips(); track chip.key ?? chip.label) {
           <mat-chip-option [selected]="chip.selected ?? defaultSelection()" [class]="chipColorClass(chip)" [matTooltip]="chip.tooltip!" matTooltipPosition="above">
-            {{ chipLabel(chip) }}
+            {{ chip.label }}
           </mat-chip-option>
         }
       </mat-chip-listbox>
@@ -13855,9 +13832,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     template: `
     @if (chips()) {
       <mat-chip-listbox class="dbx-text-chips-listbox">
-        @for (chip of chips(); track chipLabel(chip)) {
+        @for (chip of chips(); track chip.key ?? chip.label) {
           <mat-chip-option [selected]="chip.selected ?? defaultSelection()" [class]="chipColorClass(chip)" [matTooltip]="chip.tooltip!" matTooltipPosition="above">
-            {{ chipLabel(chip) }}
+            {{ chip.label }}
           </mat-chip-option>
         }
       </mat-chip-listbox>
@@ -14075,15 +14052,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], propDecorators: { contentElementRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], dbxClickToCopyText: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DbxClickToCopyTextDirective), { isSignal: true }] }], copyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyText", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], clipboardSnackbarMessagesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesConfig", required: false }] }], clipboardSnackbarMessagesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesEnabled", required: false }] }], clickToCopyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickToCopyIcon", required: false }] }], clickIconToCopyOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickIconToCopyOnly", required: false }] }] } });
 
-const importsAndExports$1 = [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective];
+const importsAndExports$1 = [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective];
 /**
  * Angular module that bundles all text-related layout components and directives, including
  * address display, chips, detail blocks, copy-to-clipboard, linkify, and number-with-limit.
  */
 class DbxTextModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxTextModule, imports: [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective], exports: [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxTextModule, imports: [DbxClickToCopyTextComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxTextChipsComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxTextModule, imports: [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective], exports: [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxTextModule, imports: [DbxClickToCopyTextComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxTextChipsComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxTextModule, decorators: [{
             type: NgModule,
@@ -15448,5 +15425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxClipboardDirective, AbstractDbxErrorWidgetComponent, AbstractDbxFileUploadComponent, AbstractDbxHelpWidgetDirective, AbstractDbxListAccordionViewDirective, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxPartialPresetFilterMenuDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDbxWidgetComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_AVATAR_CONTEXT_DATA_TOKEN, DBX_CHIP_DEFAULT_TONE, DBX_DARK_STYLE_CLASS_SUFFIX, DBX_HELP_WIDGET_ENTRY_DATA_TOKEN, DBX_LIST_ACCORDION_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_DEFAULT_SCROLL_DISTANCE, DBX_LIST_DEFAULT_THROTTLE_SCROLL, DBX_LIST_GRID_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_LIST_VIEW_DEFAULT_META_ICON, DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN, DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_ANCHOR_COMPONENTS, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_THEME_COLORS, DBX_THEME_COLORS_EXTRA, DBX_THEME_COLORS_EXTRA_SECONDARY, DBX_THEME_COLORS_MAIN, DBX_VALUE_LIST_VIEW_ITEM, DBX_WEB_FILE_PREVIEW_SERVICE_DEFAULT_DIALOG_WITH_COMPONENT_FUNCTION, DBX_WEB_FILE_PREVIEW_SERVICE_DEFAULT_PREVIEW_COMPONENT_FUNCTION, DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_COMPONENT_PRESET, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY, DEFAULT_DBX_ERROR_SNACKBAR_CONFIG, DEFAULT_DBX_HELP_VIEW_POPOVER_KEY, DEFAULT_DBX_LINKIFY_STRING_TYPE, DEFAULT_DBX_LIST_ACCORDION_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_GRID_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DEFAULT_VALUE_LIST_VIEW_CONTENT_COMPONENT_TRACK_BY_FUNCTION, DbxAccordionHeaderHeightDirective, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarErrorDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxAvatarComponent, DbxAvatarViewService, DbxAvatarViewServiceConfig, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBodyDirective, DbxButtonComponent, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerDirective, DbxCardBoxLayoutModule, DbxChipDirective, DbxChipListComponent, DbxClickToCopyTextComponent, DbxClickToCopyTextDirective, DbxColorDirective, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogInteractionModule, DbxDialogModule, DbxDownloadBlobButtonComponent, DbxDownloadTextViewComponent, DbxEmbedComponent, DbxErrorComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorSnackbarComponent, DbxErrorSnackbarService, DbxErrorViewComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFileUploadActionCompatable, DbxFileUploadActionSyncDirective, DbxFileUploadAreaComponent, DbxFileUploadButtonComponent, DbxFileUploadComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxHelpContextDirective, DbxHelpContextService, DbxHelpViewListComponent, DbxHelpViewListEntryComponent, DbxHelpViewPopoverButtonComponent, DbxHelpViewPopoverComponent, DbxHelpWidgetService, DbxHelpWidgetServiceConfig, DbxIconButtonComponent, DbxIconButtonModule, DbxIconItemComponent, DbxIconSpacerDirective, DbxIfSidenavDisplayModeDirective, DbxIframeComponent, DbxInjectionDialogComponent, DbxInteractionModule, DbxIntroActionSectionComponent, DbxLabelBlockComponent, DbxLayoutModule, DbxLinkComponent, DbxLinkifyComponent, DbxLinkifyService, DbxLinkifyServiceConfig, DbxListAccordionViewComponentImportsModule, DbxListComponent, DbxListEmptyContentComponent, DbxListGridViewComponentImportsModule, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, DbxListModifierModule, DbxListModule, DbxListTitleGroupDirective, DbxListView, DbxListViewMetaIconComponent, DbxListViewWrapper, DbxListWrapperComponentImportsModule, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxModelObjectStateService, actions as DbxModelStateActions, model_actions as DbxModelStateModelActions, DbxModelTrackerService, DbxModelTypesService, DbxModelViewTrackerStorage, DbxNavbarComponent, DbxNumberWithLimitComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxPopoverCloseButtonComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionContentModule, DbxPopoverInteractionModule, DbxPopoverScrollContentDirective, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxProgressBarButtonComponent, DbxProgressButtonsModule, DbxProgressSpinnerButtonComponent, DbxPromptBoxDirective, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorModule, DbxResizedDirective, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListViewComponent, DbxSelectionValueListViewComponentImportsModule, DbxSelectionValueListViewContentComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepComponent, DbxStepLayoutModule, DbxStructureDirective, DbxStructureModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxTextChipsComponent, DbxTextColorDirective, DbxTextModule, DbxTwoBlockComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadDirective, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListAccordionViewComponent, DbxValueListAccordionViewContentComponent, DbxValueListAccordionViewContentGroupComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListGridViewContentComponent, DbxValueListGridViewContentGroupComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListView, DbxValueListViewComponent, DbxValueListViewComponentImportsModule, DbxValueListViewContentComponent, DbxValueListViewContentGroupComponent, DbxValueListViewGroupDelegate, DbxWebFilePreviewComponent, DbxWebFilePreviewService, DbxWebModule, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, DbxZipBlobPreviewComponent, DbxZipPreviewComponent, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, UNKNOWN_ERROR_WIDGET_CODE, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, copyToClipboardFunction, dbxColorBackground, dbxListAccordionViewComponentImportsAndExports, dbxListGridViewComponentImportsAndExports, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxStyleClassCleanSuffix, dbxThemeColorCssToken, dbxThemeColorCssTokenVar, dbxThemeColorCssVariable, dbxThemeColorCssVariableVar, dbxValueListItemDecisionFunction, dbxZipBlobPreviewEntryTreeFromEntries, defaultDbxModelViewTrackerStorageAccessorFactory, defaultDbxValueListViewGroupDelegate, defaultDbxValueListViewGroupValuesFunction, disableRightClickInCdkBackdrop, fileAcceptFilterTypeStringArray, fileAcceptFunction, fileAcceptString, fileArrayAcceptMatchFunction, index as fromDbxModel, injectCopyToClipboardFunction, injectCopyToClipboardFunctionWithSnackbarMessage, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, index$1 as onDbxModel, openEmbedDialog, openIframeDialog, openZipPreviewDialog, overrideClickElementEffect, provideDbxFileUploadActionCompatable, provideDbxHelpServices, provideDbxLinkify, provideDbxListView, provideDbxListViewWrapper, provideDbxModelService, provideDbxProgressButtonGlobalConfig, provideDbxPromptConfirm, provideDbxRouterWebAngularRouterProviderConfig, provideDbxRouterWebUiRouterProviderConfig, provideDbxScreenMediaService, provideDbxStyleService, provideDbxValueListView, provideDbxValueListViewGroupDelegate, provideDbxValueListViewModifier, provideDbxWebFilePreviewServiceEntries, provideTwoColumnsContext, registerHelpContextKeysWithDbxHelpContextService, resizeSignal, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, trackByModelKeyRef, trackByUniqueIdentifier };
+export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxClipboardDirective, AbstractDbxErrorWidgetComponent, AbstractDbxFileUploadComponent, AbstractDbxHelpWidgetDirective, AbstractDbxListAccordionViewDirective, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxPartialPresetFilterMenuDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDbxWidgetComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_AVATAR_CONTEXT_DATA_TOKEN, DBX_CHIP_DEFAULT_TONE, DBX_DARK_STYLE_CLASS_SUFFIX, DBX_HELP_WIDGET_ENTRY_DATA_TOKEN, DBX_LIST_ACCORDION_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_DEFAULT_SCROLL_DISTANCE, DBX_LIST_DEFAULT_THROTTLE_SCROLL, DBX_LIST_GRID_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_LIST_VIEW_DEFAULT_META_ICON, DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN, DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_ANCHOR_COMPONENTS, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_THEME_COLORS, DBX_THEME_COLORS_EXTRA, DBX_THEME_COLORS_EXTRA_SECONDARY, DBX_THEME_COLORS_MAIN, DBX_VALUE_LIST_VIEW_ITEM, DBX_WEB_FILE_PREVIEW_SERVICE_DEFAULT_DIALOG_WITH_COMPONENT_FUNCTION, DBX_WEB_FILE_PREVIEW_SERVICE_DEFAULT_PREVIEW_COMPONENT_FUNCTION, DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_COMPONENT_PRESET, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY, DEFAULT_DBX_ERROR_SNACKBAR_CONFIG, DEFAULT_DBX_HELP_VIEW_POPOVER_KEY, DEFAULT_DBX_LINKIFY_STRING_TYPE, DEFAULT_DBX_LIST_ACCORDION_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_GRID_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DEFAULT_VALUE_LIST_VIEW_CONTENT_COMPONENT_TRACK_BY_FUNCTION, DbxAccordionHeaderHeightDirective, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarErrorDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxAvatarComponent, DbxAvatarViewService, DbxAvatarViewServiceConfig, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBodyDirective, DbxButtonComponent, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerDirective, DbxCardBoxLayoutModule, DbxChipDirective, DbxChipListComponent, DbxClickToCopyTextComponent, DbxClickToCopyTextDirective, DbxColorDirective, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogInteractionModule, DbxDialogModule, DbxDownloadBlobButtonComponent, DbxDownloadTextViewComponent, DbxEmbedComponent, DbxErrorComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorSnackbarComponent, DbxErrorSnackbarService, DbxErrorViewComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFileUploadActionCompatable, DbxFileUploadActionSyncDirective, DbxFileUploadAreaComponent, DbxFileUploadButtonComponent, DbxFileUploadComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxHelpContextDirective, DbxHelpContextService, DbxHelpViewListComponent, DbxHelpViewListEntryComponent, DbxHelpViewPopoverButtonComponent, DbxHelpViewPopoverComponent, DbxHelpWidgetService, DbxHelpWidgetServiceConfig, DbxIconButtonComponent, DbxIconButtonModule, DbxIconItemComponent, DbxIconSpacerDirective, DbxIfSidenavDisplayModeDirective, DbxIframeComponent, DbxInjectionDialogComponent, DbxInteractionModule, DbxIntroActionSectionComponent, DbxLabelBlockComponent, DbxLayoutModule, DbxLinkComponent, DbxLinkifyComponent, DbxLinkifyService, DbxLinkifyServiceConfig, DbxListAccordionViewComponentImportsModule, DbxListComponent, DbxListEmptyContentComponent, DbxListGridViewComponentImportsModule, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, DbxListModifierModule, DbxListModule, DbxListTitleGroupDirective, DbxListView, DbxListViewMetaIconComponent, DbxListViewWrapper, DbxListWrapperComponentImportsModule, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxModelObjectStateService, actions as DbxModelStateActions, model_actions as DbxModelStateModelActions, DbxModelTrackerService, DbxModelTypesService, DbxModelViewTrackerStorage, DbxNavbarComponent, DbxNumberWithLimitComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxPopoverCloseButtonComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionContentModule, DbxPopoverInteractionModule, DbxPopoverScrollContentDirective, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxProgressBarButtonComponent, DbxProgressButtonsModule, DbxProgressSpinnerButtonComponent, DbxPromptBoxDirective, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorModule, DbxResizedDirective, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListViewComponent, DbxSelectionValueListViewComponentImportsModule, DbxSelectionValueListViewContentComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepBlockComponent, DbxStructureDirective, DbxStructureModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxTextChipsComponent, DbxTextColorDirective, DbxTextModule, DbxTwoBlockComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadDirective, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListAccordionViewComponent, DbxValueListAccordionViewContentComponent, DbxValueListAccordionViewContentGroupComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListGridViewContentComponent, DbxValueListGridViewContentGroupComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListView, DbxValueListViewComponent, DbxValueListViewComponentImportsModule, DbxValueListViewContentComponent, DbxValueListViewContentGroupComponent, DbxValueListViewGroupDelegate, DbxWebFilePreviewComponent, DbxWebFilePreviewService, DbxWebModule, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, DbxZipBlobPreviewComponent, DbxZipPreviewComponent, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, UNKNOWN_ERROR_WIDGET_CODE, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, copyToClipboardFunction, dbxColorBackground, dbxListAccordionViewComponentImportsAndExports, dbxListGridViewComponentImportsAndExports, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxStyleClassCleanSuffix, dbxThemeColorCssToken, dbxThemeColorCssTokenVar, dbxThemeColorCssVariable, dbxThemeColorCssVariableVar, dbxValueListItemDecisionFunction, dbxZipBlobPreviewEntryTreeFromEntries, defaultDbxModelViewTrackerStorageAccessorFactory, defaultDbxValueListViewGroupDelegate, defaultDbxValueListViewGroupValuesFunction, disableRightClickInCdkBackdrop, fileAcceptFilterTypeStringArray, fileAcceptFunction, fileAcceptString, fileArrayAcceptMatchFunction, index as fromDbxModel, injectCopyToClipboardFunction, injectCopyToClipboardFunctionWithSnackbarMessage, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, index$1 as onDbxModel, openEmbedDialog, openIframeDialog, openZipPreviewDialog, overrideClickElementEffect, provideDbxFileUploadActionCompatable, provideDbxHelpServices, provideDbxLinkify, provideDbxListView, provideDbxListViewWrapper, provideDbxModelService, provideDbxProgressButtonGlobalConfig, provideDbxPromptConfirm, provideDbxRouterWebAngularRouterProviderConfig, provideDbxRouterWebUiRouterProviderConfig, provideDbxScreenMediaService, provideDbxStyleService, provideDbxValueListView, provideDbxValueListViewGroupDelegate, provideDbxValueListViewModifier, provideDbxWebFilePreviewServiceEntries, provideTwoColumnsContext, registerHelpContextKeysWithDbxHelpContextService, resizeSignal, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, trackByModelKeyRef, trackByUniqueIdentifier };
 //# sourceMappingURL=dereekb-dbx-web.mjs.map