novo-elements 13.2.0 → 13.3.0

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

@@ -11,7 +11,6 @@
     background: var(--color-white);
     color: var(--button-secondary-text, var(--color-positive));
     border: var(--button-secondary-border, 1px solid $positive);
-    padding: 0 calc(#{var(--spacing-md)} - 1px);
 
     i.loading {
       margin-left: 0.8rem;
@@ -50,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);
@@ -117,37 +120,95 @@
   }
 }
 
-// bh2026: roomier, rounder card, larger title
+// 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-md, 1.6rem);
-    margin-left: var(--spacing-md);
+    padding: var(--spacing-padding-md) var(--spacing-padding-lg) var(--spacing-padding-md) 0;
+    border-bottom: 1px solid var(--color-border-default);
 
     .title {
-      ::ng-deep i.bhi-move {
-        display: none;
-      }
-
+      padding-inline: var(--spacing-gutter);
       h1,
       h2,
       h3 {
-        font-size: 1.8rem;
-        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 {
+        margin: 0;
+      }
+    }
+
+    .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-gap-sm);
     }
 
     novo-button {
-      color: rgba(var(--text-secondary), 0.7);
-      margin-left: var(--spacing-sm);
-      margin-right: var(--spacing-sm);
+      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/category-dropdown/CategoryDropdown.scss

@@ -15,7 +15,7 @@
       min-width: 400px;
       display: block;
       z-index: z("max");
-      border-radius: var(--border-radius-xsm, 2px);
+      border-radius: var(--border-radius-sm, 2px);
       top: 100%;
       margin-top: 5px;
     }

package/elements/checkbox/CheckList.scss

@@ -88,3 +88,72 @@
     }
   }
 }
+
+// bh2026: CSS-based checkbox rendering — replaces icon font glyphs
+:host-context([data-theme='bh2026']) {
+  .novo-checkbox-group {
+    label i.bhi-checkbox-empty,
+    label i.bhi-checkbox-filled {
+      font-size: 0;
+      display: inline-flex;
+      align-self: center;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    label i.bhi-checkbox-empty {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: 1px solid var(--color-border-control);
+        border-radius: 2px;
+        background: white;
+      }
+    }
+
+    label i.bhi-checkbox-filled {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 4px;
+        width: 9px;
+        height: 5px;
+        border-left: 2px solid var(--color-utility-blue-600);
+        border-bottom: 2px solid var(--color-utility-blue-600);
+        transform: rotate(-45deg);
+      }
+    }
+
+    &.disabled {
+      label {
+        opacity: 1;
+      }
+      label i.bhi-checkbox-empty {
+        &::before {
+          background: var(--color-background-utility-positive);
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-filled {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+    }
+  }
+}

package/elements/checkbox/Checkbox.scss

@@ -91,3 +91,107 @@
     }
   }
 }
+
+// bh2026: CSS-based checkbox rendering — replaces icon font glyphs
+:host-context([data-theme='bh2026']) {
+  .novo-checkbox-group {
+    // Suppress glyph and establish box dimensions for all box-style states
+    label i.bhi-checkbox-empty,
+    label i.bhi-checkbox-filled,
+    label i.bhi-checkbox-indeterminate {
+      font-size: 0;
+      display: inline-flex;
+      align-self: center;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    // Unchecked: white box with gray border
+    label i.bhi-checkbox-empty {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: 1px solid var(--color-border-control);
+        border-radius: 2px;
+        background: white;
+      }
+    }
+
+    // Checked: light-blue box with brand-blue border and checkmark
+    label i.bhi-checkbox-filled {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 4px;
+        width: 9px;
+        height: 5px;
+        border-left: 2px solid var(--color-utility-blue-600);
+        border-bottom: 2px solid var(--color-utility-blue-600);
+        transform: rotate(-45deg);
+      }
+    }
+
+    // Indeterminate: light-blue box with brand-blue border and dash
+    label i.bhi-checkbox-indeterminate {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 2px;
+        background: var(--color-utility-blue-600);
+      }
+    }
+
+    // Disabled: override the base opacity:0.4 and use explicit muted colors
+    &.disabled {
+      label {
+        opacity: 1;
+      }
+      label i.bhi-checkbox-empty {
+        &::before {
+          background: var(--color-background-utility-positive);
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-filled {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-indeterminate {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          background: var(--color-border-input-disabled);
+        }
+      }
+    }
+  }
+}

package/elements/chips/Chip.scss

@@ -46,7 +46,9 @@ $chip-spacing: (
   @include novo-body-text();
   background: var(--background-main);
   border: 1px solid transparent;
-  transition: all 200ms ease-in-out;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  transition-property: color, opacity, border-color, border-width, background-color;
   display: inline-flex;
   align-items: center;
   cursor: default;

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