@dereekb/dbx-web 13.38.0 → 13.40.0

package/eslint/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@dereekb/dbx-web/eslint",
-  "version": "13.38.0",
+  "version": "13.40.0",
+  "type": "module",
   "peerDependencies": {
-    "@dereekb/util": "13.38.0",
+    "@dereekb/util": "13.40.0",
     "@typescript-eslint/utils": "8.59.3"
   },
   "devDependencies": {
     "@angular-eslint/template-parser": "21.4.0",
     "@angular/core": "21.2.11",
-    "@dereekb/dbx-core": "13.38.0",
-    "@dereekb/rxjs": "13.38.0",
+    "@dereekb/dbx-core": "13.40.0",
+    "@dereekb/rxjs": "13.40.0",
     "@typescript-eslint/parser": "8.59.3",
     "eslint": "10.4.0",
     "rxjs": "^7.8.2"
@@ -17,13 +18,12 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "module": "./index.esm.js",
       "types": "./index.d.ts",
-      "import": "./index.cjs.mjs",
-      "default": "./index.cjs.js"
+      "import": "./index.esm.js",
+      "default": "./index.esm.js"
     }
   },
   "module": "./index.esm.js",
-  "main": "./index.cjs.js",
+  "main": "./index.esm.js",
   "types": "./index.d.ts"
-}
+}

package/lib/button/_button.scss

@@ -285,14 +285,6 @@ $big-button-height: 46px; // 33% bigger
 
   .dbx-icon-button > .mat-mdc-button {
     background: inherit;
-
-    &.mat-unthemed {
-      // TEMPORARY: For now we just unset the ripple colors but later we want to make sure that
-      // the colors from dbx-primary, dbx-accent, etc... are set on these label colors instead
-      // for buttons. Button column isn't correct for now either...
-      --mdc-text-button-label-text-color: unset;
-      --mat-mdc-button-persistent-ripple-color: unset;
-    }
   }
 
   .dbx-icon-button.dbx-grey-bg {

package/lib/error/_error.scss

@@ -45,11 +45,11 @@ $error-message-button-margin: 12px;
   }
 
   .mat-mdc-snack-bar-container.dbx-error-snackbar {
-    --mdc-snackbar-container-color: var(--dbx-warn-color);
-    --mdc-snackbar-supporting-text-color: var(--dbx-warn-color-contrast);
+    --mat-snack-bar-container-color: var(--dbx-warn-color);
+    --mat-snack-bar-supporting-text-color: var(--dbx-warn-color-contrast);
 
     .dbx-error-snackbar-content .dbx-warn {
-      color: var(--mdc-snackbar-supporting-text-color);
+      color: var(--mat-snack-bar-supporting-text-color);
     }
   }
 }

package/lib/layout/list/_list.scss

@@ -242,12 +242,6 @@ $list-item-padded-min-height: 42px;
           min-height: 56px;
         }
       }
-
-      // Fixes:
-      &.mdc-list-item--disabled .mdc-list-item__start.mat-icon {
-        color: var(--mdc-list-list-item-disabled-leading-icon-color, var(--mat-app-on-surface));
-        opacity: var(--mdc-list-list-item-disabled-leading-icon-opacity);
-      }
     }
 
     .mat-selection-list.mat-mdc-list-base .dbx-list-view-item.mat-mdc-list-item .mat-mdc-list-item-content .mat-mdc-list-text {
@@ -538,13 +532,8 @@ $list-item-padded-min-height: 42px;
   }
 
   .dbx-list-view-group-header {
-    color: var(--mdc-list-list-item-label-text-color);
     background: var(--dbx-list-view-group-header-background, var(--mat-sidenav-content-background-color));
 
-    .item-details {
-      color: var(--mdc-list-list-item-supporting-text-color);
-    }
-
     --mat-divider-width: 2px;
     border-bottom-style: solid;
     border-bottom-color: var(--mat-divider-color);

package/lib/router/layout/anchorlist/_anchorlist.scss

@@ -9,24 +9,29 @@ $anchor-list-item-active-opacity: 100%;
 $active-child-item-left-padding: 2px;
 
 $default-anchor-list-item-child-list-item-text-size: 14px;
-$default-mdc-list-list-item-leading-icon-size: 24px;
+$default-anchor-list-item-leading-icon-size: 24px;
 
 // MARK: Mixin
 @mixin core() {
   .dbx-anchor-list.mat-mdc-nav-list {
     padding-top: 0; // no padding
-    --parent-mdc-list-list-item-leading-icon-size: var(--mdc-list-list-item-leading-icon-size, #{$default-mdc-list-list-item-leading-icon-size});
-    --parent-mdc-list-list-item-label-text-size: var(--mdc-list-list-item-label-text-size, #{$default-anchor-list-item-child-list-item-text-size});
+
+    // Relays the list's effective item metrics down so a nested child list can size itself relative to
+    // its parent. Reads the M3 `--mat-list-*` tokens Angular Material actually consumes — the legacy
+    // `--mdc-list-*` names this relay used to read/write are not emitted or read by Material 21, which
+    // silently made the `--dbx-anchor-list-item-child-list-item-*` override points dead.
+    --dbx-anchor-list-parent-item-icon-size: var(--mat-list-list-item-leading-icon-size, #{$default-anchor-list-item-leading-icon-size});
+    --dbx-anchor-list-parent-item-text-size: var(--mat-list-list-item-label-text-size, #{$default-anchor-list-item-child-list-item-text-size});
 
     .mat-mdc-list-item .mat-icon.mat-mdc-list-item-icon {
-      font-size: var(--mdc-list-list-item-leading-icon-size, var(--parent-mdc-list-list-item-leading-icon-size));
-      padding-left: calc((var(--parent-mdc-list-list-item-leading-icon-size) - var(--mdc-list-list-item-leading-icon-size, var(--parent-mdc-list-list-item-leading-icon-size))) / 2); // align the icons
+      font-size: var(--mat-list-list-item-leading-icon-size, var(--dbx-anchor-list-parent-item-icon-size));
+      padding-left: calc((var(--dbx-anchor-list-parent-item-icon-size) - var(--mat-list-list-item-leading-icon-size, var(--dbx-anchor-list-parent-item-icon-size))) / 2); // align the icons
     }
 
     .dbx-anchor-list-child {
       // text and icon size text is smaller
-      --mdc-list-list-item-leading-icon-size: var(--dbx-anchor-list-item-child-list-item-icon-size, var(--parent-mdc-list-list-item-leading-icon-size));
-      --mdc-list-list-item-label-text-size: var(--dbx-anchor-list-item-child-list-item-text-size, var(--parent-mdc-list-list-item-label-text-size));
+      --mat-list-list-item-leading-icon-size: var(--dbx-anchor-list-item-child-list-item-icon-size, var(--dbx-anchor-list-parent-item-icon-size));
+      --mat-list-list-item-label-text-size: var(--dbx-anchor-list-item-child-list-item-text-size, var(--dbx-anchor-list-parent-item-text-size));
 
       .mat-mdc-list-item .mdc-list-item__content {
         padding-left: $active-child-item-left-padding;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.38.0",
+  "version": "13.40.0",
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -13,12 +13,12 @@
     "@angular/material": "^21.2.9",
     "@angular/platform-browser": "21.2.11",
     "@cantoo/pdf-lib": "^2.6.5",
-    "@dereekb/browser": "13.38.0",
-    "@dereekb/date": "13.38.0",
-    "@dereekb/dbx-core": "13.38.0",
-    "@dereekb/rxjs": "13.38.0",
-    "@dereekb/util": "13.38.0",
-    "@dereekb/vitest": "13.38.0",
+    "@dereekb/browser": "13.40.0",
+    "@dereekb/date": "13.40.0",
+    "@dereekb/dbx-core": "13.40.0",
+    "@dereekb/rxjs": "13.40.0",
+    "@dereekb/util": "13.40.0",
+    "@dereekb/vitest": "13.40.0",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
     "@ngrx/effects": "^21.1.0",
@@ -64,10 +64,9 @@
       "default": "./fesm2022/dereekb-dbx-web-table.mjs"
     },
     "./eslint": {
-      "module": "./eslint/index.esm.js",
       "types": "./eslint/index.d.ts",
-      "import": "./eslint/index.cjs.mjs",
-      "default": "./eslint/index.cjs.js"
+      "import": "./eslint/index.esm.js",
+      "default": "./eslint/index.esm.js"
     },
     "./package.json": {
       "default": "./package.json"

package/eslint/index.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./index.cjs.js').default;