@dereekb/dbx-web 13.5.2 → 13.6.0

package/fesm2022/dereekb-dbx-web.mjs

@@ -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>
   `,
@@ -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,11 +2008,11 @@ class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective
         return hasCustomStyle ? { 'dbx-progress-spinner-custom': true } : undefined;
     }, ...(ngDevMode ? [{ debugName: "customSpinnerStyleClassSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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];
@@ -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 */ []));
@@ -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,
@@ -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 }] }] } });
 
 /**
@@ -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>
     }
   `,
@@ -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 }] }] } });
@@ -13740,18 +13744,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 +13763,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
                 }]