@dereekb/dbx-web 13.5.2 → 13.6.0

package/lib/button/_button.scss

@@ -78,6 +78,7 @@ $big-button-height: 46px; // 33% bigger
   .dbx-button-column {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
 
     > * {
       margin-bottom: 6px !important;

package/lib/layout/style/_style.scss

@@ -142,6 +142,12 @@
     @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
   }
 
+  // tonal mode: use the vibrant theme color as text instead of the contrast color.
+  // Applied via CSS class (not [style.color]) to avoid conflicting with [ngStyle] on buttons.
+  .dbx-color-tonal {
+    color: var(#{theming.$dbx-bg-color-var});
+  }
+
   // material color overrides
   // --mdc-text-button-label-text-color: #{theming.$dbx-color-var};
   --mat-button-text-label-text-color: #{theming.$dbx-color-var};

package/package.json

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

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

@@ -889,11 +889,11 @@ type DbxColorTone = number;
  * @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'`)
  */
 declare function dbxColorBackground(color: Maybe<DbxThemeColor | ''>): CssClass;
 /**
@@ -3835,6 +3835,8 @@ declare class DbxStepLayoutModule {
  * 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
@@ -3851,17 +3853,15 @@ declare class DbxColorDirective {
     readonly dbxColorTone: _angular_core.InputSignal<Maybe<number>>;
     readonly cssClassSignal: _angular_core.Signal<string>;
     /**
-     * Sets `--dbx-color-bg-tone` on the host to control the background opacity via `color-mix` in the `-bg` class mixin.
+     * 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]`).
      */
-    readonly bgToneStyleSignal: _angular_core.Signal<string | null>;
+    readonly isTonalSignal: _angular_core.Signal<boolean>;
     /**
-     * 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.
+     * Sets `--dbx-color-bg-tone` on the host to control the background opacity via `color-mix` in the `-bg` class mixin.
      */
-    readonly tonalColorSignal: _angular_core.Signal<"var(--dbx-bg-color-current)" | null>;
+    readonly bgToneStyleSignal: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DbxColorDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DbxColorDirective, "[dbxColor]", never, { "dbxColor": { "alias": "dbxColor"; "required": false; "isSignal": true; }; "dbxColorTone": { "alias": "dbxColorTone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -4408,13 +4408,11 @@ declare class DbxChipDirective {
      */
     readonly bgToneStyleSignal: _angular_core.Signal<string | null>;
     /**
-     * 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]`).
      */
-    readonly tonalColorSignal: _angular_core.Signal<"var(--dbx-bg-color-current)" | null>;
+    readonly isTonalSignal: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DbxChipDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DbxChipDirective, "dbx-chip", never, { "small": { "alias": "small"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -4920,6 +4918,11 @@ interface DbxProgressButtonConfig {
      * Whether to render as a floating action button (FAB).
      */
     readonly fab?: Maybe<boolean>;
+    /**
+     * Accessible label for the button, applied as `aria-label`.
+     * Especially important for icon-only buttons that lack visible text.
+     */
+    readonly ariaLabel?: Maybe<string>;
 }
 /**
  * Configuration for the icon displayed inside a progress button.
@@ -9262,6 +9265,7 @@ declare class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponen
     readonly fileInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     readonly text: _angular_core.InputSignal<Maybe<string>>;
     readonly icon: _angular_core.InputSignal<Maybe<string>>;
+    readonly ariaLabel: _angular_core.InputSignal<Maybe<string>>;
     readonly buttonStyle: _angular_core.InputSignal<Maybe<DbxButtonStyle>>;
     readonly filesChanged: _angular_core.OutputEmitterRef<DbxFileUploadFilesChangedEvent>;
     readonly buttonAcceptSignal: _angular_core.Signal<string | undefined>;
@@ -9280,7 +9284,7 @@ declare class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponen
     openInput(): void;
     fileInputChanged(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DbxFileUploadButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DbxFileUploadButtonComponent, "dbx-file-upload-button", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; "isSignal": true; }; }, { "filesChanged": "filesChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DbxFileUploadButtonComponent, "dbx-file-upload-button", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; "isSignal": true; }; }, { "filesChanged": "filesChanged"; }, never, ["*"], true, never>;
 }
 
 /**