novo-elements 13.2.0 → 13.3.0

package/elements/data-table/data-table.component.scss

@@ -618,11 +618,89 @@ novo-data-table {
   }
 }
 
-// bh2026: stronger, subtler column headers
+// bh2026: banded rows, horizontal borders, modern spacing
 [data-theme='bh2026'] {
   .novo-data-table-header-cell,
   .novo-data-table-header-cell > label {
-    font-weight: 600;
-    color: var(--color-content-subtle, #8ca1b9);
+    font-weight: var(--typography-font-weight-600);
+    font-size: var(--font-size-caption);
+    color: var(--color-text-subtle);
+  }
+
+  .novo-data-table-row,
+  .novo-data-table-header-row {
+    border-bottom: var(--border-width-border-default) solid var(--color-border-subtle);
+  }
+
+  .novo-data-table-cell,
+  .novo-data-table-header-cell {
+    padding: var(--spacing-padding-sm) var(--spacing-padding-md);
+    color: var(--color-text-body);
+  }
+
+  // Restore zero vertical padding on action/control cells — the general rule above overrides
+  // the base .button-cell / .dropdown-cell padding: 0 5px, putting 8px above/below the button.
+  .novo-data-table-cell {
+    &.button-cell,
+    &.dropdown-cell,
+    &.expand-cell,
+    &.checkbox-cell {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .novo-data-table-cell.clickable {
+    color: var(--color-text-link);
+  }
+
+  cdk-table {
+    > .novo-data-table-row:nth-of-type(odd) {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        // To enable every-other "banded" styling change to --color-background-muted
+        background-color: var(--background-body);
+      }
+      + .novo-data-table-detail-row {
+        // To enable every-other "banded" styling change to --color-background-muted
+        background-color: var(--background-body);
+      }
+    }
+    > .novo-data-table-row:nth-of-type(even) {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--background-body);
+      }
+      + .novo-data-table-detail-row {
+        background-color: var(--background-body);
+      }
+    }
+    > .novo-data-table-row:hover {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--color-background-subtle);
+      }
+    }
+    > .novo-data-table-row.active {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--color-utility-blue-100);
+      }
+      + .novo-data-table-detail-row {
+        background-color: var(--color-utility-blue-100);
+      }
+    }
   }
 }

package/elements/data-table/pagination/data-table-pagination.component.scss

@@ -107,6 +107,7 @@ $breakpoint: 1000px;
         font-size: var(--font-size-text);
         border-radius: var(--border-radius-xsm, 2px);
         list-style-type: none;
+        margin-top: 3px;
         cursor: pointer;
         color: var(--color-company);
         &.disabled {
@@ -126,3 +127,75 @@ $breakpoint: 1000px;
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &.standard {
+    align-items: center;
+    border-top: 1px solid var(--pagination-color-border-default, var(--border));
+    padding: var(--spacing-padding-sm) var(--spacing-padding-sm) 0 var(--spacing-padding-md);
+
+    > * {
+      margin: 0;
+    }
+
+    h5.rows {
+      color: var(--pagination-color-content-label, var(--text-muted));
+      font-size: var(--typography-font-size-12);
+      font-weight: var(--typography-meta-sm-font-weight);
+      letter-spacing: var(--typography-meta-sm-letter-spacing);
+      line-height: var(--typography-meta-sm-line-height);
+      margin-right: var(--spacing-gap-sm);
+      opacity: 1;
+      padding: 0;
+      text-transform: uppercase;
+      white-space: nowrap;
+    }
+
+    novo-select {
+      color: var(--text-muted);
+      max-width: 60px;
+      min-width: 60px;
+      margin-right: var(--spacing-gap-sm);
+
+      ::ng-deep .novo-select-trigger {
+        height: var(--spacing-padding-xlg);
+        width: 5rem;
+
+        i.bhi-collapse::before {
+          content: "\f226"; // bhi-sort-desc - all code points are fixed in bullhorn-icons
+        }
+
+        span.text-ellipsis {
+          color: var(--button-color-select-color-content-value, var(--text-secondary));
+          font-size: var(--typography-button-default-font-size, var(--font-size-body));
+          font-weight: var(--typography-button-default-font-weight, var(--typography-body-default-font-weight));
+          letter-spacing: var(--typography-button-default-letter-spacing, var(--typography-body-default-letter-spacing));
+          line-height: var(--typography-button-default-line-height, var(--typography-line-height-20));
+        }
+      }
+    }
+
+    .novo-data-table-of-total-amount {
+      color: var(--pagination-color-content-label, var(--text-muted));
+      font-size: var(--typography-font-size-12);
+      font-weight: var(--typography-meta-sm-font-weight);
+    }
+
+    .pager {
+      gap: var(--data-table-spacing-gap, 0);
+
+      .page {
+        border-radius: var(--border-radius-xsm);
+        color: var(--pagination-color-content-label, var(--text-muted));
+        font-size: var(--typography-font-size-12);
+        font-weight: var(--typography-meta-sm-font-weight);
+
+        &.active {
+          background: var(--color-background-subtle, var(--background-muted));
+          border: 1px solid var(--pagination-color-border-default, var(--border));
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

package/elements/date-picker/DatePicker.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   .date-picker-container {
-    border-radius: var(--border-radius-default, 4px);
+    border-radius: var(--border-radius-sm, 4px);
     width: min-content;
     text-align: center;
     background: var(--background-main);
@@ -219,8 +219,3 @@
     display: block;
   }
 }
-
-// bh2026: rounder calendar
-:host-context([data-theme='bh2026']) .date-picker-container {
-  border-radius: var(--calendar-radius, 0.8rem);
-}

package/elements/date-time-picker/_DateTimePicker.scss

@@ -6,7 +6,7 @@ $time-select-height: 45px;
   display: block;
   width: min-content;
   overflow: hidden;
-  border-radius: var(--border-radius-default, 4px);
+  border-radius: var(--border-radius-sm, 4px);
   background-color: var(--background-bright);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 7px rgba(0, 0, 0, 0.1);
   z-index: z(max);

package/elements/dropdown/Dropdown.scss

@@ -16,13 +16,29 @@
       font-size: 0.8em !important;
       width: 1em !important;
       height: 1em !important;
-      margin: 0 0.5em;
+      margin: 0 var(--button-icon-margin, 0.5em);
     }
   }
 }
 
+// bh2026: swap out the collapse icon for the sort-desc icon and style to ensure proper placement
+:host-context([data-theme='bh2026']) {
+  ::ng-deep .novo-button-icon {
+    font-size: 1em !important;
+  }
+  ::ng-deep i.bhi-collapse {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+  ::ng-deep i.bhi-collapse::before {
+    content: "\f226"; // bhi-sort-desc - all code points are fixed in bullhorn-icons
+  }
+}
+
 .dropdown-container {
   background-color: var(--background-bright, $color-bright);
+  border-radius: var(--border-radius-sm);
   list-style: none;
   margin: 0;
   padding: 0;

package/elements/field/field.scss

@@ -109,15 +109,19 @@
   }
 }
 
-// bh2026: lighter label
+// bh2026: uppercase label + tighter value typography per Figma "Value - Finalized" spec
 :host-context([data-theme='bh2026']) {
   .novo-field-label {
-    font-weight: 600;
-    font-size: 1rem;
-    color: var(--color-content-subtle, #8ca1b9);
+      text-transform: var(--typography-input-label-sm-text-transform);
+    ::ng-deep novo-label {
+      font-weight: var(--typography-input-label-sm-font-weight);
+      font-size: var(--typography-input-label-sm-font-size);
+      letter-spacing: var(--typography-input-label-sm-letter-spacing);
+      color: var(--color-text-body);
+    }
   }
   .novo-field-input ::ng-deep .novo-input-element {
-    font-size: 1.4rem;
-    font-weight: 500;
+    font-size: var(--typography-input-value-default-font-size);
+    font-weight: var(--typography-input-value-default-font-weight);
   }
 }

package/elements/field/hint/hint.scss

@@ -16,3 +16,9 @@
     justify-content: flex-end;
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  font-size: var(--typography-input-value-sm-font-size);
+  font-weight: var(--typography-input-value-sm-font-weight);
+  color: var(--color-text-subtle);
+}

package/elements/form/ControlGroup.scss

@@ -50,6 +50,19 @@ novo-control-group {
     }
   }
 
+  // bh2026: description text and column-header labels match decoration weight/size of hint and field-message
+  [data-theme='bh2026'] & {
+    .novo-section-header label.novo-control-group-description {
+      font-size: var(--typography-input-value-sm-font-size);
+      font-weight: var(--typography-input-value-sm-font-weight);
+      color: var(--color-text-subtle);
+    }
+    .novo-control-group-labels .novo-control-group-control-label > span {
+      font-size: var(--typography-input-value-sm-font-size);
+      font-weight: var(--typography-input-value-sm-font-weight);
+    }
+  }
+
   .novo-control-group-controls {
     display: flex;
     flex-wrap: nowrap;

package/elements/form/Form.scss

@@ -819,3 +819,49 @@ control-prompt-modal {
     min-width: 110px;
   }
 }
+
+// bh2026: uppercase label + tighter value typography per Figma "Value - Finalized" spec
+// ViewEncapsulation.None: use plain selectors (not :host-context which is Shadow DOM only)
+:root[data-theme='bh2026'] {
+  label.novo-control-label {
+    &.novo-control-filled,
+    &.novo-control-focused,
+    &.novo-control-always-active {
+      font-weight: var(--typography-input-label-sm-font-weight) !important;
+      font-size: var(--typography-input-label-sm-font-size) !important;
+      letter-spacing: var(--typography-input-label-sm-letter-spacing);
+      text-transform: var(--typography-input-label-sm-text-transform);
+      color: var(--color-text-body) !important;
+    }
+  }
+  .novo-form-control-label {
+    font-weight: var(--typography-input-label-sm-font-weight) !important;
+    font-size: var(--typography-input-label-sm-font-size) !important;
+    letter-spacing: var(--typography-input-label-sm-letter-spacing);
+    text-transform: var(--typography-input-label-sm-text-transform);
+    color: var(--color-text-body) !important;
+  }
+  .novo-control-outer-container input:not([type='checkbox']):not([type='radio']) {
+    font-size: var(--typography-input-value-default-font-size) !important;
+    font-weight: var(--typography-input-value-default-font-weight) !important;
+  }
+  .field-message,
+  novo-tip-well.active {
+    font-size: var(--typography-input-value-sm-font-size);
+    font-weight: var(--typography-input-value-sm-font-weight);
+    color: var(--color-text-subtle);
+
+    // $grey is a compile-time SCSS variable — explicit selectors required to override
+    .character-count,
+    .record-count {
+      font-size: var(--typography-input-value-sm-font-size);
+      color: var(--color-text-subtle);
+    }
+  }
+  .error-message {
+    .character-count {
+      font-size: var(--typography-input-value-sm-font-size);
+      color: var(--color-text-subtle);
+    }
+  }
+}

package/elements/header/Header.scss

@@ -152,9 +152,51 @@
   }
 }
 
-// bh2026: soften the entity-accent underline
+// bh2026: frosted translucent header + entity squircle icon
 :host-context([data-theme='bh2026']) {
-  &[class*='novo-accent-'] > section:first-of-type {
-    border-bottom: 1px solid var(--color-border-default, #f0f5f9);
+  & > section {
+    gap: var(--spacing-gap-lg);
+  }
+
+  .header-actions {
+    gap: var(--spacing-gap-sm);
+  }
+
+  ::ng-deep utils,
+  ::ng-deep novo-utils {
+    gap: var(--spacing-gap-sm);
+  }
+
+  &[class*='novo-accent-'] {
+    background: var(--header-background, var(--color-transparency-white-90));
+    backdrop-filter: blur(12px);
+    box-shadow: 0 1px 2px var(--color-transparency-black-10);
+    padding-top: var(--spacing-md);
+    padding-left: var(--spacing-lg);
+    padding-right: var(--spacing-lg);
+
+    & > section:first-of-type {
+      border-bottom: none;
+    }
+
+    utils {
+      color: var(--color-text-subtle);
+    }
+  }
+
+  @each $entity, $color in $entity-colors {
+    &.novo-accent-#{$entity} {
+      ::ng-deep .header-icon i {
+        color: var(--color-white);
+        background: $color;
+        border-radius: var(--border-radius-sm);
+        width: var(--typography-font-size-40);
+        height: var(--typography-font-size-40);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
   }
+  background-color: transparent;
 }

package/elements/layout/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, NgZone, DestroyRef, InjectionToken, AfterContentChecked, OnDestroy, EventEmitter, DoCheck, QueryList } from '@angular/core';
+import { ElementRef, AfterContentInit, ChangeDetectorRef, NgZone, DestroyRef, InjectionToken, AfterContentChecked, OnDestroy, EventEmitter, DoCheck, QueryList } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/overlay';
@@ -20,9 +20,16 @@ declare class NovoCollapsibleNavComponent {
     expandedWidth: i0.InputSignal<string>;
     /** Width of the panel when collapsed to the icon rail. */
     collapsedWidth: i0.InputSignal<string>;
+    /** Time in ms to delay between the user entering the nav region, and expanding it */
+    expandDelay: i0.InputSignal<number>;
     /** When true, hovering a collapsed panel temporarily expands it as an overlay without affecting layout. */
     overlayOnHover: i0.InputSignal<boolean>;
+    hoveredChange: i0.OutputEmitterRef<boolean>;
+    readonly element: ElementRef<any>;
+    private readonly destroyRef;
     private readonly isHovered;
+    private readonly isHoveredDebounced$;
+    private readonly isEffectiveHovered;
     private readonly effectiveCollapsed;
     constructor();
     onMouseEnter(): void;
@@ -34,12 +41,13 @@ declare class NovoCollapsibleNavComponent {
             collapsedWidth: string;
         };
     };
+    private debounceHover;
     get isCollapsed(): boolean;
     toggle(): void;
     expand(): void;
     collapse(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoCollapsibleNavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoCollapsibleNavComponent, "novo-collapsible-nav", ["novoCollapsibleNav"], { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "overlayOnHover": { "alias": "overlayOnHover"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[novo-collapsible-nav-header]", "[novo-collapsible-nav-body]", "[novo-collapsible-nav-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoCollapsibleNavComponent, "novo-collapsible-nav", ["novoCollapsibleNav"], { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "expandDelay": { "alias": "expandDelay"; "required": false; "isSignal": true; }; "overlayOnHover": { "alias": "overlayOnHover"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "hoveredChange": "hoveredChange"; }, never, ["[novo-collapsible-nav-header]", "[novo-collapsible-nav-body]", "[novo-collapsible-nav-footer]"], false, never>;
 }
 
 declare class NovoLayoutContent extends CdkScrollable implements AfterContentInit {

package/elements/list/list-item-content.scss

@@ -1,10 +1,10 @@
 @import "../../styles/variables.scss";
 
 @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
-  :host-context([theme="#{$name}"]) {
-    &.novo-item-content > ::ng-deep * {
-      color: rgba(#fff, 0.65);
-    }
+  // Wonky deprecation: For 2026, stringently avoid using * selectors to apply font/color changes - prefer inherit functionality
+  // This setup made it very hard to provide overrides.
+  :host-context([theme="#{$name}"]).novo-item-content {
+    color: rgba(#fff, 0.65);
   }
 }
 
@@ -15,13 +15,14 @@
 :host {
   display: flex;
   margin-left: 0.2em;
-  &.novo-item-content > ::ng-deep * {
+  
+  &.novo-item-content {
     color: rgba(#434343, 0.85);
-  }
-  &.novo-item-content ::ng-deep i {
-    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
-      &.#{$name} {
-        color: getCssVarname($name);
+    ::ng-deep i {
+      @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+        &.#{$name} {
+          color: getCssVarname($name);
+        }
       }
     }
   }

package/elements/menu/menu-content.component.scss

@@ -16,6 +16,7 @@
       cursor: default;
       list-style: none;
       background-color: var(--background-bright);
+      border-radius: var(--border-radius-sm);
       padding-inline-start: 0px !important;
       box-shadow: $shadow-multi;
       :hover {

package/elements/modal/modal.component.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   background-color: var(--background-bright);
-  border-radius: var(--border-radius-default, 4px);
+  border-radius: var(--border-radius-md, 4px);
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.2);
   z-index: z(modal);
   position: relative;
@@ -17,8 +17,8 @@
   }
 
   > ::ng-deep header {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+    border-top-left-radius: var(--border-radius-md, 4px);
+    border-top-right-radius: var(--border-radius-md, 4px);
     overflow: hidden;
 
     h1,
@@ -44,13 +44,3 @@
     }
   }
 }
-
-// bh2026: rounded modal and header top corners.
-:host-context([data-theme='bh2026']) {
-  border-radius: var(--border-radius-md, 1.6rem);
-
-  > ::ng-deep header {
-    border-top-left-radius: var(--border-radius-md, 1.6rem);
-    border-top-right-radius: var(--border-radius-md, 1.6rem);
-  }
-}

package/elements/modal/notification.component.scss

@@ -4,7 +4,7 @@
   text-align: center;
   display: block;
   background-color: var(--background-bright);
-  border-radius: var(--border-radius-default, 4px);
+  border-radius: var(--border-radius-md, 4px);
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.2);
   z-index: z(modal);
   position: relative;
@@ -106,8 +106,3 @@
     }
   }
 }
-
-// bh2026: rounded notifications
-:host-context([data-theme='bh2026']) {
-  border-radius: var(--border-radius-md, 1.6rem);
-}

package/elements/picker/extras/picker-results/PickerResults.scss

@@ -44,6 +44,10 @@ entity-picker-results {
     color: black;
   }
 
+  > p {
+    margin: 0;
+  }
+
   picker-error,
   picker-loader,
   picker-null-recent-results,
@@ -167,6 +171,7 @@ entity-picker-results {
   background: $white;
   width: 100%;
   min-width: 250px;
+  display: block;
   novo-list {
     background: $white;
     min-width: 30rem;
@@ -300,3 +305,49 @@ distribution-list-picker-results {
   }
 }
 
+// bh2026: border belongs on the host (border is not clipped by overflow:hidden),
+// not on children (where overflow:hidden + border-radius clips the corners)
+:root[data-theme='bh2026'] {
+  picker-results,
+  entity-picker-results {
+    border: 1px solid var(--color-border-default);
+    margin-block: var(--spacing-gap-sm);
+    background: var(--background-bright);
+
+    .novo-list,
+    novo-list,
+    ul {
+      border: none;
+      box-shadow: none;
+    }
+
+    picker-error,
+    picker-loader,
+    picker-null-recent-results,
+    picker-null-results,
+    .picker-error,
+    .picker-loader,
+    .picker-null-recent-results,
+    .picker-null-results {
+      border: none;
+      box-shadow: none;
+    }
+
+    > p {
+      margin: 0;
+      padding: var(--spacing-padding-md) var(--spacing-padding-lg);
+    }
+  }
+
+  workers-comp-codes-picker-results,
+  distribution-list-picker-results {
+    color: var(--text-secondary);
+    background: var(--background-body);
+    border-radius: var(--border-radius-sm);
+
+    .novo-list-item {
+      border-radius: var(--border-radius-sm);
+    }
+  }
+}
+

package/elements/progress/Progress.scss

@@ -36,3 +36,11 @@
     width: 100%;
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &.linear {
+    border-radius: var(--border-radius-pill);
+    background-color: var(--color-background-subtle-hover);
+    border-color: var(--color-border-default);
+  }
+}

package/elements/progress/ProgressBar.scss

@@ -106,8 +106,11 @@
   100% { transform: translateX(0%) }
 }
 
-// bh2026: pill progress bar ends (fill color rides on the deferred accent).
+// bh2026: pill ends; default fill uses primary blue only when no explicit color is set
 :host-context([data-theme='bh2026']) {
+  &.linear:not([color]) {
+    background-color: var(--button-primary-background);
+  }
   &.linear:first-child {
     border-radius: 999px 0 0 999px;
   }