novo-elements 13.2.0-next.1 → 13.2.0-next.3

package/elements/breadcrumbs/Breadcrumb.scss

@@ -11,5 +11,5 @@
 
 // bh2026: subtle breadcrumb text.
 :host-context([data-theme='bh2026']) {
-  color: var(--color-content-subtle, #8ca1b9);
+  color: var(--color-text-subtle);
 }

package/elements/button/styles/button-dialogue.scss

@@ -28,3 +28,15 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="dialogue"] {
+    box-shadow: none;
+    &:hover,
+    &:focus,
+    &:active {
+      background: var(--button-dialogue-hover-background);
+      box-shadow: none;
+    }
+  }
+}

package/elements/button/styles/button-icon.scss

@@ -39,3 +39,23 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="icon"] {
+    height: var(--button-height);
+    width: var(--button-height);
+    border-radius: var(--border-radius-sm);
+    color: var(--color-text-subtle);
+    box-shadow: none;
+
+    &:focus,
+    &:hover {
+      background: var(--color-background-subtle);
+      box-shadow: none;
+    }
+    &:active {
+      background: var(--color-background-subtle-hover);
+      box-shadow: none;
+    }
+  }
+}

package/elements/button/styles/button-primary.scss

@@ -11,7 +11,6 @@
 
     &:hover,
     &:focus {
-
       filter: brightness(1.15);
       box-shadow: var(--shadow-2), var(--shadow-1);
     }
@@ -41,3 +40,19 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="primary"] {
+    &:hover,
+    &:focus {
+      filter: none;
+      background: var(--button-primary-background-hover);
+      box-shadow: var(--button-shadow-hover);
+    }
+    &:active {
+      filter: none;
+      background: var(--button-primary-background-hover);
+      box-shadow: var(--button-shadow-active);
+    }
+  }
+}

package/elements/button/styles/button-secondary.scss

@@ -49,3 +49,17 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="secondary"] {
+    &:hover,
+    &:focus {
+      border: var(--button-secondary-border-hover);
+      box-shadow: var(--button-shadow-hover);
+    }
+    &:active {
+      border: var(--button-secondary-border-hover);
+      box-shadow: var(--button-shadow-active);
+    }
+  }
+}

package/elements/button/styles/button-standard.scss

@@ -15,3 +15,17 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="standard"] {
+    background: var(--button-background);
+    &:hover {
+      background: var(--button-hover-background);
+      box-shadow: var(--button-shadow-hover);
+    }
+    &:active {
+      background: var(--button-hover-background);
+      box-shadow: var(--button-shadow-active);
+    }
+  }
+}

package/elements/button/styles/button.scss

@@ -115,3 +115,14 @@
     transform: rotate(360deg);
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  box-shadow: var(--button-shadow);
+
+  &:hover {
+    box-shadow: var(--button-shadow-hover);
+  }
+  &:active {
+    box-shadow: var(--button-shadow-active);
+  }
+}

package/elements/card/Card.scss

@@ -8,6 +8,9 @@
   border-radius: var(--border-radius-round);
   position: relative;
   overflow-x: hidden;
+  :root[data-theme=bh2026] & {
+    --spacing-md: var(--spacing-padding-md);
+  }
 
   &.loading {
     min-height: 200px;
@@ -57,11 +60,11 @@
         text-overflow: ellipsis;
         i {
           font-size: 1.2em;
-          &.bhi-info {
-            color: $light;
-          }
         }
       }
+      :root:not([data-theme='bh2026']) & i.bhi-info {
+        color: $light;
+      }
     }
     .actions {
       color: brightenLive('--color-dark', 15);
@@ -119,43 +122,93 @@
 
 // bh2026: rounder card, grippy on hover
 :host-context([data-theme='bh2026']) {
-  border-radius: var(--border-radius-md, 1.6rem);
-  border: 1px solid var(--color-border-default, #f0f5f9);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--color-border-default);
+  box-shadow: 0 1px 2px var(--color-transparency-black-10);
 
   div.card-loading-container {
-    border-radius: var(--border-radius-md, 1.6rem);
+    border-radius: var(--border-radius-md);
   }
 
   header {
-    padding: var(--spacing-16, 1.6rem) var(--spacing-24, 2.4rem) var(--spacing-16, 1.6rem) 0;
-    border-bottom: 1px solid var(--color-border-default, #f0f5f9);
+    padding: var(--spacing-padding-md) var(--spacing-padding-lg) var(--spacing-padding-md) 0;
+    border-bottom: 1px solid var(--color-border-default);
 
     .title {
+      padding-inline: var(--spacing-gutter);
       h1,
       h2,
       h3 {
-        font-size: var(--typography-card-header-font-size, 1.8rem);
-        font-weight: var(--typography-card-header-font-weight, 500);
+        font-size: var(--typography-card-header-font-size, var(--typography-font-size-18));
+        font-weight: var(--typography-card-header-font-weight, var(--typography-font-weight-500));
+        ::ng-deep .card-flag-icon {
+          font-size: var(--font-size-lg);
+          vertical-align: 10%;
+        }
       }
 
-      ::ng-deep i.bhi-move {
-        color: transparent;
+      ::ng-deep i {
+        margin: 0;
       }
     }
 
-    &:hover .title ::ng-deep i.bhi-move {
-      color: var(--color-content-subtle, #5d7798);
+    .card-move-handle {
+      position: absolute;
+      left: var(--spacing-padding-xxsm);
+      color: var(--color-content-icon, #89909A);
     }
 
     .actions {
       display: flex;
       align-items: center;
-      gap: var(--spacing-8, 0.8rem);
+      gap: var(--spacing-gap-sm);
     }
 
     novo-button {
+      color: var(--color-text-subtle);
+    }
+    ::ng-deep .novo-card-header-text {
+      padding-inline-start: var(--spacing-padding-sm);
+    }
+  }
+  :host {
+    ::ng-deep .card-flag-icon {
       color: var(--color-content-subtle, #5d7798);
     }
+    &.icon-color-auto header .title ::ng-deep .card-flag-icon {
+      color: var(--page-entity-color, var(--color-content-subtle, #5d7798));
+      @each $entity, $color in $entity-colors {
+        &.bhi-#{$entity} {
+          @if ($entity == 'person') {
+            color: var(--color-entity-contact);
+          } @else if ($entity == 'notes') {
+            color: var(--color-entity-note);
+          } @else {
+            color: var(--color-entity-#{$entity});
+          }
+        }
+      }
+    }
+    &.icon-color-parent ::ng-deep .card-flag-icon {
+      color: var(--page-entity-color);
+    }
+    .novo-card-header {
+      padding-inline-start: var(--spacing-gutter);
+    }
+    // ng-deep in case this is declared within title bar implementation.
+    ::ng-deep .card-move-handle {
+      position: absolute;
+      left: var(--spacing-padding-xxsm);
+      color: var(--color-content-icon, #89909A);
+      transition: color 0.3s ease-in-out;
+    }
+    header ::ng-deep, ::ng-deep .novo-card-header {
+      &:not(:hover) .card-move-handle {
+        color: transparent;
+      }
+      .novo-icon.card-move-handle i {
+        color: inherit;
+      }
+    }
   }
 }

package/elements/card/CardContent.scss

@@ -4,5 +4,8 @@
   display: block;
   &:not(.condensed) {
     padding: var(--spacing-md);
+    :root[data-theme=bh2026] & {
+      padding-inline: var(--spacing-gutter);
+    }
   }
 }

package/elements/card/CardHeader.scss

@@ -7,8 +7,31 @@
   flex-direction: row;
   align-items: center;
   gap: var(--spacing-md);
+  :root[data-theme=bh2026] & {
+    padding: var(--spacing-padding-md) var(--spacing-padding-md) 0 var(--spacing-gutter);
+    gap: 0;
+    .card-move-handle {
+      transition: color 0.3s ease-in-out;
+    }
+    &:not(:hover) {
+      .card-move-handle {
+        color: transparent;
+      }
+    }
+    .novo-card-header-text {
+      font-size: var(--typography-card-header-font-size, 1.8rem);
+      font-weight: var(--typography-card-header-font-weight, 500);
+      ::ng-deep novo-title {
+        font: inherit;
+      }
+    }
+  }
+  
 
   .novo-card-header-text {
     flex: 1 1 0px;
+    :root[data-theme=bh2026] & {
+      padding-inline-start: var(--spacing-padding-sm);
+    }
   }
 }

package/elements/card/index.d.ts

@@ -6,6 +6,7 @@ import * as i3 from 'novo-elements/elements/icon';
 import * as i4 from 'novo-elements/elements/button';
 import * as i5 from 'novo-elements/elements/loading';
 import * as i6 from 'novo-elements/elements/tooltip';
+import * as i7 from 'novo-elements/elements/common';
 
 declare class CardActionsElement {
     static ɵfac: i0.ɵɵFactoryDeclaration<CardActionsElement, never>;
@@ -37,6 +38,7 @@ declare class CardElement implements OnChanges, OnInit {
     message: string;
     messageIcon: string;
     icon: string;
+    iconColorClass: 'icon-color-auto' | 'icon-color-parent' | undefined;
     iconTooltip: string;
     refresh: boolean;
     close: boolean;
@@ -44,7 +46,7 @@ declare class CardElement implements OnChanges, OnInit {
     loading: boolean;
     inline: boolean;
     inset: string;
-    get hbInset(): string;
+    get cardClass(): string;
     onClose: EventEmitter<void>;
     onRefresh: EventEmitter<void>;
     cardAutomationId: string;
@@ -57,12 +59,12 @@ declare class CardElement implements OnChanges, OnInit {
     toggleClose(): void;
     toggleRefresh(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardElement, "novo-card", never, { "padding": { "alias": "padding"; "required": false; }; "config": { "alias": "config"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconTooltip": { "alias": "iconTooltip"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "close": { "alias": "close"; "required": false; }; "move": { "alias": "move"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; }, { "onClose": "onClose"; "onRefresh": "onRefresh"; }, never, ["novo-card-actions", "*", "footer,novo-card-footer,[novo-card-footer],[novoCardFooter]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardElement, "novo-card", never, { "padding": { "alias": "padding"; "required": false; }; "config": { "alias": "config"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColorClass": { "alias": "iconColorClass"; "required": false; }; "iconTooltip": { "alias": "iconTooltip"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "close": { "alias": "close"; "required": false; }; "move": { "alias": "move"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; }, { "onClose": "onClose"; "onRefresh": "onRefresh"; }, never, ["novo-card-actions", "*", "footer,novo-card-footer,[novo-card-footer],[novoCardFooter]"], false, never>;
 }
 
 declare class NovoCardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoCardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCardModule, [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoButtonModule, typeof i5.NovoLoadingModule, typeof i6.NovoTooltipModule], [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCardModule, [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoButtonModule, typeof i5.NovoLoadingModule, typeof i6.NovoTooltipModule, typeof i7.NovoCommonModule], [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoCardModule>;
 }
 

package/elements/common/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, ElementRef, OnInit, EventEmitter, OnDestroy, ChangeDetectorRef, Renderer2, DoCheck, ViewContainerRef, InjectionToken, AfterViewChecked, QueryList, NgZone } from '@angular/core';
+import { TemplateRef, ElementRef, OnInit, OnDestroy, ChangeDetectorRef, Renderer2, DoCheck, ViewContainerRef, PipeTransform, InjectionToken, AfterViewChecked, EventEmitter, QueryList, NgZone } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
 import * as i3 from '@angular/common';
 import { NgSwitch } from '@angular/common';
@@ -247,11 +247,14 @@ interface ThemeChangeEvent {
 declare class NovoTheme {
     private _defaultTheme;
     private _currentTheme;
-    onThemeChange: EventEmitter<ThemeChangeEvent>;
+    currentTheme: i0.Signal<NovoThemeOptions>;
+    onThemeChange: Observable<ThemeChangeEvent>;
+    document: Document;
     /** Name of the theme being used. defaults to `bh2022-light`. */
     get themeName(): string;
     set themeName(value: string);
     use(options: NovoThemeOptions): Observable<any>;
+    isBh2026: i0.Signal<boolean>;
     /**
      * Changes the current theme
      */
@@ -325,6 +328,13 @@ declare class VisibleDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<VisibleDirective, "[visible]", never, { "visible": { "alias": "visible"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+declare class If2026ThemePipe implements PipeTransform {
+    theme: NovoTheme;
+    transform(value: any, elseVal?: any): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<If2026ThemePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<If2026ThemePipe, "ifBh2026Theme", false>;
+}
+
 /** @docs-private */
 type Constructor<T> = new (...args: any[]) => T;
 /**
@@ -568,7 +578,7 @@ declare class NovoOptionModule {
 
 declare class NovoCommonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoCommonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCommonModule, [typeof NovoTemplate, typeof NovoText, typeof NovoTitle, typeof NovoCaption, typeof NovoLabel, typeof NovoLink, typeof MarginDirective, typeof PaddingDirective, typeof BackgroundColorDirective, typeof TextColorDirective, typeof BorderDirective, typeof GapDirective, typeof AccentColorDirective, typeof FillColorDirective, typeof FlexDirective, typeof ThemeColorDirective, typeof SwitchCasesDirective, typeof VisibleDirective], [typeof i3.CommonModule, typeof NovoOptionModule], [typeof NovoTemplate, typeof NovoText, typeof NovoTitle, typeof NovoCaption, typeof NovoLabel, typeof NovoLink, typeof MarginDirective, typeof PaddingDirective, typeof BackgroundColorDirective, typeof TextColorDirective, typeof BorderDirective, typeof GapDirective, typeof AccentColorDirective, typeof FillColorDirective, typeof FlexDirective, typeof ThemeColorDirective, typeof SwitchCasesDirective, typeof VisibleDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCommonModule, [typeof NovoTemplate, typeof NovoText, typeof NovoTitle, typeof NovoCaption, typeof NovoLabel, typeof NovoLink, typeof MarginDirective, typeof PaddingDirective, typeof BackgroundColorDirective, typeof TextColorDirective, typeof BorderDirective, typeof GapDirective, typeof AccentColorDirective, typeof FillColorDirective, typeof FlexDirective, typeof ThemeColorDirective, typeof SwitchCasesDirective, typeof VisibleDirective, typeof If2026ThemePipe], [typeof i3.CommonModule, typeof NovoOptionModule], [typeof NovoTemplate, typeof NovoText, typeof NovoTitle, typeof NovoCaption, typeof NovoLabel, typeof NovoLink, typeof MarginDirective, typeof PaddingDirective, typeof BackgroundColorDirective, typeof TextColorDirective, typeof BorderDirective, typeof GapDirective, typeof AccentColorDirective, typeof FillColorDirective, typeof FlexDirective, typeof ThemeColorDirective, typeof SwitchCasesDirective, typeof VisibleDirective, typeof If2026ThemePipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoCommonModule>;
 }
 
@@ -749,5 +759,5 @@ type HasTabIndexCtor = Constructor<HasTabIndex>;
 /** Mixin to augment a directive with a `tabIndex` property. */
 declare function mixinTabIndex<T extends AbstractConstructor<CanDisable>>(base: T, defaultTabIndex?: number): HasTabIndexCtor & T;
 
-export { AccentColorDirective, BackgroundColorDirective, BorderDirective, DEFAULT_THEME, ErrorStateMatcher, FillColorDirective, FlexDirective, GapDirective, MarginDirective, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_OVERLAY_CONTAINER, NovoBaseTextElement, NovoCaption, NovoCommonModule, NovoLabel, NovoLink, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoTemplate, NovoText, NovoTheme, NovoThemeOptions, NovoTitle, PaddingDirective, ShowOnDirtyErrorStateMatcher, SwitchCasesDirective, TextColorDirective, ThemeColorDirective, VisibleDirective, _countGroupLabelsBeforeOption, _getOptionScrollPosition, getSpacingToken, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex, normalizeThemeName };
+export { AccentColorDirective, BackgroundColorDirective, BorderDirective, DEFAULT_THEME, ErrorStateMatcher, FillColorDirective, FlexDirective, GapDirective, If2026ThemePipe, MarginDirective, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_OVERLAY_CONTAINER, NovoBaseTextElement, NovoCaption, NovoCommonModule, NovoLabel, NovoLink, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoTemplate, NovoText, NovoTheme, NovoThemeOptions, NovoTitle, PaddingDirective, ShowOnDirtyErrorStateMatcher, SwitchCasesDirective, TextColorDirective, ThemeColorDirective, VisibleDirective, _countGroupLabelsBeforeOption, _getOptionScrollPosition, getSpacingToken, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex, normalizeThemeName };
 export type { AbstractConstructor, CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanRequire, CanRequireCtor, CanSize, CanSizeCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, Constructor, ElementSize, HasElementRef, HasErrorState, HasOverlay, HasOverlayCtor, HasTabIndex, HasTabIndexCtor, NovoOptionParentComponent, NovoPseudoCheckboxShape, NovoPseudoCheckboxState, ThemeChangeEvent, ThemeName, ThemePalette, TypographyLength, TypographySize, TypographyWeight };

package/elements/common/option/option.component.scss

@@ -83,3 +83,14 @@
 .novo-option-pseudo-checkbox {
   margin-inline-end: calc(var(--menu-side-padding) / 2);
 }
+
+// bh2026: white dropdown bg needs explicit hover — --background-main resolves to white
+[data-theme='bh2026'] .novo-option {
+  &:hover:not(.novo-option-inert) {
+    background: var(--color-background-subtle);
+  }
+  &:active:not(.novo-option-inert),
+  &.novo-active:not(.novo-option-inert) {
+    background: var(--color-background-subtle-hover);
+  }
+}

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

@@ -618,11 +618,87 @@ 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 {
+        background-color: var(--color-background-muted);
+      }
+      + .novo-data-table-detail-row {
+        background-color: var(--color-background-muted);
+      }
+    }
+    > .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/dropdown/Dropdown.scss

@@ -21,6 +21,21 @@
   }
 }
 
+// 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);

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);
+    }
+  }
+}