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

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

@@ -119,24 +119,24 @@
 
 // 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 {
       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 i.bhi-move {
@@ -145,17 +145,17 @@
     }
 
     &:hover .title ::ng-deep i.bhi-move {
-      color: var(--color-content-subtle, #5d7798);
+      color: var(--color-text-subtle);
     }
 
     .actions {
       display: flex;
       align-items: center;
-      gap: var(--spacing-8, 0.8rem);
+      gap: var(--spacing-gap-sm);
     }
 
     novo-button {
-      color: var(--color-content-subtle, #5d7798);
+      color: var(--color-text-subtle);
     }
   }
 }

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

package/elements/header/Header.scss

@@ -154,10 +154,23 @@
 
 // bh2026: frosted translucent header + entity squircle icon
 :host-context([data-theme='bh2026']) {
+  & > 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(--color-transparency-white-90, rgba(255, 255, 255, 0.9));
+    background: var(--color-transparency-white-90);
     backdrop-filter: blur(12px);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    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);
@@ -167,7 +180,7 @@
     }
 
     utils {
-      color: var(--color-transparency-black-60);
+      color: var(--color-text-subtle);
     }
   }
 

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

@@ -300,3 +300,31 @@ 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);
+
+    .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;
+    }
+  }
+}
+

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

package/elements/search/SearchBox.scss

@@ -70,6 +70,40 @@
   }
 }
 
+:host(.has-search-button) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8, 0.8rem);
+  height: auto;
+  padding: var(--spacing-4, 0.4rem) 0 var(--spacing-4, 0.4rem) var(--spacing-16, 1.6rem);
+  border-radius: var(--border-radius-sm, 3px);
+  max-width: none;
+  box-shadow: 0 0.2rem 0.2rem var(--color-transparency-charcoal-04, transparent);
+
+  novo-icon:first-child {
+    flex-shrink: 0;
+    font-size: 1.6rem;
+    color: var(--color-text-subtle, var(--text-muted));
+  }
+
+  > input {
+    flex: 1 1 0;
+    min-width: 0;
+    height: auto;
+
+    &::placeholder {
+      color: var(--color-text-subtle, var(--text-muted));
+    }
+  }
+}
+
+:host-context([data-theme='bh2026']) {
+  &.has-search-button {
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--button-radius);
+  }
+}
+
 header {
   novo-search.always-open:not(.focused) {
     button {

package/elements/search/index.d.ts

@@ -3,10 +3,11 @@ import { OnInit, ElementRef, EventEmitter, ChangeDetectorRef, NgZone } from '@an
 import { ControlValueAccessor } from '@angular/forms';
 import { NovoLabelService } from 'novo-elements/services';
 import * as i2 from '@angular/common';
-import * as i3 from 'novo-elements/elements/icon';
-import * as i4 from 'novo-elements/elements/picker';
-import * as i5 from 'novo-elements/elements/tooltip';
-import * as i6 from 'novo-elements/elements/common';
+import * as i3 from 'novo-elements/elements/button';
+import * as i4 from 'novo-elements/elements/icon';
+import * as i5 from 'novo-elements/elements/picker';
+import * as i6 from 'novo-elements/elements/tooltip';
+import * as i7 from 'novo-elements/elements/common';
 
 declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     element: ElementRef;
@@ -18,6 +19,9 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     position: string;
     placeholder: string;
     alwaysOpen: boolean;
+    submitButton: boolean;
+    submitLabel: string;
+    submitButtonAutomationId: string;
     theme: string;
     color: string;
     closeOnSelect: boolean;
@@ -56,6 +60,7 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     get panelOpen(): boolean;
     get active(): boolean;
     /** END: Convenient Panel Methods. */
+    onSubmitClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
     _handleInput(event: KeyboardEvent): void;
     writeValue(value: any): void;
@@ -73,12 +78,12 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
      */
     clearValue(skip: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchBoxElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoSearchBoxElement, "novo-search", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "alwaysOpen": { "alias": "alwaysOpen"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "color": { "alias": "color"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "keepOpen": { "alias": "keepOpen"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "allowPropagation": { "alias": "allowPropagation"; "required": false; }; "overrideElement": { "alias": "overrideElement"; "required": false; }; }, { "searchChanged": "searchChanged"; "applySearch": "applySearch"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoSearchBoxElement, "novo-search", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "alwaysOpen": { "alias": "alwaysOpen"; "required": false; }; "submitButton": { "alias": "submitButton"; "required": false; }; "submitLabel": { "alias": "submitLabel"; "required": false; }; "submitButtonAutomationId": { "alias": "submitButtonAutomationId"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "color": { "alias": "color"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "keepOpen": { "alias": "keepOpen"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "allowPropagation": { "alias": "allowPropagation"; "required": false; }; "overrideElement": { "alias": "overrideElement"; "required": false; }; }, { "searchChanged": "searchChanged"; "applySearch": "applySearch"; }, never, ["*"], false, never>;
 }
 
 declare class NovoSearchBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoSearchBoxModule, [typeof NovoSearchBoxElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoPickerModule, typeof i5.NovoTooltipModule, typeof i6.NovoOverlayModule], [typeof NovoSearchBoxElement]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoSearchBoxModule, [typeof NovoSearchBoxElement], [typeof i2.CommonModule, typeof i3.NovoButtonModule, typeof i4.NovoIconModule, typeof i5.NovoPickerModule, typeof i6.NovoTooltipModule, typeof i7.NovoOverlayModule], [typeof NovoSearchBoxElement]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoSearchBoxModule>;
 }
 

package/elements/simple-table/table.scss

@@ -349,5 +349,5 @@ novo-simple-table-pagination {
 // bh2026: subtle, medium-weight column headers (matches data-table).
 [data-theme='bh2026'] .novo-simple-header-cell {
   font-weight: 600;
-  color: var(--color-content-subtle, #8ca1b9);
+  color: var(--color-text-subtle);
 }

package/elements/stepper/stepper.component.scss

@@ -102,16 +102,16 @@ $novo-stepper-line-gap: 8px !default;
 // bh2026: neutral progress circles
 :host-context([data-theme='bh2026']) {
   .novo-step-icon .novo-step-number {
-    background: var(--color-content-default, #282828);
+    background: var(--color-text-body);
     color: #fff;
-    border: 1px solid var(--color-content-default, #282828);
+    border: 1px solid var(--color-text-body);
     border-radius: 50%;
     box-shadow: none;
   }
   .novo-step-icon-not-touched .novo-step-number {
     background: transparent;
-    color: var(--color-content-subtle, #8ca1b9);
-    border: 1px solid var(--color-border-default, #d0d9e3);
+    color: var(--color-text-subtle);
+    border: 1px solid var(--color-border-default);
     border-radius: 50%;
     box-shadow: none;
   }