@dereekb/dbx-web 13.19.0 → 13.21.0

package/lib/style/_root-variables.scss

@@ -161,6 +161,19 @@
     #{theming.$dbx-outline-variant-color-var}: var(--mat-sys-outline-variant);
     #{theming.$dbx-error-color-var}: var(--mat-sys-error);
 
+    // Shared border system — base divider color + opacity knob, blended into a single
+    // semi-transparent border color. Components apply var(--dbx-border-color-current);
+    // override --dbx-border-color or --dbx-border-opacity (globally here, or locally on a
+    // scope) and the computed value recomputes automatically at the point of use.
+    #{theming.$dbx-border-color-var}: var(--mat-sys-outline-variant);
+    #{theming.$dbx-border-opacity-var}: 60%;
+    #{theming.$dbx-border-color-current-var}: color-mix(in srgb, var(--dbx-border-color) var(--dbx-border-opacity), transparent);
+
+    // Shared divider color — defaults to the computed semi-transparent border so dbx-table-view,
+    // dbx-two-column, dbx-calendar (and any other) dividers stay consistent. Override here for an
+    // app-wide divider retint, or override a component's own divider token for a one-off.
+    #{theming.$dbx-divider-color-var}: var(--dbx-border-color-current);
+
     // Curated color set (avatar initials, etc.) — selects light/dark values from the theme's theme-type.
     @include curated.curated-color-variables($theme-config);
   }

package/lib/style/_style-demo.scss

@@ -115,6 +115,16 @@
   @return ('--dbx-anchor-list-item-border-radius': $value);
 }
 
+/// Builds the dbx-sidenav-only trailing-edge shape override map for a single corner-radius value.
+///
+/// Backs the `sidenav-corner-*` levers: re-points the nested `mat-sidenav` drawer's top/bottom trailing-edge
+/// radius tokens (`--dbx-sidenav-top-corner-radius` / `--dbx-sidenav-bottom-corner-radius`, extra-large by
+/// default) together so the rounded drawer edge flips live. Independent of every other shape lever — the
+/// sidenav reads its own tokens. Private to this module (`-` prefix).
+@function -dbx-style-demo-sidenav-shape-map($value) {
+  @return ('--dbx-sidenav-top-corner-radius': $value, '--dbx-sidenav-bottom-corner-radius': $value);
+}
+
 /// Map of demo template key -> CSS custom-property overrides emitted for that template's debug class.
 $dbx-style-demo-templates: (
   // M3 corner-radius scale levers. Each re-points the component shape tokens that `dbx-components-shapes()`
@@ -157,6 +167,12 @@ $dbx-style-demo-templates: (
   'anchor-list-corner-medium': -dbx-style-demo-anchor-list-shape-map(var(--mat-sys-corner-medium)),
   'anchor-list-corner-large': -dbx-style-demo-anchor-list-shape-map(var(--mat-sys-corner-large)),
   'anchor-list-corner-extra-large': -dbx-style-demo-anchor-list-shape-map(var(--mat-sys-corner-extra-large)),
+  // dbx-sidenav-only trailing-edge corner levers (own 'Sidenav Shape' toggle group), independent of every other
+  // shape lever (the sidenav drawer reads its own --dbx-sidenav-top/bottom-corner-radius tokens). Only the three
+  // requested stops are exposed: none (square), medium, and extra (extra-large, the drawer's default).
+  'sidenav-corner-none': -dbx-style-demo-sidenav-shape-map(0),
+  'sidenav-corner-medium': -dbx-style-demo-sidenav-shape-map(var(--mat-sys-corner-medium)),
+  'sidenav-corner-extra': -dbx-style-demo-sidenav-shape-map(var(--mat-sys-corner-extra-large)),
   // Tints surfaces toward the primary color by mixing the theme's own system tokens — stays theme-correct.
   'surface-tint': (
       '--mat-sys-surface': color-mix(in srgb, var(--mat-sys-primary) 8%, var(--mat-sys-surface)),

package/lib/style/_variables.scss

@@ -157,6 +157,37 @@ $dbx-outline-variant-color-var: --dbx-outline-variant-color;
 /// @see --mat-sys-error
 $dbx-error-color-var: --dbx-error-color;
 
+// Shared border system — a base color + an opacity knob blended into a single
+// semi-transparent border color. Components apply --dbx-border-color-current and
+// can tune either input token locally without touching the others.
+/// Base border color for the shared semi-transparent border system. Defaults to `--mat-sys-outline-variant` (the M3 divider color). Blended with `--dbx-border-opacity` to produce `--dbx-border-color-current`.
+/// @intent border base color, divider base color, outline base color
+/// @role color
+/// @see --mat-sys-outline-variant
+/// @see --dbx-border-opacity
+/// @see --dbx-border-color-current
+$dbx-border-color-var: --dbx-border-color;
+/// Opacity applied to `--dbx-border-color` when computing the effective border color. A percentage (e.g. `70%`). Lower it for a fainter border, raise it toward `100%` for a solid divider.
+/// @intent border opacity, divider transparency, border alpha, semi-transparent border opacity
+/// @role misc
+/// @see --dbx-border-color
+/// @see --dbx-border-color-current
+$dbx-border-opacity-var: --dbx-border-opacity;
+/// Effective, semi-transparent border color — a `color-mix` of `--dbx-border-color` at `--dbx-border-opacity`. Apply this directly to `border` / `border-top` / `border-bottom`. Overriding either input token (globally or on a local scope) recomputes this automatically.
+/// @intent border color, divider color, semi-transparent border color, computed border color
+/// @role color
+/// @anti-use Don't hardcode `border: 1px solid rgba(0,0,0,0.1)`; use this token so the color and opacity stay themeable.
+/// @see --dbx-border-color
+/// @see --dbx-border-opacity
+$dbx-border-color-current-var: --dbx-border-color-current;
+
+/// Shared divider color for component dividers/separators (dbx-table-view summary rule, dbx-two-column boundary, dbx-calendar cell borders, etc.). Defaults to `--dbx-border-color-current` so every divider inherits the themeable semi-transparent border by default; override this single token (globally or on a local scope) to retint all dividers at once, or override a component's own divider token to retint just that one.
+/// @intent divider color, separator color, shared divider, component divider color
+/// @role color
+/// @anti-use Don't hardcode a per-component divider color; default it to this token so dividers stay consistent and themeable.
+/// @see --dbx-border-color-current
+$dbx-divider-color-var: --dbx-divider-color;
+
 /// Per-app additional offset subtracted from the app-height base. Set to a non-zero value to shrink `--dbx-app-height` by a fixed amount (e.g. for a sticky footer). Defaults to `0px`.
 /// @intent app height offset, app height adjustment, shrink app height
 /// @role size
@@ -323,6 +354,11 @@ $dbx-outline-color: var($dbx-outline-color-var);
 $dbx-outline-variant-color: var($dbx-outline-variant-color-var);
 $dbx-error-color: var($dbx-error-color-var);
 
+$dbx-border-color: var($dbx-border-color-var);
+$dbx-border-opacity: var($dbx-border-opacity-var);
+$dbx-border-color-current: var($dbx-border-color-current-var);
+$dbx-divider-color: var($dbx-divider-color-var);
+
 /// Border radius for the `[dbxContentPit]`, applied by default to every pit. Defaults to `var(--mat-sys-corner-medium)`.
 /// @intent pit radius, rounded pit corner, content pit radius
 /// @role radius

package/package.json

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

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

@@ -818,7 +818,9 @@ declare class DbxStyleDemoTypeRolesSectionComponent {
  * `'Shape'` toggle group, so only one is active at a time; `pill-controls` (`'Controls'`), `button-corner-*`
  * (`'Button Shape'`), `list-corner-*` (`'List Shape'`) and `anchor-list-corner-*` (`'Anchor List Shape'`) each live in
  * their own group so they compose on top of a corner lever instead of radio-excluding it — their debug classes are
- * emitted after `corner-shape-*` / `pill-controls` so they win the shape tokens they share.
+ * emitted after `corner-shape-*` / `pill-controls` so they win the shape tokens they share. The `sidenav-corner-*`
+ * levers (`'Sidenav Shape'`) re-round the nested `mat-sidenav` drawer's own trailing-edge tokens and are independent
+ * of every other shape lever.
  */
 declare const DBX_WEB_STYLE_DEMO_TEMPLATES: DbxStyleDemoStyleTemplate[];
 /**
@@ -827,7 +829,8 @@ declare const DBX_WEB_STYLE_DEMO_TEMPLATES: DbxStyleDemoStyleTemplate[];
  * The `corner-shape-*` levers share the `'Shape'` group (mutually exclusive); the component-scoped `button-corner-*`
  * (`'Button Shape'`), `list-corner-*` (`'List Shape'`) and `anchor-list-corner-*` (`'Anchor List Shape'`) levers are
  * mutually exclusive within their own groups but compose with `'Shape'` and `'Controls'`, letting a global corner
- * preset be overridden for just buttons, just `dbx-list` rows, or just `dbx-anchor-list` (nav) rows. `pill-controls`
+ * preset be overridden for just buttons, just `dbx-list` rows, or just `dbx-anchor-list` (nav) rows. The
+ * `sidenav-corner-*` levers (`'Sidenav Shape'`) re-round the `dbx-sidenav` drawer edge independently. `pill-controls`
  * (`'Controls'`), `surface-tint` and `vivid-primary` are independent toggles in their own groups.
  */
 declare const DBX_WEB_STYLE_DEMO_TEMPLATE_TOGGLES: DbxStyleDemoTemplateToggle[];

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

@@ -2448,9 +2448,14 @@ type DbxContentPitScrollableHeightSetting = 'small' | 'medium' | 'large';
  * Wraps content in a recessed "pit" container with optional scrollable overflow and rounded corners.
  * Useful for displaying bounded content areas such as lists or previews with a constrained height.
  *
- * Pits round their corners by default. Pass `[rounded]="false"` to square the pit — this applies the
+ * Pits round their corners by default. Pass `[square]="true"` to square the pit — this applies the
  * common `.dbx-corners-none` opt-out utility rather than a pit-specific class.
  *
+ * When `[scrollable]` is set the pit frame (padding, background, corners) stays fixed and an inner
+ * `.dbx-content-pit-scrollable-content` wrapper does the scrolling — wrap the body in that element so
+ * the frame doesn't shift at the scroll extremes. The resolved max height is published as the
+ * `--dbx-content-pit-scrollable-max-height` custom property, which the inner wrapper reads.
+ *
  * @dbxWebComponent
  * @dbxWebSlug content-pit
  * @dbxWebCategory layout
@@ -2467,10 +2472,11 @@ type DbxContentPitScrollableHeightSetting = 'small' | 'medium' | 'large';
  */
 declare class DbxContentPitDirective {
     readonly scrollable: _angular_core.InputSignal<Maybe<DbxContentPitScrollableInput>>;
-    readonly rounded: _angular_core.InputSignal<boolean>;
+    readonly square: _angular_core.InputSignal<boolean>;
     readonly scrollableHeightSignal: _angular_core.Signal<string | null>;
+    readonly scrollableMaxHeightSignal: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DbxContentPitDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "square": { "alias": "square"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**