@dereekb/dbx-web 13.20.0 → 13.22.0

package/eslint/src/lib/require-action-error-handler.rule.d.ts

@@ -0,0 +1,30 @@
+import { type AstNode } from './util';
+/**
+ * ESLint rule definition shape used by `require-action-error-handler`.
+ */
+export interface DbxWebRequireActionErrorHandlerRuleDefinition {
+    readonly meta: {
+        readonly type: 'suggestion';
+        readonly fixable: undefined;
+        readonly docs: {
+            readonly description: string;
+            readonly recommended: boolean;
+        };
+        readonly messages: {
+            readonly missingErrorHandler: string;
+        };
+        readonly schema: readonly object[];
+    };
+    create(context: AstNode): Record<string, (node: AstNode) => void>;
+}
+/**
+ * ESLint (Angular template) rule that flags a `dbxAction` which runs work (has a
+ * handler or a trigger) but presents no errors to the user.
+ *
+ * Satisfied by ANY error directive in the context: `dbxActionSnackbarError`,
+ * `[dbxActionError]`, `[dbxActionSnackbar]`, or `[dbxActionErrorHandler]`.
+ *
+ * Shares the same context-scoping bail conditions as `require-action-value-source`
+ * (`[dbxActionSource]` on self/ancestor, or a nested `dbxAction`).
+ */
+export declare const DBX_WEB_REQUIRE_ACTION_ERROR_HANDLER_RULE: DbxWebRequireActionErrorHandlerRuleDefinition;

package/eslint/src/lib/require-action-value-source.rule.d.ts

@@ -0,0 +1,36 @@
+import { type AstNode } from './util';
+/**
+ * ESLint rule definition shape used by `require-action-value-source`.
+ */
+export interface DbxWebRequireActionValueSourceRuleDefinition {
+    readonly meta: {
+        readonly type: 'problem';
+        readonly fixable: undefined;
+        readonly docs: {
+            readonly description: string;
+            readonly recommended: boolean;
+        };
+        readonly messages: {
+            readonly missingValueSource: string;
+        };
+        readonly schema: readonly object[];
+    };
+    create(context: AstNode): Record<string, (node: AstNode) => void>;
+}
+/**
+ * ESLint (Angular template) rule that flags a `dbxAction` whose context has a
+ * trigger but no value source.
+ *
+ * Such an action hangs: clicking the trigger moves the store to TRIGGERED, but with
+ * nothing to call `readyValue()` it never advances to VALUE_READY, so the handler
+ * never runs.
+ *
+ * Targets simple, inline cases only. It bails (does not report) when the value may
+ * be supplied in a way a static template scan cannot see:
+ * - `[dbxActionSource]` on the element or an ancestor (store forwarded from TS), or
+ * - a nested `dbxAction` inside the subtree (ambiguous which context owns a value source).
+ *
+ * For legitimate programmatic-value cases (or a demo intentionally showing the
+ * TRIGGERED state) suppress with `<!-- eslint-disable-next-line dereekb-dbx-web/require-action-value-source -->`.
+ */
+export declare const DBX_WEB_REQUIRE_ACTION_VALUE_SOURCE_RULE: DbxWebRequireActionValueSourceRuleDefinition;

package/lib/interaction/prompt/_prompt.scss

@@ -13,21 +13,29 @@ $dbx-popup-controls-height: 33px;
   }
 
   /// @dbx-utility prompt-box
-  /// @intent centered prompt panel — auto-margined max-width box with a 40px inset (override via `--dbx-prompt-box-padding`) and a "medium" corner radius (override via `--dbx-prompt-box-border-radius`); compose with `.elevate` to lift it with elevation 2
+  /// @intent centered prompt panel — auto-margined max-width box with a 40px inset (override via `--dbx-prompt-box-padding`) and a "medium" corner radius (override via `--dbx-prompt-box-border-radius`); compose with `.elevate` to lift it M3-style — a brighter `surface-bright` tonal wash plus a soft lift shadow
   /// @role layout
   /// @see-also content-box, content-elevate
   .dbx-prompt-box {
     margin: auto;
     padding: var(--dbx-prompt-box-padding, 40px);
     max-width: $box-max-width;
-    // Visible via the `.elevate` shadow (default) or any app-supplied background;
-    // the box itself intentionally has no background. Deliberately NOT chained
-    // through `--mat-dialog-container-shape` — a prompt box is a page surface,
+    // Visible via `.elevate` (a bright tonal surface + soft lift shadow, default) or any
+    // app-supplied background; the box itself intentionally has no background. Deliberately
+    // NOT chained through `--mat-dialog-container-shape` — a prompt box is a page surface,
     // not a dialog.
     border-radius: var(--dbx-prompt-box-border-radius, var(--mat-sys-corner-medium, 12px));
 
+    // M3 elevation: an elevated prompt panel reads as raised primarily through a brighter
+    // tonal surface — a low-opacity wash of the active dbxColor (`--dbx-bg-color-current`,
+    // primary by default, driven by an ancestor/host `[dbxColor]`) over `surface-bright` —
+    // plus a soft lift shadow for protection against the background, replacing the former
+    // Material elevation(2) shadow. Override `--dbx-prompt-box-elevate-tone` (percentage) to
+    // tune the wash, `--dbx-prompt-box-elevate-bg` to replace the background outright, or
+    // `--dbx-prompt-box-elevate-shadow` to retune/remove (`none`) the lift shadow.
     &.elevate {
-      @include theming.elevation(2);
+      background: var(--dbx-prompt-box-elevate-bg, color-mix(in srgb, #{theming.$dbx-bg-color} var(--dbx-prompt-box-elevate-tone, 8%), var(--mat-sys-surface-bright)));
+      box-shadow: var(--dbx-prompt-box-elevate-shadow, var(--mat-sys-level2));
     }
   }
 }

package/lib/layout/column/_column.scss

@@ -9,7 +9,7 @@ $two-columns-right-padding-size: var(--dbx-padding-2);
 // MARK: Mixin
 @mixin core() {
   /// @dbx-utility two-column
-  /// @intent two-column page layout — fixed-width left column with elevated right content area
+  /// @intent two-column page layout — fixed-width left column divided from the right content area by a border
   /// @role layout
   .dbx-two-column {
     height: 100%;
@@ -29,13 +29,18 @@ $two-columns-right-padding-size: var(--dbx-padding-2);
     }
 
     .left-column {
-      @include theming.elevation(1);
+      /// Color of the right boundary separating the fixed left column from the right content
+      /// area (replaces the former elevation shadow). Column-specific override point; defaults
+      /// to the shared --dbx-divider-color. Retint just this boundary by overriding it, or set
+      /// it to `transparent` to hide the divider while keeping the layout box.
+      /// @role color
+      /// @intent two column divider color, two column border color, left column separator color
+      border-right: 1px solid var(--dbx-two-column-border-color, var(--dbx-divider-color));
 
       width: $two-column-left-width;
       flex: 0 0 auto;
 
       overflow: auto;
-      // background: red;
     }
 
     .right-column {

package/lib/layout/list/_list.scss

@@ -31,6 +31,14 @@ $list-item-padded-min-height: 42px;
     --dbx-list-item-selected-color: var(--mat-sys-primary-container);
     --dbx-list-item-selected-on-color: var(--mat-sys-on-primary-container);
 
+    // Active route (nav/value list `dbx-anchor-active`) row tone. A `dbx-anchor` row marks the active
+    // route with its own `dbx-anchor-active` class rather than Material's `.mdc-list-item--activated`, so
+    // it carries its own tone token here. Defaults to the selected/activated tone above (so an active
+    // route reads the same as a selected row out of the box), but can be retargeted independently — e.g.
+    // set `--dbx-list-item-active-color` on the list host — to give active routes a distinct color.
+    --dbx-list-item-active-color: var(--dbx-list-item-selected-color);
+    --dbx-list-item-active-on-color: var(--dbx-list-item-selected-on-color);
+
     // Rows are square by default; their corners round per-position / per-state below.
     --mat-list-active-indicator-shape: 0;
     --mat-list-list-item-container-shape: 0;
@@ -98,14 +106,22 @@ $list-item-padded-min-height: 42px;
       --mat-list-list-item-container-shape: var(--dbx-list-item-radius-resolved);
     }
 
-    // Any hovered / focused / selected / activated row rounds all four corners (wins over the
-    // per-position rules above via source order at equal specificity, and the :hover/--selected
-    // selectors out-specify the bare position rules).
-    .dbx-list-view .mat-mdc-list-item:hover,
-    .dbx-list-view .mat-mdc-list-item:focus,
-    .dbx-list-view .mat-mdc-list-item.mdc-list-item--selected,
-    .dbx-list-view .mat-mdc-list-item.mdc-list-item--activated,
-    .dbx-list-view .mat-mdc-list-item[aria-selected='true'] {
+    // Any hovered / focused / selected / activated / active-route row rounds all four corners. These must
+    // out-specify the per-position first/last/only rules above — and the value-list ones
+    // (`.dbx-list-view-group-content > dbx-anchor:first-of-type .dbx-list-view-item`) carry an element +
+    // pseudo-class, landing at (0,3,1). A bare `.dbx-list-view .mat-mdc-list-item` state selector is only
+    // (0,3,0), so it would LOSE and leave the outer corner square — e.g. the active first row keeping a
+    // square bottom. Qualifying each row with `.dbx-list-view-item` raises these to (0,4,0) so the
+    // all-corners shape wins (every `.dbx-list-view` row — value-list `<a mat-list-item>` and selection
+    // `<mat-list-option>` alike — carries that class). `.dbx-anchor-active` covers nav/value-list rows
+    // whose active route is signaled by `dbx-anchor` — it never adds Material's `.mdc-list-item--activated`,
+    // so without this the active (un-hovered) row would otherwise fall back to the square per-position shape.
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item:hover,
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item:focus,
+    .dbx-list-view .dbx-anchor-active .dbx-list-view-item.mat-mdc-list-item,
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item.mdc-list-item--selected,
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item.mdc-list-item--activated,
+    .dbx-list-view .dbx-list-view-item.mat-mdc-list-item[aria-selected='true'] {
       --mat-list-list-item-container-shape: var(--dbx-list-item-radius-resolved);
     }
 
@@ -125,6 +141,12 @@ $list-item-padded-min-height: 42px;
       --mat-list-list-item-container-color: var(--dbx-list-item-selected-color);
       color: var(--dbx-list-item-selected-on-color);
     }
+
+    // Active-route row tone (a `dbx-anchor` row whose route is active) is painted in `_anchorlist.scss`,
+    // which targets both `.dbx-anchor-list` and `.dbx-list-view` nav lists via the
+    // `--dbx-anchor-list-item-active-color` token. That token defaults to `--dbx-list-item-active-color`
+    // (defined above), so a value list's active route matches its selected tone out of the box; the
+    // sidenav overrides the token for its accent treatment. Only the corner shape is handled here (above).
   }
 
   // dbx-anchor-list (nav) rows default to an M3 medium corner via their OWN
@@ -140,13 +162,18 @@ $list-item-padded-min-height: 42px;
     }
   }
 
-  // The sidenav anchor list rows sit flush against the left screen edge, so only the RIGHT corners round —
-  // the radius is composed into a `0 r r 0` shorthand (top-left / top-right / bottom-right / bottom-left),
+  // Sidenav anchor-list rows sit flush against the left drawer edge, so only the RIGHT corners round — the
+  // radius is composed into a `0 r r 0` shorthand (top-left / top-right / bottom-right / bottom-left),
   // leaving the left corners square. The "how round" radius defaults to the regular anchor-list radius
   // (`--dbx-anchor-list-item-border-radius`) so the sidenav tracks the `anchor-list-corner-*` lever by default,
-  // but `--dbx-sidenav-anchor-list-item-border-radius` overrides it for sidenav-specific tuning. Higher
-  // specificity than `.dbx-anchor-list`, so it wins for the inner nav-list inside a sidenav host.
-  .dbx-sidenav-anchor-list .dbx-anchor-list {
+  // but `--dbx-sidenav-anchor-list-item-border-radius` overrides it for sidenav-specific tuning.
+  //
+  // Scoped to EVERY anchor list inside a sidenav drawer (`.dbx-sidenav .mat-drawer .dbx-anchor-list`), not
+  // just the `[anchors]` list (`.dbx-sidenav-anchor-list`): a separate `<dbx-anchor-list>` dropped into a
+  // `[top]` / `[bottom]` content slot must round the same way, otherwise it falls back to the generic
+  // all-corners `.dbx-anchor-list` radius and reads as floating full-radius pills beside the flush main
+  // rows. Higher specificity than `.dbx-anchor-list`, so it wins for any inner nav-list inside a sidenav.
+  .dbx-sidenav .mat-drawer .dbx-anchor-list {
     --mat-list-active-indicator-shape: 0 var(--dbx-sidenav-anchor-list-item-border-radius, var(--dbx-anchor-list-item-border-radius, var(--mat-sys-corner-medium, 12px))) var(--dbx-sidenav-anchor-list-item-border-radius, var(--dbx-anchor-list-item-border-radius, var(--mat-sys-corner-medium, 12px))) 0;
     --mat-list-list-item-container-shape: 0 var(--dbx-sidenav-anchor-list-item-border-radius, var(--dbx-anchor-list-item-border-radius, var(--mat-sys-corner-medium, 12px))) var(--dbx-sidenav-anchor-list-item-border-radius, var(--dbx-anchor-list-item-border-radius, var(--mat-sys-corner-medium, 12px))) 0;
   }
@@ -161,6 +188,9 @@ $list-item-padded-min-height: 42px;
 
   .dbx-list-empty-content {
     text-align: center;
+    // Breathing room around the empty-state content so it doesn't sit flush against its container.
+    // Override point (`--dbx-list-empty-content-padding`) defaults to the global `--dbx-padding-2` spacing token.
+    padding: var(--dbx-list-empty-content-padding, var(--dbx-padding-2));
   }
 
   .dbx-list-content {
@@ -463,8 +493,48 @@ $list-item-padded-min-height: 42px;
     position: unset; // do not touch the divider in dbx-list
   }
 
+  // Accordion list view renders as a card with a rounded TOP. The rounded frame lives on the scroll
+  // VIEWPORT (`.dbx-list-content`) so it clips the scrolling content — including panels that scroll BEHIND a
+  // sticky group header — which stops them bleeding through the rounded corner. (A rounded ancestor can't
+  // clip a composited `position: sticky` element in Chrome, so each group header additionally rounds its OWN
+  // top corners below.) Only the top corners are rounded — the bottom stays square so the last panel's
+  // elevation shadow isn't clipped by a rounded bottom edge. Scoped with `:has()` so only accordion lists
+  // get framed.
+  .dbx-list-content:has(.dbx-list-accordion-view) {
+    border-top-left-radius: var(--dbx-list-accordion-view-border-radius, var(--mat-sys-corner-medium, 12px));
+    border-top-right-radius: var(--dbx-list-accordion-view-border-radius, var(--mat-sys-corner-medium, 12px));
+  }
+
   .dbx-list-accordion-view {
+    // Breathing-room margin (`--dbx-list-accordion-view-margin`, default `--dbx-padding-1` / 2px) so the
+    // card sits inset from its container and its walls stay visible — flush against the container the card's
+    // edges read as cut off. `padding-bottom` leaves room below the last panel so its elevation shadow shows
+    // instead of being clipped at the scroll edge.
+    display: block;
+    margin: var(--dbx-list-accordion-view-margin, var(--dbx-padding-1));
+    padding-bottom: var(--dbx-list-accordion-view-bottom-space, var(--dbx-padding-2));
+    --dbx-list-accordion-view-radius-resolved: var(--dbx-list-accordion-view-border-radius, var(--mat-sys-corner-medium, 12px));
     --mat-expansion-container-shape: 0px;
+
+    // Round the top corners of the first entry (the very top of the card) AND of every group header. Group
+    // headers are sticky — when one pins at the rounded top corner, the scroll frame's clip would otherwise
+    // shave that header's square corner (and its border) flat, so each header rounds its OWN top corners to
+    // follow the curve. `overflow: hidden` clips the header's content/border to those corners.
+    mat-accordion > :first-child,
+    .dbx-list-view-group-header {
+      border-top-left-radius: var(--dbx-list-accordion-view-radius-resolved);
+      border-top-right-radius: var(--dbx-list-accordion-view-radius-resolved);
+      overflow: hidden;
+    }
+
+    // Box every group header with the same hairline the two-column view uses (`1px solid
+    // var(--dbx-divider-color)`) rather than the heavier/darker `--mat-divider-*`; the shorthand overrides
+    // the bottom divider on the base `.dbx-list-view-group-header` rule so all four sides match. The `-1px`
+    // margin pulls the header out so its border overlaps the adjacent panel edges (no doubled hairline / gap).
+    .dbx-list-view-group-header {
+      margin: -1px;
+      border: 1px solid var(--dbx-divider-color);
+    }
   }
 
   .dbx-list-view-group-header {

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

@@ -56,6 +56,16 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
   .dbx-list-view .mat-mdc-nav-list {
     --mat-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 15%, transparent);
 
+    // Active/selected route rows default to the shared dbx list tone so anchor lists match value lists
+    // out of the box, instead of a bare on-surface overlay. A standalone `.dbx-anchor-list` isn't
+    // necessarily inside a `.dbx-list`, so fall back to the M3 container tones directly when the
+    // `--dbx-list-item-*-color` knobs aren't inherited. Override the `--dbx-anchor-list-item-*` tokens to
+    // give a list its own active/selected treatment (the sidenav does, for its accent tint + border).
+    --dbx-anchor-list-item-selected-color: var(--dbx-list-item-selected-color, var(--mat-sys-primary-container));
+    --dbx-anchor-list-item-selected-on-color: var(--dbx-list-item-selected-on-color, var(--mat-sys-on-primary-container));
+    --dbx-anchor-list-item-active-color: var(--dbx-list-item-active-color, var(--dbx-anchor-list-item-selected-color));
+    --dbx-anchor-list-item-active-on-color: var(--dbx-list-item-active-on-color, var(--dbx-anchor-list-item-selected-on-color));
+
     // MARK: Muting
     // items that are not active are muted
     .mat-mdc-list-item {
@@ -77,11 +87,32 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
       }
     }
 
+    // MARK: Anchor Tree
+    // Nested child rows get a subtle depth-shading background. This is the BASE tone for a child row, so
+    // it is declared BEFORE the selected / active-route rules below: those match the same row at equal
+    // specificity (0,4,0), so source order decides — keeping this first lets an active or selected child
+    // row layer its own tone on top instead of being masked by the depth shading (which left an active
+    // child reading as un-selected: grey background, only the text recolored).
+    //
+    // The tone is an override point: set `--dbx-anchor-list-item-child-background` (e.g. to `transparent`)
+    // to flatten the depth-shade so nested children read like top-level root rows. Because the
+    // active/selected rules below win by source order, overriding the token never clears an active child's
+    // accent — only the inactive depth-shade. The `.dbx-sidenav-flat` modifier uses this.
+
+    /// Background tone applied to nested (depth > 0) anchor-list child rows to set them apart from
+    /// top-level root rows. Override to `transparent` to flatten the nesting depth-shade.
+    /// @role color
+    /// @intent nested child row background, anchor list depth shade, flatten nested rows
+    .dbx-anchor-list-child .mat-mdc-list-item {
+      background: var(--dbx-anchor-list-item-child-background, color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent));
+    }
+
     // selected
     .dbx-anchor-selected {
       .mat-mdc-list-item {
         opacity: #{$anchor-list-item-active-opacity};
-        background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
+        background: var(--dbx-anchor-list-item-selected-color);
+        color: var(--dbx-anchor-list-item-selected-on-color);
       }
     }
 
@@ -89,14 +120,10 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
     .dbx-anchor-active-eq {
       .mat-mdc-list-item {
         opacity: #{$anchor-list-item-active-opacity};
-        background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
+        background: var(--dbx-anchor-list-item-active-color);
+        color: var(--dbx-anchor-list-item-active-on-color);
       }
     }
-
-    // MARK: Anchor Tree
-    .dbx-anchor-list-child .mat-mdc-list-item {
-      background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
-    }
   }
 }
 

package/lib/router/layout/sidenav/_sidenav.scss

@@ -24,6 +24,17 @@ $active-background-transparent-color: 0.93;
       border-top-right-radius: var(--dbx-sidenav-top-corner-radius, var(--mat-sys-corner-extra-large, 24px));
       border-bottom-right-radius: var(--dbx-sidenav-bottom-corner-radius, var(--mat-sys-corner-extra-large, 24px));
 
+      // Uniform nav items (default). A sidenav is typically assembled from differently-created nav
+      // elements — top-level root anchors and nested child anchors in the `[anchors]` tree, plus separate
+      // `<dbx-anchor-list>` lists dropped into the `[top]` / `[bottom]` content slots. Left to the generic
+      // anchor-list styling these would NOT match up (a separate list rounds all four corners as floating
+      // pills, and nested child rows carry a depth-shade). The sidenav normalizes them so every element
+      // reads as one consistent nav: nested children drop the depth-shade here (the active/selected rules
+      // override this token by source order, so the active route still keeps its accent), the right-only
+      // flush-left corner shape is applied to all drawer anchor lists in `_list.scss`, and child content is
+      // aligned with root rows below. Apps can restore the depth-shade per list via the token if desired.
+      --dbx-anchor-list-item-child-background: transparent;
+
       .mat-drawer-inner-container {
         display: flex;
         flex-direction: column;
@@ -40,6 +51,12 @@ $active-background-transparent-color: 0.93;
           }
         }
 
+        // Align nested child content with root rows (cancel the small left nudge `_anchorlist.scss` adds
+        // to child rows) so a nested child reads like a top-level root item.
+        .dbx-anchor-list-child .mat-mdc-list-item .mdc-list-item__content {
+          padding-left: 0;
+        }
+
         // directly active links have a side border indicator
         .dbx-anchor-active-eq,
         .dbx-anchor-list-child .dbx-anchor-active {
@@ -165,6 +182,17 @@ $active-background-transparent-color: 0.93;
       .dbx-anchor-list.mat-mdc-nav-list {
         --dbx-sidenav-active-accent: color-mix(in srgb, var(--dbx-accent-color) 65%, var(--mat-sys-surface));
 
+        // The sidenav opts out of the default solid list tone (which anchor lists now inherit from
+        // `--dbx-list-item-active-color`) in favor of its subtle accent overlay + side-border treatment.
+        // Define the anchor-list active/selected override tokens here so the base `_anchorlist.scss` rows
+        // pick up the accent tint, and pin the on-color to the drawer text color so the active label is
+        // not recolored to the list's on-primary-container tone. The explicit root/child background +
+        // border rules below still apply on top (they distinguish root vs child and add the indicator).
+        --dbx-anchor-list-item-active-color: var(--dbx-sidenav-active-item-background, color-mix(in srgb, var(--dbx-sidenav-active-accent) 12%, transparent));
+        --dbx-anchor-list-item-active-on-color: var(--dbx-sidenav-text-color, var(--dbx-color-current, var(--mat-sys-on-surface)));
+        --dbx-anchor-list-item-selected-color: var(--dbx-anchor-list-item-active-color);
+        --dbx-anchor-list-item-selected-on-color: var(--dbx-anchor-list-item-active-on-color);
+
         .dbx-anchor-active {
           .mat-mdc-list-item {
             .mat-mdc-list-item-icon {

package/lib/style/_theming.scss

@@ -1,5 +1,3 @@
-@forward '@angular/material' show elevation;
-
 @forward './config';
 @forward './variables';
 @forward './mixin';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.20.0",
+  "version": "13.22.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.20.0",
-    "@dereekb/date": "13.20.0",
-    "@dereekb/dbx-core": "13.20.0",
-    "@dereekb/rxjs": "13.20.0",
-    "@dereekb/util": "13.20.0",
-    "@dereekb/vitest": "13.20.0",
+    "@dereekb/browser": "13.22.0",
+    "@dereekb/date": "13.22.0",
+    "@dereekb/dbx-core": "13.22.0",
+    "@dereekb/rxjs": "13.22.0",
+    "@dereekb/util": "13.22.0",
+    "@dereekb/vitest": "13.22.0",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
     "@ngrx/effects": "^21.1.0",